/* CH_REVAMP_2026_09 — CloudHenry restyle
   Additive polish layer. Appended last to codeinjection_foot so it wins
   on equal specificity. Remove this whole marked block to revert.
   Principles: keep the sky/pixel brand character, raise the craft.
   Fixes: sub-10px text, flat cards, mismatched radii, no motion feedback. */

:root {
  --ch-ink:        #0E3550;
  --ch-ink-soft:   #46607A;
  --ch-blue:       #0E6FB6;
  --ch-sun:        #F5C242;
  --ch-sand:       #F6DFA0;
  --ch-line:       rgba(14, 53, 80, .10);

  --ch-r-sm: 12px;
  --ch-r-md: 18px;
  --ch-r-lg: 24px;

  /* Layered shadows: a tight contact shadow plus a wide soft one.
     Single-shadow cards are what make a page look flat. */
  --ch-sh-1: 0 1px 2px rgba(14,53,80,.06), 0 2px 8px rgba(14,53,80,.05);
  --ch-sh-2: 0 2px 4px rgba(14,53,80,.07), 0 10px 26px rgba(14,53,80,.09);
  --ch-sh-3: 0 4px 10px rgba(14,53,80,.09), 0 22px 48px rgba(14,53,80,.13);

  --ch-ease: cubic-bezier(.22,.61,.36,1);
  --ch-dur:  .28s;
}

/* ---------------------------------------------------------------
   1. NUMERALS — prices in a column must align.
   Tabular figures stop the £14/£28/£140 ragged-edge effect.
   --------------------------------------------------------------- */
.ch-d2-price, .ch-d2-avg, .ch-price, .ch-amt, .ch-dp, .ch-yr,
.ch-d2-meta, .ch-prize-title {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
}

/* ---------------------------------------------------------------
   2. FARE ROWS — the worst legibility offenders on the page.
   9px -> 11px, 12px -> 13px, price 14.5px -> 16px.
   --------------------------------------------------------------- */
.ch-d2 {
  border-radius: var(--ch-r-sm);
  padding: 11px 13px;
  /* Rows with an "avg" price were 48px and rows without were 42px.
     A fixed floor plus centring makes the column read as a grid. */
  min-height: 58px;
  align-items: center;
  box-shadow: var(--ch-sh-1);
  border: 1px solid var(--ch-line);
  transition: transform var(--ch-dur) var(--ch-ease),
              box-shadow var(--ch-dur) var(--ch-ease),
              border-color var(--ch-dur) var(--ch-ease);
  will-change: transform;
}
.ch-d2:hover {
  transform: translateY(-2px);
  box-shadow: var(--ch-sh-2);
  border-color: rgba(14,111,182,.28);
}

.ch-d2-pricecol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-height: 32px;
  flex: 0 0 auto;
}

.ch-d2-route  { font-size: 13px;   letter-spacing: -.01em; color: var(--ch-ink); }
.ch-d2-meta   { font-size: 11px;   color: var(--ch-ink-soft); letter-spacing: .01em; }
.ch-d2-price  { font-size: 16px;   letter-spacing: -.02em; line-height: 1.15; }
.ch-d2-avg    { font-size: 11px;   color: #8296A8; text-decoration-thickness: 1px; line-height: 1.3; }

/* The destination is the product — never ellipsis it.
   "Edinburgh -> Copenhagen" was truncating to "Edinburgh -> Copen...".
   Two-element selectors here to beat the existing theme rule. */
.ch-d2 .ch-d2-l     { flex: 1 1 auto; min-width: 0; }
.ch-d2 .ch-d2-route {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: normal;
  line-height: 1.22;
}

/* Column headers: quieter, but readable */
.ch-col-h {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ch-ink-soft);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   3. CARDS & TILES — consistent radius, real depth, hover lift
   --------------------------------------------------------------- */
.ch-why-tile, .ch-scard, .ch-dbox, .ch-prize {
  border-radius: var(--ch-r-md);
  box-shadow: var(--ch-sh-1);
  border: 1px solid var(--ch-line);
  transition: transform var(--ch-dur) var(--ch-ease),
              box-shadow var(--ch-dur) var(--ch-ease);
}
.ch-why-tile:hover, .ch-scard:hover {
  transform: translateY(-3px);
  box-shadow: var(--ch-sh-2);
}

.ch-dbox { box-shadow: var(--ch-sh-3); border-radius: var(--ch-r-lg); }

.ch-why-t { letter-spacing: -.015em; }
.ch-why-b { color: var(--ch-ink-soft); line-height: 1.55; }

/* Emoji sit slightly high against cap-height; nudge and give them room */
.ch-why-emoji { display: block; margin-bottom: 10px; line-height: 1; }

/* ---------------------------------------------------------------
   4. TYPE — tighter optical tracking at display sizes
   --------------------------------------------------------------- */
.ch-h1 {
  letter-spacing: -.028em;
  line-height: 1.02;
  text-wrap: balance;
}
.ch-h2 {
  letter-spacing: -.022em;
  line-height: 1.12;
  text-wrap: balance;
}
.ch-sub, .ch-sub-mobile { line-height: 1.6; }
.ch-eyebrow, .ch-kicker {
  letter-spacing: .16em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------
   5. BUTTONS — transition, press feedback, visible focus
   --------------------------------------------------------------- */
.ch-cta, .ch-cta2, .ch-ap-btn, .ch-ec-btn {
  transition: transform .18s var(--ch-ease),
              box-shadow var(--ch-dur) var(--ch-ease),
              filter var(--ch-dur) var(--ch-ease);
  box-shadow: 0 2px 6px rgba(14,53,80,.12);
}
/* :not([disabled]) matters — "Find my deals" is deliberately disabled at
   55% opacity until an airport is picked. Don't make it look clickable. */
.ch-cta:hover, .ch-cta2:hover, .ch-ec-btn:hover, .ch-ap-btn:not([disabled]):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245,194,66,.34), 0 3px 8px rgba(14,53,80,.14);
  filter: saturate(1.06);
}
.ch-cta:active, .ch-cta2:active, .ch-ec-btn:active, .ch-ap-btn:not([disabled]):active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(14,53,80,.18);
}
.ch-ap-btn[disabled] { box-shadow: none; }

/* Accessibility: a real focus ring, keyboard only */
.ch-cta:focus-visible, .ch-cta2:focus-visible, .ch-ap-btn:focus-visible,
.ch-ec-btn:focus-visible, .ch-ap-select:focus-visible,
.ch-ec-input:focus-visible, .gh-navigation-menu a:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 3px;
  border-radius: 8px;
}

.ch-ap-select, .ch-ec-input {
  border-radius: 999px;
  transition: box-shadow var(--ch-dur) var(--ch-ease),
              border-color var(--ch-dur) var(--ch-ease);
}
.ch-ap-select:hover, .ch-ec-input:hover { box-shadow: var(--ch-sh-1); }

/* ---------------------------------------------------------------
   6. NAVIGATION — true centring for the middle-logo layout,
   plus an underline that grows in rather than snapping on.
   --------------------------------------------------------------- */
.gh-navigation.is-middle-logo .gh-navigation-inner {
  align-items: center;
}
.gh-navigation.is-middle-logo .gh-navigation-menu,
.gh-navigation.is-middle-logo .gh-navigation-actions {
  flex: 1 1 0;
  min-width: 0;
}

.gh-navigation-menu .nav a {
  position: relative;
  transition: opacity var(--ch-dur) var(--ch-ease);
}
.gh-navigation-menu .nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .85;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ch-dur) var(--ch-ease);
}
.gh-navigation-menu .nav a:hover::after { transform: scaleX(1); }

/* "Coming soon" tag under Search — make it a proper pill, not stray text */
.ch-nav-soon {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  letter-spacing: .1em;
  line-height: 1.6;
  backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------
   7. MOTION — stagger the existing reveal, and float the sky.
   Everything here is opt-out via prefers-reduced-motion (section 8).
   --------------------------------------------------------------- */
.ch-reveal {
  transition: opacity .7s var(--ch-ease), transform .7s var(--ch-ease);
}
.ch-why .ch-why-tile           { transition-delay: 0ms; }
.ch-why .ch-why-tile:nth-child(2) { transition-delay: 90ms; }
.ch-why .ch-why-tile:nth-child(3) { transition-delay: 180ms; }

@keyframes ch-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.chsky-cloud1 { animation: ch-float 13s ease-in-out infinite; }
.chsky-cloud2 { animation: ch-float 17s ease-in-out infinite; animation-delay: -4s; }
.chsky-sun    { animation: ch-float 21s ease-in-out infinite; animation-delay: -8s; }

/* The locked-fares veil: a slow sheen so it reads as "there is more here",
   rather than as a rendering fault. */
@keyframes ch-sheen {
  0%   { background-position: -120% 0; }
  100% { background-position:  220% 0; }
}
.ch-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 38%,
    rgba(255,255,255,.42) 50%,
    transparent 62%);
  background-size: 220% 100%;
  animation: ch-sheen 5.5s ease-in-out infinite;
}
.ch-lockwrap { transition: transform var(--ch-dur) var(--ch-ease); }
.ch-dbox:hover .ch-lockwrap { transform: scale(1.04); }

/* Flag game: tactile press */
.ch-mg-flag {
  transition: transform .16s var(--ch-ease), box-shadow var(--ch-dur) var(--ch-ease);
}
.ch-mg-flag:hover  { transform: translateY(-2px) scale(1.02); box-shadow: var(--ch-sh-2); }
.ch-mg-flag:active { transform: translateY(0) scale(.98); }

/* ---------------------------------------------------------------
   8. REDUCED MOTION — honour the OS setting. Non-negotiable.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .chsky-cloud1, .chsky-cloud2, .chsky-sun, .ch-veil::after {
    animation: none !important;
  }
  .ch-d2, .ch-why-tile, .ch-scard, .ch-cta, .ch-cta2,
  .ch-ap-btn, .ch-ec-btn, .ch-mg-flag, .ch-reveal, .ch-lockwrap {
    transition-duration: .01ms !important;
  }
  .ch-d2:hover, .ch-why-tile:hover, .ch-scard:hover,
  .ch-cta:hover, .ch-mg-flag:hover {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   9. MOBILE — the small screens need the size lift most
   --------------------------------------------------------------- */
/* Measured mobile values before this block: route 10.5px, meta 8.5px,
   avg 8px, price 13px. Sub-9px struck-through prices were the single
   worst legibility problem on the site, and mobile is where the
   Instagram traffic lands. */
@media (max-width: 640px) {
  /* Mobile puts the fares in two columns, leaving only ~95px for the
     route, so longer names wrap to two lines. 66px is the two-line
     height: it keeps every row identical instead of 65/54 ragged. */
  .ch-d2         { padding: 9px 11px; min-height: 66px; }
  .ch-d2-route   { font-size: 11.5px; }
  .ch-d2-meta    { font-size: 10px; }
  .ch-d2-price   { font-size: 15px; }
  .ch-d2-avg     { font-size: 10px; }
  .ch-h1         { letter-spacing: -.022em; }
  /* Hover lifts are meaningless on touch and cause sticky states */
  .ch-d2:hover, .ch-why-tile:hover, .ch-scard:hover { transform: none; }
}

/* ---------------------------------------------------------------
   10. SEARCH IS LIVE
   The "Coming soon" label under the Search nav item was correct until
   2 Sep 2026, when the Everywhere search went live on /search/. Hidden
   here rather than removed from code injection, because that field sits
   within ~100 characters of Ghost's 65,535 limit.
   --------------------------------------------------------------- */
.ch-nav-soon { display: none !important; }

/* ---------------------------------------------------------------
   Email posts on the web (Monday, welcome and shower emails, all tagged
   #...-auto). The theme wraps every table in .gh-table with a permanent
   horizontal scrollbar, forces nowrap, draws data-table borders and
   pushes 28px between siblings. Those tables are the email's layout,
   not data, so put them back the way the email has them. 9 Sep 2026.
   --------------------------------------------------------------- */
.tag-hash-monday-auto .gh-content .gh-table,
.tag-hash-welcome-auto .gh-content .gh-table,
.tag-hash-shower-auto .gh-content .gh-table { overflow: visible; }
.tag-hash-monday-auto .gh-content > * + *,
.tag-hash-welcome-auto .gh-content > * + *,
.tag-hash-shower-auto .gh-content > * + * { margin-top: 0; }
.tag-hash-monday-auto .gh-content .gh-table table,
.tag-hash-welcome-auto .gh-content .gh-table table,
.tag-hash-shower-auto .gh-content .gh-table table { white-space: normal; border-collapse: separate; font-size: inherit; }
.tag-hash-monday-auto .gh-content .gh-table table td,
.tag-hash-welcome-auto .gh-content .gh-table table td,
.tag-hash-shower-auto .gh-content .gh-table table td { padding: 0; border-bottom: 0; }