/* Fixed Menu button + full-screen overlay menu, shared across every
   Bootstrap-template page -- replaces the old Bootstrap navbar-toggler/
   navbar-collapse below 992px on ALL of them entirely (its own hamburger
   still opened, but the dropdown-toggle links inside had no
   data-bs-toggle="dropdown", so "Gallery"/"About"/etc navigated away
   instead of expanding, making everything inside those dropdowns
   unreachable on a phone). Below, hide Bootstrap's own toggler/collapse
   everywhere -- the fixed button + overlay (js/nav-drawer.js) is the
   only mobile nav now, on every page including white-pool-fence.html. */
.navbar-toggler{display:none!important}
@media (max-width:991.98px){.navbar-collapse{display:none!important}}

/* Below the navbar-collapse breakpoint the navbar is just a logo row
   with nothing to its right any more (nav links/toggler both gone,
   replaced entirely by the fixed Menu button) -- a solid bar there
   reads as its own separate strip sitting above the page, especially
   once the fixed button (top:20px) sits close to it. Transparent lets
   the page's own background show through instead, so it reads as part
   of the page, not a second bar. Bootstrap's own utility-bar is already
   d-none below lg (Bootstrap's own class, not this file's doing) so
   there's nothing else stacked above it to also hide here. */
@media (max-width:991.98px){
  .navbar{background:transparent!important;border-bottom:0!important}
  /* style.css's own mobile rule absolutely-positions and centres
     .brand-lockup, to balance it against the hamburger button sitting
     to its left -- that button is gone now (hidden above, replaced by
     the fixed Menu button), so there's nothing left to balance against
     and the logo should just sit at the left edge like a normal navbar
     brand. The old rule's fixed top:1.5rem + overflow:hidden combo is
     also why the logo was clipping: it was pinned to a height the
     navbar was never actually resized to contain. Static positioning
     lets the navbar's own height simply grow to fit its content, same
     as any other flex row. */
  .navbar .brand-lockup{position:static;left:auto;top:auto;transform:none;
    max-width:none;overflow:visible}
  .navbar>.container-fluid{padding-top:.6rem;padding-bottom:.6rem}
  /* white-pool-fence.html's own "Australian Made" claim bar (.pp-top,
     defined in site.css) -- scoped here rather than in site.css itself
     since .pp-top is shared with the actual home page (index.html),
     which never loads this file and must stay untouched. The 20
     Bootstrap pages' equivalent (.utility-bar) is already Bootstrap's
     own d-none d-lg-block, hidden below lg by default -- .pp-top has no
     such built-in responsive class of its own. */
  .pp-top{display:none}
  /* white-pool-fence.html only (body.pp) -- this page is closer in
     spirit to the actual home page (a cinematic landing page) than the
     20 real content pages, so on mobile it drops the navbar/logo row
     entirely rather than just recolouring it, leaving only the fixed
     Menu button as this page's own nav chrome. */
  body.pp header{display:none}
}

/* Fixed top-right Menu button, same visual language as the home page's
   .pp-menu-btn (3-bar icon that morphs into an X, "Menu"/"Close" label)
   but using this site's own --poolperf-* palette instead of the home
   page's --pp-* one. Always in the DOM on every page; JS shows it once
   the navbar has scrolled out of view (mobile: essentially always,
   since the collapsed navbar-collapse never gives room for a visible
   nav anyway; desktop: only after scrolling the full navbar off-screen
   -- see nav-drawer.js). */
/* Base rule, copied from the home page's .pp-menu-btn (css/site.css) --
   its own file layers a later "no pill, bigger Menu" override on top of
   this same base (site.css's own comment: "Everything in this block is
   an override of something above it, so the original rule is still
   readable"), reproduced immediately below in the same order, so this
   ends up at the real final appearance instead of the pre-override one. */
/* Below the quick-contact panel's own stack (1050-1061) while closed --
   otherwise it floats above that panel when it's opened some other way
   than through this menu. But once this drawer itself is open (z-index
   1075), the button needs to sit above its own overlay again, since
   it's still the control that closes it. */
.nd-menu-btn{position:fixed;z-index:1045;top:clamp(46px,5vw,64px);
  right:calc(16px + var(--pp-scrollbar-w,0px));
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--poolperf-secondary);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:11px 17px;font:800 10.5px/1 Montserrat,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;font-family:inherit;
  box-shadow:0 6px 26px rgba(0,0,0,.35);
  transition:background .3s,border-color .3s,color .3s,opacity .25s,visibility .25s;
  opacity:0;visibility:hidden;pointer-events:none}
.nd-menu-btn.show{opacity:1;visibility:visible;pointer-events:auto}
.nd-menu-btn:hover,.nd-menu-btn:focus-visible{background:var(--poolperf-primary);color:#04222c;
  border-color:var(--poolperf-primary)}
.nd-menu-btn i{display:block;width:15px;height:9px;position:relative;flex:none}
.nd-menu-btn i::before,.nd-menu-btn i::after{content:"";position:absolute;left:0;right:0;
  height:2px;background:currentColor;transition:transform .3s}
.nd-menu-btn i::before{top:0}.nd-menu-btn i::after{bottom:0}
.nd-menu-btn i .mid{position:absolute;left:0;right:0;top:3.5px;height:2px;
  background:currentColor;transition:opacity .3s}
.nd-menu-btn[aria-expanded="true"]{z-index:1080}
.nd-menu-btn[aria-expanded="true"] i .mid{opacity:0}
.nd-menu-btn[aria-expanded="true"] i::before{transform:translateY(3.5px) rotate(45deg)}
.nd-menu-btn[aria-expanded="true"] i::after{transform:translateY(-3.5px) rotate(-45deg)}

/* Later override, copied verbatim from site.css's "v11 — Jason's
   review" block, section 2 ("Menu and Sound: no pill, bigger Menu") --
   this is the button's real, final appearance on the home page: no
   pill, no border, no shadow, bigger icon, text-shadow instead of a
   solid background (needed there because the button sits over a photo/
   video background; kept here for a faithful copy, harmless over this
   navbar's plain background). */
.nd-menu-btn{background:none;border:0;box-shadow:none;border-radius:0;
  padding:6px 2px;text-shadow:0 1px 10px rgba(0,0,0,.75),0 2px 26px rgba(0,0,0,.6);
  color:#fff;
  font-size:14px;letter-spacing:.16em;gap:12px}
/* text-shadow only paints actual text glyphs -- the 3-bar icon is drawn
   with background:currentColor on plain elements (::before/::after/
   .mid), not text, so it needs its own equivalent via filter:drop-
   shadow(), matching the same values so both halves of the button read
   as one shadow. */
.nd-menu-btn i{filter:drop-shadow(0 1px 10px rgba(0,0,0,.75)) drop-shadow(0 2px 26px rgba(0,0,0,.6))}
/* On the light Bootstrap navbar, white text/icon has no contrast --
   navy while closed (visible against the light navbar/page behind it),
   switching to white once the full-screen dark overlay is open. Not
   scoped this way on white-pool-fence.html (body.pp): that page is dark
   everywhere, so white stays correct the whole time regardless of
   aria-expanded. */
body:not(.pp) .nd-menu-btn{color:var(--poolperf-primary);text-shadow:none}
body:not(.pp) .nd-menu-btn i{filter:none}
body:not(.pp) .nd-menu-btn[aria-expanded="true"]{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.75),0 2px 26px rgba(0,0,0,.6)}
body:not(.pp) .nd-menu-btn[aria-expanded="true"] i{filter:drop-shadow(0 1px 10px rgba(0,0,0,.75)) drop-shadow(0 2px 26px rgba(0,0,0,.6))}
.nd-menu-btn i{width:20px;height:12px}
.nd-menu-btn i::before,.nd-menu-btn i::after,.nd-menu-btn i .mid{height:2px}
.nd-menu-btn i .mid{top:5px}
.nd-menu-btn[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.nd-menu-btn[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}
.nd-menu-btn:hover,.nd-menu-btn:focus-visible{background:none;color:var(--poolperf-primary);border-color:transparent}
/* Resting colour is already --poolperf-primary while closed (below), so
   the rule above would be invisible on hover in that state -- darken to
   the site's own established --poolperf-primary hover shade instead
   (same value .btn-primary already hovers to). Once open, hover still
   goes to the plain --poolperf-primary as the rule above intends,
   distinct from the open state's white. */
body:not(.pp) .nd-menu-btn:not([aria-expanded="true"]):hover,
body:not(.pp) .nd-menu-btn:not([aria-expanded="true"]):focus-visible{color:#009aa5}
/* Fixed at a constant, closer-to-the-edge top on mobile -- the navbar
   goes transparent there instead (below), so there's no risk of the
   button colliding with navbar content the way there would be at the
   home page's own clamp(46px,5vw,64px). */
@media(max-width:991.98px){.nd-menu-btn{top:20px}}
@media(max-width:430px){.nd-menu-btn{top:20px;font-size:12.5px;padding:6px 2px}}
@media(min-width:821px){
  .nd-menu-btn{font-size:19px;letter-spacing:.14em;gap:14px;padding:9px 4px}
  .nd-menu-btn i{width:27px;height:16px}
  .nd-menu-btn i::before,.nd-menu-btn i::after,.nd-menu-btn i .mid{height:2px}
  .nd-menu-btn i .mid{top:7px}
  .nd-menu-btn[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
  .nd-menu-btn[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- scrim ---------- */
.nd-scrim{position:fixed;inset:0;height:100vh;height:100dvh;background:rgba(3,18,33,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:1070}
.nd-scrim.show{opacity:1;pointer-events:auto}

/* ---------- full-screen overlay menu ----------
   Verbatim copy of the home page's .pp-m4 (css/site.css), renamed
   .nd-*, property for property -- including the logo/kicker rules,
   which the first attempt at this left out entirely. Its colours use
   var(--pp-teal,#00b9c6) etc with a literal fallback already baked in,
   so the copy works correctly even without any --pp-* variable defined
   on these pages. The real .pp-m4__list is 4 FLAT links (icon, label,
   description, arrow) -- no accordion, no expand/collapse. Copied that
   way here too: 6 flat .nd-row links replacing the 4, same markup
   shape each, nothing nested. Icons intentionally not reproduced per
   item -- not part of this pass, .nd-ico is left empty/unstyled. */
.nd-drawer{position:fixed;inset:0;z-index:1075;overflow-y:auto;
  height:100vh;height:100dvh;
  background:var(--pp-black,#001a2b);
  padding:clamp(96px,12vh,132px) clamp(20px,5vw,48px) clamp(40px,7vh,72px);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.nd-drawer.open{opacity:1;visibility:visible}
/* Plain `center` overflows equally out of BOTH ends once the content is
   taller than the drawer, which puts the footer past the bottom edge with
   no way to scroll to it. Edge on iOS hits this and Safari doesn't, purely
   because Edge's bottom toolbar leaves 119px less room for the same
   content. `safe center` centres while it fits and falls back to
   flex-start when it doesn't, so nothing is ever unreachable. */
.nd-drawer__in{width:100%;max-width:1080px;margin:0 auto;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  justify-content:safe center;gap:clamp(18px,2.8vh,30px)}


/* ---------- the mark ---------- */
.nd-logo{display:block;width:min(690px,82vw);height:auto;margin:0 auto}
@media(max-width:640px){ .nd-logo{width:min(690px,80vw)} }
@media(min-width:641px) and (max-height:820px){ .nd-logo{width:min(560px,78vw)} }
@media(min-width:641px) and (max-height:700px){ .nd-logo{width:min(470px,72vw)} }

/* ---------- the eyebrow ---------- */
.nd-kicker{margin:0;text-align:center;
  font:800 11px/1 Montserrat,sans-serif;letter-spacing:.32em;text-transform:uppercase;
  color:var(--pp-teal,#00b9c6)}
@media(max-width:430px){ .nd-kicker{font-size:9.5px;letter-spacing:.24em} }

/* ---------- the rows ---------- */
.nd-drawer__body{display:flex;flex-direction:column;
  border-top:1px solid var(--pp-line,rgba(255,255,255,.11))}
.nd-drawer__body a{display:flex;align-items:center;gap:clamp(16px,2vw,26px);
  padding:clamp(16px,2.2vh,24px) clamp(4px,1.4vw,18px);
  border-bottom:1px solid var(--pp-line,rgba(255,255,255,.11));
  color:#fff;text-decoration:none;min-height:78px;
  transition:background .28s,padding-left .28s}
.nd-drawer__body a:hover,.nd-drawer__body a:focus-visible,.nd-drawer__body a:active{
  background:var(--pp-ink,#04263c);padding-left:clamp(12px,2.2vw,28px)}
.nd-txt{flex:1;min-width:0}
.nd-lab{display:block;font-weight:600;letter-spacing:-.012em;line-height:1.16;
  font-size:clamp(19px,2vw,25px)}
.nd-drawer__body small{display:block;margin-top:6px;line-height:1.5;letter-spacing:0;
  color:var(--pp-mute,#8a9bab);font-weight:300;font-size:clamp(12.5px,1.05vw,14px)}
.nd-arrow{width:22px;height:22px;flex:none;fill:none;
  stroke:var(--pp-teal,#00b9c6);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .28s,stroke .28s}
.nd-drawer__body a:hover .nd-arrow,
.nd-drawer__body a:focus-visible .nd-arrow{transform:translateX(5px);
  stroke:var(--pp-teal-lift,#2ad7e3)}
@media(max-width:430px){
  .nd-drawer__body a{min-height:72px;gap:15px}
  .nd-lab{font-size:19px}
}

/* Current-page highlight, applied by each page's own markup (mirrors
   the desktop dropdown's .dropdown-item.active) -- the real .pp-m4 has
   no such concept (it's the home page's own menu, so nothing in it is
   ever "the current page"), so this is new here, not part of the copy. */
.nd-drawer__body a.nd-active .nd-lab,
.nd-acc-row.nd-active .nd-lab,
.nd-acc-body a.nd-active{color:var(--pp-teal,#00b9c6)}

/* ---------- the foot ---------- */
.nd-drawer__foot{display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,2vh,22px);padding-top:clamp(4px,1.2vh,10px)}
.nd-badge{display:block;width:clamp(138px,13.5vw,159px);height:auto}
@media(max-height:900px){ .nd-badge{width:clamp(123px,12vw,144px)} }
@media(max-width:560px){ .nd-badge{width:117px} }
.nd-call{display:inline-flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;transition:color .25s;
  font:800 12.5px/1 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.nd-call:hover,.nd-call:focus-visible{color:var(--pp-teal,#00b9c6)}
.nd-call svg{width:16px;height:16px;fill:var(--pp-teal,#00b9c6);stroke:none;display:block}
.nd-cta{display:inline-flex;align-items:center;justify-content:center;
  background:var(--pp-teal,#00b9c6);color:#00212e;border:none;border-radius:6px;
  padding:16px 28px;font:800 13px/1 Montserrat,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;
  transition:background .25s,transform .25s}
.nd-cta:hover{background:var(--pp-teal-lift,#2ad7e3);transform:translateY(-2px)}
.nd-cta b{font-weight:900;letter-spacing:.15em}
.nd-contact{background:none;border:none;color:var(--pp-mute,#8a9bab);
  font:600 13px/1 Montserrat,sans-serif;text-decoration:underline;
  cursor:pointer;padding:0}
.nd-contact:hover,.nd-contact:focus-visible{color:#fff}

/* ---------- Home/Gallery: inline accordion (comparison A) ---------- */
.nd-acc-row{display:flex;align-items:center;gap:clamp(16px,2vw,26px);width:100%;
  padding:clamp(16px,2.2vh,24px) clamp(4px,1.4vw,18px);
  border-bottom:1px solid var(--pp-line,rgba(255,255,255,.11));
  background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;
  color:#fff;text-align:left;font-family:inherit;min-height:78px;
  transition:background .28s,padding-left .28s}
.nd-acc-row:hover,.nd-acc-row:focus-visible{background:var(--pp-ink,#04263c);padding-left:clamp(12px,2.2vw,28px)}
/* Same arrow SVG as the flat (navigate-away) links, but rotated to point
   down at rest -- an accordion expands in place, it doesn't take you
   anywhere, so it shouldn't promise forward motion the way a right
   arrow does. Rotates on to point up once open ("tap to collapse"). */
.nd-acc-chev{transition:transform .28s;transform:rotate(90deg)}
.nd-acc.nd-acc-open .nd-acc-chev{transform:rotate(-90deg)}
.nd-acc-body{max-height:0;overflow:hidden;background:var(--pp-ink,#04263c);
  transition:max-height .3s ease}
/* A row is 78px, so the old 300px cap clipped any accordion past three
   items -- About (4 items, 312px) lost the bottom edge of its last row.
   Sized well past the longest real menu so the cap only ever bounds the
   open/close animation, never the content. */
.nd-acc.nd-acc-open .nd-acc-body{max-height:900px}
.nd-acc-body a{display:block;padding:14px clamp(4px,1.4vw,18px) 14px clamp(24px,3.4vw,42px);
  color:#fff;text-decoration:none;font-size:clamp(15px,1.3vw,18px);font-weight:400}
.nd-acc-body a:hover,.nd-acc-body a:focus-visible{color:var(--pp-teal-lift,#2ad7e3)}
/* matches the desktop dropdown's .hn-here (style.css) -- same "you are
   here" marker on the Home sub-item, the one place it appears on
   desktop too, never anywhere else. */
.nd-here{display:inline-block;font-size:.62em;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.15);color:#fff;padding:.15em .5em;border-radius:.25em;
  margin-left:.6em;vertical-align:middle}

/* body was width:auto, sized to whatever's left after the real
   scrollbar's gutter -- so it (and everything full-width inside it) grew
   a few pixels wider the moment overflow:hidden removed that gutter on
   drawer-open, which was the actual shift. Fixing body's width and its
   right padding permanently (not toggled per drawer state) means
   nothing about body's box ever changes size when the scrollbar comes
   or goes -- there's nothing left to react to. 100vw always includes
   the scrollbar's own width, so it overflows the visible area by that
   amount whenever a real scrollbar is showing; clipping it on html is
   safe here (no position:sticky content on these pages for overflow-x
   to break, unlike the home page's pp template). */
html{overflow-x:hidden}
/* booking.js's ppScrollLock only ever adds .pp-book-lock to body, never
   html -- but body is no longer necessarily the element that actually
   scrolls the page once it's pinned to a fixed width, so body's own
   overflow:hidden (style.css) doesn't reliably stop the page scrolling.
   :has() lets plain CSS react to body's class from html too, covering
   whichever element is the real scrolling box. */
html:has(body.pp-book-lock){overflow-y:hidden}
body{width:100vw;padding-right:15px}
/* booking.js's ppScrollLock still sets its own padding-right on top of
   this while the drawer's open -- with body's width and padding both
   now fixed, that extra padding would just shrink the content area
   further for no reason, so it's cancelled here. */
body.pp-book-lock{padding-right:15px!important}

/* Full-width section backgrounds reach the true right edge by
   counteracting the permanent 15px above, not by reacting to the
   drawer -- so this applies always, not just while locked. Their
   content still needs the same 15px inset as the rest of the page, so
   it isn't left flush against the true edge once the background is. */
.utility-bar,.navbar,.page-hero,.cta-band,.site-footer{
  margin-right:-15px;padding-right:15px;
}

/* white-pool-fence.html's navbar now loads the real, same CSS/JS as the
   20 Bootstrap-template pages -- Bootstrap 5.3.3 + Bootstrap Icons +
   style.css -- instead of a hand-rolled replica. That replica kept
   drifting from the real thing (wrong navbar-brand padding/font-size,
   wrong logo height -- style.css's own "+30%" override to 52px plus
   three separate responsive breakpoints was missed entirely -- wrong
   button sizing) and was more upkeep than loading the real files. Its
   navbar-toggler/navbar-collapse are already hidden by the universal
   rule at the top of this file, same as every other page. */