/* ==========================================================================
   MYHANGOUTBUDDY  -  design system
   Apple-grade typography and layout, one gold accent, the sky blue of the
   mark, and a spring-driven 3D layer on buttons and tiles. Loaded on every
   page after the page's own stylesheet, so the shared vocabulary below
   (eyebrows, pill buttons, tiles, fields, focus rings) reads the same in
   every chapter of the site. Colour tokens live in base.html.

   1. Tokens         4. Eyebrows and headings   7. Fields
   2. Base           5. Buttons                 8. Dark bands
   3. Links          6. Tiles                   9. 3D + reveal, preferences
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root {
    --fs-hero:  clamp(2.25rem, 4.6vw, 3.5rem);
    --fs-h1:    clamp(2.125rem, 4.2vw, 3.25rem);
    --fs-h2:    clamp(1.75rem, 3.3vw, 2.625rem);
    --fs-h3:    clamp(1.1875rem, 1.6vw, 1.4375rem);
    --fs-lead:  clamp(1.0625rem, 1.35vw, 1.3125rem);
    --fs-sm:    0.875rem;
    --fs-xs:    0.75rem;

    --r-sm: 10px;
    --r:    16px;
    --r-lg: 22px;
    --r-xl: 30px;

    --shadow-sm: 0 2px 3px -1px rgba(0,0,0,0.10), 0 1px 0 0 rgba(25,28,33,0.02),
                 0 0 0 1px rgba(25,28,33,0.08);
    --shadow-md: 0 0 0 1px rgba(0,0,0,0.06), 0 1px 1px -0.5px rgba(0,0,0,0.06),
                 0 3px 3px -1.5px rgba(0,0,0,0.06), 0 6px 6px -3px rgba(0,0,0,0.06),
                 0 12px 12px -6px rgba(0,0,0,0.06), 0 24px 24px -12px rgba(0,0,0,0.06);
    --shadow-lg: 0 2.8px 2.2px rgba(0,0,0,0.034), 0 6.7px 5.3px rgba(0,0,0,0.048),
                 0 12.5px 10px rgba(0,0,0,0.06), 0 22.3px 17.9px rgba(0,0,0,0.072),
                 0 41.8px 33.4px rgba(0,0,0,0.086), 0 100px 80px rgba(0,0,0,0.12);
    /* The tile edge: a hairline plus a one pixel highlight along the top,
       so a plain white card looks made rather than drawn. */
    --shadow-tile: 0 0 0 1px rgba(20,20,25,0.055), 0 1px 0 rgba(255,255,255,0.9) inset,
                   0 2px 4px -2px rgba(20,20,25,0.06), 0 14px 30px -20px rgba(20,20,25,0.22);

    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --t-fast: 140ms;
    --t:      220ms;
    --t-slow: 520ms;

    --ring-gold:      rgba(201, 162, 39, 0.34);
    --ring-gold-soft: rgba(201, 162, 39, 0.16);
    --ring-sky:       rgba(126, 197, 224, 0.42);
    --ring-sky-soft:  rgba(126, 197, 224, 0.18);
    --coin-face:      linear-gradient(158deg, #fdf7e4 0%, #f7ecc6 52%, #f2e2ae 100%);
}

/* 2. BASE ================================================================ */
::selection { background: rgba(201, 162, 39, 0.28); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

strong, b { font-weight: 600; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--ink); }
h1, h2 { text-wrap: balance; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.016em; }

/* Display headings: a headline word inside <em> carries the gold. */
h1 em, h2 em, .display em { font-style: normal; color: var(--orange); }

/* 3. LINKS =============================================================== */
main a:not([class]) { color: var(--orange); }
main a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }

/* 4. EYEBROWS AND HEADINGS ============================================== */
/* The small gold label above a heading is the one repeating accent on the
   page. Every page had its own pill; they all become the same masthead: a
   short word in uppercase gold with a rule fading after it. */
.pg-kicker, .xp-kicker, .vn-eyebrow, .vn-kicker, .sg-eyebrow, .sigx-eyebrow,
.al-page-kicker, .al-deskcard-kicker, .qrp-kicker, .pmr-kicker, .pmrp-kicker,
.pmrp-other-kicker, .sig-kicker, .sigx-kicker, .sigx-strip-kicker, .vn-visa-kicker,
.vn-stay-kicker, .vn-calc-eyebrow, .kicker, .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--orange);
    box-shadow: none;
}
.pg-kicker::after, .xp-kicker::after, .vn-eyebrow::after, .vn-kicker::after,
.sg-eyebrow::after, .al-page-kicker::after, .qrp-kicker::after, .pmr-kicker::after,
.pmrp-kicker::after, .kicker::after, .eyebrow::after {
    content: "";
    width: clamp(18px, 3vw, 34px);
    height: 1px;
    background: linear-gradient(90deg, var(--ring-gold), rgba(201, 162, 39, 0));
}
.sigx-eyebrow::before { background: linear-gradient(90deg, rgba(201, 162, 39, 0), var(--ring-gold)); }

.pg-title, .xp-title, .vn-title, .sigx-h2, .sect-h {
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.05;
    text-wrap: balance;
}
.pg-sub, .xp-sub, .vn-lede, .vn-section-lede, .lead {
    font-size: var(--fs-lead);
    line-height: 1.4;
    letter-spacing: -0.018em;
    color: var(--muted);
    text-wrap: pretty;
}

/* 5. BUTTONS ============================================================= */
/* Every call to action on the site is a pill. The gold one is the main
   action, black is the quiet primary, the outline is the alternative and
   the glass one sits over photographs. */
.pg-btn, .vn-btn, .cookie-btn, .nav-btn, .al-inline-btn, .pwa-install-btn,
.cf-btn, .ib-btn, .sg-btn, .al-btn, .fc-btn-book, .fc-btn-view {
    --gx: 50%; --gy: 50%; --glare: 0;
    position: relative;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
}
/* Specular sheen that follows the pointer (position set by JS) */
.pg-btn::after, .vn-btn::after, .cookie-btn::after, .nav-btn::after, .al-inline-btn::after,
.cf-btn::after, .sg-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(140px 90px at var(--gx) var(--gy), rgba(255,255,255,0.38), transparent 62%);
    opacity: var(--glare);
    pointer-events: none;
    transition: opacity var(--t) ease;
}

.pg-btn-primary, .vn-btn-primary, .cookie-btn-accept, .nav-btn-filled, .pwa-install-btn,
.al-inline-btn-solid, .fc-btn-book {
    color: #1d1d1f;
    background: linear-gradient(180deg, #e9cb62 0%, var(--gold) 100%);
    border: 0;
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.4) inset, 0 -1px 0 0 rgba(0,0,0,0.08) inset,
                0 1px 2px rgba(0,0,0,0.15), 0 4px 12px -4px rgba(201,162,39,0.5);
}
.pg-btn-primary:hover, .vn-btn-primary:hover, .cookie-btn-accept:hover, .nav-btn-filled:hover,
.pwa-install-btn:hover, .al-inline-btn-solid:hover, .fc-btn-book:hover {
    color: #1d1d1f;
    background: linear-gradient(180deg, #e9cb62 0%, var(--gold) 100%);
    transform: translateY(-2px);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.45) inset, 0 2px 4px rgba(0,0,0,0.12),
                0 14px 28px -10px rgba(201,162,39,0.65);
}
.pg-btn-outline, .vn-btn-ghost, .nav-btn:not(.nav-btn-filled), .cookie-btn-decline,
.al-inline-btn:not(.al-inline-btn-solid), .fc-btn-view {
    color: var(--ink);
    background: transparent;
    border: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14) inset;
}
.pg-btn-outline:hover, .vn-btn-ghost:hover, .nav-btn:not(.nav-btn-filled):hover,
.cookie-btn-decline:hover, .al-inline-btn:not(.al-inline-btn-solid):hover, .fc-btn-view:hover {
    color: var(--ink);
    background: rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14) inset, var(--shadow-md);
}
.pg-btn-pink, .pg-btn-ghost {
    color: #fff;
    background: var(--ink);
    box-shadow: var(--shadow-sm);
}
.pg-btn-pink:hover, .pg-btn-ghost:hover {
    color: #fff;
    background: var(--ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.pg-btn:active, .vn-btn:active, .cookie-btn:active, .nav-btn:active, .al-inline-btn:active {
    transform: scale(0.965);
    transition-duration: 80ms;
}
.pg-btn:disabled { transform: none !important; box-shadow: none !important; }

/* 6. TILES =============================================================== */
/* The base card: white, a hairline edge, layered neutral shadow, and the
   warm glare that follows the pointer. */
.pg-card, .bcard, .pkg-card, .step-cell, .xp-card, .cf-card, .vn-card, .ib-card,
.al-deskcard, .review-card, .contact-card, .tile {
    --gx: 50%; --gy: 50%; --glare: 0;
    position: relative;
    border-color: transparent;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-tile);
    transform-style: preserve-3d;
}
.pg-card::after, .bcard::after, .pkg-card::after, .step-cell::after, .tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--gx) var(--gy), rgba(255,250,236,0.5), transparent 62%);
    opacity: var(--glare);
    transition: opacity var(--t) ease;
}
.bcard:hover, .pkg-card:hover { box-shadow: var(--shadow-md); }
.review-card { border-radius: var(--r); background: var(--surface-soft); box-shadow: none; }
.step-cell { border-radius: var(--r); }

/* Icon coins on cards: a struck gold medal rather than a filled square. */
.pkg-card .p-ico, .cf-ico, .xp-ico, .step-cell .n {
    color: var(--orange);
    background: var(--coin-face);
    border: 1px solid var(--ring-gold);
    border-radius: 50%;
    box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 -1px 0 rgba(140,110,20,0.09) inset,
                0 0 0 4px var(--ring-gold-soft), 0 4px 10px -4px rgba(120,95,20,0.28);
}
.step-cell .n { display: inline-grid; place-items: center; width: 34px; height: 34px; font-size: var(--fs-xs); font-weight: 600; margin-bottom: 4px; }

/* Chips and tags */
.chip, .tag {
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
}
.chip-select { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); box-shadow: 0 0 0 1px rgba(0,0,0,0.14) inset; border-color: transparent; }
.chip-select.on { background: var(--ink); color: #fff; box-shadow: none; }

/* Notices */
.notice { border-radius: var(--r); }
.notice-warn { background: linear-gradient(160deg, #fbf3d6, #f6e7b4); color: #5b4708; border-color: transparent; }
.notice-warn strong, .notice-warn a { color: #3f3105; }

/* 7. FIELDS ============================================================== */
.f-field input, .f-field select, .f-field textarea,
.book-box select, .book-box input {
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 12px;
    transition: border-color var(--t) ease, box-shadow var(--t) ease;
}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus,
.book-box select:focus, .book-box input:focus {
    outline: 0;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.18);
}
.f-field label, .book-box label { font-weight: 600; letter-spacing: 0.06em; }

/* 8. DARK BANDS ========================================================== */
.on-dark {
    --surface: #1c1c1e;
    --surface-soft: #2a2a2d;
    --ink: #f5f5f7;
    --muted: #a1a1a6;
    --line: rgba(255, 255, 255, 0.12);
    --orange: var(--gold-2);
    --shadow-tile: 0 0 0 1px rgba(255,255,255,0.1), 0 1px 0 rgba(255,255,255,0.1) inset,
                   0 18px 40px -26px rgba(0,0,0,0.9);
    background: var(--blue-deep);
    color: var(--ink);
}

/* 9. 3D + REVEAL, PREFERENCES ============================================ */
/* Scroll reveal: opacity and transform only, JS adds .is-visible */
html.js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms var(--ease-out), transform 820ms var(--ease-out);
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Tilt elements: JS writes transform, CSS keeps everything else */
[data-tilt] { transform-style: preserve-3d; }

@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .pg-btn::after, .pg-card::after, .bcard::after, .pkg-card::after, .step-cell::after,
    .tile::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .navbar, .lang-dropdown, .activity-dropdown, .cookie-popup { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
}
@media print {
    .navbar, .cookie-popup, .back-to-top, .al-fab, .pwa-install-banner { display: none !important; }
    html.js [data-reveal] { opacity: 1; transform: none; }
}