/* Editorial footer — tokens only, loaded globally (mirrors navbar.css).
   Rollback: remove the <link> in header.html and delete this file; the old
   Bootstrap-grid footer markup would need restoring from git. */
.im-footer {
  background: var(--im-paper, #f7f5ef);
  border-top: 1px solid var(--im-hairline, #e3e0d8);
  color: var(--im-text-200, #4a4a4a);
  padding: var(--im-space-16, 64px) 0 var(--im-space-10, 40px);
  font-family: var(--im-font-body, inherit);
}
/* Centred on the CONTENT measure (--im-wrap-max), so the footer's edges line up
   with every page section above it. Not Bootstrap .container (1320px at xxl,
   1140 at xl — never matching .im-wrap's 1280), and not the navbar pill's width:
   the pill is floating furniture designed to hug the viewport, so matching it
   would put the footer wider than all the content above. */
.im-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--im-space-12, 48px);
  max-width: var(--im-wrap-max, 1280px);
  margin: 0 auto;
  padding-inline: var(--im-space-8, 32px);
}

/* Brand stays a fixed measure; the link region takes the rest of the extra
   width rather than the brand block stretching with it. */
.im-footer__top {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: var(--im-space-12, 48px);
}
@media (max-width: 991px) {
  .im-footer__top { grid-template-columns: 1fr; gap: var(--im-space-8, 32px); }
}

/* Right-hand column group: link columns + the country "Also available in" line
   stacked, so both align to the same left edge (right of the brand).
   min-width:0 lets this grid child shrink instead of overflowing. */
.im-footer__main {
  display: flex;
  flex-direction: column;
  gap: var(--im-space-10, 40px);
  min-width: 0;
}

/* Brand block */
.im-footer__logo img { height: 40px; width: auto; display: block; }
.im-footer__mission {
  font-family: var(--im-font-display, serif);
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--im-ink, #1a1a1a);
  margin: var(--im-space-4, 16px) 0 0;
  max-width: 22ch;
}

/* Columns — NEWSPAPER FLOW, not a grid of equal cells.
   A grid gave every section its own track, so a 16-route category left every
   short section (Company, Tools) stranded beside a wall of whitespace. With
   multi-column, sections pack: the next heading starts directly under the
   previous section's last link, in the same column.
   `columns: <width> <count>` = at most 5 columns, each at least 190px, so it
   reflows down to one column without a single media query. */
.im-footer__cols {
  columns: 190px 5;
  column-gap: var(--im-space-8, 32px);
}
/* Every section stays whole. Letting the largest category break across a column
   boundary was measured at only 48px shorter (526 vs 574 at 1680px) and left its
   continuation in the next column with no heading above it — reading as though
   those routes belonged to the section before. Not worth 48px. */
.im-footer__col {
  break-inside: avoid;
  margin: 0 0 var(--im-space-7, 28px);
}
.im-footer__heading {
  font-family: var(--im-font-display, serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--im-ink, #1a1a1a);
  margin: 0 0 var(--im-space-3, 12px);
  /* Never leave a heading as the last line of a column. */
  break-after: avoid;
}
.im-footer__list { list-style: none; margin: 0; padding: 0; }
.im-footer__list li { margin-bottom: var(--im-space-1, 4px); }
.im-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--im-space-1, 4px);
  /* 28px + the 4px row gap. WCAG 2.2 AA target size (2.5.8) is 24px; 44px is the
     AAA figure (2.5.5) and, on a 16-route list, was on its own adding ~250px of
     footer height. Dense link lists are exactly where the AA floor applies. */
  min-height: 28px;
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--im-text-200, #4a4a4a);
}
.im-footer__list a:hover,
.im-footer__list a:focus-visible {
  color: var(--im-accent-200, #0b6b63);
  text-decoration: underline;
}
/* Route-category headings are links to their listing page. Styled as the heading
   (not as a link) so the column still reads as a heading + list; the affordance
   is the hover, since a footer heading isn't obviously clickable at rest. */
.im-footer__heading-link {
  color: inherit;
  text-decoration: none;
}
.im-footer__heading-link:hover,
.im-footer__heading-link:focus-visible {
  color: var(--im-accent-200, #0b6b63);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Country surface: one compact line of other markets, in place of the region
   band. Inline links, so 8 markets cost one or two wrapped rows rather than
   ~300px of stacked 44px targets. */
.im-footer__also {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--im-space-2, 8px) var(--im-space-3, 12px);
  padding-top: var(--im-space-6, 24px);
  border-top: 1px solid var(--im-hairline, #e3e0d8);
}
.im-footer__also-label {
  font-family: var(--im-font-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--im-text-muted, #8a8a8a);
}
.im-footer__also-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--im-space-1, 4px) var(--im-space-3, 12px);
}
.im-footer__also-list a {
  /* 32px target + the 8px row gap clears WCAG 2.2 AA target size (2.5.8, 24px).
     The 44px floor used by the stacked columns is the AAA figure and would put
     this single line back to band height. */
  display: inline-flex; align-items: center; gap: var(--im-space-1, 4px);
  min-height: 32px;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--im-text-200, #4a4a4a);
}
.im-footer__also-list a:hover,
.im-footer__also-list a:focus-visible {
  color: var(--im-accent-200, #0b6b63);
  text-decoration: underline;
}

/* Region label inside the global Destinations section. The regions STACK within
   that one section — they used to be their own full-width auto-fit grid, which
   pushed a single-country region (Asia-Pacific) to the far edge with ~700px of
   dead space, and forced Company/Legal into a second row underneath. */
.im-footer__region {
  font-family: var(--im-font-mono, monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--im-text-muted, #8a8a8a);
  margin: var(--im-space-4, 16px) 0 var(--im-space-1, 4px);
}
.im-footer__heading + .im-footer__region { margin-top: 0; }
/* The destinations list is a scan-list, not a tap-column: drop the 44px stacked
   rows so nine markets read as a set. 28px + the 4px row gap stays above the
   WCAG 2.2 AA target-size floor (2.5.8, 24px).
   The wider inline gap is for the flag: 4px leaves the glyph touching the name,
   because a flag emoji carries almost no side bearing of its own. */
.im-footer__list--flat a,
.im-footer__also-list a { column-gap: var(--im-space-2, 8px); }
.im-footer__list--flat a { min-height: 28px; }
.im-footer__seeall {
  display: inline-block;
  margin-top: var(--im-space-3, 12px);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--im-accent-200, #0b6b63);
  text-decoration: none;
}
.im-footer__seeall:hover { text-decoration: underline; }

/* Bottom strip */
.im-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--im-space-6, 24px);
  padding-top: var(--im-space-6, 24px);
  border-top: 1px solid var(--im-hairline, #e3e0d8);
}
.im-footer__reg, .im-footer__copyright {
  font-size: 0.8125rem;
  color: var(--im-text-muted, #8a8a8a);
  margin: 0 0 var(--im-space-2, 8px);
  max-width: 70ch;
}
.im-footer__reg a, .im-footer__copyright a {
  color: inherit;
  text-decoration: underline;
}
.im-footer__social { display: flex; gap: var(--im-space-2, 8px); }
.im-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--im-radius-pill, 999px);
  border: 1px solid var(--im-hairline, #e3e0d8);
  color: var(--im-ink, #1a1a1a);
  text-decoration: none;
}
.im-footer__social-link:hover,
.im-footer__social-link:focus-visible {
  color: var(--im-accent-200, #0b6b63);
  border-color: var(--im-accent-200, #0b6b63);
}