/* ============================================
   homeswitch-classic.css
   The tiny "⇄ New View" button shown ONLY on the
   classic (Model.Classic == true) branch of Home.cshtml.
   Split into its own file instead of an inline <style>
   block in Home.cshtml on purpose — this project has a
   documented history (see DEVLOG, 19/08/2026) of Razor
   silently mis-rendering pages because of "@" or "<"
   characters inside inline <style>/comment blocks in a
   .cshtml file. A plain, separate .css file sidesteps
   that risk entirely. Added 10/09/2026, temporary — remove
   this file and its <link>/<a> in Home.cshtml together with
   the rest of the private A/B switch once a final home page
   design is chosen. Does NOT modify home.css itself.
   ============================================ */

/* ── 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 (or right before)
   each view's own content container, whose width differs per view
   (.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. Now it sits in this separate
   wrapper, positioned identically across all three views regardless of
   what's below it. ── */
.view-switch-row {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 40px 0;
}

/* Was position:fixed, top-right — moved to a normal in-flow, right-aligned
   element instead (10/09/2026). Fixed positioning near the top kept
   visually colliding with row-header controls (Play All / ← → arrows,
   which every row has, right-aligned) as those rows scrolled past
   underneath it. An in-flow element only ever appears once, above the
   first row, and never overlaps anything while scrolling. Top margin
   removed (12/09/2026) — .view-switch-row's own padding-top now
   provides that spacing, identically across all three views. */
.hub-switch-btn-classic {
    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(201, 168, 76, 0.45);
    color: #c9a84c;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 500;
    text-decoration: none;
    font-family: Arial, sans-serif;
    backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s;
}

    .hub-switch-btn-classic:hover {
        background: rgba(201, 168, 76, 0.15);
        border-color: #c9a84c;
    }

/* Missing until 12/09/2026 — this file was split off on its own
   (10/09/2026, see header comment) and never got the light-theme
   override its two siblings (.hub-switch-btn in homehub.css,
   .alt-switch-btn in homealt.css) both have. Without it, this button
   stayed dark in light mode regardless of theme. Same target values
   as those two, for consistency. */
body[data-theme="light"] .hub-switch-btn-classic {
    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-classic: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;
    }
}

/* "Bombay Café" בדף הבית, Classic, בטלפון — נוסף 29/09/2026 לבקשת
   המשתמש. בטלפון שורת הכותרת של האתר (עם הכיתוב .header-title) ירדה
   היום, ופס האייקונים (mobilenav.css) הוא התפריט היחיד. הכיתוב חוזר
   כאן, בשורה של "⇄ Alternate View": משמאל, מתחת לפס ומעל הסרטונים.
   אותו גופן, צבע וזוהר כמו .header-title ב-_Layout.cshtml.
   השורה כולה מוסתרת מ-601px (ר' למעלה), כך שבדסקטופ לא משתנה כלום.
   לשני הרכיבים אותו margin תחתון (24px), כדי שיישבו על אותו קו. */
.home-brand-title {
    font-family: 'Yatra One', 'Rozha One', serif;
    font-size: 1.6rem;
    line-height: 1.1;
    color: #c9a84c;
    letter-spacing: 0.08em;
    text-shadow: 0 0 18px rgba(201, 168, 76, 0.7), 0 1px 3px rgba(0,0,0,0.9);
    margin: 0 0 24px;
    white-space: nowrap;
}

body[data-theme="light"] .home-brand-title {
    text-shadow: none;
}

@media (max-width: 600px) {
    .view-switch-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* הכפתור לא נשבר לשתי שורות כשהכיתוב לידו. */
    .hub-switch-btn-classic {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* בטלפון צר (360 ומטה) הכיתוב והכפתור לא נכנסים יחד בגודל המלא:
   יש 278 פיקסלים, והם צריכים 286. הכיתוב קטן מעט. */
@media (max-width: 380px) {
    .home-brand-title {
        font-size: 1.4rem;
    }
}

@media (max-width: 340px) {
    .home-brand-title {
        font-size: 1.15rem;
    }
}