/* What’s On shared visual design v1 — NS is the visual reference.
   See docs/WHATSON-DESIGN.md before changing this file. Keep NB, NS and PE copies identical. */

:root {
  --navy: #0c3150;
  --deep: #08263d;
  --teal: #087e83;
  --sea: #75c7c7;
  --coral: #f06b55;
  --gold: #e9b957;
  --cream: #fff9ed;
  --paper: #fffdf8;
  --mist: #edf6f3;
  --line: #ded7c9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { overflow-wrap: anywhere; }

.site-header {
  min-height: 102px;
  padding: 0 clamp(22px, 5vw, 72px);
  display: flex;
  align-items: center;
  gap: 32px;
  background: #fffdf7;
  border-bottom: 1px solid #f0e7da;
}
.brand {
  min-width: 310px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 24px/1 Georgia, serif;
}
.brand small {
  display: block;
  margin-top: 7px;
  color: #456276;
  font: 700 13px/1.15 Arial, sans-serif;
  letter-spacing: .2px;
}
.brand-mark {
  position: relative;
  width: 66px;
  height: 58px;
  flex: none;
  overflow: hidden;
}
.brand-mark::before {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  background: var(--coral);
}
.brand-mark::after {
  content: "≈≈";
  position: absolute;
  left: 2px;
  bottom: -7px;
  color: var(--teal);
  font: 40px/1 Georgia, serif;
}
.brand-mark i,
.brand-mark b {
  position: absolute;
  right: 9px;
  bottom: 12px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 31px solid var(--teal);
}
.brand-mark b {
  right: 22px;
  bottom: 11px;
  border-left-width: 11px;
  border-right-width: 11px;
  border-bottom: 21px solid #58a99d;
}
.site-header nav { display: flex; gap: 25px; margin-left: auto; }
.site-header nav a { font-weight: 800; font-size: 14px; }
.site-header nav a:hover { color: var(--teal); }
.language {
  padding: 10px 14px;
  border: 1px solid #d8d0c4;
  border-radius: 20px;
  color: var(--teal);
  font-weight: 800;
  font-size: 13px;
}

.hero {
  min-height: 500px;
  padding: 72px clamp(24px, 6vw, 90px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  align-items: center;
  gap: 45px;
  overflow: hidden;
  background: linear-gradient(145deg, #e6f7f2 0 58%, #d2edf0 58%);
}
.hero-copy { position: relative; z-index: 2; max-width: 720px; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--coral);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.9px;
}
.hero h1 {
  margin: 0;
  max-width: 700px;
  font: 700 clamp(46px, 6vw, 78px)/.96 Georgia, serif;
  letter-spacing: -2.7px;
}
.hero-text {
  max-width: 680px;
  margin: 24px 0 26px;
  color: #365871;
  font-size: 18px;
  line-height: 1.6;
}
.search-panel {
  max-width: 690px;
  display: flex;
  overflow: hidden;
  border: 1px solid #c9d9d4;
  border-radius: 10px;
  background: white;
  box-shadow: 0 12px 34px #0c315016;
}
.search-panel label { flex: 1; display: flex; align-items: center; gap: 8px; padding-left: 16px; }
.search-panel label span { color: var(--teal); font-size: 25px; }
.search-panel input { width: 100%; padding: 18px 6px; border: 0; outline: 0; color: var(--navy); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 19px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 14px;
}
.coral { background: var(--coral); color: white; border-radius: 0; }
.preview-pill {
  display: inline-block;
  margin: 18px 0 0;
  padding: 8px 12px;
  border-radius: 99px;
  background: #ffffffad;
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}
.hero-coast {
  position: relative;
  min-height: 340px;
  border-radius: 52% 48% 14% 32% / 31% 42% 20% 25%;
  overflow: hidden;
  background: linear-gradient(#b6e8e1 0 45%, #4eb0b6 46% 100%);
  box-shadow: 0 23px 55px #0b4f6238;
  transform: rotate(-2deg);
}
.sun { position: absolute; width: 72px; height: 72px; border-radius: 50%; background: var(--gold); right: 55px; top: 45px; }
.land { position: absolute; bottom: 37%; width: 78%; height: 120px; background: #2a7366; clip-path: polygon(0 100%, 9% 52%, 21% 66%, 33% 22%, 45% 56%, 55% 33%, 69% 70%, 82% 39%, 100% 100%); }
.land-one { left: -8%; }
.land-two { right: -28%; height: 94px; background: #3a8a72; }
.water-line { position: absolute; height: 4px; width: 74%; border-radius: 50%; background: #d6faf3a8; left: 14%; bottom: 27%; transform: rotate(-4deg); }
.water-line.two { bottom: 17%; width: 48%; left: 30%; }
.sail { position: absolute; right: 28%; bottom: 26%; color: #fff8e7; font-size: 53px; transform: rotate(2deg); }

.zones-section,
.events-section,
.sources-section { padding: 58px clamp(22px, 5vw, 72px); }
.zones-section { background: white; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.section-heading.compact { align-items: start; }
.section-heading h2 { margin: 0 0 7px; font: 700 clamp(34px, 4vw, 49px)/1 Georgia, serif; }
.section-heading p:not(.eyebrow) { max-width: 850px; margin: 0; color: #526879; line-height: 1.5; }
.zone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.zone-card {
  position: relative;
  min-height: 240px;
  padding: 23px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  text-align: left;
  color: white;
  border: 0;
  border-radius: 17px;
  isolation: isolate;
  transition: transform .2s, outline .2s;
}
.zone-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(155deg, transparent 15%, #082c4cd4); }
.zone-card::after { content: "≈≈≈"; position: absolute; top: 14px; right: -4px; z-index: -1; color: #ffffff2e; font: 58px/1 Georgia, serif; transform: rotate(-7deg); }
.zone-card:hover, .zone-card.selected { transform: translateY(-4px); outline: 4px solid var(--gold); }
.zone-card strong { font: 700 27px/1.05 Georgia, serif; }
.zone-card small { align-self: start; margin: 13px 0 9px; padding: 6px 9px; border-radius: 14px; background: #fffdf3; color: var(--teal); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.zone-card span { color: #f7f2e8; font-size: 13px; line-height: 1.42; }
.bridgewater { background: linear-gradient(140deg, #498c74, #235b5e); }
.lunenburg { background: linear-gradient(140deg, #168fa0, #174d73); }
.chester { background: linear-gradient(140deg, #a55c50, #6e3e4e); }
.liverpool { background: linear-gradient(140deg, #7374a7, #38537a); }

.events-section { background: #f7f2e9; scroll-margin-top: 10px; }
.text-button { border: 0; background: none; color: var(--teal); font-weight: 900; }
.filter-panel { display: grid; gap: 12px; margin-bottom: 27px; scroll-margin-top: 18px; }
.results-count { margin: 0; color: var(--teal); font-weight: 900; }
.filter-group { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; }
.filter-group > strong { padding-top: 9px; color: #5a6d79; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row button { padding: 8px 12px; border: 1px solid #d3c9bb; border-radius: 99px; background: #fffbf4; color: var(--navy); font-size: 13px; }
.filter-row button:hover, .filter-row button:focus-visible { border-color: var(--teal); outline: none; }
.filter-row button.selected { background: var(--teal); border-color: var(--teal); color: white; }
.type-row button.selected { background: var(--coral); border-color: var(--coral); }
.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.event-card { overflow: hidden; background: white; border-radius: 15px; box-shadow: 0 3px 11px #4d3f2910; }
.event-top { height: 74px; padding: 13px; display: flex; align-items: end; background: linear-gradient(135deg, #78b8ad, #286a6e); }
.event-top span { padding: 5px 9px; border-radius: 15px; background: #fffdf4; color: var(--teal); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.type-music { background: linear-gradient(135deg, #e3aa54, #bf6b58); }
.type-arts-and-culture { background: linear-gradient(135deg, #8c7db3, #4f5f91); }
.type-family { background: linear-gradient(135deg, #59b9b1, #318b91); }
.type-market { background: linear-gradient(135deg, #79a66d, #3c735f); }
.type-food-and-drink { background: linear-gradient(135deg, #d98866, #a84f53); }
.type-festival { background: linear-gradient(135deg, #e0a348, #cd5c52); }
.type-outdoors-and-sport { background: linear-gradient(135deg, #56a886, #387675); }
.type-class-or-workshop { background: linear-gradient(135deg, #748fbb, #566496); }
.event-content { padding: 19px; display: grid; grid-template-columns: 57px minmax(0, 1fr); gap: 15px; }
.date-box { height: 61px; border: 1px solid #ded4c5; border-radius: 8px; text-align: center; overflow: hidden; }
.date-box b { display: block; padding: 5px 2px; background: var(--coral); color: white; font-size: 9px; letter-spacing: .7px; }
.date-box strong { display: block; padding-top: 8px; font: 700 17px/1 Georgia, serif; }
.event-info .place { margin: 0 0 6px; color: #647583; font-size: 11px; line-height: 1.35; }
.event-info h3 { margin: 0 0 8px; font: 700 20px/1.12 Georgia, serif; }
.event-info .time { margin: 0; color: #294b60; font-size: 13px; font-weight: 800; line-height: 1.45; }
.event-note { margin: 8px 0 0; padding: 7px 8px; border-radius: 7px; background: #f2f7f3; color: #41605b; font-size: 11px; line-height: 1.4; }
.event-info small { display: block; margin-top: 11px; color: #77848d; font-size: 10px; }
.event-info a { display: inline-block; margin-top: 9px; color: var(--teal); font-size: 12px; font-weight: 900; }
.no-results { padding: 25px; border: 1px dashed #cbbfae; border-radius: 12px; text-align: center; }

.sources-section { background: white; }
.source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.source-card { padding: 15px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #e3dbcf; border-radius: 12px; background: #fffdf8; }
.source-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.source-card > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--mist); color: var(--teal); font-weight: 900; font-size: 12px; }
.source-card strong, .source-card small { display: block; }
.source-card strong { margin-bottom: 4px; font-size: 14px; }
.source-card small { color: #687987; font-size: 11px; line-height: 1.35; }
.source-card > b { color: var(--coral); }

.scope-section { padding: 58px clamp(24px, 7vw, 105px); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; background: #e8f3ef; }
.scope-section article { padding: 27px; border-radius: 16px; background: #ffffffb8; }
.scope-section article > span { color: var(--coral); font-weight: 900; }
.scope-section h2 { margin: 11px 0 8px; font: 700 28px/1.1 Georgia, serif; }
.scope-section p { margin: 0; color: #496476; line-height: 1.55; }
@media (max-width: 1050px) {
  .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-grid, .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header nav { display: none; }
  .language { margin-left: auto; }
}

@media (max-width: 760px) {
  .site-header { min-height: 86px; padding: 12px 18px; gap: 12px; }
  .brand { min-width: 0; font-size: 20px; }
  .brand small { max-width: 160px; font-size: 10px; }
  .brand-mark { width: 48px; height: 45px; transform: scale(.8); margin-left: -5px; }
  .language { padding: 8px 10px; font-size: 11px; }
  .hero { min-height: 0; padding: 54px 20px 45px; grid-template-columns: 1fr; }
  .hero h1 { font-size: 48px; letter-spacing: -1.7px; }
  .hero-text { font-size: 16px; }
  .hero-coast { min-height: 230px; }
  .search-panel { display: block; }
  .search-panel label { min-height: 55px; }
  .search-panel .button { width: 100%; border-radius: 0; }
  .zones-section, .events-section, .sources-section { padding: 44px 19px; }
  .zone-grid, .event-grid, .source-grid { grid-template-columns: 1fr; }
  .zone-card { min-height: 170px; }
  .section-heading { display: block; }
  .section-heading .text-button { margin-top: 14px; }
  .filter-group { grid-template-columns: 1fr; gap: 6px; }
  .filter-group > strong { padding: 0; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .filter-row button { white-space: nowrap; }
  .ferry-section { padding: 54px 20px; grid-template-columns: 1fr; gap: 28px; }
  .sailing-card { grid-template-columns: 1fr; }
  .ferry-arrow { transform: rotate(90deg); text-align: center; }
  .warning, .sailing-card > a { grid-column: auto; }
  .scope-section { padding: 42px 19px; grid-template-columns: 1fr; }
}



.policy-footer{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding:2.5rem max(5vw,1.25rem);background:#173f41;color:#fff;font-size:.95rem}
.policy-footer p{margin:.65rem 0;max-width:42rem}.policy-footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}.footer-brand{font-size:1.4rem;font-weight:700}.policy-footer nav{display:flex;flex-wrap:wrap;gap:.85rem 1.3rem;max-width:40rem}.policy-footer button{background:transparent;color:inherit;border:1px solid currentColor;border-radius:6px;padding:.45rem .8rem;cursor:pointer}

/* Reset the retired single-arrow footer link rules for the shared policy footer. */
.policy-footer a {margin-left:0;width:auto;height:auto;display:inline;border:0;border-radius:0;place-items:normal;}
.policy-footer > div {flex:1 1 280px;min-width:0;}
.policy-footer nav {flex:1 1 350px;align-items:flex-start;}
.policy-footer p {font-size:.95rem;line-height:1.6;}
.policy-footer .footer-brand {display:inline-block;}

.smurphy-badge {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 13px;
  border: 1px solid #ffffff26;
  border-radius: 8px;
  background: #092b35;
  color: #fff;
  box-shadow: 0 3px 14px #092b3533;
  font-size: 12px;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.smurphy-badge > span {color: #42e5d1; font-size: 23px; font-weight: 700;}
.smurphy-badge:hover {background: #164550;}
.smurphy-badge:focus-visible {outline: 3px solid #e7ad46; outline-offset: 3px;}
/* Keep both floating badges readable on narrow screens. */
@media (max-width: 480px) {
  .smurphy-badge {left: calc(12px + env(safe-area-inset-left)); bottom: calc(68px + env(safe-area-inset-bottom));}
}

/* Shared accessibility and component resets. */
[hidden] {display: none !important;}
.button {border: 0; text-decoration: none;}
.search-panel:focus-within {outline: 3px solid var(--gold); outline-offset: 3px;}
a:focus-visible, button:focus-visible {outline: 3px solid var(--gold); outline-offset: 3px;}
.policy-footer {padding-bottom: 100px;}
.policy-footer nav {margin-left: 0; gap: .85rem 1.3rem; font-weight: 400;}
.policy-footer nav a {padding: 0;}
.policy-footer .footer-brand {font: 700 1.4rem/1.2 Georgia, serif;}
.policy-footer p {color: #fff;}
@media(prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  *, *::before, *::after {transition: none !important;}
}

/* Reset inherited legacy NB decoration so the same markup renders identically. */
.brand-mark i, .brand-mark b {background: transparent; border-top: 0; border-radius: 0;}
.brand-mark i::before, .brand-mark i::after {display: none;}
.zone-card::after {inset: auto; top: 14px; right: -4px; left: auto; bottom: auto; background: none; opacity: 1;}
.zone-card span {font-family: Arial,Helvetica,sans-serif; font-weight: 400;}
.hero .sun {right: 15%; top: 20%;}
.smurphy-badge {font-family: Arial,Helvetica,sans-serif; font-weight: 600;}

/* Multi-month dates must remain readable on NS/NB cards. */
.date-box {height: auto; min-height: 61px; align-self: start;}
.date-box b {line-height: 1.25;}
.date-box strong {margin: 0; padding: 8px 2px;}