/* Palette and typography match the live fishingcalendarapp.com theme (Naxos):
   navy #0F3460 hero/footer, Roboto, white content cards on #fafbfe, blue links.
   No dark-mode variant: the WordPress site is light-only, and a subpage that
   flips dark while the rest of the site stays light would look foreign. */
:root {
  --navy: #0f3460;
  --navy-deep: #0d1f2d;
  --link: #2a6dd9;
  --accent: #5a9dff;
  --text: #333940;
  --muted: #667085;
  --page-bg: #fafbfe;
  --card-bg: #ffffff;
  --border: #e4e8f0;
  /* Map palette reads like a real map: clear water blue against warm land, with
     the species range in the same bright blue the app's live map uses (#1d8cf8).
     The previous pastel pair was nearly invisible on the light page background. */
  --ocean: #a9cbe6;
  --land: #ece7db;
  --coast: #8fb3cc;
  --range: #1d8cf8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
  background: var(--page-bg);
}
h1, h2, h3 { color: var(--navy); line-height: 1.25; }
a { color: var(--link); }
main { max-width: 980px; margin: 0 auto; padding: 0 1.5rem 3rem; }

/* Header mirrors the live site: white bar, logo left, bold navy links right. */
/* Navy header matching the live homepage nav. */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: .9rem 2rem;
  background: var(--navy);
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.site-header .logo-icon { border-radius: 8px; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.site-header nav a {
  color: #dbe7ff;
  text-decoration: none;
  font-weight: 500;
}
.site-header nav a:hover { color: #fff; text-decoration: underline; }
/* Hamburger (CSS-only checkbox toggle): hidden on desktop, replaces the nav
   row on phones like the homepage menu. */
.nav-open, .nav-toggle { display: none; }
@media (max-width: 720px) {
  .site-header { position: relative; flex-wrap: wrap; padding: .7rem 1rem; gap: .6rem; }
  .site-header .brand { font-size: .95rem; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
  }
  .nav-toggle span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .site-header nav {
    display: none;
    flex-basis: 100%; flex-direction: column; gap: 0;
    margin-top: .6rem; padding-top: .4rem;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .site-header nav a { padding: .55rem 0; font-size: 1.02rem; }
  .nav-open:checked ~ nav { display: flex; }
  .nav-open:checked + .nav-toggle { background: rgba(255, 255, 255, .12); }
}

/* Navy page band behind breadcrumb + H1, like the live Help page hero. */
.breadcrumb, main h1 {
  background: var(--navy);
  color: #fff;
  margin: 0 calc(50% - 50vw);
  padding-left: max(1.5rem, calc(50vw - 490px));
  padding-right: max(1.5rem, calc(50vw - 490px));
}
.breadcrumb { font-size: .85rem; padding-top: 1.25rem; }
.breadcrumb a { color: #cfe0ff; }
.breadcrumb span { color: #fff; }
main h1 { padding-top: .5rem; padding-bottom: 1.5rem; font-size: 2.4rem; }
/* :not(.hub-intro) — the hub hero styles its own intro; without this the
   generic band rule squeezes it into a narrow column. */
main h1 + .latin, main h1 + .intro, main h1 + p:not(.hub-intro) {
  background: var(--navy);
  color: #dbe7ff;
  margin: 0 calc(50% - 50vw);
  /* margin-top 0 must beat the generic spacing rule below, or a white
     stripe splits the navy hero band between the H1 and this paragraph. */
  margin-top: 0 !important;
  padding: 0 max(1.5rem, calc(50vw - 490px)) 1.75rem;
  max-width: none;
}
main h1 + .latin { font-style: italic; }

/* First block after the hero band gets breathing room. Species pages wrap
   their content in <article>, which must stay flush so the navy band formed
   by the breadcrumb and the H1 inside it stays contiguous.

   [class^="hub-"] is excluded because this rule is for the article pages only.
   Without it the fixed .hub-bar inherits a 1.1rem top margin, which offsets it
   below top:0 and leaves a strip of the page visible above the sticky bar. */
main > *:not(.breadcrumb):not(h1):not(article):not([class^="hub-"]) { margin-top: 1.1rem; }
main > article { margin-top: 0; }
article > img.hero, article > .fact-card { margin-top: 1.25rem; }

/* Hero spans the full content column in a white card, matching the live
   fish-lib pages. 16:9 with object-fit keeps every species the same shape. */
img.hero {
  display: block;
  width: 100%;
  height: auto;
  /* Matches the ratio every image is padded to in generator/images.py, so the
     box is pixel-exact and nothing is cropped or letterboxed. */
  aspect-ratio: 1376 / 768;
  object-fit: cover;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
}
.fact-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
/* Pills lead the fact card, so the divider sits between them and the rows. */
.fact-card .pills { margin: 0 0 .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
/* Stat tiles: label over value, 2-up on phones, 4-up on desktop. Distribution
   can be a long comma list, so it gets the full row. */
.facts.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.25rem; }
@media (min-width: 720px) { .facts.stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat--wide { grid-column: 1 / -1; }
.stat dt {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.stat dd { margin: .15rem 0 0; font-weight: 600; color: var(--navy); }
/* Grouped rows inside the fact card (Classification, Distribution), divided
   like the pills row above them. */
.fact-group { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.fact-group__label {
  display: block;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: .55rem;
}
/* Distribution areas as outline chips, matching the live site's pill style. */
.area-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.area-chip {
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .35rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--link);
}

/* --- About section --------------------------------------------------------
   Descriptions arrive with inline labels ("Distribution:", "Behaviour:") that
   generator/describe.py turns into h3 sub-headings. Long ones collapse behind
   a Show more button — but only when JS runs, so crawlers and no-JS readers
   always get the full text. */
.description h3 { color: var(--navy); font-size: 1.05rem; margin: 1.3rem 0 .35rem; }
.description p { margin: .55rem 0; }
.description.is-collapsed { max-height: 21rem; overflow: hidden; position: relative; }
.description.is-collapsed::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 4.5rem;
  background: linear-gradient(rgba(250, 251, 254, 0), var(--page-bg));
}
.show-more {
  margin-top: .4rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--link);
  font: inherit;
  font-weight: 600;
  padding: .4rem 1.1rem;
  border-radius: 50px;
  cursor: pointer;
}
.show-more:hover { border-color: var(--link); }

/* --- Also-known-as chips ---------------------------------------------------
   Latin-script names first, other scripts after (ordering done in Python).
   Chips past the first 20 are hidden only when JS adds .js, so the full list
   stays visible to crawlers and no-JS readers. */
.name-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.name-chip {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .3rem .85rem;
  font-size: .88rem;
}
.name-chips.js .name-chip.extra { display: none; }
.names-more {
  margin-top: .7rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--link);
  font: inherit;
  font-weight: 600;
  padding: .4rem 1.1rem;
  border-radius: 50px;
  cursor: pointer;
}
.names-more:hover { border-color: var(--link); }

/* --- Location & related-species cards --------------------------------------
   The "Where to catch" and "Related species" link lists as card grids
   (design variant A): white cards, hover lift, best-month chip on locations. */
.loc-grid, .rel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem;
  padding: 0; margin: 0; list-style: none;
}
.loc-card, .rel-card {
  display: block; height: 100%;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: var(--text);
  transition: box-shadow .15s;
}
.loc-card:hover, .rel-card:hover { box-shadow: 0 4px 14px rgba(15, 52, 96, .12); }
.loc-card { padding: .8rem .9rem; }
.loc-name { display: block; font-weight: 700; color: var(--navy); }
.loc-country { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .5rem; }
.loc-month {
  display: inline-block; background: #e8f0fe; color: var(--navy);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 50px; padding: .25rem .7rem;
}
.rel-card { overflow: hidden; }
.rel-card img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  background: #fff; border-bottom: 1px solid var(--border);
}
.rel-body { display: block; padding: .6rem .8rem .75rem; }
.rel-name { display: block; font-weight: 700; color: var(--navy); }
.rel-latin { display: block; font-size: .8rem; color: var(--muted); font-style: italic; }
/* Location pages cap the fish grid at 6 cards; the rest are hidden only when
   JS adds .js, so crawlers and no-JS readers always see the full list. */
.rel-grid.js .extra { display: none; }
.fish-more {
  margin-top: .9rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--link);
  font: inherit;
  font-weight: 600;
  padding: .4rem 1.1rem;
  border-radius: 50px;
  cursor: pointer;
}
.fish-more:hover { border-color: var(--link); }
@media (max-width: 640px) {
  .loc-grid, .rel-grid { grid-template-columns: repeat(2, 1fr); }
}
.distribution-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.distribution-map .ocean { fill: var(--ocean); }
/* Stroked coastlines stop the continents dissolving into the sea at page scale. */
.distribution-map .land { fill: var(--land); stroke: var(--coast); stroke-width: .4; }
.distribution-map .range {
  fill: var(--range);
  fill-opacity: .55;
  stroke: var(--range);
  stroke-width: .6;
}
.attribution { font-size: .85rem; color: var(--muted); }
.linklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .5rem;
  padding: 0;
  list-style: none;
}
.linklist a { text-decoration: none; }
.linklist a:hover { text-decoration: underline; }
table { width: 100%; border-collapse: collapse; background: var(--card-bg); }
th, td { padding: .45rem .65rem; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--navy); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }

/* ---- Forecast table on phones: one card per day -------------------------
   Below 720px the 7-column table would wrap and cram; instead every row
   becomes a small card. All data stays visible — nothing is hidden, nothing
   scrolls sideways. Labels come from ::before so the markup stays a table. */
@media (max-width: 719px) {
  .table-wrap { overflow-x: visible; border: none; border-radius: 0; }
  .forecast, .forecast tbody { display: block; }
  .forecast thead { display: none; }
  .forecast tr.day-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "date eff"
      "moon eff"
      "rise set"
      "major major"
      "minor minor";
    gap: .1rem .8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .7rem .9rem;
    margin-bottom: .6rem;
  }
  .forecast td { display: block; border: none; padding: 0; }
  .forecast .c-date { grid-area: date; font-weight: 700; color: var(--navy); }
  .forecast .c-moon { grid-area: moon; color: var(--muted); font-size: .85rem; }
  .forecast .c-eff { grid-area: eff; justify-self: end; align-self: center; text-align: right; }
  .forecast .c-eff .eff-dots { display: block; margin-left: 0; }
  .forecast .c-rise { grid-area: rise; }
  .forecast .c-set { grid-area: set; }
  .forecast .c-major { grid-area: major; margin-top: .35rem; }
  .forecast .c-minor { grid-area: minor; }
  .forecast .c-rise::before { content: "Sunrise "; }
  .forecast .c-set::before { content: "Sunset "; }
  .forecast .c-major::before { content: "Major "; }
  .forecast .c-minor::before { content: "Minor "; }
  .forecast td::before { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                         letter-spacing: .05em; color: var(--muted); margin-right: .3rem; }
  .forecast .c-rise, .forecast .c-set { font-size: .9rem; }
  .forecast .day-row--locked .locked-cell { color: var(--muted); font-size: .9rem; }
  .forecast .locked-cell--unlock { white-space: normal; }
  .forecast .unlock-row, .forecast .unlock-row td {
    display: block; background: #eef4ff; border-radius: 12px;
    padding: .6rem .9rem; margin-bottom: .6rem; border: none;
  }
}
.intro { max-width: 65ch; }
.meta { color: var(--muted); }

/* ---- Fish Library hub: hero that collapses into a sticky bar ----
   The hub needs a wider column than the article pages: 5 cards across at the
   980px reading width would leave each fish only ~103px tall. */
/* All three break out of main's 980px reading column. The hero and bar centre
   their content with an inner wrapper; the results grid has no wrapper, so it
   centres with symmetric padding instead (same trick as the h1 band above). */
.hub-hero, .hub-bar, .hub-results { margin-inline: calc(50% - 50vw); }
.hub-hero__inner, .hub-bar__inner { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
.hub-results { padding-inline: max(1.5rem, calc(50vw - 600px)); }

.hub-hero { background: var(--navy); color: #fff; padding: 1.6rem 0 1.5rem; }
.hub-hero h1 {
  /* site.css gives every h1 the navy band; inside the hero that would double up. */
  background: none; color: #fff; margin: 0 0 .2rem; padding: 0; font-size: 2.1rem;
}
.hub-crumb { font-size: .85rem; color: #cfe0ff; margin-bottom: .7rem; }
.hub-crumb a { color: #cfe0ff; }
.hub-crumb span { color: #fff; }
.hub-intro { color: #cfe0ff; margin: 0 0 1.1rem; max-width: 65ch; }
.hub-search {
  width: 100%; max-width: 600px; padding: .5rem .8rem; font-size: .95rem;
  border: 0; border-radius: 10px; font-family: inherit;
}
.hub-search--lg { padding: .8rem 1rem; font-size: 1.08rem; border-radius: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.chip {
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .1);
  color: #fff; border-radius: 50px; padding: .38rem .9rem;
  cursor: pointer; font: inherit; font-size: .86rem; white-space: nowrap;
}
.chip__n { opacity: .7; font-size: .8em; margin-left: .3rem; }
.chip.on { background: #fff; color: var(--navy); border-color: #fff; }

/* Letters live in the hero, so no separate band and no gap above the grid. */
.hub-hero .az {
  display: flex; flex-wrap: wrap; gap: 1px;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.az a { text-decoration: none; font-weight: 600; border-radius: 6px; color: #cfe0ff;
        font-size: .82rem; padding: .16rem .44rem; }
.az a:hover { background: #fff; color: var(--navy); }
.az a.is-empty { opacity: .28; pointer-events: none; }

.hub-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: rgba(15, 52, 96, .97); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  padding: .5rem 0; transform: translateY(-115%); transition: transform .22s ease;
}
.hub-bar.on { transform: translateY(0); }
.hub-bar__inner { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.hub-bar__brand { color: #fff; font-weight: 700; white-space: nowrap; }
.hub-bar .hub-search { flex: 1 1 200px; min-width: 160px; max-width: none; }
.hub-bar .chips { margin-top: 0; }
.hub-bar .chip { padding: .28rem .68rem; font-size: .8rem; }
.hub-count { color: #cfe0ff; font-size: .8rem; white-space: nowrap; }
.hub-bar .az { display: flex; flex-wrap: wrap; gap: 1px; margin-left: auto; }
.hub-bar .az a { font-size: .74rem; padding: .08rem .34rem; }

.hub-results { padding-top: 1rem; }
.letter-section[hidden] { display: none; }
.letter-head {
  display: flex; align-items: baseline; gap: .55rem;
  margin: 1.5rem 0 .65rem; padding-top: .35rem;
  border-top: 2px solid var(--navy); scroll-margin-top: 90px;
}
.letter-section:first-child .letter-head { margin-top: .4rem; }
.letter-head h2 { margin: 0; font-size: 1.25rem; color: var(--navy); }
.letter-head span { color: var(--muted); font-size: .82rem; font-weight: 400; }
.hub-empty { padding: 3rem 0; color: var(--muted); }

@media (max-width: 720px) {
  .hub-bar__brand, .hub-count, .hub-bar .az { display: none; }
  /* Sticky bar stacks: full-width search on top, filter chips wrapped below —
     every water-type filter stays visible, nothing scrolls sideways. */
  .hub-bar__inner { flex-wrap: wrap; }
  .hub-bar .hub-search { flex-basis: 100%; }
  .hub-bar .chips { flex-wrap: wrap; }
  .hub-hero h1 { font-size: 1.7rem; }
}

.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 0;
  list-style: none;
}
.species-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.species-card a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
/* The 8:5 box this used to have cropped 10.6% off each side, clipping tails
   and snouts. Every image is now padded to one ratio at build time, so the box
   matches it exactly: no crop, no letterbox, all cards the same shape. */
.species-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1376 / 768;
  object-fit: cover;
  background: var(--card-bg);
}
.species-card .name, .species-card .latin, .species-card .meta { padding: 0 .6rem; }
.species-card .name { font-weight: 600; margin-top: .4rem; color: var(--navy); font-size: .92rem; }
.species-card .latin { font-style: italic; color: var(--muted); font-size: .78rem; }
.species-card .meta { font-size: .8rem; color: var(--muted); margin-bottom: .75rem; }

/* Efficiency cell: percent + the apps' 5-dot scale, coloured like the app
   calendar (best green >= 80%, bad red < 20%, yellow-ish good between). */
.eff { white-space: nowrap; }
.eff-pct { font-weight: 700; }
.eff-dots { letter-spacing: .1em; margin-left: .4rem; }
.eff--best .eff-dots { color: #00cc4d; }
.eff--good .eff-dots { color: #e0a800; }
.eff--bad .eff-dots { color: #d64545; }

/* Locked forecast rows: sun/moon stay readable, app-only detail is dimmed. */
.day-row--locked td { color: var(--muted); }
.locked-cell { letter-spacing: .15em; }
.locked-cell--unlock { letter-spacing: 0; font-size: .82rem; white-space: nowrap; }
.locked-cell a { font-size: .82rem; font-weight: 600; letter-spacing: 0; }
.unlock-row td {
  background: #eef4ff;
  color: var(--navy);
  font-weight: 600;
  text-align: center;
  padding: .6rem;
}
.faq dt { font-weight: 600; color: var(--navy); margin-top: 1rem; }
.faq dd { margin: .25rem 0 0; }
.app-cta {
  background: var(--navy);
  color: #fff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-top: 2.5rem;
}
.app-cta h2 { color: #fff; margin-top: 0; }
.app-cta p { color: #dbe7ff; }

/* Footer mirroring the live homepage: brand + social, link columns, store
   buttons, centred copyright. */
.site-footer {
  background: var(--navy);
  color: #cfe0ff;
  padding: 2.5rem 2rem 1.5rem;
  margin-top: 3rem;
  font-size: .9rem;
  text-align: center;
}
.footer-cols {
  display: flex; flex-wrap: wrap; gap: 2rem;
  max-width: 980px; margin: 0 auto 1.5rem; text-align: left;
}
.footer-col { flex: 1 1 140px; }
.footer-col--brand { flex: 2 1 220px; }
.site-footer h4 { color: #fff; font-size: .95rem; margin: 0 0 .9rem; }
.footer-col p { color: rgba(255, 255, 255, .65); line-height: 1.7; margin: 0 0 1.1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .55rem; }
.footer-col a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: .6rem; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .35); color: #fff;
}
.footer-social a:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
/* Store buttons stack vertically in the footer column. */
.footer-col .cta-btns { flex-direction: column; align-items: stretch; margin-left: 0; gap: .6rem; }
.footer-copy { margin: 0 0 .4rem; }
.footer-disclaimer { color: rgba(255, 255, 255, .45); font-size: .78rem; margin: 0; }
@media (max-width: 600px) { .footer-cols { flex-direction: column; gap: 1.6rem; } }
@media (max-width: 640px) {
  main h1 { font-size: 1.7rem; }
}

/* --- Interactive map ------------------------------------------------------
   The static SVG is the rendered content until map.js swaps in Leaflet. */
.map-wrap { position: relative; }
.map-wrap.is-live .distribution-map { display: none; }
.map-live {
  width: 100%;
  height: 420px;
  border-radius: 12px;
  border: 1px solid var(--border);
  z-index: 0;               /* keep Leaflet panes below the sticky header */
}
.map-live .leaflet-control-attribution { font-size: .7rem; }
@media (max-width: 640px) { .map-live { height: 260px; } }

/* --- App store buttons ---------------------------------------------------- */
.app-cta {
  display: flex;
  flex-wrap: wrap;
  /* Row gap 1rem for the wrapped layout, column gap 3rem so the copy never
     crowds the buttons on one line. */
  gap: 1rem 3rem;
  align-items: center;
}
/* Capped so a long sentence stops growing instead of pushing into the buttons. */
.app-cta > div { flex: 1 1 300px; max-width: 52ch; }
/* margin-left:auto pins the pair to the right edge, leaving the CTA's own
   padding as the breathing room against the card border. */
.cta-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-left: auto; }
@media (max-width: 720px) {
  /* Once wrapped onto their own line, align them under the copy instead. */
  .cta-btns { margin-left: 0; }
}

/* --- Early CTA strip -------------------------------------------------------
   Slim, light variant of the bottom navy CTA: visible right under the facts
   without shouting. Reuses .cta-btn but flips it to outline-on-white. */
.app-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 12px;
  padding: .8rem 1.25rem;
  margin-top: 1.1rem;
}
.app-strip p { margin: 0; flex: 1 1 260px; }
.app-strip .cta-btns { margin-left: auto; }
.app-strip .cta-btn { border-color: var(--navy); color: var(--navy); padding: .35rem .8rem; }
.app-strip .cta-btn:hover { background: var(--navy); color: #fff; }
.app-strip .cta-sub { font-size: .62rem; }
.app-strip .cta-name { font-size: .92rem; }
@media (max-width: 720px) { .app-strip .cta-btns { margin-left: 0; } }
.cta-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 165px;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  text-decoration: none;
  line-height: 1.25;
}
.cta-btn:hover { background: #fff; color: var(--navy); border-color: #fff; }
.cta-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.cta-name { font-size: 1.05rem; font-weight: 700; }

/* --- Badges ---------------------------------------------------------------
   Palette copied from the live site. Detail pages use large pastel pills with
   dark text; hub cards use compact badges, with the conservation status as a
   solid colour chip so it reads at a glance in a grid of 870 cards. */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.pill {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 6px 16px;
  border-radius: 50px;
  white-space: nowrap;
}
.pill--fresh { background: #dbeafe; color: #1e40af; }
.pill--salt  { background: #e0f2fe; color: #0369a1; }
.pill--both  { background: #ede9fe; color: #5b21b6; }
.pill--lc    { background: #dcfce7; color: #16a34a; }
.pill--nt    { background: #fef9c3; color: #b45309; }
.pill--vu    { background: #ffedd5; color: #c2410c; }
.pill--en    { background: #fee2e2; color: #b91c1c; }
.pill--cr    { background: #fce7f3; color: #9d174d; }
.pill--dd    { background: #e5e7eb; color: #4b5563; }
.pill--ew    { background: #f3e8ff; color: #7b1fa2; }
.pill--ex    { background: #e5e7eb; color: #111827; }

.card-badges { display: flex; flex-wrap: wrap; gap: 3px; padding: .45rem .6rem .7rem; }
.badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 50px;
  white-space: nowrap;
}
.badge--fresh, .badge--salt, .badge--both { background: #e8f0fe; color: #1a56db; }
.badge--lc { background: #4caf50; color: #fff; }
.badge--nt { background: #8bc34a; color: #fff; }
.badge--vu { background: #ff9800; color: #fff; }
.badge--en { background: #f44336; color: #fff; }
.badge--cr { background: #b71c1c; color: #fff; }
.badge--dd { background: #9e9e9e; color: #fff; }
.badge--ew { background: #7b1fa2; color: #fff; }
.badge--ex { background: #000000; color: #fff; }