@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");

/* ==========================================================
   SANTACRUZ — EDITORIAL CREAM / DEEP BLUE THEME

   Inspired by the supplied reference:
   - Warm cream page backgrounds
   - Deep blue hero and navigation areas
   - Orange-red editorial accents
   - Clean sans-serif body copy
   - High-contrast serif display headings

   This file only changes shared theme tokens and public typography.
   Existing page structure and component layouts remain unchanged.
   ========================================================== */

:root {
    /* Typography */
    --theme-font-sans: "DM Sans", "Segoe UI", Roboto, Arial, sans-serif;
    --theme-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    /* Page and surface colours */
    --theme-page-bg: #f7f3eb;
    --theme-surface: #ffffff;
    --theme-surface-raised: #fffdf9;
    --theme-surface-soft: #efe8dd;
    /* Text colours */
    --theme-text: #302b27;
    --theme-text-strong: #10100f;
    --theme-text-heading: #0b0b0a;
    --theme-text-muted: #5a5049;
    --theme-text-muted-soft: #655c52;
    --theme-text-inverse: #fffdf8;
    --theme-text-static-dark: #000000;
    /* Brand and action colours */
    --theme-brand: #ff4a2f;
    --theme-brand-strong: #e93d22;
    --theme-brand-hover: #cf331c;
    --theme-brand-soft: #ffd3c9;
    --theme-brand-soft-alt: #ffb7a7;
    --theme-brand-contrast: #20120e;
    --theme-action: #ff4a2f;
    /* Feature/service card icon colours */
    --theme-feature-icon: var(--theme-brand-strong);
    --theme-feature-icon-bg-start: #fff7f3;
    --theme-feature-icon-bg-end: var(--theme-brand-soft);
    --theme-feature-icon-border: rgba(var(--theme-rgb-brand), 0.22);
    /* Deep backgrounds used by public hero/header sections */
    --theme-hero-bg: #063b5b;
    --theme-hero-bg-strong: #033652;
    --theme-hero-bg-soft: #084b70;
    --theme-hero-bg-accent: #0a5b80;
    /* Borders */
    --theme-border: rgba(72, 57, 46, 0.13);
    --theme-border-strong: rgba(57, 45, 36, 0.17);
    --theme-border-muted: #e3d9cd;
    /* RGB channels for alpha/gradient usage */
    --theme-rgb-surface: 255, 255, 255;
    --theme-rgb-page-bg: 247, 243, 235;
    --theme-rgb-surface-soft: 239, 232, 221;
    --theme-rgb-text-strong: 16, 16, 15;
    --theme-rgb-hero-bg: 6, 59, 91;
    --theme-rgb-hero-bg-alt: 3, 54, 82;
    --theme-rgb-brand: 255, 74, 47;
    --theme-rgb-brand-alt: 233, 61, 34;
    --theme-rgb-brand-soft: 255, 211, 201;
    --theme-rgb-action: 255, 74, 47;
    --theme-rgb-static-dark: 0, 0, 0;
    /* Shadows */
    --shadow-page-card: 0 10px 24px rgba(var(--theme-rgb-text-strong), 0.05);
    --shadow-section-card: 0 14px 32px rgba(var(--theme-rgb-text-strong), 0.06);
    /* Button shadows */
    --shadow-button-brand: 0 8px 18px rgba(var(--theme-rgb-brand), .22);
    --shadow-button-brand-hover: 0 10px 22px rgba(var(--theme-rgb-brand), .28);
    /* Shared brand-button fills: hover darkens instead of repeating the same
       bright tone, so hover state gives real visual feedback. */
    --theme-button-brand-bg: linear-gradient(135deg, var(--theme-brand), var(--theme-brand-strong));
    --theme-button-brand-bg-hover: linear-gradient(135deg, var(--theme-brand-strong), var(--theme-brand-hover));
    /* Light-orange button treatment for buttons on light/cream surfaces —
       a calmer alternative to the full-saturation brand fill above. */
    --theme-button-brand-light-bg: var(--theme-brand-soft);
    --theme-button-brand-light-bg-hover: var(--theme-brand-soft-alt);
    --theme-button-brand-light-border: var(--theme-brand);
    --theme-button-brand-light-border-hover: var(--theme-brand-strong);
    /* Black button treatment for buttons on dark/blue surfaces, paired
       alongside a white button. */
    --theme-button-dark-bg: var(--theme-text-strong);
    --theme-button-dark-bg-hover: var(--theme-text);
    /* Rotating icon-chip accent palette (flat color + ~8% tint bg),
       inspired by the reference site's multi-hue "why-us-card" icons. */
    --theme-icon-teal: #006c9c;
    --theme-icon-teal-bg: rgba(0, 184, 217, 0.08);
    --theme-icon-green: #118d57;
    --theme-icon-green-bg: rgba(34, 197, 94, 0.08);
    --theme-icon-violet: #5119b7;
    --theme-icon-violet-bg: rgba(142, 51, 255, 0.08);
    --theme-icon-amber: #b76e00;
    --theme-icon-amber-bg: rgba(255, 171, 0, 0.08);
    --theme-icon-brand: var(--theme-brand-strong);
    --theme-icon-brand-bg: rgba(var(--theme-rgb-brand), 0.08);
}

/* ==========================================================
   PUBLIC TYPOGRAPHY

   Page CSS continues to control sizing, spacing, and layout.
   These rules only establish the new editorial font pairing.
   ========================================================== */

body.sc-site-public {
    background: var(--theme-page-bg);
    color: var(--theme-text);
    font-family: var(--theme-font-sans);
}

    body.sc-site-public :where( button, input, select, textarea ) {
        font-family: var(--theme-font-sans);
    }

    body.sc-site-public :where(h1, h2, h3, h4) {
        font-family: var(--theme-font-display) !important;
        font-weight: 500 !important;
        letter-spacing: -0.042em !important;
    }

    body.sc-site-public :where(h1, h2) {
        text-wrap: balance;
    }

        /*
   Current public headings already use direct <span> elements for
   highlighted phrases. Render those phrases in the editorial italic
   style seen in the supplied reference.
*/
        body.sc-site-public :where(h1, h2) > span {
            font-family: var(--theme-font-display) !important;
            font-style: italic;
            font-weight: 400 !important;
        }

    /* Preserve the clean sans-serif treatment for labels and controls. */
    body.sc-site-public :where( .scv2-eyebrow, .sca-eyebrow, .scc-eyebrow, .slc-eyebrow, .scv2-button, .sca-button, .scc-button, .slc-button, .sc-public-header, .sc-public-footer ) {
        font-family: var(--theme-font-sans);
    }

    body.sc-site-public ::selection {
        color: var(--theme-text-strong);
        background: var(--theme-brand-soft);
    }

/* ==========================================================
   SHARED SCROLL-REVEAL ANIMATION
   Applies to any element carrying [data-reveal] on any public
   page. Driven by wwwroot/js/reveal.js, which adds "reveal-ready"
   to <html> and toggles "is-visible" per element via IntersectionObserver.
   ========================================================== */

html.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

    html.reveal-ready [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
    }

@media (prefers-reduced-motion: reduce) {
    html.reveal-ready [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}