/* Site stylesheet. */
/* ── Design tokens ─────────────────────────────────────────────────
   Every visual property references these variables.
   Zero hardcoded hex values appear in any rule below.

   Changing a value here updates every page on every domain
   the next time pages are regenerated. */
:root {
    /* Core palette - Apple-inspired neutral + blue accent */
    --c-text:       #1d1d1f;
    --c-text-2:     #6e6e73;
    --c-blue:       #007aff;
    --c-blue-hover: #0056b3;
    --c-bg:         #f5f5f7;
    --c-card:       #ffffff;
    --c-border:     rgba(0, 0, 0, 0.06);
    --c-green:      #2e7d32;
    --c-orange:     #ea580c;
    --c-red:        #c62828;

    /* Brand partner colors - affiliate CTAs across templates */
    --c-amazon:       #ff9900;
    --c-viator:       #FF5533;
    --c-viator-hover: #E6432E;
    --c-google:       #4285f4;

    /* Dark CTA sections (hotel banner, newsletter) */
    --c-navy:         #1a365d;
    --c-cta-warm:     #ed8936;
    /* Semantic UI tints - contextual backgrounds and text */
    --c-success-bg:   #e8f5e9;
    --c-success-text: #2e7d32;
    --c-warning-bg:   #fff3cd;
    --c-warning-text: #856404;
    --c-danger-bg:    #ffebee;
    --c-danger-text:  #991b1b;
    --c-info-bg:      #e3f2fd;
    --c-info-text:    #1976d2;
    /* Amazon affiliate button colors */
    --c-amazon-btn:       #F8D94C;
    --c-amazon-btn-hover: #F0C14B;
    --c-amazon-btn-text:  #0F1111;

    /* Spacing scale - 8px grid (Material) */
    --sp-1: 8px;
    --sp-2: 16px;
    --sp-3: 24px;
    --sp-4: 32px;
    --sp-5: 48px;
    --sp-6: 64px;

    /* Typography - Inter with system fallbacks */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ── Type scale ────────────────────────────────────────────────────
   28 / 20 / 16 / 14 / 12 - no other sizes.

   Font-family, margin, and padding resets are owned by base.html's
   inline <style> block, not this file.  The only global rule this
   file sets is box-sizing, which is a universal best practice that
   every layout depends on. */
*, *::before, *::after {
    box-sizing: border-box;
}


/* ── Shared card ───────────────────────────────────────────────────
   ONE card style used everywhere: white background, hairline border,
   12px radius, 24px padding, no shadow.

   Add .card--link on <a> elements to suppress link decoration. */
.card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: var(--sp-3);
    transition: border-color 0.15s;
}
.card:hover {
    border-color: rgba(0, 0, 0, 0.12);
}

/* When the card itself is an <a> tag (e.g., homepage plan cards) */
.card--link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.card--link:hover {
    text-decoration: none;
}


/* ── Buttons ───────────────────────────────────────────────────────
   TWO styles only: primary (blue fill) and ghost (border).
   44px min-height meets Apple/Material touch targets. */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 44px;
    padding: var(--sp-1) 20px;
    background: var(--c-blue);
    color: var(--c-card);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-primary:hover {
    background: var(--c-blue-hover);
    color: var(--c-card);
    text-decoration: none;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 44px;
    padding: var(--sp-1) 20px;
    background: transparent;
    color: var(--c-text);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--c-border);
    border-radius: 20px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.btn-ghost:hover {
    border-color: rgba(0, 0, 0, 0.12);
    background: var(--c-bg);
    text-decoration: none;
}


/* ── Section layout ────────────────────────────────────────────────
   Consistent vertical rhythm: 64px between sections.

   .section alone sets only padding (backward-compatible with older
   templates that use .container inside for width constraint).

   Modifiers:
     .section--constrained  980px max-width, auto margins (new templates)
     .section--narrow       800px max (for long-form text)
     .section--bg           light gray background band */
.section {
    padding: var(--sp-6) var(--sp-3);
}
.section--constrained {
    max-width: 980px;
    margin: 0 auto;
}
.section--narrow {
    max-width: 800px;
    margin: 0 auto;
}
.section--bg {
    background: var(--c-bg);
}

/* Section headers - centered by default */
.section__heading {
    font-size: 28px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: -0.02em;
    margin: 0 0 var(--sp-1);
    text-align: center;
}
.section__subheading {
    font-size: 14px;
    color: var(--c-text-2);
    text-align: center;
    margin: 0 0 var(--sp-4);
}


/* ── Container (backward-compatibility) ────────────────────────────
   Older templates (budget_landing, transportation_hub, budget_tier)
   use .container inside .section for width constraint.  New templates
   use .section--constrained instead.  Both approaches coexist. */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-3);
}


/* ── Grid utilities ────────────────────────────────────────────────
   Lightweight layout helpers. Not a full grid system - templates
   define page-specific grids in their own CSS. */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}
.grid-7-3 {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: var(--sp-2);
}


/* ── Hero ──────────────────────────────────────────────────────────
   Hero component (.hero, .hero-image, .hero-overlay, .hero-content)
   is owned by base.html's inline <style> block.  It uses responsive
   clamp() typography and text-shadow for readability.  NOT defined
   here to avoid cascade conflicts.  Templates that need hero sizing
   overrides (e.g., homepage 65vh) do so in {% block extra_head %}. */


/* ── Screen-reader-only utility ────────────────────────────────────
   Visually hides content while keeping it accessible to assistive
   technology.  Used for accessible data tables alongside visual
   charts, skip-navigation links, and ARIA-live regions. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ── Viator widget collapse ────────────────────────────────────────
   Viator widgets load client-side via JavaScript.  Until the script
   populates the container, collapse it so pages don't show large
   blank white space where widgets will appear. */
[data-vi-partner-id]:empty {
    display: none;
}


/* ── Responsive ────────────────────────────────────────────────────
   Single breakpoint at 640px (content-first, not device-first).
   Hero responsiveness is handled by base.html (which owns .hero). */
@media (max-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-7-3 {
        grid-template-columns: 1fr;
    }
    .section {
        padding: var(--sp-5) var(--sp-2);
    }
    .section__heading {
        font-size: 22px;
    }
}