/* ==========================================================================
   EBF — Canonical Quick Answer card + hub/article readability
   Shared by destination (money) pages and cluster (hub) pages.
   Uses the existing brand tokens; falls back for non-studio themes.
   ========================================================================== */

:root{
  --qa-ink:#14202B;
  --qa-muted:#4A6173;
  --qa-gold:#C4400E;
  --qa-surface:#FBF7F3;      /* warm paper */
  --qa-surface-2:#FFFFFF;
  --qa-line:rgba(20,32,43,.10);
  --qa-radius:16px;
}

/* ------------------------------------------------------------------ card -- */
.money-quick-answer{
  background:var(--qa-surface);
  border:1px solid var(--qa-line);
  border-radius:var(--qa-radius);
  padding:clamp(1.25rem,2.4vw,2.25rem);
  margin:0 0 2rem;
  max-width:62rem;
  box-shadow:0 1px 2px rgba(20,32,43,.04);
}

/* Sits directly under the hero on both page types */
.qa-band{
  /* Longhand only: the shorthand would wipe the Bootstrap container gutters. */
  padding-top:clamp(1.5rem,3vw,2.5rem);
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
}

/* Only the LAST card in the band loses its bottom margin.
   This used to zero the Quick Answer unconditionally, which was right on an
   airline page (where it is the band's only child) and wrong on a money page,
   where the key-facts card renders straight after it: two bordered cards in
   different colours ended up sharing an edge and reading as one broken box. */
.qa-band > *:last-child{ margin-bottom:0; }

.money-quick-answer__eyebrow{
  margin:0 0 .55rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--qa-muted);
}

.money-quick-answer__q{
  margin:0 0 .9rem;
  font-size:clamp(1.15rem,1.05rem + .7vw,1.5rem);
  line-height:1.32;
  font-weight:700;
  color:var(--qa-ink);
  letter-spacing:-.01em;
}

/* The direct answer — the passage an answer engine should lift */
.money-quick-answer .money-answer__text,
.money-quick-answer__direct{
  margin:0 0 .85rem;
  font-size:clamp(1rem,.97rem + .25vw,1.125rem);
  line-height:1.7;
  color:var(--qa-ink);
}

.money-quick-answer__context{
  margin:0 0 .85rem;
  font-size:1rem;
  line-height:1.7;
  color:var(--qa-muted);
}

.money-quick-answer__qualification{
  margin:0 0 .85rem;
  font-size:.9rem;
  line-height:1.6;
  color:var(--qa-muted);
}

.money-quick-answer__implication{
  margin:0;
  padding:.75rem 0 0;
  border-top:1px solid var(--qa-line);
  font-size:1rem;
  line-height:1.65;
  color:var(--qa-ink);
  font-weight:600;
}

/* ----------------------------------------------------------- fact bullets -- */
.money-quick-answer__facts{
  list-style:none;
  margin:1.1rem 0 0;
  padding:1.1rem 0 0;
  border-top:1px solid var(--qa-line);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem 2rem;
}
.money-quick-answer__facts li{
  position:relative;
  padding-left:1.1rem;
  font-size:.92rem;
  line-height:1.55;
  color:var(--qa-muted);
}
.money-quick-answer__facts li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--qa-gold);
}
/* implication sits above the facts when both are present */
.money-quick-answer__implication + .money-quick-answer__facts{ margin-top:1.1rem; }

@media (max-width:640px){
  .money-quick-answer__facts{ grid-template-columns:1fr; gap:.55rem; }
}

/* ======================================================================
   Hub / long-form article readability
   ====================================================================== */
.airline-guide{
  max-width:62rem;
  font-size:1.02rem;
  line-height:1.75;
  color:var(--qa-ink);
}
.airline-guide > p{ margin:0 0 1.05rem; color:var(--qa-ink); }

/* Each top-level section of the guide starts on a visible edge. Six or seven
   consecutive h2 sections separated by 38px of whitespace alone is what makes a
   long page read as one column of text. The first heading keeps no rule - there
   is nothing above it to divide from. */
.airline-guide > h2{
  border-top:1px solid var(--qa-line);
  padding-top:clamp(1.6rem,2.6vw,2.2rem);
}
.airline-guide > h2:first-of-type{ border-top:0; padding-top:0; }

.airline-guide h2{
  margin:2.4rem 0 .9rem;
  font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--qa-ink);
  scroll-margin-top:90px;
}
.airline-guide h2:first-of-type{ margin-top:1.2rem; }
.airline-guide ul{ margin:0 0 1.15rem; padding-left:0; list-style:none; }
.airline-guide ul li{
  position:relative;
  padding-left:1.35rem;
  margin:0 0 .55rem;
}
.airline-guide ul li::before{
  content:"";
  position:absolute; left:.15rem; top:.62em;
  width:6px; height:6px; border-radius:50%;
  background:var(--qa-gold);
}
.airline-guide strong{ color:var(--qa-ink); font-weight:650; }

/* On-page contents as chips */
.airline-guide-toc{
  background:var(--qa-surface-2);
  border:1px solid var(--qa-line);
  border-radius:12px;
  padding:1rem 1.1rem;
  margin:0 0 1.75rem;
}
.airline-guide-toc__label{
  margin:0 0 .6rem;
  font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--qa-muted);
}
.airline-guide-toc p:last-child{
  margin:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
  font-size:0;                      /* collapses the separator whitespace */
}
.airline-guide-toc a{
  display:inline-block;
  font-size:.86rem;
  line-height:1;
  padding:.48rem .75rem;
  border:1px solid var(--qa-line);
  border-radius:999px;
  color:var(--qa-ink);
  text-decoration:none;
  background:#fff;
  transition:background .15s ease,border-color .15s ease;
}
.airline-guide-toc a:hover,
.airline-guide-toc a:focus-visible{
  background:var(--qa-surface);
  border-color:var(--qa-gold);
  color:var(--qa-ink);
}

/* ------------------------------------------------------------ data table -- */
.money-related-table-wrap{
  margin:1.25rem 0 1.5rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--qa-line);
  border-radius:12px;
  background:#fff;
}
.money-related-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:.94rem;
}
/* Editorial variant: prose in every column. The shared price-table styling in
   pages.css forces the last column to a bold gold no-wrap price, which is wrong
   for a decision table, so the modifier resets it at equal-or-higher specificity. */
.money-related-table--editorial th,
.money-related-table--editorial td,
.money-related-table--editorial td:last-child{
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
}
.money-related-table--editorial td:last-child,
body.theme-studio .money-related-table--editorial td:last-child{
  font-weight:400;
  /* ebf-studio.css paints the last cell of a price table gold with !important;
     the editorial table has prose there, so the reset has to match it. */
  color:var(--qa-ink)!important;
}

.money-related-table thead th{
  text-align:left;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--qa-muted);
  background:var(--qa-surface);
  padding:.8rem .95rem;
  border-bottom:1px solid var(--qa-line);
  white-space:nowrap;
}
.money-related-table tbody td{
  padding:.85rem .95rem;
  border-bottom:1px solid var(--qa-line);
  vertical-align:top;
  line-height:1.55;
  color:var(--qa-ink);
}
.money-related-table tbody tr:last-child td{ border-bottom:0; }
.money-related-table tbody tr:nth-child(even){ background:rgba(20,32,43,.015); }
.money-related-table a{ color:var(--qa-ink); font-weight:650; text-decoration:underline; text-underline-offset:2px; }
.money-related-table a:hover{ color:var(--qa-gold); }

/* Scroll affordance on small screens */
@media (max-width:760px){
  .money-related-table-wrap{ position:relative; }
  .money-related-table-wrap::after{
    content:"Scroll →";
    position:absolute; right:.5rem; top:.45rem;
    font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--qa-muted); background:rgba(255,255,255,.9);
    padding:.15rem .4rem; border-radius:6px; pointer-events:none;
  }
  .money-related-table thead th{ white-space:normal; }
}

/* -------------------------------------------------------------- FAQ list -- */
/* The same accordion component renders on hubs and on money pages. */
/* Band spacing stays hub-only: on a money page .money-faq is its own
   full-width section with its own padding. */
.airline-guide .money-faq{ margin:2.6rem 0 1.5rem; }
.airline-guide .money-faq-head h2,
.money-page .money-faq-head h2{ margin-bottom:.35rem; }
.airline-guide .money-faq-head p,
.money-page .money-faq-head p{ color:var(--qa-muted); margin:0 0 1.1rem; }
.airline-guide .money-faq-list,
.money-page .money-faq-list{
  border:1px solid var(--qa-line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.airline-guide .money-faq-item,
.money-page .money-faq-item{ border-bottom:1px solid var(--qa-line); }
.airline-guide .money-faq-item:last-child,
.money-page .money-faq-item:last-child{ border-bottom:0; }
.airline-guide .money-faq-item > summary,
.money-page .money-faq-item > summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 2.6rem 1rem 1.1rem;
  position:relative;
  font-weight:650;
  color:var(--qa-ink);
  line-height:1.5;
}
.airline-guide .money-faq-item > summary::-webkit-details-marker,
.money-page .money-faq-item > summary::-webkit-details-marker{ display:none; }
.airline-guide .money-faq-item > summary::after,
.money-page .money-faq-item > summary::after{
  content:"";
  position:absolute; right:1.1rem; top:1.35rem;
  width:9px; height:9px;
  border-right:2px solid var(--qa-gold);
  border-bottom:2px solid var(--qa-gold);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.airline-guide .money-faq-item[open] > summary::after,
.money-page .money-faq-item[open] > summary::after{ transform:rotate(-135deg); top:1.6rem; }
.airline-guide .money-faq-item > summary:hover,
.money-page .money-faq-item > summary:hover{ background:var(--qa-surface); }
.airline-guide .money-faq-a,
.money-page .money-faq-a{ padding:0 1.1rem 1.1rem; }
.airline-guide .money-faq-a p,
.money-page .money-faq-a p{ margin:0; color:var(--qa-muted); line-height:1.7; }

/* --------------------------------------------------------- bottom CTA ----- */
.airline-guide-bottom-cta{
  margin:2.4rem 0 1.5rem;
  padding:1.35rem 1.4rem;
  background:var(--qa-surface);
  border:1px solid var(--qa-line);
  border-radius:var(--qa-radius);
}
.airline-guide-bottom-cta__title{
  margin:0 0 .35rem;
  font-weight:700;
  font-size:1.05rem;
  color:var(--qa-ink);
}
.airline-guide-bottom-cta p{ color:var(--qa-muted); margin:0 0 .9rem; font-size:.92rem; }
.airline-guide-cta{
  display:inline-block;
  background:var(--qa-gold);
  color:#fff;
  font-weight:650;
  padding:.7rem 1.3rem;
  border-radius:999px;
  text-decoration:none;
}
.airline-guide-cta:hover{ background:#D2410E; color:#fff; }
/* The CTA sits inside .airline-guide, whose `.airline-guide a` rule (0,1,1)
   beats `.airline-guide-cta` (0,1,0) and was painting the button's label the
   prose link colour — brown, then navy, on a coral background. Matching the
   container's specificity keeps the label with its own background. */
.airline-guide a.airline-guide-cta,
.airline-guide a.airline-guide-cta:hover,
.airline-guide a.airline-guide-cta:focus-visible{ color:#fff; }

/* Link rows at the foot of the guide */
.airline-guide > p > strong:first-child{ color:var(--qa-ink); }
.airline-guide > p a{ color:var(--qa-ink); text-decoration:underline; text-underline-offset:2px; }
.airline-guide > p a:hover{ color:var(--qa-gold); }

@media (max-width:640px){
  .airline-guide{ font-size:1rem; }
  .money-quick-answer{ border-radius:12px; }
}

/* ------------------------------------------------------- key facts strip -- */
/* The twelve decision facts as labelled fields rather than prose, sitting
   directly beneath the Quick Answer. Uses the existing tokens above so it
   reads as part of the same card family rather than a new component. */

.money-key-facts{
  max-width:62rem;
  margin:0 0 2rem;
  padding:clamp(1rem,2vw,1.5rem) clamp(1.25rem,2.4vw,2.25rem);
  background:var(--qa-surface-2);
  border:1px solid var(--qa-line);
  border-radius:var(--qa-radius);
  box-shadow:0 1px 2px rgba(20,32,43,.04);
}

.money-key-facts__title{
  margin:0 0 .85rem;
  font-size:clamp(1rem,1.6vw,1.15rem);
  font-weight:700;
  color:var(--qa-ink);
  letter-spacing:.01em;
}

.money-key-facts__list{
  margin:0;
  display:grid;
  /* Two columns at most. Three packed the rows so tightly that one row's value
     ran straight into the next row's label, and the pairs stopped reading as
     pairs. The column gap is what separates one fact from the next. */
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  column-gap:clamp(1.5rem,4vw,3.5rem);
  row-gap:0;
  border-top:1px solid var(--qa-line);
}

/* Each row keeps its label and value together, so the pair never splits
   across columns when the grid reflows. */
.money-key-facts__row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid var(--qa-line);
}

.money-key-facts__row dt{
  margin:0;
  color:var(--qa-muted);
  font-size:.9rem;
  font-weight:500;
}

.money-key-facts__row dd{
  margin:0;
  color:var(--qa-ink);
  font-weight:600;
  text-align:right;
}

.money-key-facts__note{
  margin:.9rem 0 0;
  color:var(--qa-muted);
  font-size:.85rem;
  line-height:1.5;
}

/* On a narrow screen the two-column grid collapses to one, and the
   label/value pairs stay on one line each rather than stacking, which keeps
   the block scannable rather than tall. */
@media (max-width:36rem){
  .money-key-facts__list{ grid-template-columns:1fr; }
  .money-key-facts__row dd{ text-align:right; }
}

/* ------------------------------------------------------ in-page section nav -- */
/* A map of a long page, placed once under the breadcrumb. Deliberately not
   sticky: neither long competitor page sticks theirs, and a sticky rail would
   compete with the fare panel for the same grid. */

.money-section-nav{
  max-width:62rem;
  margin:0 0 1.5rem;
}

/* Visible, because a labelled map is more useful than an unlabelled row of
   pills — but quiet, because it is wayfinding rather than content. */
.money-section-nav__title{
  margin:0 0 .5rem;
  /* .875rem, not .75rem, and no uppercase. This is an h2 and it was rendering
     at 12px - smaller than the 16px body copy beneath it. Quiet is right for
     wayfinding; quieter than the text it introduces is not. */
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--qa-muted);
}

.money-section-nav__list{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
  padding:0;
  list-style:none;
}

.money-section-nav__list a{
  display:inline-block;
  padding:.4rem .85rem;
  border:1px solid var(--qa-line);
  border-radius:999px;
  background:var(--qa-surface-2);
  color:var(--qa-ink);
  font-size:.875rem;
  font-weight:600;
  line-height:1.3;
  text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}

.money-section-nav__list a:hover,
.money-section-nav__list a:focus-visible{
  border-color:var(--qa-gold);
  color:var(--qa-gold);
}

/* The anchors land under a sticky site header, so give each target room. */
#quick-answer,
#key-facts,
#money-compare,
#money-sample-routes,
#faqs,
#money-enquiry{
  scroll-margin-top:5rem;
}

/* On a phone the pills wrap to two or three short rows, which is fine and
   still shorter than scrolling past the sections blind. */
@media (max-width:36rem){
  .money-section-nav__list a{ font-size:.8125rem; padding:.35rem .7rem; }
}

/* --------------------------------------------------------- fare method page -- */
/* /how-our-fares-work. Uses the same tokens as every other component here, so
   the page reads as part of the site rather than as a legal appendix. No hero
   image on this page by design: its job is to let a reader test a number. */

.hofw-head{
  padding:clamp(2.25rem,5vw,3.5rem) 0 clamp(1rem,2vw,1.5rem);
  border-bottom:1px solid var(--qa-line);
  background:var(--qa-surface-2);
}

.hofw-kicker{
  margin:0 0 .5rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  font-weight:700;
  color:var(--qa-gold);
}

.hofw-head h1{
  margin:0 0 .75rem;
  font-size:clamp(1.75rem,4vw,2.75rem);
  line-height:1.15;
  color:var(--qa-ink);
}

.hofw-standfirst{
  margin:0;
  max-width:46rem;
  font-size:clamp(1rem,1.7vw,1.15rem);
  line-height:1.6;
  color:var(--qa-muted);
}

.hofw-lead{
  font-size:clamp(1.02rem,1.7vw,1.15rem);
  line-height:1.65;
}

/* Wide content scrolls inside its own container; the page body never does. */
.hofw-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 1.5rem;
  border:1px solid var(--qa-line);
  border-radius:var(--qa-radius);
}

.hofw-table{
  width:100%;
  min-width:44rem;
  margin:0;
  border-collapse:collapse;
  font-size:.92rem;
}

.hofw-table caption{
  caption-side:top;
  padding:.75rem 1rem;
  text-align:left;
  color:var(--qa-muted);
  font-size:.85rem;
  border-bottom:1px solid var(--qa-line);
}

.hofw-table th,
.hofw-table td{
  padding:.65rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--qa-line);
  vertical-align:top;
}

.hofw-table thead th{
  background:var(--qa-surface-2);
  color:var(--qa-muted);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.hofw-table tbody tr:last-child th,
.hofw-table tbody tr:last-child td{ border-bottom:0; }

/* The claims list is a definition list because that is what it is: a claim and
   the reason we will not make it. */
.hofw-claims{
  margin:0 0 1.5rem;
  padding:clamp(1rem,2vw,1.5rem) clamp(1.25rem,2.4vw,2rem);
  background:var(--qa-surface-2);
  border:1px solid var(--qa-line);
  border-radius:var(--qa-radius);
}

.hofw-claims dt{
  margin:0 0 .3rem;
  font-weight:700;
  color:var(--qa-ink);
}

.hofw-claims dd{
  margin:0 0 1.1rem;
  color:var(--qa-muted);
  line-height:1.6;
}

.hofw-claims dd:last-child{ margin-bottom:0; }

/* Fare-method link, wherever a fare qualifier points at the method page. */
.fare-method-link{
  text-decoration:underline;
  text-underline-offset:.15em;
}

/* FAQ theme heading. Only appears on a set long enough to be grouped; short
   sets render exactly as before, with no heading at all. */
.money-faq-theme{
  margin:1.75rem 0 .65rem;
  /* .95rem, not .82rem. A subheading grouping 16px questions cannot itself be
     13px uppercase - it read as a label rather than a level. */
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--qa-ink);
}

.money-faq-theme:first-child{ margin-top:0; }


/* ------------------------------------- money page: heading scale --------- */
/* ebf-money.css sets .money-page h2 to clamp(1.7rem,2.9vw,2.5rem) for PROSE
   headings. At (0,1,1) that also beat every component title in this file,
   which are single classes at (0,1,0) — so on a money page the utility label
   "Jump to", the Quick Answer question and "X at a glance" all rendered at up
   to 40px, joint-largest text on the page after the H1, and then the body
   headings below them dropped to 28px.
   The same components on an airline page were always correct, because
   ebf-money.css is not loaded there. These restore the components' own sizes
   at (0,2,1) so both page types render them identically. */
.money-page h2.money-quick-answer__q{
  font-size:clamp(1.15rem,1.05rem + .7vw,1.5rem);
  line-height:1.32;
  letter-spacing:-.01em;
  font-weight:700;
}

.money-page h2.money-key-facts__title{
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.3;
  letter-spacing:.01em;
  font-weight:700;
}

.money-page h2.money-section-nav__title{
  /* Matches the base rule: .875rem and no uppercase. This override was still
     pinning it at 12px, which is smaller than the body copy underneath it. */
  font-size:.875rem;
  line-height:1.3;
  letter-spacing:.02em;
  font-weight:700;
  text-transform:none;
}

/* ------------------------------------------- hub context line ------------ */
/* One sentence pointing up to the regional hub, rendered under the Quick
   Answer band. It had no styling at all, so it ran the full container width
   (1342px at 1440) while the two cards directly above it sit at 62rem — the
   longest line on the page, and the one that made the band look ragged on the
   right. Same measure as the cards it follows. */
.money-country-context{
  max-width:62rem;
  margin:0 0 .25rem;
  font-size:.92rem;
  line-height:1.55;
  color:var(--qa-muted);
}

.money-country-context a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.15em;
}

.money-country-context a:hover,
.money-country-context a:focus-visible{ color:var(--qa-gold); }


/* ----------------------------- FAQ inside a prose column ----------------- */
/* Same problem as the blog card: .money-faq is designed as a full-bleed grey
   band for the money page, and inside .airline-prose (max-width 46rem) it
   became a 736px grey slab with 72px of vertical padding and no horizontal
   padding, so the text touched the grey edge. The theme layers set that
   background with !important, hence the same here at higher specificity. */
body.theme-compete .airline-prose .money-faq,
body.theme-studio .airline-prose .money-faq,
body .airline-prose .money-faq{
  background:transparent!important;
  /* border-top survives: stripping the band background is right inside a prose
     column, but it left the FAQ as the one section on the page with no edge at
     all. Keep the top rule so it still reads as a band. */
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-top:1px solid var(--qa-line)!important;
  padding-block:clamp(1.6rem,2.6vw,2.2rem) 0!important;
  margin-block:2rem 0;
}

/* ------------------------------- in-page nav labels, now headings -------- */
/* "In this guide" became an <h2> so it appears in the document outline. That
   put it inside the reach of `.airline-guide h2` (0,1,1), which would have
   rendered a 12px label at 27px. These restore the label treatment at matching
   specificity — the element changed, the design did not. */
.airline-guide .airline-guide-toc__label,
.airline-prose .airline-guide-toc__label{
  font-size:.7rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 .55rem;
  border-top:0;
  padding-top:0;
}