/* ==========================================================================
   SUNBURNT ATLAS — GLOBAL STYLESHEET
   sunburnt-global.css

   Contains: CSS variables, base resets, typography, nav, hamburger drawer,
   breadcrumb, page hero, footer, and the mobile @media rules for all of the
   above. This file is identical on every page — never edit a copy of these
   rules inside an individual page's <style> block again. If a fix is needed,
   fix it here once and it propagates everywhere on next deploy.

   Page-specific CSS (unique hero layouts, one-off sections, page-only colors)
   stays in that page's own <style> block. Shared component patterns (cards,
   tables, tabs, grids, banners, pills) live in sunburnt-components.css, not
   here and not inline.

   Last built: June 29, 2026 — Stylesheet Migration session.
   Canonical reference pages used to build this: about-us.html (hamburger
   drawer), vietnam.html + philippines.html (nav/footer reconciliation).
   ========================================================================== */

/* ---------- CSS Variables ---------- */
:root {
  --ocean:#0077B6; --ocean-deep:#023E8A; --turquoise:#00B4D8; --aqua:#48CAE4;
  --sand:#F5EDD6; --sand-dark:#E8D9B5; --coral:#E07A5F; --white:#FFFFFF;
  --dark:#1A2B3C; --muted:#5A6E7F; --light-bg:#F0F7FF; --green:#0F6E56; --green-bg:#E8F5F1;
}

/* ---------- Base / Reset ----------
   These two rules are deliberately SEPARATE selectors, not a combined
   `html, body { }` block — that distinction affects how some mobile
   browsers compute horizontal overflow. Do not merge them. */
html { max-width:100%; overflow-x:hidden; }
body { margin:0; font-family:'DM Sans',sans-serif; background:var(--sand); color:var(--dark); max-width:100vw; overflow-x:hidden; }
a { text-decoration:none; }
* { box-sizing:border-box; }

/* ---------- Typography ---------- */
h1, h2, h3, .logo, .footer-brand .footer-logo, .tab-btn, .section-tag,
.banner h4, .price-figure, .data-table th, .vf-days {
  font-family:'Roboto Slab',serif;
}
body, p, .nav-links a, .pill, .data-table td, .meta-item {
  font-family:'DM Sans',sans-serif;
}

/* ---------- Nav (desktop) ---------- */
nav { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 3rem; background:var(--ocean-deep); position:sticky; top:0; z-index:100; }
.logo { font-size:1.5rem; font-weight:800; color:white; letter-spacing:-0.5px; -webkit-font-smoothing:antialiased; }
.logo span { color:var(--aqua); }
.nav-links { display:flex; gap:1.8rem; list-style:none; margin:0; padding:0; }
.nav-links a { color:#FFFFFF; font-size:0.88rem; font-weight:500; transition:color 0.2s; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.nav-links a:hover, .nav-links a.active { color:var(--aqua); }
.nav-cta { background:var(--turquoise); color:white; border:none; padding:0.6rem 1.4rem; border-radius:100px; font-family:'DM Sans',sans-serif; font-weight:500; font-size:0.9rem; cursor:pointer; transition:background 0.2s; }
.nav-cta:hover { background:var(--ocean); }

/* ---------- Hamburger button ---------- */
.hamburger { display:none; flex-direction:column; justify-content:space-between; width:24px; height:18px; background:none; border:none; cursor:pointer; padding:0; z-index:301; }
.hamburger span { display:block; width:100%; height:2px; background:#FFFFFF; border-radius:2px; transition:all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* ---------- Overlay ---------- */
.nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:299; opacity:0; transition:opacity 0.3s ease; }
.nav-overlay.active { display:block; opacity:1; }

/* ---------- Drawer ---------- */
.nav-drawer { position:fixed; top:0; right:-280px; width:280px; height:100%; height:100dvh; background:var(--ocean-deep); z-index:300; transition:right 0.3s ease; display:flex; flex-direction:column; padding:5rem 2rem env(safe-area-inset-bottom,2rem) 2rem; box-shadow:-4px 0 20px rgba(0,0,0,0.3); overflow-y:auto; }
.nav-drawer.open { right:0; }
.nav-drawer ul { list-style:none; display:flex; flex-direction:column; gap:0; margin:0; padding:0; }
.nav-drawer ul li { border-bottom:1px solid rgba(255,255,255,0.08); }
.nav-drawer ul li:first-child { border-top:1px solid rgba(255,255,255,0.08); }
.nav-drawer ul a { display:block; color:#FFFFFF; font-size:1rem; font-weight:500; padding:1rem 0; transition:color 0.2s; -webkit-font-smoothing:antialiased; }
.nav-drawer ul a:hover { color:var(--aqua); }
.nav-drawer .drawer-cta { margin-top:1.5rem; background:var(--turquoise); color:white; border:none; padding:0.75rem 1.4rem; border-radius:100px; font-family:'DM Sans',sans-serif; font-weight:500; font-size:0.95rem; cursor:pointer; text-align:center; width:100%; transition:background 0.2s; }
.nav-drawer .drawer-cta:hover { background:var(--ocean); }
.drawer-divider { border:none; border-top:1px solid rgba(255,255,255,0.12); margin:1.2rem 0 0.8rem; }
.drawer-section-label { color:rgba(255,255,255,0.4); font-size:0.7rem; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:0 0 0.4rem; display:block; }
.drawer-country { border-bottom:1px solid rgba(255,255,255,0.08); }
.drawer-country:first-of-type { border-top:1px solid rgba(255,255,255,0.08); }
.drawer-country-row { display:flex; align-items:center; justify-content:space-between; padding:0.85rem 0; cursor:pointer; user-select:none; }
.drawer-country-row .country-label { display:flex; align-items:center; gap:0.6rem; color:#FFFFFF; font-size:0.95rem; font-weight:500; -webkit-font-smoothing:antialiased; }
.drawer-country-row .country-actions { display:flex; align-items:center; gap:0.6rem; }
.drawer-country-row .go-hub { color:var(--ocean-deep); background:var(--aqua); font-size:0.7rem; font-weight:600; padding:0.25rem 0.6rem; border-radius:100px; line-height:1; white-space:nowrap; transition:background 0.2s; }
.drawer-country-row .go-hub:hover { background:#fff; }
.drawer-chevron { color:rgba(255,255,255,0.45); font-size:0.75rem; transition:transform 0.25s ease; line-height:1; display:inline-block; }
.drawer-country.open .drawer-chevron { transform:rotate(90deg); }
.drawer-sub { display:none; padding:0 0 0.8rem 1.6rem; flex-direction:column; }
.drawer-country.open .drawer-sub { display:flex; }
.drawer-sub a { color:rgba(255,255,255,0.6); font-size:0.85rem; padding:0.4rem 0; border-bottom:1px solid rgba(255,255,255,0.05); transition:color 0.2s; -webkit-font-smoothing:antialiased; }
.drawer-sub a:last-child { border-bottom:none; }
.drawer-sub a:hover { color:var(--aqua); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { background:var(--ocean-deep); padding:0.8rem 3rem; border-top:1px solid rgba(255,255,255,0.08); }
.breadcrumb-inner { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.breadcrumb a { color:rgba(255,255,255,0.45); font-size:0.82rem; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--aqua); }
.breadcrumb .current { color:rgba(255,255,255,0.75); font-size:0.82rem; }
.breadcrumb-sep { color:rgba(255,255,255,0.3); font-size:0.78rem; }

/* ---------- Page Hero (shared base — page-specific hero content stays inline) ---------- */
.page-hero { background:var(--ocean-deep); padding:3.5rem 3rem 3rem; }
.hero-tag { display:inline-block; color:var(--aqua); font-size:0.85rem; font-weight:500; margin-bottom:1rem; -webkit-font-smoothing:antialiased; }
.page-hero h1 { color:#FFFFFF; font-size:2.4rem; font-weight:800; line-height:1.2; margin:0 0 1rem 0; -webkit-font-smoothing:antialiased; }
.page-hero h1 .accent { color:var(--aqua); }
.hero-lead { color:#FFFFFF; font-weight:500; font-size:1.05rem; line-height:1.6; max-width:680px; margin:0 0 1.5rem 0; -webkit-font-smoothing:antialiased; }
.hero-meta { display:flex; gap:1.8rem; flex-wrap:wrap; }
.hero-meta-item { color:#FFFFFF; font-weight:500; font-size:0.88rem; -webkit-font-smoothing:antialiased; }

/* ---------- Footer ---------- */
.site-footer { background:var(--ocean-deep); color:#FFFFFF; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.footer-grid { max-width:1200px; margin:0 auto; padding:4rem 3rem 3rem; display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3.5rem; }
.footer-brand .footer-logo { font-size:1.4rem; font-weight:800; color:#FFFFFF; letter-spacing:0.02em; margin-bottom:0.4rem; }
.footer-brand .footer-logo span { color:var(--aqua); }
.footer-tagline { font-size:0.95rem; font-style:italic; color:rgba(255,255,255,0.7); margin:0 0 1.5rem 0; }
.footer-newsletter { display:flex; gap:0.5rem; margin-bottom:1.5rem; max-width:360px; }
.footer-newsletter input[type="email"] { flex:1; padding:0.7rem 1rem; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.08); border-radius:6px; color:#FFFFFF; font-family:'DM Sans',sans-serif; font-size:0.9rem; outline:none; }
.footer-newsletter input[type="email"]::placeholder { color:rgba(255,255,255,0.5); }
.footer-newsletter button { background:var(--turquoise); color:#FFFFFF; border:none; padding:0.7rem 1.4rem; border-radius:6px; font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:500; cursor:pointer; transition:background 0.2s; }
.footer-newsletter button:hover { background:var(--aqua); }
.footer-social { display:flex; gap:0.7rem; }
.footer-social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.75); transition:background 0.2s,color 0.2s,transform 0.2s; }
.footer-social a:hover { background:var(--turquoise); color:#FFFFFF; transform:translateY(-2px); }
.footer-social svg { display:block; }
.footer-col h4 { font-size:0.82rem; font-weight:700; color:#FFFFFF; text-transform:uppercase; letter-spacing:0.12em; margin:0 0 1.4rem 0; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:0.65rem; }
.footer-col a { font-size:0.9rem; color:rgba(255,255,255,0.65); transition:color 0.2s; }
.footer-col a:hover { color:#FFFFFF; }
.footer-divider { height:1px; background:rgba(255,255,255,0.12); margin:0.4rem 0 0.9rem 0; list-style:none; }
.footer-bottom { max-width:1200px; margin:0 auto; padding:1.8rem 3rem 2.5rem; border-top:1px solid rgba(255,255,255,0.1); }
.footer-copy { font-size:0.85rem; font-weight:500; color:rgba(255,255,255,0.65); margin:0 0 0.5rem 0; }
.footer-disclaimer { font-size:0.78rem; color:rgba(255,255,255,0.4); margin:0; line-height:1.55; max-width:800px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==========================================================================
   MOBILE — @media(max-width:768px)
   ========================================================================== */
@media(max-width:768px) {
  .hamburger { display:flex; }
  nav { padding:1rem 1.2rem; }
  .nav-links { display:none; }
  .nav-cta { display:none; }
  .breadcrumb { padding:0.8rem 1.2rem; }
  .page-hero { padding:2.5rem 1.2rem 2.5rem; }
  .page-hero h1 { font-size:1.7rem; }
  .hero-meta { gap:1rem; }

  .footer-grid { grid-template-columns:1fr; gap:2.5rem; padding:3rem 1.5rem 2rem; }
  .footer-newsletter { max-width:100%; }
  .footer-bottom { padding:1.5rem 1.5rem 2rem; }
}