/* =========================================================================
   FAQ PAGE — "Ask & Go"
   Standalone /faq page only. Loaded AFTER faq-section.css so the overrides
   below win at equal specificity.

   Everything that re-shapes the shared _FAQ.cshtml partial is scoped under
   `.fm-section`, a wrapper that exists ONLY on this page. The partial and
   faq-section.css are shared with 8 other views and are never touched here.

   Layout: the Region page's shell (1200px / 5% gutters) is the single
   container for hero, signature strip, chip bar and answers, so this page's
   left axis is the same one /destinations/{region} uses. Inside that shell
   the prose is capped at --faqx-read (820px, Region's own hero measure) and
   left-aligned, so a wide shell never turns an answer into a 1000px line.
   No sidebar. The hero search field is the subject of the page; the sticky
   chip bar is the only navigation.
   ========================================================================= */

.faq-ag {
  --faqx-gold: #C8A14B;
  --faqx-gold-soft: #E4C878;
  --faqx-hero-muted: #C9D1E6;

  /* PAGE SHELL — copied verbatim from the Region page's grid so this page
     sits on the SAME left axis as /destinations/{region}.
     destination-page.css: `.dp-hero-content` and `.dp-inner` are both
     `max-width:1200px; margin:0 auto; padding:0 5%` (the Packages Region,
     packages.css `.pkg-inner` / `.pkg-hero-content`, is identical), so hero
     and body there share one container. The 5% is a PERCENTAGE of the
     containing block — on both pages that block is the full-width section,
     i.e. the viewport — which is why the gutter has to stay a percentage
     here too or the axes would only agree at one window size. */
  --faqx-shell: 1200px;
  --faqx-gutter: 5%;

  /* READING MEASURE — Region caps its hero copy at `.dp-hero-inner`
     820px inside that 1200px shell. Same idea here: the shell is wide, the
     prose is not. Everything that is text (hero block, answer cards, CTA)
     is capped at this and left-aligned against the shell's left edge, so
     the axis is shared without stretching answers to a 1000px+ line. */
  --faqx-read: 820px;
}

/* In-page chip + signature links glide to their target. Same pattern as
   partners.css, including the reduced-motion guard. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The filter toggles the `hidden` PROPERTY (never max-height, which would
   fight the accordion animation in faq-section.css). Several targets carry an
   author-level `display:flex`, which outranks the UA `[hidden]` rule, so the
   attribute needs an author-level rule of its own here. */
.faq-ag [hidden] { display: none !important; }

/* Accessible-but-invisible label for the search input. */
.faqx-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   HERO — same construction as the Contact hero (contact.css .c-hero):
   navy gradient base + a photo layer in its own absolutely-positioned div +
   a directional scrim pseudo-element on top. Standardised with the other
   landings: content is LEFT-aligned on the page's shared 800px axis, so the
   scrim is directional (left-heavy) exactly like Contact (.c-hero::after,
   90deg) and Partners / the destination Region hero (.pp-hero::after and
   .dp-hero::after, 100deg).
   ------------------------------------------------------------------------- */
.faqx-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 384px;
  display: flex;
  align-items: center;
  /* No horizontal padding here on purpose: the gutter lives on
     .faqx-hero-inner instead, so the inner box is the SAME box as
     .faqx-main / .faqx-chipbar-inner / .faqx-signature-wrap at every
     viewport width and the hero text lands on the same left axis as the
     answer cards. Padding here would double the 5% gutter.
     It also keeps the % gutter resolving against the full-width section
     exactly like Region's .dp-hero-content does. */
  padding: clamp(24px, calc(6vw - 16px), 56px) 0 clamp(32px, calc(6vw - 16px), 60px);
  background: linear-gradient(135deg, var(--blue-90) 0%, #1d2846 55%, var(--blue-80) 135%);
}

/* Photo layer. Same technique as .c-hero-bg: a background-image on an empty
   aria-hidden div rather than an <img>, so it never enters the a11y tree and
   the scrim can sit above it without a stacking hack. */
.faqx-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Vertical: the subject (hammock + waterfall) sits across the middle band
     of the source photo; the top is cliff face and the bottom is riverbed
     rock, so 45% keeps the hammock and the falls in frame.
     Horizontal: 38% instead of centre biases the crop toward the LEFT of the
     source, which pushes the hammock and the falls toward the RIGHT of the
     section — away from the left-aligned text. It only bites where the
     section is narrower than the photo's 1.5 aspect (tablet/phone); on a wide
     desktop hero `cover` scales by width and there is no horizontal crop to
     move, which is why the scrim below has to do that work on desktop. */
  background-position: 38% 45%;
  background-repeat: no-repeat;
}

/* Scrim — directional, left-heavy, 100deg (the Partners / Region angle, which
   drops the dense corner slightly below the top-left so a wide short hero
   doesn't band).

   Shape: RECALIBRATED for the Region shell. The content box now starts at
   (100vw - 1200)/2 + 5vw and the 560px input ends 560px later — on a 1440px
   viewport that is 120 + 72 = 192px → 752px, i.e. 13% → 52% of the width
   (the old 848px axis put it at 22% → 61%). The block also has a hard right
   edge at 192 + 820 = 1012px ≈ 70%, since .faqx-h1 is capped at
   --faqx-read. So the ramp moves LEFT: peak from the very edge, ≥0.84 held
   through 52% (past the end of the input), then it opens up — which lets
   more of the waterfall show on the right than the old ramp did, instead of
   dimming photo nothing sits on. The dense band still exists mainly to give
   the white input a dark ground for its 0 16px 32px shadow.

   Contrast: the photo's brightest pixels (the falls) are ~rgb(248,250,252).
   At the 0.90 plateau that composites to ~rgb(51,61,88) → L≈0.047 → 10.8:1
   against white text. At the 0.84 stop under the right end of the input it is
   ~rgb(64,74,99) → L≈0.069 → 8.8:1. Both far past 4.5:1. The gold eyebrow
   (#C8A14B, L≈0.383) now sits at 13% where the ramp is ≈0.912 → ground
   ~rgb(48,58,86), L≈0.044 → 4.6:1 — over the floor, which is why the left
   end of the ramp stays pinned at 0.92 and the first stop was pushed out to
   30% rather than being allowed to fall off early. */
.faqx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(100deg,
    rgba(29, 40, 70, 0.92) 0%,
    rgba(29, 40, 70, 0.90) 30%,
    rgba(29, 40, 70, 0.84) 52%,
    rgba(29, 40, 70, 0.56) 68%,
    rgba(29, 40, 70, 0.22) 84%,
    rgba(29, 40, 70, 0.05) 100%);
}

/* Shared left axis: identical max-width and padding to .faqx-main,
   .faqx-chipbar-inner and .faqx-signature-wrap — and, since all four now
   carry Region's 1200px/5% shell, identical to the Region page's axis too.
   The eyebrow, H1 and search input line up exactly with the accordion
   cards and the "Sailing today?" strip. */
.faqx-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--faqx-shell);
  margin: 0 auto;
  padding: 0 var(--faqx-gutter);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The shared breadcrumb is left-aligned by default, which is what this hero
   now wants — no override needed. */

.faqx-eyebrow {
  margin: 0 0 10px;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Same gold treatment as the Region hero's .dp-eyebrow--gold
     (destination-page.css): identical family/weight/size/letter-spacing/
     case and the same --dp-gold hex, with no rule, dot or chip beside it. */
  color: var(--faqx-gold);
}

/* Own class on purpose: .hh-h1 paints --light-10 and is shared by 8 views. */
.faqx-h1 {
  margin: 0;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--light-00);
  /* The shell is 1200px but a headline is not: cap at Region's own hero
     measure (.dp-hero-inner, 820px) so a longer H1 wraps instead of
     running out past the scrim's dense band. */
  max-width: var(--faqx-read);
}

/* -------------------------------------------------------------------------
   SEARCH (inside the hero). Rendered with `hidden` and unhidden by faq.js.
   ------------------------------------------------------------------------- */
/* Hero subheading: same values as .gp-hero-sub (groups.css) / .dp-hero-sub. */
.faqx-hero-sub {
  font-family: "Work Sans";
  font-size: clamp(15px, 1.6vw, 18px);
  color: #C9D1E6;
  font-weight: 400;
  max-width: 62ch;
  margin: 14px 0 0;
  line-height: 1.55;
}

.faqx-search {
  width: 100%;
  max-width: 560px;
  margin: 26px 0 0;
}

.faqx-search-field {
  position: relative;
  display: block;
}

.faqx-search-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  fill: none;
  stroke: var(--blue-70);
  stroke-width: 2;
  stroke-linecap: round;
}

.faqx-input {
  width: 100%;
  height: 56px;
  padding: 0 20px 0 52px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--light-00);
  box-shadow: 0 16px 32px rgba(41, 51, 88, 0.18);
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--blue-90);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.faqx-input::placeholder {
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--dark-30);
  opacity: 1;
}

.faqx-input:focus,
.faqx-input:focus-visible {
  border-color: var(--blue-40);
  box-shadow: 0 0 0 3px rgba(26, 177, 235, 0.25), 0 16px 32px rgba(41, 51, 88, 0.18);
}

/* Native clear "x" is replaced by the custom .faqx-clear button. */
.faqx-input::-webkit-search-decoration,
.faqx-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.faqx-input::-ms-clear { display: none; }

.faqx-input { padding-right: 52px; }

.faqx-clear {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: var(--blue-70);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.faqx-clear[hidden] { display: none; }

.faqx-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: none;
}

.faqx-clear:hover { background: var(--blue-80); }

.faqx-clear:focus-visible {
  outline: 2px solid var(--blue-90);
  outline-offset: 2px;
}

/* Hero on small screens: the cover crop zooms hard in a narrow box, so pull
   the focal point up a touch to keep the hammock (not the empty riverbed) in
   frame, and widen the dense part of the scrim since the text block now fills
   almost the whole section. */
@media screen and (max-width: 720px) {
  .faqx-hero {
    min-height: 324px;
    padding: 20px 0 28px;
  }

  .faqx-hero-bg { background-position: 26% 40%; }

  /* Deliberately NOT the desktop 100deg ramp. At phone width the text block
     is the full column, so a left-to-right wash would leave the right end of
     every line — and of the input — sitting on bare photo. A near-flat
     vertical scrim is the safe shape here; the horizontal one only pays off
     when there is empty space to the right of the text. */
  .faqx-hero::after {
    background-image: linear-gradient(180deg,
      rgba(29, 40, 70, 0.72) 0%,
      rgba(29, 40, 70, 0.9) 22%,
      rgba(29, 40, 70, 0.9) 80%,
      rgba(29, 40, 70, 0.66) 100%);
  }
}

/* -------------------------------------------------------------------------
   SIGNATURE — "Sailing today?"
   ------------------------------------------------------------------------- */
/* Full shell width on purpose — this is a filled navy card, not prose, and
   Region's own navy cards (.dp-package, .dp-groups-cta) likewise span the
   whole .dp-inner. This is the strip the request asked to match to Region. */
.faqx-signature-wrap {
  width: 100%;
  max-width: var(--faqx-shell);
  margin: 0 auto;
  padding: 32px var(--faqx-gutter) 8px;
}

.faqx-signature {
  background: linear-gradient(135deg, #293358 0%, #16468c 120%);
  border-radius: 16px;
  padding: 28px 32px;
}

.faqx-signature-eyebrow {
  margin: 0 0 16px;
  font-family: "Work Sans", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faqx-gold);
}

.faqx-signature-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.faqx-signature-links li {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.faqx-signature-links li:first-child {
  padding-left: 0;
  border-left: none;
}

.faqx-signature-links li:last-child { padding-right: 0; }

.faqx-signature-link {
  display: inline-block;
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--light-00);
  text-decoration: none;
  transition: color 0.2s ease;
}

.faqx-signature-link:hover { color: var(--faqx-gold-soft); }

/* Meyer reset sets outline:0 on anchors, so declare focus explicitly. */
.faqx-signature-link:focus-visible {
  outline: 2px solid var(--faqx-gold-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Supporting note under the deep links — same navy-card muted treatment as
   Packages' own .pkg-inclusions-note (packages.css): smaller than the body
   links, muted/desaturated colour, no weight, so it reads as secondary
   information under the "Sailing today?" eyebrow rather than a 4th link.
   Colour reuses --faqx-hero-muted, the same muted blue already used for
   copy sitting on this page's navy/scrim surfaces (.faqx-hero-sub). */
.faqx-signature-note {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--faqx-hero-muted);
}

@media screen and (max-width: 720px) {
  .faqx-signature { padding: 24px 20px; }

  .faqx-signature-links { flex-direction: column; }

  .faqx-signature-links li {
    flex: none;
    padding: 12px 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .faqx-signature-links li:first-child {
    padding-top: 0;
    border-top: none;
  }

  .faqx-signature-links li:last-child { padding-bottom: 0; }
}

/* -------------------------------------------------------------------------
   STICKY TOPIC CHIPS
   ------------------------------------------------------------------------- */
.faqx-chipbar {
  position: sticky;
  /* Up to 1120px the site header scrolls away with the page, so the bar docks
     at the very top of the viewport. From 1121px up it must NOT: the desktop
     header (.dsk-main-top-bar-container, shared.css) is position:fixed, 52px
     tall and z-index:1000, so anything stuck at top:0 is painted underneath
     it. That is what used to swallow the chips — see the 1121px block below.
     Same 52px offset the results grid already docks to (results-new.css). */
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--light-15);
  /* 6px here + 4px on the list = 10px of breathing room, and the list's 4px
     is what the chips' 2px focus ring needs so `overflow-x` cannot clip it.
     Total bar height: 33px chip + 20px padding + 1px rule = 54px. */
  padding: 6px 0;
  margin-top: 24px;
}

@media screen and (min-width: 1121px) {
  .faqx-chipbar { top: 52px; }
}

/* While a search filter is active the chips would point at hidden sections,
   so faq.js hides the bar entirely and gives it back when the box is empty. */
.faqx-chipbar.is-filtering { display: none; }

.faqx-chipbar-inner {
  width: 100%;
  max-width: var(--faqx-shell);
  margin: 0 auto;
  padding: 0 var(--faqx-gutter);
}

/* ONE ROW, ALWAYS. Seven chips carrying the full section headings measured
   ~1305px against the 1080px the 1200px/5% shell leaves, so they wrapped to a
   second row and the bar grew to ~106px — taller than the fixed header it was
   hiding behind. The labels are now short (see faqChipLabels in FAQ.cshtml,
   ~916px total), which fits with room to spare at 1280px and 1440px. `nowrap`
   keeps that a guarantee rather than a coincidence: should a label ever grow,
   the bar scrolls instead of silently doubling in height and breaking the
   scroll-margin-top budget below. */
.faqx-chips {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
}

/* Chips keep their intrinsic width — never squeezed into unreadable slivers. */
.faqx-chips li { flex: 0 0 auto; }

.faqx-chip {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--light-15);
  border-radius: 10px;
  background: var(--light-00);
  font-family: "Work Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--dark-70);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.faqx-chip:hover {
  border-color: var(--blue-40);
  color: var(--blue-80);
}

.faqx-chip.is-active {
  background: var(--blue-05);
  border-color: var(--blue-70);
  color: var(--blue-80);
}

.faqx-chip:focus-visible {
  outline: 2px solid var(--blue-80);
  outline-offset: 2px;
}

/* Small screens: the rail bleeds to the viewport edges. The gutter moves from
   the wrapper onto the list itself, so the first chip still sits on the page's
   shared left axis while the overflow is cut at the true screen edge — a chip
   is visibly sliced in half, which is the affordance that says "there is more
   over here". Scrollbar hidden, but the rail keeps its native keyboard
   scrolling: tabbing to a chip scrolls it into view, and scroll-padding-left
   stops the focused chip landing flush against the edge. */
@media screen and (max-width: 720px) {
  .faqx-chipbar-inner { padding: 0; }

  .faqx-chips {
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--faqx-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px var(--faqx-gutter);
  }

  .faqx-chips::-webkit-scrollbar { display: none; }

  .faqx-chips li { scroll-snap-align: start; }
}

/* -------------------------------------------------------------------------
   MAIN COLUMN
   ------------------------------------------------------------------------- */
.faqx-main {
  width: 100%;
  max-width: var(--faqx-shell);
  margin: 0 auto;
  padding: 56px var(--faqx-gutter) 80px;
}

/* READING MEASURE inside the wide shell.
   .faqx-main is a plain block, so a max-width with no auto margins leaves
   every one of these pinned to the LEFT edge of the shell — i.e. still on
   the exact axis the hero eyebrow, the H1 and the chips sit on. Only the
   line length is limited; the axis is not moved. Answers are prose and read
   badly past ~75 characters, which is what a 1000px+ card would produce. */
.faqx-count,
.faqx-empty,
.fm-section,
.faqx-cta {
  max-width: var(--faqx-read);
}

.faqx-count {
  margin: 0 0 8px;
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--dark-30);
}

.faqx-empty {
  margin: 8px 0 0;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--dark-70);
}

.faqx-empty-mail,
.faqx-cta-mail {
  color: var(--blue-70);
  text-decoration: underline;
}

.faqx-empty-mail:hover,
.faqx-cta-mail:hover { color: var(--blue-80); }

.faqx-empty-mail:focus-visible,
.faqx-cta-mail:focus-visible {
  outline: 2px solid var(--blue-80);
  outline-offset: 2px;
  border-radius: 3px;
}

/* -------------------------------------------------------------------------
   SECTION OVERRIDES — neutralise the shared partial's own shell.
   Scoped under .fm-section, which only this page renders.
   ------------------------------------------------------------------------- */
.fm-section {
  /* Clears whatever is pinned above the target: the 54px chip bar alone here,
     and the 52px fixed header on top of it from 1121px up (see the override
     under the section rules below), plus a small breathing gap. */
  scroll-margin-top: 72px;
  margin-top: 48px;
  /* max-width is set with the other prose blocks above; repeated here only
     as a reminder that the section is deliberately narrower than the shell. */
}

.fm-section:first-of-type { margin-top: 24px; }

.fm-section .hfq-container-mod {
  background: none;
  border-top: none;
  padding: 0;
}

.fm-section .hfq-content-mod {
  padding: 0;
  max-width: none;
  margin: 0;
  gap: 20px;
}

/* The partial centres its heading; on this page every section reads as part
   of one left-aligned column. */
.fm-section .hfq-head {
  align-items: flex-start;
  text-align: left;
  gap: 6px;
}

.fm-section .hfq-head .faq-heading {
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--blue-90);
  text-align: left;
}

/* Deep links from the signature strip land under the sticky chip bar
   without the answer card being clipped by it. */
.fm-section .fm-question-wrapped { scroll-margin-top: 72px; }

/* Desktop stacks the 52px fixed site header on top of the 54px chip bar. */
@media screen and (min-width: 1121px) {
  .fm-section,
  .fm-section .fm-question-wrapped { scroll-margin-top: 120px; }
}

/* -------------------------------------------------------------------------
   FINAL CTA
   ------------------------------------------------------------------------- */
.faqx-cta {
  margin-top: 56px;
  padding: 32px;
  background: var(--light-00);
  border: 1px solid var(--light-15);
  border-radius: 16px;
}

.faqx-cta-title {
  margin: 0 0 8px;
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: var(--blue-90);
}

.faqx-cta-copy {
  margin: 0;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--dark-70);
}

/* -------------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faqx-chip,
  .faqx-input,
  .faqx-signature-link {
    transition: none;
  }
}