/*
 * The main navigation, Option D. Markup: backend/src/homepage/nav-render.ts.
 * Mockup and the reasoning behind it: design/nav-options.html.
 *
 * LOADED ON EVERY PAGE THE NEW MENU IS ON, which is every page once it is
 * switched on, and the kit's tokens are not: fw-components.css loads only
 * where kit markup is. So every token here carries its own fallback, and the
 * menu looks the same on a page with no kit component on it.
 *
 * SCOPED to .fwn (the desktop list) and .fwn-m (the off-canvas accordion).
 * The two Blocksy rules at the top are the only ones that reach outside, and
 * they exist to let a panel span the header's full width.
 *
 * NO UPPERCASE, as on every page sheet. Sub-topic headings are small and bold.
 */

/* The panel hangs from the header row, not from its menu item. */

/*
 * THE HEADER ROW, WHEN THE NEW MENU IS IN IT. Blocksy splits the row into
 * three equal-sided columns (logo, menu, an empty end column) and centres the
 * menu in the middle one. At 1024 wide that column was 611 pixels and the menu
 * 726, so it spilled both ways and ran over the logo. The empty end column
 * gives its space to the menu, which sits at the right.
 */
/* #header, because Blocksy's own rule is #header [data-column-set="3"] > div
   and an id outranks any number of classes: 1.9.59 had this rule without it,
   and it lost. The logo is wider than the 155 pixel column Blocksy gives it
   at 1024, which is what the menu was overlapping. */
#header [data-device="desktop"] [data-row="middle"] .ct-container:has(.fwn){grid-template-columns:auto 1fr auto}
[data-device="desktop"] [data-row="middle"] :is([data-column="middle"],[data-column="middle"] > [data-items]):has(.fwn){justify-content:flex-end}

/*
 * BLOCKSY STYLES EVERY TOP-LEVEL MENU LINK, through
 * [data-menu*="type-3"] > ul > li > a { background-color: ... }, which is
 * more specific than a class. It turned the contact button's red to
 * transparent, leaving white text on white. These match its shape and win.
 */
[data-menu] > ul.fwn > li > a.fwn-top,[data-menu] > ul.fwn > li > a.fwn-top:hover{background:none}
[data-menu] > ul.fwn > li > a.fwn-cta{background:var(--fw-red,#C8102E);color:#fff}
[data-menu] > ul.fwn > li > a.fwn-cta:hover{background:var(--fw-red-ink,#9C0C24);color:#fff}
/* Measured live, logo to first item: 35px at 1000 (the narrowest desktop
   header), 56 at 1024, 197 at 1180, and 149 at 1181 at full size. */
@media (max-width:1180px){.fwn-top{padding-left:.4rem;font-size:.86rem}.fwn-tog{width:1.25rem;margin-right:0}.fwn-i-cta{margin-left:.35rem}[data-menu] > ul.fwn > li > a.fwn-cta{padding:.6rem .8rem;font-size:.84rem}}
[data-device="desktop"] [data-row="middle"]{position:relative}
#header-menu-1:has(> .fwn){position:static;height:100%}

.fwn{--r:var(--fw-red,#C8102E);--ink:var(--fw-ink,#1B1513);--ink2:var(--fw-ink-2,#5A5250);--ink3:var(--fw-ink-3,#767070);--rule:var(--fw-rule,#DCD8D2);--sand:var(--fw-sand,#F0E9DE);--disp:var(--fw-f-display,"Helvetica Neue",Helvetica,Arial,sans-serif);--ui:var(--fw-f-ui,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
  display:flex;align-items:stretch;height:100%;gap:.15rem;margin:0;padding:0;list-style:none;font-family:var(--ui)}
.fwn *,.fwn *::before,.fwn *::after,.fwn-m *,.fwn-m *::before,.fwn-m *::after{box-sizing:border-box}
/* flex:none and nowrap: at 1024 the items shrank to fit and "All-inclusive"
   and "Group travel" broke onto two lines. The labels keep their width and
   the spacing below 1180 makes the room instead. */
.fwn-i{position:static;display:flex;align-items:center;margin:0;flex:none}
.fwn-top,.fwn-cta{white-space:nowrap}
.fwn-top{display:flex;align-items:center;height:100%;padding:0 .2rem 0 .75rem;font-size:.9rem;font-weight:700;color:var(--r);text-decoration:none;border-bottom:3px solid transparent;border-top:3px solid transparent}
.fwn-i:not([data-k]) .fwn-top{padding-right:.75rem}
.fwn-i.is-open .fwn-top,.fwn-top:hover{border-bottom-color:var(--r)}
.fwn-tog{appearance:none;border:0;background:none;cursor:pointer;width:1.6rem;height:1.6rem;margin-right:.35rem;border-radius:6px;display:grid;place-items:center;color:var(--r);padding:0}
.fwn-tog::before{content:"";width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.fwn-i.is-open .fwn-tog::before{transform:translateY(2px) rotate(-135deg)}
.fwn-tog:focus-visible,.fwn a:focus-visible,.fwn-m a:focus-visible,.fwn-m button:focus-visible{outline:2px solid var(--r,#C8102E);outline-offset:2px}
.fwn-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fwn-i-cta{margin-left:.6rem}
.fwn-cta{display:inline-flex;align-items:center;background:var(--fw-red,#C8102E);color:#fff !important;font-weight:700;font-size:.86rem;padding:.7rem 1.1rem;border-radius:999px;text-decoration:none;white-space:nowrap}
.fwn-cta:hover{background:var(--fw-red-ink,#9C0C24)}

/* ── The panel ─────────────────────────────────────────────────────────── */
.fwn-panel{position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;border-top:1px solid var(--rule);box-shadow:0 18px 40px rgba(27,21,19,.14);animation:fwn-drop .16s ease-out}
.fwn-panel[hidden]{display:none}
@keyframes fwn-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fwn-panel{animation:none}}
.fwn-in{max-width:1290px;margin:0 auto;padding:1.6rem 2rem 1.8rem;display:grid;grid-template-columns:300px minmax(0,1fr) 210px;gap:1.8rem;align-items:start;text-align:left}

/* The door: a photo naming the pillar, the guide to start with, and the hub. */
.fwn-door{position:relative;display:flex;align-items:flex-end;min-height:330px;border-radius:14px;overflow:hidden;background:var(--fw-ocean,#1f5f7a);color:#fff}
.fwn-door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fwn-door:hover img{transform:scale(1.03)}
/* MEASURED, on the four real door photographs, worst pixel under each line:
   pillar name at least 4.94:1 (needs 3), "Start here" 6.74, the title 8.64.
   The first gradient passed at 3.01, which a brighter photo would break. */
.fwn-door::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,38,0) 20%,rgba(8,24,38,.52) 42%,rgba(8,24,38,.74) 62%,rgba(8,24,38,.9))}
.fwn-door-in{padding:1.1rem 1.15rem 1.15rem}
.fwn-door-main{color:#fff !important;text-decoration:none;display:block}
.fwn-door-main::before{content:"";position:absolute;inset:0;z-index:1}
.fwn-door-main > span{position:relative;z-index:2;display:block}
.fwn-pn{font-family:var(--disp,"Helvetica Neue",Helvetica,Arial,sans-serif);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;line-height:1.05}
.fwn-sh{font-size:.74rem;font-weight:800;letter-spacing:.04em;opacity:.9;margin:.7rem 0 .2rem}
.fwn-ft{font-size:.95rem;font-weight:600;line-height:1.3}
.fwn-go{position:relative;z-index:3;display:inline-block;margin-top:.8rem;font-size:.8rem;font-weight:700;background:#fff;color:var(--fw-red,#C8102E) !important;padding:.45rem .8rem;border-radius:999px;text-decoration:none}
.fwn-go:hover{background:var(--fw-sand,#F0E9DE)}

/* The links: each its own row, with a chevron, a reading time, and a hover
   that fills the row. They ran together in the first mockup. */
.fwn-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 1.6rem}
.fwn-grp{margin-bottom:1rem}
.fwn-kick{display:block;font-size:.8rem;font-weight:800;letter-spacing:.02em;color:var(--ink3,#767070) !important;text-decoration:none;padding-bottom:.45rem;border-bottom:1px solid var(--rule,#DCD8D2);margin-bottom:.35rem}
.fwn-kick::after{content:" \2192";opacity:0;transition:opacity .15s}
.fwn-kick:hover{color:var(--fw-red,#C8102E) !important}
.fwn-kick:hover::after{opacity:1}
.fwn-lk{display:flex;align-items:flex-start;gap:.6rem;padding:.48rem .55rem;margin:0 -.55rem;border-radius:8px;text-decoration:none;transition:background .15s}
.fwn-lk::before{content:"";flex:none;width:.4rem;height:.4rem;margin-top:.45rem;border-top:2px solid var(--fw-red,#C8102E);border-right:2px solid var(--fw-red,#C8102E);transform:rotate(45deg);transition:transform .15s}
.fwn-lk b{display:block;font-size:.9rem;font-weight:600;line-height:1.3;color:var(--fw-ink,#1B1513)}
.fwn-lk small{display:block;font-size:.74rem;color:var(--fw-ink-3,#767070);margin-top:.12rem}
.fwn-lk:hover{background:var(--fw-sand,#F0E9DE)}
.fwn-lk:hover b{color:var(--fw-red,#C8102E);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.fwn-lk:hover::before{transform:translateX(2px) rotate(45deg)}

/* Brands, and the About tile on the Advice panel. */
.fwn-sidehd{font-size:.8rem;font-weight:800;letter-spacing:.02em;color:var(--fw-ink-3,#767070);margin:0 0 .6rem}
.fwn-tile{position:relative;display:flex;align-items:flex-end;min-height:100px;border-radius:10px;overflow:hidden;color:#fff !important;text-decoration:none;margin-bottom:.6rem;background:var(--fw-sand,#F0E9DE)}
.fwn-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fwn-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,24,38,0) 30%,rgba(8,24,38,.82))}
.fwn-tile b{position:relative;z-index:1;padding:.55rem .7rem;font-size:.88rem}

/* ── The off-canvas accordion (phone and tablet) ────────────────────────── */
.fwn-m{font-family:var(--fw-f-ui,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);text-align:left;width:100%}
.fwn-acc{border-bottom:1px solid var(--fw-rule,#DCD8D2)}
.fwn-acc-b{appearance:none;background:none;border:0;cursor:pointer;width:100%;display:flex;align-items:center;gap:.8rem;padding:.75rem 0;font:inherit;font-weight:750;font-size:1.02rem;color:var(--fw-ink,#1B1513);text-align:left}
.fwn-acc-b img{width:46px;height:46px;flex:none;border-radius:9px;object-fit:cover}
.fwn-acc-b span{flex:1}
.fwn-acc-b i{width:.6rem;height:.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-right:.35rem;transition:transform .2s}
.fwn-acc-b[aria-expanded="true"] i{transform:rotate(-135deg)}
.fwn-acc-body{padding:0 0 1.1rem}
.fwn-acc-body[hidden]{display:none}
.fwn-m .fwn-door{min-height:200px}
/* On a phone the text fills most of a short door and starts near the top, so
   the scrim starts dark. The first one failed there (2.61 on a pillar name);
   this one measures at least 4.55 on the name and 5.89 on "Start here". */
.fwn-m .fwn-door::after{background:linear-gradient(180deg,rgba(8,24,38,.55) 0%,rgba(8,24,38,.7) 40%,rgba(8,24,38,.9))}
.fwn-m .fwn-pn{font-size:1.35rem}
.fwn-m .fwn-groups{display:block;margin-top:.9rem}
.fwn-hs{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.3rem}
.fwn-hs .fwn-tile{flex:0 0 46%;scroll-snap-align:start;min-height:110px;margin:0}
.fwn-m-foot{display:flex;gap:.7rem;align-items:center;padding:1rem 0 .5rem}
.fwn-m-about{font-weight:700;font-size:.92rem;color:var(--fw-ink-2,#5A5250) !important;text-decoration:none}
.fwn-m .fwn-cta{flex:1;justify-content:center}
@media (min-width:600px){
  .fwn-m .fwn-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem}
  .fwn-hs .fwn-tile{flex-basis:30%}
}

/*
 * THE OFF-CANVAS DRAWER IS DARK. Blocksy's panel on flyaway.ca is near black,
 * rgba(18,21,25,.98), with a white logo and white social icons made for it,
 * so the accordion is set for that panel rather than turning it white. The
 * first build assumed white and put dark ink on the dark panel. Colours are
 * the kit's own dark tokens, written out because the kit may not be loaded.
 * On the panel, #F2EEE9 is about 15:1, #B5ADA8 about 8:1, #8A817C about 5:1.
 */
#offcanvas .fwn-acc{border-bottom-color:rgba(255,255,255,.14)}
#offcanvas .fwn-acc-b{color:#F2EEE9}
#offcanvas .fwn-lk b{color:#F2EEE9}
#offcanvas .fwn-lk small{color:#B5ADA8}
#offcanvas .fwn-lk:hover{background:rgba(255,255,255,.08)}
#offcanvas .fwn-lk:hover b{color:#fff}
#offcanvas .fwn-lk::before{border-color:#E8475F}
#offcanvas .fwn-kick,#offcanvas .fwn-sidehd{color:#B5ADA8 !important;border-bottom-color:rgba(255,255,255,.14)}
#offcanvas .fwn-kick:hover{color:#fff !important}
#offcanvas .fwn-m-about{color:#F2EEE9 !important}
#offcanvas .fwn-go:hover{background:#F2EEE9}

/*
 * BLOCKSY'S PHONE-MENU TYPE LEAKS IN. It sets every link inside the off-canvas
 * menu to 20px bold on a 33px line, through a selector that includes the
 * element name, which outranks a single class. Checked live: sub-topic
 * headings, the door's button, About and the contact button all came out at
 * 20px, and the reading times sat on 33px lines. #offcanvas outranks it.
 */
#offcanvas .fwn-m a{font-size:.9rem;font-weight:400;line-height:1.3;letter-spacing:normal}
#offcanvas .fwn-m a.fwn-kick{font-size:.8rem;font-weight:800;letter-spacing:.02em}
#offcanvas .fwn-m a.fwn-go{font-size:.8rem;font-weight:700;line-height:1.2}
#offcanvas .fwn-m a.fwn-lk small{font-size:.74rem;font-weight:400;line-height:1.3}
#offcanvas .fwn-m a.fwn-door-main{line-height:1.25}
#offcanvas .fwn-m a.fwn-tile b{font-size:.88rem;line-height:1.2}
#offcanvas .fwn-m a.fwn-m-about{font-size:.92rem;font-weight:700}
#offcanvas .fwn-m a.fwn-cta{font-size:.9rem;font-weight:700;line-height:1.2}
/* The drawer is 98% opaque, which let the page's own text show through the
   accordion. Fully opaque while the new menu is in it. */
#offcanvas:has(.fwn-m) .ct-panel-inner{background-color:rgb(18,21,25)}