/*
Theme Name: Hanuman Sena
Theme URI: https://hanumansena.org
Author: Hanuman Sena Web Team
Author URI: https://hanumansena.org
Description: Premium, fully responsive WordPress theme for Hanuman Sena — "Sacred Monumental Modernism": cinematic dark sanctum surfaces, saffron light, antique-gold detailing, scroll-driven motion, a complete blog, and labelled space for every image, video and 3D model.
Version: 2.5.0
Requires at least: 6.0
Tested up to: 6.9
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: hanuman-sena
Tags: blog, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, one-column, custom-colors, accessibility-ready
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1. Design tokens
   2. Tone scopes (dark / charcoal / ivory / saffron)
   3. Reset & base
   4. Typography
   5. Accessibility helpers
   6. WordPress core classes
   Everything else lives in assets/css/ (layout, components, site, forms, effects, pages/*).
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
	/* ---- Brand palette (from the Master Design System) ---- */
	--sanctum-black: #0B0907;      /* page background, hero, footer           */
	--temple-charcoal: #15100D;    /* secondary dark surfaces / cards         */
	--charcoal-2: #1C1511;         /* elevated dark surface                   */
	--charcoal-3: #261C16;         /* hover / pressed dark surface            */
	--saffron: #F47A1F;            /* primary CTA, links, active, sacred glow */
	--saffron-bright: #FF9A4D;     /* hover highlight, light bloom            */
	--saffron-mid: #DE6418;        /* gradient end that still keeps AA text   */
	--deep-saffron: #C94E12;       /* gradient depth, glows, borders only     */
	--antique-gold: #D9A441;       /* premium detail, rules, icons            */
	--gold-soft: #E9C47B;          /* gold highlight                          */
	--warm-ivory: #F6EBDD;         /* light editorial sections, text on dark  */
	--ivory-2: #EEDFC9;            /* alternate ivory band                    */
	--ivory-3: #FBF6EE;            /* cards on ivory                          */
	--sindoor-red: #B73420;        /* rare emphasis: alerts, ritual accent    */
	--muted-stone: #9B8A7D;        /* secondary text, metadata, borders       */
	--stone-ink: #6E5E52;          /* muted text on ivory (AA)                */
	--saffron-ink: #A8420C;        /* saffron text on ivory (AA)              */
	--gold-ink: #7D5A12;           /* gold text on ivory (AA)                 */
	--success: #5E9E6B;
	--white: #FFFFFF;

	/* ---- Typography ---- */
	--font-display: 'Marcellus', 'Noto Serif Devanagari', Georgia, 'Times New Roman', serif;
	--font-body: 'Manrope', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-hi-display: 'Noto Serif Devanagari', 'Marcellus', Georgia, serif;
	--font-hi-body: 'Noto Sans Devanagari', 'Manrope', system-ui, sans-serif;

	/* Fluid type — mobile first; breakpoint overrides at the bottom of this block */
	--fs-hero: clamp(2.75rem, 10.5vw + 0.3rem, 3.625rem);   /* 44 – 58px  */
	--fs-h2: clamp(2.125rem, 1.2rem + 3.2vw, 2.75rem);      /* 34 – 44px  */
	--fs-h3: clamp(1.3125rem, 1.1rem + 0.9vw, 1.625rem);    /* 21 – 26px  */
	--fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);    /* body large 18 – 20px */
	--fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);     /* body 16 – 18px */
	--fs-sm: 0.9375rem;
	--fs-xs: 0.8125rem;
	--fs-eyebrow: 0.75rem;                                   /* 12 – 13px */
	--fs-stat: clamp(2.125rem, 1.5rem + 3vw, 3.5rem);

	--lh-tight: 1.04;
	--lh-snug: 1.2;
	--lh-body: 1.65;
	--tracking-display: -0.03em;
	--tracking-eyebrow: 0.1em;

	/* ---- Layout ---- */
	--container: 1320px;
	--container-narrow: 820px;
	--container-text: 720px;
	--gutter: 16px;                 /* page side gutter: 16 → 20 → 24 → 32 */
	--gap: 16px;                    /* grid gap: 16 → 24 → 32            */
	--section-y: 4rem;              /* 64 – 80 mobile; see breakpoints   */
	--header-h: 60px;               /* 56–60 mobile; 64 tablet; 80 desktop */

	/* ---- Shape ---- */
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-btn: 16px;
	--r-pill: 999px;

	/* ---- Light, shadow, glow ---- */
	--glow-saffron: 0 0 0 1px rgba(244, 122, 31, 0.38), 0 18px 60px -24px rgba(244, 122, 31, 0.55);
	--shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 60px -34px rgba(0, 0, 0, 0.7);
	--shadow-ivory: 0 1px 2px rgba(11, 9, 7, 0.05), 0 18px 44px -24px rgba(60, 35, 10, 0.28);
	--inner-glow: inset 0 0 0 1px rgba(244, 122, 31, 0.14);

	/* ---- Motion ---- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
	--dur-fast: 200ms;
	--dur: 320ms;
	--dur-slow: 700ms;
	--dur-reveal: 900ms;

	/* ---- Stacking ---- */
	--z-base: 1;
	--z-header: 100;
	--z-menu: 200;
	--z-modal: 300;
	--z-toast: 400;
	--z-progress: 500;

	/* ---- Semantic colours (default = dark tone) ---- */
	--bg: var(--sanctum-black);
	--bg-alt: var(--temple-charcoal);
	--surface: var(--temple-charcoal);
	--surface-2: var(--charcoal-2);
	--fg: var(--warm-ivory);
	--fg-soft: rgba(246, 235, 221, 0.82);
	--fg-muted: rgba(246, 235, 221, 0.62);
	--heading: var(--warm-ivory);
	--line: rgba(155, 138, 125, 0.24);
	--line-strong: rgba(155, 138, 125, 0.42);
	--accent: var(--saffron);       /* accent TEXT colour for this tone        */
	--accent-2: var(--antique-gold);/* secondary accent text (gold)            */
	--on-accent: var(--sanctum-black);
	--card-shadow: var(--shadow-soft);

	color-scheme: dark;
}

/* Tablet 768+ */
@media (min-width: 768px) {
	:root {
		--fs-hero: clamp(3.5rem, 7.2vw, 4rem);                 /* 56 – 64px */
		--fs-h2: clamp(2.75rem, 1.6rem + 3vw, 3.5rem);         /* 44 – 56px */
		--fs-h3: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem);
		--gutter: 24px;
		--gap: 24px;
		--section-y: clamp(5rem, 9vw, 6.5rem);                 /* 80 – 104  */
		--header-h: 64px;
	}
}

/* Desktop 1024+ */
@media (min-width: 1024px) {
	:root {
		--fs-hero: clamp(4rem, 6.4vw, 6.5rem);                 /* 64 – 104px */
		--fs-h2: clamp(3.25rem, 2rem + 2.6vw, 4.25rem);        /* 52 – 68px  */
		--fs-h3: clamp(1.75rem, 1.3rem + 0.7vw, 2rem);         /* 24 – 32px  */
		--gutter: 32px;
		--gap: 32px;
		--section-y: clamp(7.5rem, 9vw, 10rem);                /* 120 – 160  */
		--header-h: 80px;
	}
}


/* ==========================================================================
   2. TONE SCOPES — flip semantic colours per section: class="section tone-ivory"
   ========================================================================== */
.tone-dark {
	--bg: var(--sanctum-black);
	--bg-alt: var(--temple-charcoal);
	--surface: var(--temple-charcoal);
	--surface-2: var(--charcoal-2);
	--fg: var(--warm-ivory);
	--fg-soft: rgba(246, 235, 221, 0.82);
	--fg-muted: rgba(246, 235, 221, 0.62);
	--heading: var(--warm-ivory);
	--line: rgba(155, 138, 125, 0.24);
	--line-strong: rgba(155, 138, 125, 0.42);
	--accent: var(--saffron);
	--accent-2: var(--antique-gold);
	--on-accent: var(--sanctum-black);
	--card-shadow: var(--shadow-soft);
	color-scheme: dark;
}

.tone-charcoal {
	--bg: var(--temple-charcoal);
	--bg-alt: var(--sanctum-black);
	--surface: var(--charcoal-2);
	--surface-2: var(--charcoal-3);
	--fg: var(--warm-ivory);
	--fg-soft: rgba(246, 235, 221, 0.82);
	--fg-muted: rgba(246, 235, 221, 0.62);
	--heading: var(--warm-ivory);
	--line: rgba(155, 138, 125, 0.26);
	--line-strong: rgba(155, 138, 125, 0.44);
	--accent: var(--saffron);
	--accent-2: var(--antique-gold);
	--on-accent: var(--sanctum-black);
	--card-shadow: var(--shadow-soft);
	color-scheme: dark;
}

.tone-ivory {
	--bg: var(--warm-ivory);
	--bg-alt: var(--ivory-2);
	--surface: var(--ivory-3);
	--surface-2: var(--white);
	--fg: var(--sanctum-black);
	--fg-soft: rgba(11, 9, 7, 0.78);
	--fg-muted: var(--stone-ink);
	--heading: var(--sanctum-black);
	--line: rgba(11, 9, 7, 0.12);
	--line-strong: rgba(11, 9, 7, 0.26);
	--accent: var(--saffron-ink);
	--accent-2: var(--gold-ink);
	--on-accent: var(--sanctum-black);
	--card-shadow: var(--shadow-ivory);
	color-scheme: light;
}

/* Saffron band: black text on a saffron → mid-saffron gradient (AA safe) */
.tone-saffron {
	--bg: var(--saffron);
	--bg-alt: var(--saffron-mid);
	--surface: rgba(11, 9, 7, 0.08);
	--surface-2: rgba(11, 9, 7, 0.14);
	--fg: var(--sanctum-black);
	--fg-soft: rgba(11, 9, 7, 0.88);
	--fg-muted: rgba(11, 9, 7, 0.74);
	--heading: var(--sanctum-black);
	--line: rgba(11, 9, 7, 0.22);
	--line-strong: rgba(11, 9, 7, 0.42);
	--accent: var(--sanctum-black);
	--accent-2: var(--sanctum-black);
	--on-accent: var(--warm-ivory);
	--card-shadow: none;
	color-scheme: light;
}


/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
	background: var(--sanctum-black);
}

/* No global `scroll-behavior: smooth`: it makes ScrollTrigger measure positions mid-scroll on devices where Lenis is
   not running (touch). main.js scrolls anchors with an explicit behaviour instead. */

/* Lenis smooth-scroll recommended rules */
html.lenis,
html.lenis body {
	height: auto;
}
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-stopped {
	overflow: hidden;
}
/* (Lenis' optional `iframe { pointer-events:none }` rule is intentionally omitted: it would make embedded
   forms — e.g. the Google membership form — unclickable.) */

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

body.is-locked {
	overflow: hidden;
}

.site {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.site-main {
	flex: 1 0 auto;
	display: block;
	min-width: 0;
}

img,
picture,
video,
canvas,
svg,
iframe,
model-viewer {
	max-width: 100%;
}

img,
picture,
video,
svg {
	display: block;
}

img,
video {
	height: auto;
}

svg {
	flex-shrink: 0;
}

figure {
	margin: 0;
}

ul,
ol {
	margin: 0 0 1.25em;
	padding-left: 1.25em;
}

li {
	margin-bottom: 0.35em;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.5rem 0;
}

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

button {
	cursor: pointer;
}

[hidden] {
	display: none !important;
}

::selection {
	background: var(--saffron);
	color: var(--sanctum-black);
}

table {
	width: 100%;
	border-collapse: collapse;
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--heading);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-hero);
	line-height: var(--lh-tight);
	letter-spacing: var(--tracking-display);
}

h2 {
	font-size: var(--fs-h2);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
	letter-spacing: -0.01em;
}

h4 {
	font-size: var(--fs-h4);
	line-height: 1.3;
}

h5 {
	font-size: 1.0625rem;
	line-height: 1.35;
}

h6 {
	font-size: 0.9375rem;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

p {
	margin: 0 0 1.25em;
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

/* Hindi / Devanagari: never apply negative tracking (it breaks conjuncts) */
:lang(hi),
[lang="hi"] {
	letter-spacing: 0 !important;
	line-height: 1.35;
}

p:lang(hi),
p[lang="hi"] {
	font-family: var(--font-hi-body);
	line-height: 1.8;
}

h1:lang(hi),
h2:lang(hi),
h3:lang(hi),
h4:lang(hi),
.hindi {
	font-family: var(--font-hi-display);
}

.hindi {
	letter-spacing: 0;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--dur-fast) ease;
}

a:hover {
	color: var(--saffron-bright);
}

.tone-ivory a:not(.btn):hover {
	color: var(--deep-saffron);
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--fs-sm);
}

blockquote {
	margin: 0;
}

code,
kbd,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

/* Lead paragraph */
.lead {
	font-size: var(--fs-lg);
	line-height: 1.6;
	color: var(--fg-soft);
	max-width: var(--container-text);
}

/* Eyebrow / metadata label */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 1.1rem;
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}

.eyebrow::before {
	content: '';
	width: 2rem;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	flex: none;
}

.eyebrow--gold {
	color: var(--accent-2);
}

.eyebrow--plain::before {
	display: none;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-muted {
	color: var(--fg-muted);
}

.text-accent {
	color: var(--accent);
}

.text-gold {
	color: var(--accent-2);
}

/* Accent word inside a heading */
.accent {
	color: var(--accent);
}

.accent-gold {
	color: var(--accent-2);
}


/* ==========================================================================
   5. ACCESSIBILITY HELPERS
   ========================================================================== */
:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
	border-radius: 4px;
}

:focus:not(:focus-visible) {
	outline: none;
}

.visually-hidden,
.screen-reader-text {
	position: absolute !important;
	left: 0; /* pinned to the left edge so a hidden label inside a scroll rail can never widen the document */
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.85rem 1.25rem;
	clip: auto;
	clip-path: none;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	background: var(--saffron);
	color: var(--sanctum-black);
	font-weight: 700;
	border-radius: var(--r-sm);
}

.skip-link {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100000;
	padding: 0.85rem 1.25rem;
	background: var(--saffron);
	color: var(--sanctum-black);
	font-weight: 700;
	border-radius: var(--r-sm);
	transform: translateY(-200%);
	transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
	transform: translateY(0);
	color: var(--sanctum-black);
}

/* ==========================================================================
   6. WORDPRESS CORE CLASSES
   ========================================================================== */
.alignleft {
	float: left;
	margin: 0.25rem 1.75rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.25rem 0 1rem 1.75rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	width: min(100vw - 2 * var(--gutter), 1100px);
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
	font-size: var(--fs-sm);
	color: var(--fg-muted);
	margin-top: 0.6rem;
}

.sticky,
.bypostauthor {
	display: block;
}

.gallery {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
	margin-bottom: 1.5rem;
}

.gallery-columns-1 { --gallery-cols: 1; }
.gallery-columns-2 { --gallery-cols: 2; }
.gallery-columns-4 { --gallery-cols: 4; }
.gallery-columns-5 { --gallery-cols: 5; }

.gallery-item {
	margin: 0;
}

@media (max-width: 767px) {
	.gallery {
		--gallery-cols: 2;
	}
	.alignleft,
	.alignright {
		float: none;
		margin: 1rem auto;
	}
}