/* ==========================================================================
   Laraib Organic — Design tokens + reset + typography + primitives
   The single source of truth for the whole theme. Every other stylesheet
   MUST consume these variables and MUST NOT redefine raw hex colours.
   ========================================================================== */

:root {
	/* --- Brand: deep herbal green -------------------------------------- */
	--lo-green-950: #06251C;
	--lo-green-900: #0B3B2E;
	--lo-green-800: #104A39;
	--lo-green-700: #166046;
	--lo-green-600: #1C7B57;
	--lo-green-500: #269C6D;
	--lo-green-400: #45B98A;
	--lo-green-300: #7CD3AD;
	--lo-green-200: #B6E7D0;
	--lo-green-100: #DCF2E7;
	--lo-green-50:  #F1FAF5;

	/* --- Brand: warm gold ---------------------------------------------- */
	--lo-gold-700: #8C6318;
	/* gold-600 is the workhorse for small uppercase labels on white and cream.
	   The original #B08125 measured only ~3.5:1 there, so every eyebrow, card
	   category line and section label failed WCAG AA. #8F671C measures ~5.0:1
	   on white and ~4.8:1 on cream and still reads as the same brand gold.
	   Light backgrounds only — dark sections use gold-400/300, which are fine. */
	--lo-gold-600: #8F671C;
	--lo-gold-500: #D0A03C;
	--lo-gold-400: #E0B963;
	--lo-gold-300: #EED399;
	--lo-gold-100: #FAF0D8;

	/* --- Neutrals / surfaces ------------------------------------------- */
	--lo-cream:   #FCF9F3;
	--lo-sand:    #F4EBDC;
	--lo-paper:   #FFFFFF;
	--lo-ink:     #10201A;
	--lo-body:    #4C5F57;
	/* #7B8B83 measured only ~3.0–3.6:1 on cream and sand, so every small
	   secondary line failed WCAG AA. This reads just as quiet but clears 5:1
	   on white, cream and sand alike. */
	--lo-muted:   #56655E;
	--lo-line:    rgba(11, 59, 46, 0.12);
	--lo-line-soft: rgba(11, 59, 46, 0.07);

	/* --- Accents -------------------------------------------------------- */
	--lo-ruby:    #A81F3C;
	--lo-ruby-soft:#FBE9ED;
	--lo-berry:   #6B2A54;
	--lo-amber:   #C2610E;
	--lo-success: #1C7B57;

	/* --- Semantic ------------------------------------------------------- */
	--lo-bg:        var(--lo-cream);
	--lo-surface:   var(--lo-paper);
	--lo-text:      var(--lo-ink);
	--lo-text-soft: var(--lo-body);
	--lo-primary:   var(--lo-green-900);
	--lo-accent:    var(--lo-gold-500);

	/* --- Type ------------------------------------------------------------ */
	--lo-font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
	--lo-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lo-font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;

	--lo-fs-xs:   0.75rem;    /* 12 */
	--lo-fs-sm:   0.8125rem;  /* 13 */
	--lo-fs-base: 0.9375rem;  /* 15 */
	--lo-fs-md:   1.0625rem;  /* 17 */
	--lo-fs-lg:   1.25rem;    /* 20 */
	--lo-fs-xl:   1.5rem;     /* 24 */
	--lo-fs-2xl:  clamp(1.65rem, 1.2rem + 1.6vw, 2.25rem);
	--lo-fs-3xl:  clamp(2rem, 1.35rem + 2.6vw, 3rem);
	--lo-fs-4xl:  clamp(2.4rem, 1.4rem + 4.2vw, 4.25rem);
	--lo-fs-5xl:  clamp(2.8rem, 1.4rem + 5.6vw, 5.25rem);

	--lo-lh-tight: 1.08;
	--lo-lh-snug: 1.28;
	--lo-lh-base: 1.7;

	/* --- Space (8px scale) ---------------------------------------------- */
	--lo-s1: 4px;
	--lo-s2: 8px;
	--lo-s3: 12px;
	--lo-s4: 16px;
	--lo-s5: 24px;
	--lo-s6: 32px;
	--lo-s7: 40px;
	--lo-s8: 56px;
	--lo-s9: 72px;
	--lo-s10: 96px;
	--lo-s11: 128px;

	--lo-section-y: clamp(56px, 6vw, 104px);

	/* --- Shape ----------------------------------------------------------- */
	--lo-r-sm: 8px;
	--lo-r: 14px;
	--lo-r-lg: 22px;
	--lo-r-xl: 32px;
	--lo-r-pill: 999px;

	/* --- Elevation -------------------------------------------------------- */
	--lo-shadow-xs: 0 1px 2px rgba(11, 59, 46, .06);
	--lo-shadow-sm: 0 2px 8px rgba(11, 59, 46, .07);
	--lo-shadow: 0 10px 30px -12px rgba(11, 59, 46, .22);
	--lo-shadow-lg: 0 26px 60px -22px rgba(11, 59, 46, .34);
	--lo-shadow-gold: 0 14px 34px -14px rgba(176, 129, 37, .5);

	/* --- Motion ------------------------------------------------------------ */
	--lo-ease: cubic-bezier(.22, .61, .36, 1);
	--lo-ease-out: cubic-bezier(.16, 1, .3, 1);
	--lo-dur: .38s;

	/* --- Layout ------------------------------------------------------------ */
	--lo-container: 1320px;
	--lo-container-narrow: 940px;
	--lo-gutter: clamp(18px, 4vw, 40px);
	--lo-header-h: 84px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--lo-header-h) + 24px);
}

body {
	margin: 0;
	background: var(--lo-bg);
	color: var(--lo-text-soft);
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-md);
	line-height: var(--lo-lh-base);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* `clip` — NOT `hidden`. overflow-x:hidden makes <body> a scroll container,
	   which silently breaks IntersectionObserver against the viewport root (so
	   every scroll animation stops firing) and weakens position:sticky.
	   overflow:clip contains the same stray horizontal overflow without
	   creating a scroll box. */
	overflow-x: clip;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
svg { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--lo-s4);
	font-family: var(--lo-font-display);
	color: var(--lo-text);
	font-weight: 600;
	line-height: var(--lo-lh-snug);
	letter-spacing: -0.015em;
	font-variation-settings: "SOFT" 0, "WONK" 0;
}

h1 { font-size: var(--lo-fs-4xl); line-height: var(--lo-lh-tight); }
h2 { font-size: var(--lo-fs-3xl); line-height: 1.14; }
h3 { font-size: var(--lo-fs-2xl); }
h4 { font-size: var(--lo-fs-xl); }
h5 { font-size: var(--lo-fs-lg); }
h6 { font-size: var(--lo-fs-md); }

p { margin: 0 0 var(--lo-s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--lo-green-700); text-decoration: none; transition: color .2s var(--lo-ease); }
a:hover { color: var(--lo-gold-600); }

ul, ol { margin: 0 0 var(--lo-s4); padding-left: 1.2em; }
li { margin-bottom: var(--lo-s2); }

blockquote {
	margin: var(--lo-s6) 0;
	padding: var(--lo-s5) var(--lo-s6);
	border-left: 3px solid var(--lo-gold-500);
	background: var(--lo-green-50);
	border-radius: 0 var(--lo-r) var(--lo-r) 0;
	font-family: var(--lo-font-display);
	font-size: var(--lo-fs-lg);
	font-style: italic;
	color: var(--lo-green-900);
}

hr { border: 0; height: 1px; background: var(--lo-line); margin: var(--lo-s7) 0; }

table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--lo-s3) var(--lo-s4); border-bottom: 1px solid var(--lo-line); text-align: left; }
th { font-weight: 700; color: var(--lo-text); }

figure { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--lo-green-200); color: var(--lo-green-950); }

:focus-visible {
	outline: 2px solid var(--lo-gold-500);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.lo-container {
	width: 100%;
	max-width: var(--lo-container);
	margin-inline: auto;
	padding-inline: var(--lo-gutter);
}

.lo-container--narrow { max-width: var(--lo-container-narrow); }

.lo-section { padding-block: var(--lo-section-y); position: relative; }
.lo-section--tight { padding-block: clamp(40px, 4vw, 64px); }
.lo-section--cream { background: var(--lo-cream); }
.lo-section--sand { background: var(--lo-sand); }
.lo-section--mint { background: var(--lo-green-50); }
.lo-section--dark { background: var(--lo-green-950); color: rgba(255,255,255,.78); }
.lo-section--dark h1, .lo-section--dark h2, .lo-section--dark h3, .lo-section--dark h4 { color: #fff; }

.lo-grid { display: grid; gap: var(--lo-s5); }
.lo-flex { display: flex; }
.lo-center { display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   Section heading
   ========================================================================== */

.lo-head { margin-bottom: var(--lo-s8); max-width: 720px; }
.lo-head--center { margin-inline: auto; text-align: center; }

.lo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--lo-s2);
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--lo-gold-600);
	margin-bottom: var(--lo-s3);
}
.lo-eyebrow::before {
	content: "";
	width: 26px; height: 1px;
	background: currentColor;
	opacity: .55;
}
.lo-head--center .lo-eyebrow::after {
	content: "";
	width: 26px; height: 1px;
	background: currentColor;
	opacity: .55;
}
.lo-section--dark .lo-eyebrow { color: var(--lo-gold-400); }

.lo-head h2 { margin-bottom: var(--lo-s4); }
.lo-head p { color: var(--lo-text-soft); font-size: var(--lo-fs-md); margin-bottom: 0; }
.lo-section--dark .lo-head p { color: rgba(255,255,255,.7); }

/* Accent word inside a display heading */
.lo-accent { color: var(--lo-gold-600); font-style: italic; }
.lo-section--dark .lo-accent { color: var(--lo-gold-400); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.lo-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lo-s2);
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: var(--lo-r-pill);
	background: var(--lo-green-900);
	color: #fff;
	font-family: var(--lo-font-body);
	font-size: var(--lo-fs-base);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .28s var(--lo-ease-out), box-shadow .28s var(--lo-ease-out), background-color .22s var(--lo-ease), color .22s var(--lo-ease), border-color .22s var(--lo-ease);
	box-shadow: 0 8px 22px -12px rgba(11,59,46,.7);
}

.lo-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover {
	background: var(--lo-green-800);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--lo-shadow);
}

.lo-btn--gold { background: linear-gradient(135deg, var(--lo-gold-500), var(--lo-gold-600)); color: var(--lo-green-950); box-shadow: var(--lo-shadow-gold); }
.lo-btn--gold:hover { background: linear-gradient(135deg, var(--lo-gold-400), var(--lo-gold-500)); color: var(--lo-green-950); }

.lo-btn--ghost { background: transparent; color: var(--lo-green-900); border-color: var(--lo-line); box-shadow: none; }
.lo-btn--ghost:hover { background: var(--lo-green-900); color: #fff; border-color: var(--lo-green-900); }

.lo-btn--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.32); backdrop-filter: blur(6px); box-shadow: none; }
.lo-btn--light:hover { background: #fff; color: var(--lo-green-950); border-color: #fff; }

.lo-btn--sm { padding: 10px 20px; font-size: var(--lo-fs-sm); }
.lo-btn--lg { padding: 18px 40px; font-size: var(--lo-fs-md); }
.lo-btn--block { width: 100%; }

/* Text link with animated arrow */
.lo-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: var(--lo-fs-base);
	color: var(--lo-green-800);
	letter-spacing: .01em;
}
.lo-link svg, .lo-link .lo-link__arrow { transition: transform .3s var(--lo-ease-out); }
.lo-link:hover { color: var(--lo-gold-600); }
.lo-link:hover svg, .lo-link:hover .lo-link__arrow { transform: translateX(5px); }

/* ==========================================================================
   Badges & pills
   ========================================================================== */

.lo-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--lo-r-pill);
	font-size: var(--lo-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.4;
}
.lo-badge--green { background: var(--lo-green-100); color: var(--lo-green-800); }
.lo-badge--gold  { background: var(--lo-gold-100); color: var(--lo-gold-700); }
.lo-badge--ruby  { background: var(--lo-ruby-soft); color: var(--lo-ruby); }
.lo-badge--solid { background: var(--lo-green-900); color: #fff; }

/* ==========================================================================
   Cards
   ========================================================================== */

.lo-card {
	background: var(--lo-surface);
	border: 1px solid var(--lo-line-soft);
	border-radius: var(--lo-r-lg);
	overflow: hidden;
	transition: transform var(--lo-dur) var(--lo-ease-out), box-shadow var(--lo-dur) var(--lo-ease-out), border-color var(--lo-dur) var(--lo-ease);
}
.lo-card:hover { transform: translateY(-6px); box-shadow: var(--lo-shadow-lg); border-color: transparent; }

/* ==========================================================================
   Urdu typography
   ========================================================================== */

.lo-urdu {
	font-family: var(--lo-font-urdu);
	direction: rtl;
	line-height: 2.4;
	font-size: 1.05em;
}

/* ==========================================================================
   Reveal-on-scroll (progressive enhancement — JS adds .is-in)
   ========================================================================== */

.lo-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--lo-ease-out), transform .8s var(--lo-ease-out);
	transition-delay: var(--lo-reveal-delay, 0ms);
	will-change: opacity, transform;
}
.lo-reveal.is-in { opacity: 1; transform: none; }
.no-js .lo-reveal { opacity: 1; transform: none; }

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

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px; width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
}
.screen-reader-text:focus {
	clip-path: none;
	height: auto; width: auto;
	padding: 14px 22px;
	background: #fff;
	color: var(--lo-green-900);
	border-radius: var(--lo-r);
	box-shadow: var(--lo-shadow-lg);
	z-index: 100000;
	top: 12px; left: 12px;
	font-weight: 700;
}

.lo-skip-link:focus { position: fixed !important; }

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0 var(--lo-s5) var(--lo-s4) 0; }
.alignright { float: right; margin: 0 0 var(--lo-s4) var(--lo-s5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { max-width: min(1160px, 100%); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption {
	font-size: var(--lo-fs-sm);
	color: var(--lo-muted);
	text-align: center;
	margin-top: var(--lo-s2);
}
.sticky, .bypostauthor { }