/* =========================================================================
   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 MENU ---------- */
.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);}

@media (max-width:960px){
  .nav-inner{position:relative;flex-wrap:wrap;}
  .menu-toggle{display:flex;align-items:center;justify-content:center;order:3;}

  /* FIXED TO THE VIEWPORT, NOT HUNG OFF THE HEADER.
     Three separate faults came from the old position:absolute inside a
     position:sticky nav, and each fix for one broke another:
       - it ran off the bottom with nothing to scroll;
       - capped by dvh it still overflowed in landscape, because the
         header's own height was not in the sum;
       - and the last item sat under Safari's translucent bottom
         toolbar, so it was visible but every tap hit browser chrome.
         That is why Find Us worked and My Account, directly below it,
         did not.

     top + bottom together give exactly the space left under the header
     with no arithmetic to get wrong, in either orientation. A few
     pixels of error in `top` is invisible, since the header behind it
     is white too. */
  .navlinks{
    display:none;flex-direction:column;gap:0;
    position:fixed;top:72px;left:0;right:0;bottom:0;
    box-sizing:border-box;
    background:#fff;
    z-index:60;
    padding:6px 28px;
    /* Clear of the home indicator AND of Safari's bottom toolbar, so
       the last item is never in the strip where taps do not reach the
       page. This is the actual My Account fix. */
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 76px);
    box-shadow:0 12px 24px rgba(35,38,32,0.14);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .navlinks.open{display:flex;}

  /* Compact, but each row is still a 44px target: 9px top and bottom
     around a ~26px line. */
  .navlinks a{
    padding:9px 0;width:100%;box-sizing:border-box;
    display:block;position:relative;line-height:1.45;
  }
  .navlinks a::after{display:none;}
  .navlinks .nav-mobile-account{display:block;}

  /* Styled as the button it repeats, not as another menu row, so it is
     recognisably the same action rather than a link that happens to be
     worded the same. Sits last: the end of a scrolling list is where a
     thumb already is. */
  .navlinks .nav-mobile-cta{
    display:inline-flex;align-items:center;justify-content:center;
    width:auto;align-self:flex-start;
    background:var(--brick);color:#fff;
    border-radius:24px;padding:12px 24px;margin:12px 0 4px;
    font-weight:600;
  }
  .navlinks .nav-mobile-cta:hover{background:var(--brick-bright);}

  .nav-play-menu{padding-left:12px;}

  /* The page behind must not move while the menu is open, or scrolling
     the menu drags the page and the two fight each other. :has() is the
     only way to do this without touching the per-page toggle script in
     all sixteen files. Where it is unsupported the menu still scrolls
     on its own -- the behaviour degrades, it does not break. */
  body:has(.navlinks.open){overflow:hidden;}
}

/* ---------- 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;
  }
}

/* Landscape phones: very little height, so tighter again. */
@media (max-width:960px) and (max-height:520px){
  .navlinks{top:64px;padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 64px);}
  .navlinks a{padding:7px 0;}
}

/* ---------- 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.
   ------------------------------------------------------------------- */
#wnpFabWrap{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-family:inherit;}
#wnpFabOptions{display:none;flex-direction:column;gap:8px;align-items:flex-end;}
#wnpFabWrap.open #wnpFabOptions{display:flex;}
.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;box-shadow:0 4px 14px rgba(35,38,32,.18);cursor:pointer;white-space:nowrap;text-align:right;}
.wnp-fab-option:hover{background:var(--sage);}
#wnpFabToggle{background:var(--green-dark);color:#fff;border:none;border-radius:100px;padding:14px 20px;font-weight:700;font-size:13.5px;font-family:inherit;box-shadow:0 4px 14px rgba(35,38,32,.28);cursor:pointer;}
#wnpFabToggle:hover{background:var(--green);}

#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.
   ========================================================================= */
.switchover{background:#FBF3EC;border-bottom:1px solid #E9D5C2;}
.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:15.5px;font-weight:700;color:var(--green-dark,#17452E);margin-bottom:4px;}
.switchover-text span{display:block;font-size:13.5px;line-height:1.55;color:var(--ink,#232620);}
.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(--brick,#8C1D22);color:#fff;}
.switchover-old{background:#fff;color:var(--green-dark,#17452E);border:1.5px solid var(--green-dark,#17452E);}
.switchover-close{background:none;border:none;color:var(--muted,#5b6b80);font-family:inherit;font-size:12.5px;cursor:pointer;padding:6px 8px;text-decoration:underline;}
.switchover-close:focus-visible{outline:2px solid var(--brick,#8C1D22);outline-offset:2px;border-radius:4px;}
@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;}
}
