/* ============================================================
   Weber Advertising: "Liquid Glass" navigation (Option 3)
   PROOF implementation. Loaded AFTER css/min.css so it overrides
   the Bootstrap 3 navbar without touching the compiled stylesheet.
   Keeps the existing markup, Bootstrap dropdown plugin, hover-dropdown,
   and mobile collapse behavior intact.
   ============================================================ */

:root{
  --wa-red:#e50a2d;
  --wa-red2:#ff5a3c;
  --wa-navy:#00425f;
  --wa-glass:rgba(255,255,255,.72);
  --wa-glass-solid:rgba(255,255,255,.94);
}

/* ---- The bar itself becomes a centered floating glass pill ---- */
nav.navbar.navbar-default.navbar-fixed-top{
  position:fixed;
  top:14px;
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:1180px;
  /* border-box so the L/R padding is INSIDE the calc(100% - 32px) cap and the
     glass pill can never exceed the viewport (the nav box was measuring past the
     right edge on phones, a secondary contributor to the sideways scroll). */
  box-sizing:border-box;
  min-height:0;
  margin:0;
  padding:12px 16px 12px 28px;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--wa-glass);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:50px;
  box-shadow:0 12px 40px rgba(0,20,40,.18);
  transition:top .3s ease, padding .3s ease, background .3s ease, box-shadow .3s ease;
}
/* Scrolled state: tighten + slightly more opaque/solid */
nav.navbar.navbar-default.navbar-fixed-top.shrink{
  top:8px;
  padding:7px 14px 7px 22px;
  background:var(--wa-glass-solid);
  box-shadow:0 8px 26px rgba(0,20,40,.22);
}

/* ---- Logo (kept dark/horizontal in all states; no white-logo swap) ---- */
nav .col-xs-10.col-sm-4{
  width:auto;
  flex:0 0 auto;
  padding:0;
  position:relative;
  display:flex;            /* lay the logo + the WGSD wordmark side by side */
  align-items:center;
  gap:14px;
}
nav .logo{
  float:none;
  display:block;
  max-height:58px;
  margin:0;
  transition:max-height .3s ease;
}
.row:not(.prevent-shrink) nav.shrink .logo{
  max-height:44px;
  margin:0;
}
/* The "We Get Stuff Done" wordmark beside the logo (feedback #13). Sized to the
   logo, shrinks with it; a thin divider keeps it visually distinct from the logo. */
nav .wb-nav-wgsd{ display:inline-flex; align-items:center; line-height:0; padding-left:14px; border-left:1px solid rgba(0,40,60,.14); }
nav .wb-nav-wgsd img{ height:42px; width:auto; display:block; transition:height .3s ease; }
/* #69: owner wants the "We Get Stuff Done" mark to hold its resting size, not
   shrink on the scrolled nav (and on mobile the old shrink rule actually GREW it
   26px -> 33px). Keep it fixed: 42px desktop / 26px mobile, at rest and scrolled. */
/* Phones: show the WGSD mark too (owner request), tucked small beside the logo.
   To make the room the logo shifts left, the mark is shrunk, and the call button
   collapses to a phone ICON (the number pill + the mark do not both fit on a
   360-390px phone). The stacked menu still drops below on tap. */
@media (max-width:767px){
  nav .wb-nav-wgsd{ display:inline-flex; padding-left:8px; }
  nav .wb-nav-wgsd img{ height:26px; }
}

/* The mobile-only right cluster (call + hamburger) is hidden on desktop, where
   the phone lives in the menu and there is no hamburger. */
nav .wb-nav-right{ display:none; }

/* ---- Right-hand menu cluster ---- */
nav .navbar-collapse{
  flex:1 1 auto;
  padding:0;
  border:0;
  box-shadow:none;
}
nav .navbar-nav{
  position:static !important;   /* override absolute positioning from min.css */
  float:none;
  margin:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
}
nav .navbar-nav>li{ float:none; }

/* ---- Links as pill buttons ---- */
nav.navbar-default .navbar-nav>li>a{
  font-family:'Montserrat','Poppins',sans-serif;
  font-weight:800;                /* OWNER 2026-06-30: nav should read bolder / stand out */
  font-size:16px;
  letter-spacing:.04em;           /* heavier weight wants slightly tighter tracking */
  text-transform:uppercase;
  color:#23262b;                  /* OWNER 2026-06-30: dark grey, not the blue-ish navy */
  padding:13px 15px;
  border-radius:30px;
  line-height:1;
  /* OWNER feedback #30/#20: keep the label + caret on ONE centered row. Without
     this the caret wrapped to a second line (arrows "below, not to the right"),
     which also made the caret items taller than WORK so WORK baseline-shifted. */
  display:inline-flex; align-items:center; white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
nav.navbar-default .navbar-nav>li>a:hover,
nav.navbar-default .navbar-nav>li>a:focus,
nav.navbar-default .navbar-nav>.open>a,
nav.navbar-default .navbar-nav>.open>a:hover,
nav.navbar-default .navbar-nav>.open>a:focus{
  background:rgba(0,66,95,.10);
  color:#23262b;
}
nav .navbar-nav>li>a .caret{
  margin-left:4px;
  opacity:.55;
  transition:transform .2s ease;
}
nav .navbar-nav>.open>a .caret{ transform:rotate(180deg); }

/* ---- Red "liquid" CTA (phone) ---- */
nav .navbar-nav .tel.btn-danger,
nav .navbar-nav .tel.btn-danger:hover,
nav .navbar-nav .tel.btn-danger:focus,
nav .navbar-nav .tel.btn-danger:active{
  position:relative;
  top:0;
  margin-left:8px;
  padding:13px 20px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff !important;
  background:linear-gradient(135deg,var(--wa-red),var(--wa-red2)) !important;
  border:none !important;
  border-radius:30px;
  box-shadow:0 8px 20px rgba(229,10,45,.30);
  transition:transform .2s ease, box-shadow .2s ease;
}
nav .navbar-nav .tel.btn-danger:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(229,10,45,.40);
}
nav .navbar-nav .tel.btn-danger .glyphicon{ top:2px; }

/* ---- Tight-desktop range: keep the whole horizontal nav INSIDE the glass pill.
   Between the mobile bar (<=767px) and a roomy desktop (>=1200px) the logo, WGSD
   mark, five menu items, search, and the full phone pill do not all fit, so the
   phone pill spilled out the right. Tighten progressively: the WGSD wordmark drops
   first, then padding, gaps, and font-size shrink. ---- */
@media (min-width:992px) and (max-width:1199px){
  nav.navbar.navbar-default.navbar-fixed-top{ padding-left:18px; }
  nav .wb-nav-wgsd{ display:none; }                 /* frees ~90px; the mark returns >=1200px */
  nav .navbar-nav{ gap:2px; }
  nav.navbar-default .navbar-nav>li>a{ padding:11px 11px; font-size:15px; letter-spacing:.02em; }
  nav .navbar-nav .tel.btn-danger{ padding:11px 16px; font-size:14px; margin-left:6px; }
}
@media (min-width:768px) and (max-width:991px){
  nav.navbar.navbar-default.navbar-fixed-top{ padding-left:10px; }
  nav .wb-nav-wgsd{ display:none; }                 /* too tight for the mark on a tablet */
  nav .col-sm-4.col-xs-10{ gap:8px; }
  nav .navbar-nav{ gap:0; }
  nav.navbar-default .navbar-nav>li>a{ padding:8px 6px; font-size:12.5px; letter-spacing:0; }
  nav .navbar-nav>li>a .caret{ margin-left:2px; }
  nav .navbar-nav .tel.btn-danger{ padding:8px 11px; font-size:12.5px; margin-left:4px; }
  nav .logo{ max-height:42px; }
}

/* ---- Dropdown panels as frosted cards ---- */
nav .dropdown-menu{
  background:var(--wa-glass-solid);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,20,40,.22);
  padding:8px;
  margin-top:12px;
  min-width:250px;
}
nav .dropdown-menu>li>a{
  color:#2b3038; /* AE feedback #76: sub-nav items read black/grey, not navy blue */
  font-family:'Inter',sans-serif;
  padding:11px 16px !important;
  border-radius:10px;
  border-bottom:none !important;
  white-space:normal;
  transition:background .15s ease, color .15s ease;
}
nav .dropdown-menu>li>a:hover,
nav .dropdown-menu>li>a:focus{
  background:rgba(0,66,95,.08);
  color:var(--wa-red);
}
nav .dropdown-menu small{ color:#8a9097; }
/* keep the social icons row from the Contact dropdown tidy */
nav .dropdown-menu .row{ margin:0; }

/* ---- Hamburger (mobile) ---- */
nav.navbar-default .navbar-toggle{
  border:none;
  background:transparent;
  margin:6px 6px 6px 0;
  padding:10px;
  /* Comfortable 44px tap target (was ~42x34, under the guideline). The icon
     stays the same visual size; only the clickable box grows. (No display
     change here: Bootstrap hides the toggle above 768px and the mobile block
     below turns it into a centered flex column, so this base rule must not
     override that display:none on desktop.) */
  min-width:44px; min-height:44px;
  /* Sit ABOVE the red call pill so the toggle can never be covered by it
     (at the narrowest widths the pill used to creep over the hamburger lines). */
  position:relative; z-index:2;
}
nav.navbar-default .navbar-toggle:hover,
nav.navbar-default .navbar-toggle:focus{ background:rgba(0,66,95,.08); border-radius:12px; }
nav.navbar-default .navbar-toggle .icon-bar{
  background:#23262b;
  width:22px;
  height:2px;
  border-radius:2px;
}
/* Bootstrap spaces the three bars with margin-top on bars 2-3; with the toggle
   now a flex column that centers its children, restore that even spacing. */
nav.navbar-default .navbar-toggle .icon-bar + .icon-bar{ margin-top:4px; }

/* ---- Mobile layout: pill wraps, menu drops into a glass card ---- */
@media (max-width:767px){
  /* Mobile bar: [logo + WGSD] flush left, [call + hamburger] grouped right in
     .wb-nav-right so they stay together and never shove each other off the pill. */
  nav.navbar.navbar-default.navbar-fixed-top{
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    border-radius:26px;
    padding:9px 12px;
    gap:8px;
  }
  /* Left: logo + WGSD, content width, flush left. */
  nav .col-xs-10.col-sm-4{
    flex:0 1 auto; min-width:0; padding:0; margin-right:auto;
    display:flex; flex-wrap:nowrap; align-items:center; gap:8px;
  }
  nav .col-xs-10.col-sm-4 > a{ flex:0 0 auto; line-height:0; }
  nav .logo{ max-height:40px; }
  /* Right cluster: call button + hamburger, together, vertically centered. */
  nav .wb-nav-right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
  nav .wb-nav-phone{ display:block; line-height:0; }
  nav .wb-nav-phone .mobile-tel.btn-danger{
    margin:0; white-space:nowrap;
    /* #75: a true circle, sized down (owner: it was too big). */
    width:38px; height:38px; padding:0; aspect-ratio:1/1;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:0 !important;
    background:linear-gradient(135deg,var(--wa-red),var(--wa-red2)) !important;
    border:none !important; border-radius:50%;
    position:static !important; transform:none !important;
  }
  nav .wb-nav-phone .mobile-tel.btn-danger .glyphicon{ font-size:15px; margin:0; top:0; left:0; }
  nav .navbar-header{
    flex:0 0 auto; float:none; margin:0;
    display:flex; align-items:center;
  }
  nav.navbar-default .navbar-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0; top:0 !important;
  }
  /* Stacked menu drops onto its own line below the bar. */
  nav .navbar-collapse{ flex:1 0 100%; margin:8px 0 4px; }
  nav .navbar-nav{ flex-direction:column; align-items:stretch; gap:2px; }
  nav.navbar-default .navbar-nav>li>a{ text-align:left; }
  nav .navbar-nav .tel.btn-danger{ margin:8px 8px 4px; text-align:center; justify-content:center; }
}

/* ---- Homepage: bar floats OVER the hero video (no solid offset). ----
   The body offset is removed in JS; give the hero's content room so it
   clears the floating bar at the top. */
body.nav-overlay header .container{ padding-top:46px; }
@media (min-width:768px){
  body.nav-overlay header .container{ padding-top:76px; }
}