/* =========================================================================
   Pinestraw Place — theme base, global header, drawer, global footer.

   Values transcribed verbatim from the approved source:
     final_html/Global Header.dc.html
     final_html/Global Footer.dc.html
     pp-css/global-header.css      (class vocabulary + rules with no control)
     pp-css/global-footer.css
     PinestrawPlace_CSS_Style_Guide.md

   The approved builds carry their styling as inline `style` attributes plus
   non-standard `style-hover` attributes. `style-hover` is a design-tool
   attribute, not HTML — it cannot survive into a browser, and neither can a
   media query. Those declarations are therefore expressed here as real CSS on
   the class names pp-css already established (.pp-header, .nav-links,
   .pp-nav-toggle, .pp-drawer-*, .pp-call-pill, .nav-call-m, .pp-footer,
   .footer-addr, .footer-phone). Every value is the approved value. This is a
   transcription, not a redesign.
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --pp-green:        #3A6B52;  /* primary green   */
  --pp-pine:         #2D5441;  /* dark green      */
  --pp-sage:         #C8E6D8;  /* light green     */
  --pp-cream:        #FFFBE6;  /* warm cream text */
  --pp-warm:         #F7F5F0;  /* section cream   */
  --pp-gold:         #F7B51C;  /* accent          */
  --pp-ink:          #2C2218;  /* body text dark  */
  --pp-ink-soft:     #4A3F35;
  --pp-muted:        #7A6E65;
  --pp-night:        #141915;  /* page base       */
  --pp-night-deep:   #101511;  /* utility + footer*/
  --pp-nav-link:     #EDEAD9;
  --pp-border:       #E8E4DC;
  --pp-radius-btn:   6px;
  --pp-radius-card:  8px;
  --pp-focus:        2px solid #F7B51C;
  --pp-header-h:     150px;    /* utility bar + nav row, desktop */
}

/* ---- Page base (pp-css/global-header.css → "Page base") ---------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pp-night);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--pp-green); text-decoration: none; }
a:hover { color: var(--pp-gold); }
img { max-width: 100%; }
* { box-sizing: border-box; }

/* The hidden attribute must beat any author display rule. Without this,
   `display:flex` on a container silently defeats `hidden` and JS-toggled
   panels stay on screen — which is exactly what happened to the calculator's
   Length x Width fieldset. */
[hidden] { display: none !important; }

/* Focus ring — behavior-spec §0.6. Never removed. */
:focus-visible { outline: var(--pp-focus); outline-offset: 2px; }

.pp-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pp-gold); color: var(--pp-pine);
  font-size: 14px; font-weight: 700; padding: 12px 20px;
  border-radius: 0 0 var(--pp-radius-btn) 0;
}
.pp-skip-link:focus { left: 0; color: var(--pp-pine); }

.pp-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* =========================================================================
   BUTTONS — the style-guide layer. Every page inherits these; no page sheet
   redefines them. Values from PinestrawPlace_CSS_Style_Guide.md §3 and the
   approved builds.
   ========================================================================= */
.pp-btn-gold,
.pp-btn-ghost,
.pp-btn-pine,
.pp-btn-outline {
  display: inline-block;
  font-family: Inter, sans-serif;
  border-radius: var(--pp-radius-btn);
  text-align: center;
}

/* Gold — the primary CTA everywhere. */
.pp-btn-gold {
  background: var(--pp-gold); color: var(--pp-pine);
  font-size: 14px; font-weight: 700; padding: 13px 28px;
}
.pp-btn-gold:hover { background: var(--pp-pine); color: var(--pp-cream); }
/* On a pine/dark panel the pine hover would vanish; go to cream instead. */
.pp-btn-gold--oncream:hover { background: var(--pp-cream); color: var(--pp-pine); }

/* Ghost — cream outline, for use over photography. */
.pp-btn-ghost {
  border: 2px solid var(--pp-cream); color: var(--pp-cream);
  font-size: 14px; font-weight: 600; padding: 12px 32px;
}
.pp-btn-ghost:hover { border-color: var(--pp-gold); color: var(--pp-gold); }

/* Pine — solid, for use on cream. */
.pp-btn-pine {
  background: var(--pp-pine); color: var(--pp-cream);
  font-size: 14px; font-weight: 700; padding: 14px 32px;
}
.pp-btn-pine:hover { background: var(--pp-green); color: var(--pp-cream); }

/* Outline — pine outline, for use on cream. */
.pp-btn-outline {
  border: 2px solid var(--pp-pine); color: var(--pp-pine);
  font-size: 14px; font-weight: 600; padding: 11px 24px;
}
.pp-btn-outline:hover { border-color: var(--pp-gold); color: var(--pp-green); }

@media (prefers-reduced-motion: reduce) {
  .pp-btn-gold, .pp-btn-ghost, .pp-btn-pine, .pp-btn-outline { transition-duration: 0ms; }
}

/* =========================================================================
   GLOBAL HEADER
   ========================================================================= */
.pp-header { background: var(--pp-night); position: relative; z-index: 5; }
.pp-header--transparent {
  background: transparent;
  position: absolute; top: 0; left: 0; right: 0;
}

/* Header scroll state — behavior-spec §7.7. Inner pages only get the change;
   the attribute is written by pp-core.js. */
.pp-header--transparent[data-pp-header-scrolled] {
  background: var(--pp-night);
  box-shadow: 0 2px 18px rgba(20, 25, 21, 0.45);
  transition: background .2s ease, box-shadow .2s ease;
}

/* ---- Utility bar ------------------------------------------------------- */
.utility-bar {
  background: var(--pp-night-deep);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  align-items: center;   /* address/phone/hours center against the taller My Account button (John, launch day) */
  padding: 9px 48px;
  font-size: 12.5px; color: var(--pp-sage);
}
.utility-bar p { margin: 0; }
.utility-bar a { color: var(--pp-sage); }
.utility-bar a:hover { color: var(--pp-gold); }
.utility-bar__right { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.utility-bar__phone { color: var(--pp-cream); font-weight: 600; }
.utility-bar__reviews { color: var(--pp-gold); font-weight: 600; }
/* Cart + My Account — transcribed from Global Header.css v2 (.util__cart /
   .util__account), John 2026-08-16. */
.utility-bar__cart { display: flex; align-items: center; gap: 6px; }
.utility-bar__cart svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
/* Live item-count badge — filled per-session by wc-cart-fragments. */
.pp-cart-count {
  background: var(--pp-gold); color: var(--pp-pine);
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pp-cart-count.is-empty { display: none; }
.utility-bar__account {
  background: var(--pp-pine); color: var(--pp-cream); font-weight: 600;
  padding: 4px 12px; border-radius: 5px; line-height: 1.5;
}
/* Written as `.utility-bar a…` so it outranks the generic gold link-hover
   above — that rule was painting this text gold on the gold hover bg
   (invisible; John, launch day). */
.utility-bar a.utility-bar__account:hover { background: var(--pp-gold); color: var(--pp-pine); }

/* ---- Nav row ----------------------------------------------------------- */
.pp-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 48px;
}
.pp-header__logo { flex: none; display: block; }
.pp-header__logo img { height: 84px; display: block; width: auto; }

.nav-links {
  display: flex; align-items: center; gap: 22px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; flex-wrap: wrap; justify-content: flex-end;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  color: var(--pp-nav-link);
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  display: inline-block;
  /* Eight uppercase labels plus the CTA is a tight row. Without this,
     "Landscape Services" and "Dumpster Rentals" break mid-label rather than
     the row wrapping cleanly — and the CTA's phone number splits across two
     lines, which looked like a bug in the 1440 render. */
  white-space: nowrap;
}
.nav-links a:hover { color: var(--pp-gold); }
.nav-links .current-menu-item > a,
.nav-links .current-menu-parent > a,
.nav-links .current-page-ancestor > a,
.nav-links a[aria-current="page"] {
  color: var(--pp-gold);
  border-bottom-color: var(--pp-gold);
}

/* Gold call CTA in the desktop nav row. */
.nav-call-d {
  background: var(--pp-gold); color: var(--pp-pine);
  font-size: 13px; font-weight: 700; padding: 11px 22px;
  border-radius: var(--pp-radius-btn); letter-spacing: 0.04em;
  white-space: nowrap; flex: none;
}
.nav-call-d:hover { background: var(--pp-pine); color: var(--pp-cream); }

/* Eight uppercase labels plus the gold CTA do not fit on one row at 1440 with
   the approved 22px gap / 0.06em tracking — measured, the nav needs more than
   the 990px left after the logo and CTA, so it wrapped to two lines and
   dropped "Contact" onto its own row. The approved build sets
   `flex-wrap: wrap` as a safety valve, not as the intended look.

   Tightening the gap and tracking below 1500px holds one row all the way down
   to the 1025px drawer boundary. Type, weight, colour and case are untouched —
   only the space between items moves. There is no comp to check this against:
   PinestrawPlace_01_Homepage.pdf predates the approved HTML by a wide margin
   (it shows a hamburger on desktop, a left-aligned hero, placeholder NAP and
   the removed Nextdoor award), so final_html + pp-css are the reference here. */
@media (max-width: 1500px) {
  .nav-links { gap: 15px; letter-spacing: 0.04em; }
  .pp-header__bar { gap: 16px; padding: 14px 28px; }
  .utility-bar { padding: 9px 28px; }
}
/* Between the 1025px drawer boundary and roughly 1300px the eight labels plus
   the gold CTA genuinely do not fit on one row at any type size the design
   would tolerate — measured, the labels alone need ~810px and the CTA takes
   190px of the ~880px available at 1025.

   The CTA is what gives, not the navigation: the same phone number is in the
   utility bar directly above it, in the drawer, in the sticky pill, and in the
   footer, so nothing is lost — whereas wrapping the nav drops "Contact" onto a
   second row and pushes the header 60px taller on every page. Below 1025 the
   drawer takes over and the CTA returns as the compact mobile "Call". */
@media (max-width: 1300px) {
  .nav-call-d { display: none; }
}
@media (max-width: 1180px) {
  .nav-links { gap: 11px; font-size: 12px; letter-spacing: 0.03em; }
  .pp-header__logo img { height: 72px; }
  .pp-header__bar { padding: 12px 20px; }
  .utility-bar { padding: 9px 20px; }
}
/* Last tier before the drawer takes over at 1024. */
@media (max-width: 1090px) {
  .nav-links { gap: 8px; font-size: 11.5px; letter-spacing: 0.02em; }
  .pp-header__logo img { height: 64px; }
  .pp-header__bar { padding: 12px 16px; }
}

/* Compact phone-only Call button. MOBILE-COPY rule 1: label is "Call".
   min-height keeps the specified 12px/700 + 10px/16px padding intact while
   meeting the 44px tap target (pp-css/global-header.css). */
.nav-call-m {
  display: none;
  background: var(--pp-gold); color: var(--pp-pine);
  font-size: 12px; font-weight: 700; padding: 10px 16px;
  border-radius: var(--pp-radius-btn); letter-spacing: 0.04em;
  min-height: 44px; align-items: center; justify-content: center;
}
.nav-call-m:hover { background: var(--pp-pine); color: var(--pp-cream); }

/* ---- Hamburger — 44x44 tap target (pp-css) ----------------------------- */
.pp-nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(200, 230, 216, 0.4);
  border-radius: var(--pp-radius-btn); color: var(--pp-cream);
  cursor: pointer; flex: none;
}
.pp-nav-toggle:hover { border-color: var(--pp-gold); color: var(--pp-gold); }
.pp-nav-toggle__bars { display: block; width: 20px; height: 14px; position: relative; }
.pp-nav-toggle__bars::before,
.pp-nav-toggle__bars::after,
.pp-nav-toggle__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
}
.pp-nav-toggle__bars::before { top: 0; }
.pp-nav-toggle__bars span    { top: 6px; }
.pp-nav-toggle__bars::after  { bottom: 0; }
.pp-nav-toggle[aria-expanded="true"] .pp-nav-toggle__bars span { opacity: 0; }
.pp-nav-toggle[aria-expanded="true"] .pp-nav-toggle__bars::before { top: 6px; transform: rotate(45deg); }
.pp-nav-toggle[aria-expanded="true"] .pp-nav-toggle__bars::after { bottom: 6px; transform: rotate(-45deg); }

/* =========================================================================
   MOBILE DRAWER — behavior-spec §1. New construction.
   ========================================================================= */
.pp-drawer-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 25, 21, 0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.pp-drawer-scrim[data-pp-open] { opacity: 1; pointer-events: auto; }

/* Full-width, dark-green panel — per mobile-copy-and-frames/frame-1, which is
   the only drawer mock that exists and therefore governs its appearance.
   Corrections that frame forced on the first pass: it is FULL WIDTH (not a
   380px side panel), it paints #2D5441 (not the footer's #101511), it carries
   the logo top-left with the close control top-right, and its links are
   Playfair Display at display size, not uppercase Inter. */
.pp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90;
  width: 100%;
  background: var(--pp-pine);
  transform: translateX(100%);
  transition: transform 200ms cubic-bezier(.22, .61, .36, 1);
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
}
.pp-drawer[data-pp-open] {
  transform: translateX(0);
  transition-duration: 240ms;
}
.pp-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.pp-drawer__logo img { height: 44px; width: auto; display: block; }

/* Close button: same 44x44 reason as the hamburger (pp-css). */
.pp-drawer-close {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; line-height: 1;
  background: transparent; border: 1px solid rgba(200, 230, 216, 0.4);
  border-radius: var(--pp-radius-btn); color: var(--pp-cream);
  font-size: 20px; cursor: pointer;
}
.pp-drawer-close:hover { border-color: var(--pp-gold); color: var(--pp-gold); }

.pp-drawer-nav { margin-top: 10px; }
.pp-drawer-nav ul { list-style: none; margin: 0; padding: 0; }

.pp-drawer-nav > ul > li { position: relative; }
.pp-drawer-nav > ul > li > a {
  display: block;
  color: var(--pp-cream);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px; font-weight: 700; letter-spacing: 0;
  text-transform: none;
  padding: 18px 56px 18px 0;
  /* Elementor's divider control was inert on the vertical menu; set here
     per pp-css/global-header.css → .pp-drawer-nav ... .elementor-item */
  border-bottom: 1px dashed rgba(200, 230, 216, 0.25);
}
.pp-drawer-nav > ul > li > a:hover,
.pp-drawer-nav > ul > li > a[aria-current="page"] { color: var(--pp-gold); }

/* The +/- is a separate control from the parent link — behavior-spec §1.1.
   A touch on the label navigates; only the +/- expands. */
.pp-submenu-toggle {
  position: absolute; top: 8px; right: 0;
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(200, 230, 216, 0.3);
  border-radius: var(--pp-radius-btn);
  color: var(--pp-gold); font-size: 26px; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.pp-submenu-toggle:hover { border-color: var(--pp-gold); }
.pp-submenu-panel {
  overflow: hidden;
  transition: height 200ms ease;
}
.pp-submenu-panel a {
  display: flex; align-items: center;
  color: rgba(255, 251, 230, 0.8);
  font-family: Inter, sans-serif;
  font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  text-transform: none;
  /* 11px padding rendered these at 39px tall — under the >=44px tap-target
     rule this project applies to every touch control. min-height does the
     work so the specified type is untouched. */
  padding: 11px 0 11px 16px; min-height: 44px;
  border-bottom: 1px dashed rgba(200, 230, 216, 0.14);
}
.pp-submenu-panel a:hover,
.pp-submenu-panel a[aria-current="page"] { color: var(--pp-gold); }

.pp-drawer .nav-call-drawer {
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-gold); color: var(--pp-pine);
  font-size: 17px; font-weight: 700; letter-spacing: 0.02em;
  padding: 16px 22px; border-radius: var(--pp-radius-btn);
  min-height: 56px; margin-top: 28px;
}
.pp-drawer .nav-call-drawer:hover { background: var(--pp-cream); color: var(--pp-pine); }

/* NAP block pinned to the bottom of the drawer — MOBILE-COPY rule 2.
   margin-top:auto has no numeric Margin control (pp-css). */
/* Cart + My Account in the drawer (Global Header v2, John 2026-08-16) — the
   utility bar is hidden <=1024px, so the store stays reachable on mobile. */
.pp-drawer-shop { display: flex; gap: 14px; margin-top: 14px; }
.pp-drawer-shop a {
  flex: 1; text-align: center; font-size: 15px; font-weight: 700;
  color: var(--pp-cream); background: rgba(200, 230, 216, 0.12);
  border: 1px solid rgba(200, 230, 216, 0.3); border-radius: 6px;
  padding: 12px; min-height: 44px;
}
.pp-drawer-shop a:hover { background: var(--pp-gold); color: var(--pp-pine); border-color: var(--pp-gold); }

.pp-drawer-nap { margin-top: auto; padding-top: 28px; }
.pp-drawer-nap p { margin: 0; }
.pp-drawer-nap {
  font-size: 14px; line-height: 2; color: rgba(255, 251, 230, 0.85);
}
.pp-drawer-nap a { color: rgba(255, 251, 230, 0.85); display: inline-block; min-height: 24px; }
.pp-drawer-nap a:hover { color: var(--pp-cream); }
.pp-drawer-nap .pp-drawer-nap__reviews { color: var(--pp-gold); font-weight: 700; }

/* =========================================================================
   STICKY CALL PILL — phones only. pp-css/global-header.css.
   ========================================================================= */
.pp-call-pill {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: none; align-items: center; gap: 8px;
  background: var(--pp-gold); color: var(--pp-pine);
  font-size: 14px; font-weight: 700;
  padding: 13px 20px; border-radius: 99px;
  min-height: 48px;
  box-shadow: 0 6px 20px rgba(20, 25, 21, 0.4);
  transform: translateY(140%);
  transition: transform 180ms ease;
}
.pp-call-pill:hover { color: var(--pp-pine); }
.pp-call-pill[data-pp-visible] { transform: translateY(0); }
/* Yields to the sticky add-to-cart bar — behavior-spec §7.5. */
body[data-pp-atc-bar] .pp-call-pill { display: none !important; }

/* =========================================================================
   GLOBAL FOOTER
   ========================================================================= */
.pp-footer { background: var(--pp-night-deep); padding: 64px 48px 28px; }
.pp-footer p { margin: 0; }
.pp-footer__inner { max-width: 1080px; margin: 0 auto; }
.pp-footer__cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px;
}
/* The centered / two-column footer treatment (John, 2026-08-16) applies on
   PHONES ONLY — John, 2026-08-17: desktop keeps the base left-aligned
   4-column footer. See the ≤767px block. */
/* Woo's global `.woocommerce-page img { height: auto }` out-specified the
   plain class on shop pages and let the SVG balloon to column width (John's
   archive screenshot). Pin it on every body class. Extra breathing room below
   the badge per John, 2026-08-16. */
.pp-footer__logo-link { display: inline-block; }
.pp-footer__logo,
.woocommerce-page .pp-footer__logo,
.woocommerce .pp-footer__logo {
  height: 110px !important; width: auto !important; max-width: none;
  display: block; margin: 0 0 18px;
}
.pp-footer__blurb {
  font-size: 13.5px; color: rgba(255, 251, 230, 0.6); line-height: 1.7;
  margin: 16px 0 0; max-width: 260px;
}
.pp-footer__tagline {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; font-weight: 600; font-size: 19px; color: var(--pp-gold);
  margin-top: 10px; transform: rotate(-2deg); display: inline-block;
}
.pp-footer__heading {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--pp-sage); margin-bottom: 14px;
}
.pp-footer__links {
  display: flex; flex-direction: column; gap: 7px; font-size: 13px;           /* pp-8 base */
}
.pp-footer__links a { color: rgba(255, 251, 230, 0.75); }
.pp-footer__links a:hover { color: var(--pp-gold); }
.pp-footer__visit {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; color: rgba(255, 251, 230, 0.75); line-height: 1.6;
}
.footer-addr a { color: rgba(255, 251, 230, 0.85); }
.footer-phone a { color: var(--pp-cream); font-weight: 600; }
.footer-addr a:hover,
.footer-phone a:hover { color: var(--pp-gold); }
.pp-footer__reviews {
  background: var(--pp-gold); color: var(--pp-pine);
  font-size: 12px; font-weight: 700; padding: 7px 14px;
  border-radius: 4px; display: inline-block; align-self: flex-start;          /* pp-13 base */
}
.pp-footer__reviews:hover { background: var(--pp-pine); color: var(--pp-cream); }
.pp-footer__legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;  /* pp-14 base */
  border-top: 1px dashed rgba(200, 230, 216, 0.2);
  margin-top: 44px; padding-top: 20px;
  font-size: 12px; color: rgba(255, 251, 230, 0.45);
}
.pp-footer__legal a { color: rgba(255, 251, 230, 0.6); }
.pp-footer__legal a:hover { color: var(--pp-gold); }
.pp-footer__legal-links { display: flex; gap: 18px; }

/* =========================================================================
   BREAKPOINTS — Elementor defaults carried into the theme (spec §0.2)
   Desktop >= 1025 · Tablet 768–1024 · Mobile <= 767
   ========================================================================= */

/* Tablet and below: nav collapses to the drawer. */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .pp-nav-toggle { display: flex; }
  .pp-header__bar { padding: 12px 24px; gap: 14px; }
  .pp-header__logo img { height: 64px; }
  .utility-bar { padding: 9px 24px; }
  /* Tablets are touch devices: the call CTA becomes a 44px target here, not
     the 37px the desktop padding produces. */
  .nav-call-d { min-height: 44px; display: inline-flex; align-items: center; }
  .pp-footer { padding: 56px 24px 24px; }
  .pp-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Phones. */
@media (max-width: 767px) {
  .utility-bar { display: none; }   /* MOBILE-COPY rule 3 */
  .nav-call-d { display: none; }
  .nav-call-m { display: inline-flex; }
  .pp-header__bar { padding: 10px 16px; gap: 10px; }
  .pp-header__logo img { height: 56px; }   /* frame-1: "logo 56px" */
  .pp-call-pill { display: inline-flex; }
  /* Keep the pill clear of the footer's last row (spec §7.5). */
  body { padding-bottom: 76px; }

  .pp-footer { padding: 48px 16px 24px; }
  /* Centered footer + two-column Products/Services lists (John, 2026-08-16)
     — scoped to phones only per John, 2026-08-17. */
  .pp-footer__cols {
    grid-template-columns: 1fr; gap: 28px;
    justify-items: center; text-align: center;
  }
  .pp-footer__logo,
  .woocommerce-page .pp-footer__logo,
  .woocommerce .pp-footer__logo { margin: 0 auto 18px; }
  .pp-footer__blurb { max-width: none; margin: 16px auto 0; }
  .pp-footer__links {
    display: grid; grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center; text-align: left;
  }
  .pp-footer__visit { align-items: center; }
  .pp-footer__reviews { align-self: center; }
  .pp-footer__legal {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; margin-top: 32px;
  }
  /* Footer link lists sit at 13px with a 7px gap — about 20px per row, which
     is below WCAG 2.5.8's 24x24 minimum on a phone. Opening the gap and
     setting a 24px row keeps every value in the approved design (same type,
     same colour, same order) and clears the AA threshold. This deliberately
     does NOT force 44px: eight stacked 44px rows per column would roughly
     double the footer's height on a phone and change the design. */
  .pp-footer__links { gap: 4px 26px; }
  .pp-footer__links a { min-height: 24px; display: flex; align-items: center; }
}

/* =========================================================================
   NO-JS BASELINE — behavior-spec §0.4 / §1.8
   Anything that only makes sense with JS is authored open and closed by JS.
   ========================================================================= */
.no-js .pp-nav-toggle { display: none; }      /* a button that does nothing is worse than none */
.no-js .pp-drawer-scrim { display: none; }
.no-js .pp-drawer-close { display: none; }
.no-js .pp-submenu-toggle { display: none; }
.no-js .pp-drawer {
  position: static; transform: none; display: block;
  width: auto; height: auto; overflow: visible;
  border-left: 0; border-top: 1px solid rgba(200, 230, 216, 0.18);
}
.no-js .pp-submenu-panel { height: auto !important; }
.no-js .pp-call-pill { transform: translateY(0); }
/* Drawer is only part of the document flow at <=1024px without JS. */
@media (min-width: 1025px) {
  .no-js .pp-drawer { display: none; }
}

/* =========================================================================
   REDUCED MOTION — spec §0.5. State-communicating motion becomes 0ms,
   not "no transition"; the end state is identical.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .pp-drawer,
  .pp-drawer-scrim,
  .pp-submenu-panel,
  .pp-call-pill,
  .pp-header--transparent[data-pp-header-scrolled] { transition-duration: 0ms; }
}

/* ---- Print ------------------------------------------------------------- */
@media print {
  .pp-nav-toggle, .pp-drawer, .pp-drawer-scrim, .pp-call-pill { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
}