/* ---------------------------------------------------------------------------
 * Column — token layer + components for the landing arm.
 *
 * Prefixed `--co-` / `.co-` for the same reason the Hairline layer is prefixed
 * `--hl-` / `.hl-`: the rest of the site still runs on the legacy theme, and a
 * prefixed layer lets pages migrate one at a time instead of in one risky sweep.
 * Nothing here leaks out of `.co`.
 *
 * The system is deliberately cardless. There is no elevation token because
 * shadows make boxes float and this design has almost no boxes - the two
 * exceptions (the search widget and the map's city labels) carry their shadow
 * inline so it stays visibly a deviation rather than a habit.
 * ------------------------------------------------------------------------- */

.co {
  /* Ink */
  --co-indigo-navy: #111a4a;
  --co-midnight-ink: #011821;
  --co-slate-ink: #3b3e47;
  --co-charcoal: #232730;
  --co-steel: #7c7f88;
  --co-fog: #a9acb6;

  /* Ground */
  --co-mist: #cbcccf;
  --co-line: #e3e4e8;
  --co-canvas: #f6f6f8;
  --co-white: #ffffff;

  /* Accent. Signal Orange appears at most twice per page: the selected city and
     the closing call to action. Seafoam is reserved for data - counts, marks,
     match highlights - and never used for a control. */
  --co-signal-orange: #ec652b;
  /* White on #ec652b measures 3.25:1 - fine for a 10px dot, below the 4.5:1
     AA floor for 14px button text. The accent keeps its pure value where it
     is a mark; text-bearing surfaces use this darker step (4.65:1). */
  --co-signal-ink: #c4501c;
  --co-signal-ink-hover: #a84317;
  --co-peach-glow: #f2936b;
  --co-seafoam-600: #44b48b;
  --co-seafoam-700: #167e6c;
  --co-seafoam-400: #94efb7;

  --co-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, sans-serif;
  --co-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --co-micro: 10px;
  --co-caption: 12px;
  --co-body: 16px;
  --co-body-lg: 18px;
  --co-sub-sm: 20px;
  --co-sub-lg: 28px;
  --co-head-sm: 40px;
  --co-head: 48px;

  /* Display leading is set against Vietnamese ink, not Latin: stacked diacritics
     reach ~0.92em, and 1.05 left only 0.075em of clearance. 1.2 is the floor. */
  --co-leading-display: 1.2;

  --co-s4: 4px;   --co-s8: 8px;   --co-s12: 12px; --co-s16: 16px;
  --co-s20: 20px; --co-s24: 24px; --co-s32: 32px; --co-s40: 40px;
  --co-s48: 48px; --co-s64: 64px; --co-s72: 72px; --co-s80: 80px;

  --co-max: 1200px;
  --co-radius: 8px;
  --co-radius-full: 9999px;
}

/* ---------------------------------------------------------------- shell --- */

.co {
  background: var(--co-canvas);
  color: var(--co-slate-ink);
  font-family: var(--co-font);
  font-size: var(--co-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.co *, .co *::before, .co *::after { box-sizing: border-box; }
.co a { color: inherit; text-decoration: none; }
.co h1, .co h2, .co h3 {
  margin: 0; color: var(--co-indigo-navy); font-weight: 600;
  line-height: var(--co-leading-display);
}
.co-wrap { max-width: var(--co-max); margin: 0 auto; padding: 0 var(--co-s32); }
@media (max-width: 560px) { .co-wrap { padding: 0 var(--co-s20); } }

/* Sections are separated by space, not by rules or boxes. */
.co-sec { padding-top: var(--co-s72); }
.co-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--co-s16); margin-bottom: var(--co-s24);
  padding-bottom: var(--co-s16); border-bottom: 1px solid var(--co-line);
}
.co-sec-head h2 { font-size: var(--co-sub-lg); letter-spacing: -.28px; }
.co-sec-head a { font-size: 14px; color: var(--co-seafoam-700); white-space: nowrap; }
.co-sec-head a:hover { color: var(--co-indigo-navy); }

.co-btn {
  display: inline-flex; align-items: center; gap: var(--co-s8);
  border-radius: var(--co-radius); font-size: 14px; font-weight: 500;
  font-family: inherit; cursor: pointer; border: 1px solid transparent;
  padding: 12px 20px; white-space: nowrap;
}
/* Scoped with .co so these beat `.co a { color: inherit }`, which scores
   (0,1,1) against a bare `.co-btn-solid` at (0,1,0) - the buttons rendered
   navy-on-orange because the anchor rule won the cascade. */
.co .co-btn-solid { background: var(--co-indigo-navy); color: var(--co-white); }
.co .co-btn-solid:hover { background: var(--co-midnight-ink); color: var(--co-white); }
.co .co-btn-ghost { border-color: var(--co-line); color: var(--co-charcoal); background: var(--co-white); }
.co .co-btn-ghost:hover { border-color: var(--co-indigo-navy); color: var(--co-indigo-navy); }

/* ----------------------------------------------------------------- hero --- */

/* No overflow:hidden here. It clipped the search dropdown at the hero's bottom
   edge - the panel is a child of the hero and has to escape it. The canvas is
   inset:0 so it cannot paint outside its own box anyway; the only thing that
   could stick out is a pin label, so the clip lives on .co-pins instead. */
.co-hero { position: relative; padding: var(--co-s72) 0 var(--co-s64); }
/* The shared hero background canvas (includes/components/co-herobg.php). It
   fills its positioned parent, so any hero can host it. */
.co-herobg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none;
}
.co-hero-in { position: relative; z-index: 2; }

.co-badge {
  display: inline-flex; align-items: center; gap: var(--co-s8);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: var(--co-radius-full); padding: 4px 12px;
  font-size: var(--co-caption); color: var(--co-charcoal);
  margin-bottom: var(--co-s24); box-shadow: rgba(87, 90, 100, .12) 0 0 0 1px;
}
.co-badge b { font-weight: 500; color: var(--co-indigo-navy); }
.co-hero h1 {
  font-size: var(--co-head); letter-spacing: -.96px;
  margin-bottom: var(--co-s24); max-width: 15ch;
}
@media (max-width: 700px) { .co-hero h1 { font-size: var(--co-head-sm); letter-spacing: -.6px; } }

/* Search: the site-wide component, skinned. The markup and behaviour come from
   includes/components/hl-search.php so there is still exactly one search field
   implementation on the site. */
.co-searchwrap { max-width: 560px; }
.co-searchwrap .hl-search form {
  background: var(--co-white); border: 1px solid var(--co-line);
  border-radius: var(--co-radius); padding: var(--co-s8);
  display: flex; gap: var(--co-s8); align-items: center;
  box-shadow: rgba(30, 30, 44, .15) 24px 48px 64px 0, rgb(255, 255, 255) 0 0 0 1px inset;
}
.co-searchwrap .hl-search input {
  flex: 1; border: 0; outline: none; background: transparent; font: inherit;
  font-size: var(--co-body); color: var(--co-indigo-navy); padding: 10px 12px;
}
.co-searchwrap .hl-search input::placeholder { color: var(--co-fog); }
.co-searchwrap .hl-search .hl-btn {
  background: var(--co-indigo-navy); color: var(--co-white); border: 0;
  border-radius: var(--co-radius); padding: 12px 20px; font-size: 14px;
  font-weight: 500; cursor: pointer; font-family: inherit;
}
.co-searchwrap .hl-search { position: relative; z-index: 50; }
.co-searchwrap .hl-search-panel {
  background: var(--co-white); border: 0; border-radius: var(--co-radius);
  box-shadow: rgba(17, 26, 74, .05) 0 8px 16px 0, rgba(87, 90, 100, .12) 0 0 0 1px;
}
.co-searchwrap .hl-search-head { color: var(--co-fog); }
.co-searchwrap .hl-search-item.sel,
.co-searchwrap .hl-search-item:hover { background: var(--co-canvas); }
.co-searchwrap .hl-search mark { background: rgba(148, 239, 183, .45); }

/* Try row + the two pill rows read as one control group under the search. */
.co-quick {
  margin-top: var(--co-s16); display: flex; gap: var(--co-s12);
  flex-wrap: wrap; align-items: center; font-size: var(--co-caption);
  color: var(--co-steel);
}
.co-key {
  font-family: var(--co-mono); font-size: var(--co-micro);
  color: var(--co-seafoam-700); background: rgba(148, 239, 183, .22);
  border-radius: 4px; padding: 4px 8px;
}
.co-key:hover { background: rgba(148, 239, 183, .4); }

.co-pills {
  margin-top: var(--co-s16); display: flex; flex-wrap: wrap;
  gap: var(--co-s8); align-items: center;
}
.co-pills-lbl {
  font-size: var(--co-caption); letter-spacing: .06em; text-transform: uppercase;
  color: var(--co-steel); font-weight: 500; margin-right: var(--co-s4);
}
/* 8px like every other control - the full radius is reserved for badges. */
.co-pill {
  display: inline-flex; align-items: baseline; gap: var(--co-s8);
  font-size: 14px; color: var(--co-charcoal);
  background: rgba(255, 255, 255, .55); border: 1px solid var(--co-line);
  border-radius: var(--co-radius); padding: 7px 14px;
}
.co-pill:hover { border-color: var(--co-indigo-navy); background: var(--co-white); }
.co-pill .n { font-family: var(--co-mono); font-size: var(--co-caption); color: var(--co-steel); }
.co-pill-dot::before {
  content: ""; align-self: center; width: 7px; height: 7px; border-radius: 50%;
  background: var(--co-signal-orange); flex: 0 0 auto;
}

/* City pins. Positioned from the map's own projection by the hero script, so a
   resize moves pin and landmass together and they cannot drift apart. */
/* z-index 1, below .co-hero-in at 2: the pin layer is decoration and must never
   paint over the search panel. overflow:hidden keeps a label near the edge from
   widening the page. */
.co-pins { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.co-pin { position: absolute; transform: translate(-50%, -50%); }
.co-pin .dot {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--co-signal-orange); box-shadow: 0 0 0 5px rgba(236, 101, 43, .18);
}
.co-pin.sm .dot { width: 7px; height: 7px; box-shadow: 0 0 0 4px rgba(236, 101, 43, .14); }
.co-pinlab {
  position: absolute; transform: translateY(-50%);
  display: flex; align-items: baseline; gap: var(--co-s8); white-space: nowrap;
  pointer-events: auto; background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--co-radius); padding: 5px 11px;
  box-shadow: rgba(87, 90, 100, .14) 0 0 0 1px;
}
.co-pinlab:hover {
  background: var(--co-white);
  box-shadow: rgba(17, 26, 74, .05) 0 8px 16px 0, rgba(87, 90, 100, .12) 0 0 0 1px;
}
.co-pinlab .nm { font-size: 13px; font-weight: 500; color: var(--co-indigo-navy); }
.co-pinlab .ct { font-family: var(--co-mono); font-size: var(--co-micro); color: var(--co-steel); }

/* Measured: at 900px only 11px separates the headline from the nearest label.
   The layer goes at 960, where the gap is still ~40px, and .co-citypills below
   carries the same figures instead. */
.co-citypills { display: none; }
@media (max-width: 960px) {
  .co-pins { display: none; }
  .co-citypills { display: flex; }
}

/* ----------------------------------------------------------------- rows --- */

.co-split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--co-s48);
}
@media (max-width: 900px) { .co-split { grid-template-columns: 1fr; gap: var(--co-s40); } }

.co-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--co-s16); align-items: center;
  padding: var(--co-s16) 0; border-bottom: 1px solid var(--co-line);
}
.co-row:hover { background: rgba(255, 255, 255, .6); }
.co-mark {
  width: 44px; height: 44px; border-radius: var(--co-radius);
  background: var(--co-white); border: 1px solid var(--co-line);
  display: grid; place-items: center; overflow: hidden;
  font-size: 13px; font-weight: 600; color: var(--co-slate-ink);
}
.co-mark img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
/* These are spans in a grid cell: without display:block the name, blurb and
   meta run together on one line. */
.co-row .nm { display: block; font-size: 15px; font-weight: 550; color: var(--co-indigo-navy); line-height: 1.3; }
.co-row .ds {
  display: block; font-size: 13px; color: var(--co-steel); line-height: 1.4;
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-row .mt {
  display: block; font-family: var(--co-mono); font-size: var(--co-micro);
  color: var(--co-seafoam-700); text-align: right; white-space: nowrap;
}

/* --------------------------------------------------------------- guides --- */

.co-guides { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--co-s48); }
@media (max-width: 900px) { .co-guides { grid-template-columns: 1fr; } }
.co-guide {
  display: block; padding: var(--co-s16) 0; border-bottom: 1px solid var(--co-line);
}
.co-guide .nm { display: block; font-size: var(--co-sub-sm); color: var(--co-indigo-navy);
                font-weight: 550; line-height: 1.25; }
.co-guide .mt { display: block; font-family: var(--co-mono); font-size: var(--co-micro);
                color: var(--co-steel); margin-top: var(--co-s8); }
.co-guide:hover .nm { color: var(--co-seafoam-700); }

.co-adslot {
  border: 1px dashed var(--co-mist); border-radius: var(--co-radius);
  padding: var(--co-s24); text-align: center; color: var(--co-steel);
  font-size: 13px; background: rgba(255, 255, 255, .5);
}
.co-adslot .lbl {
  display: block; font-size: var(--co-micro); letter-spacing: .09em;
  text-transform: uppercase; color: var(--co-fog); margin-bottom: var(--co-s8);
}
.co-adslot a { color: var(--co-seafoam-700); }

/* ------------------------------------------------------------------ cta --- */

.co-cta {
  margin-top: var(--co-s80); padding: var(--co-s64) 0 var(--co-s80);
  border-top: 1px solid var(--co-line); text-align: center;
}
.co-cta h2 { font-size: var(--co-sub-lg); letter-spacing: -.28px; margin-bottom: var(--co-s12); }
.co-cta p { color: var(--co-steel); margin: 0 auto var(--co-s24); max-width: 52ch; }
/* Only the primary carries the accent: Signal Orange appears at most twice on
   the page, and the city dot already spends one. */
.co-cta-btns { display: flex; gap: var(--co-s12); justify-content: center; flex-wrap: wrap; }
.co .co-cta .co-btn-solid { background: var(--co-signal-ink); color: var(--co-white); }
.co .co-cta .co-btn-solid:hover { background: var(--co-signal-ink-hover); }

@media (prefers-reduced-motion: reduce) {
  .co * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------- footer --- */
/* Carries `.co` as well so the tokens resolve - it renders outside the page
   wrapper, after </main>. */

/* The footer is chrome, not content, so it wears the SITE brand rather than the
   Column palette. Indigo navy (#111a4a) against the header's teal gradient read
   as two different apps sharing a page.
   
   This is the header's exact declaration, pointing at the same tokens, so the
   two bands stay identical and a brand change moves both at once. */
.co-footer {
  background: linear-gradient(90deg,
              var(--color-primary-600, #3A7A88) 0%,
              var(--color-primary-800, #1F4E58) 35%,
              var(--color-dark, #1B3A4B) 100%);
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  margin-top: 0;
}
.co-footer .co-wrap { padding-top: var(--co-s24); padding-bottom: var(--co-s16); }

.co-footer-top {
  display: flex; align-items: center; gap: var(--co-s32);
  padding-bottom: var(--co-s16);
}
.co-footer-brand { flex: 0 0 auto; display: inline-flex; }
.co-footer-brand img { height: 24px; width: auto; display: block; }

/* One wrapping row rather than two stacked columns with headings - the same
   links in roughly half the height. */
.co-footer-nav {
  flex: 1 1 auto; display: flex; flex-wrap: wrap;
  gap: var(--co-s8) var(--co-s20); align-items: center;
}
.co-footer-nav a { color: rgba(255, 255, 255, .82); white-space: nowrap; }
.co-footer-nav a:hover { color: var(--co-white); }

.co-footer-social { flex: 0 0 auto; display: flex; gap: var(--co-s8); }
.co-footer-social a {
  width: 30px; height: 30px; border-radius: var(--co-radius);
  display: grid; place-items: center; font-size: 12px;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .82);
}
.co-footer-social a:hover { background: rgba(255, 255, 255, .14); color: var(--co-white); }

.co-footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--co-s16); flex-wrap: wrap;
  padding-top: var(--co-s12);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: var(--co-caption);
}
/* The teal ground is lighter than the indigo it replaced, so the old alphas
   dropped under AA - 50% white measured 2.71:1 at the gradient's light end, and
   the copyright sits at exactly that end. On a gradient, opacity is an
   unreliable way to express hierarchy: size carries it here (12px vs 13px) and
   the alpha only has to clear contrast. */
.co-footer-copy { color: rgba(255, 255, 255, .88); }
.co-footer-meta { display: flex; flex-wrap: wrap; gap: var(--co-s16); }
.co-footer-meta a { color: rgba(255, 255, 255, .74); }
.co-footer-meta a:hover { color: var(--co-white); }

.co-footer a:focus-visible,
.co-footer-social a:focus-visible { outline: 2px solid var(--color-accent, #E8A838); outline-offset: 2px; }

@media (max-width: 760px) {
  .co-footer-top { flex-wrap: wrap; gap: var(--co-s16); }
  .co-footer-nav { order: 3; flex-basis: 100%; }
  .co-footer-social { margin-left: auto; }
}

/* A host for the hero background on pages that are not the Column landing.
   No overflow:hidden - the canvas is inset:0 and cannot escape, and clipping
   here would cut any dropdown the hero contains. */
.co-hosted { position: relative; }
.co-hosted-in { position: relative; z-index: 2; }