/*
 * The three verticals: Ferðir, Gisting, Hótel.
 *
 * ONE FILE BECAUSE THAT WAS THE BUG. This row used to be styled twice, once in
 * the homepage's inline stylesheet and once in site/vertical.css, and the two
 * had drifted: the homepage carried `margin-right:auto` and the other two did
 * not. Measured 2026-09-06, the row started at x=169 on the homepage and x=351
 * on the other two, 182 pixels apart on the same screen. Helgi found it by
 * looking, which is the only instrument this had. Two copies of a rule will
 * always end up as two rules, so there is now one copy and all three pages
 * link it.
 *
 * IT IS NOT A FOOTNOTE IN THE NAV ANY MORE. His words, 2026-09-06: these three
 * larger, below the top bar, the same across all three. So the row moved out of
 * the top bar and into the top of the hero, at display size, where somebody who
 * runs a guesthouse rather than a glacier tour can see there is a page for them.
 *
 * COLOUR BELONGS TO THE PAGE, not to this file. Each vertical page sets --key
 * for its own identity (lamplight on gisting, gold on hotels); the homepage
 * sets none, so the fallback picks up its aurora. That is why every colour here
 * is written as var(--key, var(--aurora)) rather than being chosen here.
 *
 * The row sits inside .wrap, which every page already defines with the same
 * max-width and gutter, so it lines up with the hero copy underneath it. That
 * alignment is the reason it cannot drift again: there is nothing to get wrong.
 */

/*
 * THE SAME DISTANCE UNDER THE TOP BAR ON ALL THREE, which the left edge and
 * the type size alone did not buy.
 *
 * The three heroes have different top padding on purpose: 72px on the homepage
 * and 108px where there is a photograph to breathe around. With the row inside the hero
 * that difference landed on the row, and it sat 44px lower
 * on two pages than on the third. Clicking between them made it jump, which is
 * the complaint this whole change started from.
 *
 * So the band carries its own space and the hero's top padding above it goes.
 * The hero content below ends up at much the same offset it had before, and on
 * all three it is now the same offset. If :has() ever fails to apply, the row
 * simply sits where it did this morning rather than breaking.
 */
header.hero:has(> .verticals) {
  padding-top: 0;
}

.verticals {
  padding-top: 34px;
  margin: 0 0 34px;
}

.verticals .wrap {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.verticals a {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.15;
  text-decoration: none;
  color: var(--muted);
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  /* A pill over a photograph. Without a ground of its own the label competes
     with whatever the aurora is doing behind it, and on the gisting hero it
     lands on a lit window. */
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.verticals a:hover {
  color: var(--ink);
  border-color: var(--key, var(--aurora));
}

.verticals a[aria-current="page"] {
  color: var(--key, var(--aurora));
  border-color: var(--key, var(--aurora));
  background: var(--key-soft, var(--aurora-soft));
}

/* On a phone the three stay a row and share the width, rather than shrinking
   the type. The point of the change was that they are readable. */
@media (max-width: 560px) {
  .verticals {
    margin-bottom: 26px;
  }
  .verticals .wrap {
    gap: 6px;
  }
  /*
   * EACH PILL IS AS WIDE AS ITS OWN WORD. They used to share the width equally
   * at 17px, and "Guesthouses" is twice the length of "Tours": on a phone it
   * broke onto two lines with a lone "s" on the second. Helgi, 2026-09-19:
   * "gesthouses is in two lines with only an S on the bottom". A word never
   * wraps inside a pill now, the type steps down a little so all three fit a
   * 360px screen in any of the six languages, and if a language ever does not
   * fit, the row wraps to a second line of whole pills instead of breaking a
   * word.
   */
  .verticals .wrap {
    flex-wrap: wrap;
    justify-content: center;
    /* The hero already has side padding on the guesthouse and hotel pages. Adding
       the row's own on top left too little room for three French words. */
    padding-left: 0;
    padding-right: 0;
  }
  .verticals a {
    flex: 0 1 auto;
    white-space: nowrap;
    text-align: center;
    font-size: 15px;
    padding: 9px 12px;
  }
}
@media (max-width: 380px) {
  .verticals a { font-size: 14px; padding: 8px 11px; }
}

/* Out of the way until the homepage chooser has been answered.
 *
 * Here rather than in index.html because this file is the one place the row is
 * styled, and tests/site-verticals.test.ts holds that: two copies of these
 * rules drifted apart once already. Only the homepage ever adds the class, and
 * a page that never adds it is unaffected. */
.verticals.awaiting { visibility: hidden; }

/* The live demo chats, switched off while the model is unavailable, 2026-09-28:
   off is better than a box that answers with an error. Remove data-demo="off"
   from a page's <html> tag to bring its demo back (info.html follows tours.html). */
[data-demo="off"] .live-demo { display: none !important; }