/* Site header, shared by every page (partials/site-header.php).
   Brand guide p.18: cream bar, logo left, menu, "Start a project" CTA right.
   Loaded sitewide after the brand tokens. On blog pages Groovy and style.css
   also load, so the hardening block at the end resets what they would
   otherwise change (list styles, the global a:hover, form controls). */

.site-top{position:sticky;top:0;z-index:50;padding:14px var(--md-gutter) 0}
.admin-bar .site-top{top:32px}
@media (max-width:782px){.admin-bar .site-top{top:46px}}
.site-head{position:relative;max-width:var(--md-content-width);margin:0 auto;background:var(--md-cream);border:1px solid var(--md-line);border-radius:var(--md-radius-card);box-shadow:0 8px 28px rgba(8,42,32,.14);display:flex;align-items:center;gap:22px;min-height:66px;padding:10px 10px 10px 26px}
.site-logo{flex:none;display:block;line-height:0}
.site-logo img{display:block;width:180px;height:auto}
.site-nav{margin-left:auto}
.site-menu{list-style:none;display:flex;align-items:center;gap:26px;font-family:var(--md-font-body);font-size:15px;font-weight:500}
.site-menu li{position:relative}
.site-menu a{display:block;padding:8px 0;color:var(--md-graphite);transition:color var(--md-motion-fast)}
.site-menu a:hover{color:var(--md-moss)}
.site-menu .current-menu-item>a{color:var(--md-forest);box-shadow:inset 0 -2px 0 var(--md-moss)}
.site-menu .sub-menu{display:none;position:absolute;top:100%;left:-16px;min-width:200px;list-style:none;background:var(--md-white);border:1px solid var(--md-line);border-radius:var(--md-radius-card);padding:8px 16px;box-shadow:var(--shadow)}
.site-menu li:hover>.sub-menu,.site-menu li:focus-within>.sub-menu{display:block}
.site-nav-cta{display:none}
.site-icon-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;border-radius:var(--md-radius-control);color:var(--md-forest);cursor:pointer;transition:background var(--md-motion-fast)}
.site-icon-btn:hover{background:var(--md-sage-tint)}
.site-icon-btn svg{width:20px;height:20px}
.site-social{flex:none;display:flex;align-items:center;gap:4px}
.site-social a{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--md-radius-control);color:var(--md-forest);transition:background var(--md-motion-fast)}
.site-social a:hover{background:var(--md-sage-tint)}
.site-social svg{width:19px;height:19px}
.site-cta{flex:none;padding:15px 20px;min-height:44px;white-space:nowrap}
.site-menu-btn{display:none}
.site-menu-btn .i-close,.site-menu-btn[aria-expanded="true"] .i-open{display:none}
.site-menu-btn[aria-expanded="true"] .i-close{display:block}
@media (max-width:1180px){.site-social{display:none}}
@media (max-width:1060px){.site-head{gap:16px;padding-left:20px}.site-menu{gap:18px;font-size:14.5px}}
@media (max-width:920px){
  .site-head{gap:6px;padding:8px 8px 8px 18px}
  .site-search-btn{margin-left:auto}
  .site-menu-btn{display:grid}
  .site-nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;background:var(--md-white);border:1px solid var(--md-line);border-radius:var(--md-radius-card);padding:8px 20px 18px;box-shadow:0 18px 40px rgba(8,42,32,.18)}
  .site-nav.is-open{display:block}
  .site-menu{flex-direction:column;align-items:stretch;gap:0;font-size:16px}
  .site-menu a{padding:14px 0;border-bottom:1px solid var(--md-line)}
  .site-menu .current-menu-item>a{box-shadow:none;color:var(--md-moss)}
  .site-menu .sub-menu{display:block;position:static;border:0;box-shadow:none;padding:0 0 0 14px}
}
@media (max-width:560px){
  .site-cta{display:none}
  .site-nav-cta{display:flex;justify-content:center;width:100%;margin-top:14px;padding:16px}
  .site-logo img{width:150px}
}
@media (max-width:360px){.site-logo img{width:132px}.site-head{padding-left:14px}}

/* Search popup */
.site-search{margin:12vh auto auto;width:min(640px,calc(100% - 32px));border:0;border-radius:var(--md-radius-panel);padding:28px;background:var(--md-cream);box-shadow:0 30px 80px rgba(8,42,32,.35)}
.site-search::backdrop{background:rgba(8,42,32,.7)}
.site-search form{display:flex;gap:10px;align-items:center}
.site-search input{flex:1;font-size:17px;background:var(--md-white)}
.site-search form button{flex:none;width:50px;height:50px;display:grid;place-items:center;border:0;border-radius:var(--md-radius-control);background:var(--md-forest);color:var(--md-lime);cursor:pointer}
.site-search form button svg{width:20px;height:20px}
.site-search-close{position:absolute;top:4px;right:10px;background:none;border:0;font-size:26px;line-height:1;color:var(--md-muted);cursor:pointer;padding:6px}

/* Hardening against Groovy / style.css on blog pages */
.site-top,.site-top *,.site-search,.site-search *{box-sizing:border-box}
.site-top{font-family:var(--md-font-body);line-height:1.5}
.site-menu,.site-menu ul,.site-menu li{margin:0;padding:0;list-style:none;background:none;border:0}
.site-menu li::before,.site-menu li::after,.site-menu a::before,.site-menu a::after{display:none !important}
.site-head a{text-decoration:none}
.site-menu a:hover{color:var(--md-moss) !important}
.site-head .site-cta,.site-head .site-cta:hover,.site-nav .site-nav-cta,.site-nav .site-nav-cta:hover{color:var(--md-lime) !important}
.site-head .site-cta:hover,.site-nav .site-nav-cta:hover{background:var(--md-forest-deep)}
.site-social a:hover{color:var(--md-forest) !important}
.site-icon-btn{padding:0;margin:0;box-shadow:none;font:inherit}
.site-search input{font-family:var(--md-font-body);font-size:17px;line-height:1.4;color:var(--md-graphite);border:1.5px solid var(--md-line);border-radius:var(--md-radius-control);padding:12px 14px;width:100%;margin:0;box-shadow:none}
.site-search input:focus{outline:none;border-color:var(--md-forest);box-shadow:0 0 0 3px rgba(198,243,107,.6)}
.site-search form button{padding:0;margin:0}