/*
Theme Name: Glow Theory
Theme URI: https://aponadigital.cloud/
Description: Child theme for Glow Theory Salon and Spa, Kolkata. Carries the Glow Theory Rose Gold design system: cream ground, rose gold accent, Platypi display serif and Fira Sans body.
Author: Apona Digital
Author URI: https://aponadigital.cloud/
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: glow-theory
*/

/*
  Colour, type, spacing and button tokens live in theme.json so the block editor
  renders the same as the front end. This file only holds what theme.json cannot
  express: focus states, form controls, the section rhythm helper and the mobile
  collapse.

  Palette map:
    base      #FDF8F5  cream ground
    contrast  #2E2A27  charcoal ink
    accent-1  #B76E79  rose gold, decorative only
    accent-2  #9E5561  rose gold deep, all text and interactive use
    accent-3  #C9A227  soft gold, marks only, never under white text
    accent-4  #6B615C  muted text
    accent-5  #EADFD8  hairline
    accent-6  #FFFFFF  surface white
*/

/* Focus ring on every interactive element. Never removed. */
:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius);
}

/* Body links: offset underline so descenders stay readable. */
.wp-block-post-content a:where(:not(.wp-element-button)),
.entry-content a:where(:not(.wp-element-button)) {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Buttons: comfortable thumb target, no shadow, small tactile press. */
.wp-element-button,
.wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: background-color 120ms ease, transform 120ms ease;
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

/* Secondary button: outline on the ground, same radius and height. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--accent-2);
	border: 1px solid var(--wp--preset--color--accent-2);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-2);
	color: #ffffff;
}

/* Form fields: 16px minimum so mobile browsers do not zoom on focus. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
select,
textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--accent-6);
	border: 1px solid var(--wp--preset--color--accent-5);
	border-radius: var(--wp--custom--radius);
	padding: 12px 14px;
	width: 100%;
	max-width: 100%;
}

::placeholder {
	color: var(--wp--preset--color--accent-4);
	opacity: 1;
}

/* Keep headings off ragged widows. */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

/* Italic descenders in display type clip at tight leading. Give them room. */
:where(h1, h2) em,
:where(h1, h2) i {
	line-height: 1.15;
}

/* Hold running copy near 68 characters so the eye finds the next line. */
.wp-block-post-content > p,
.entry-content > p {
	max-width: var(--wp--custom--measure);
}

/* Section rhythm. One pair of values, held on every page. */
.glow-section {
	padding-block: var(--wp--custom--section--desktop);
}

/* Hairline divider between sections. */
.wp-block-separator:not(.is-style-dots) {
	border: none;
	border-top: 1px solid var(--wp--preset--color--accent-5);
	height: 0;
	opacity: 1;
}

/* Gold section opener mark. Decorative only, never carries text. */
.glow-rule-gold {
	width: 40px;
	height: 2px;
	background-color: var(--wp--preset--color--accent-3);
	border: none;
	margin-inline: 0;
}

/* Images share the one radius. */
.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius);
}

/* Mobile: collapse the section rhythm and open the column gaps. */
@media (max-width: 781px) {
	.glow-section {
		padding-block: var(--wp--custom--section--mobile);
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		gap: var(--wp--preset--spacing--40);
	}
}

/* Nothing scrolls sideways on a 360px handset. */
@media (max-width: 400px) {
	body {
		overflow-x: hidden;
	}
}

/* Motion dial sits at 0.2. Anything that moves stops here. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}