/* ==========================================================================
   Build Gurus - global site chrome (header + footer) for LEGACY pages.

   The redesigned home page carries these styles inside home.css. Legacy pages
   (about-us, gallery, category/blog, contact, quote, 404, search) still run
   the old Bootstrap bundle, so this file exists to dress them in the new
   header and footer WITHOUT importing the .bg-page element reset - that reset
   (p/ul/a/h* zeroing) would shred Bootstrap layouts. Every rule here is
   scoped under .bg-header or .bg-footer, so it can only touch our own markup.

   The header on these pages is rendered with `is-stuck bg-header--static`:
   permanently solid navy (there is no hero to be transparent over) and no
   scroll JS. body.bg-chrome gets top padding to clear the fixed header.

   Tokens are declared on the chrome roots themselves because the pages lack
   the body.bg-home class that home.css hangs them on.
   ========================================================================== */

.bg-header,
.bg-footer {
  --cream:      #faf9f5;
  --white:      #ffffff;
  --navy:       #16293a;
  --navy-deep:  #0d1a26;
  --line:       rgba(22, 41, 58, .12);
  --muted:      rgba(22, 41, 58, .68);
  --muted-soft: rgba(22, 41, 58, .60);
  --r-pill:     999px;
  --pad-x:      clamp(20px, 5vw, 56px);
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.bg-header, .bg-header *, .bg-header *::before, .bg-header *::after,
.bg-footer, .bg-footer *, .bg-footer *::before, .bg-footer *::after { box-sizing: border-box; }

/* Normalisation the home page gets from the .bg-page reset - here scoped so
   Bootstrap's own elements are untouched. */
.bg-header a, .bg-footer a { color: inherit; text-decoration: none; }
.bg-header ul, .bg-footer ul { margin: 0; padding: 0; list-style: none; }
.bg-header p, .bg-footer p { margin: 0; }
.bg-footer h2 { margin: 0; font-weight: 400; }
.bg-header img, .bg-footer img { max-width: 100%; display: block; }
.bg-header :focus-visible { outline: 3px solid #f7941e; outline-offset: 3px; border-radius: 4px; }
.bg-footer :focus-visible { outline: 3px solid #f7941e; outline-offset: 3px; border-radius: 4px; }
.bg-sr {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Clearance under the fixed header. The class is added to <body> by
   BG_Home::body_class() on every page that uses this chrome. */
body.bg-chrome { padding-top: 70px !important; }

/* ------------------------------------------------------------------ header */
.bg-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030; /* above Bootstrap's sticky elements (their navbars use 1020) */
}
.bg-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  max-width: 1600px; margin: 0 auto;
  padding: 18px var(--pad-x);
}
.bg-header.is-stuck {
  /* FULL frosted glass, light variant - matches .bg-header--glass in
     home.css (client direction 2026-08-09). Nav recoloured navy below. */
  background: rgba(250, 249, 245, .55);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(22, 41, 58, .08), 0 8px 30px rgba(22, 41, 58, .07);
}
.bg-header.is-stuck .bg-header__inner { padding-top: 12px; padding-bottom: 12px; }
.bg-header__logo img { height: 46px; width: auto; }

/* --------------------------------------------------------------------- nav */
.bg-nav__toggle {
  display: none;
  background: rgba(22, 41, 58, .06);
  border: 1px solid rgba(22, 41, 58, .14);
  border-radius: var(--r-pill);
  padding: 11px 14px; cursor: pointer;
}
.bg-nav__bars,
.bg-nav__bars::before,
.bg-nav__bars::after {
  display: block; width: 20px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.bg-nav__bars { position: relative; }
.bg-nav__bars::before,
.bg-nav__bars::after { content: ''; position: absolute; left: 0; }
.bg-nav__bars::before { top: -6px; }
.bg-nav__bars::after  { top: 6px; }
.bg-nav__toggle[aria-expanded="true"] .bg-nav__bars { background: transparent; }
.bg-nav__toggle[aria-expanded="true"] .bg-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.bg-nav__toggle[aria-expanded="true"] .bg-nav__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.bg-header .bg-nav__list {
  display: flex; align-items: center; gap: 30px;
  margin: 0;
  padding: 11px 14px 11px 34px;
  background: rgba(22, 41, 58, .05);
  border: 1px solid rgba(22, 41, 58, .1);
  border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 500;
}
.bg-header .bg-nav__list a { color: rgba(22, 41, 58, .78); transition: color .16s ease; }
.bg-header .bg-nav__list a:hover { color: var(--navy); }
.bg-header .bg-nav__list [aria-current="page"] { color: var(--navy); font-weight: 600; }
.bg-header .bg-nav__phone { font-size: 16px; font-weight: 700; color: var(--navy) !important; }
.bg-header .bg-nav__cta {
  background: var(--navy); color: var(--white) !important;
  padding: 14px 26px; border-radius: var(--r-pill);
  font-size: 15.5px; font-weight: 700;
  transition: transform .18s ease;
}
.bg-header .bg-nav__cta:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------------ footer */
.bg-footer { background: var(--cream); border-top: 1px solid var(--line); padding: 64px 0 30px; font-size: 14px; }
.bg-footer .bg-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-x); }
.bg-footer__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px;
  color: var(--muted);
}
.bg-footer__brand img { height: 40px; width: auto; margin-bottom: 16px; }
.bg-footer__brand p + p { margin-top: 6px; }
.bg-footer__h {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--muted-soft); margin-bottom: 14px; text-transform: uppercase;
}
.bg-footer__col li + li { margin-top: 9px; }
.bg-footer__col a:hover { color: var(--navy); }
.bg-footer__bar {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted-soft);
}
.bg-footer__bar a { border-bottom: 1px solid currentColor; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .bg-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  body.bg-chrome { padding-top: 64px !important; }
  .bg-header__inner { padding: 14px var(--pad-x); }
  .bg-header.is-stuck .bg-header__logo img { height: 40px; }
  .bg-nav__toggle { display: block; }
  .bg-nav { position: relative; }
  .bg-header .bg-nav__list {
    position: absolute; right: 0; top: calc(100% + 12px);
    flex-direction: column; align-items: stretch; gap: 4px;
    min-width: 240px; padding: 14px;
    border-radius: 18px;
    background: rgba(250, 249, 245, .98);
    border: 1px solid rgba(22, 41, 58, .12);
    box-shadow: 0 18px 44px rgba(22, 41, 58, .18);
    display: none;
  }
  .bg-header .bg-nav__list.is-open { display: flex; }
  .bg-header .bg-nav__list li { padding: 6px 4px; }
  .bg-header .bg-nav__cta { display: block; text-align: center; margin-top: 6px; }
}
@media (max-width: 620px) {
  .bg-footer__cols { grid-template-columns: 1fr; gap: 30px; }
}