/* =========================================================================
   wnp-nav.css  --  the site navigation, in one place.

   File location in your GitHub repo: the WNP repo root, beside
   wnp-lobbd.js. Linked from every page's <head> BEFORE its inline
   <style>, so a page can still override a rule locally if it genuinely
   needs to.

   WHY THIS EXISTS
   These rules were copied into all sixteen pages. A mobile menu bug
   therefore had to be fixed sixteen times, and a fix applied to fifteen
   of them looks identical to a fix applied to all of them. The blocks
   were verified byte-identical across every page before extraction, so
   moving them here changed nothing about how any page looks.

   Version this in the link tag (?v=...) and bump it on every change, the
   same way wnp-lobbd.js is versioned -- otherwise browsers hold a stale
   copy and the fix appears not to have worked.
   ========================================================================= */

/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:50;background:var(--white);box-shadow:0 1px 0 rgba(0,0,0,0.08);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1180px;margin:0 auto;gap:24px;}
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.logo img{height:38px;width:auto;display:block;}
.foot-logo img{height:34px;width:auto;display:block;margin-bottom:16px;filter:brightness(0) invert(1);}
.navlinks{display:flex;gap:24px;font-size:14px;font-weight:600;color:var(--green);flex-wrap:wrap;}
.navlinks a{position:relative;padding:4px 0;white-space:nowrap;}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--brick);transition:width .2s ease;}
.navlinks a:hover::after,.navlinks a.active::after{width:100%;}
.navlinks a.active{color:var(--brick);}
.nav-play-dropdown{position:relative;}
.nav-play-dropdown>a{display:inline-flex;align-items:center;gap:4px;}
.nav-play-dropdown .caret{width:9px;height:9px;transition:transform .15s ease;}
.nav-play-dropdown.open .caret{transform:rotate(180deg);}
.nav-play-menu{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border-radius:12px;box-shadow:0 12px 28px rgba(35,38,32,0.16);padding:8px;min-width:170px;display:none;z-index:70;}
.nav-play-menu.open{display:block;}
.nav-play-menu a{display:block;padding:10px 14px;font-size:14px;font-weight:600;color:var(--green-dark);border-radius:8px;white-space:nowrap;}
.nav-play-menu a:hover{background:var(--sage);}
@media (max-width:960px){.nav-play-menu{position:static;box-shadow:none;display:block;padding:0 0 0 16px;}.nav-play-dropdown .caret{display:none;}}
.nav-cta{background:var(--brick);color:#fff;padding:11px 22px;font-weight:600;font-size:14px;border-radius:24px;flex:0 0 auto;}
.nav-account-wrap{position:relative;flex:0 0 auto;}
.nav-account-icon{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--green);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.nav-account-icon:hover,.nav-account-icon[aria-expanded="true"]{background:var(--sage);}
.nav-account-icon svg{width:18px;height:18px;stroke:var(--green-dark);}
.nav-account-dropdown{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border-radius:12px;box-shadow:0 12px 28px rgba(35,38,32,0.16);padding:8px;min-width:170px;display:none;z-index:70;}
.nav-account-dropdown.open{display:block;}
.nav-account-dropdown a{display:block;padding:10px 14px;font-size:14px;font-weight:600;color:var(--green-dark);border-radius:8px;}
.nav-account-dropdown a:hover{background:var(--sage);}
.nav-mobile-account{display:none;}

/* Book a session, repeated inside the mobile menu.
   The red button in the bar is easy to miss on a phone, and somebody
   who has opened the menu is reading THAT list -- an action missing
   from the list they are looking at reads as an action that is not
   available.
   Carries .nav-mobile-account as well, deliberately: that class already
   hides on desktop and shows inside the open menu, so a browser holding
   a stale copy of this file still gets a working plain link rather than
   a stray "Book a session" sitting next to the red button. */
.nav-mobile-cta{display:none;}
@media (max-width:960px){.nav-account-wrap{display:none;}}
/* The account icon, in the bar rather than behind the menu.
   Sized to 40px so it clears the 24px minimum target and
   matches the desktop icon it replaces. */
.nav-account-mobile{display:none;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--green);align-items:center;justify-content:center;
  flex:0 0 auto;padding:0;text-decoration:none;}
.nav-account-mobile svg{width:18px;height:18px;stroke:var(--green-dark);fill:none;stroke-width:2;}
@media (max-width:960px){
  /* Ordered so the logo stays first, then account, then the
     booking button, then the menu toggle at order:3. */
  .nav-account-mobile{display:flex;order:1;margin-left:auto;}
  .nav-cta{order:2;margin-left:8px;}
}
.nav-cta:hover{background:var(--brick-bright);}

/* ---------- MOBILE / TABLET NAVIGATION ----------
   The desktop mega-menu is not reused here. Below the breakpoint it is
   hidden outright and wnp-mobile-nav.js builds a proper drawer instead.

   The old rules turned .navlinks into a full-screen panel, which is how
   four columns of small text ended up on a phone. */

.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:8px;}
.menu-toggle svg{width:26px;height:26px;stroke:var(--green-dark);}

/* 1000px, not 768. Four columns need room the moment a tablet turns
   portrait, so the mega-menu goes well before phone width. Kept in step
   with BREAKPOINT in wnp-mobile-nav.js. */
@media (max-width:999px){
  .navlinks{display:none !important;}
  .menu-toggle{display:flex;align-items:center;justify-content:center;order:4;}
  .nav-inner{flex-wrap:nowrap;gap:6px;}

  /* Logo | account | Book now | hamburger, and nothing else. */
  .nav-cta{order:3;padding:9px 14px;font-size:14px;white-space:nowrap;}
  .nav-acct{order:2;}
  .logo{order:1;flex:1 1 auto;min-width:0;}
  .logo img{max-width:100%;}
}

/* ---------- THE DRAWER ---------- */

.mnav[hidden]{display:none;}
.mnav{position:fixed;inset:0;z-index:200;}

.mnav-scrim{position:absolute;inset:0;background:rgba(35,38,32,.42);}

/* Most of the width, full height, and it scrolls. */
.mnav-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,100%);
  display:flex;flex-direction:column;
  background:#fff;
  box-shadow:-8px 0 32px rgba(35,38,32,.18);
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* Clear of the home indicator and Safari's bottom toolbar, so the
     last link is never in the strip where taps do not reach the page. */
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 32px);
}

.mnav-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--line,#E6E7E3);
}

.mnav-title{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5B6259);}

.mnav-close{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;
  border:none;background:none;cursor:pointer;color:var(--green-dark,#0A4A28);
}
.mnav-close svg{width:24px;height:24px;}

/* Two actions, once, at the top. */
.mnav-cta{display:flex;flex-direction:column;gap:10px;padding:18px 20px;}

.mnav-book,.mnav-acct{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:600;text-decoration:none;
}

.mnav-book{background:var(--brick,#931B24);color:#fff;border:none;}
.mnav-book:hover{background:var(--brick-bright,#B32530);}

.mnav-acct{background:#fff;color:var(--green-dark,#0A4A28);border:1.5px solid var(--green-dark,#0A4A28);}
.mnav-acct:hover{background:var(--sage,#EFF3EE);}

.mnav-secs{padding:0 20px 24px;}

.mnav-sec{border-top:1px solid var(--line,#E6E7E3);}
.mnav-sec:first-child{border-top:none;}

.mnav-h{margin:0;}

/* A whole-row target, comfortably over 44px. */
.mnav-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:56px;padding:0;
  border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:17px;font-weight:600;
  color:var(--green-dark,#0A4A28);text-align:left;
}

.mnav-chev{width:20px;height:20px;flex:0 0 auto;transition:transform .18s ease;}
.mnav-sec-open .mnav-chev{transform:rotate(180deg);}

/* Children indented and lighter, so a section heading still reads as
   the heading once its links are showing. */
.mnav-links{display:flex;flex-direction:column;padding:0 0 10px 14px;}
.mnav-links[hidden]{display:none;}

.mnav-links a{
  display:flex;align-items:center;min-height:46px;
  font-size:15.5px;font-weight:400;
  color:var(--ink,#232620);text-decoration:none;
}

.mnav-links a:hover{color:var(--green-dark,#0A4A28);}
.mnav-links a[aria-current="page"]{font-weight:600;color:var(--green-dark,#0A4A28);}

.mnav-toggle:focus-visible,
.mnav-close:focus-visible,
.mnav-links a:focus-visible,
.mnav-book:focus-visible,
.mnav-acct:focus-visible{outline:3px solid var(--gold,#E8D9A8);outline-offset:2px;}

/* The page behind must not scroll while the drawer is open. */
html.mnav-locked,html.mnav-locked body{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .mnav-chev{transition:none;}
}

/* Above the breakpoint the drawer does not exist and the mega-menu is
   untouched. */
@media (min-width:1000px){
  .mnav{display:none;}
}

/* ---------- iOS INPUT ZOOM ---------- */
/* Safari on iOS zooms the whole page in when a focused input has a
   font-size below 16px, then leaves it zoomed. On a phone that means
   tapping the email field on sign-in throws the layout sideways, and
   the member has to pinch back out mid-form. It affects every form
   that matters: sign-in, the booking search, the household builder,
   gift vouchers, and the schools and experiences enquiries.

   16px is the threshold, not a preference -- 15.5px still triggers it.

   !important is deliberate and is the whole reason this rule can live
   here. Page rules use class selectors (.hh-field input, .gv-field
   input), which outrank a bare element selector no matter what order
   the files load in. Without it this rule would lose on every page and
   the alternative is editing sixteen files and remembering the
   seventeenth.

   Scoped to the mobile breakpoint so the desktop type scale, where the
   problem does not exist, is untouched. Checkboxes and radios are
   excluded: they have no text, and resizing them moves the tick.
   Larger text also makes these targets easier to hit, which is worth
   having on its own. */
@media (max-width:960px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{
    font-size:16px !important;
  }
}

/* ---------- FLOATING MENU: Suggest an idea / Get in touch ----------
   Injected by wnp-lobbd.js on every page that loads it, not written
   into each page's own HTML -- one implementation, everywhere, rather
   than the same widget copied and slowly drifting the way the nav
   itself used to before it moved here. Class names are wnp-fab-*
   specifically so this cannot collide with a page's own existing
   classes (many of these pages already have their own .card, for
   instance) -- this runs on pages this stylesheet does not control
   the rest of the markup for.
   ------------------------------------------------------------------- */
/* ── The floating Ask Pickle button ───────────────────────────────────
   One green pill and a line of small print, not a stack of five. Kate,
   13 Sep 2026: "those four white pills plus the large green pill take
   up a surprisingly large amount of the page. One confident green Ask
   Pickle button with a tiny secondary menu would look much more
   deliberate." */
#wnpFabWrap{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-family:inherit;}
#wnpFabToggle{display:inline-flex;align-items:center;gap:9px;background:var(--green-dark);color:#fff;
  border:none;border-radius:100px;padding:14px 24px;font-weight:700;font-size:14.5px;font-family:inherit;
  letter-spacing:.2px;box-shadow:0 6px 20px rgba(35,38,32,.30);cursor:pointer;}
#wnpFabToggle:hover{background:var(--green);}
#wnpFabToggle:focus-visible{outline:3px solid var(--green);outline-offset:3px;}
.wnp-fab-spark{flex:0 0 auto;opacity:.9;}

/* Quiet on purpose: present, findable, and never competing with the
   button above them. */
#wnpFabSecondary{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);
  border-radius:100px;padding:0 12px;box-shadow:0 2px 10px rgba(35,38,32,.14);}
/* A BIGGER TARGET THAN IT LOOKS. These were 21px tall -- under even the
   24px minimum a touch target is meant to be, and genuinely fiddly on a
   phone. The padding makes each one 45px to a fingertip; the negative
   margin pulls the row back to the small, quiet thing it is supposed to
   be. Both at once, rather than choosing between the two. */
.wnp-fab-quiet{background:none;border:none;padding:12px 6px;margin:-9px 0;font-family:inherit;
  font-size:11.5px;font-weight:600;color:var(--green-dark);cursor:pointer;white-space:nowrap;}
.wnp-fab-quiet:hover{text-decoration:underline;}
.wnp-fab-dot{color:var(--muted,#5B6259);font-size:11.5px;}

/* Still used, but only INSIDE a panel now -- Sign in on the ideas
   board, and its Submit button. It was the floating-pill style; nothing
   floats in it any more. */
.wnp-fab-option{background:#fff;color:var(--green-dark);border:1.5px solid var(--green);
  border-radius:100px;padding:11px 18px;font-weight:600;font-size:13.5px;font-family:inherit;
  cursor:pointer;text-decoration:none;}
.wnp-fab-option:hover{background:var(--sage);}

/* The three choices inside Feedback & reviews. A heading and a line of
   explanation each, because "Leave feedback" and "Suggest an idea" are
   a distinction somebody should not have to work out for themselves. */
.wnp-fab-choice{display:block;width:100%;text-align:left;margin-top:8px;padding:12px 14px;
  border:1.5px solid var(--green);border-radius:12px;background:#fff;font-family:inherit;
  cursor:pointer;text-decoration:none;color:inherit;}
.wnp-fab-choice:hover{background:var(--sage);}
.wnp-fab-choice b{display:block;font-size:14.5px;color:var(--green-dark);}
.wnp-fab-choice span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;
  color:var(--muted,#5B6259);}

@media (max-width:520px){
  #wnpFabToggle{padding:13px 20px;font-size:14px;}
  .wnp-fab-quiet{font-size:11px;}
}

#wnpFabOverlay{display:none;position:fixed;inset:0;z-index:9001;background:rgba(20,30,25,.55);padding:16px;overflow-y:auto;}
#wnpFabOverlay.open{display:flex;align-items:flex-start;justify-content:center;}
.wnp-fab-card{background:#fff;border-radius:14px;max-width:480px;width:100%;padding:20px;margin-top:24px;font-family:inherit;color:var(--ink,#232620);}
.wnp-fab-card h2{font-size:17px;margin:0 0 4px;color:var(--green-dark);}
.wnp-fab-card p{font-size:13px;color:var(--muted,#5B6259);line-height:1.5;}
.wnp-fi-idea{border:1px solid rgba(35,38,32,0.1);border-radius:10px;padding:11px 12px;margin-bottom:8px;}
.wnp-fi-vote-btn{border:1.5px solid var(--green-dark);background:#fff;color:var(--green-dark);border-radius:8px;padding:5px 9px;font-weight:800;font-size:12px;cursor:pointer;min-width:40px;text-align:center;font-family:inherit;}
.wnp-fi-vote-btn.voted{background:var(--green-dark);color:#fff;}
.wnp-fi-status{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle;}
.wnp-contact-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid rgba(35,38,32,0.1);}
.wnp-contact-row:first-of-type{border-top:none;}
.wnp-contact-row a{color:var(--green-dark);font-weight:600;}


/* =========================================================================
   FOOTER

   Here for exactly the reason the nav rules are: the markup was on every
   page and the styling was not. play-for-life-70.html and start.html
   carried a full footer with no rules behind it at all -- transparent
   background, the four columns stacked as blocks, and the social icons
   rendering at their intrinsic size, which on a phone is a 375px black
   square. Every page built from that one inherited it.

   The variables are declared with fallbacks because not every page
   defines --gold; a footer link on a page without it would otherwise
   have no hover colour at all.
   ========================================================================= */

footer{background:var(--ink,#232620);color:rgba(255,255,255,0.75);padding:60px 32px 30px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;max-width:1180px;margin:0 auto;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.14);}
.foot-grid h4{font-size:13px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#fff;margin-bottom:14px;}
.foot-grid p, .foot-grid a{font-size:13.5px;line-height:1.8;display:block;color:rgba(255,255,255,0.72);}
.foot-grid a:hover{color:var(--gold,#E8D9A8);}
.foot-bottom{max-width:1180px;margin:0 auto;padding-top:22px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,0.5);flex-wrap:wrap;gap:12px;align-items:center;}
.powered{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.15);padding:5px 12px;border-radius:100px;}
.powered b{color:rgba(255,255,255,0.85);font-weight:700;}

.foot-social{display:flex;gap:10px;margin-top:18px;}
.foot-social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;transition:background .15s ease;flex:0 0 auto;}
.foot-social a:hover{background:rgba(255,255,255,0.16);}
/* Sized explicitly rather than left to the SVG's own dimensions. An
   unstyled icon here is what produced the full-width black square. */
.foot-social svg{width:17px;height:17px;fill:rgba(255,255,255,0.8);flex:0 0 auto;}
.foot-social a:hover svg{fill:var(--gold,#E8D9A8);}
.lobbd-note{font-size:12px;color:rgba(255,255,255,0.5);max-width:560px;margin:12px 0 0;line-height:1.55;}
.lobbd-note a{color:rgba(255,255,255,0.8);}
.lobbd-note a:hover{color:var(--gold,#E8D9A8);}
.foot-legal{max-width:1180px;margin:0 auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:16px;font-size:12px;}
.foot-legal a{color:rgba(255,255,255,0.5);}
.foot-legal a:hover{color:var(--gold,#E8D9A8);}

/* Tablet: four columns is too many long before the phone breakpoint. */
@media (max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
}
@media (max-width:560px){
  footer{padding:44px 20px 26px;}
  .foot-grid{grid-template-columns:1fr;gap:24px;padding-bottom:26px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:10px;}
}


/* -------------------------------------------------------------------------
   PHONE HEADER, ON ONE ROW

   At 375px the bar needed 449px: 313px of logo, icon and button, plus 72
   of gap and 64 of padding. The menu button wrapped onto a second row,
   which pushed the page down by 64px on every phone and left the bar
   looking broken above the fold.

   Trimmed rather than rebuilt: 16px of padding a side instead of 32, an
   8px gap instead of 24, and a slightly smaller logo. That is 332px in a
   375px viewport, with room to spare on a 360.

   flex-wrap stays ON. The open mobile menu is a wrapped row that fills
   the width below the bar, so turning wrapping off would fold the whole
   menu back onto the same line as the logo.
   ------------------------------------------------------------------------- */
@media (max-width:560px){
  .nav-inner{padding:12px 16px;gap:8px;}
  .logo img{height:32px;}
  /* Pushes the icon, the button and the menu to the right edge together,
     instead of relying on space-between to share out gaps it cannot. */
  .nav-account-mobile{margin-left:auto;}
}
@media (max-width:380px){
  .nav-cta{padding:9px 14px;font-size:13px;}
}


/* -------------------------------------------------------------------------
   BREADCRUMBS

   Static markup rather than injected, and paired with BreadcrumbList
   structured data in each page: a trail a search engine only sees after
   JavaScript has run is worth much less than one already in the HTML.

   Sits between the nav and the hero, quiet enough not to compete with it.
   ------------------------------------------------------------------------- */
.crumbs{background:var(--sage,#F1F4EE);border-bottom:1px solid rgba(35,38,32,0.07);position:static;box-shadow:none;}
.crumbs-inner{max-width:1180px;margin:0 auto;padding:9px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12.5px;line-height:1.5;}
.crumbs a{color:var(--green-dark,#17452E);font-weight:600;text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.crumbs span[aria-hidden]{color:var(--muted,#5b6b80);}
.crumbs span[aria-current]{color:var(--muted,#5b6b80);font-weight:600;}
@media (max-width:560px){ .crumbs-inner{padding:8px 16px;font-size:12px;gap:6px;} }


/* =========================================================================
   DROPDOWNS, EASIER TO OPEN

   The only way to open a menu was to click the caret: a 9px SVG inside
   the link. Miss it by two pixels and you navigated away instead, which
   on a menu of six sections is a lot of accidental page loads.

   Three changes, in order of how much they help:

   1. On a real pointer the menu opens on HOVER. No click, no aim.
   2. It also opens on focus-within, so tabbing through the header
      reaches the items instead of skipping past them.
   3. The caret keeps a much larger hit area for anyone who does click.

   Guarded on (hover:hover) and (pointer:fine) so a touch device -- where
   a hover state can stick until you tap elsewhere -- keeps the tap
   behaviour it already had.
   ========================================================================= */

@media (hover:hover) and (pointer:fine) and (min-width:961px){
  .nav-play-dropdown:hover > .nav-play-menu,
  .nav-play-dropdown:focus-within > .nav-play-menu{display:block;}
  .nav-play-dropdown:hover .caret{transform:rotate(180deg);}

  /* The menu sits 10px below the link, and crossing that gap used to
     close it before the pointer arrived. This bridges the gap without
     moving the menu. */
  .nav-play-menu::before{
    content:"";position:absolute;left:0;right:0;top:-12px;height:12px;
  }
}

/* A hit area worth aiming at, on every device. The caret still looks
   9px; it is the padding that catches the click. */
.nav-play-dropdown .caret{
  width:9px;height:9px;box-sizing:content-box;padding:10px 8px;margin:-10px -4px;
}

/* Keyboard users need to see where they are. */
.nav-play-menu a:focus-visible,
.nav-play-dropdown > a:focus-visible{outline:2px solid var(--brick,#8C1D22);outline-offset:2px;border-radius:6px;}


/* =========================================================================
   SWITCHOVER NOTICE

   Sits under the nav on the homepage while the club moves off its old
   website. Two facts, both of which people arrive not knowing: every
   login has to be created again, and the bookings they already made are
   on the old site.

   Dismissible, and the choice is remembered -- a regular who has read it
   twice does not need it a third time. Stored per browser, so it can
   never affect anybody's account.
   ========================================================================= */
/* The class name is historical -- this began as the website-move
   notice. It is now the notice bar wnp-notice.js builds, and nothing
   else on the site uses these rules.

   WARM SAND WITH A GREEN EDGE. Two earlier versions were wrong. Cream
   with a hairline border read as decoration and got scrolled past. A
   solid brick fill was worse: on the home page it stacked a red slab
   directly above a hero whose gradient also starts brick, with the
   brick Book now button caught between them -- three red things
   touching, and the bar lost its edges into the hero.

   Sand is warm enough to read as a notice rather than as page
   furniture, and the green edge and green button give the bar its own
   identity instead of competing with Book now a centimetre above it.
   Green also cannot collide with the brick corner of the hero.

   Contrast, measured rather than assumed, all on #F4EFE2:
   heading 9.5:1, body 9.6:1, dismiss 6.7:1, white on the green
   button 6.8:1. */
.switchover{background:#F4EFE2;border-top:3px solid var(--green,#0F6939);
  border-bottom:1px solid #E3DAC6;}
.switchover-inner{max-width:1180px;margin:0 auto;padding:18px 32px;display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;}
.switchover-text{flex:1 1 340px;min-width:0;}
.switchover-text b{display:block;font-size:17px;font-weight:700;color:var(--green-dark,#17452E);margin-bottom:5px;letter-spacing:-0.01em;}
.switchover-text span{display:block;font-size:13.5px;line-height:1.55;color:#3A3D36;}
.switchover-text strong{color:var(--green-dark,#17452E);font-weight:700;}
.switchover-actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto;}
.switchover-actions a{display:inline-block;padding:10px 18px;border-radius:999px;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;}
.switchover-go{background:var(--green,#0F6939);color:#fff;}
.switchover-old{background:transparent;color:var(--green-dark,#17452E);border:1.5px solid var(--green-dark,#17452E);}
/* Darker than the site's usual muted grey, which only just cleared AA
   on this background. */
.switchover-close{background:none;border:none;color:#4E5647;font-family:inherit;font-size:12.5px;cursor:pointer;padding:6px 8px;text-decoration:underline;}
.switchover-close:focus-visible{outline:2px solid var(--green-dark,#17452E);outline-offset:2px;border-radius:4px;}
.switchover-actions a:focus-visible{outline:2px solid var(--green-dark,#17452E);outline-offset:2px;}
@media (max-width:560px){
  .switchover-inner{padding:14px 16px;gap:12px;}
  .switchover-actions{width:100%;}
  .switchover-actions a{flex:1 1 auto;text-align:center;}
}

/* ---------- READ MORE ----------
   Long copy folded on small screens so the thing somebody came to do is
   not several screens down. Paired with wnp-readmore.js, which only
   adds the control where the text genuinely overflows. */

.wnp-rm-closed{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.wnp-rm-btn{
  display:inline-flex;align-items:center;
  min-height:44px;
  margin:2px 0 8px;
  padding:0;
  border:none;background:none;
  font-family:inherit;font-size:14px;font-weight:600;
  color:var(--green-dark,#0A4A28);
  text-decoration:underline;
  cursor:pointer;
}

.wnp-rm-btn:focus-visible{outline:3px solid var(--gold,#E8D9A8);outline-offset:2px;}

/* Nothing to fold on a wide screen: there is room, and hiding copy from
   somebody who can see all of it is just a barrier. */
@media (min-width:1000px){
  .wnp-rm-closed{display:block;-webkit-line-clamp:none;overflow:visible;}
  .wnp-rm-btn{display:none;}
}
