/* =====================================================================
   WAKE — Shared "Clear Water" theme (drpaulk.ai + wakeai.app)
   ---------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH:  shared/theme.css
   Generated copies (never hand-edit):
     website/css/theme.css           (drpaulk.ai)
     wake-ai-website/css/theme.css   (wakeai.app)
   Sync with: scripts/sync-theme.sh  (pre-commit drift gate enforces it).

   This is an ADDITIVE OVERRIDE LAYER, linked AFTER each site's styles.css.
   It keeps the brand's Libre Caslon serif + warm espresso text + the
   "Wake Intelligence Platform" shimmer logo, and re-skins the look toward a
   fresh Sky-to-Sea background settling onto pale warm-white sand, frosted-glass
   surfaces, and vibrant teal/cyan accents. Removing the <link> fully reverts.

   It covers BOTH sites' :root variable names (they differ between sites).
   ===================================================================== */

:root {
    /* --- approved palette --- */
    --wake-teal:  #2DD4BF;   /* primary vibrant teal */
    --wake-cyan:  #7DD3FC;   /* soft cyan / aqua     */
    --wake-teal-deep: #0E9F8E;
    --wake-sand:  #F8F4EA;   /* pale warm-white sand */
    --wake-sand-2:#EFE7D6;   /* deeper pale sand     */
    --wake-shore: linear-gradient(180deg,
        #f6fdff 0%, #e8f6fa 18%, #d0eff2 38%, #deefe6 54%, #f0ebdd 74%, #f8f4ea 100%);
    --wake-teal-grad: linear-gradient(135deg, #7DD3FC, #2DD4BF);

    /* --- drpaulk.ai token values (names unchanged) --- */
    --primary-color: #2DD4BF;
    --secondary-color: #0E9F8E;
    --background-dark: #F8F4EA;
    --background-darker: #EFE7D6;
    --card-bg: rgba(255, 253, 248, 0.60);
    --card-border: rgba(255, 255, 255, 0.50);
    --primary-gradient: linear-gradient(135deg, #7DD3FC, #2DD4BF);
    --cosmic-gradient: var(--wake-shore);
    --glow-primary: 0 0 25px rgba(45, 212, 191, 0.34);
    --glow-secondary: 0 0 25px rgba(125, 211, 252, 0.30);

    /* --- wakeai.app token values (names unchanged) --- */
    --deep-ocean: #F8F4EA;
    --midnight: #EFE7D6;
    --dark-surface: #EDE4D2;
    --surface: #F3ECDD;
    --surface-raised: #FBF7F0;
    --cyan-glow: #2DD4BF;
    --cyan-dim: #0E9F8E;
    --phosphor-teal: #0E9F8E;
    --primary-blue: #2DD4BF;
    --primary-dark: #0E9F8E;
    --secondary-teal: #0E9F8E;
    --background-light: #F8F4EA;
    --background-gray: #EFE7D6;
    --gradient-primary: linear-gradient(135deg, #7DD3FC, #2DD4BF);
    --gradient-ocean: var(--wake-shore);
    --gradient-shore: linear-gradient(135deg, #eaf6f4 0%, #dbeee6 50%, #f2ecdd 100%);
    --glow-cyan: 0 0 20px rgba(45, 212, 191, 0.22);
}

/* ---------------------------------------------------------------------
   Background — fresh Sky-to-Sea onto pale warm-white sand, on both sites.
   drpaulk paints it on the .cosmic-bg layer; wakeai on the body.
   --------------------------------------------------------------------- */
body {
    background: var(--wake-shore);
    background-repeat: no-repeat;
    background-attachment: scroll;
    /* One continuous top->bottom fade over the FULL page. NOT
       background-attachment:fixed + repeat: on iOS Safari `fixed` falls back to
       scroll, the viewport-sized gradient then TILES down a long page and snaps
       back to blue mid-page. `100% 100%` + no-repeat = a single smooth fade. */
    background-size: 100% 100%;
}
.cosmic-bg {
    background: var(--wake-shore);
}
/* tone the legacy cosmic-bg glow/grid overlays down so the shore stays clean */
.cosmic-bg::after { opacity: 0.5; }

/* ---------------------------------------------------------------------
   PRESERVE the "Wake Intelligence Platform" wordmark EXACTLY.
   .logo-text already uses its own literal gradient (untouched here).
   .logo-glow reads --primary-color, so re-pin it to the original blue.
   --------------------------------------------------------------------- */
.logo-glow { background: #4B8EC4; }

/* ---------------------------------------------------------------------
   Header / top menu bar — light, floaty glass (was a tan cream). Brighter
   and more transparent so content drifts behind it, with the lightest
   touch of sand. (Both sites used rgba(245,230,200,0.9).)
   --------------------------------------------------------------------- */
header {
    top: 0.75rem;
    /* centered without transform — so the scroll-hide JS can use translateY()
       to slide it up/down (not sideways) */
    left: 0; right: 0; margin-left: auto; margin-right: auto;
    width: calc(100% - 2rem);
    max-width: 1280px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.42) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 10px 30px rgba(45, 90, 110, 0.10);
    transition: transform 0.35s ease;
}
/* hide on scroll-down, reappear on scroll-up — moves UP/DOWN (both sites) */
header.scroll-down { transform: translateY(-135%) !important; }
header.scroll-up   { transform: translateY(0) !important; }
@media (max-width: 768px) {
    /* full-width on small screens so the mobile menu/dropdown behave.
       768px (not 600px) aligns the header with the per-site mobile-nav
       breakpoint, closing the old 601-768px seam where a floating-pill
       header sat above an already-collapsed nav. */
    header { top: 0; width: 100%; max-width: none; border-radius: 0; }
}

/* Product / nav dropdown — glass, matching the header (was tan cream).
   DESKTOP ONLY: on mobile the dropdown collapses inline inside the open drawer,
   so a floating glass card (white bg + shadow) would overlap the menu items. */
@media (min-width: 769px) {
    /* wakeai's About menu (.nav-dropdown-menu) gets the SAME glass look as
       drpaulk's Product menu (.dropdown-menu) so it matches the theme. */
    .dropdown-menu, .nav-dropdown-menu {
        background: rgba(255, 253, 249, 0.92) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
        backdrop-filter: blur(16px) saturate(1.2);
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        box-shadow: 0 12px 30px rgba(45, 90, 110, 0.16) !important;
        border-radius: 12px;
    }
    .dropdown-menu a:hover, .nav-dropdown-menu a:hover { background: rgba(45, 212, 191, 0.12); color: var(--wake-teal-deep); }
}

/* Home hero heading ("Ride the Wake" / "The Wake app") — the same teal as the
   "intelligence" accent, instead of the espresso→teal gradient. */
.hero h1 {
    background: linear-gradient(135deg, #0E9F8E, #0b6e8c);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #0E9F8E;
}

/* ---------------------------------------------------------------------
   Frosted glass — a touch more frost on the surfaces that are already
   translucent, so cards/panels read as glass over the bright shore.
   (Curated surface classes across both sites; visual-only.)
   --------------------------------------------------------------------- */
/* drpaulk.ai */
.tech-card, .insight-card, .stat-card, .contact-card, .connection-card, .info-card,
.value-card, .gw-card, .legend-item, .partner-col, .wm-index,
/* wakeai.app */
.feature-card, .action-card, .story-card, .trust-card, .question-card,
.character-card, .problem-card, .why-wake-card, .pricing-snap-card,
.pricing-card, .sammy-feature-box, .gear-item {
    /* bright, floaty glass — lightest touch of sand (R255 G253 B248) */
    background: rgba(255, 253, 248, 0.58) !important;
    -webkit-backdrop-filter: blur(13px) saturate(1.2);
    backdrop-filter: blur(13px) saturate(1.2);
    box-shadow: 0 12px 32px rgba(45, 90, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------
   Section backgrounds — several (mostly wakeai.app) are painted with
   literal warm-cream gradients (not vars), which would cover the fresh
   shore. Re-skin them: heroes go transparent (the shore shows through);
   banded sections become soft frosted-white glass panels; footer a light
   glass. !important is needed where the original used it / for certainty.
   --------------------------------------------------------------------- */
/* Page heroes must be transparent so the single page-wide shore shows through.
   Several drpaulk heroes set `background: var(--cosmic-gradient)` (a full
   blue->tan gradient) on the hero box itself, which paints a SECOND fade that
   ends in a sand band mid-section (most visible on the story title). */
.hero, .page-hero,
.story-hero, .problem-hero, .plan-hero, .tech-hero, .product-hero,
.coaching-hero, .contact-hero, .podcast-hero { background: transparent !important; }
/* The wakeai home hero's bottom fade (transparent -> --midnight) was a blend
   into the OLD dark ocean; on the light shore it paints an abrupt sand band. */
.hero::after { display: none !important; }
.contrast-section, .why-wake-section, .download-section,
.email-capture, .section-alt, .section-cta, .video-placeholder {
    background: rgba(255, 255, 255, 0.38) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Footer — a floating glass bar like the top menu bar (was an abrupt warm band).
   Inset + rounded + translucent so it floats over the shore instead of cutting
   a hard edge across the bottom of the page. Both sites. */
/* wakeai.app footer keeps the floating glass bar */
footer {
    background: rgba(255, 253, 249, 0.58) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    margin: 1.25rem 1rem;
    box-shadow: 0 12px 34px rgba(45, 90, 110, 0.10);
}
/* drpaulk.ai: a VERY slim fixed bottom bar — only Privacy · Terms · copyright —
   that slides UP from below, and only once you've scrolled to the page bottom
   (the inverse of the top menu bar). Scoped to footers that hold .footer-legal. */
footer:has(.footer-legal) {
    position: static; margin: 0; width: auto; max-width: none; border-radius: 0;
    padding: 0.8rem 1rem !important;
    background: rgba(255, 252, 246, 0.7) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    backdrop-filter: blur(12px) saturate(1.15);
    border: none; border-top: 1px solid rgba(61, 43, 31, 0.10);
    box-shadow: none; transform: none;
}
footer:has(.footer-legal) .footer-legal { max-width: 1100px; margin: 0 auto; text-align: center; }
footer:has(.footer-legal) .legal-links { margin: 0; font-size: 0.85rem; }
footer:has(.footer-legal) .legal-links a { color: rgba(61, 43, 31, 0.6); text-decoration: none; }
footer:has(.footer-legal) .legal-links a:hover { color: var(--wake-teal-deep); }
footer:has(.footer-legal) .legal-copy { margin: 0; font-size: 0.78rem; color: rgba(61, 43, 31, 0.45); }
/* a short centered dash — narrower than the text — just barely separating the two lines */
footer:has(.footer-legal) .legal-copy::before {
    content: ""; display: block; width: 22px; height: 1px;
    background: rgba(61, 43, 31, 0.22); margin: 0.4rem auto;
}

/* ---------------------------------------------------------------------
   Commanding "depth" panel — deep teal-ink glass for CTAs / feature bands.
   Shared component; use class="depth" (drpaulk WM pages also map .wm-depth).
   --------------------------------------------------------------------- */
.depth, .wm-depth {
    position: relative; overflow: hidden; border-radius: 24px;
    background: linear-gradient(160deg, #0b3b46, #0f172a 72%);
    color: #e7f6f4; padding: 3.25rem 2rem; text-align: center;
    box-shadow: 0 22px 50px rgba(11, 42, 51, 0.38);
}
.depth::before, .wm-depth::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(620px 300px at 80% -12%, rgba(45,212,191,0.30), transparent 60%),
        radial-gradient(520px 320px at 8% 112%, rgba(125,211,252,0.22), transparent 60%);
}
.depth > *, .wm-depth > * { position: relative; z-index: 1; }
.depth h1, .depth h2, .wm-depth h1, .wm-depth h2 { color: #ffffff; }
.depth p, .wm-depth p { color: #d3ebe7; }
.depth .wm-eyebrow, .wm-depth .wm-eyebrow { color: var(--wake-cyan); }
.depth .btn.secondary, .wm-depth .btn.secondary {
    border-color: rgba(255, 255, 255, 0.6); color: #eafaf7;
}
.depth .btn.secondary:hover, .wm-depth .btn.secondary:hover {
    background: rgba(255, 255, 255, 0.12); color: #fff;
}

/* =====================================================================
   SMARTPHONE / RESPONSIVE HARDENING  (shared — drpaulk.ai + wakeai.app)
   ---------------------------------------------------------------------
   Added for iOS/Android phone compatibility. theme.css loads AFTER each
   site's styles.css, so the unconditional rules below intentionally
   supersede the per-site fixed sizes + @media "snap" overrides — one
   source for both sites (sync-theme.sh propagates it byte-for-byte).
   ===================================================================== */

/* --- G4: never let media overflow its container on a phone ----------- */
img, video, svg, iframe { max-width: 100%; height: auto; }

/* --- G5: fluid typography — scale smoothly between phone and desktop
   instead of snapping at breakpoints. All values rem-anchored (honor user
   zoom / WCAG 1.4.4). MAX values match the current desktop sizes
   (h1 3.5rem; wakeai .hero-title-large 6rem; .page-hero h1 3rem). -------- */
h1                         { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem); }
.hero-title-large          { font-size: clamp(2.4rem, 1.2rem + 6.5vw, 6rem); }
.page-hero h1              { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
.hero-subtitle, .hero-slogan { font-size: clamp(1.05rem, 0.97rem + 0.5vw, 1.25rem); }

/* --- G2: iOS safe-area (notch / home indicator). In a normal browser the
   chrome handles the notch; the real exposure is (a) installed-PWA
   standalone mode and (b) the static bottom legal bar vs the home
   indicator. Scoped precisely so desktop / in-browser padding is untouched. */
@supports (padding: max(0px)) {
    footer:has(.footer-legal) {
        padding-bottom: max(0.8rem, env(safe-area-inset-bottom)) !important;
    }
}
@media (display-mode: standalone) {
    @supports (padding: max(0px)) {
        header {
            padding-top: max(0.75rem, env(safe-area-inset-top));
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
        }
    }
}

/* --- G9: honor prefers-reduced-motion — both sites animate heavily
   (infinite shimmer/slide/float). Near-instant for users who ask. -------- */
@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;
    }
}

/* --- G9: honor prefers-contrast: more — firmer surfaces + underlined links. */
@media (prefers-contrast: more) {
    .tech-card, .insight-card, .stat-card, .contact-card, .feature-card,
    .action-card, .story-card, .trust-card, .question-card, .character-card,
    .pricing-card, .sammy-feature-box {
        background: rgba(255, 255, 255, 0.94) !important;
    }
    nav a, .legal-links a { text-decoration: underline; }
}