/* Ridgeline floating header — rem-only. */

/* ── Desktop ── */
.rl-header {
  position: absolute;
  top: 0rem;
  left: 0rem;
  right: 0rem;
  width: 100%;
  z-index: 20;
  padding-top: 2.5rem;
}

.rl-header__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 85rem;
  margin-inline: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.rl-header__logo { flex: 0 0 auto; display: block; line-height: 0rem; }
.rl-header__logo img { display: block; height: 2.0625rem; width: auto; max-width: 12.5rem; }

/* Desktop nav */
.rl-header__nav { flex: 1; display: flex; justify-content: center; }
.rl-header__menu {
  list-style: none;
  margin: 0rem;
  padding: 0rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.rl-header__item a {
  font-family: var(--rl-font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--rl-white);
  white-space: nowrap;
  transition: opacity 0.18s;
}
.rl-header__item.is-current a { font-weight: 700; }
.rl-header__item a:hover { opacity: 0.75; }

/* ── Desktop dropdown (any menu item given children in Appearance → Menus) ──
   Opens on hover and on keyboard focus (:focus-within), so it's reachable by
   Tab as well as mouse. */
.rl-header__item.menu-item-has-children { position: relative; }

/* Caret, drawn in CSS so no icon request is needed. */
.rl-header__item.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.4rem;
  vertical-align: 0.15rem;
  border-right: 0.09375rem solid currentColor;
  border-bottom: 0.09375rem solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s;
}

.rl-header__item.menu-item-has-children:hover > a::after,
.rl-header__item.menu-item-has-children:focus-within > a::after {
  transform: rotate(-135deg);
  vertical-align: -0.05rem;
}

.rl-header__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0.35rem);
  min-width: 15rem;
  list-style: none;
  margin: 0rem;
  padding: 0.5rem 0rem;
  background: var(--rl-navy, #0e1344);
  border: 0.0625rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  box-shadow: 0rem 0.75rem 2rem rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 30;
}

/* Invisible bridge across the gap so the menu doesn't close while the
   pointer travels from the parent item down into the panel. */
.rl-header__menu .sub-menu::before {
  content: '';
  position: absolute;
  top: -0.6rem;
  left: 0rem;
  right: 0rem;
  height: 0.6rem;
}

.rl-header__item.menu-item-has-children:hover > .sub-menu,
.rl-header__item.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0rem);
}

.rl-header__menu .sub-menu li { display: block; }

.rl-header__menu .sub-menu a {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--rl-white, #ffffff);
  white-space: normal;
}

.rl-header__menu .sub-menu a:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.rl-header__menu .sub-menu .current-menu-item > a { font-weight: 700; color: var(--rl-gold, #fab529); }

/* Right group: phone + burger */
.rl-header__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Phone pill */
.rl-header__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rl-white);
  color: var(--rl-navy);
  font-family: var(--rl-font-body);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 0.75rem 1.75rem;
  border-radius: 2.6875rem;
  white-space: nowrap;
  transition: transform 0.18s, box-shadow 0.18s;
}
.rl-header__phone:hover,
.rl-header__phone:focus-visible {
  background: #000000;
  color: var(--rl-white, #ffffff);
  transform: translateY(-0.0625rem);
  box-shadow: 0rem 0.5rem 1.25rem rgba(0,0,0,0.18);
}

/* Burger — hidden on desktop */
.rl-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3125rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-shrink: 0;
}
.rl-header__burger span {
  display: block;
  width: 1.625rem;
  height: 0.1563rem;
  background: var(--rl-white);
  border-radius: 0.125rem;
  transition: transform 0.25s, opacity 0.25s;
}

/* ── Mobile overlay ── */
.rl-mobile-overlay {
  position: fixed;
  inset: 0rem;
  background: var(--rl-navy);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 0rem 2.5rem 3rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
}
.rl-mobile-overlay.is-open {
  transform: translateX(0rem);
  visibility: visible;
}

.rl-mobile-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  padding-top: 1.5rem;
  flex-shrink: 0;
}
.rl-mobile-overlay__head img { height: 2.0625rem; width: auto; }

.rl-mobile-overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  color: var(--rl-white);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.rl-mobile-overlay__close:hover { background: rgba(255,255,255,0.25); }
.rl-mobile-overlay__close svg { width: 1.25rem; height: 1.25rem; }

/* Nav list */
.rl-mobile-nav {
  list-style: none;
  padding: 0rem;
  margin: 1rem 0rem 0rem;
  flex: 1;
}
.rl-mobile-nav > li { border-bottom: 0.0625rem solid rgba(255,255,255,0.15); }
.rl-mobile-nav > li:first-child { border-top: 0.0625rem solid rgba(255,255,255,0.15); }
.rl-mobile-nav > li > a {
  display: block;
  font-family: var(--rl-font-body);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--rl-white);
  text-decoration: none;
  padding: 1.25rem 0rem;
  transition: opacity 0.15s;
}
.rl-mobile-nav > li > a:hover { opacity: 0.75; }

/* ── Mobile submenu: always expanded inline. The overlay is full-screen with
   room to spare, so an accordion would add a tap for no benefit — and it
   keeps every destination reachable in one gesture. ── */
.rl-mobile-nav .sub-menu {
  list-style: none;
  margin: 0rem 0rem 1rem;
  padding: 0rem 0rem 0rem 1rem;
  border-left: 0.125rem solid var(--rl-gold, #fab529);
}

.rl-mobile-nav .sub-menu li + li { margin-top: 0.25rem; }

.rl-mobile-nav .sub-menu a {
  display: block;
  font-family: var(--rl-font-body);
  font-size: 1.125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 0.5rem 0rem;
  transition: opacity 0.15s;
}

.rl-mobile-nav .sub-menu a:hover { opacity: 0.75; }
.rl-mobile-nav .sub-menu .current-menu-item > a { color: var(--rl-gold, #fab529); font-weight: 600; }

/* The parent of a submenu keeps its bottom padding tight so the group reads
   as one unit rather than two unrelated rows. */
.rl-mobile-nav > li.menu-item-has-children > a { padding-bottom: 0.75rem; }

/* CTA at bottom */
.rl-mobile-overlay__cta { padding-top: 2.5rem; }
.rl-mobile-overlay__btn:hover,
.rl-mobile-overlay__btn:focus-visible { background: #000000; color: var(--rl-white, #ffffff); }

.rl-mobile-overlay__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--rl-gold);
  color: var(--rl-navy-deep);
  font-family: var(--rl-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1.125rem 1.5rem;
  border-radius: 2.6875rem;
  text-decoration: none;
  transition: opacity 0.2s;
}
/* The black hover is set above; this used to re-dim it with opacity. */
.rl-mobile-overlay__btn:hover,
.rl-mobile-overlay__btn:focus-visible { background: #000000; color: var(--rl-white, #ffffff); }

/* ── Nav switches to the burger at ≤1120px ──────────────────────────────────
   The burger only appeared at 48rem, but the desktop menu needs about 1073px
   to lay out: logo + centred menu + the 187px phone pill + 2rem gaps + 5rem of
   inner padding. Everything from 769px to ~1085px therefore pushed
   .rl-header__right past the viewport edge and gave every page on the site a
   horizontal scrollbar — 64px of overflow at 1024, 188px at 900, 288px at 800.

   70rem (1120px) leaves headroom above that 1073px requirement, so the swap
   happens before the bar can overflow rather than after. The ≤48rem block
   below still owns the phone-sized tweaks (tighter padding, smaller pill);
   this rule only moves the nav/burger swap up. */
@media (max-width: 70rem) {
  .rl-header__nav { display: none; }
  .rl-header__burger { display: flex; }
}

/* ── Mobile breakpoint: ≤768px ── */
@media (max-width: 48rem) {
  .rl-header__inner { padding-inline: 1.25rem; }
  .rl-header__nav { display: none; }
  .rl-header__burger { display: flex; }
  .rl-header__phone { font-size: 0.875rem; padding: 0.5625rem 0.875rem; }
}

/* ── ≤600px: hide phone from header bar (lives in overlay instead) ── */
@media (max-width: 37.5rem) {
  .rl-header__phone { display: none; }
}

/* ── Small phones: ≤480px ── */
@media (max-width: 30rem) {
  .rl-header__inner { padding-inline: 1rem; }
  .rl-mobile-overlay { padding: 0rem 1.25rem 2.5rem; }
  .rl-mobile-nav > li > a { font-size: 1.5rem; }
}

/* ── 320px ── */
@media (max-width: 20rem) {
  .rl-header__inner { padding-inline: 0.75rem; }
}