/* ============================================================
   Reviews-site banner — SHARED STRUCTURE.
   Loaded after css/styles.css + css/reviews-site.css, before
   css/banner.css (colour/type only). Folded in 06/08/2026 from
   header-variants/base.css after Marc delegated the header-variant
   pick to the build lane ("pick your rec, don't waste credit
   choosing") — V1 (brand-blue) was chosen; see css/banner.css.
   Handles layout/positioning/sizing/behaviour that must stay
   identical regardless of colour treatment.
   ============================================================ */

.site-banner{
  position:sticky;top:0;left:0;right:0;z-index:100;
}
.banner-row{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 16px;position:relative;
}
.banner-brand{display:flex;align-items:center;gap:9px;min-width:0}
.banner-logo{height:23px;width:auto;display:block;flex:0 0 auto}
.banner-word{
  font-size:14.5px;font-weight:650;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.banner-links{display:none}
.banner-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.banner-tel{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* burger — spans use currentColor so banner.css only sets .burger{color:…} */
.burger{
  width:36px;height:36px;border:0;background:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  flex:0 0 auto;
}
.burger span{display:block;width:18px;height:1.8px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .25s ease}
.menu-open .burger span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* mobile dropdown menu — positioned relative to the sticky banner itself
   (top:100%) so it always sits flush under the banner regardless of how
   tall the banner is (1-row vs 2-row). */
.banner-menu{
  position:absolute;top:100%;left:0;right:0;z-index:95;
  padding:12px 22px 24px;display:none;
}
.menu-open .banner-menu{display:block}
.banner-menu a{
  display:block;padding:13px 0;font-size:19px;font-weight:600;letter-spacing:-.015em;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.banner-menu a:last-child{border-bottom:0}

/* two-row stats band */
.banner-stats{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:9px 16px 12px;flex-wrap:wrap;
}
.banner-stars{font-size:15px;letter-spacing:2.5px;line-height:1}
.banner-pill{
  display:inline-flex;align-items:center;
  font-size:12px;font-weight:650;letter-spacing:.005em;
  padding:5px 13px;border-radius:999px;white-space:nowrap;
}

@media(min-width:768px){
  .banner-row{height:72px;padding:0 40px}
  .burger,.banner-menu{display:none!important}
  .banner-links{
    display:flex;gap:30px;position:absolute;left:50%;transform:translateX(-50%);
  }
  .banner-links a{font-size:13.5px;transition:color .15s ease}
  .banner-logo{height:30px}
  .banner-word{font-size:17px}
  .banner-tel{font-size:13.5px}
  .banner-stats{padding:11px 18px 16px}
  .banner-stars{font-size:18px}
  .banner-pill{font-size:13.5px;padding:6px 16px}
}