/*
Theme Name: Pick-a-Perfume Studio
Theme URI: https://pickaperfumestudio.com
Description: Studio child theme of Twenty Twenty-Five. Carries the Studio global design system (theme.json tokens), header/footer template parts, the homepage template, and reusable block patterns. Overrides only what Studio needs; everything else is inherited from Twenty Twenty-Five. No page builder, no paid add-ons, no custom blocks.
Author: Pick-a-Perfume Studio — AI CMO (Claude Code, Phase 2)
Template: twentytwentyfive
Version: 1.0.3
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pickaperfume-studio
*/

/*
 * Design tokens live in theme.json (settings + styles). This file carries only the
 * few rules that theme.json cannot express: form-control normalisation, the eyebrow /
 * overline / card / section-ground style utilities used by the patterns, the hero
 * carousel layout, and the reduced-motion fallbacks.
 *
 * Everything here is scoped and additive. No !important except the reduced-motion
 * guard, which must win.
 */

:root {
	--pps-radius-sm: var(--wp--custom--radius--sm, 2px);
	--pps-radius-md: var(--wp--custom--radius--md, 4px);
	--pps-line: var(--wp--preset--color--line, #d8cfbe);
	--pps-focus: var(--wp--custom--shadow--focus, 0 0 0 3px #efe6d6, 0 0 0 1px #a97f4b);
	--pps-transition-fast: var(--wp--custom--transition--fast, 150ms ease);
}

/* ---- Focus visibility: never removed (accessibility hard rule, DS §6) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: none;
	box-shadow: var(--pps-focus);
	border-radius: var(--pps-radius-sm);
}

/* ---- Style utility: overline / eyebrow (paragraph style variation is-style-overline) ---- */
.is-style-overline {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--2x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--overline, 0.14em);
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-strong);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ---- Style utility: card (group style is-style-card) ---- */
.is-style-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--pps-line);
	border-radius: var(--pps-radius-md);
	box-shadow: var(--wp--preset--shadow--sm);
	padding: var(--wp--preset--spacing--60);
	transition: box-shadow var(--wp--custom--transition--base, 200ms ease), transform var(--wp--custom--transition--base, 200ms ease);
}
.is-style-card:hover,
.is-style-card:focus-within {
	box-shadow: var(--wp--preset--shadow--md);
}

/* ---- Style utility: hairline separator variations ---- */
.wp-block-separator.is-style-hairline {
	border: none;
	border-top: 1px solid var(--pps-line);
	opacity: 1;
	max-width: 100%;
}
.wp-block-separator.is-style-accent {
	border: none;
	border-top: 2px solid var(--wp--preset--color--accent);
	opacity: 1;
	width: 48px;
	margin-inline: 0;
}

/* ---- Section grounds (group style variations) ---- */
.is-style-on-ivory { background-color: var(--wp--preset--color--base-secondary); }
.is-style-on-dark {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.is-style-on-dark :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--base); }
.is-style-on-dark .is-style-overline { color: var(--wp--preset--color--accent); }
.is-style-on-dark a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--accent); }

/* ---- Form controls: normalise WooCommerce + Hostinger + core forms to the system ---- */
input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="number"], [type="password"]),
select,
textarea,
.wc-block-components-text-input input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--pps-line);
	border-radius: var(--pps-radius-sm);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.7rem 0.85rem;
	transition: border-color var(--pps-transition-fast), box-shadow var(--pps-transition-fast);
}
input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="number"], [type="password"]):focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--pps-focus);
}

/* ---- Header / utility bar ---- */
.wp-block-template-part.site-header,
header.wp-block-template-part {
	border-bottom: 1px solid var(--pps-line);
}
.pps-utility-bar {
	font-size: var(--wp--preset--font-size--x-small);
}
.pps-utility-bar .wp-block-navigation {
	font-size: var(--wp--preset--font-size--x-small);
	gap: var(--wp--preset--spacing--40);
}

/* ---- Footer ---- */
.pps-footer a { text-decoration: none; }
.pps-footer a:hover { text-decoration: underline; }
.pps-footer .is-style-overline { color: var(--wp--preset--color--accent); }

/* ---- Hero carousel (framework; DS §7) ---- */
.pps-hero { position: relative; }
.pps-hero__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.pps-hero__track::-webkit-scrollbar { display: none; }
.pps-hero__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-width: 100%;
}
.pps-hero__controls {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50);
}
.pps-hero__dot {
	width: 8px; height: 8px; padding: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	border: 1px solid var(--wp--preset--color--accent);
	background: transparent;
	cursor: pointer;
}
.pps-hero__dot[aria-current="true"] { background: var(--wp--preset--color--accent); }
.pps-hero__arrow {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--pps-line);
	border-radius: var(--wp--custom--radius--pill, 999px);
	width: 40px; height: 40px;
	cursor: pointer;
	line-height: 1;
}

/* No-JS / reduced-motion fallback: stack the slides, hide the controls */
.pps-hero:not(.pps-hero--ready) .pps-hero__track { overflow: visible; display: block; }
.pps-hero:not(.pps-hero--ready) .pps-hero__slide { min-width: 0; }
.pps-hero:not(.pps-hero--ready) .pps-hero__controls { display: none; }

@media (prefers-reduced-motion: reduce) {
	.pps-hero__track { scroll-behavior: auto !important; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- Fragrance Finder (scaffold; DS §7, assets/finder.js) ---- */
.pps-finder .step + .step { margin-top: var(--wp--preset--spacing--50); }
.pps-finder[data-js="on"] .step { display: none; }
.pps-finder[data-js="on"] .step.active { display: block; }

/* ---- Visible placeholder marker (build-time only; must never ship to launch) ---- */
.pps-placeholder {
	display: block;
	border: 1px dashed var(--wp--preset--color--accent);
	background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--wp--preset--color--accent-soft) 8px, var(--wp--preset--color--accent-soft) 9px);
	color: var(--wp--preset--color--contrast-secondary);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--pps-radius-sm);
}