/*
 * Global site header — Gotta Go Potties
 * Adapted from portable-restroom-services-prototype.html
 *
 * IMPORTANT: every rule below is scoped under .ggp-utilbar / .ggp-header
 * (or is a harmless :root custom-property declaration) so that loading this
 * stylesheet site-wide never restyles existing page content. Do not add
 * bare element selectors (body, h1, h2, h3, a, img, *) here.
 */

:root{
  --ggp-green:#2e9e44; --ggp-green-dk:#1d6e2f; --ggp-green-darker:#123f1c;
  --ggp-mint:#e9f6ec; --ggp-ink:#17281c; --ggp-muted:#54685b; --ggp-line:#dbe6dd;
  --ggp-accent:#a1e14d; --ggp-accent-dk:#4e7d1a; --ggp-accent-soft:#f1fadf; --ggp-accent-ink:#17300a;
  --ggp-shadow:0 14px 34px rgba(18,63,28,.12); --ggp-shadow-sm:0 5px 16px rgba(18,63,28,.08);
}

.ggp-utilbar,.ggp-header,.ggp-header *,.ggp-utilbar *{box-sizing:border-box}
.ggp-header img,.ggp-utilbar img{max-width:100%;display:block}

/* utility / emergency bar */
.ggp-utilbar{background:var(--ggp-green-darker);color:#fff;font-size:13.5px;font-family:Inter,-apple-system,Segoe UI,sans-serif}
.ggp-utilbar-in{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 24px;flex-wrap:wrap;text-align:center;max-width:1160px;margin:0 auto}
.ggp-utilbar .ggp-msg{opacity:.92}
.ggp-utilbar .ggp-msg strong{color:#fff}
.ggp-util-cta{font-family:Poppins,Inter,sans-serif;font-weight:700;color:var(--ggp-accent);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ggp-util-cta:hover{color:#fff;text-decoration:underline}
.ggp-util-cta:focus-visible{outline:3px solid var(--ggp-accent);outline-offset:2px}

/* sticky header */
.ggp-header{position:-webkit-sticky;position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--ggp-line);font-family:Inter,-apple-system,Segoe UI,sans-serif}
/* JS fallback: pin the header with position:fixed once scrolled past the utility bar */
.ggp-header.ggp-fixed{position:fixed;top:0;left:0;right:0;z-index:100}
.ggp-header-spacer{margin:0;padding:0}
.ggp-wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.ggp-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px;flex-wrap:wrap}

.ggp-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.ggp-brand .ggp-logo-img{height:46px;width:auto;display:block}
.ggp-brand:focus-visible{outline:3px solid var(--ggp-accent-dk);outline-offset:3px}

/* primary nav (desktop) */
.ggp-nav{display:flex}
.ggp-nav .ggp-menu{display:flex;gap:19px;align-items:center;list-style:none;margin:0;padding:0}
.ggp-nav .ggp-menu li.menu-item{position:relative;display:flex;align-items:center}
.ggp-nav .ggp-menu li.menu-item>a{font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:14px;color:var(--ggp-ink);text-decoration:none;opacity:.85;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;padding:6px 2px}
.ggp-nav .ggp-menu li.menu-item>a:hover{opacity:1;color:var(--ggp-green-dk)}
.ggp-nav .ggp-menu li.menu-item>a:focus-visible{outline:3px solid var(--ggp-accent-dk);outline-offset:2px;opacity:1}
.ggp-nav .ggp-menu li.menu-item-has-children>a::after{content:"\25BE";font-size:12px;opacity:.7;margin-top:1px}

.ggp-nav .ggp-menu ul.sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--ggp-line);border-radius:12px;box-shadow:var(--ggp-shadow);padding:8px;min-width:255px;display:none;flex-direction:column;gap:2px;z-index:70;list-style:none;margin:0}
.ggp-nav .ggp-menu li.menu-item-has-children:hover>ul.sub-menu,
.ggp-nav .ggp-menu li.menu-item-has-children:focus-within>ul.sub-menu{display:flex}
.ggp-nav .ggp-menu ul.sub-menu li.menu-item{display:block}
.ggp-nav .ggp-menu ul.sub-menu a{display:block;padding:9px 12px;border-radius:8px;font-family:Poppins,Inter,sans-serif;font-weight:600;font-size:13.5px;color:var(--ggp-ink);text-decoration:none;opacity:.9;white-space:nowrap}
.ggp-nav .ggp-menu ul.sub-menu a:hover{background:var(--ggp-mint);color:var(--ggp-green-dk);opacity:1}
.ggp-nav .ggp-menu ul.sub-menu a:focus-visible{outline:3px solid var(--ggp-accent-dk);outline-offset:-2px;opacity:1}

/* right-hand CTA cluster */
.ggp-top-cta{display:flex;align-items:center;gap:14px}
.ggp-phone{font-family:Poppins,Inter,sans-serif;font-weight:700;color:var(--ggp-green-dk);text-decoration:none;white-space:nowrap;font-size:15px}
.ggp-phone span{display:block;font-family:Inter,sans-serif;font-weight:500;font-size:11px;color:var(--ggp-muted);letter-spacing:.02em}
.ggp-phone:focus-visible{outline:3px solid var(--ggp-accent-dk);outline-offset:2px}

.ggp-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:15px;padding:13px 24px;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
button.ggp-btn{margin:0;background:none;-webkit-appearance:none;appearance:none}
.ggp-btn:focus-visible{outline:3px solid var(--ggp-accent-dk);outline-offset:2px}
.ggp-btn-primary{background:var(--ggp-accent) !important;color:var(--ggp-accent-ink);box-shadow:0 8px 20px rgba(120,180,60,.40)}
.ggp-btn-primary:hover{transform:translateY(-2px);background:var(--ggp-accent-dk)!important;color:#fff}

/* hamburger checkbox (mobile nav toggle) — kept as a real, focusable, labeled control */
.ggp-navtoggle-cb{display:none}

/* mobile full menu panel */
.ggp-mobilemenu{display:none}
.ggp-mobilemenu .ggp-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;text-align:left;}
.ggp-mobilemenu .ggp-menu li.menu-item>a{display:block;padding:11px 4px;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:15px;color:var(--ggp-ink);text-decoration:none;border-bottom:1px solid var(--ggp-line)}
.ggp-mobilemenu .ggp-menu li.menu-item>a:focus-visible{outline:3px solid var(--ggp-accent-dk);outline-offset:-2px}
/* top-level parents (Our Services, Dumpsters) render as green uppercase group headings */
.ggp-mobilemenu .ggp-menu>li.menu-item-has-children>a{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ggp-green-dk);opacity:1;border-bottom:0;padding:18px 4px 6px}
.ggp-mobilemenu .ggp-menu ul.sub-menu{list-style:none;margin:0;padding:0}
.ggp-mobilemenu .ggp-menu ul.sub-menu li.menu-item>a{padding-left:18px;font-weight:500;font-size:15px;opacity:.92}
.ggp-mobile-home,.ggp-mobile-phone{display:block;padding:11px 4px;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:15px;color:var(--ggp-ink);text-decoration:none;border-bottom:1px solid var(--ggp-line)}
.ggp-mobile-home:focus-visible,.ggp-mobile-phone:focus-visible{outline:3px solid var(--ggp-accent-dk);outline-offset:-2px}

@media (max-width:960px){
  .ggp-nav{display:none}
  .ggp-utilbar .ggp-long{display:none}
  /* mobile top bar: logo + Get a Quote + hamburger on ONE vertically-centered row */
  .ggp-topbar{flex-wrap:nowrap;gap:12px;height:64px}
  .ggp-brand{flex:0 1 auto;min-width:0}
  .ggp-top-cta{margin-left:auto;flex:0 0 auto}
  .ggp-navtoggle-cb{flex:0 0 auto}
  .ggp-navtoggle-cb{
    display:inline-block;appearance:none;-webkit-appearance:none;
    width:34px;height:34px;border-radius:8px;border:1px solid var(--ggp-line);
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6e2f' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") no-repeat center/20px;
    cursor:pointer;
  }
  .ggp-navtoggle-cb:checked{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6e2f' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
  }
  .ggp-navtoggle-cb:focus-visible{outline:3px solid var(--ggp-accent-dk);outline-offset:2px}
  .ggp-navtoggle-cb:checked ~ .ggp-mobilemenu{display:flex}
  .ggp-mobilemenu{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--ggp-line);border-bottom:1px solid var(--ggp-line);flex-direction:column;padding:8px 24px 16px;box-shadow:var(--ggp-shadow);max-height:82vh;overflow:auto;z-index:70}
}

@media (max-width:620px){
  .ggp-top-cta .ggp-phone{display:none}
  .ggp-wrap{padding:0 14px}
  .ggp-topbar{gap:10px}
  .ggp-brand .ggp-logo-img{height:40px}
  .ggp-btn{padding:11px 16px;font-size:14px}
}

@media (max-width:360px){
  .ggp-wrap{padding:0 10px}
  .ggp-brand .ggp-logo-img{height:34px}
  .ggp-btn{padding:9px 13px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .ggp-btn,.ggp-util-cta{transition:none!important}
}
