/* ==========================================================================
   Hastings Retreat — global coded header
   Classes mirror WordPress wp_nav_menu output (.menu / .sub-menu /
   .menu-item-has-children) so the same CSS drives the draft test AND the
   live site-wide header.
   Desktop dropdown is scoped to >=901px; mobile accordion to <=900px, so
   the two behaviours never collide.
   ========================================================================== */
:root{
  --hr-green:#67923d;
  --hr-green-dark:#5a8035;
  --hr-ink:#2b2b2b;
  --hr-head:'Raleway',Helvetica,Arial,sans-serif;
}

.hr-header{position:sticky;top:0;left:0;right:0;z-index:1000;
  background:var(--hr-green);box-shadow:0 2px 14px rgba(0,0,0,.12)}
.hr-header__inner{max-width:1180px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}

.hr-logo{display:block;flex:none;line-height:0}
.hr-logo img{height:70px;width:auto;display:block}

/* ---- nav (base) ---- */
.hr-nav .menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px}
.hr-nav .menu a{font-family:var(--hr-head);font-weight:500;font-size:13.5px;color:#fff;
  text-transform:capitalize;text-decoration:none;opacity:.96;white-space:nowrap;transition:opacity .15s}
.hr-nav .menu>li>a:hover{opacity:.7}
.hr-nav .menu-item-has-children>a::after{content:'\25BE';font-size:9px;margin-left:6px;opacity:.85;
  position:relative;top:-1px}
.hr-nav .sub-menu{list-style:none;margin:0;padding:0}

/* ---- hamburger ---- */
.hr-burger{display:none;background:none;border:0;color:#fff;font-size:26px;line-height:1;
  cursor:pointer;padding:4px 6px}

/* ================= DESKTOP dropdown (>=901px) ================= */
@media(min-width:901px){
  .hr-nav .menu-item-has-children{position:relative}
  .hr-nav .sub-menu{padding:8px 0;position:absolute;top:100%;left:50%;
    transform:translateX(-50%) translateY(10px);min-width:214px;background:#fff;border-radius:4px;
    box-shadow:0 16px 40px rgba(0,0,0,.16);opacity:0;visibility:hidden;transition:.18s ease;z-index:5}
  .hr-nav .menu-item-has-children:hover>.sub-menu{opacity:1;visibility:visible;
    transform:translateX(-50%) translateY(0)}
  .hr-nav .sub-menu::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
    border:6px solid transparent;border-top:0;border-bottom-color:#fff}
  .hr-nav .sub-menu a{display:block;padding:9px 22px;color:var(--hr-ink);font-weight:500;
    text-transform:none;font-size:14px;opacity:1;white-space:nowrap}
  .hr-nav .sub-menu a:hover{background:#f4f6f1;color:var(--hr-green)}
}

/* ================= MOBILE accordion (<=900px) ================= */
@media(max-width:900px){
  .hr-burger{display:block}
  .hr-nav{position:absolute;top:100%;left:0;right:0;background:var(--hr-green);
    max-height:0;overflow:hidden;transition:max-height .32s ease;box-shadow:0 12px 24px rgba(0,0,0,.15)}
  .hr-header.is-open .hr-nav{max-height:82vh;overflow-y:auto}
  .hr-nav .menu{flex-direction:column;align-items:stretch;gap:0;padding:4px 0}
  .hr-nav .menu>li{border-top:1px solid rgba(255,255,255,.14)}
  .hr-nav .menu a{display:block;padding:14px 24px;font-size:15px}
  .hr-nav .menu-item-has-children>a::after{float:right;top:2px}
  .hr-nav .sub-menu{background:rgba(0,0,0,.13);max-height:0;overflow:hidden;transition:max-height .3s ease}
  .hr-nav .menu-item-has-children.is-expanded>.sub-menu{max-height:460px}
  .hr-nav .sub-menu a{display:block;color:#fff;padding:12px 40px;font-size:14px}
  .hr-nav .sub-menu a:hover{background:rgba(0,0,0,.08);color:#fff}
  .hr-logo img{height:58px}
}