/* =============================================================================
   Astra Studio — Glass : Design System
   Mobile-first. Tokens + base + glass utilities + buttons + blobs.
   Depends on Fraunces + Inter (enqueued in functions.php).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Surfaces & ink */
	--bg-paper: #FAF6F2;
	--bg-surface: #F3ECE6;
	--border-warm: #E7DDD4;
	--text-ink: #241F1C;
	--text-muted: #6B5E55;

	/* Brand — cherry */
	--cherry: #C01E3C;
	--cherry-deep: #9E1530;
	--cherry-tint: rgba(192, 30, 60, 0.12);

	/* Glass */
	--glass-bg: rgba(255, 255, 255, 0.55);
	--glass-bg-dark: rgba(36, 31, 28, 0.40);
	--glass-blur: blur(20px) saturate(150%);
	--glass-border: rgba(255, 255, 255, 0.65);
	--glass-shadow: 0 8px 30px rgba(80, 40, 30, 0.12);
	--glass-specular: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 40%);

	/* Radii */
	--r-lg: 28px;
	--r-md: 18px;
	--r-sm: 12px;

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	/* ---- Derived design tokens (not in the brief, kept additive) ---- */

	/* Fluid type scale — clamp(min, preferred, max), mobile-first.
	   Steps roughly follow a ~1.2 (mobile) → 1.25 (desktop) ratio. */
	--fs-100: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);   /* small / captions */
	--fs-200: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);       /* body            */
	--fs-300: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);   /* lead / large    */
	--fs-400: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);    /* h3              */
	--fs-500: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);      /* h2              */
	--fs-600: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);         /* h1              */

	/* Line heights */
	--lh-tight: 1.12;   /* display headings */
	--lh-snug: 1.3;     /* sub-headings     */
	--lh-body: 1.65;    /* paragraphs       */

	/* Spacing scale (generous, fluid where it helps rhythm) */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: clamp(2rem, 1.4rem + 3vw, 3.5rem);
	--space-xl: clamp(3rem, 2rem + 5vw, 6rem);
	--space-2xl: clamp(4.5rem, 3rem + 7vw, 9rem);

	/* Typeface stacks */
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;

	/* Shared transition duration */
	--dur: 0.28s;
}

/* -----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	background-color: var(--bg-paper);
	color: var(--text-ink);
	font-family: var(--font-body);
	font-size: var(--fs-200);
	line-height: var(--lh-body);
	font-feature-settings: "kern", "liga", "calt";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Display headings — Fraunces, with optical sizing on for true display cut. */
h1,
h2,
h3 {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-display);
	font-optical-sizing: auto;       /* let Fraunces pick the optical size */
	font-variation-settings: "opsz" 144;
	line-height: var(--lh-tight);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text-ink);
	text-wrap: balance;
}

h1 { font-size: var(--fs-600); }
h2 { font-size: var(--fs-500); line-height: var(--lh-snug); }
h3 {
	font-size: var(--fs-400);
	line-height: var(--lh-snug);
	font-weight: 500;
	font-variation-settings: "opsz" 72;
}

/* h4–h6 stay in the body face for hierarchy contrast. */
h4,
h5,
h6 {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-body);
	line-height: var(--lh-snug);
	font-weight: 600;
	color: var(--text-ink);
}

h4 { font-size: var(--fs-300); }
h5 { font-size: var(--fs-200); }
h6 { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

p {
	margin: 0 0 var(--space-md);
	max-width: 68ch;        /* comfortable measure */
}

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

a {
	color: var(--cherry);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--dur) var(--ease);
}

a:hover,
a:focus {
	color: var(--cherry-deep);
}

/* Visible, on-brand focus ring for keyboard users. */
:focus-visible {
	outline: 3px solid var(--cherry);
	outline-offset: 3px;
	border-radius: 2px;
}

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
}

hr {
	border: 0;
	border-top: 1px solid var(--border-warm);
	margin: var(--space-lg) 0;
}

/* -----------------------------------------------------------------------------
   3. Glass utility
   --------------------------------------------------------------------------
   Frosted panel. Sits over the blob layer (section 6) so the blur refracts
   warm/cherry colour. The ::before paints a top-edge specular highlight that
   sells the "thick glass" look without affecting layout.
*/
.glass {
	position: relative;
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	box-shadow: var(--glass-shadow);
	color: var(--text-ink);                 /* dark ink on light frost — ≥4.5:1 */
	/* Clip the specular highlight to the rounded corners. */
	overflow: hidden;
	isolation: isolate;                     /* keep ::before stacking local */
}

/* Top-edge specular highlight. */
.glass::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--glass-specular);
	pointer-events: none;
	z-index: -1;                            /* behind content, above panel bg */
}

/* Dark variant — for use over light/busy imagery; text flips to paper. */
.glass--dark {
	background: var(--glass-bg-dark);
	border-color: rgba(255, 255, 255, 0.18);
	color: var(--bg-paper);                 /* light ink on dark frost — ≥4.5:1 */
}

.glass--dark::before {
	/* Softer highlight so it reads on a dark panel. */
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 40%);
}

/* Convenience inner padding when .glass is used as a card/section. */
.glass--pad {
	padding: var(--space-lg);
}

/* -----------------------------------------------------------------------------
   4. @supports fallback
   --------------------------------------------------------------------------
   If backdrop-filter is unsupported, there is no real blur — so we swap to a
   solid, opaque-enough warm panel. Keeps contrast and the frosted *feel*.
*/
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.glass {
		/* Warm translucent → effectively a frosted panel, no blur needed. */
		background: rgba(250, 246, 242, 0.92);
		border-color: var(--border-warm);
	}

	.glass--dark {
		background: rgba(36, 31, 28, 0.92);
		border-color: rgba(255, 255, 255, 0.14);
	}

	/* Highlight reads as a subtle sheen rather than glass refraction. */
	.glass::before {
		opacity: 0.6;
	}
}

/* -----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn-cherry,
.btn-glass {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	padding: var(--space-xs) var(--space-md);
	min-height: 44px;
	font-family: var(--font-body);
	font-size: var(--fs-200);
	font-weight: 600;
	line-height: 1;
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	-webkit-user-select: none;
	user-select: none;
	transition:
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		transform var(--dur) var(--ease);
}

/* Solid cherry — white text meets AA on both cherry and cherry-deep. */
.btn-cherry {
	background-color: var(--cherry);
	color: #fff;
	box-shadow: 0 4px 14px rgba(192, 30, 60, 0.28);
}

.btn-cherry:hover,
.btn-cherry:focus-visible {
	background-color: var(--cherry-deep);
	color: #fff;
	transform: translateY(-2px);            /* lift */
	box-shadow: 0 8px 22px rgba(158, 21, 48, 0.34);
}

.btn-cherry:active {
	transform: translateY(0);
	box-shadow: 0 3px 10px rgba(158, 21, 48, 0.3);
}

/* Glass button — frosted surface, dark ink. */
.btn-glass {
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-color: var(--glass-border);
	color: var(--text-ink);
	box-shadow: var(--glass-shadow);
}

@media (hover: hover) and (pointer: fine) {
	.btn-cherry:hover,
	.btn-glass:hover {
		transform: translateY(-2px);
	}
}

.btn-glass:hover,
.btn-glass:focus-visible {
	background: rgba(255, 255, 255, 0.7);
	color: var(--cherry-deep);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(80, 40, 30, 0.16);
}

.btn-glass:active {
	transform: translateY(0);
}

/* Same opaque fallback for the glass button where blur is unsupported. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.btn-glass {
		background: rgba(250, 246, 242, 0.92);
		border-color: var(--border-warm);
	}
	.btn-glass:hover,
	.btn-glass:focus-visible {
		background: #fff;
	}
}

/* -----------------------------------------------------------------------------
   6. Background blobs
   --------------------------------------------------------------------------
   Soft, blurred radial shapes dropped BEHIND glass sections so the frost has
   warm + cherry colour to refract. Put `.has-blobs` on a positioned section
   (it sets position + clipping), then add `.blob` children, optionally with a
   placement modifier.
*/
.has-blobs {
	position: relative;
	overflow: hidden;        /* keep the soft edges inside the section */
	isolation: isolate;
}

.blob {
	position: absolute;
	z-index: -1;             /* always behind content + glass */
	width: clamp(220px, 40vw, 520px);
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.85;
	pointer-events: none;
	/* Default: cherry. */
	background: radial-gradient(
		circle at 50% 50%,
		var(--cherry) 0%,
		var(--cherry-tint) 55%,
		transparent 72%
	);
}

/* Warm peach blob — pairs with the cherry one for a duotone wash. */
.blob--peach {
	background: radial-gradient(
		circle at 50% 50%,
		rgba(255, 184, 140, 0.9) 0%,
		rgba(255, 184, 140, 0.22) 55%,
		transparent 72%
	);
}

/* A second cherry tone for variety. */
.blob--cherry-soft {
	background: radial-gradient(
		circle at 50% 50%,
		rgba(192, 30, 60, 0.55) 0%,
		var(--cherry-tint) 55%,
		transparent 72%
	);
}

/* Placement helpers (mobile-first; tweak per layout as needed). */
.blob--tl { top: -8%;  left: -10%; }
.blob--tr { top: -12%; right: -8%; }
.blob--bl { bottom: -12%; left: -8%; }
.blob--br { bottom: -10%; right: -10%; }

/* Optional gentle drift — disabled under reduced motion (section 7). */
@keyframes blob-drift {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(2%, -3%, 0) scale(1.06); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

.blob--animate {
	animation: blob-drift 18s var(--ease) infinite;
}

/* -----------------------------------------------------------------------------
   Layout helpers (small, optional)
   -------------------------------------------------------------------------- */
.section {
	padding-block: var(--space-xl);
}

.container {
	width: min(100% - 2 * var(--space-md), 72rem);
	margin-inline: auto;
}

.stack > * + * {
	margin-top: var(--space-md);
}

/* -----------------------------------------------------------------------------
   7. prefers-reduced-motion
   --------------------------------------------------------------------------
   Honour the user's setting: kill transitions, transforms, and blob drift.
*/
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.blob--animate {
		animation: none !important;
	}

	/* Remove the hover "lift" so nothing moves. */
	.btn-cherry:hover,
	.btn-cherry:focus-visible,
	.btn-glass:hover,
	.btn-glass:focus-visible {
		transform: none !important;
	}
}