/* ═══════════════════════════════════════════════════
   BASE.CSS — Horizon Travel System design tokens + reset
   ═══════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  /* Primary — deep navy */
  --color-primary:            #002155;
  --color-primary-container:  #003580;
  --color-on-primary:         #ffffff;
  --color-on-primary-container: #7fa1f2;
  --color-primary-fixed:      #d9e2ff;
  --color-primary-fixed-dim:  #b0c6ff;
  --color-inverse-primary:    #b0c6ff;

  /* Secondary — action teal (CTAs only) */
  --color-secondary:          #006493;
  --color-secondary-container:#00b0fd;
  --color-on-secondary:       #ffffff;
  --color-on-secondary-container: #003f5f;

  /* Tertiary */
  --color-tertiary:           #002154;
  --color-tertiary-container: #00357f;
  --color-on-tertiary:        #ffffff;
  --color-on-tertiary-container: #76a1ff;

  /* Surface / background */
  --color-bg:                 #f9f9ff;
  --color-surface:            #f9f9ff;
  --color-surface-lowest:     #ffffff;
  --color-surface-low:        #f2f3fb;
  --color-surface-container:  #ecedf6;
  --color-surface-high:       #e6e8f0;
  --color-surface-highest:    #e1e2ea;

  /* Text */
  --color-on-surface:         #191c21;
  --color-on-surface-variant: #434651;
  --color-inverse-surface:    #2d3037;
  --color-inverse-on-surface: #eff0f8;

  /* Borders */
  --color-outline:            #747782;
  --color-outline-variant:    #c4c6d3;

  /* Status */
  --color-error:              #ba1a1a;
  --color-error-container:    #ffdad6;
  --color-on-error:           #ffffff;
  --color-success:            #2e7d32;
  --color-success-container:  #f1f8e9;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

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

  /* Layout */
  --container-max: 1200px;
  --gutter:        24px;
  --margin-x:      32px;

  /* Border radius */
  --radius-sm:  0.25rem;   /* 4px  */
  --radius:     0.5rem;    /* 8px  */
  --radius-md:  0.75rem;   /* 12px */
  --radius-lg:  1rem;      /* 16px */
  --radius-xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Elevation */
  --shadow-low:   0 2px 8px rgba(0,33,85,0.06), 0 1px 3px rgba(0,33,85,0.04);
  --shadow-mid:   0 4px 16px rgba(0,33,85,0.09), 0 2px 6px rgba(0,33,85,0.06);
  --shadow-high:  0 8px 32px rgba(0,33,85,0.12), 0 4px 12px rgba(0,33,85,0.07);
  --shadow-float: 0 16px 48px rgba(0,33,85,0.16), 0 6px 20px rgba(0,33,85,0.08);

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── CSS Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-on-surface);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-x);
}

/* ── Typography scales ── */
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.headline-lg {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.3;
}
.headline-md {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 600;
  line-height: 1.4;
}
.body-lg { font-size: 18px; line-height: 1.6; }
.body-md { font-size: 16px; line-height: 1.6; }
.body-sm { font-size: 14px; line-height: 1.5; }

.label-lg {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.label-sm {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.price-display {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* ── Utility classes ── */
.muted  { color: var(--color-on-surface-variant); }

/* Ensure [hidden] always wins over any display:flex/grid set by component classes */
[hidden] { display: none !important; }

.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;
}

/* ═══════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR — mobile only (≤767px)
   ═══════════════════════════════════════════════════ */

/* Hidden by default — shown only at mobile breakpoint */
.bottom-nav { display: none; }

/* Hamburger removed site-wide — keep full top nav usable at tablet widths */
.nav__hamburger { display: none !important; }
@media (min-width: 768px) and (max-width: 860px) {
  .nav__links { display: flex !important; }
  .nav__auth { display: none !important; }
  .nav__icon { display: none; }
  .nav__link { white-space: nowrap; }
}

@media (max-width: 767px) {
  /* Hide top-nav links, auth buttons, and hamburger — bottom nav takes over */
  .nav__links    { display: none !important; }
  .nav__auth     { display: none !important; }
  .nav__hamburger { display: none; }

  /* Ensure the logo stays visible and is left-aligned */
  .nav__inner { justify-content: flex-start; }

  /* Reserve space at bottom of page for the fixed nav bar */
  body { padding-bottom: 64px; }

  /* Bottom nav bar */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--color-primary);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 500;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.25);
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 6px 4px 8px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    min-width: 0;
  }

  .bottom-nav__icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
  }

  .bottom-nav__item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bottom-nav__item--active {
    color: white;
  }

  /* Active indicator dot above the active tab */
  .bottom-nav__item--active::before {
    content: '';
    position: absolute;
    bottom: 60px;
    width: 32px;
    height: 3px;
    background: white;
    border-radius: 0 0 3px 3px;
  }

  /* Tap feedback */
  .bottom-nav__item:active { color: rgba(255, 255, 255, 0.8); }
}