/*
Theme Name: Persian Premium
Theme URI: https://example.com/persian-premium
Author: Your Store
Author URI: https://example.com
Description: A production-ready, premium WooCommerce theme for Iranian/Persian food products (saffron, dried fruits, herbal products, gift boxes). Fully multilingual, RTL/LTR native, HPOS-compatible, built for speed. Signature feature: an AJAX "Select Options" quick-configure modal backed by real WooCommerce product variations.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 9.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: persian-premium
Domain Path: /languages
Tags: e-commerce, food-and-drink, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, translation-ready, block-patterns
*/

/* ==========================================================================
   DESIGN TOKENS
   These are the single source of truth for the visual identity. They are
   duplicated (intentionally) in theme.json so both classic PHP templates
   and the block editor read the same palette/type scale. Do not hard-code
   hex values anywhere else in the theme - reference these variables.
   ========================================================================== */
:root{
	/* ---- Color: warm, restrained, food-forward. Gold is an accent, not a
	   wallpaper. Named after the ingredients that inspired them. ---- */
	--pp-cream:        #FAF6EE; /* page background - milled rice / parchment */
	--pp-paper:         #FFFFFF; /* cards, surfaces */
	--pp-charcoal:      #221F1C; /* primary text, near-black but warm */
	--pp-ink-muted:     #6B655C; /* secondary text */
	--pp-saffron:       #C08A28; /* primary accent - saffron thread gold */
	--pp-saffron-deep:  #96691C; /* hover/active state of accent */
	--pp-burgundy:      #6B2A34; /* sale badges, gift-box accent */
	--pp-sage:          #6C7259; /* herbal / natural / in-stock signals */
	--pp-sand:          #E7DFCF; /* borders, dividers, subtle fills */
	--pp-sand-dark:     #D9CDAF;
	--pp-error:         #A3402F;
	--pp-focus:         #1D6FB8; /* accessible focus ring, deliberately not gold (gold fails contrast for focus rings on cream) */

	/* ---- Type ---- */
	--pp-font-display: "Fraunces", "Vazirmatn", Georgia, serif;
	--pp-font-body:    "Public Sans", "Vazirmatn", -apple-system, BlinkMacSystemFont, sans-serif;
	--pp-font-rtl:     "Vazirmatn", "Public Sans", Tahoma, sans-serif;

	/* ---- Spacing scale (8px base) ---- */
	--pp-space-1: 0.5rem;
	--pp-space-2: 0.75rem;
	--pp-space-3: 1rem;
	--pp-space-4: 1.5rem;
	--pp-space-5: 2rem;
	--pp-space-6: 3rem;
	--pp-space-7: 4rem;
	--pp-space-8: 6rem;

	/* ---- Layout ---- */
	--pp-container: 1280px;
	--pp-radius-sm: 6px;
	--pp-radius-md: 12px;
	--pp-radius-lg: 20px;
	--pp-shadow-card: 0 1px 2px rgba(34,31,28,.04), 0 8px 24px rgba(34,31,28,.06);
	--pp-shadow-modal: 0 20px 60px rgba(34,31,28,.25);

	/* ---- Motion ---- */
	--pp-ease: cubic-bezier(.22,.61,.36,1);
	--pp-duration-fast: 150ms;
	--pp-duration: 260ms;
}

@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   BASE
   All physical CSS properties below use LOGICAL properties (margin-inline,
   padding-block, inset-inline-start, border-start-start-radius, etc.) so the
   layout mirrors correctly for RTL locales without a separate ruleset.
   direction:rtl / dir="rtl" is applied automatically by WordPress based on
   the active language - see inc/class-i18n.php.
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{ text-size-adjust: 100%; }

body{
	margin: 0;
	background: var(--pp-cream);
	color: var(--pp-charcoal);
	font-family: var(--pp-font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.rtl,
html[dir="rtl"] body{
	font-family: var(--pp-font-rtl);
}

img, svg{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4,h5,h6{
	font-family: var(--pp-font-display);
	font-weight: 600;
	line-height: 1.15;
	margin-block: 0 var(--pp-space-3);
	letter-spacing: -0.01em;
}
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4{ font-family: var(--pp-font-rtl); font-weight: 700; letter-spacing: 0; }

h1{ font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3.75rem); }
h2{ font-size: clamp(1.75rem, 1.55rem + 0.9vw, 2.5rem); }
h3{ font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); }

p{ margin-block: 0 var(--pp-space-3); color: var(--pp-ink-muted); }

.pp-container{
	width: 100%;
	max-width: var(--pp-container);
	margin-inline: auto;
	padding-inline: var(--pp-space-4);
}

/* Visually-hidden but accessible (skip link target labels, form labels, etc.) */
.pp-visually-hidden{
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.skip-link{
	position: absolute;
	inset-inline-start: var(--pp-space-3);
	top: -100px;
	background: var(--pp-charcoal);
	color: #fff;
	padding: var(--pp-space-2) var(--pp-space-3);
	border-radius: var(--pp-radius-sm);
	z-index: 10000;
	transition: top var(--pp-duration) var(--pp-ease);
}
.skip-link:focus{ top: var(--pp-space-2); }

/* Consistent, visible focus state everywhere - accessibility requirement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
	outline: 2px solid var(--pp-focus);
	outline-offset: 2px;
	border-radius: var(--pp-radius-sm);
}

/* ==========================================================================
   SIGNATURE ELEMENT: the "thread line"
   A single restrained saffron-thread motif (three soft curves ending in a
   stigma dot) used as a section-divider/underline. This is the ONE
   decorative flourish in the theme - reused sparingly instead of dense
   Persian ornamentation, so it reads as premium rather than cliche.
   ========================================================================== */
.pp-thread{
	display: block;
	width: 72px;
	height: 14px;
	margin-block: var(--pp-space-2) var(--pp-space-4);
	color: var(--pp-saffron);
}
.pp-thread--center{ margin-inline: auto; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.pp-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--pp-font-body);
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: .85em 1.6em;
	min-height: 44px; /* touch-target minimum, per accessibility guidance */
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform var(--pp-duration-fast) var(--pp-ease),
	            background-color var(--pp-duration-fast) var(--pp-ease),
	            border-color var(--pp-duration-fast) var(--pp-ease),
	            color var(--pp-duration-fast) var(--pp-ease);
	white-space: nowrap;
}
.pp-btn:active{ transform: scale(.97); }
body.rtl .pp-btn{ font-family: var(--pp-font-rtl); }
.pp-btn--primary{ background: var(--pp-charcoal); color: #fff; }
.pp-btn--primary:hover{ background: var(--pp-saffron-deep); }
.pp-btn--outline{ background: transparent; color: var(--pp-charcoal); border-color: var(--pp-sand-dark); }
.pp-btn--outline:hover{ border-color: var(--pp-charcoal); }
.pp-btn--gold{ background: var(--pp-saffron-deep); color: #fff; } /* white-on-saffron measured 3.04:1 — fails WCAG AA 4.5:1; saffron-deep passes at 4.85:1 (verified via ui-ux-guide accessibility check) */
.pp-btn--gold:hover{ background: #7A5416; }
.pp-btn--block{ width: 100%; }
.pp-btn[disabled], .pp-btn.disabled{ opacity: .5; cursor: not-allowed; pointer-events: none; }
.pp-btn--sm{ padding: .6em 1.2em; font-size: .8125rem; }

/* Utility */
.pp-visually-hide-empty:empty{ display:none; }