/* =========================================================================
   PER-CLIENT BRAND LAYER — optional, loaded after css/styles.css
   
   Empty by default. Use it when a client needs more than the eight colours
   in site.config.js "theme": different section backgrounds, playful borders,
   a louder or quieter feel.

   Why it sits here and not in css/:
   sync-engine.bat copies the whole css/ folder from a client back into this
   template. A file at the root of site/ is left alone, so per-client styling
   written here never leaks into the next buildout.

   Worked example: Clients/Going Bananas/site/brand.css — a dessert shop in
   its own yellow / magenta / cyan, candy-stripe section dividers, and a
   sticker-style button lifted from the client's bubble-letter logo.
   ========================================================================= */

/* ---- Client logo (added 22 Oct 2026) -------------------------------------
   The round badge the client supplied, keyed off its green screen.
   Header: badge beside the name. Hero: badge above the headline.
   Footer: badge above the name. Files: images/logo-128/240/480.png       */
.brand .brand-logo { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.hero-logo { display: block; width: clamp(108px, 14vw, 172px); height: auto; margin: 0 0 18px -4px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.foot-logo { display: block; width: 112px; height: auto; margin: 0 0 16px; }
@media (max-width: 560px) { .brand .brand-logo { width: 44px; height: 44px; } }
@media (max-width: 560px) { .hero-logo { display: none; } } /* phones: the header badge carries it; keeps the headline above the fold */

/* ---- Wildlife grid: last card wide (added 22 Oct 2026) -------------------
   9 small cards: desktop 5 cols = 5 + 3 + one double; phone 2 cols = 4 rows
   + one full-width; tablet 3 cols = 3x3, so the card stays single there.
   The osprey photo is 2.08:1 so the wide card matches its row's height.  */
@media (min-width: 1101px), (max-width: 760px) {
  .species > li:last-child { grid-column: span 2; }
  .species > li:last-child .sp-img { aspect-ratio: 2.08 / 1; }
}

/* ---- WhatsApp buttons in WhatsApp green (added 22 Oct 2026, client request) ----
   Dark text on #25D366 (7.8:1, AA). White text would fail (2:1).
   Icon: a generic chat bubble, not WhatsApp's trademarked logo. To use the
   official icon, drop WhatsApp's own file from their brand resources into
   images/ and swap the mask URL below.                                     */
:root { --wa: #25D366; --wa-hover: #1FBF5B; --wa-ink: #062B15;
  --wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h14a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-8l-5 4v-4H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm0.5 7.5a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01zm5 0a1.5 1.5 0 1 0 0 .01z' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.top-book, a.btn[data-i="hero.book"], .find-links a[data-wa], .book-form button[type="submit"], form button[type="submit"].btn, .mbar a[data-wa] {
  background: var(--wa) !important; color: var(--wa-ink) !important; border-color: var(--wa) !important; }
.top-book:hover, a.btn[data-i="hero.book"]:hover, .find-links a[data-wa]:hover, form button[type="submit"].btn:hover { background: var(--wa-hover) !important; border-color: var(--wa-hover) !important; }
.top-book::before, a.btn[data-i="hero.book"]::before, .find-links a[data-wa]::before, form button[type="submit"].btn::before, .mbar a[data-wa]::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em; background: currentColor;
  -webkit-mask: var(--wa-icon) center / contain no-repeat; mask: var(--wa-icon) center / contain no-repeat; }
.mbar a[data-wa]::before { margin-right: 8px; }
form button[type="submit"].btn .ico { display: none; }