/* ==========================================================================
   pages/zz-site.css — this site's deliberate divergences from the shared
   Swiss Editorial sheets (01-tokens, 02-components, 03-workspace), which are
   kept byte-identical to Marine Directory so they can be re-synced.

   Named to sort last so it wins against every other file.

   The brief: keep the type system, but read as a normal, centred website.
   Marine Directory is a directory people browse; this site has to convert a
   visitor into an enquiry, so the measures are tighter and the primary
   actions are buttons rather than text links.
   ========================================================================== */

:root {
  /* Content stops at 1440 and centres, instead of running to 1760. */
  --max-width: 1440px;
  /* Sections were tall enough to hide the next one below the fold. */
  --row-end: clamp(56px, 6vw, 96px);
}

/* ---------- Mastheads ---------------------------------------------------- */
/* 144px above a page title reads as a gallery wall, not a website. */
.masthead { padding-block: clamp(48px, 5vw, 80px) clamp(40px, 4vw, 64px); }
.hero { padding-block: clamp(72px, 9vw, 136px) clamp(56px, 6vw, 88px); }

/* ---------- Sections ----------------------------------------------------- */
/* The row pattern keeps its label column, but opens a little less air above. */
.row { padding-block: var(--s-6) var(--row-end); }
.row--open { padding-block-start: var(--s-8); }

/* ---------- Footer ------------------------------------------------------- */
/* A 55px grey statement outsized the page above it on short pages, and read
   as a second hero. The footer should close the page, not restate it. */
.footer-statement { grid-column: 1 / span 7; font-size: var(--t-l); line-height: var(--lh-head); color: var(--grey-text); }
.footer-cols { margin-block-start: var(--s-8); }
.footer-bottom { margin-block-start: var(--s-8); }

/* ---------- Header ------------------------------------------------------- */
/* The primary action reads as a button, the way a visitor expects. */
.nav__cta { margin-inline-start: var(--s-2); }
.nav > a.nav__cta { min-height: 44px; }
@media (max-width: 63.99rem) { .nav__cta { display: none; } }

/* ---------- Calls to action ---------------------------------------------- */
/* A closing CTA is a block, not a line of prose: the button sits clear of it. */
.row__more .btn { margin-block-start: var(--s-2); }

/* ---------- Directory ---------------------------------------------------- */
/* 137 countries in one 55px column ran to eight thousand pixels. Grouped by
   letter and flowed into columns, the same list fits on a screen or two and
   can be scanned the way a directory should be. */
.directory { columns: 4; column-gap: var(--s-7); }
.directory__group { break-inside: avoid; margin-block-end: var(--s-5); }
.directory__letter { padding-block-end: 6px; border-bottom: 1px solid var(--ink); font-size: var(--t-s); font-weight: 500; color: var(--grey-text); }
.directory ul { margin-block-start: var(--s-2); padding: 0; list-style: none; }
.directory li { break-inside: avoid; }
.directory a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-block: 5px; color: var(--grey-text); transition: color 200ms var(--ease); }
.directory a:hover, .directory a:focus-visible { color: var(--ink); }
.directory__count { font-size: var(--t-s); font-variant-numeric: tabular-nums; }
@media (max-width: 63.99rem) { .directory { columns: 3; } }
@media (max-width: 47.99rem) { .directory { columns: 2; column-gap: var(--s-5); } }

/* ---------- Long selectors ----------------------------------------------- */
/* A country selector is the widest thing on these forms, so it is allowed out
   of the 52rem measure the rest of the section keeps. */
.form-section > .stack:has(.check-group--wide) { max-width: none; }
.check-group--wide > summary { font-weight: 500; }
.check-group--wide > .check-columns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
/* With a mouse the rows can be tighter; touch targets stay 44px on phones. */
@media (pointer: fine) { .check-group--wide .check { min-height: 34px; } }

/* ---------- Flashes ------------------------------------------------------ */
.flash { padding: 14px var(--s-5); background: var(--field); border-bottom-color: transparent; border-radius: var(--radius); }
.flash + .flash { margin-block-start: var(--s-2); }
.flash--alert { border-top: 2px solid var(--danger); }
.flash--notice { border-top: 2px solid var(--ink); }
.wrap > .flash:first-child, .flash-stack { margin-block-start: var(--s-4); }