/* DCT skin for VoiceSurvey.Web - ported from src/DVSSurveyDemo's own theme-dct.css. survey.css
   (loaded first, always) already parameterizes every color/font/radius/shadow it uses through the
   --vs-* custom properties below, so this file only needs to redefine those properties' VALUES to
   a different palette - no structural CSS is duplicated or overridden here. Deep teal-navy primary
   + warm sand/gold accent, matching DVSSurveyDemo's own DCT palette; Playfair Display replaces
   Georgia for headings. This is the app's only UI - loaded unconditionally by
   Views/Shared/_Layout.cshtml. */
:root {
    --vs-primary: #0b4a5c;
    --vs-primary-light: #3f8fa3;
    --vs-primary-dark: #082e39;
    --vs-primary-contrast: #ffffff;
    --vs-accent: #c08a3e;
    --vs-gold: #c08a3e;
    --vs-gold-rgb: 192, 138, 62;
    --vs-bg: #f7f9fa;
    --vs-bg-rgb: 247, 249, 250;
    --vs-bg-alt: #eef3f4;
    --vs-surface: rgba(255, 255, 255, 0.96);
    --vs-surface-solid: #ffffff;
    --vs-ink-rgb: 15, 43, 51;
    --vs-border: rgba(var(--vs-ink-rgb), 0.09);
    --vs-border-strong: rgba(var(--vs-ink-rgb), 0.15);
    --vs-text: #0f2b33;
    --vs-text-muted: #55707a;
    --vs-success: #7fa35e;
    --vs-success-rgb: 127, 163, 94;
    --vs-danger: #b5482f;
    --vs-neutral: #91acb2;
    --vs-radius: 16px;
    --vs-shadow: 0 18px 45px rgba(11, 74, 92, 0.12);
    --vs-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

    --vs-primary-rgb: 11, 74, 92;
    --vs-primary-light-rgb: 63, 143, 163;
    --vs-bronze-rgb: 192, 138, 62;
    --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.2), 0 0 24px rgba(var(--vs-primary-rgb), 0.18);

    --vs-glow-1-rgb: 11, 74, 92;
    --vs-glow-2-rgb: 192, 138, 62;

    --vs-hero-grad-start: #e3edef;
    --vs-hero-grad-end: #f5f9fa;
    --vs-hero-shadow: 0 24px 60px rgba(11, 74, 92, 0.1);

    --vs-eyebrow-bg: #f3e7d3;
    --vs-eyebrow-text: #8a6a2f;
    --vs-eyebrow-border-rgb: 192, 138, 62;

    --vs-badge-positive-bg: rgba(127, 163, 94, 0.16);
    --vs-badge-positive-text: #4c6c2c;
    --vs-badge-negative-bg: rgba(181, 72, 47, 0.14);
    --vs-badge-negative-text: #8a3c28;
    --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.07);
    --vs-badge-neutral-text: #3a4a5c;
}

:root[data-theme="dark"] {
    --vs-primary: #4fb6c9;
    --vs-primary-light: #7fd0de;
    --vs-primary-dark: #2f8698;
    --vs-primary-contrast: #052227;
    --vs-accent: #dcb06a;
    --vs-gold: #dcb06a;
    --vs-gold-rgb: 220, 176, 106;
    --vs-bg: #0a1e24;
    --vs-bg-rgb: 10, 30, 36;
    --vs-bg-alt: #0d2329;
    --vs-surface: rgba(17, 41, 47, 0.85);
    --vs-surface-solid: #11292f;
    --vs-ink-rgb: 234, 243, 244;
    --vs-text: #eaf3f4;
    --vs-text-muted: #91acb2;
    --vs-success: #a3cf72;
    --vs-success-rgb: 163, 207, 114;
    --vs-danger: #e0836a;
    --vs-neutral: #6f8f97;
    --vs-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

    --vs-primary-rgb: 79, 182, 201;
    --vs-primary-light-rgb: 127, 208, 222;
    --vs-bronze-rgb: 220, 176, 106;
    --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.3), 0 0 24px rgba(var(--vs-primary-rgb), 0.3);

    --vs-glow-1-rgb: 79, 182, 201;
    --vs-glow-2-rgb: 220, 176, 106;

    --vs-hero-grad-start: #102830;
    --vs-hero-grad-end: #0a1e24;
    --vs-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

    --vs-eyebrow-bg: #2c2313;
    --vs-eyebrow-text: #e6c98a;
    --vs-eyebrow-border-rgb: 220, 176, 106;

    --vs-badge-positive-bg: rgba(163, 207, 114, 0.22);
    --vs-badge-positive-text: #cdeeb0;
    --vs-badge-negative-bg: rgba(224, 131, 106, 0.22);
    --vs-badge-negative-text: #f4c4b0;
    --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.12);
    --vs-badge-neutral-text: #d3e6e8;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --vs-primary: #4fb6c9;
        --vs-primary-light: #7fd0de;
        --vs-primary-dark: #2f8698;
        --vs-primary-contrast: #052227;
        --vs-accent: #dcb06a;
        --vs-gold: #dcb06a;
        --vs-gold-rgb: 220, 176, 106;
        --vs-bg: #0a1e24;
        --vs-bg-rgb: 10, 30, 36;
        --vs-bg-alt: #0d2329;
        --vs-surface: rgba(17, 41, 47, 0.85);
        --vs-surface-solid: #11292f;
        --vs-ink-rgb: 234, 243, 244;
        --vs-text: #eaf3f4;
        --vs-text-muted: #91acb2;
        --vs-success: #a3cf72;
        --vs-success-rgb: 163, 207, 114;
        --vs-danger: #e0836a;
        --vs-neutral: #6f8f97;
        --vs-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);

        --vs-primary-rgb: 79, 182, 201;
        --vs-primary-light-rgb: 127, 208, 222;
        --vs-bronze-rgb: 220, 176, 106;
        --vs-glow-primary: 0 0 0 1px rgba(var(--vs-primary-rgb), 0.3), 0 0 24px rgba(var(--vs-primary-rgb), 0.3);

        --vs-glow-1-rgb: 79, 182, 201;
        --vs-glow-2-rgb: 220, 176, 106;

        --vs-hero-grad-start: #102830;
        --vs-hero-grad-end: #0a1e24;
        --vs-hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);

        --vs-eyebrow-bg: #2c2313;
        --vs-eyebrow-text: #e6c98a;
        --vs-eyebrow-border-rgb: 220, 176, 106;

        --vs-badge-positive-bg: rgba(163, 207, 114, 0.22);
        --vs-badge-positive-text: #cdeeb0;
        --vs-badge-negative-bg: rgba(224, 131, 106, 0.22);
        --vs-badge-negative-text: #f4c4b0;
        --vs-badge-neutral-bg: rgba(var(--vs-ink-rgb), 0.12);
        --vs-badge-neutral-text: #d3e6e8;
    }
}

/* ---------- Nav chrome new in the Dct layout (not present in survey.css) ---------- */

/* The scd-logo.png file ships on a white ground, so it's held in its own white plate rather than
   dropped directly onto the (dark-capable) nav - keeps it legible in both themes, matching how
   DVSSurveyDemo handles its own DCT logo. */
.app-logo-badge {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 0.3rem 0.55rem;
    box-shadow: 0 1px 2px rgba(15, 43, 51, 0.05), 0 6px 16px rgba(15, 43, 51, 0.08);
    margin-right: 0.65rem;
}
.app-logo-badge img { display: block; height: 28px; width: auto; }
.app-brand-text { font-family: var(--vs-font-display); font-weight: 700; letter-spacing: 0.01em; color: var(--vs-text); }
@media (max-width: 480px) { .app-brand-text { display: none; } }

/* ---------- Accessibility toolbar (text-size control is Dct-only; the theme toggle button also
   renders in Classic, restyled here to match) ---------- */
.a11y-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.a11y-btn {
    appearance: none;
    border: 1px solid var(--vs-border);
    background: transparent;
    color: var(--vs-text);
    font: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.a11y-btn.icon-btn {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0;
    font-size: 1.1rem;
}
.a11y-btn:hover { background: var(--vs-bg-alt); transform: translateY(-1px); }

/* Deliberately more prominent than the theme toggle (its own border/label) since this is the
   control a low-vision visitor most needs to be able to find at a glance - same reasoning as
   DVSSurveyDemo's identical toolbar. */
.text-size-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--vs-primary);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    background: var(--vs-surface-solid);
}
.text-size-icon { color: var(--vs-text-muted); line-height: 1; }
.text-size-icon-small { font-size: 0.7rem; }
.text-size-icon-large { font-size: 1.2rem; font-weight: 700; color: var(--vs-text); }
.text-size-control input[type="range"] {
    width: 72px;
    accent-color: var(--vs-primary);
    cursor: pointer;
}
.text-size-output {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--vs-primary);
    min-width: 4.2em;
}

/* html's own font-size drives every rem-based measurement in survey.css, but most of that file's
   sizing is in px (it predates this text-size control), so a rem-scale alone would only resize a
   minority of the page's text. `zoom` uniformly scales the whole page (text AND spacing) the same
   way a real browser zoom would, matching what the slider promises regardless of px/rem mix -
   Chromium and Safari support it; Firefox doesn't implement `zoom` and simply ignores it, so the
   slider is a graceful no-op there rather than a broken one. */
html { --font-scale: 1; }
html[data-text-size="large"] { --font-scale: 1.15; }
html[data-text-size="xlarge"] { --font-scale: 1.3; }
body { zoom: var(--font-scale); }

/* ---------- Ambient page background (ported from DVSSurveyDemo's theme-dct.css) ----------
   The Zayed National Museum, pinned behind the entire page and faded well back under a slow-
   drifting teal/gold wash, so it reads as ambient texture behind every survey question rather
   than a photo competing with page content. Page sections sit on opaque cards, so this only
   ever shows through the gutters between them. Loads after survey.css's own plain `body`
   background rule, so it wins on equal specificity without needing !important. */
body {
    background-image:
        radial-gradient(circle at 10% -10%, rgba(var(--vs-glow-1-rgb), 0.14) 0%, transparent 45%),
        radial-gradient(circle at 90% 0%, rgba(var(--vs-glow-2-rgb), 0.12) 0%, transparent 48%),
        linear-gradient(165deg, rgba(var(--vs-bg-rgb), 0.90) 0%, rgba(var(--vs-bg-rgb), 0.80) 45%, rgba(var(--vs-bg-rgb), 0.92) 100%),
        url("../images/hero-abudhabi.jpg");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-attachment: fixed, fixed, fixed, fixed;
    background-position: 0% 0%, 100% 0%, center, center 35%;
    background-size: 100% 100%, 100% 100%, 200% 200%, cover;
    background-blend-mode: normal, normal, normal, luminosity;
    animation: vs-bg-drift 28s ease-in-out infinite alternate;
}
@keyframes vs-bg-drift {
    from { background-position: 0% 0%, 100% 0%, 0% 0%, center 32%; }
    to   { background-position: 0% 0%, 100% 0%, 100% 100%, center 40%; }
}