/* ==========================================================================
 * navigation.css — Mega-menu navbar, breadcrumb.
 * Palette tuned to match editorial dark theme in style.css.
 * ========================================================================== */

/* Reset only html — never reset body here, or you wipe out
   `margin: 0 auto` (centering) and `padding: 0 64px 60px` (left/right
   breathing room) set by style.css. */
html { margin: 0; padding: 0; overflow-x: hidden; }

/* Zero only the top padding/margin on body so the navbar sits flush
   against the top of the viewport. Left/right/bottom come from style.css. */
body { margin-top: 0; padding-top: 0 !important; }

.navbar {
    background: #1877F2; /* Facebook blue */
    border-bottom: 1px solid #0F4FA8;
    font-family: 'Segoe UI Historic', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position: relative;
    z-index: 9999;
    width: calc(100% + 80px);
    margin-left: -40px;
    overflow: visible;
}

.navbar > ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 40px;
    list-style: none;
}

@media (max-width: 720px) {
    .navbar > ul { padding: 0 16px; }
}

.navbar > ul > li {
    position: static;
    margin: 0 !important;
    padding: 0 !important;
}

.navbar a {
    display: block;
    padding: 11px 16px;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-bottom: 0 !important;
    transition: color 0.15s ease, background 0.15s ease;
}

.navbar > ul > li:hover > a,
.navbar > ul > li > a:focus {
    background: #166FE5; /* Facebook hover blue */
    color: #ffffff;
}

/* --- Active section (owner 2026-08-31) ----------------------------------
   "when user is browsing /visa/japan/ the Japan background is yellow, which
   is very good, but can we also make sure the Visa background is different on
   the main menu".

   Two levels of "current", deliberately ranked rather than identical: the
   .section-nav chip is a SOLID accent fill and means "this page"; this is a
   wash plus an underline and means "this section". Making both solid would
   put two identical blocks in a vertical stack and lose the hierarchy.

   aria-current="true", not "page" -- the menu item is the page's ANCESTOR
   section, the same distinction the /news/2026/ chips make. Set at runtime by
   themes<N>.js, because the menu is injected with innerHTML and a <script>
   inside the injected markup would never execute.

   The wash is white-alpha rather than a fixed colour so it works on every
   navbar: the `original` theme keeps its Facebook blue while the other 15
   recolour to --nav-bg, and all of them are dark. The underline uses the
   theme's own --nav-border, which is the accent each theme already pairs with
   its navbar (amber on flightdeck). A fixed amber would have measured 2.4:1
   against `original`'s blue. */
.navbar > ul > li > a[aria-current] {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: inset 0 -3px 0 #ffffff;
}
html[data-theme] .navbar > ul > li > a[aria-current] {
    background: rgba(255, 255, 255, 0.16);
    color: var(--nav-text);
    box-shadow: inset 0 -3px 0 var(--nav-border);
}
/* Hover must still read as hover on the active item, or the section marker
   makes its own menu entry feel dead. */
.navbar > ul > li:hover > a[aria-current] {
    background: rgba(255, 255, 255, 0.28);
}
html[data-theme] .navbar > ul > li:hover > a[aria-current] {
    background: rgba(255, 255, 255, 0.26);
}

/* --- Breadcrumb --------------------------------------------------------- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.82rem;
    gap: 6px;
    margin: 12px 0 18px;
    padding: 0;
    color: #6b7180;
}

.breadcrumb a {
    color: #7aa7ff;
    text-decoration: none;
    border-bottom: 0;
}

.breadcrumb a:hover {
    color: #a5c4ff;
    border-bottom: 1px solid #a5c4ff;
}

/* === MEGA MENU DROPDOWN ================================================= */

/* The dropdown becomes a mega panel spanning the full navbar width. It used
   to be capped at 1600px to line up with the page body; since the 2026-08-02
   full-width pass the body is fluid, so the panel is too. */
.navbar .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    background: #0c1222;
    list-style: none;
    margin: 0;
    padding: 24px 40px 28px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9);
    z-index: 10000;
    border-top: 2px solid #0F4FA8;
    border-bottom: 2px solid #1a2744;
    flex-wrap: wrap;
    gap: 8px 18px;
    max-height: 80vh;
    overflow-y: auto;
    align-content: flex-start;
}

.dropdown-compact { /* no special sizing needed for mega menu */ }

.navbar > ul > li:hover > .dropdown {
    display: flex !important;
}

/* --- Top-level links in dropdown (non-submenu items like "Index") -------- */
.navbar .dropdown > li {
    margin: 0;
    padding: 0;
    position: relative;
}

/* Regular dropdown items (non-submenu) - inline links at top */
.navbar .dropdown > li:not(.has-submenu) {
    width: auto;
    flex-shrink: 0;
}

.navbar .dropdown > li:not(.has-submenu) > a {
    padding: 6px 14px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #7aa7ff;
    border-radius: 4px;
    white-space: nowrap;
}

.navbar .dropdown > li:not(.has-submenu) > a:hover {
    background: #141414;
    color: #a5c4ff;
}

/* --- Submenu category columns ------------------------------------------- */
.has-submenu {
    position: relative !important;
    min-width: 160px;
    max-width: 240px;
    flex: 0 0 auto;
}

/* Category heading link */
.has-submenu > a {
    display: block;
    padding: 0 0 6px 0 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #7aa7ff !important;
    border-bottom: 1px solid #1f1f1f !important;
    margin-bottom: 6px;
    white-space: nowrap;
}

/* Remove the old flyout arrow */
.has-submenu > a::after {
    content: none !important;
}

.has-submenu > a::before { content: none !important; }

.has-submenu > a:hover {
    color: #a5c4ff !important;
    background: transparent !important;
}

/* The submenu is always visible (no flyout) — it's the list under the heading */
.submenu {
    display: block !important;
    position: static !important;
    background: transparent !important;
    min-width: unset !important;
    list-style: none;
    margin: 0;
    padding: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
    border: none !important;
}

.submenu li {
    position: relative;
    margin: 0;
    padding: 0;
}

.submenu li a {
    padding: 4px 0;
    font-size: 0.82rem;
    color: #c8ccd4;
    display: block;
    line-height: 1.45;
    white-space: normal;
    border-bottom: none !important;
}

.submenu li a:hover {
    color: #ffffff;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- 2-column submenu (Airlines › Direct Carriers / Booking Sites) ------- */
.has-submenu-2col {
    min-width: 380px;
    max-width: 480px;
}

.has-submenu-2col > .submenu {
    column-count: 2;
    column-gap: 28px;
}

.has-submenu-2col > .submenu > li {
    break-inside: avoid;
}

/* --- Nested submenu (e.g. a city's sub-pages: Pattaya › Hotels) ---------- */
.submenu .submenu-nested {
    margin: 2px 0 5px 10px;
    padding-left: 9px !important;
    border-left: 1px solid #1f1f1f !important;
}

.submenu .submenu-nested li a {
    font-size: 0.78rem;
    color: #9aa0ab;
    padding: 3px 0;
}

.submenu .submenu-nested li a:hover {
    color: #ffffff;
}

/* --- Dropdown section headers (if used) -------------------------------- */
.dropdown-section-header {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7aa7ff;
    padding: 10px 0 5px;
    margin-top: 6px;
    border-top: 1px solid #1a2744;
    font-weight: 600;
    pointer-events: none;
}

.dropdown-section-header:first-child {
    margin-top: 0;
    border-top: 0;
}

/* --- Scrollbar in mega panel ------------------------------------------- */
.dropdown::-webkit-scrollbar { width: 8px; }
.dropdown::-webkit-scrollbar-track { background: #0c1222; }
.dropdown::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 4px; }
.dropdown::-webkit-scrollbar-thumb:hover { background: #3a414e; }

/* --- Subtle entrance animation ----------------------------------------- */
@keyframes megaSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.navbar > ul > li:hover > .dropdown {
    animation: megaSlideDown 0.18s ease-out;
}

/* --- Responsive: stack columns on small screens ------------------------ */
@media (max-width: 720px) {
    .navbar .dropdown {
        padding: 16px 16px 20px;
        gap: 6px 20px;
    }
    .has-submenu {
        min-width: 140px;
        max-width: 100%;
    }
}

/* --- 2026-04-25: Mobile responsive additions ----------------------------- */
@media (max-width: 768px) {
    /* Navbar: realign full-bleed against the new 16px body padding */
    .navbar {
        margin-left: -16px;
        width: calc(100% + 32px);
    }
    .navbar > ul {
        padding: 0 8px;
        gap: 0;
    }
    .navbar a {
        padding: 9px 10px;
        font-size: 0.95rem;
    }

    /* Mega-menu dropdown: collapse to single column, scrollable */
    .navbar .dropdown {
        padding: 12px 14px 16px;
        gap: 4px 0;
        flex-direction: column;
        flex-wrap: nowrap;
        max-height: 70vh;
    }
    .has-submenu {
        min-width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        margin-bottom: 8px;
    }
    .has-submenu > a {
        font-size: 0.7rem !important;
        padding: 4px 0 4px 0 !important;
    }
    .submenu li a {
        font-size: 0.82rem;
        padding: 5px 0;
    }
    .navbar .dropdown > li:not(.has-submenu) > a {
        font-size: 0.82rem;
        padding: 5px 10px;
    }

    .breadcrumb {
        font-size: 0.78rem;
        margin: 8px 0 12px;
    }
}

@media (max-width: 480px) {
    .navbar {
        margin-left: -10px;
        width: calc(100% + 20px);
    }
    .navbar > ul { padding: 0 4px; }
    .navbar a {
        padding: 8px 8px;
        font-size: 0.88rem;
    }

    .navbar .dropdown {
        padding: 10px 10px 12px;
        max-height: 65vh;
    }
    .submenu li a { font-size: 0.8rem; }
    .breadcrumb { font-size: 0.74rem; }
}

/* --- 2026-08-30: dot separators between top-level nav items (owner request).
   Done in CSS with ::before rather than by typing "·" into menu<N>.html, so the
   separators are never read aloud by a screen reader, never get copied into a
   link label, and vanish on their own in burger mode.
   The li has to become a flex row because .navbar a is display:block -- an
   inline ::before next to a block link would otherwise drop onto its own line.
   Safe to do: .navbar .dropdown is position:absolute, so it sits outside the
   li's flow and the mega-panels are unaffected. */
.navbar > ul > li { display: flex; align-items: center; }
.navbar > ul > li + li::before {
    content: "\00b7";
    color: var(--nav-text, #ffffff);
    opacity: 0.45;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* --- 2026-08-12: Mobile burger menu (owner request — the wrapped two-row
   nav ate a third of a phone viewport). At ≤768px the item list collapses
   behind a burger toggle (inline onclick in menu<N>.html, because injected
   <script> tags never execute); the brand link stays visible. Dropdowns are
   suppressed in burger mode — every top-level item links to a real landing. */
.nav-burger { display: none; background: none; border: 0; }
@media (max-width: 768px) {
    .nav-burger {
        display: block; position: absolute; top: 5px; right: 12px;
        padding: 9px 10px; cursor: pointer; z-index: 11;
        border: 1px solid rgba(255,255,255,0.35); border-radius: 8px;
    }
    .nav-burger span {
        display: block; width: 20px; height: 2px; margin: 4px 0;
        border-radius: 1px; background: var(--nav-text, #fff);
    }
    .navbar > ul { padding-right: 56px; }
    .navbar > ul:not(.nav-open) > li { display: none; }
    .navbar > ul:not(.nav-open) > li:first-child { display: block; }
    .navbar > ul.nav-open { flex-direction: column; align-items: stretch; }
    .navbar > ul.nav-open > li { display: block; width: 100%; border-top: 1px solid rgba(255,255,255,0.12); }
    .navbar > ul.nav-open > li:first-child { border-top: 0; }
    .navbar > ul.nav-open .dropdown { display: none !important; }
    /* Stacked rows already have borders; a leading dot on each would read
       as a bullet list rather than a separator. */
    .navbar > ul > li + li::before { content: none; }
}

/* --- 2026-08-12 follow-up (owner iPhone screenshot): the burger was taller
   than the nav row, so the navbar's bottom border cut through it — shrink it
   and center it vertically. And the brand reads too small on phones. */
@media (max-width: 768px) {
    /* Owner: keep the burger FULL SIZE (no shrink) — centering alone clears
       the border, since the enlarged brand makes the bar tall enough. */
    .navbar a#home { font-size: 1.6rem; font-weight: 700; padding: 12px 12px; }
    /* Owner rule: the burger must stay comfortably finger-tappable — enforce
       the 44x44px minimum touch target (Apple HIG / WCAG) explicitly. */
    .nav-burger {
        /* Pinned to the TOP row (owner: the button must not drift down the
           expanded list — top:50% centered against the whole open menu). */
        top: 6px; transform: none;
        min-width: 44px; min-height: 44px;
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    /* Open list: tighter rows (owner: "a little bit shorter") — still ≥44px
       tall, honoring the touch-target floor. Specificity beats the base
       .navbar > ul > li > a padding. */
    .navbar > ul.nav-open > li > a { padding: 12px 14px; font-size: 1rem; }
}