/* Ark Roofing header nav — brand red/black/white. Added by Blufire (not part of original WP site). */
:root { --ark-red:#EE212A; }

header.elementor-location-header { position: relative; }

.ark-nav-wrap { display:flex; align-items:center; margin-left:auto; margin-right:14px; }

.ark-nav { display:flex; align-items:center; font-family:"Open Sans", Arial, sans-serif; }
.ark-nav__menu { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:2px; }
.ark-nav__menu > li { position:relative; }

.ark-nav__link {
  display:flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  color:#fff; text-decoration:none; font-size:16px; font-weight:600; font-family:inherit;
  padding:11px 16px; border-radius:6px; line-height:1; white-space:nowrap;
  transition:color .15s ease, background .15s ease;
}
.ark-nav__link:hover, .ark-nav__link:focus-visible { color:var(--ark-red); }
.ark-nav__link.is-active { color:var(--ark-red); }

.ark-nav__caret { width:11px; height:11px; flex:0 0 auto; transition:transform .2s ease; }
.ark-nav__has-sub:hover .ark-nav__caret,
.ark-nav__has-sub:focus-within .ark-nav__caret { transform:rotate(180deg); }

/* dropdown (desktop) */
.ark-nav__sub {
  list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 6px); left:0;
  min-width:250px; background:#000; border:1px solid rgba(255,255,255,.14); border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:2px; z-index:1200;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.ark-nav__has-sub:hover > .ark-nav__sub,
.ark-nav__has-sub:focus-within > .ark-nav__sub,
.ark-nav__has-sub.is-open > .ark-nav__sub { opacity:1; visibility:visible; transform:translateY(0); }
.ark-nav__sub a { color:#fff; text-decoration:none; font-weight:500; font-size:15px; padding:10px 14px; border-radius:7px; display:block; white-space:nowrap; transition:background .15s ease, color .15s ease; }
.ark-nav__sub a:hover, .ark-nav__sub a:focus-visible { background:var(--ark-red); color:#fff; }
.ark-nav__sub a.is-active { color:var(--ark-red); }
.ark-nav__sub a.is-active:hover { color:#fff; }

/* hamburger (hidden on desktop) */
.ark-nav__toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; background:transparent; border:0; cursor:pointer; padding:11px; }
.ark-nav__toggle span { display:block; height:3px; width:100%; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.ark-nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.ark-nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ark-nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---- mobile / tablet ---- */
@media (max-width:991px){
  .ark-nav-wrap { margin-right:6px; }
  .ark-nav__toggle { display:flex; }
  .ark-nav__menu {
    position:absolute; top:100%; left:0; right:0; background:#000; flex-direction:column;
    align-items:stretch; gap:0; padding:8px; border-top:1px solid rgba(255,255,255,.14);
    box-shadow:0 20px 40px rgba(0,0,0,.5); max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .32s ease, visibility .32s; z-index:1200;
  }
  .ark-nav__menu.is-open { max-height:80vh; overflow-y:auto; visibility:visible; }
  .ark-nav__menu > li { position:static; }
  .ark-nav__link { width:100%; justify-content:space-between; padding:14px 16px; font-size:17px; border-radius:8px; }
  .ark-nav__has-sub > .ark-nav__link { }
  .ark-nav__sub {
    position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none;
    border:0; border-radius:0; min-width:0; padding:2px 0 6px 10px; background:transparent;
    border-left:2px solid var(--ark-red); margin:2px 0 4px 16px;
  }
  .ark-nav__has-sub.is-open > .ark-nav__sub { display:flex; }
  .ark-nav__has-sub.is-open .ark-nav__caret { transform:rotate(180deg); }
  .ark-nav__sub a { padding:11px 14px; font-size:16px; }
}