/* Global site header. Sticky glass panel. Consumed by every template via get_header().
   Two container layers: outer .global-site-header owns the layout position and glass
   background. Inner .global-nav-container is the strictly scoped centered container
   that holds the topbar and the primary bar side by side. */

.global-site-header{
  position:-webkit-sticky;position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(15,15,15,.08);
  -webkit-transition:background .3s ease,-webkit-box-shadow .3s ease,border-color .3s ease,padding .3s ease;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease,padding .3s ease;
}
.global-site-header.is-scrolled{
  background:rgba(255,255,255,.97);
  border-bottom-color:rgba(15,15,15,.1);
  -webkit-box-shadow:0 8px 32px -20px rgba(15,15,15,.28);
          box-shadow:0 8px 32px -20px rgba(15,15,15,.28);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .global-site-header{background:rgba(255,255,255,.98)}
}

.global-nav-container{
  display:block;
  width:100%;
  contain:layout style;
}

/* Utility badge topbar. Slim dark strip. */
.global-site-header__topbar{
  background:var(--rjw-ink);
  color:rgba(255,255,255,.86);
  font-size:.82rem;letter-spacing:.01em;
}
.global-site-header__topbar-inner{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:1rem;padding:.58rem 0;-ms-flex-wrap:wrap;flex-wrap:wrap;
}
.global-site-header__topbar a{color:#fff;text-decoration:none;-webkit-transition:color .18s ease;transition:color .18s ease}
.global-site-header__topbar a:hover{color:var(--rjw-accent-glow)}
.global-site-header__topbar-item{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.45rem;white-space:nowrap}
.global-site-header__topbar-item svg{width:14px;height:14px;color:var(--rjw-accent-glow);-ms-flex-negative:0;flex-shrink:0}

/* Primary bar. Brand left, nav center, cta right. Perfectly aligned across breakpoints. */
.global-site-header__bar{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  gap:2rem;
  padding:1rem 0;
  -webkit-transition:padding .3s ease;transition:padding .3s ease;
}
.is-scrolled .global-site-header__bar{padding:.65rem 0}

.global-site-header__brand{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:.85rem;
  font-family:var(--font-display);font-weight:700;font-size:1.45rem;
  color:var(--rjw-ink);text-decoration:none;letter-spacing:-.017em;line-height:1;
  -ms-flex-negative:0;flex-shrink:0;
}

/* Image-logo variant. Tight square-ish PNG (~1.1:1 aspect). */
.global-site-header__brand--logo{gap:.75rem}
.brand-logo{
  display:block;
  height:60px;width:auto;
  max-width:180px;
  object-fit:contain;
  -webkit-transition:transform .3s ease;
  transition:transform .3s ease;
}
.is-scrolled .brand-logo{height:52px}
.global-site-header__brand:hover .brand-logo{transform:scale(1.03)}
.brand-tag{
  display:none;
  font-family:var(--font-body);
  font-size:.66rem;font-weight:600;
  color:var(--rjw-muted);
  letter-spacing:.22em;text-transform:uppercase;
  border-left:1px solid var(--rjw-line);
  padding-left:.85rem;
  line-height:1.2;
  max-width:180px;
}
@media(min-width:1200px){.brand-tag{display:block}}
.brand-mark{
  width:42px;height:42px;
  background:var(--rjw-accent);color:#fff;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  border-radius:9px;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;letter-spacing:0;
  -webkit-box-shadow:0 10px 22px -10px rgba(200,16,46,.7);
          box-shadow:0 10px 22px -10px rgba(200,16,46,.7);
  -webkit-transition:-webkit-transform .3s ease;transition:transform .3s ease;
  -ms-flex-negative:0;flex-shrink:0;
}
.global-site-header__brand:hover .brand-mark{-webkit-transform:rotate(-4deg) scale(1.05);transform:rotate(-4deg) scale(1.05)}
.brand-name{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;line-height:1.05}
.brand-name small{font-size:.7rem;font-weight:500;color:var(--rjw-muted);letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-body);margin-top:3px}

.primary-nav{display:none}
@media(min-width:1024px){.primary-nav{display:block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}}
.primary-nav__list{
  list-style:none;margin:0;padding:0;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:.4rem;
}
.primary-nav__list li{margin:0}
.primary-nav__list a{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:.3rem;
  padding:.7rem 1.05rem;
  color:var(--rjw-ink);
  font-weight:500;font-size:.98rem;
  text-decoration:none;
  border-radius:8px;
  white-space:nowrap;
  position:relative;
  -webkit-transition:color .2s ease,background .2s ease;transition:color .2s ease,background .2s ease;
}
.primary-nav__list a::after{content:"";position:absolute;left:1.05rem;right:1.05rem;bottom:.4rem;height:2px;background:var(--rjw-accent);border-radius:1px;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:left;transform-origin:left;-webkit-transition:-webkit-transform .35s cubic-bezier(.22,1,.36,1);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.primary-nav__list a:hover::after,.primary-nav__list .current-menu-item>a::after{-webkit-transform:scaleX(1);transform:scaleX(1)}

.has-dropdown{position:relative}
.has-dropdown>a::before{content:"";display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;margin-left:.4em;opacity:.5;-webkit-transition:-webkit-transform .2s ease;transition:transform .2s ease}
.has-dropdown:hover>a::before,.has-dropdown:focus-within>a::before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.dropdown{
  position:absolute;top:100%;left:0;
  min-width:280px;margin-top:10px;
  background:rgba(255,255,255,.99);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(15,15,15,.06);border-radius:12px;
  -webkit-box-shadow:0 22px 55px -22px rgba(15,15,15,.28);
          box-shadow:0 22px 55px -22px rgba(15,15,15,.28);
  padding:.55rem;list-style:none;
  opacity:0;visibility:hidden;
  -webkit-transform:translateY(8px);transform:translateY(8px);
  -webkit-transition:opacity .22s ease,-webkit-transform .22s ease,visibility .22s ease;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
.has-dropdown:hover>.dropdown,.has-dropdown:focus-within>.dropdown{opacity:1;visibility:visible;-webkit-transform:translateY(0);transform:translateY(0)}
.dropdown li{margin:0}
.dropdown a{display:block;padding:.7rem .85rem;border-radius:6px;font-size:.95rem;font-weight:500;white-space:nowrap}
.dropdown a::after{display:none}
.dropdown a:hover{background:var(--rjw-accent-tint);color:var(--rjw-accent-dark)}

.header-cta{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.65rem;-ms-flex-negative:0;flex-shrink:0}
@media(min-width:1024px){.header-cta{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}}
.header-cta .btn{white-space:nowrap}

.mobile-toggle{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  width:48px;height:48px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,15,15,.08);border-radius:11px;
  color:var(--rjw-ink);cursor:pointer;
  -webkit-transition:background .2s ease,-webkit-transform .2s ease;transition:background .2s ease,transform .2s ease;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
  -ms-flex-negative:0;flex-shrink:0;
  position:relative;z-index:1;
}
.mobile-toggle:hover{background:#fff;-webkit-transform:scale(1.04);transform:scale(1.04)}
.mobile-toggle:active{-webkit-transform:scale(.96);transform:scale(.96)}
@media(min-width:1024px){.mobile-toggle{display:none}}
.mobile-toggle svg{width:24px;height:24px;pointer-events:none}

/* -------------------------------------------------------------------------- */
/*  MOBILE DRAWER — refined editorial minimalism                              */
/*  Rendered as a sibling of <header> because the header uses backdrop-filter */
/*  which would otherwise trap this fixed panel to the header's box.          */
/* -------------------------------------------------------------------------- */

.mobile-panel{
  position:fixed;inset:0;
  z-index:1000;
  display:none;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  width:100%;max-width:100vw;
  background:#0b0b0b;
  color:#fff;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.mobile-panel[data-open="true"]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation:panelIn .28s cubic-bezier(.22,1,.36,1);animation:panelIn .28s cubic-bezier(.22,1,.36,1)}
@-webkit-keyframes panelIn{from{opacity:0}to{opacity:1}}
@keyframes panelIn{from{opacity:0}to{opacity:1}}

/* Layered depth — a soft red glow at the top-left and a low vignette at the bottom. */
.mobile-panel::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 15% 8%,rgba(200,16,46,.22),transparent 65%),
    radial-gradient(80% 60% at 100% 100%,rgba(0,0,0,.55),transparent 70%);
  pointer-events:none;z-index:0;
}

/* Body scroll lock. iOS Safari ignores overflow:hidden on <body>, so we pin it. */
body.has-mobile-panel-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ---- Sticky header row inside the drawer ---- */
.mobile-panel__head{
  position:-webkit-sticky;position:sticky;top:0;z-index:3;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  padding:.9rem var(--rjw-gutter);
  padding-top:calc(.9rem + env(safe-area-inset-top));
  background:rgba(11,11,11,.85);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-panel__head .global-site-header__brand{color:#fff;font-size:1.05rem;gap:.65rem}
.mobile-panel__head .brand-mark{background:var(--rjw-accent);width:36px;height:36px;font-size:.9rem}
.mobile-panel__head .brand-name small{display:none}
.mobile-panel__head .brand-logo{height:52px;max-width:140px}
.mobile-panel__head .mobile-toggle{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff;width:44px;height:44px}
.mobile-panel__head .mobile-toggle:hover{background:rgba(255,255,255,.12)}

/* ---- Nav body ---- */
.mobile-panel__nav{
  position:relative;z-index:1;
  padding:.5rem var(--rjw-gutter) 1.25rem;
  -webkit-box-flex:1;-ms-flex:1;flex:1;
  width:100%;min-width:0;
}
/* Force vertical stack. The same rjw_primary_nav() helper is used for the desktop
   header, and its .primary-nav__list rule is display:flex (row). Without this
   override the mobile drawer would render every link crammed into one horizontal
   row and text would break mid-word. */
.mobile-panel__nav ul,
.mobile-panel__nav .primary-nav__list,
.mobile-panel__nav .menu{
  list-style:none;margin:0;padding:0;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;
  gap:0;
  width:100%;min-width:0;
}
.mobile-panel__nav li{
  display:block;
  width:100%;min-width:0;
  margin:0;
}

/* Section eyebrow above the nav — quiet magazine-style anchor. */
.mobile-panel__nav::before{
  content:"Menu";
  display:block;
  padding:1.15rem 0 .35rem;
  font-family:var(--font-body);
  font-size:.7rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
}

/* ---- Top-level rows ----
   Hairline divider between items + generous vertical rhythm from the anchor's
   own padding (1.05rem top and bottom = 33.6px total). Each <li> is 100% wide
   so the full row is a tap target. */
.mobile-panel__nav > ul > li{display:block;width:100%}
.mobile-panel__nav > ul > li + li{border-top:1px solid rgba(255,255,255,.06)}
.mobile-panel__nav > ul > li > a,
.mobile-panel__nav .has-dropdown > a{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  gap:1rem;
  width:100%;min-width:0;
  padding:1.05rem 0;min-height:56px;
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:500;
  color:#fff;text-decoration:none;
  letter-spacing:-.015em;line-height:1.15;
  border:0;
  -webkit-transition:color .18s ease,opacity .18s ease;transition:color .18s ease,opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
  /* Labels are short — keep them on one line, never break mid-word. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mobile-panel__nav a:active{color:var(--rjw-accent-glow)}
.mobile-panel__nav a::after{content:"";display:none} /* reset any inherited arrows */

/* ---- Modern geometric chevron. Rotates 90° when the group is open. ---- */
.mobile-panel__nav .has-dropdown > a::before{display:none}
.mobile-panel__nav .has-dropdown > a::after{
  content:"";display:block;
  width:9px;height:9px;
  border-right:1.75px solid rgba(255,255,255,.55);
  border-bottom:1.75px solid rgba(255,255,255,.55);
  -webkit-transform:rotate(-45deg);transform:rotate(-45deg); /* points right */
  -ms-flex-negative:0;flex-shrink:0;
  margin-right:6px;
  -webkit-transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .18s ease;
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .18s ease;
}
.mobile-panel__nav .has-dropdown.is-open > a::after{
  -webkit-transform:rotate(45deg);transform:rotate(45deg); /* points down */
  border-color:var(--rjw-accent-glow);
}
.mobile-panel__nav .has-dropdown.is-open > a{color:var(--rjw-accent-glow)}

/* ---- Accordion body. Collapses to zero height when not open. ---- */
.mobile-panel__nav .dropdown{
  position:static;
  background:transparent;
  -webkit-box-shadow:none;box-shadow:none;
  border:0;
  -webkit-transform:none;transform:none;
  visibility:visible;
  min-width:0;width:auto;
  margin:0;padding:0;
  opacity:0;
  max-height:0;
  overflow:hidden;
  -webkit-transition:max-height .38s cubic-bezier(.22,1,.36,1),opacity .25s ease,padding .3s ease;
  transition:max-height .38s cubic-bezier(.22,1,.36,1),opacity .25s ease,padding .3s ease;
}
.mobile-panel__nav .has-dropdown.is-open > .dropdown{
  opacity:1;
  max-height:1400px;
  padding:.25rem 0 1rem;
}
.mobile-panel__nav .dropdown li{margin:0}
.mobile-panel__nav .dropdown a{
  display:block;
  font-family:var(--font-body);
  font-size:.98rem;font-weight:500;
  color:rgba(255,255,255,.68);
  padding:.5rem 0;min-height:40px;
  border:0;
  letter-spacing:0;line-height:1.35;
  white-space:normal;overflow-wrap:break-word;word-break:break-word;
  -webkit-transition:color .18s ease,transform .18s ease;transition:color .18s ease,transform .18s ease;
}
.mobile-panel__nav .dropdown a:hover,
.mobile-panel__nav .dropdown a:active{color:#fff}
.mobile-panel__nav .dropdown a::after{display:none}

/* "See all" eyebrow inserted by JS. Reads as a magazine section header. */
.mobile-panel__nav .dropdown__see-all{margin-bottom:.35rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.07)}
.mobile-panel__nav .dropdown__see-all a{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.5rem;
  color:var(--rjw-accent-glow);
  font-family:var(--font-body);
  font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.22em;
  min-height:32px;padding:.35rem 0;
}
.mobile-panel__nav .dropdown__see-all a::after{
  content:"→";display:inline-block;
  font-weight:400;opacity:.9;
  -webkit-transition:transform .2s ease;transition:transform .2s ease;
}
.mobile-panel__nav .dropdown__see-all a:hover::after,
.mobile-panel__nav .dropdown__see-all a:active::after{-webkit-transform:translateX(3px);transform:translateX(3px)}

/* ---- CTA cluster at the bottom ---- */
.mobile-panel__cta{
  position:relative;z-index:1;
  padding:1.25rem var(--rjw-gutter);
  padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
  display:grid;gap:.6rem;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 100%);
  border-top:1px solid rgba(255,255,255,.06);
}
.mobile-panel__cta .btn{min-height:52px}
.mobile-panel__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3);background:transparent}
.mobile-panel__cta .btn--ghost:hover{background:rgba(255,255,255,.06);color:#fff}

/* Small location tag below the CTAs. Uses same eyebrow style as ::before. */
.mobile-panel__cta::after{
  content:"Millwood, WA";
  display:block;
  margin-top:.9rem;
  font-family:var(--font-body);
  font-size:.7rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
  text-align:center;
}

@media(max-width:1023px){
  .global-site-header__bar{gap:1rem;padding:.75rem 0}
  .brand-logo{height:54px;max-width:140px}
  .is-scrolled .brand-logo{height:48px}
}
@media(max-width:640px){
  .global-site-header__topbar{display:none}
  .global-site-header__bar{gap:.5rem;padding:.6rem 0}
  .global-site-header__brand{gap:.6rem;font-size:1.15rem}
  .brand-mark{width:38px;height:38px;font-size:.95rem;border-radius:8px}
  .brand-name small{display:none}
  .brand-name{line-height:1}
  .brand-logo{height:48px;max-width:120px}
  .is-scrolled .brand-logo{height:44px}
}
@media(max-width:380px){
  .global-site-header__brand{font-size:1.05rem}
  .brand-mark{width:36px;height:36px}
  .brand-logo{height:44px;max-width:110px}
}