/* ==========================================================================
   EverPoint Rentals — NAVIGATION (single implementation)
   One desktop system (>=1260px), one mobile system (<=1259px),
   one simple single-column dropdown system. Do not add overrides elsewhere.
   ========================================================================== */

:root{
  --nav-bp:1260px;                 /* documented breakpoint (media queries below) */
  --dd-min:240px;
}

/* ------------------------------------------------------- header shell ----- */
/* deliberately no global overflow-x:hidden — real overflow causes are fixed at source */
html,body{max-width:100%}
.site-header{position:sticky;top:0;z-index:100;width:100%;max-width:100%;box-sizing:border-box;
  background:#fff;border-bottom:1px solid var(--line)}
.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}
.header-inner{display:flex;align-items:center;gap:16px;min-height:82px;flex-wrap:nowrap;
  width:100%;max-width:var(--wrap);min-width:0}

.logo{display:flex;align-items:center;flex:0 0 auto;min-width:0;max-width:46vw}
.logo img{height:50px;width:auto;max-width:100%;display:block}
.site-footer .logo img{height:50px}
.logo-mark,.logo-text{display:none!important}

/* ------------------------------------------------------- desktop nav ----- */
.nav{margin-left:auto;display:flex;align-items:center;flex:1 1 auto;justify-content:flex-end;min-width:0}
.nav-list{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:2px;
  list-style:none;margin:0;padding:0;min-width:0}
.nav-list>li{margin:0;min-width:0;position:static}
.nav-list>li>a{display:inline-flex;align-items:center;gap:6px;color:var(--charcoal);font-weight:700;
  font-size:.9rem;padding:.6rem .6rem;border-radius:9px;white-space:nowrap;line-height:1.2}
.nav-list>li>a:hover{background:var(--sand);text-decoration:none}
.nav-list>li>a[aria-current="page"]{color:var(--green-deep,#1f6741)}
.has-menu>a::after{content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:.18s ease}
.has-menu.open>a::after{border-color:var(--green)}
.sub-toggle{display:none}

/* header CTA — Call Now is the only primary header CTA */
.header-cta{display:flex;align-items:center;gap:10px;margin-left:10px;flex:none}
.header-cta .btn{white-space:nowrap;font-size:.94rem;padding:.76rem 1.15rem}
.btn-call::before{content:"";display:inline-block;width:17px;height:17px;flex:none;background:currentColor;
  -webkit-mask:var(--ico-phone) center/contain no-repeat;mask:var(--ico-phone) center/contain no-repeat}
.btn-lg.btn-call::before{width:19px;height:19px}

.nav-toggle{display:none;background:#fff;border:1.5px solid var(--line,#d8dedd);border-radius:9px;width:46px;height:46px;
  padding:12px 10px;margin-left:auto;box-sizing:border-box;align-items:stretch;
  flex-direction:column;justify-content:space-between;cursor:pointer;flex:none;-webkit-appearance:none;appearance:none}
.nav-toggle span{display:block;width:100%;height:2.5px;min-height:2.5px;background:var(--charcoal,#1b1e1f);border-radius:2px}
.nav-mobile-cta{display:none}

/* ------------------------------------------------------------------------- */
/* DROPDOWN: one simple single-column vertical menu for every nav item.       */
/* ------------------------------------------------------------------------- */
.dropdown{
  position:absolute;top:100%;left:0;z-index:140;
  min-width:var(--dd-min,240px);max-width:min(320px,calc(100vw - 24px));
  margin-top:10px;padding:8px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(20,23,24,.14);
  max-height:min(76vh,calc(100vh - var(--hdr-top,82px) - 24px));
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease;
}
/* hover bridge: invisible strip between the trigger and the panel */
.dropdown::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-menu.open>.dropdown,
.has-menu:hover>.dropdown,
.has-menu:focus-within>.dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.dropdown.align-right{left:auto;right:0}
.dropdown::-webkit-scrollbar{width:9px}
.dropdown::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

.dd-list{list-style:none;margin:0;padding:0;display:block}
.dd-list>li{margin:0;display:block}
.dd-item{display:block;width:100%;padding:.6rem .75rem;border-radius:9px;
  color:var(--charcoal);font-size:.9rem;font-weight:650;line-height:1.35;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-item:hover,.dd-item:focus-visible{background:var(--sand);text-decoration:none}
.dd-item[aria-current="page"]{color:var(--green-deep,#1f6741);background:var(--green-light)}

/* ------------------------------------------------------- mobile nav ------ */
@media (max-width:1259px){
  .nav{display:none}
  .header-cta{display:none}
  .nav-toggle{display:flex}
  .header-inner{min-height:70px;gap:10px}
  .logo img{height:42px}
  .utility .util-links a:not(.util-phone){display:none}

  .site-header.open .nav{display:block;position:fixed;left:0;right:0;top:var(--hdr-top,70px);bottom:0;
    width:100%;max-width:100vw;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:#fff;
    padding:12px 20px calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
  .site-header.open .nav-list{display:block;max-width:100%}
  .site-header.open .nav-list>li{border-bottom:1px solid var(--line);position:relative}
  .site-header.open .nav-list>li>a{display:block;padding:1rem 3.4rem 1rem .2rem;font-size:1.02rem;
    border-radius:0;white-space:normal}
  .site-header.open .has-menu>a::after{display:none}
  .site-header.open .sub-toggle{display:grid;place-items:center;position:absolute;right:0;top:2px;
    width:52px;height:52px;background:none;border:0;cursor:pointer}
  .site-header.open .sub-toggle::after{content:"";width:11px;height:11px;border-right:2.5px solid var(--charcoal);
    border-bottom:2.5px solid var(--charcoal);transform:rotate(45deg) translateY(-2px);transition:.2s ease}
  .site-header.open .has-menu.open .sub-toggle::after{transform:rotate(-135deg) translateY(-2px)}

  /* accordion: no absolute positioning at all on mobile */
  .site-header.open .dropdown{position:static;display:none;opacity:1;visibility:visible;
    pointer-events:auto;transform:none;width:auto;min-width:0;max-width:100%;margin:0;padding:0 0 10px;
    max-height:none;overflow:visible;border:0;box-shadow:none;border-radius:0}
  .site-header.open .dropdown::before{display:none}
  .site-header.open .has-menu.open>.dropdown{display:block}
  .site-header.open .dd-item{padding:.6rem .2rem;white-space:normal;overflow:visible;text-overflow:clip}

  .nav-mobile-cta{display:grid;gap:10px;margin-top:18px}
  .nav-mobile-cta .btn{width:100%}
}

/* hover-to-open desktop triggers */
@media (min-width:1260px){
  .nav-list>li.has-menu{position:relative}
  .has-menu>a{cursor:pointer}
  .has-menu.open>a,.has-menu:hover>a{background:var(--sand)}
}
/* overflow safety: nothing may exceed the viewport */
img,svg,video,canvas,iframe,table{max-width:100%}
.wrap{box-sizing:border-box}

/* Areas Served: single-column state list (long menu, scrolls in place) */
.dd-list.dd-states>li+li{margin-top:2px}
.dd-list.dd-states .dd-item{padding:.55rem .75rem}

/* ==========================================================================
   MOBILE HEADER — Call Now is the primary, always-visible CTA
   ========================================================================== */
@media (max-width:1259px){
  .header-cta{display:flex;margin-left:auto;gap:8px}
  .header-cta .btn-call{font-size:.95rem;padding:.7rem 1rem;box-shadow:0 6px 18px rgba(47,125,79,.3)}
  .header-inner{gap:10px}
  .logo{max-width:40vw}
  .logo img{height:42px}
}
@media (max-width:420px){
  .header-cta .btn-call{font-size:.9rem;padding:.66rem .8rem}
  .header-cta .btn-call::before{width:15px;height:15px}
  .logo{max-width:38vw}
  .logo img{height:38px}
  .nav-toggle{width:42px;height:42px}
}

@media (max-width:1259px){
  .site-header.open .nav{padding:12px 20px calc(30px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   BRAND LOCKUP — official EverPoint Rentals logo + wordmark
   ========================================================================== */
:root{--font-brand:"Fraunces",Georgia,"Times New Roman",serif}
.logo{gap:16px;max-width:none;align-items:center}
.logo .logo-img{height:74px;width:auto;flex:0 0 auto;display:block}
.site-footer .logo .logo-img{height:74px}
.logo-word{
  display:inline-block;white-space:nowrap;
  font-family:var(--font-brand);font-weight:700;font-optical-sizing:auto;
  font-size:clamp(1.5rem,1.9vw,2rem);line-height:1;letter-spacing:-.015em;
  color:var(--charcoal,#1b1e1f);
}
.site-footer .logo-word,.logo-word-light{color:#fff}

@media (max-width:1259px){
  .logo{gap:13px}
  .logo .logo-img{height:62px}
  .site-footer .logo .logo-img{height:64px}
  .logo-word{font-size:1.5rem}
}
@media (max-width:760px){
  .logo{gap:11px}
  .logo .logo-img{height:52px}
  .site-footer .logo .logo-img{height:56px}
  .logo-word{font-size:1.24rem}
}
@media (max-width:400px){
  .logo{gap:9px}
  .logo .logo-img{height:44px}
  .site-footer .logo .logo-img{height:48px}
  .logo-word{font-size:1.02rem}
}
