/* ============================================================
   Rentera Custom Header  v1.4
   All selectors scoped to #rh-header to prevent theme conflicts
   ============================================================ */

/* ─── Reset (scoped) ──────────────────────────────────────── */
#rh-header,
#rh-header * ,
#rh-header *::before,
#rh-header *::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

/* ─── Design tokens ───────────────────────────────────────── */
#rh-header.rh-dark {
  --rh-bg:             #10222E;
  --rh-text:           #FFF5D0;
  --rh-btn-bg:         #FFF5D0;
  --rh-btn-text:       #10222E;
  --rh-btn-hover-bg:   #CDCBFF;
  --rh-btn-hover-text: #10222E;
  --rh-dropdown-bg:    #10222E;
  --rh-ham-box-bg:     #FFF5D0;
  --rh-ham-line-color: #10222E;
  --rh-divider:        rgba(255,245,208,0.12);
}
#rh-header.rh-light {
  --rh-bg:             #F9F9F7;
  --rh-text:           #10222E;
  --rh-btn-bg:         #10222E;
  --rh-btn-text:       #ffffff;
  --rh-btn-hover-bg:   #CDCBFF;
  --rh-btn-hover-text: #10222E;
  --rh-dropdown-bg:    #F9F9F7;
  --rh-ham-box-bg:     #10222E;
  --rh-ham-line-color: #FFF5D0;
  --rh-divider:        rgba(16,34,46,0.10);
}

/* ─── Header shell ────────────────────────────────────────── */
/* Full viewport width, fixed, above everything (Divi = 1000000) */
#rh-header {
  position: fixed !important;
  top:    0 !important;
  left:   0 !important;
  right:  0 !important;
  width:  100% !important;
  z-index: 1000001 !important;
  background-color: var(--rh-bg);
  color: var(--rh-text);
  font-family: 'Alexandria', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: normal;
}

/* ─── Inner bar ───────────────────────────────────────────── */
/*
  Layout rule from spec:
    content width = calc(100% - 48px)   → 24 px gutter left + right
    max-width = 1280 px
    centered   = auto left/right margins

  We achieve this with left/right padding on the header itself
  BUT also clamp via a max-width inner div so centering works on
  screens wider than 1280 + 48 = 1328 px.

  Technique: header has NO padding. Inner div uses:
    width: calc(100% - 48px)
    max-width: 1280px
    margin-left: auto; margin-right: auto   ← explicit, not shorthand
*/
#rh-header .rh-inner {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  width:           calc(100% - 48px) !important;
  max-width:       1280px !important;
  margin-left:     auto !important;
  margin-right:    auto !important;
  height:          89px !important;
  position:        relative;
  z-index:         1000002; /* above mobile overlay */
}

/* ─── Logo ────────────────────────────────────────────────── */
#rh-header .rh-logo {
  display:         flex;
  align-items:     center;
  flex-shrink:     0;
  text-decoration: none;
}
#rh-header .rh-logo img {
  display:      block;
  width:        194px !important;
  height:       34px  !important;
  object-fit:   contain;
  max-width:    none;
}

/* ─── Desktop nav ─────────────────────────────────────────── */
#rh-header .rh-desktop-nav {
  display:     flex;
  align-items: center;
  gap:         32px;
}
#rh-header .rh-menu-list {
  display:     flex;
  align-items: center;
  gap:         32px;
  list-style:  none;
}
#rh-header .rh-menu-item {
  position: relative;
}
#rh-header .rh-menu-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  color:           var(--rh-text);
  text-decoration: none;
  font-size:       18px;
  font-weight:     300;
  font-family:     inherit;
  white-space:     nowrap;
  line-height:     1;
  background:      none;
  cursor:          pointer;
  /* bottom-border indicator */
  border:          none;
  border-bottom:   2px solid transparent;
  padding-bottom:  4px;
  transition:      border-color 0.2s, opacity 0.15s;
}
#rh-header .rh-menu-link:hover { opacity: 0.8; }
#rh-header .rh-menu-item.rh-submenu-open > .rh-menu-link {
  border-bottom-color: var(--rh-text);
}

/* Chevron */
#rh-header .rh-chevron {
  display:     inline-flex;
  align-items: center;
  line-height: 0;
  transition:  transform 0.25s ease;
}
#rh-header .rh-submenu-open > .rh-menu-link .rh-chevron,
#rh-header .rh-mob-toggle[aria-expanded="true"] .rh-chevron {
  transform: rotate(180deg);
}

/* CTA button */
#rh-header .rh-cta-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  background-color: var(--rh-btn-bg);
  color:            var(--rh-btn-text) !important;
  text-decoration:  none !important;
  font-size:        16px;
  font-weight:      300;
  font-family:      inherit;
  white-space:      nowrap;
  padding:          0 20px;
  height:           41px;
  border-radius:    8px;
  border:           none;
  cursor:           pointer;
  line-height:      1;
  transition:       background-color 0.2s, color 0.2s;
}
#rh-header .rh-cta-btn:hover {
  background-color: var(--rh-btn-hover-bg)   !important;
  color:            var(--rh-btn-hover-text)  !important;
}

/* ─── Desktop dropdown ────────────────────────────────────── */
/* position:fixed child of a fixed parent = viewport-anchored */
#rh-header .rh-desktop-dropdown {
  position:      fixed;
  top:           89px;
  left:          0;
  width:         100%;
  z-index:       1000000;
  pointer-events: none;
}
#rh-header .rh-desktop-dropdown[hidden] { display: none !important; }
#rh-header .rh-desktop-dropdown.rh-dropdown-visible {
  display:        block;
  pointer-events: auto;
  animation:      rh-drop-in 0.22s ease forwards;
}
@keyframes rh-drop-in {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
/* Backdrop: #rh-backdrop element injected by JS directly on <body> — avoids stacking-context trap */
/* Panel: full-width bg, rounded bottom corners */
#rh-header .rh-dropdown-panel {
  width:            100%;
  background-color: var(--rh-dropdown-bg);
  border-radius:    0 0 16px 16px;
  position:         relative;
}
/* Submenu items follow same centering as inner bar */
#rh-header .rh-dropdown-inner {
  width:        calc(100% - 48px);
  max-width:    1280px;
  margin-left:  auto;
  margin-right: auto;
  padding:      24px 0 32px;
}
#rh-header .rh-submenu-list {
  list-style:      none;
  display:         flex;
  flex-direction:  column;
  gap:             24px;
  align-items:     flex-start;
}
#rh-header .rh-submenu-link {
  color:           var(--rh-text);
  text-decoration: none;
  font-size:       18px;
  font-weight:     300;
  transition:      opacity 0.15s;
}
#rh-header .rh-submenu-link:hover { opacity: 0.7; }

/* ─── Hamburger  (34×34 px colored square, per Figma) ─────── */
#rh-header .rh-hamburger {
  display:          none;          /* flex on mobile */
  width:            34px !important;
  height:           34px !important;
  flex-shrink:      0;
  align-items:      center;
  justify-content:  center;
  background-color: var(--rh-ham-box-bg);
  border-radius:    8px;
  border:           none;
  cursor:           pointer;
  padding:          0;
  position:         relative;
  z-index:          1000002;
  overflow:         hidden;
}
#rh-header .rh-ham-line {
  display:          block;
  width:            18px;
  height:           2px;
  background-color: var(--rh-ham-line-color);
  border-radius:    2px;
  transform-origin: center;
  transition:       transform 0.3s ease, opacity 0.3s ease;
  position:         absolute;
}
#rh-header .rh-ham-top { top:  9px; }
#rh-header .rh-ham-mid { top: 16px; }
#rh-header .rh-ham-bot { top: 23px; }

#rh-header .rh-hamburger[aria-expanded="true"] .rh-ham-top {
  transform: rotate(45deg) translate(5px, 5px);
}
#rh-header .rh-hamburger[aria-expanded="true"] .rh-ham-mid {
  opacity: 0; transform: scaleX(0);
}
#rh-header .rh-hamburger[aria-expanded="true"] .rh-ham-bot {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ─── Mobile menu ─────────────────────────────────────────── */
/*
  Full-screen overlay, slides in from top.
  The header bar (.rh-inner) has z-index 1000002 and stays
  ABOVE the overlay (1000000) → logo is always visible.
  Content starts at padding-top: 109px (= 85px bar + 24px gap).
*/
#rh-header .rh-mobile-menu {
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  height:     100vh;
  background-color: var(--rh-bg);
  z-index:    1000000;
  overflow-y: auto;
  transform:  translateY(-100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
              visibility 0.35s;
}
#rh-header .rh-mobile-menu[hidden] {
  display:        block  !important;
  transform:      translateY(-100%);
  visibility:     hidden;
  pointer-events: none;
}
#rh-header .rh-mobile-menu.rh-mob-open {
  transform:      translateY(0);
  visibility:     visible;
  pointer-events: auto;
}

/* Content wrapper inside overlay */
#rh-header .rh-mob-content {
  width:        calc(100% - 48px);
  margin-left:  auto;
  margin-right: auto;
  padding-top:  109px;   /* 85px bar + 24px gap = Figma top:109px */
  padding-bottom: 40px;
  display:      flex;
  flex-direction: column;
}

/* List */
#rh-header .rh-mob-list {
  list-style: none;
  display:    flex;
  flex-direction: column;
}
#rh-header .rh-mob-item {
  border-bottom: 1px solid var(--rh-divider);
}
#rh-header .rh-mob-link,
#rh-header .rh-mob-toggle {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  color:           var(--rh-text);
  text-decoration: none;
  font-size:       18px;
  font-weight:     300;
  font-family:     inherit;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         18px 0;
  text-align:      left;
  line-height:     normal;
}
/* Submenu accordion */
#rh-header .rh-mob-submenu {
  list-style: none;
  overflow:   hidden;
  max-height: 0;
  opacity:    0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1),
              opacity 0.3s ease;
}
#rh-header .rh-mob-submenu[hidden] { display: block !important; }
#rh-header .rh-mob-submenu.rh-mob-sub-open {
  max-height: 400px;
  opacity:    1;
}
#rh-header .rh-mob-sub-link {
  padding:         12px 0 12px 14px;
  font-size:       17px;
  justify-content: flex-start;
}
/* Mobile CTA — full width of the content wrapper */
#rh-header .rh-mob-cta-btn {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  margin-top:       32px;
  width:            100%;
  height:           41px;
  background-color: var(--rh-btn-bg);
  color:            var(--rh-btn-text) !important;
  text-decoration:  none !important;
  font-size:        16px;
  font-weight:      300;
  font-family:      inherit;
  border-radius:    8px;
  border:           none;
  cursor:           pointer;
  line-height:      1;
  transition:       background-color 0.2s, color 0.2s;
}
#rh-header .rh-mob-cta-btn:hover {
  background-color: var(--rh-btn-hover-bg)  !important;
  color:            var(--rh-btn-hover-text) !important;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  #rh-header .rh-inner        { height: 85px !important; }
  #rh-header .rh-desktop-nav  { display: none !important; }
  #rh-header .rh-hamburger    { display: flex !important; }
  #rh-header .rh-desktop-dropdown { display: none !important; }
}

/* ─── Body offset — push page below fixed header ─────────── */
/*
  Override Divi's own padding/margin resets.
  We target every known Divi body class.
*/
body {
  padding-top: 89px !important;
  margin-top:  0    !important;
}
@media (max-width: 900px) {
  body { padding-top: 85px !important; }
}

/* Divi removes body padding and pushes sections instead */
body.et_fixed_nav     { padding-top: 89px !important; }
body.et_non_fixed_nav { padding-top: 89px !important; }
@media (max-width: 900px) {
  body.et_fixed_nav,
  body.et_non_fixed_nav { padding-top: 85px !important; }
}

/* Kill the white gap Divi inserts above first section */
body.et_fixed_nav .et_pb_section:first-of-type,
body.et_non_fixed_nav .et_pb_section:first-of-type {
  padding-top: 0 !important;
  margin-top:  0 !important;
}

/* ─── Standalone backdrop overlay ─────────────────────────────────────────
   Lives directly on <body> (appended by JS), NOT inside #rh-header.
   A fixed element inside a fixed parent inherits the parent's stacking
   context, which clips backdrop-filter to the parent's painted area.
   Placing it on <body> lets it correctly blur the full page behind it.
─────────────────────────────────────────────────────────────────────────── */
#rh-backdrop {
  position:             fixed;
  top:                  89px;
  left:                 0;
  width:                100%;
  height:               100vh;
  backdrop-filter:      blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background:           rgba(0,0,0,0.15);
  z-index:              999999; /* below #rh-header (1000001), above page */
  pointer-events:       none;
  opacity:              0;
  transition:           opacity 0.22s ease;
  /* Start hidden without display:none so opacity transition works */
  visibility:           hidden;
}
#rh-backdrop.rh-backdrop-visible {
  opacity:    1;
  visibility: visible;
}