/* =====================================================================
   National Sign Team: shared stylesheet
   Loaded AFTER each page's inline <style> so it wins at equal specificity.
   Currently carries the jumbo mega nav. The ~22KB of chrome CSS still
   duplicated inline on all 207 pages should migrate here next.
   Pattern spec: Websites/jumbomenu.md
   ===================================================================== */

/* ---------- JUMBO MEGA MENU (desktop) ---------- */
.nav-menu .has-mega{position:relative;display:flex;align-items:center}

.nav-menu .mega-trigger{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:none;border:0;font-family:'Archivo',sans-serif;font-weight:600;
  text-transform:uppercase;font-size:.76rem;letter-spacing:.03em;
  color:var(--text);padding:.55rem .5rem;-webkit-appearance:none;appearance:none;
  transition:color .22s;
}
.nav-menu .mega-trigger:hover,
.has-mega:hover .mega-trigger,
.has-mega:focus-within .mega-trigger{color:var(--amber)}
.nav-menu .mega-trigger .caret{
  width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s;
}
.has-mega:hover .mega-trigger .caret,
.has-mega:focus-within .mega-trigger .caret{transform:rotate(-135deg) translateY(1px)}
.has-mega.is-active > .mega-trigger,
.nav-menu > a.is-active{color:var(--amber)}

.mega{
  display:block;   /* .mega is a <span>: inline boxes ignore max-height/overflow,
                      which silently broke the mobile accordion. Never remove. */
  /* left-anchored to the trigger, not centred: centring pushed the widest panel
     off the left edge of the viewport (Services rendered at x=-96 at 1280).
     components.js clamps the right edge on open for narrow desktop widths. */
  position:absolute;top:calc(100% + 18px);left:0;
  transform:translateY(10px);margin-left:var(--mega-shift,0px);
  background:var(--panel-2);border:1px solid var(--edge);border-radius:6px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);padding:26px 28px;
  opacity:0;visibility:hidden;pointer-events:none;z-index:70;
}
.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
  transition:opacity .3s ease,transform .3s ease;
}
/* HOVER BRIDGE: required, or the 18px gap closes the panel */
.mega::before{content:'';position:absolute;top:-20px;left:0;right:0;height:22px}

.mega--compact .mega-cols{display:flex;gap:38px}
.mega--compact .mega-col{min-width:224px}
.mega--services{min-width:660px}   /* without a floor the grid shrinks to content and
                                       the wide column's labels wrap three lines deep */
.mega--services .mega-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;row-gap:24px}
.mega--compact{min-width:0}
.mega--services .mega-col--wide{grid-column:1 / -1}
.mega--services .mega-col--wide .mega-links{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}

.mega-col-title{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
  margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--edge);
}
.mega-cols{display:block}
.mega-links{display:flex;flex-direction:column}
.nav-menu .mega-col a{
  display:flex;align-items:center;gap:11px;
  font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:.9rem;
  letter-spacing:0;text-transform:none;color:var(--text);white-space:normal;
  padding:7px 0;border:0;border-radius:0;transition:color .22s,padding-left .22s;
}
.nav-menu .mega-col a:hover{color:var(--amber);padding-left:5px}
.mega-col a>span{flex:1 1 auto;min-width:0}
.mega-ic{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--amber);
  stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:color .22s,transform .22s}
.nav-menu .mega-col a:hover .mega-ic{transform:scale(1.12)}

.nav-menu a.mega-cta{text-transform:none;letter-spacing:0;border-radius:6px}
.mega-cta{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  margin-top:22px;padding:16px 18px;background:var(--panel);
  border:1px solid var(--edge);border-radius:6px;transition:border-color .22s;
}
.mega-cta:hover{border-color:var(--amber)}
.mega-cta-txt{font-family:'Inter',sans-serif;font-size:.86rem;color:var(--muted);line-height:1.45}
.mega-cta-txt strong{display:block;font-family:'Eurostile','Archivo',sans-serif;
  text-transform:uppercase;font-size:.98rem;color:#fff;font-weight:800;letter-spacing:.01em;margin-bottom:2px}
.mega-cta-btn{
  flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#fff;
  font-family:'Archivo',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:.8rem 1.3rem;border-radius:4px;transition:box-shadow .22s,transform .22s;
}
.mega-cta:hover .mega-cta-btn{box-shadow:0 0 26px -4px rgba(226,59,43,.65);transform:translateY(-1px)}

/* ---------- MOBILE: accordion inside the existing slide-in drawer ---------- */
@media(max-width:1080px){
  /* the utility bar collapses into the hamburger with the nav: its vendor CTA,
     phone and email are injected into the drawer by navdd.py */
  .topbar{display:none}

  /* the desktop open-state selectors outrank base .mega; reset or the panel
     is shoved off-screen by the inherited translateX(-50%) */
  .has-mega .mega,.has-mega.open .mega,
  .has-mega:hover .mega,.has-mega:focus-within .mega{transform:none;left:auto;margin-left:0}

  .nav-menu .has-mega{display:block;position:static}
  .nav-menu .mega-trigger{
    width:100%;justify-content:space-between;font-size:1.05rem;
    padding:16px 2px;border-bottom:1px solid var(--edge);letter-spacing:.02em;
  }
  .mega::before{display:none}
  .mega{
    display:block;position:static;opacity:1;visibility:visible;pointer-events:auto;
    background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .has-mega.open .mega{max-height:1600px}
  .has-mega.open .mega-trigger .caret{transform:rotate(-135deg) translateY(1px)}
  .mega--compact .mega-cols,
  .mega--services{min-width:0}
  .mega--services .mega-cols{display:block}
  .mega--services .mega-col--wide{grid-column:auto}
  .mega--services .mega-col--wide .mega-links{display:flex}
  .mega-col{min-width:0;padding:4px 0 8px 12px}
  .mega-col-title{margin-top:12px;font-size:.62rem}
  .nav-menu .mega-col a{min-height:44px;padding:9px 0;font-size:.98rem;border-bottom:0;
    white-space:normal;align-items:flex-start;line-height:1.35}
  .mega-cta{margin:14px 0 4px 12px}
  .mega-cta-txt{display:none}
  .mega-cta-btn{width:100%;justify-content:center;min-height:50px}
}

/* ---------- BLOG CARD THUMBNAILS ----------
   The cards used a fixed 180px height with object-fit:cover, so on any card
   wider than 320px the 1200x670 artwork was cropped top and bottom and the
   text baked into the image got cut off. Lock the box to the artwork's ratio
   so the crop is always zero. */
.post-card-thumb{aspect-ratio:16/9;height:auto}
.post-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- BUTTON ELEMENTS USING .btn ----------
   .btn/.btn-line were written for <a>, which has no background. On a <button>
   the UA stylesheet supplies background-color:buttonface (#efefef), so the
   near-white .btn-line text rendered on a near-white box and was unreadable.
   Scope to button.* so .btn-amber keeps its fill. */
button.btn{-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer}
button.btn.btn-line{background:transparent;color:var(--text);border-color:var(--edge)}
button.btn.btn-line:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- FIXED CONTACT BUBBLE ----------
   Sits above the page on every generated page. Collapsed it is a single
   circular button; expanded it reveals call / email / start a project.
   Bottom-right so it clears body copy, and it respects iOS safe areas. */
.cbub{position:fixed;right:20px;bottom:20px;z-index:90;
  right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom))}
.cbub-panel{position:absolute;right:0;bottom:70px;width:250px;background:var(--panel,#111834);
  border:1px solid var(--edge,#2a3357);border-radius:12px;padding:10px;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.75);
  opacity:0;transform:translateY(8px) scale(.97);transform-origin:100% 100%;
  pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.cbub.open .cbub-panel{opacity:1;transform:none;pointer-events:auto}
.cbub-panel a{display:flex;align-items:center;gap:.7rem;padding:11px 12px;border-radius:8px;
  color:var(--text,#e8ecf7);text-decoration:none;font-size:.92rem;line-height:1.25}
.cbub-panel a:hover,.cbub-panel a:focus-visible{background:var(--panel-2,#1a2242);color:var(--amber,#e23b2b)}
.cbub-panel a svg{width:18px;height:18px;stroke:var(--amber,#e23b2b);fill:none;stroke-width:1.9;flex:0 0 auto}
.cbub-panel .cb-k{display:block;font-family:var(--mono,monospace);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint,#7a84aa);margin:4px 0 2px 12px}
.cbub-btn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:var(--amber,#e23b2b);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 30px -6px rgba(226,59,43,.6);transition:transform .2s,box-shadow .2s}
.cbub-btn:hover{transform:translateY(-2px);box-shadow:0 16px 38px -6px rgba(226,59,43,.7)}
.cbub-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cbub-btn svg{width:25px;height:25px;stroke:#fff;fill:none;stroke-width:1.9;transition:opacity .18s,transform .18s}
.cbub-btn .ic-x{position:absolute;opacity:0;transform:rotate(-45deg)}
.cbub.open .cbub-btn .ic-chat{opacity:0;transform:rotate(45deg)}
.cbub.open .cbub-btn .ic-x{opacity:1;transform:none}
@media(max-width:560px){
  .cbub{right:14px;bottom:14px;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
  .cbub-btn{width:52px;height:52px}
  .cbub-panel{width:min(232px,calc(100vw - 40px));bottom:64px}
}
@media print{.cbub{display:none}}
@media(prefers-reduced-motion:reduce){.cbub-panel,.cbub-btn,.cbub-btn svg{transition:none}}

/* ---------- MOBILE HORIZONTAL SCROLL ----------
   The nav drawer is position:fixed and parked off-screen with translateX, so it
   escapes body{overflow-x:clip} and stretches the document. Clip on the root as
   well. Fixed children (the drawer, the contact bubble) still position against
   the viewport, so behaviour is unchanged, the phantom scroll just goes away. */
html{overflow-x:clip}