/* =========================================================
   Minnesota Metal Exteriors — Site header (Elementor Theme Builder)
   Everything is scoped under .mme-header so it can't leak into
   Elementor content, and so Hello Elementor's reset.css (which
   styles every <button> pink on hover) can't leak in.
   ========================================================= */

/* ---------- Brand tokens (shared site-wide) ---------- */
:root{
  --blue-900:#0f1740;
  --blue-800:#18256a;
  --blue-700:#2a3d99;   /* logo blue */
  --blue-100:#e7ebf8;
  --blue-50:#f2f4fb;
  --copper-700:#8c4216;
  --copper-600:#a8501c;
  --copper-200:#f3c9a8;
  --snow:#ffffff;
  --ink:#1a2234;
  --line:#e3e0d8;
  --on-dark-soft:#aeb7dc;
  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius:14px;
  --shadow-lg:0 2px 4px rgba(15,23,64,.06), 0 20px 48px rgba(15,23,64,.16);
  --wrap:1200px;
  --gutter:clamp(16px, 4vw, 32px);
  --header-h:84px;
  --topbar-h:36px;
  --adminbar-h:0px;
}
.admin-bar{--adminbar-h:32px}
@media (max-width:782px){.admin-bar{--adminbar-h:46px}}
@media (max-width:600px){.admin-bar{--adminbar-h:0px}} /* WP's admin bar scrolls away on small phones */

/* ---------- Make the Elementor header location sticky ----------
   The top bar scrolls away; the white header row stays pinned. */
.elementor-location-header{
  position:sticky;
  top:calc(var(--adminbar-h) - var(--topbar-h));
  z-index:100;
}
/* Remove Elementor's default spacing around the HTML widget */
.elementor-location-header .elementor-widget-html,
.elementor-location-header .elementor-widget-html .elementor-widget-container{margin:0;padding:0}

/* Full-bleed: let the bars span the whole screen even if the Elementor
   container is set to "Boxed" or has default padding. */
.elementor-location-header .e-con,
.elementor-location-header .e-con > .e-con-inner,
.elementor-location-header .elementor-section > .elementor-container{
  max-width:none !important;width:100%;
  padding:0 !important;margin:0 !important;gap:0 !important;
  --content-width:100%;--container-max-width:100%;
}
.elementor-location-header .elementor-column > .elementor-widget-wrap{padding:0 !important}

/* Hello Elementor's theme.css caps any ".site-header" at 1140px wide and
   centers it. Our header row shares that class name, so undo those rules. */
.mme-header div.site-header{max-width:none;width:100%;margin:0;padding:0}

/* ---------- Base inside the header ---------- */
.mme-header{font-family:var(--font-body);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
.mme-header *,.mme-header *::before,.mme-header *::after{box-sizing:border-box}
.mme-header img{max-width:100%;height:auto;display:block}
.mme-header ul{margin:0;padding:0;list-style:none}
.mme-header p{margin:0}
.mme-header a{text-decoration:none}
.mme-header :focus-visible{outline:3px solid #c2662d;outline-offset:3px;border-radius:4px}
.mme-header .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Buttons ---------- */
.mme-header .btn{
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.7em 1.15em;border-radius:999px;border:2px solid transparent;
  font:700 .95rem/1.2 var(--font-body);text-decoration:none;cursor:pointer;
  transition:transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mme-header .btn:hover{transform:translateY(-1px)}
.mme-header .btn svg{width:1.1em;height:1.1em;flex:none}
.mme-header .btn--primary{background:var(--copper-600);color:#fff;box-shadow:0 6px 16px rgba(168,80,28,.25)}
.mme-header .btn--primary:hover{background:var(--copper-700);color:#fff}
.mme-header .btn--ghost{border-color:var(--blue-700);color:var(--blue-700);background:transparent}
.mme-header .btn--ghost:hover{background:var(--blue-700);color:#fff}

/* ---------- Emergency / utility bar ---------- */
.mme-header .topbar{background:var(--blue-900);color:var(--on-dark-soft);font-size:.8125rem;line-height:1}
.mme-header .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:var(--topbar-h);white-space:nowrap;overflow:hidden}
.mme-header .topbar__emergency{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;letter-spacing:.01em}
.mme-header .topbar__emergency:hover{color:#fff}
.mme-header .topbar__phone{font-weight:700;color:var(--copper-200)}
.mme-header .topbar__emergency:hover .topbar__phone{text-decoration:underline}
.mme-header .topbar__trust{letter-spacing:.02em}
.mme-header .pulse{position:relative;width:8px;height:8px;border-radius:50%;background:#ff6b5e;flex:none}
.mme-header .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#ff6b5e;animation:mme-pulse 2s ease-out infinite}
@keyframes mme-pulse{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}
@media (max-width:620px){.mme-header .topbar .wrap{justify-content:center}.mme-header .topbar__trust{display:none}}

/* ---------- Header row ---------- */
.mme-header .site-header{background:var(--snow);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.mme-header.is-scrolled .site-header{box-shadow:0 6px 20px rgba(15,23,64,.10)}
.mme-header .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h)}
.mme-header .logo img{height:62px;width:auto}

/* Menu toggle (explicit hover/focus states beat Hello's button reset) */
.mme-header .nav-toggle,
.mme-header .nav-toggle:hover,
.mme-header .nav-toggle:focus{
  display:none;align-items:center;gap:8px;cursor:pointer;padding:10px 14px;margin:0;border-radius:10px;
  border:1px solid var(--line);background:var(--snow);font:700 .95rem/1 var(--font-body);color:var(--blue-900);text-transform:none
}
.mme-header .nav-toggle:hover{background:var(--blue-50)}
.mme-header .nav-toggle__bars{position:relative;width:22px;height:14px}
.mme-header .nav-toggle__bars span{position:absolute;left:0;width:100%;height:2px;background:var(--blue-900);transition:transform .2s, opacity .2s, top .2s}
.mme-header .nav-toggle__bars span:nth-child(1){top:0}
.mme-header .nav-toggle__bars span:nth-child(2){top:6px}
.mme-header .nav-toggle__bars span:nth-child(3){top:12px}
.mme-nav-open .mme-header .nav-toggle__bars span:nth-child(1){top:6px;transform:rotate(45deg)}
.mme-nav-open .mme-header .nav-toggle__bars span:nth-child(2){opacity:0}
.mme-nav-open .mme-header .nav-toggle__bars span:nth-child(3){top:6px;transform:rotate(-45deg)}

/* Desktop navigation */
.mme-header .main-nav>ul{display:flex;align-items:center;gap:2px}
.mme-header .main-nav a{display:block;color:var(--blue-900);font-weight:600;font-size:.97rem;line-height:1.3;padding:10px 11px;border-radius:8px;white-space:nowrap}
.mme-header .main-nav a:hover{background:var(--blue-100);color:var(--blue-900)}
.mme-header .has-sub{position:relative;display:flex;align-items:center;flex-wrap:wrap}
.mme-header .sub-toggle{display:none}
.mme-header .has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.6}
.mme-header .sub{
  padding:10px;position:absolute;left:0;top:100%;min-width:260px;background:var(--snow);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:all .15s ease;z-index:5
}
.mme-header .has-sub:hover>.sub,.mme-header .has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.mme-header .sub a{font-weight:500;padding:8px 12px}
.mme-header .sub .sub-title>a{font-weight:700;color:var(--copper-600)}
.mme-header .sub ul{margin:0 0 6px;padding:0 0 0 12px;border-left:2px solid var(--line)}
.mme-header .sub--mega{display:grid;grid-template-columns:repeat(4, max-content);gap:4px 18px;min-width:0;left:-160px}
.mme-header .header-cta{display:flex;gap:10px;align-items:center}

@media (max-width:1440px){ .mme-header .header-cta .btn--ghost{display:none} }

/* Tablet & phone navigation */
@media (max-width:1100px){
  .mme-header .nav-toggle,.mme-header .nav-toggle:hover,.mme-header .nav-toggle:focus{display:inline-flex;order:3}
  .mme-header .header-cta{order:2;margin-left:auto}
  .mme-header .main-nav{
    position:fixed;left:0;right:0;bottom:0;top:var(--mme-nav-top, 120px);
    background:var(--snow);overflow-y:auto;padding:12px var(--gutter) 96px;
    transform:translateX(100%);visibility:hidden;transition:transform .25s ease, visibility .25s;
    border-top:1px solid var(--line);z-index:99
  }
  .mme-nav-open .mme-header .main-nav{transform:none;visibility:visible}
  .mme-header .main-nav>ul{flex-direction:column;align-items:stretch;gap:0}
  .mme-header .main-nav>ul>li{border-bottom:1px solid var(--line)}
  .mme-header .main-nav a{padding:14px 8px;font-size:1.05rem}
  .mme-header .has-sub>a{flex:1}
  .mme-header .has-sub>a::after{display:none}
  .mme-header .sub-toggle,
  .mme-header .sub-toggle:hover,
  .mme-header .sub-toggle:focus{
    display:grid;place-items:center;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:10px;
    background:var(--blue-50);color:var(--blue-900);cursor:pointer
  }
  .mme-header .sub-toggle svg{width:18px;height:18px;transition:transform .2s}
  .mme-header .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .mme-header .sub,.mme-header .sub--mega{
    position:static;width:100%;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    min-width:0;padding:0 0 10px 8px;display:none
  }
  .mme-header .has-sub.is-open>.sub{display:block}
  /* Without JS, show the menu inline so every link is still reachable */
  .mme-header.mme-no-js .main-nav{position:static;transform:none;visibility:visible;padding:0;border:0;overflow:visible;width:100%;order:4}
  .mme-header.mme-no-js .site-header .wrap{flex-wrap:wrap}
  .mme-header.mme-no-js .sub{display:block}
  .mme-header.mme-no-js .nav-toggle{display:none}
}
@media (max-width:760px){ .mme-header .header-cta{display:none} }
@media (max-width:620px){ :root{--header-h:72px} .mme-header .logo img{height:50px} }
body.mme-nav-open{overflow:hidden}

/* ---------- Mobile tap-to-call bar ---------- */
.mme-header .callbar{display:none}
@media (max-width:760px){
  .mme-header .callbar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:999;
    background:var(--snow);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,23,64,.12)
  }
  .mme-header .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;font-weight:700;font-size:1rem}
  .mme-header .callbar a:first-child{color:var(--blue-900)}
  .mme-header .callbar a:last-child{background:var(--copper-600);color:#fff}
  .mme-header .callbar svg{width:18px;height:18px}
  body{padding-bottom:56px}
}

@media (prefers-reduced-motion:reduce){
  .mme-header *,.mme-header *::before,.mme-header *::after{transition:none!important;animation:none!important}
}