/* overrides.css — our changes on top of the original build.
 *
 * Loaded AFTER site.css so these win. Kept in a separate file on purpose: site.css is their
 * compiled Tailwind and gets replaced wholesale whenever we re-harvest, so anything we edit into
 * it would be silently lost on the next build. build.mjs links this file into every page.
 */

/* ── Header logo, made ~3x larger (Adam, 8/5) ────────────────────────────────────────────────────
 * Two things were making it look tiny. The element was h-24/md:h-32 (96/128px), and the source PNG
 * was 1000x1000 with the artwork filling only 66% of the width and 55% of the height — so at 96px
 * the visible mark rendered about 53px tall. The PNG is now cropped to its opaque bounds, which
 * alone roughly doubles the apparent size, and the height below carries the rest.
 * The header has no fixed height, so it grows to fit rather than clipping.                        */
header img[alt*="Coastal Shine" i] {
  height: 116px !important;   /* phones */
  width: auto !important;
  max-width: 60vw;            /* never let it crowd the burger on a small screen */
}

@media (min-width: 768px) {
  header img[alt*="Coastal Shine" i] {
    height: 210px !important; /* 3x the old apparent artwork height (was ~70px visible) */
    max-width: none;
  }
}

/* Give the taller mark a little breathing room without shifting the nav off-centre. */
@media (min-width: 768px) {
  header > div { padding-top: 6px; padding-bottom: 6px; }
}