/* Milan's Roofing — V7 navigation + responsive interaction system */
:root{
  --nav-ink:#111412;
  --nav-paper:#f7f5ef;
  --nav-line:#d8d4ca;
  --nav-orange:#f36d21;
  --nav-orange-dark:#d85814;
}

/* ---------- DESKTOP: richer, clearer actions ---------- */
.header-shell,
header.header{
  isolation:isolate;
}

.header-shell .header,
header.header > .wrap{
  min-height:92px;
}

.header-shell nav > a:not(.nav-cta),
.header-shell .navdrop > a,
header.header nav > a:not(.nav-cta){
  border-radius:2px;
  transition:color .22s ease, background .22s ease, transform .22s ease !important;
}

.header-shell nav > a:not(.nav-cta):hover,
.header-shell .navdrop:hover > a,
header.header nav > a:not(.nav-cta):hover{
  background:rgba(243,109,33,.055);
  color:var(--nav-orange-dark) !important;
  transform:translateY(-1px);
}

/* Refined underline: short architectural rail, not a full generic underline. */
.header-shell nav > a:not(.nav-cta)::after,
.header-shell .navdrop > a::after,
header.header nav > a:not(.nav-cta)::after{
  left:50% !important;
  right:auto !important;
  width:22px !important;
  bottom:18px !important;
  transform:translateX(-50%) scaleX(0) !important;
  transform-origin:center !important;
}
.header-shell nav > a:not(.nav-cta):hover::after,
.header-shell .navdrop:hover > a::after,
header.header nav > a:not(.nav-cta):hover::after,
header.header nav > a.active::after{
  transform:translateX(-50%) scaleX(1) !important;
}

/* Estimate becomes a deliberate premium action. */
.header-shell .nav-cta,
header.header .nav-cta{
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:54px;
  padding:0 19px 0 22px !important;
  border:1px solid var(--nav-orange) !important;
  background:var(--nav-orange) !important;
  color:#fff !important;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(243,109,33,0);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}
.header-shell .nav-cta::after,
header.header .nav-cta::after{
  content:"↗";
  font-size:16px;
  line-height:1;
  transform:translate(0,0);
  transition:transform .22s ease;
}
.header-shell .nav-cta::before,
header.header .nav-cta::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.36);
  opacity:0;
  transform:scale(.96);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.header-shell .nav-cta:hover,
header.header .nav-cta:hover{
  background:var(--nav-orange-dark) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 28px rgba(205,80,16,.22) !important;
}
.header-shell .nav-cta:hover::before,
header.header .nav-cta:hover::before{opacity:1;transform:scale(1)}
.header-shell .nav-cta:hover::after,
header.header .nav-cta:hover::after{transform:translate(3px,-3px)}

/* Call action: quiet premium treatment — no heavy button. */
.header-phone, header.header .phone{
  position:relative !important; min-width:158px !important; min-height:54px;
  padding:7px 2px 7px 22px !important; border:0 !important; border-left:1px solid var(--nav-line) !important;
  background:transparent !important; color:var(--nav-ink) !important; border-radius:0 !important;
  display:flex !important; flex-direction:column; justify-content:center; cursor:pointer;
  transition:transform .24s ease !important; overflow:hidden;
}
.header-phone::before, header.header .phone::before{
  content:""; position:absolute; left:22px; bottom:3px; width:28px; height:2px; background:var(--nav-orange);
  transform-origin:left; transition:width .28s cubic-bezier(.2,.7,.2,1);
}
.header-phone::after, header.header .phone::after{
  content:"↗"; position:absolute; right:2px; top:50%; color:var(--nav-orange); font-size:15px;
  opacity:0; transform:translate(-8px,-50%); transition:opacity .22s ease,transform .22s ease;
}
.header-phone small, header.header .phone small{
  color:#8d908a !important; font-size:8px !important; letter-spacing:.15em !important; line-height:1 !important;
  margin:0 0 6px !important; text-transform:uppercase; font-weight:800;
}
.header-phone a, header.header .phone a, header.header .phone b{
  color:var(--nav-ink) !important; font-family:Manrope,Arial,sans-serif !important; font-size:17px !important;
  line-height:1 !important; font-weight:800 !important; letter-spacing:-.02em !important; white-space:nowrap;
  transition:color .22s ease, transform .22s ease;
}
.header-phone:hover, header.header .phone:hover{transform:translateY(-1px)}
.header-phone:hover::before, header.header .phone:hover::before{width:82px}
.header-phone:hover::after, header.header .phone:hover::after{opacity:1;transform:translate(0,-50%)}
.header-phone:hover a, header.header .phone:hover b{color:var(--nav-orange-dark) !important}

/* Make dropdowns feel like navigation surfaces, not generic boxes. */
.header-shell .drop{
  border-top:0 !important;
  border-radius:4px !important;
  overflow:hidden;
  box-shadow:0 26px 70px rgba(20,22,20,.15) !important;
}
.header-shell .drop::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:var(--nav-orange);
}
.header-shell .drop a{
  position:relative;
  padding-left:15px !important;
  transition:background .2s ease, color .2s ease, padding-left .2s ease !important;
}
.header-shell .drop a:hover{
  background:rgba(243,109,33,.07) !important;
  color:var(--nav-orange-dark) !important;
  padding-left:20px !important;
}

/* ---------- TABLET + MOBILE: hamburger at tablet widths ---------- */
.mobile-menu-btn,
.mobile-menu,
.menu{
  position:relative;
  width:50px !important;
  height:50px !important;
  min-width:50px;
  border:1px solid rgba(17,20,18,.18) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.72) !important;
  color:var(--nav-ink) !important;
  font-size:0 !important;
  line-height:0 !important;
  padding:0 !important;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  transition:background .22s ease,border-color .22s ease,transform .22s ease !important;
}
.mobile-menu-btn::before,
.mobile-menu-btn::after,
.mobile-menu::before,
.mobile-menu::after,
.menu::before,
.menu::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:19px;height:2px;
  background:currentColor;
  border-radius:4px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease !important;
}
.mobile-menu-btn::before,.mobile-menu::before,.menu::before{transform:translate(-50%,-5px);box-shadow:0 10px 0 currentColor}
.mobile-menu-btn::after,.mobile-menu::after,.menu::after{transform:translate(-50%,5px)}
.mobile-menu-btn:hover,.mobile-menu:hover,.menu:hover{background:#fff !important;border-color:rgba(243,109,33,.6) !important;transform:translateY(-1px)}
.mobile-menu-btn[aria-expanded="true"],
.mobile-menu[aria-expanded="true"],
.menu[aria-expanded="true"]{background:#171a18 !important;color:#fff !important;border-color:#171a18 !important}
.mobile-menu-btn[aria-expanded="true"]::before,
.mobile-menu[aria-expanded="true"]::before,
.menu[aria-expanded="true"]::before{transform:translate(-50%,0) rotate(45deg);box-shadow:none}
.mobile-menu-btn[aria-expanded="true"]::after,
.mobile-menu[aria-expanded="true"]::after,
.menu[aria-expanded="true"]::after{transform:translate(-50%,0) rotate(-45deg)}

@media(max-width:1240px){
  .header-shell,
  header.header{height:82px !important;min-height:82px !important}
  .header-shell .header,
  header.header > .wrap{height:82px !important;min-height:82px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:14px !important}
  .header-shell nav,
  header.header nav{display:none !important}
  .brand img{max-width:205px !important;height:54px !important;object-fit:contain !important}

  /* Keep a highly visible call control next to the hamburger. */
  .header-phone,
  header.header .phone{
    display:flex !important;
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 !important;
    margin-left:auto;
    border-radius:50% !important;
    background:#171a18 !important;
  }
  .header-phone small,
  .header-phone a,
  header.header .phone small,
  header.header .phone b,
  header.header .phone > a > small,
  header.header .phone > a > b{font-size:0 !important;line-height:0 !important;margin:0 !important;color:transparent !important}
  .header-phone::before,
  header.header .phone::before{left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);background:var(--nav-orange);-webkit-mask-size:18px 18px;mask-size:18px 18px}
  .header-phone::after,
  header.header .phone::after{left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) scale(.85)}
  .header-phone a,
  header.header .phone > a{position:absolute !important;inset:0 !important;display:block !important;z-index:3}
  .header-phone:hover::after,
  header.header .phone:hover::after{transform:translate(-50%,-50%) scale(1.08)}

  .mobile-menu-btn,
  .mobile-menu,
  .menu{display:inline-flex !important}

  /* Full-height contemporary drawer on tablet, not a dropdown list. */
  .mobile-panel,
  .mobile-nav{
    position:fixed !important;
    top:82px !important;
    right:0 !important;
    left:auto !important;
    width:min(440px,92vw) !important;
    height:calc(100dvh - 82px) !important;
    padding:28px 28px 36px !important;
    background:#111412 !important;
    color:#fff !important;
    border:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    overflow:auto !important;
    transform:translateX(105%);
    visibility:hidden;
    opacity:0;
    box-shadow:-100vw 0 0 100vw rgba(5,7,6,.46),-28px 0 70px rgba(5,7,6,.18) !important;
    transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .2s ease,visibility .32s !important;
    z-index:999 !important;
    counter-reset:navitem;
  }
  .mobile-panel::before,
  .mobile-nav::before{
    content:"Navigation";
    display:block;
    padding:2px 0 18px;
    color:#919790;
    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    border-bottom:1px solid #2b302c;
  }
  .mobile-panel.open,
  .mobile-nav.open{
    transform:translateX(0);
    visibility:visible;
    opacity:1;
  }
  .mobile-panel a,
  .mobile-nav a{
    position:relative;
    display:grid !important;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    min-height:62px;
    padding:0 !important;
    border-bottom:1px solid #2b302c !important;
    color:#fff !important;
    font-family:Manrope,Arial,sans-serif !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.09em !important;
    text-transform:uppercase !important;
    transition:color .2s ease,padding-left .2s ease,background .2s ease !important;
  }
  .mobile-panel a::before,
  .mobile-nav a::before{
    counter-increment:navitem;
    content:"0" counter(navitem);
    color:var(--nav-orange);
    font-family:Manrope,Arial,sans-serif;
    font-size:8px;
    font-weight:800;
    letter-spacing:.08em;
  }
  .mobile-panel a::after,
  .mobile-nav a::after{
    content:"↗";
    color:#747a74;
    font-size:15px;
    transition:transform .2s ease,color .2s ease;
  }
  .mobile-panel a span,
  .mobile-nav a span{display:none !important}
  .mobile-panel a:hover,
  .mobile-nav a:hover{color:#fff !important;padding-left:8px !important;background:rgba(255,255,255,.025) !important}
  .mobile-panel a:hover::after,
  .mobile-nav a:hover::after{color:var(--nav-orange);transform:translate(3px,-3px)}
  .mobile-panel a[href="/contact-us"],
  .mobile-nav a[href="/contact-us"]{
    margin-top:22px;
    min-height:58px;
    padding:0 16px !important;
    grid-template-columns:1fr auto;
    background:var(--nav-orange) !important;
    border:0 !important;
    color:#fff !important;
    font-family:Manrope,Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
  }
  .mobile-panel a[href="/contact-us"]::before,
  .mobile-nav a[href="/contact-us"]::before{content:"Free estimate";font:inherit;color:inherit;letter-spacing:inherit}
  .mobile-panel a[href="/contact-us"]::after,
  .mobile-nav a[href="/contact-us"]::after{color:#fff;font-size:17px}

  body.nav-open{overflow:hidden !important}
}

@media(max-width:680px){
  .header-shell,
  header.header,
  .header-shell .header,
  header.header > .wrap{height:76px !important;min-height:76px !important}
  .header-shell .wrap,
  header.header > .wrap{width:calc(100% - 26px) !important}
  .brand img{max-width:168px !important;height:48px !important}
  .header-phone,
  header.header .phone{width:44px !important;min-width:44px !important;height:44px !important;min-height:44px !important}
  .mobile-menu-btn,.mobile-menu,.menu{width:44px !important;height:44px !important;min-width:44px !important}
  .mobile-panel,.mobile-nav{top:76px !important;width:100vw !important;height:calc(100dvh - 76px) !important;padding:22px 20px 28px !important}
  .mobile-panel a,.mobile-nav a{font-size:24px !important;min-height:59px}
}

@media(prefers-reduced-motion:reduce){
  .mobile-panel,.mobile-nav,.mobile-menu-btn,.mobile-menu,.menu,.header-phone,header.header .phone{transition:none !important}
}

/* Base visibility + active state safeguards for pages that did not previously own mobile nav CSS. */
@media(min-width:1241px){
  .mobile-menu-btn,.mobile-menu,.menu,.mobile-panel,.mobile-nav{display:none !important}
}
.header-shell nav > a.is-active:not(.nav-cta)::after,
.header-shell .navdrop > a.is-active::after,
header.header nav > a.is-active:not(.nav-cta)::after{
  transform:translateX(-50%) scaleX(1) !important;
}
.header-shell nav > a.is-active:not(.nav-cta),
.header-shell .navdrop > a.is-active,
header.header nav > a.is-active:not(.nav-cta){color:var(--nav-orange-dark) !important}

/* Subtle sticky-header depth after scroll. */
.header-shell.nav-scrolled,
header.header.nav-scrolled{
  box-shadow:0 10px 34px rgba(16,18,17,.075) !important;
  backdrop-filter:blur(14px) saturate(1.05);
}

/* Phone row that navigation-v7.js inserts into the drawer. */
@media(max-width:1240px){
  .mobile-panel .mobile-call-row,
  .mobile-nav .mobile-call-row{
    margin-top:18px;
    min-height:58px;
    padding:0 15px !important;
    grid-template-columns:1fr auto !important;
    border:1px solid #343a35 !important;
    background:#191d1a !important;
    font-family:Manrope,Arial,sans-serif !important;
    font-size:11px !important;
    letter-spacing:.08em !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
  }
  .mobile-panel .mobile-call-row::before,
  .mobile-nav .mobile-call-row::before{
    content:"Call 470-812-3993" !important;
    color:#fff !important;
    font:inherit !important;
    letter-spacing:inherit !important;
  }
  .mobile-panel .mobile-call-row::after,
  .mobile-nav .mobile-call-row::after{content:"☎" !important;color:var(--nav-orange) !important;font-size:15px !important}
}
@media(max-width:1240px){
  .mobile-panel a[href="/contact-us"]::before,
  .mobile-nav a[href="/contact-us"]::before{display:none !important;content:none !important}
}