/* =========================================================
   Main site (Home → Contact) — CheckApps LOGIN / DASHBOARD LAYOUT
   Ambient background, glass cards, light/dark mode with the login's toggle.
   Works with assets/css/login-palette.css (colours) — both loaded by includes/header.php.
   Theme: the visitor's toggle choice (shared with the login, key "ca-theme"),
   otherwise their device setting.
   ========================================================= */

/* ---------- Ambient background (drifting glows + grid), behind everything ---------- */
.site-ambient {
    position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 30% 35%, rgba(255, 196, 110, .16), transparent 70%), var(--lp-paper, #F4F5FA);
}
.site-ambient .orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.site-ambient .orb-teal   { width: 480px; height: 480px; background: #12D6C8; top: -160px; left: -140px; opacity: .16; animation: siteDrift1 48s ease-in-out infinite; }
.site-ambient .orb-purple { width: 520px; height: 520px; background: #7C3AED; bottom: -200px; right: -160px; opacity: .12; animation: siteDrift2 56s ease-in-out infinite; }
.site-ambient .orb-warm   { width: 380px; height: 380px; background: #8a5a12; top: 40%; left: 30%; opacity: .08; animation: siteDrift3 64s ease-in-out infinite; }
.site-ambient .grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(15, 16, 32, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 16, 32, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
@keyframes siteDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(28vw, 12vh) scale(1.2); } 50% { transform: translate(40vw, 38vh) scale(.9); } 75% { transform: translate(10vw, 30vh) scale(1.1); } }
@keyframes siteDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-32vw, -10vh) scale(1.1); } 50% { transform: translate(-45vw, -40vh) scale(1.25); } 75% { transform: translate(-12vw, -30vh) scale(.9); } }
@keyframes siteDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(22vw, -20vh) scale(1.2); } 66% { transform: translate(-18vw, 18vh) scale(.85); } }

/* ---------- Dark mode (the login's default look) ---------- */
html:root[data-theme="dark"] {
    color-scheme: dark;
    /* text colours → light */
    --ink:         #F3F3F6;
    --marine:      #F3F3F6;
    --slate:       #C9C9D3;
    --slate-light: #A3A3B0;
    --gray:        #A3A3B0;
    --muted:       #A3A3B0;
    --lp-ink:      #F3F3F6;
    --lp-muted:    #A3A3B0;
    --gold-ink:    #12D6C8;
    --teal:        #12D6C8;
    --lp-teal-ink: #12D6C8;
    --line:        rgba(255, 255, 255, .10);
    --lp-line:     rgba(255, 255, 255, .10);
    --on-accent:   #041A19;                        /* dark text stays on teal buttons */
    /* surfaces */
    --surface-page:         transparent;           /* lets the ambient background show */
    --surface-card:         rgba(22, 22, 28, .78); /* the login's glass card */
    --surface-ink:          #0F0F14;
    --surface-ink-soft:     #16161C;
    --surface-marine:       #0F0F14;
    --surface-marine-light: #16161C;
    --surface-navy:         #16161C;
    --surface-navy-deep:    #0F0F14;
}
html[data-theme="dark"] body { background-color: #0B0B0E !important; color: #F3F3F6; }
html[data-theme="dark"] .site-ambient { background: radial-gradient(ellipse 70% 60% at 30% 35%, rgba(92, 64, 22, .32), transparent 70%), #0B0B0E; }
html[data-theme="dark"] .site-ambient .orb-teal   { opacity: .20; }
html[data-theme="dark"] .site-ambient .orb-purple { opacity: .24; }
html[data-theme="dark"] .site-ambient .orb-warm   { opacity: .14; }
html[data-theme="dark"] .site-ambient .grid {
    background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
}

/* Glass cards, like the login card and the dashboard tiles */
html[data-theme="dark"] body :is(.feature-card, .info-chip, .service-card, .partners-panel, .section-card, .stat-badge,
    .checkapps-card, .panel-card, .timeline-item, .card, .tier, .howit, .dcard, .stat-strip, .feature-badge, .step, .specialty,
    .region, .info-card, .form-card, .step-card, .qr-box, .location-card) {
    border-color: rgba(255, 255, 255, .09);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="dark"] body .partner-logo { filter: grayscale(100%) invert(1) brightness(1.6); opacity: .7; }
html[data-theme="dark"] body .partner-logo:hover { filter: none; opacity: 1; }

/* Form fields (Contact) */
html[data-theme="dark"] body :is(input, textarea, select):not([type="radio"]):not([type="checkbox"]):not([type="file"]) {
    background-color: rgba(0, 0, 0, .32); color: #F3F3F6; border-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] body :is(input, textarea)::placeholder { color: #6E6E7C; }
html[data-theme="dark"] body select option { background: #16161C; color: #F3F3F6; }

/* Branch locator (Contact) */
html[data-theme="dark"] .branch-card { background: rgba(22, 22, 28, .78); border-color: rgba(255, 255, 255, .1); color: #F3F3F6; }
html[data-theme="dark"] .branch-card.active { background: linear-gradient(135deg, rgba(18, 214, 200, .12), rgba(124, 58, 237, .10)), rgba(22, 22, 28, .85); }
html[data-theme="dark"] .branch-map-wrap { border-color: rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }

/* ---------- Theme toggle (same design as the login's) ---------- */
.site-theme-toggle {
    position: relative; flex: 0 0 auto; width: 64px; height: 34px; padding: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
    transition: border-color .3s, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.site-theme-toggle:hover { border-color: #12D6C8; transform: translateY(-1px); }
.site-theme-toggle:focus-visible { outline: 2px solid #12D6C8; outline-offset: 3px; }
.site-theme-toggle .tt-bg { position: absolute; top: 50%; transform: translateY(-50%); font-size: .75rem; color: #8A8D9C; transition: opacity .3s; }
.site-theme-toggle .tt-bg.sun  { left: 10px; }
.site-theme-toggle .tt-bg.moon { right: 10px; }
.site-theme-toggle .tt-thumb {
    position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(135deg, #7C3AED, #5B21F5); color: #fff; box-shadow: 0 4px 12px -2px rgba(124, 58, 237, .6);
    transform: translateX(30px); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background .4s;
}
.site-theme-toggle .tt-thumb i { position: absolute; font-size: .8rem; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.site-theme-toggle .tt-thumb .sun { transform: rotate(-90deg) scale(.4); opacity: 0; }
html[data-theme="light"] .site-theme-toggle .tt-thumb { transform: translateX(0); background: linear-gradient(135deg, #FFC24A, #FF9A3D); box-shadow: 0 4px 12px -2px rgba(255, 154, 61, .6); }
html[data-theme="light"] .site-theme-toggle .tt-thumb .sun  { transform: none; opacity: 1; }
html[data-theme="light"] .site-theme-toggle .tt-thumb .moon { transform: rotate(90deg) scale(.4); opacity: 0; }
html[data-theme="light"] .site-theme-toggle .tt-bg.sun,
html[data-theme="dark"] .site-theme-toggle .tt-bg.moon { opacity: 0; }

/* Smooth colour change when switching (fallback when View Transitions are unavailable) */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
    transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) { .site-ambient .orb { animation: none; } }

/* ---------- Readability over the home page's scroll-scrub ---------- */
/* Sections that used to be solid white become dark frosted panels in dark mode */
html[data-theme="dark"] body :is(.journey-section, .bg-paper) {
    background: rgba(11, 11, 14, .74);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ---------- Navbar fit on mid-size screens (room for the theme toggle) ---------- */
@media (min-width: 992px) and (max-width: 1279.98px) {
    html body .site-navbar .navbar-brand { padding-right: 14px !important; }
    html body .site-navbar .nav-link { padding-left: 11px !important; padding-right: 11px !important; letter-spacing: .1em; }
    html body .site-navbar .nav-link::before { left: 11px; right: 11px; }
    html body .site-navbar .btn-login { margin-left: 12px; padding: 0 14px; }
    html body .site-navbar .btn-book { margin-left: 8px; padding: 0 14px; }
    html body .site-theme-toggle { width: 56px; }
    html body .site-theme-toggle .tt-thumb { transform: translateX(22px); }
    html[data-theme="light"] body .site-theme-toggle .tt-thumb { transform: translateX(0); }
}

/* ---------- Home banner: stop it forcing a sideways scroll ----------
   Its aspect-ratio + min-height made the browser widen it past the screen. */
html body :is(.home-hero, .about-hero) { width: 100%; min-width: 0; }
/* safety net: nothing on these pages should ever cause a sideways scroll */
html body { overflow-x: clip; }

/* ---------- Dark-mode text/surface fixes found by the contrast check ---------- */
html:root[data-theme="dark"] {
    --text-navy-deep:     #F3F3F6;               /* specialists.php headings & numbers */
    --surface-card-strong: rgba(22, 22, 28, .9);
}
html[data-theme="dark"] .branch-map-hint { background: rgba(11, 11, 14, .82); color: #C9C9D3; }
html[data-theme="dark"] .branch-map-reset { background: #16161C; color: #F3F3F6; }

/* Light mode: small teal labels on white use the login's darker "teal ink" so they stay readable */
html[data-theme="light"] .page-specialists section:not(.monitor) .eyebrow,
html[data-theme="light"] .page-specialists .idx,
html[data-theme="light"] .page-services .accent { color: #077A85; }