/* Gurugram Goldendoodle — shared header & footer.
   Self-contained: every selector is prefixed .gg- so it cannot clash with page CSS.
   Generated markup lives in tools/build-chrome.js. */

:root{
  --gg-cream:#fdf8ee;
  --gg-cream-2:#fff9ef;
  --gg-green:#1f3d24;
  --gg-forest:#193628;
  --gg-deep:#172820;
  --gg-brown:#4a3223;
  --gg-gold:#d9aa45;
  --gg-gold-dark:#b8860b;
  --gg-ink:#33302a;
  --gg-line:#e8dcc0;
  --gg-wa:#25d366;
  --gg-hd-h:80px;
}
html{scroll-padding-top:96px}
body{margin:0} /* the home-delivery fragment has no body reset; other pages already set this */

.gg-header,.gg-header *,.gg-footer,.gg-footer *{box-sizing:border-box}
.gg-header,.gg-footer{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.5;text-align:left;
}
.gg-header ul,.gg-footer ul{list-style:none;margin:0;padding:0}
.gg-header li,.gg-footer li{margin:0;padding:0}
.gg-header a,.gg-footer a{text-decoration:none}
.gg-header img,.gg-footer img{display:block;height:auto;max-width:100%}
.gg-header svg,.gg-footer svg{flex:none;display:block}

.gg-skip{position:absolute;left:-9999px;top:8px;z-index:2000;background:var(--gg-green);color:#fff;
  padding:10px 16px;border-radius:8px;font:600 .95rem "Segoe UI",system-ui,sans-serif}
.gg-skip:focus{left:12px}

/* ---------- Header ---------- */
.gg-header{position:sticky;top:0;z-index:1000;background:var(--gg-cream);
  border-bottom:1px solid var(--gg-line);box-shadow:0 2px 14px rgba(31,61,36,.06)}
.gg-hd-inner{max-width:1240px;margin:0 auto;padding:0 24px;min-height:var(--gg-hd-h);
  display:flex;align-items:center;gap:20px}

.gg-logo{flex:none;display:block;background:#fff;border-radius:10px;padding:4px 8px;line-height:0}
.gg-logo img{width:172px;height:auto}
.gg-logo:focus-visible,.gg-header a:focus-visible,.gg-header button:focus-visible,
.gg-footer a:focus-visible{outline:3px solid var(--gg-gold-dark);outline-offset:2px;border-radius:8px}

.gg-nav{flex:1 1 auto;min-width:0}
.gg-menu{display:flex;align-items:center;justify-content:center;gap:6px}
.gg-link{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;
  font:600 1rem/1.2 "Segoe UI",system-ui,sans-serif;color:var(--gg-ink);background:none;border:0;
  border-radius:8px;cursor:pointer;white-space:nowrap;transition:color .18s ease}
.gg-link::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;
  background:var(--gg-gold-dark);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.gg-link:hover,.gg-dd.is-open>.gg-link{color:var(--gg-green)}
.gg-link:hover::after,.gg-dd.is-open>.gg-link::after{transform:scaleX(1);opacity:.55}
.gg-link.is-active{color:var(--gg-green)}
.gg-link.is-active::after{transform:scaleX(1);opacity:1}
.gg-chev{width:14px;height:14px;transition:transform .2s ease}
.gg-dd.is-open>.gg-link .gg-chev{transform:rotate(180deg)}

.gg-dd{position:relative}
.gg-sub{position:absolute;top:calc(100% + 8px);left:50%;min-width:270px;padding:8px;
  background:#fff;border:1px solid var(--gg-line);border-radius:14px;
  box-shadow:0 16px 40px rgba(25,54,40,.16);
  opacity:0;visibility:hidden;transform:translate(-50%,6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.gg-sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* hover bridge */
.gg-dd.is-open>.gg-sub{opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .16s ease,transform .16s ease,visibility 0s}
.gg-sub a{display:block;padding:10px 14px;border-radius:9px;color:var(--gg-ink);
  font:500 .95rem/1.3 "Segoe UI",system-ui,sans-serif;white-space:nowrap}
.gg-sub a:hover,.gg-sub a:focus-visible{background:#f4efdf;color:var(--gg-green)}
.gg-sub a[aria-current="page"]{background:#eef3e8;color:var(--gg-green);font-weight:700}

.gg-actions{flex:none;display:flex;align-items:center;gap:10px}
.gg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;
  border-radius:10px;font:600 .95rem/1 "Segoe UI",system-ui,sans-serif;white-space:nowrap;
  border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.gg-btn svg{width:18px;height:18px}
.gg-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(25,54,40,.14)}
.gg-btn-call{background:#fff;color:var(--gg-green);border-color:var(--gg-line)}
.gg-btn-call:hover{border-color:var(--gg-gold)}
.gg-btn-wa{background:var(--gg-wa);color:#082a17;border-color:#1fb858}
.gg-btn-wa:hover{background:#2be070}

.gg-burger{display:none;flex:none;width:44px;height:44px;border:1px solid var(--gg-line);background:#fff;
  border-radius:10px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.gg-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--gg-green);
  transition:transform .2s ease,opacity .2s ease}
.gg-header.is-nav-open .gg-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.gg-header.is-nav-open .gg-burger span:nth-child(2){opacity:0}
.gg-header.is-nav-open .gg-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.gg-nav-cta{display:none}

/* Tablet + mobile header */
@media (max-width:999px){
  :root{--gg-hd-h:64px}
  .gg-hd-inner{padding:0 16px;gap:10px}
  .gg-logo img{width:140px}
  .gg-actions{margin-left:auto;gap:8px}
  .gg-btn-call .gg-btn-text,.gg-btn-wa .gg-btn-text{display:none}
  .gg-actions .gg-btn{width:44px;padding:0}
  .gg-burger{display:flex}
  .gg-nav{position:absolute;left:0;right:0;top:100%;background:var(--gg-cream);
    border-bottom:1px solid var(--gg-line);box-shadow:0 14px 26px rgba(25,54,40,.14);
    max-height:calc(100vh - var(--gg-hd-h));overflow-y:auto;padding:8px 16px 18px;display:none}
  .gg-header.is-nav-open .gg-nav{display:block}
  .gg-menu{flex-direction:column;align-items:stretch;gap:0}
  .gg-menu>li{border-bottom:1px solid var(--gg-line)}
  .gg-link{width:100%;justify-content:space-between;padding:14px 4px;font-size:1.05rem}
  .gg-link::after{left:4px;right:auto;width:36px}
  .gg-sub{position:static;display:none;opacity:1;visibility:visible;transform:none;min-width:0;
    box-shadow:none;border:0;border-radius:0;background:transparent;padding:0 0 10px 12px;transition:none}
  .gg-sub::before{display:none}
  .gg-dd.is-open>.gg-sub{display:block;transform:none}
  .gg-sub a{white-space:normal;padding:11px 12px}
  .gg-nav-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:16px}
  .gg-nav-cta .gg-btn{width:100%;padding:0 12px}
}
@media (max-width:359px){
  .gg-hd-inner{padding:0 10px;gap:6px}
  .gg-logo{padding:3px 6px}
  .gg-logo img{width:112px}
  .gg-actions{gap:6px}
  .gg-actions .gg-btn,.gg-burger{width:40px;height:40px}
  .gg-nav-cta{grid-template-columns:1fr}
}
@media (min-width:1000px) and (max-width:1139px){
  .gg-hd-inner{gap:12px;padding:0 16px}
  .gg-logo img{width:150px}
  .gg-link{padding:10px 10px}
  .gg-link::after{left:10px;right:10px}
  .gg-btn{padding:0 14px}
}
/* No-JS fallback: keep navigation reachable */
html:not(.gg-js) .gg-dd:hover>.gg-sub,html:not(.gg-js) .gg-dd:focus-within>.gg-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (max-width:999px){
  html:not(.gg-js) .gg-nav{display:block;position:static;box-shadow:none}
  html:not(.gg-js) .gg-burger{display:none}
  html:not(.gg-js) .gg-sub{display:block}
}

/* ---------- Footer ---------- */
.gg-footer{position:relative;color:var(--gg-cream-2);
  background:linear-gradient(135deg,var(--gg-forest) 0%,var(--gg-deep) 48%,var(--gg-brown) 100%)}
.gg-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gg-gold),#f0d58a 50%,var(--gg-gold))}
.gg-ft-inner{max-width:1240px;margin:0 auto;padding:56px 24px 0}
.gg-ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.gg-ft-logo{display:inline-block;background:#fff;border-radius:12px;padding:6px 10px;line-height:0;margin-bottom:20px}
.gg-ft-logo img{width:170px;height:auto}
.gg-ft-about{margin:0 0 20px;font-size:.95rem;line-height:1.7;color:rgba(255,249,239,.9)}
.gg-footer .gg-ft-info{display:grid;gap:12px;margin-bottom:26px}
.gg-ft-info li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;line-height:1.55;color:rgba(255,249,239,.92)}
.gg-ft-info svg{width:16px;height:16px;margin-top:4px;color:var(--gg-gold)}
.gg-ft-info a{color:#fff;text-decoration:underline;text-decoration-color:rgba(217,170,69,.6);text-underline-offset:3px}
.gg-ft-info a:hover{color:var(--gg-gold)}
.gg-ft-info b{color:#fff;font-weight:600}
.gg-ft-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.gg-ft-cta .gg-btn{height:46px;padding:0 22px;border-radius:999px}
.gg-ft-cta .gg-btn-call{background:linear-gradient(180deg,#e2b655,#c99530);color:#2a1d08;border-color:transparent}
.gg-ft-cta .gg-btn-call:hover{background:linear-gradient(180deg,#ecc468,#d3a038)}

.gg-ft-title{margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(217,170,69,.28);
  font:700 1.15rem/1.3 Georgia,"Times New Roman",serif;color:var(--gg-gold);letter-spacing:.01em}
.gg-ft-links{display:grid;gap:12px}
.gg-ft-links a{color:rgba(255,249,239,.92);font-size:.95rem;line-height:1.45;transition:color .15s ease,padding .15s ease}
.gg-ft-links a:hover{color:var(--gg-gold)}
.gg-ft-links a[aria-current="page"]{color:#f6dc9a;font-weight:700;text-decoration:underline;
  text-decoration-color:var(--gg-gold);text-underline-offset:4px}
.gg-ft-area li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.5;color:rgba(255,249,239,.92)}
.gg-ft-area svg{width:16px;height:16px;margin-top:4px;color:var(--gg-gold)}

.gg-ft-bottom{margin-top:44px;padding:22px 0 28px;border-top:1px solid rgba(255,249,239,.16);
  font-size:.88rem;color:rgba(255,249,239,.78)}
.gg-ft-bottom strong{color:#fff;font-weight:700}

@media (max-width:999px){
  .gg-ft-grid{grid-template-columns:1fr 1fr;gap:38px 32px}
  .gg-ft-brand{grid-column:1 / -1}
  .gg-ft-about{max-width:560px}
}
@media (max-width:599px){
  .gg-ft-inner{padding:44px 20px 0}
  .gg-ft-grid{grid-template-columns:1fr;gap:34px}
  .gg-ft-cta{flex-direction:row;flex-wrap:wrap}
  .gg-ft-bottom{padding-bottom:92px} /* clear fixed call/WhatsApp bars on some pages */
}
@media (prefers-reduced-motion:reduce){
  .gg-header *,.gg-footer *{transition:none!important}
}