/* ═══════════════════════════════════════════════════════
   DrawTheDay theme — "Soft Blue" (light) — applied SITE-WIDE.
   Loaded LAST, so its :root re-maps the palette tokens that
   style.css + launch.css + transitions.css + deck.css consume,
   and its element rules win source-order ties against those files.
   This file is the live source of truth for the palette.
   (Replaced the original "midnight felt" dark theme on 2026-08-02.)
   ═══════════════════════════════════════════════════════ */
:root {
    --bg:          #DCEAF6;                        /* soft light blue — page */
    --bg2:         #C9DEF0;                        /* deeper soft blue — wells / sticky headers */
    --accent:      #2E86C1;                        /* medium blue — links, focus, selected, marks, CTAs */
    --accent-glow: rgba(46,134,193,0.26);
    --text:        #16344A;                        /* dark slate — primary text */
    --text-muted:  #5B7183;
    --card-bg:     #FFFFFF;                        /* white — cards / surfaces */
    --card-border: rgba(46,134,193,0.20);

    --amber:  #2E86C1;                             /* (was gold) primary CTAs / the press */
    --night:  #16344A;                             /* dark slate — dark text on light surfaces */
    --jungle: #2E86C1;                             /* (was felt) kickers, verified, current */

    /* named tokens kept for any spec references elsewhere */
    --ink:         #16344A;
    --felt-900:    #EAF2FB;
    --felt:        #2E86C1;
    --felt-300:    #5AA7DA;
    --gold:        #2E86C1;
    --gold-bright: #5BB0E8;
    --cream:       #FFFFFF;
    --paper:       #F4F8FC;
    --clay:        #C4564A;
}

/* Light page; the aurora skyline backdrop stays retired. */
body { background: var(--bg); color: var(--text); font-family: 'Schibsted Grotesk', system-ui, sans-serif; }
.city-bg { display: none; }

/* Typography — Newsreader display for headings, Schibsted for body. */
.section-title, .cat-group-title, .card-title, .deck-title, .faq-item summary,
.footer-cities-title, .city-h1, .quick-list > summary {
    font-family: 'Newsreader', Georgia, serif; font-weight: 600; letter-spacing: 0;
}

/* The accent is now a MEDIUM blue, so text ON the accent is WHITE (the reverse of
   the old light-gold accent). launch.css already sets #fff for .cat-chip.active /
   .consent-accept / .skip-link / .pwa-install-btn — the deck's on-accent spots are
   fixed in the deck block below. */

/* launch.css lightens the accent toward WHITE for text (readable on dark, invisible
   on light). Re-point those few text spots to a DARKER blue for contrast. */
.lead strong,
.region-count,
.fc-region-title,
.fc-region-count,
.meta-item a:hover { color: #1C6BA0 !important; }

/* ── Topbar brand: a tilted white card glyph with a blue edge + blue "sunrise" ── */
.brand-ball {
    background: #FFFFFF;
    border: 1.5px solid var(--accent);
    border-radius: 5px;
    transform: rotate(8deg);
    box-shadow: 0 2px 8px -2px rgba(46,134,193,.45), inset 0 0 0 1px rgba(46,134,193,.12);
    color: transparent;
    position: relative;
}
.brand-ball::after {
    content: ""; position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
    width: 12px; height: 6px; border-radius: 12px 12px 0 0;
    border: 1.5px solid var(--accent); border-bottom: none;
}
.brand-name { font-family: 'Newsreader', Georgia, serif; font-weight: 600; }
.wm-the { font-style: italic; color: var(--accent); font-weight: 500; font-size: .72em; letter-spacing: 0; vertical-align: 0.06em; }

/* ── City-page activity cards: dark ink on white (style.css hardcodes light text) ── */
.activity-card {
    background: #FFFFFF;
    box-shadow: 0 10px 30px -18px rgba(22,52,74,.35), 0 0 0 1px rgba(46,134,193,.06);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.card-title { color: #16344A; }
.card-desc  { color: #3E5566; }
.card-notes { background: #F1F5FA; border-color: #DCE6F0; color: #3E5566; }
.card-tip   { background: rgba(46,134,193,.08); color: #34506A; }
.cost-badge { background: #EEF3F9; color: #285F82; border-color: rgba(46,134,193,.28); }
.city-table th { background: var(--bg2); }
.city-table .cost-free  { color: #1E9E5A; }
.city-table .cost-cheap { color: #2E86C1; }
.goog-te-gadget .goog-te-combo { background: #FFFFFF !important; color: #16344A; border: 1px solid var(--card-border); }

/* ── The cities section → its own LIGHT-GREY card (requested), readable on the blue page ── */
.footer-cities {
    background: #EDF0F4;
    border: 1px solid #D7DEE6;
    border-radius: 16px;
    padding: clamp(1.2rem, 3vw, 2rem);
    box-shadow: 0 10px 30px -20px rgba(22,52,74,.25);
}
@media (max-width: 600px) { .footer-cities { padding: clamp(1rem,4vw,1.4rem); } }
.footer-cities-title { color: #34506A; }
.fc-city { color: #45586A; }
.fc-subregion-title { color: #5B7183; }

/* ── World-map hero: light sea + blue markers (the SVG itself is recolored to match) ── */
.wmap-frame { background: #CFE3F4; border: 1px solid var(--card-border); box-shadow: 0 18px 44px -28px rgba(22,52,74,.5), inset 0 0 40px rgba(46,134,193,.10); }
.wmap-dot { fill: #2E86C1; stroke: rgba(255,255,255,.75); }
.wmap-halo { fill: rgba(46,134,193,.18); }
.wmap-marker:hover .wmap-dot, .wmap-marker:focus-visible .wmap-dot { fill: #5BB0E8; }
.wmap-marker:focus-visible .wmap-halo { fill: rgba(46,134,193,.32); }
.wmap-marker.is-current .wmap-dot { fill: #0F3A5F; }              /* deep navy = the current city */
.wmap-marker.is-current .wmap-halo { fill: rgba(15,58,95,.22); }
.wmap-btn { background: rgba(255,255,255,.9); color: #16344A; border: 1px solid var(--card-border); }
.wmap-btn:hover { background: #FFFFFF; border-color: var(--accent); }
.wmap-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wmap-tip { background: rgba(255,255,255,.96); color: #16344A; border: 1px solid var(--card-border); }
.wmap-caption { color: #6A7C8A; }

/* ══════════ THE DECK — deck.css is dark-hardcoded; re-map its local tokens + override ══════════ */
.deck {
    --night:  #E9F2FB;                             /* panel bg (deck-card); on-accent TEXT fixed to #fff below */
    --panel:  #FFFFFF;                             /* control surfaces / email block / orb */
    --slate:  #DCEAF6;
    --d-text: #16344A;                             /* panel text */
    --muted:  #5B7183;
    --faint:  #8296A6;
    --ocean:  #2E86C1;
    --jungle: #2E86C1;                             /* kicker, verified, current */
    --amber:  #2E86C1;                             /* the press / glow / marks */
    --city:   #1C6BA0;                             /* emphasized city name in title */
    --felt:   #2E86C1;                             /* price pill, keyline, tags */
    --cream:  #FFFFFF;                             /* text on the blue price pill */
    --hair:   rgba(46,134,193,0.18);
}
/* white text on the blue accent (segments, party, CTA, email button) */
.deck-seg.is-active, .deck-pseg.is-active, .deck-cta, .de-btn { color: #FFFFFF; }
/* panel container */
.deck-card { background: var(--night); border: 1px solid var(--hair); box-shadow: 0 22px 50px -32px rgba(22,52,74,.4); color: var(--d-text); }
.deck-pill { border-color: var(--hair); color: var(--muted); }
.deck-orb  { box-shadow: 0 0 10px rgba(46,134,193,.35), inset 0 0 0 1px rgba(46,134,193,.14); }
/* dark inputs → light */
.deck-cityselect { background: #FFFFFF; color: var(--d-text); border: 1px solid var(--hair); }
.deck-cityselect option, .deck-cityselect optgroup { background: #FFFFFF; color: #16344A; }
.deck-toggle { background: #EAF2FB; border: 1px solid var(--hair); }
.deck-pseg { background: #FFFFFF; color: var(--muted); border: 1px solid var(--hair); }
.deck-pseg:hover { color: var(--d-text); }
/* ghost cards behind the dealt card → light blue with a blue hairline lattice */
.deck-ghost {
    background:
        repeating-linear-gradient(45deg, rgba(46,134,193,.10) 0 1px, transparent 1px 9px),
        repeating-linear-gradient(-45deg, rgba(46,134,193,.10) 0 1px, transparent 1px 9px),
        #DCEAF6;
}
.deck-ghost-2 { border: 1px solid rgba(46,134,193,.22); }
.deck-ghost-1 { border: 1px solid rgba(46,134,193,.30); }
/* the dealt card: WHITE face, blue keyline + blue aura */
.deck-deal {
    background: #FFFFFF; color: #16344A;
    border: 1px solid rgba(46,134,193,.20);
    box-shadow: 0 26px 60px -30px rgba(22,52,74,.45), 0 0 0 1px rgba(46,134,193,.30), 0 0 40px -10px rgba(46,134,193,.24);
}
.deck-deal::after { border: 1.5px solid rgba(46,134,193,.28); }
.deck-code { color: #5B7183; }
.deck-deal-title { color: #16344A; }
.deck-blurb { color: #3E5566; }
.deck-pip { color: rgba(46,134,193,.55); }
.deck-price { box-shadow: 0 5px 14px -5px rgba(46,134,193,.55); }
.deck-tag { color: #1C6BA0; background: rgba(46,134,193,.10); border: 1px solid rgba(46,134,193,.28); }
.deck-tag.deck-num { color: #1C6BA0; background: rgba(46,134,193,.12); border-color: rgba(46,134,193,.42); }
.deck-meta { border-top: 1px solid rgba(22,52,74,.12); color: #5B7183; }
.deck-relaxed { color: #1C5578; background: rgba(46,134,193,.12); border: 1px solid rgba(46,134,193,.45); }
/* email input dark → light */
.deck-email input[type="email"] { background: #F4F8FC; color: #16344A; border: 1px solid var(--hair); }

/* the reveal "glow" flash used a gold shadow baked into deck.css; redefine it blue
   (a later same-name @keyframes wins). */
@keyframes deckGlow {
    0%   { box-shadow: 0 0 0 1px rgba(46,134,193,.72), 0 0 60px 10px rgba(46,134,193,.5), 0 26px 60px -30px rgba(22,52,74,.45); }
    100% { box-shadow: 0 26px 60px -30px rgba(22,52,74,.45), 0 0 0 1px rgba(46,134,193,.30), 0 0 40px -10px rgba(46,134,193,.24); }
}

/* ── 404 ── */
.nf-orb {
    background: radial-gradient(circle at 35% 30%, #5BB0E8, #DCEAF6 72%);
    box-shadow: 0 0 0 1px rgba(46,134,193,.4), 0 0 46px rgba(46,134,193,.30);
}
.nf-title { color: #16344A; text-shadow: none; }
.nf-cta { color: #FFFFFF; background: var(--amber); box-shadow: 0 12px 30px -10px rgba(46,134,193,.6); }
.nf-cta:hover { filter: brightness(1.05); }