/**
 * Radha Maid Service — Premium Override Layer
 * ------------------------------------------------------------------
 * DROP-IN FILE. Save as: assets/css/radha-premium.css
 *
 * Enqueue this LAST (after tokens.css and every module CSS) in
 * inc/class-assets.php so its :root token overrides win and cascade
 * through the whole theme. Example (add inside the existing enqueue
 * method, as the final wp_enqueue_style call):
 *
 *   wp_enqueue_style(
 *     'agencycare-radha-premium',
 *     get_theme_file_uri( 'assets/css/radha-premium.css' ),
 *     array( 'agencycare-tokens' ),   // depend on your tokens handle
 *     AGENCYCARE_VERSION
 *   );
 *
 * WHY A TOKEN LAYER (not rewritten module files):
 * The theme is already fully token-driven and ships a "Premium
 * Experience Layer" (gradients, glass, float, tilt). Re-typing hero.css
 * / home.css by hand would fight that. Instead we retune the *tokens*
 * (fonts + warm surfaces) — every component that consumes them updates
 * automatically — and add a few targeted finishes below. Nothing here
 * changes layout, logic, or class structure.
 * ------------------------------------------------------------------ */

/* Fonts. Prefer enqueuing this URL in class-assets.php (see handoff §3);
   this @import is a safe fallback if you don't. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Public+Sans:wght@400;500;600;700&display=swap');

/* ================================================================
   1. TOKEN OVERRIDES — the core of the premium restyle
   ================================================================ */
:root {
	/* Typography: refined serif display + clean grotesque body */
	--font-family-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
	--font-family-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Warm surfaces. IMPORTANT: --color-background stays white so cards,
	   header and other surfaces that consume it are unaffected. We add a
	   dedicated warm ivory *page canvas* and warm the alt-section tone. */
	--color-page: #f6f3ec;         /* warm ivory — the body/page canvas */
	--color-background-alt: #eef2f0; /* warm sage — .section--alt bands */

	/* Deep ink heading colour (slightly warmer/darker than gray-900) */
	--color-heading: #14211f;

	/* Premium heading rhythm */
	--tracking-display: -0.02em;
}

/* The page canvas. Sections are transparent, so non-alt sections show
   this ivory and .section--alt shows the warm sage — the alternating
   rhythm from the mockups. */
body {
	background-color: var(--color-page);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ================================================================
   2. TYPOGRAPHY FINISHES
   ================================================================ */
h1, h2, h3,
.home-hero__title,
.section-heading__title,
.home-final-cta__title,
.page-hero__title {
	font-weight: var(--font-weight-medium); /* Newsreader looks best at 500 */
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
}

.home-hero__title {
	line-height: 1.06;
}

/* Section eyebrow: uppercase, tracked, teal */
.section-heading__eyebrow,
.home-hero__eyebrow,
.page-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-xs);
	color: var(--color-primary-600);
}

/* Body copy warmth */
body,
p {
	color: var(--color-text);
	line-height: var(--line-height-relaxed);
}

/* ================================================================
   3. BUTTONS — gradient primary + amber secondary
   ================================================================ */
.btn {
	border-radius: var(--radius-lg);
	font-weight: var(--font-weight-semibold);
	transition:
		transform var(--transition-fast) var(--ease-standard),
		box-shadow var(--transition-fast) var(--ease-standard),
		background-color var(--transition-fast) var(--ease-standard);
}

.btn--primary {
	background-image: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
	border-color: transparent;
	box-shadow: 0 12px 28px rgba(31, 111, 99, 0.30);
}

.btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 16px 34px rgba(31, 111, 99, 0.36);
}

.btn--secondary {
	background-color: var(--color-accent-400);
	color: var(--color-heading);
	border-color: transparent;
}

.btn--secondary:hover {
	filter: brightness(0.97);
	color: var(--color-heading);
}

.btn--outline {
	background-color: var(--color-background);
	border: 1px solid var(--color-border-strong);
	color: var(--color-primary-700);
}

/* ================================================================
   4. CARD FINISHES — larger radius, soft shadow, hover lift
   Targets the theme's known card components. Safe: only radius,
   border, background and shadow are touched.
   ================================================================ */
.feature-card,
.service-card,
.caregiver-card,
.testimonial-card,
.info-card,
.city-card,
.blog-preview-card,
.statistic-block,
.trust-badge {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl); /* 1rem / 16px */
	box-shadow: 0 2px 6px rgba(20, 33, 31, 0.04);
	transition:
		transform var(--transition-base) var(--ease-standard),
		box-shadow var(--transition-base) var(--ease-standard);
}

.feature-card:hover,
.service-card:hover,
.caregiver-card:hover,
.blog-preview-card:hover,
.city-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 44px rgba(20, 33, 31, 0.13);
}

/* Card icon chip */
.feature-card__icon,
.service-card__icon,
.trust-badge__icon {
	border-radius: var(--radius-lg);
	background-color: var(--color-primary-50);
	color: var(--color-primary-500);
}

/* ================================================================
   5. SECTION RHYTHM — generous vertical space
   ================================================================ */
.section {
	padding-block: var(--space-24); /* ~96px */
}

.section--sm {
	padding-block: var(--space-8);
}

/* Section heading block spacing */
.section-heading {
	margin-block-end: var(--space-12);
}

/* ================================================================
   6. DARK BANDS — trust strip, stats, footer, final CTA
   ================================================================ */
.home-trust-strip,
.home-statistics {
	background-color: var(--color-primary-900);
	color: var(--color-text-inverse);
}

.home-statistics {
	background-image: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-900));
}

.statistic-block__number {
	font-family: var(--font-family-heading);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.01em;
}

.home-final-cta__panel {
	border-radius: var(--radius-xl);
	background-image: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-900));
	box-shadow: 0 30px 64px rgba(20, 50, 44, 0.34);
}

/* ================================================================
   7. HERO — lean on the theme's existing u-gradient-mesh + u-float;
   just refine sizing/tone here.
   ================================================================ */
.home-hero {
	background-color: var(--color-page);
}

.home-hero__title {
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.6rem);
}

.home-hero__visual-panel,
.home-hero__visual-card {
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-2xl);
}

.home-hero__visual-card {
	background-color: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--blur-md));
	backdrop-filter: blur(var(--blur-md));
	border: 1px solid var(--glass-border);
}

/* ================================================================
   8. FAQ — flat, bordered <details>
   ================================================================ */
.faq-item {
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 2px 6px rgba(20, 33, 31, 0.03);
}

/* ================================================================
   9. LINKS
   ================================================================ */
a {
	color: var(--color-link);
}
a:hover {
	color: var(--color-link-hover);
}

/* ================================================================
   10. MOBILE POLISH (the grid/nav responsiveness already lives in
   layout.css + navigation.css — this only tightens headings)
   ================================================================ */
@media (max-width: 48rem) {
	.section {
		padding-block: var(--space-16);
	}
	.section-heading {
		margin-block-end: var(--space-8);
	}
}