/*
  SHARED MENU AND FOOTER
  Used on every page. The menu and footer themselves live in
  /partials/nav.html and /partials/footer.html, and are copied into
  each page by tools/sync.py.
  Colours and fonts come from /settings.css.
*/

/* ── MENU ── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(29,94,124,0.12);
  font-family: var(--font-body, 'Albert Sans', sans-serif);
}

.sn-logo {
  font-family: var(--font-heading, 'Albert Sans', sans-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

.sn-logo svg { flex-shrink: 0; }

.sn-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sn-menu li { list-style: none; }

.sn-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mid);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 6px;
  transition: color 0.2s;
}

.sn-top:hover, .sn-top.current, .sn-group.open > .sn-top { color: var(--accent); }

.sn-caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}

.sn-group { position: relative; }
.sn-group.open .sn-caret { transform: rotate(-135deg) translateY(-1px); }

.sn-sub {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid rgba(29,94,124,0.14);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20,36,47,0.10);
  padding: 8px;
  margin: 0;
}

.sn-group.open .sn-sub { display: block; }

/* Invisible bridge over the gap, so moving the mouse down doesn't close it */
.sn-sub::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -12px;
  height: 12px;
}

.sn-sub a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-mid);
  text-decoration: none;
}

.sn-sub a:hover, .sn-sub a.current { background: var(--sand); color: var(--accent); }

.sn-cta {
  display: inline-block;
  margin-left: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}

.sn-cta:hover { background: var(--accent-hover, #174C65); }

.sn-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 4px;
}

.sn-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.site-nav.menu-open .sn-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.menu-open .sn-burger span:nth-child(2) { opacity: 0; }
.site-nav.menu-open .sn-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Phones and small tablets: one list with group headings */
@media (max-width: 999px) {
  .site-nav { padding: 12px 24px; }
  .sn-burger { display: flex; }

  .sn-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,0.99);
    border-bottom: 1px solid rgba(29,94,124,0.12);
    padding: 8px 24px 24px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }

  .site-nav.menu-open .sn-menu { display: flex; }

  .sn-menu > li { border-bottom: 1px solid rgba(29,94,124,0.08); padding: 6px 0; }
  .sn-menu > li:last-child { border-bottom: none; padding-top: 16px; }

  .sn-top { padding: 8px 0; width: 100%; }
  .sn-group > .sn-top { pointer-events: none; color: var(--ink-light); font-size: 11px; letter-spacing: 0.1em; padding-bottom: 2px; }
  .sn-caret { display: none; }

  .sn-sub {
    display: block;
    position: static;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0 0 4px;
    min-width: 0;
  }

  .sn-sub a { padding: 8px 0; font-size: 15px; }
  .sn-sub a:hover, .sn-sub a.current { background: none; }

  .sn-cta { margin-left: 0; display: block; text-align: center; padding: 13px 18px; }
}

/* ── FOOTER ── */
.site-footer {
  background: var(--ink);
  padding: 56px 40px 32px;
  font-family: var(--font-body, 'Albert Sans', sans-serif);
}

.sf-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

.sf-logo {
  font-family: var(--font-heading, 'Albert Sans', sans-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--sand);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.sf-brand p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.8; margin: 0; }
.sf-brand a { color: rgba(255,255,255,0.7); text-decoration: none; }
.sf-brand a:hover { color: var(--sand); }

.sf-head {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 4px 0 10px;
}

.sf-col a {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  padding: 3px 0;
}

.sf-col a:hover { color: var(--sand); }

.sf-disclaimer {
  max-width: 1100px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,0.35);
}

@media (max-width: 800px) {
  .site-footer { padding: 44px 24px 28px; }
  .sf-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sf-brand { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════
   BRAND REFRESH (Sep 2026)
   The new look, laid over the older page styles. This file loads
   last on every page, so these rules win. Colours come from
   /settings.css; the rules are in ../Brand/brand-book.md.
   ══════════════════════════════════════════════════════════════ */

body { background: #fff; -webkit-font-smoothing: antialiased; }

/* Headings: Albert Sans bold, slightly tight */
h1, h2, h3, h4,
.hero h1, .page-hero h1, .article-hero h1 { font-weight: 700; letter-spacing: -0.02em; }
h3, h4 { letter-spacing: -0.01em; }
h1, h2 { text-wrap: balance; }

/* A hand-drawn sun stroke under the highlighted words of a headline
   (replaces the old italic terracotta words) */
h1 em, h2 em, .page-hero h1 em, .hero h1 em, .article-hero h1 em {
  font-style: normal;
  color: inherit;
  background: var(--sun-stroke) no-repeat left 100% / 100% 0.32em;
  padding-bottom: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Articles: stroke only on the title, section headings stay plain */
.article h2 em { font-style: normal; color: inherit; background: none; padding: 0; }
/* Dark panels keep white words */
.problem h2 em, .swallows h2 em, .band-visiting h2 em,
.guides-cta h2 em, .article-cta h2 em { color: #fff; }

/* Section labels: uppercase deep sea with a small sun dot */
.section-tag, .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep-sea);
}
.section-tag::before, .hero-tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sun);
  flex-shrink: 0;
}
.problem .section-tag, .swallows .section-tag { color: #CFE3EE; }

/* Buttons */
.btn-primary, .sn-cta {
  background: var(--deep-sea);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
}
.btn-primary:hover, .sn-cta:hover { background: var(--deep-sea-ink); }
.btn-secondary {
  border: 1.5px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  font-weight: 600;
  background: #fff;
}
.btn-secondary:hover { border-color: var(--deep-sea); color: var(--deep-sea); }

/* Menu */
.site-nav { background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--line); }
.sn-logo { font-weight: 600; letter-spacing: -0.02em; } /* semibold: bold looks heavy at this small size */
.sn-top { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink-mid); }
.sn-top:hover, .sn-top.current, .sn-group.open > .sn-top { color: var(--deep-sea); }
.sn-sub { border: 1px solid var(--line); }
.sn-sub a:hover, .sn-sub a.current { background: var(--mist); color: var(--deep-sea); }
@media (max-width: 999px) {
  .sn-menu { background: #fff; } /* solid, so the page behind doesn't show through the open menu */
  .sn-menu > li { border-bottom-color: var(--line); }
  /* Group names read as headings (26 Oct 2026: two rows of small grey capitals were hard to scan) */
  .sn-group > .sn-top { text-transform: none; letter-spacing: -0.01em; font-size: 18px; font-weight: 700; color: var(--ink); padding: 10px 0 2px; }
  /* Phone menu is a plain list: no dropdown box, and the current page is bold instead of shaded */
  .sn-sub { border: 0; }
  .sn-sub a:hover, .sn-sub a.current { background: none; }
  .sn-sub a.current { font-weight: 600; }
}

/* Homepage hero: white, with the hills, sea and whale along the bottom */
.hero {
  background: #fff url("/images/landscape-whale.svg") no-repeat center bottom / 100% 110px;
  padding-bottom: 150px;
}
.hero::before, .hero::after, .page-hero::before { display: none; }
@media (max-width: 700px) {
  .hero, .page-hero { background-size: 100% 80px; padding-bottom: 110px; }
}
/* Other pages: a quieter hero on mist, with the hills (no whale) */
.page-hero {
  background: var(--mist) url("/images/landscape.svg") no-repeat center bottom / 100% 110px;
  padding-bottom: 140px;
}

/* The one floating card in the hero */
.hero-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 36px -20px rgba(20,36,47,0.35);
}
.hero-card-accent { background: var(--sun); }
.hero-card-text { font-style: normal; font-weight: 500; color: var(--ink); }
.hero-stat { background: var(--deep-sea-soft); border-radius: 12px; }
.hero-stat-num { color: var(--deep-sea-ink); font-weight: 700; }

/* Cards: white, a thin line, rounded, no heavy shadows */
.who-card, .principle-card, .faq-item, .callout-light, .link-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.link-card:hover { box-shadow: 0 8px 22px -14px rgba(20,36,47,0.35); }
.link-card em { color: var(--deep-sea); }
.who-list li::before { color: var(--deep-sea); }
.why-point-dot { background: var(--sun); }
.why-photo-badge { border: 1px solid var(--line); }
.why-photo-badge p { font-style: normal; font-weight: 500; color: var(--ink); }

/* Dark panel on the homepage: ink, with spot icons */
.problem { background: var(--ink); }
.problem-grid { border-radius: 14px; overflow: hidden; }
/* Phones: the cards are a sideways swipe, so the row must be able to scroll */
@media (max-width: 600px) {
  .problem-grid { overflow: visible; overflow-x: auto; border-radius: 0; }
}
.problem-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--deep-sea-soft);
  display: grid;
  place-items: center;
}
.problem-icon svg { width: 22px; height: 22px; }

/* How it works: numbered sun circles */
.how .step-num {
  background: var(--sun);
  border: none;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 0 0 6px #fff;
}
.steps::before { background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }

/* Deep sea panels, with the one sun button */
.swallows, .band-visiting { background: var(--deep-sea); }
.swallows .btn-primary, .band-visiting .btn-primary { background: var(--sun); color: var(--ink); }
.swallows .btn-primary:hover, .band-visiting .btn-primary:hover { background: #F2C36B; }
.swallows-callout { border-radius: 14px; }


/* Footer: ink, with a thin sun line on top and the small print on a darker band
   (29 Oct 2026: calmer and more formal than the old sun wash) */
.site-footer {
  background: var(--ink);
  border-top: 3px solid var(--sun);
}
.sf-logo { color: var(--white); font-weight: 600; letter-spacing: -0.02em; }
.sf-brand p { color: rgba(255,255,255,0.7); }
.sf-brand a, .sf-col a { color: #CFE0EA; }
.sf-brand a:hover, .sf-col a:hover { color: var(--white); text-decoration: underline; }
.sf-head { color: rgba(255,255,255,0.55); font-weight: 700; }
.sf-disclaimer { color: rgba(255,255,255,0.62); }
.sf-disclaimer a { color: #CFE0EA; }
.sf-disclaimer a:hover { color: var(--white); }
.sf-legal { display: block; margin-top: 8px; }
.sf-legal a { white-space: nowrap; }

/* Older rules set many headings to a light weight; make them all bold */
.who-card h3, .step h3, .problem-item h3, .principle-card h3, .faq-item h3,
.callout-light h3, .swallows-callout h4, .faq-group-title, .link-card strong,
.why-content h2, .band h2, .cta-inner h2 { font-weight: 700; letter-spacing: -0.01em; }
.how .step-num { width: 52px; height: 52px; font-size: 18px; }

/* Highlighted notes: mist with a sun edge (green is for good news only) */
.fair-note, .client-banner, .note {
  background: var(--mist);
  border-left: 3px solid var(--sun);
}
.fair-note strong, .client-banner strong { color: var(--ink); font-weight: 700; }
.survey { background: var(--mist); }
.tip strong { color: var(--deep-sea); }
.survey .section-tag { background: none; }

/* Headings are always bold in the new brand (older rules set 400-500 for Lora) */
h1, h2, h3, h4 { font-weight: 700 !important; }
.article strong, .article-meta strong { font-weight: 600; }

/* Resource cards: a full thin border, no coloured edge */
.read-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.read-card:hover { box-shadow: 0 8px 22px -14px rgba(20,36,47,0.35); }

/* Local tips: a warm sun edge */
.tip { border-left-color: var(--sun); }

/* Waitlist page: small numbered sun circles */
.how p.step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 14px;
  background: var(--sun); color: var(--ink);
  box-shadow: none;
  font-style: normal; font-weight: 700; font-size: 14px; letter-spacing: 0;
}

/* Footer small print: a darker full-width band, with the sign-off sketch (a whale
   tail, a low sun and fading waves; concept F3, 1 Oct 2026) bottom right.
   The box-shadow paints the band out to the page edges and down to the bottom. */
.site-footer { overflow: hidden; }
.sf-disclaimer {
  border-top: 0;
  padding-top: 26px;
  padding-right: 200px;
  min-height: 96px;
  background: #0E1A22 url("/images/footer-sketch-light.svg") no-repeat right 0 bottom 0 / 168px 72px;
  box-shadow: 0 0 0 100vmax #0E1A22;
  clip-path: inset(0 -100vmax -100vmax -100vmax);
}
@media (max-width: 800px) {
  .site-footer { padding-bottom: 20px; }
  .sf-disclaimer { padding-right: 0; padding-bottom: 92px; }
}

/* No personal photos on the site (1 Oct 2026): the brand illustration and
   logo stand in for them. */
.about-teaser img { border-radius: 0; object-fit: contain; }
.why-photo img { object-fit: contain; padding: 24px 24px 150px; }
.read-author img { border-radius: 24%; object-fit: contain; }
.article-meta img { border-radius: 0; object-fit: contain; }

/* ── NOTICE BANNER ──
   A strip across the very top of every page (in /partials/nav.html).
   It stays in place with the menu just below it. layout.js measures its
   height (it wraps on phones) and sets --banner-h. */
:root { --banner-h: 40px; }
.site-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  background: var(--sun, #EDB24A);
  color: var(--ink, #14242F);
  font-family: var(--font-body, 'Albert Sans', sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  padding: 10px 24px;
}
.site-banner p { margin: 0; }
.site-banner a { color: var(--ink, #14242F); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.site-banner a:hover { text-decoration-thickness: 2px; }
body { padding-top: var(--banner-h); }
.site-nav { top: var(--banner-h); }
html { scroll-padding-top: calc(var(--banner-h) + 72px); }
@media (max-width: 999px) {
  .sn-menu { max-height: calc(100vh - 60px - var(--banner-h)); }
}
@media (max-width: 600px) {
  .site-banner { font-size: 13px; padding: 9px 16px; }
  .site-banner a { white-space: normal; }
}

/* Footer contact links with a small brand line icon */
.sf-contact { display: inline-flex; align-items: center; gap: 8px; padding: 3px 0; }
.sf-contact svg { flex-shrink: 0; }

/* Cookie choice bar (built by /analytics.js) */
.cookie-bar {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 102;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px 20px;
  background: #FFFFFF;
  color: var(--ink, #14242F);
  border: 1px solid var(--line, rgba(20,36,47,0.12));
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(20,36,47,0.16);
  padding: 14px 16px 14px 20px;
  font-family: var(--font-body, 'Albert Sans', sans-serif);
  font-size: 15px;
  line-height: 1.45;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; flex: 1; }
.cookie-bar a { color: var(--deep-sea, #1D5E7C); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar-btns { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-bar button {
  font: inherit;
  font-weight: 700;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  border: 1.5px solid var(--deep-sea, #1D5E7C);
}
.cookie-yes { background: var(--deep-sea, #1D5E7C); color: #FFFFFF; }
.cookie-yes:hover { background: var(--deep-sea-ink, #174C65); border-color: var(--deep-sea-ink, #174C65); }
.cookie-no { background: #FFFFFF; color: var(--deep-sea, #1D5E7C); }
.cookie-no:hover { background: var(--mist, #F4F8FA); }
@media (max-width: 600px) {
  .cookie-bar { flex-direction: column; align-items: stretch; padding: 14px 16px; bottom: 12px; left: 12px; right: 12px; }
  .cookie-bar-btns button { flex: 1; }
}

/* ── LAUNCH (Oct 2026): "Log in" next to the Find a nanny button, and the tagline in the footer ── */
.sn-login {
  display: inline-block;
  margin-left: 10px;
  padding: 10px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--deep-sea);
  text-decoration: none;
}
.sn-login:hover { color: var(--deep-sea-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 999px) {
  /* Phone menu: Log in sits just above the button, centred */
  .sn-menu > li:has(.sn-login) { border-bottom: none; padding: 12px 0 0; }
  .sn-login { display: block; margin: 0; text-align: center; font-size: 15px; }
}
.sf-brand .sf-tagline { font-weight: 700; color: var(--white); font-size: 14px; }

/* About: the logo story box under "My story" */
.logo-story { display: flex; gap: 16px; align-items: center; margin-top: 28px; padding: 18px 20px; background: var(--mist, #F4F8FA); border-radius: 14px; }
.logo-story img { flex: none; width: 56px; height: 56px; }
.logo-story p { margin: 0; font-size: 15px; line-height: 1.6; }
.logo-story strong { color: var(--ink); }

/* About: a brand spot icon beside each "What we stand for" heading */
.principle-card h3 { display: flex; align-items: center; gap: 12px; }
.pc-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--deep-sea-soft, #E6EFF4); display: grid; place-items: center; }
.pc-icon svg { width: 22px; height: 22px; }

/* Spot icons at the top of light cards (visiting families, babysitting) */
.spot-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--deep-sea-soft, #E6EFF4); display: grid; place-items: center; margin-bottom: 14px; }
.spot-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--deep-sea, #1D5E7C); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* A page hero with the whale, like the homepage (visiting families) */
.page-hero.page-hero-whale { background-image: url("/images/landscape-whale.svg"); }


/* A page hero with the example helper card on the right (visiting families) */
.page-hero-split .container { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; align-items: center; }
.page-hero-split .hc { margin-top: 8px; }
@media (max-width: 900px) {
  .page-hero-split .container { grid-template-columns: 1fr; gap: 40px; }
}

/* A sunny feature card linking to the December guide and What's on (visiting families).
   Bunting along the top and a little market on the grass, like the What's on hero (Oct 2026). */
.sunny-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background:
    url("/images/whats-on/bunting.svg") repeat-x left 0 top 0 / 480px 60px,
    url("/images/whats-on/stalls.svg") no-repeat right 5% bottom 10px / 260px auto,
    url("/images/whats-on/calendar.svg") no-repeat left 4% bottom 18px / 78px auto,
    url("/images/whats-on/ground.svg") no-repeat center bottom / 100% 90px,
    #E6EFF4;
  border: 1px solid var(--line); border-radius: 20px;
  padding: 84px 44px 130px; color: inherit;
}
.sunny-text h2 { margin: 6px 0 10px; }
.sunny-text p { color: var(--ink-mid); font-size: 17px; line-height: 1.6; margin: 0 0 22px; max-width: 42ch; }
.sunny-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sunny-ctas .btn-primary { margin: 0; }
.sunny-link { font-weight: 600; color: var(--deep-sea); text-decoration: none; }
.sunny-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sunny-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sunny-list li { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 14px 16px; font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; box-shadow: 0 6px 16px -12px rgba(20,36,47,0.35); }
.sunny-list .spot-icon { flex: none; margin: 0; width: 40px; height: 40px; background: var(--deep-sea-soft, #E6EFF4); }
.sunny-list .spot-icon svg { width: 20px; height: 20px; }
@media (max-width: 800px) {
  .sunny-card {
    grid-template-columns: 1fr; gap: 24px; padding: 64px 22px 110px;
    background:
      url("/images/whats-on/bunting.svg") repeat-x left 0 top 0 / 320px 40px,
      url("/images/whats-on/stalls.svg") no-repeat right 14px bottom 6px / 180px auto,
      url("/images/whats-on/calendar.svg") no-repeat left 14px bottom 12px / 58px auto,
      url("/images/whats-on/ground.svg") no-repeat center bottom / 100% 70px,
      #E6EFF4;
  }
  .sunny-list { grid-template-columns: 1fr; }
}

/* "For households" in two columns (22 Oct 2026): kinds of help, then good to know */
.sn-sub.sn-cols { min-width: 0; }
.sn-group.open .sn-sub.sn-cols { display: flex; gap: 8px; }
.sn-col { list-style: none; min-width: 190px; }
.sn-subhead { margin: 4px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-light); }
@media (max-width: 999px) {
  .sn-sub.sn-cols, .sn-group.open .sn-sub.sn-cols { display: block; }
  .sn-col { min-width: 0; }
  .sn-col + .sn-col { margin-top: 6px; }
  .sn-subhead { margin: 14px 0 2px; font-size: 13px; color: var(--deep-sea); letter-spacing: .06em; }
}

/* About page: logo story sits under the picture on wider screens, after the story on phones */
.about-inner { grid-template-areas: "photo content" "logo content"; row-gap: 20px; }
.about-inner .why-photo { grid-area: photo; }
.about-inner .why-content { grid-area: content; }
.about-inner .logo-story { grid-area: logo; margin-top: 0; flex-direction: column; align-items: flex-start; gap: 12px; }
.logo-story-head { display: flex; align-items: center; gap: 12px; }
.about-inner .logo-story-head img { width: 44px; height: 44px; }
.logo-story-head .logo-story-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
@media (max-width: 900px) {
  .about-inner { grid-template-areas: "photo" "content" "logo"; }
}
/* About page: the story headline is the page's main heading (h1) but keeps the section headline look */
.about-inner .why-content h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 24px; color: var(--ink); }

/* ── SWEEP (23 Oct 2026): phone tap targets, a solid phone menu, "skip to content" link ── */
/* Skip link: hidden until a keyboard user tabs to it */
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 300; padding: 10px 18px; border-radius: 999px; background: var(--white, #fff); color: var(--ink, #14242F); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 6px 20px rgba(20,36,47,0.25); }
.skip-link:focus { top: 8px; }
/* The banner link and the footer's small print links: a bigger tap area without changing how the lines sit */
.site-banner a { padding: 8px 0; }
.sf-legal a { padding: 10px 0; }
/* The little "i" info dots: same size on screen, a bigger tap area around them */
i.tip::before { content: ""; position: absolute; inset: -12px; }
@media (max-width: 999px) {
  /* Fully solid, so the page never shows through the open menu */
  .sn-menu { background: #FFFFFF; }
  /* Menu button: 44px square tap area, lines stay where they are */
  .sn-burger { width: 44px; height: 44px; padding: 0; margin-right: -10px; align-items: center; justify-content: center; }
  .sn-sub a { padding: 11px 0; }
}
@media (max-width: 600px) {
  /* Keep "see who's free" together on one line, so a 320px phone doesn't leave "free" on its own */
  .site-banner a { white-space: nowrap; }
}
/* Cookie notice: a bigger tap area on its Privacy link, and out of the way while the phone menu is open (it covered the last menu items) */
.cookie-bar a { padding: 10px 0; }
body:has(.site-nav.menu-open) .cookie-bar { visibility: hidden; }
/* Keyboard focus: one clear brand-colour ring everywhere (the browser's own ring can be pale gold or thin) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--deep-sea, #1D5E7C); outline-offset: 2px; }
/* Bigger tap areas for links and rows, with no change to how the page lays out: an invisible strip above and below each one */
.sn-logo, .sf-logo, .sf-col a, .sf-contact, .text-link-strong, .cta-alt, .contents li a, .faq-grid summary { position: relative; }
.sn-logo::before, .sf-logo::before, .sf-col a::before, .sf-contact::before, .text-link-strong::before, .cta-alt::before, .contents li a::before, .faq-grid summary::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
@media (max-width: 999px) {
  /* The menu button grew to a 44px tap area; trim the bar's padding so the bar stays the same height */
  .site-nav { padding-top: 6px; padding-bottom: 6px; }
}
.guide img { height: auto; } /* the home guide pictures now carry width and height, so the page does not jump while they load; keep their 2:1 shape */
/* People who ask their phone for less motion get no fade-ups or smooth scrolling */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}