/* ============================================================
   LPJH — Header & Mega Menu (rebuild)
   Teton Reserve tokens only. Square corners, hairline structure.
   Class prefix: .lpjh-hd (bar) / .lpjh-mega (panel) / .lpjh-mnav (mobile)
   Production copy — enqueue after brand-tokens.css. Mark image expected at
   assets/img/lpjh-mark-black.png relative to this file's parent directory.
   ============================================================ */

/* ---------- BAR ---------- */
.lpjh-hd{position:absolute;top:0;left:0;right:0;z-index:40;padding:1.5rem 0;background:transparent;transition:all .4s ease}
.lpjh-hd__inner{max-width:1360px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;gap:2.5rem}
.lpjh-hd__logo{display:flex;align-items:center;flex:0 0 auto}
.lpjh-hd__logo img{height:44px;width:auto;display:block;transition:height .4s ease}
.lpjh-hd__nav{display:flex;align-items:center;gap:2.25rem;margin-left:auto}
.lpjh-hd__link{font-family:var(--tr-font-body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;padding-bottom:.35rem;border-bottom:1px solid transparent;transition:color .26s ease,border-color .26s ease;white-space:nowrap}
.lpjh-hd__link:hover,.lpjh-hd__link:focus-visible{color:var(--tr-gold-pale);border-bottom-color:var(--tr-gold-pale)}
.lpjh-hd__link.is-current{border-bottom-color:var(--tr-gold-pale)}
.lpjh-hd__util{display:flex;align-items:center;gap:1.4rem;flex:0 0 auto}
.lpjh-hd__rule{width:1px;height:24px;background:rgba(255,255,255,.22)}
.lpjh-hd__tel{font-family:var(--tr-font-body);font-size:.74rem;font-weight:500;letter-spacing:.06em;color:#fff;text-decoration:none;opacity:.88;transition:opacity .26s ease,color .26s ease;white-space:nowrap}
.lpjh-hd__tel:hover{opacity:1;color:var(--tr-gold-pale)}
.lpjh-hd__cta{display:inline-flex;align-items:center;height:2.85rem;padding:0 1.35rem;background:var(--tr-accent);border:1px solid var(--tr-accent);border-radius:0;color:var(--tr-on-accent);font-family:var(--tr-font-body);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background-color .26s ease,border-color .26s ease}
.lpjh-hd__cta:hover{background:var(--tr-accent-hover);border-color:var(--tr-accent-hover)}
.lpjh-hd__menu{display:inline-flex;align-items:center;gap:.7rem;padding:0;background:none;border:0;cursor:pointer;color:#fff;font-family:var(--tr-font-body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:color .26s ease}
.lpjh-hd__menu:hover{color:var(--tr-gold-pale)}
.lpjh-hd__burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:26px;height:14px}
.lpjh-hd__burger i{display:block;width:100%;height:1px;background:currentColor;transition:transform .34s cubic-bezier(.19,1,.22,1),opacity .2s ease}
.lpjh-hd__menu[aria-expanded="true"] .lpjh-hd__burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
.lpjh-hd__menu[aria-expanded="true"] .lpjh-hd__burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Scrolled state — charcoal sticky bar (mirrors .header_sticky upstream) */
.lpjh-hd.is-sticky{position:fixed;background:var(--tr-charcoal);padding:.85rem 0;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.lpjh-hd.is-sticky .lpjh-hd__logo img{height:32px}
.lpjh-hd.is-sticky .lpjh-hd__cta{height:2.5rem}
.lpjh-hd.is-hidden{transform:translateY(-100%)}

/* ---------- MEGA PANEL ---------- */
.lpjh-mega{position:absolute;inset:0;z-index:60;background:var(--tr-charcoal);color:var(--tr-cream);display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .7s cubic-bezier(.19,1,.22,1)}
.lpjh-mega.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.lpjh-mega__bar{flex:0 0 auto;padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.lpjh-mega__bar .lpjh-hd__inner{justify-content:space-between}
.lpjh-mega__close{display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;padding:0;cursor:pointer;color:#fff;font-family:var(--tr-font-body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:color .26s ease}
.lpjh-mega__close:hover{color:var(--tr-gold-pale)}
.lpjh-mega__close span[aria-hidden]{position:relative;display:block;width:18px;height:18px}
.lpjh-mega__close span[aria-hidden]::before,.lpjh-mega__close span[aria-hidden]::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor}
.lpjh-mega__close span[aria-hidden]::before{transform:rotate(45deg)}
.lpjh-mega__close span[aria-hidden]::after{transform:rotate(-45deg)}

.lpjh-mega__body{position:relative;flex:1 1 auto;display:flex;align-items:stretch;max-width:1360px;width:100%;margin:0 auto;padding:0 2rem}
.lpjh-mega__body::before{content:"";position:absolute;z-index:-1;right:-9rem;top:50%;transform:translateY(-50%);width:560px;height:560px;background:url(../img/lpjh-mark-black.png) center/contain no-repeat;filter:invert(1);opacity:.035;pointer-events:none}
.lpjh-mega__cols{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,1fr);align-content:start;padding:3.5rem 0}
.lpjh-mega__col{padding:0 2.25rem;border-left:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s cubic-bezier(.19,1,.22,1)}
.lpjh-mega__col:first-child{padding-left:0;border-left:0}
.lpjh-mega__col:last-child{padding-right:0}
.lpjh-mega.is-open .lpjh-mega__col{opacity:1;transform:none}
.lpjh-mega.is-open .lpjh-mega__col:nth-child(1){transition-delay:.18s}
.lpjh-mega.is-open .lpjh-mega__col:nth-child(2){transition-delay:.26s}
.lpjh-mega.is-open .lpjh-mega__col:nth-child(3){transition-delay:.34s}
.lpjh-mega.is-open .lpjh-mega__col:nth-child(4){transition-delay:.42s}
.lpjh-mega__eyebrow{margin:0 0 1.75rem;font-family:var(--tr-font-body);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tr-gold-pale)}
.lpjh-mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.05rem}
.lpjh-mega__item{display:inline-block;font-family:var(--tr-font-display);font-size:var(--hd-item-size,1.6rem);font-weight:500;line-height:1.12;letter-spacing:-.01em;color:var(--tr-cream);text-decoration:none;background-image:linear-gradient(var(--tr-gold-pale),var(--tr-gold-pale));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:color .26s ease,background-size .4s cubic-bezier(.19,1,.22,1)}
.lpjh-mega__item:hover,.lpjh-mega__item:focus-visible{color:var(--tr-gold-pale);background-size:100% 1px}
.lpjh-mega__sub{margin-top:1.6rem;padding-top:1.35rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:.7rem}
.lpjh-mega__sublink{font-family:var(--tr-font-body);font-size:.76rem;font-weight:500;letter-spacing:.04em;color:rgba(250,250,248,.62);text-decoration:none;transition:color .26s ease}
.lpjh-mega__sublink:hover{color:var(--tr-gold-pale)}

.lpjh-mega__foot{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.12)}
.lpjh-mega__foot-inner{max-width:1360px;margin:0 auto;padding:1.6rem 2rem;display:flex;align-items:baseline;justify-content:space-between;gap:2rem;opacity:0;transition:opacity .5s ease .5s}
.lpjh-mega.is-open .lpjh-mega__foot-inner{opacity:1}
.lpjh-mega__tag{margin:0;font-family:var(--tr-font-display);font-size:1.05rem;font-weight:500;color:rgba(250,250,248,.7)}
.lpjh-mega__contact{display:flex;align-items:baseline;gap:1.6rem}
.lpjh-mega__contact a{font-family:var(--tr-font-body);font-size:.74rem;font-weight:500;letter-spacing:.06em;color:rgba(250,250,248,.72);text-decoration:none;transition:color .26s ease}
.lpjh-mega__contact a:hover{color:var(--tr-gold-pale)}
.lpjh-mega__contact .is-caps{text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:.68rem;color:var(--tr-gold-pale)}
.lpjh-mega[data-dividers="off"] .lpjh-mega__col{border-left:0}
.lpjh-mega[data-reveal="fade"]{clip-path:none;opacity:0;transition:opacity .45s ease}
.lpjh-mega[data-reveal="fade"].is-open{opacity:1}

/* ---------- MOBILE ----------
   In the prototype the mobile bar is opted into with .lpjh-hd--m so both
   states can sit side by side on one canvas. In production it is a media
   query — the modifier is kept as an alias so either works. */
@media (max-width:899px){
  .lpjh-hd,.lpjh-hd.is-sticky{padding:1rem 0}
  .lpjh-hd__inner{gap:1rem;padding:0 1.25rem}
  .lpjh-hd__logo img,.lpjh-hd.is-sticky .lpjh-hd__logo img{height:34px}
  .lpjh-hd__nav,.lpjh-hd__tel,.lpjh-hd__rule{display:none}
  .lpjh-hd__util{margin-left:auto;gap:1rem}
  .lpjh-mega{display:none}
}
@media (min-width:900px){.lpjh-mnav{display:none}}
.lpjh-hd--m .lpjh-hd__inner{gap:1rem;padding:0 1.25rem}
.lpjh-hd--m .lpjh-hd__logo img{height:34px}
.lpjh-hd--m .lpjh-hd__util{margin-left:auto;gap:1rem}
.lpjh-hd--m .lpjh-hd__nav,.lpjh-hd--m .lpjh-hd__tel,.lpjh-hd--m .lpjh-hd__rule{display:none}
.lpjh-mnav{position:absolute;inset:0;z-index:60;background:var(--tr-charcoal);color:var(--tr-cream);display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .6s cubic-bezier(.19,1,.22,1)}
.lpjh-mnav.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.lpjh-mnav__bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.35rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.12)}
.lpjh-mnav__bar img{height:34px;width:auto;display:block}
.lpjh-mnav__scroll{flex:1 1 auto;overflow-y:auto}
.lpjh-mnav__sec{border-bottom:1px solid rgba(255,255,255,.12)}
.lpjh-mnav__trigger{width:100%;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;background:none;border:0;cursor:pointer;color:var(--tr-cream);font-family:var(--tr-font-display);font-size:1.5rem;font-weight:500;letter-spacing:-.01em;text-align:left;transition:color .26s ease}
.lpjh-mnav__trigger[aria-expanded="true"]{color:var(--tr-gold-pale)}
.lpjh-mnav__plus{position:relative;flex:0 0 auto;width:14px;height:14px}
.lpjh-mnav__plus::before,.lpjh-mnav__plus::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor;transition:transform .34s cubic-bezier(.19,1,.22,1)}
.lpjh-mnav__plus::after{transform:rotate(90deg)}
.lpjh-mnav__trigger[aria-expanded="true"] .lpjh-mnav__plus::after{transform:rotate(0)}
.lpjh-mnav__panel{overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.19,1,.22,1)}
.lpjh-mnav__panel.is-open{max-height:420px}
.lpjh-mnav__panel ul{list-style:none;margin:0;padding:0 1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.lpjh-mnav__panel a{min-height:44px;display:flex;align-items:center;font-family:var(--tr-font-body);font-size:.82rem;font-weight:500;letter-spacing:.04em;color:rgba(250,250,248,.72);text-decoration:none}
.lpjh-mnav__panel a:hover{color:var(--tr-gold-pale)}
.lpjh-mnav__foot{flex:0 0 auto;padding:1.5rem 1.25rem 1.75rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:.9rem}
.lpjh-mnav__foot .lpjh-hd__cta{justify-content:center;height:3.1rem}
.lpjh-mnav__foot-links{display:flex;flex-wrap:wrap;gap:1.1rem}
.lpjh-mnav__foot-links a{font-family:var(--tr-font-body);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,248,.6);text-decoration:none}

/* ---------- SHARED FOCUS ---------- */
.lpjh-hd a:focus-visible,.lpjh-hd button:focus-visible,.lpjh-mega a:focus-visible,.lpjh-mega button:focus-visible,.lpjh-mnav a:focus-visible,.lpjh-mnav button:focus-visible{outline:2px solid var(--tr-gold-light);outline-offset:3px}

/* Panel tweaks exposed in the prototype's Tweaks panel — the shipped defaults
   are: no Check Availability button in the bar, phone visible, three primary
   links, "Menu" label, charcoal sticky, wipe reveal, 1.6rem links, hairlines
   on, contact footer on. The two data-attribute hooks below stay in the
   stylesheet so those variants can be enabled without a rebuild. */

/* ── Reduced motion: instant show, no wipe/stagger ── */
@media (prefers-reduced-motion: reduce) {
	.lpjh-mega, .lpjh-mnav { transition: none !important; }
	.lpjh-mega.is-open, .lpjh-mnav.is-open { clip-path: none !important; }
	.lpjh-mega__col, .lpjh-mega__foot { transition: none !important; opacity: 1 !important; transform: none !important; }
	.lpjh-mnav__panel { transition: none !important; }
	.lpjh-hd, .lpjh-hd * { transition: none !important; }
}

/* ── WP menu output hardening ──
 * wp_nav_menu wraps every item in <li> (bullets + parent-theme link color).
 * Reset the list chrome and let .lpjh-hd__link (added via nav_menu_link_attributes)
 * carry the type. Scoped + !important to beat the parent theme's menu CSS. */
.lpjh-hd__nav { list-style: none; }
.lpjh-hd__nav li { list-style: none !important; margin: 0 !important; padding: 0 !important; display: inline-flex; background: none; }
.lpjh-hd__nav li::marker { content: none; }
.lpjh-hd__nav li::before { display: none !important; content: none !important; }

/* ── Focus ring hygiene ──
 * The gold ring is defined on :focus-visible. When the panel closes via mouse,
 * focus returns to the MENU button but :focus-visible doesn't match, so the
 * browser's default (white) ring showed. Suppress it for non-keyboard focus;
 * keyboard users still get the gold :focus-visible ring above. */
.lpjh-hd a:focus:not(:focus-visible),
.lpjh-hd button:focus:not(:focus-visible),
.lpjh-mega a:focus:not(:focus-visible),
.lpjh-mega button:focus:not(:focus-visible),
.lpjh-mnav a:focus:not(:focus-visible),
.lpjh-mnav button:focus:not(:focus-visible) { outline: none; }

/* ── z-index for VRP / luxury pages ──
 * VRP templates stack content up to z-index 100001 (date pickers, guest select,
 * inquiry slideout, fullscreen gallery). The default bar z-index (40) sat under
 * ALL of it, so the header vanished behind VRP content. Raise the bar above
 * normal content; raise the panels above every VRP takeover so the menu still
 * covers everything when open. (When the panel opens, page-noscroll suppresses
 * the bar on VRP pages anyway.) */
.lpjh-hd,
.lpjh-hd.is-sticky { z-index: 5000; }
.lpjh-mega,
.lpjh-mnav { z-index: 100010; }

/* ── Preloader above the header ──
 * The bar sits at z-index 5000 (to clear VRP content), but the Cassio preloader
 * is only 1000 — so the header flashed over the preloader during load. Raise ONLY
 * the parent .preloader: that creates a stacking context, so its children (the
 * curtains AND the number/circle counter) all lift above the header together,
 * keeping their own internal order. (Raising .preloader__curtain too would push
 * the curtains over the counter and hide it.) */
.preloader { z-index: 100020 !important; }

/* Single source of truth for the sticky header bar height; sub-nav rails offset against it. */
:root{--lpjh-hd-sticky-h:3.7rem}