/* ==========================================================================
   Shree Mandir Melbourne — Design System
   Tokens (CSS custom properties) + base elements + reusable components.
   Change colours/fonts here and the whole site follows.
   ========================================================================== */

:root {
	/* Brand palette */
	--sm-saffron: #C2410C;
	--sm-saffron-600: #9A3412;
	--sm-saffron-400: #E9822F;
	--sm-saffron-100: #FDEBDD;
	--sm-maroon: #7A1F2B;
	--sm-maroon-700: #5C1520;
	--sm-maroon-900: #3A0D14;
	--sm-gold: #C9A227;
	--sm-gold-600: #9C7A14;
	--sm-gold-300: #E6CF7A;
	--sm-gold-100: #F6EDCF;
	--sm-ivory: #FBF7EF;
	--sm-cream: #F4ECDD;
	--sm-white: #FFFFFF;

	/* Neutrals / semantic */
	--sm-text: #1F2937;
	--sm-text-soft: #4B5563;
	--sm-muted: #6B7280;
	--sm-border: #E8DFCC;
	--sm-success: #15803D;
	--sm-focus: #2563EB;

	/* Typography */
	--sm-font-heading: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--sm-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--sm-fs-xs: 0.75rem;
	--sm-fs-sm: 0.875rem;
	--sm-fs-base: 1rem;
	--sm-fs-lg: 1.125rem;
	--sm-fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--sm-fs-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--sm-fs-h2: clamp(2rem, 1.5rem + 2vw, 2.85rem);
	--sm-fs-h1: clamp(2.4rem, 1.7rem + 3vw, 3.75rem);
	--sm-lh-tight: 1.15;
	--sm-lh-body: 1.7;

	/* Spacing scale (4px base) */
	--sm-space-1: 0.25rem;
	--sm-space-2: 0.5rem;
	--sm-space-3: 0.75rem;
	--sm-space-4: 1rem;
	--sm-space-5: 1.5rem;
	--sm-space-6: 2rem;
	--sm-space-7: 3rem;
	--sm-space-8: 4rem;
	--sm-space-9: 6rem;
	--sm-section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

	/* Shape & depth */
	--sm-radius-sm: 6px;
	--sm-radius-md: 12px;
	--sm-radius-lg: 20px;
	--sm-radius-pill: 999px;
	--sm-shadow-sm: 0 1px 2px rgba(58, 13, 20, .06), 0 1px 3px rgba(58, 13, 20, .08);
	--sm-shadow-md: 0 6px 18px -6px rgba(58, 13, 20, .18);
	--sm-shadow-lg: 0 24px 48px -16px rgba(58, 13, 20, .28);
	--sm-shadow-gold: 0 0 0 3px rgba(201, 162, 39, .35);

	/* Motion */
	--sm-ease: cubic-bezier(.22, .61, .36, 1);
	--sm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--sm-dur-fast: 160ms;
	--sm-dur: 280ms;
	--sm-dur-slow: 600ms;

	/* Layout */
	--sm-container: 1200px;
	--sm-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
	--sm-header-h: 84px;

	/* Decorative pattern (subtle mandala dots) */
	--sm-pattern: radial-gradient(circle at 1px 1px, rgba(201, 162, 39, .22) 1px, transparent 0);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	font-family: var(--sm-font-body);
	font-size: var(--sm-fs-base);
	line-height: var(--sm-lh-body);
	color: var(--sm-text);
	background: var(--sm-ivory);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--sm-font-heading);
	font-weight: 600;
	line-height: var(--sm-lh-tight);
	color: var(--sm-maroon-900);
	letter-spacing: -0.01em;
	margin: 0 0 var(--sm-space-4);
}
h1 { font-size: var(--sm-fs-h1); }
h2 { font-size: var(--sm-fs-h2); }
h3 { font-size: var(--sm-fs-h3); }
h4 { font-size: var(--sm-fs-xl); }
p { margin: 0 0 var(--sm-space-4); }
a { color: var(--sm-saffron); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--sm-dur-fast) var(--sm-ease); }
a:hover { color: var(--sm-maroon); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--sm-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--sm-gold-300); color: var(--sm-maroon-900); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 10000; top: 8px; left: 8px;
	padding: 10px 16px; background: var(--sm-white); color: var(--sm-maroon); border-radius: var(--sm-radius-sm);
}

/* ---------- Layout ---------- */
.sm-container { width: 100%; max-width: var(--sm-container); margin-inline: auto; padding-inline: var(--sm-gutter); }
.sm-section { padding-block: var(--sm-section-y); position: relative; }
.sm-section--ivory { background: var(--sm-ivory); }
.sm-section--cream { background: var(--sm-cream); }
.sm-section--white { background: var(--sm-white); }
.sm-section--maroon { background: linear-gradient(135deg, var(--sm-maroon-900), var(--sm-maroon)); color: #F8EBDD; }
.sm-section--maroon h1, .sm-section--maroon h2, .sm-section--maroon h3 { color: var(--sm-gold-100); }
.sm-section--pattern::before {
	content: ""; position: absolute; inset: 0; background-image: var(--sm-pattern);
	background-size: 22px 22px; opacity: .6; pointer-events: none;
}
.sm-grid { display: grid; gap: var(--sm-space-6); }
.sm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.sm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.sm-center { text-align: center; }
.sm-prose { max-width: 760px; margin-inline: auto; }

/* ---------- Section heading ---------- */
.sm-eyebrow {
	display: inline-flex; align-items: center; gap: .6em;
	font-family: var(--sm-font-body); font-size: var(--sm-fs-xs); font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; color: var(--sm-saffron);
	margin-bottom: var(--sm-space-3);
}
.sm-eyebrow::before, .sm-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.sm-divider {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	margin: var(--sm-space-4) auto var(--sm-space-6); color: var(--sm-gold);
}
.sm-divider::before, .sm-divider::after { content: ""; height: 1px; width: 64px; background: linear-gradient(90deg, transparent, currentColor); }
.sm-divider::after { transform: scaleX(-1); }
.sm-divider span { width: 9px; height: 9px; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 0 4px rgba(201, 162, 39, .18); }
.sm-lead { font-size: var(--sm-fs-lg); color: var(--sm-text-soft); }

/* ---------- Buttons ---------- */
.sm-btn {
	--_bg: var(--sm-saffron); --_fg: #fff; --_bd: var(--sm-saffron);
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: .8em 1.6em; border-radius: var(--sm-radius-pill);
	font-family: var(--sm-font-body); font-size: var(--sm-fs-sm); font-weight: 600; letter-spacing: .02em;
	line-height: 1.2; text-decoration: none; cursor: pointer;
	color: var(--_fg); background: var(--_bg); border: 1.5px solid var(--_bd);
	position: relative; overflow: hidden; isolation: isolate;
	transition: transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease), background var(--sm-dur) var(--sm-ease), color var(--sm-dur) var(--sm-ease);
}
.sm-btn:hover { color: var(--_fg); transform: translateY(-2px); box-shadow: var(--sm-shadow-md); }
.sm-btn:active { transform: translateY(0); }
.sm-btn--maroon { --_bg: var(--sm-maroon); --_bd: var(--sm-maroon); }
.sm-btn--gold { --_bg: var(--sm-gold); --_bd: var(--sm-gold); --_fg: var(--sm-maroon-900); }
.sm-btn--outline { --_bg: transparent; --_fg: var(--sm-maroon); --_bd: var(--sm-maroon); }
.sm-btn--outline:hover { --_bg: var(--sm-maroon); --_fg: #fff; }
.sm-btn--light { --_bg: transparent; --_fg: var(--sm-gold-100); --_bd: var(--sm-gold-300); }
.sm-btn--light:hover { --_bg: var(--sm-gold-100); --_fg: var(--sm-maroon-900); }
.sm-btn--lg { font-size: var(--sm-fs-base); padding: 1em 2em; }

/* ---------- Cards ---------- */
.sm-card {
	background: var(--sm-white); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6); box-shadow: var(--sm-shadow-sm); position: relative;
	transition: transform var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease);
}
.sm-card:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow-lg); }
.sm-card--accent { border-top: 4px solid var(--sm-saffron); }
.sm-card__icon {
	width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
	background: var(--sm-saffron-100); color: var(--sm-saffron); margin-bottom: var(--sm-space-4);
}
.sm-card__icon svg { width: 26px; height: 26px; }
.sm-card__title { font-size: var(--sm-fs-h3); margin-bottom: var(--sm-space-4); }

/* Placeholder block used on not-yet-designed pages */
.sm-placeholder {
	border: 2px dashed var(--sm-gold-300); border-radius: var(--sm-radius-lg);
	background: repeating-linear-gradient(45deg, rgba(246, 237, 207, .45) 0 12px, transparent 12px 24px);
	padding: var(--sm-space-7) var(--sm-space-5); text-align: center; color: var(--sm-text-soft);
}

/* ---------- Reveal-on-scroll utility (JS adds .is-visible) ---------- */
.sm-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--sm-dur-slow) var(--sm-ease), transform var(--sm-dur-slow) var(--sm-ease); }
.sm-reveal.is-visible { opacity: 1; transform: none; }

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