/* ==========================================================================
   Beaver Dam Auto Sales — header & footer
   Topbar · sticky blurred header · nav with gold underline · mobile drawer
   Footer 4-col · bottom bar · dam stripe. Depends on tokens.css + base.css.
   ========================================================================== */

/* ---------- Top utility bar ---------- */
.bda-topbar{display:none;background:var(--bda-gold-500);color:var(--bda-blue-900);height:var(--bda-topbar-h);font-size:.85rem;font-weight:600;letter-spacing:.01em}
.bda-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:100%}
.bda-topbar__list{display:flex;align-items:center;gap:1.75rem;margin:0;padding:0;list-style:none}
.bda-topbar__item{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.bda-topbar__item svg{width:16px;height:16px;flex:none}
.bda-topbar a{display:inline-flex;align-items:center;gap:.45rem;color:inherit;text-decoration:none}
.bda-topbar a:hover{text-decoration:underline;text-underline-offset:.2em}
.bda-topbar__open{display:inline-flex;align-items:center;gap:.45rem}
.bda-topbar__open::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bda-green);box-shadow:0 0 0 2px rgba(31,122,69,.25)}
@media (min-width:900px){.bda-topbar{display:block}}

/* ---------- Header ---------- */
/* NOTE: the blur lives on ::before — a backdrop-filter on the header itself would make it the
   containing block for the fixed-position mobile drawer (SPEC: drawer is viewport-relative). */
.bda-header{position:sticky;top:0;z-index:100;height:var(--bda-header-h);color:var(--bda-on-dark);border-bottom:1px solid var(--bda-on-dark-line);transition:height var(--bda-dur) var(--bda-ease),box-shadow var(--bda-dur) var(--bda-ease)}
.bda-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,16,64,.92);-webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);transition:background-color var(--bda-dur) var(--bda-ease)}
.bda-header.is-scrolled{--bda-header-h:68px;box-shadow:0 10px 30px -12px rgba(6,16,64,.6)}
.bda-header.is-scrolled::before{background:rgba(6,16,64,.96)}
.bda-header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;height:100%}

/* Logo lockup (HTML, not an image) */
.bda-logo{display:inline-flex;align-items:center;gap:.7rem;color:var(--bda-on-dark);text-decoration:none;line-height:1}
.bda-logo:hover{color:var(--bda-on-dark)}
.bda-logo__mark{width:52px;height:52px;object-fit:contain;flex:none;transition:width var(--bda-dur) var(--bda-ease),height var(--bda-dur) var(--bda-ease);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.is-scrolled .bda-logo__mark{width:44px;height:44px}
.bda-logo__text{display:flex;flex-direction:column;gap:.15rem;font-family:var(--bda-font-display);text-transform:uppercase;white-space:nowrap}
.bda-logo__text b{font-weight:800;font-size:1.55rem;letter-spacing:.01em;color:#fff}
.bda-logo__text i{font-style:normal;font-weight:700;font-size:.82rem;letter-spacing:.2em;color:var(--bda-gold-500)}
.bda-logo__img{height:52px;width:auto}

/* Primary nav */
.bda-nav__list{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,2.2vw,2rem);margin:0;padding:0;list-style:none}
.bda-nav__link{position:relative;display:inline-block;padding:.55rem .1rem;font-family:var(--bda-font-body);font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bda-on-dark);text-decoration:none;white-space:nowrap;transition:color var(--bda-dur) var(--bda-ease)}
.bda-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--bda-gold-500);transform:scaleX(0);transform-origin:left;transition:transform var(--bda-dur) var(--bda-ease)}
.bda-nav__link:hover,.bda-nav__link:focus-visible{color:#fff}
.bda-nav__link:hover::after,.bda-nav__link:focus-visible::after,.bda-nav__link.is-active::after,.bda-nav__link[aria-current="page"]::after,.current-menu-item>.bda-nav__link::after{transform:scaleX(1)}
.bda-nav__extra{display:none}

/* Right cluster */
.bda-header__cta{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.bda-header__phone{display:inline-flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-weight:700;font-size:1rem;white-space:nowrap;padding:.4rem .25rem;border-radius:var(--bda-radius-sm)}
.bda-header__phone svg{width:20px;height:20px;color:var(--bda-gold-500);flex:none}
.bda-header__phone:hover{color:var(--bda-gold-400)}
.bda-header__phone-text{display:none}
.bda-header__btn{display:none}

/* Mobile toggle */
.bda-nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--bda-radius-sm);color:#fff;border:1px solid var(--bda-on-dark-line);background:rgba(255,255,255,.04)}
.bda-nav-toggle svg{width:24px;height:24px}
.bda-nav-toggle__close{display:none}
.bda-nav-toggle[aria-expanded="true"] .bda-nav-toggle__open{display:none}
.bda-nav-toggle[aria-expanded="true"] .bda-nav-toggle__close{display:block}

/* Mobile drawer (< 1024px) */
@media (max-width:1023.98px){
  .bda-header__inner{grid-template-columns:auto 1fr auto}
  .bda-nav{position:fixed;top:var(--bda-header-h);right:0;bottom:0;width:min(380px,100%);background:var(--bda-blue-950);border-left:1px solid var(--bda-on-dark-line);box-shadow:var(--bda-shadow-lg);padding:1.5rem var(--bda-gutter) 2.5rem;overflow-y:auto;transform:translateX(102%);visibility:hidden;transition:transform .32s var(--bda-ease),visibility 0s linear .32s;z-index:5}
  .bda-nav--open{transform:none;visibility:visible;transition:transform .32s var(--bda-ease),visibility 0s}
  .bda-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .bda-nav__item{border-bottom:1px solid var(--bda-on-dark-line)}
  .bda-nav__link{display:flex;align-items:center;justify-content:space-between;padding:1rem .25rem;font-size:1.05rem}
  .bda-nav__link::after{display:none}
  .bda-nav__link.is-active,.bda-nav__link[aria-current="page"]{color:var(--bda-gold-500)}
  .bda-nav__extra{display:grid;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--bda-on-dark-line)}
  .bda-nav__extra .bda-btn{width:100%}
  .bda-nav__meta{display:grid;gap:.55rem;color:var(--bda-on-dark-muted);font-size:.95rem}
  .bda-nav__meta a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
  .bda-nav__meta svg{width:18px;height:18px;color:var(--bda-gold-500);flex:none}
  body.bda-nav-open{overflow:hidden}
  body.bda-nav-open::after{content:"";position:fixed;inset:0;background:rgba(6,16,64,.55);z-index:90;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  /* Fail-open: without JS the nav simply flows under the logo row */
  html:not(.js) .bda-header{height:auto;position:relative}
  html:not(.js) .bda-header__inner{grid-template-columns:auto 1fr;padding-block:.75rem}
  html:not(.js) .bda-nav{position:static;transform:none;visibility:visible;width:auto;grid-column:1/-1;padding:0 0 .5rem;box-shadow:none;border:0;background:transparent}
  html:not(.js) .bda-nav__list{flex-direction:row;flex-wrap:wrap;gap:.25rem 1rem}
  html:not(.js) .bda-nav__item{border:0}
  html:not(.js) .bda-nav__link{padding:.5rem 0;font-size:.9rem}
  html:not(.js) .bda-nav__extra{display:none}
  html:not(.js) .bda-nav-toggle{display:none}
}
@media (min-width:600px){
  .bda-header__btn{display:inline-flex}
}
@media (min-width:1024px){
  .bda-nav-toggle{display:none}
  .bda-header__phone-text{display:inline}
}
@media (min-width:1200px){
  .bda-header__inner{gap:2.5rem}
}

/* ---------- Footer ---------- */
.bda-footer{position:relative;background:var(--bda-blue-950);color:var(--bda-on-dark);padding-top:clamp(3.5rem,6vw,5rem);margin-top:auto}
.bda-footer::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--bda-dam-stripe);opacity:.9;pointer-events:none}
.bda-footer__grid{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:clamp(2.5rem,5vw,4rem)}
.bda-footer__title{font-family:var(--bda-font-display);font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bda-gold-500);margin:0 0 1.1rem}
.bda-footer__list{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.bda-footer__list a{color:var(--bda-on-dark-muted);text-decoration:none;font-size:.97rem;transition:color var(--bda-dur) var(--bda-ease)}
.bda-footer__list a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--bda-gold-500)}
.bda-footer__brand .bda-logo{margin-bottom:1rem}
.bda-footer__tagline{font-family:var(--bda-font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:var(--bda-gold-500);margin:0 0 .75rem}
.bda-footer__about{color:var(--bda-on-dark-muted);font-size:.97rem;max-width:34ch;margin:0 0 1.25rem}
.bda-footer__contact{display:grid;gap:.7rem;margin:0 0 1.25rem;padding:0;list-style:none}
.bda-footer__contact li{display:flex;gap:.6rem;align-items:flex-start;color:var(--bda-on-dark-muted);font-size:.97rem;line-height:1.45}
.bda-footer__contact svg{width:18px;height:18px;flex:none;color:var(--bda-gold-500);margin-top:.15rem}
.bda-footer__contact a{color:#fff;text-decoration:none;font-weight:600}
.bda-footer__contact a:hover{color:var(--bda-gold-400)}
.bda-social{display:flex;gap:.6rem;margin:0;padding:0;list-style:none}
.bda-social a{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);color:#fff;transition:background-color var(--bda-dur) var(--bda-ease),color var(--bda-dur) var(--bda-ease),border-color var(--bda-dur) var(--bda-ease),transform var(--bda-dur) var(--bda-ease)}
.bda-social a:hover{background:var(--bda-gold-500);border-color:var(--bda-gold-500);color:var(--bda-blue-950);transform:translateY(-2px)}
.bda-social svg{width:20px;height:20px}
.bda-footer__bottom{border-top:1px solid var(--bda-on-dark-line);padding:1.25rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1.5rem;font-size:.85rem;color:var(--bda-on-dark-muted)}
.bda-footer__bottom p{margin:0}
.bda-footer__legal{display:flex;gap:1.25rem;margin:0;padding:0;list-style:none}
.bda-footer__legal a{color:var(--bda-on-dark-muted);text-decoration:none}
.bda-footer__legal a:hover{color:#fff}
.bda-footer .bda-hours{max-width:320px}
@media (min-width:600px){
  .bda-footer__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .bda-footer__grid{grid-template-columns:1.5fr .9fr .9fr 1.3fr;gap:3rem}
}