/* ============================================
   homehub.css
   "SoundAtlas-style" card-directory home page,
   added 10/09/2026 as a reversible experiment.
   Color history, same day: v1 wrongly reused the
   site's existing gold/neutral-dark palette; v2
   corrected it to match the Lovable reference image
   precisely (warm dark-brown + orange) — this is what
   DARK MODE uses again now; a "blue" experiment in
   between was rejected and is fully gone. LIGHT MODE is a
   separate, deliberately different treatment: light cream
   background, cards tinted with ONE shared accent used
   uniformly across all 7 cards (background fill + accent
   bar + "N collections" link all matching). That accent
   went through several versions in one day — a different
   hue per card, a shared sage green, dark mode's own
   orange, plain white — before landing on the site's own
   established brand gold (#a3762b/#c9a84c, same as the
   "Bombay Café" logo lettering and already used elsewhere
   on this page for the header/switch button in light
   mode). The header itself in light mode is NOT specially
   recolored — it falls back to the site's own native
   light-mode look (identical to every other page).
   Buttons (theme toggle, Classic/New view switch) also
   stay on the site's native orange (dark)/gold (light) —
   a same-day attempt to recolor THOSE to sage green too
   was a misunderstanding and was reverted.
   Fully self-contained — does NOT touch or depend
   on home.css / home.js (the previous shuffled-rows
   home page), so reverting Home.cshtml alone fully
   restores the old experience with zero leftover
   side effects.
   ============================================ */

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

:root {
    /* Dark mode (default) — Lovable-precise orange */
    --hub-bg: #140d09;
    --hub-card: #362619;
    --hub-card-hover: #3f2c1d;
    --hub-orange-deep: #d2793c;
    --hub-orange: #e0954a;
    --hub-orange-light: #eeae6e;
    --hub-cream: #f3ecdd;
    --hub-text-muted: #a99a8a;

    /* Light mode — cream background + shared "material" colors below.
       All 7 cards are tinted with ONE shared accent (Specials' sage
       green, see --hub-card-accent-deep/-light) instead of the earlier
       one-color-per-card version. */
    --hub-bg-light: #f7f2ea;
    --hub-heading-light: #2a2420;
    --hub-text-muted-light: #6b6258;

    /* Shared card accent, light mode only — the site's own established
       brand gold (same deep/light pair already used for .header-quicklink
       and the Classic-view switch button elsewhere in this file), matching
       the "Bombay Café" logo lettering color. History, same day: a
       different hue per card, then shared sage green, then dark mode's
       own orange — all three rejected — before landing on this. */
    --hub-card-accent-deep: #a3762b;
    --hub-card-accent-light: #c9a84c;
}

body {
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(224, 149, 74, 0.16), transparent 60%),
        radial-gradient(ellipse 55% 35% at 85% 12%, rgba(210, 121, 60, 0.12), transparent 60%),
        var(--hub-bg);
    color: var(--hub-cream);
}

body[data-theme="light"] {
    background: var(--hub-bg-light);
    color: var(--hub-heading-light);
}

.hub-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 30px 20px 90px;
    font-family: 'DM Sans', sans-serif;
}

.hub-cards {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.hub-card {
    display: block;
    background: var(--hub-card);
    border-radius: 20px;
    padding: 42px 38px;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .hub-card:hover {
        transform: translateY(-3px);
        background: var(--hub-card-hover);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(224, 149, 74, 0.16);
    }

body[data-theme="light"] .hub-card {
    /* Tinted with the site's own brand gold (same var as the accent bar
       and "N collections" link below, so background + details all match
       each other now — confirmed with the user before implementing). */
    /* No more mixing/diluting — the tile fill is the exact gold color
       itself (var(--hub-card-accent-light), #c9a84c), full strength, both
       at rest and on hover. Hover feedback comes from the lift + shadow
       glow below, not from a different background color. */
    background: var(--hub-card-accent-light);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
}

    body[data-theme="light"] .hub-card:hover {
        background: var(--hub-card-accent-light);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12), 0 0 22px color-mix(in srgb, var(--hub-card-accent-deep) 30%, transparent);
    }

.hub-card-accent {
    display: block;
    width: 110px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hub-orange-deep), var(--hub-orange-light));
    margin-bottom: 30px;
}

body[data-theme="light"] .hub-card-accent {
    background: linear-gradient(90deg, var(--hub-card-accent-deep), var(--hub-card-accent-light));
}

.hub-card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--hub-cream);
    margin: 0 0 16px;
}

body[data-theme="light"] .hub-card-title {
    color: var(--hub-heading-light);
}

.hub-card-desc {
    font-size: 1rem;
    color: var(--hub-text-muted);
    line-height: 1.6;
    max-width: 480px;
    margin: 0 0 24px;
}

body[data-theme="light"] .hub-card-desc {
    color: var(--hub-text-muted-light);
}

.hub-card-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--hub-orange);
    transition: color 0.2s;
}

    .hub-card:hover .hub-card-count {
        color: var(--hub-orange-light);
    }

body[data-theme="light"] .hub-card-count {
    /* Fixed red, deliberately NOT tied to the gold accent anymore — the
       card background is now solid var(--hub-card-accent-light) at every
       state (rest AND hover), and this text used to switch to that exact
       same color on hover, making it vanish. A red unrelated to gold can
       never blend into a gold background, so it stays the same red at
       rest and on hover — no more color switch to break again later. */
    color: #b91c1c;
}

    body[data-theme="light"] .hub-card:hover .hub-card-count {
        color: #b91c1c;
    }

@media (max-width: 600px) {
    .hub-container {
        padding: 20px 16px 70px;
    }

    .hub-card {
        padding: 32px 26px;
    }

    .hub-card-title {
        font-size: 1.6rem;
    }

    .hub-card-desc {
        font-size: 0.92rem;
    }
}

/* ============================================
   Header — Home page ONLY. DARK mode: recolored to the
   same precise Lovable orange as the cards (restored;
   the header used to carry this before the blue
   experiment). LIGHT mode: deliberately NOT recolored —
   only the cards use the new sage-green accent, so every
   override below is matched by an explicit
   body[data-theme="light"] reset
   back to the site's own native values (the same gold
   every other page shows), rather than leaving it to
   accidental cascade. _Layout.cshtml itself is still NOT
   touched — markup/functionality identical on every page;
   this file only affects Home because it's only ever
   linked from Home.cshtml. */
.header-quicklinks {
    gap: 26px;
}

.top-header {
    background: linear-gradient(90deg, #0d0700 0%, #1f1108 55%, #0d0700 100%);
}

.header-title {
    color: var(--hub-orange);
    text-shadow: 0 0 18px rgba(224, 149, 74, 0.55), 0 1px 3px rgba(0,0,0,0.9);
}

body[data-theme="light"] .header-title {
    color: #c9a84c;
}

.header-logo {
    border-color: var(--hub-orange);
    box-shadow: 0 0 10px rgba(224, 149, 74, 0.5);
}

body[data-theme="light"] .header-logo {
    border-color: #c9a84c;
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.5);
}

.header-brand:hover .header-logo {
    box-shadow: 0 0 18px rgba(224, 149, 74, 0.8);
}

body[data-theme="light"] .header-brand:hover .header-logo {
    box-shadow: 0 0 18px rgba(201, 168, 76, 0.8);
}

.header-quicklink {
    background: none;
    border: none;
    padding: 4px 0;
    border-radius: 0;
    color: var(--hub-text-muted);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

    .header-quicklink:hover {
        background: none;
        color: var(--hub-orange);
    }

body[data-theme="light"] .header-quicklink {
    background: none;
    border: none;
    color: #a07830;
}

    body[data-theme="light"] .header-quicklink:hover {
        background: none;
        color: #c9a84c;
    }

#theme-toggle-btn {
    color: var(--hub-orange);
    border-color: rgba(224, 149, 74, 0.4);
}

    #theme-toggle-btn:hover {
        background: rgba(224, 149, 74, 0.1);
        border-color: rgba(224, 149, 74, 0.7);
    }

body[data-theme="light"] #theme-toggle-btn {
    color: #c9a84c;
    border-color: rgba(201, 168, 76, 0.4);
}

    body[data-theme="light"] #theme-toggle-btn:hover {
        background: rgba(201, 168, 76, 0.1);
        border-color: rgba(201, 168, 76, 0.7);
    }

@media (max-width: 600px) {
    .header-quicklinks {
        gap: 16px;
    }

    .header-quicklink {
        font-size: 0.74rem;
        padding: 4px 0;
    }

    .theme-toggle-mobile {
        color: var(--hub-orange);
        border-color: rgba(224, 149, 74, 0.4);
    }
}

body[data-theme="light"] .theme-toggle-mobile {
    color: #c9a84c;
    border-color: rgba(201, 168, 76, 0.4);
}

/* ── Shared switch-button row, IDENTICAL (same max-width/padding) in
   homehub.css / homeswitch-classic.css / homealt.css — added 12/09/2026
   to fix a real bug: the button used to live inside each view's own
   content container (.hub-container 720px / .home-container full-width /
   .alt-wrap 1200px), so on desktop it visibly jumped to a different
   screen position every time you switched views, since each container
   centers at a different width. Now it sits in this separate wrapper,
   OUTSIDE each view's content container, so its position is identical
   across all three views regardless of what's below it. ── */
.view-switch-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 40px 0;
}

/* ── Classic/New view switch button — small, visible, right-aligned,
   in-flow (not fixed — see 10/09/2026 note: fixed positioning collided
   with scrolling row-header controls on the classic page). Temporary,
   same private A/B switch as /Home?classic=true. Remove together with
   the rest of the switch once a final design is chosen. ── */
.hub-switch-btn {
    display: flex;
    width: fit-content;
    margin: 0 0 24px auto;
    align-items: center;
    gap: 6px;
    background: rgba(10, 8, 6, 0.85);
    border: 1px solid rgba(224, 149, 74, 0.45);
    color: var(--hub-orange);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 500;
    text-decoration: none;
    font-family: 'DM Sans', Arial, sans-serif;
    backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s;
}

    .hub-switch-btn:hover {
        background: rgba(224, 149, 74, 0.15);
        border-color: var(--hub-orange);
    }

body[data-theme="light"] .hub-switch-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(201, 168, 76, 0.4);
    color: #a3762b;
}

    body[data-theme="light"] .hub-switch-btn:hover {
        background: rgba(201, 168, 76, 0.1);
        border-color: #c9a84c;
    }

@media (max-width: 600px) {
    .view-switch-row {
        padding: 16px 16px 0;
    }
}

/* Desktop switch button now lives once, in the shared header
   (_Layout.cshtml, .view-switch-header-btn) — guaranteed identical
   position across all three views, added 12/09/2026 after the
   per-view in-flow copies (pixel-identical on paper, in three
   separately-loaded files) still wasn't landing the same in practice.
   This in-flow button stays for mobile only; the header version is
   hidden below 601px instead. */
@media (min-width: 601px) {
    .view-switch-row {
        display: none;
    }
}