/*
 * REAL.PRO Studios
 * Header Premium V1
 * Final authority for header brand contrast + responsive presentation.
 * Narrow scope: header / fullscreen navigation only.
 */

:root {
  --rp-hp-navy: #061321;
  --rp-hp-navy-soft: rgba(6,19,33,.94);
  --rp-hp-red: #d53239;

  --rp-hp-header-h: clamp(82px, 6vw, 102px);
  --rp-hp-header-h-mobile: clamp(74px, 19vw, 88px);

  --rp-hp-edge:
    clamp(18px, 4.2vw, 72px);

  --rp-hp-logo:
    clamp(238px, 18vw, 318px);

  --rp-hp-logo-mobile:
    clamp(198px, 57vw, 252px);
}


/* ==========================================================
   1. CONSISTENT DARK HEADER SURFACE
   ========================================================== */

html body .site-header[data-header],
html body .site-header[data-header].is-scrolled,
html body .site-header[data-header]:hover,
html body .site-header[data-header]:focus-within,
html body .site-header[data-header][data-rp-surface="dark"],
html body .site-header[data-header][data-rp-surface="light"],
html body.menu-open .site-header[data-header] {
  box-sizing: border-box !important;

  height:
    calc(
      var(--rp-hp-header-h)
      + env(safe-area-inset-top, 0px)
    ) !important;

  min-height:
    calc(
      var(--rp-hp-header-h)
      + env(safe-area-inset-top, 0px)
    ) !important;

  padding-top:
    env(safe-area-inset-top, 0px) !important;

  padding-right:
    max(
      var(--rp-hp-edge),
      env(safe-area-inset-right, 0px)
    ) !important;

  padding-bottom: 0 !important;

  padding-left:
    max(
      var(--rp-hp-edge),
      env(safe-area-inset-left, 0px)
    ) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  background:
    linear-gradient(
      180deg,
      rgba(4,14,28,.975) 0%,
      rgba(6,19,33,.945) 100%
    ) !important;

  border-bottom:
    1px solid rgba(255,255,255,.075) !important;

  box-shadow:
    0 12px 38px rgba(0,0,0,.12) !important;

  color: #fff !important;

  z-index: 10000 !important;
}


/* Remove competing decorative header layers. */

html body .site-header[data-header]::before {
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .site-header[data-header]::after {
  opacity: .38 !important;
  pointer-events: none !important;
}


/* ==========================================================
   2. CANONICAL BRAND LOGO
   ========================================================== */

html body .site-header[data-header] .header-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  flex: 0 1 auto !important;

  width: var(--rp-hp-logo) !important;
  max-width:
    calc(100vw - 150px) !important;

  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;
  filter: none !important;
}

html body .site-header[data-header] .header-logo img,
html body .site-header[data-header] img.rp-brand-logo,
html body .site-header[data-header].is-scrolled .header-logo img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: none !important;

  object-fit: contain !important;
  object-position: left center !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;

  filter: none !important;
  mix-blend-mode: normal !important;

  transform: none !important;
}


/* ==========================================================
   3. HAMBURGER — LARGE, CLEAN, TOUCH SAFE
   ========================================================== */

html body .site-header[data-header] .menu-toggle {
  position: relative !important;

  flex: 0 0 52px !important;

  width: 52px !important;
  min-width: 52px !important;

  height: 52px !important;
  min-height: 52px !important;

  margin: 0 !important;
  padding: 10px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;

  gap: 6px !important;

  border: 0 !important;
  border-radius: 14px !important;

  background: transparent !important;

  color: #fff !important;

  opacity: 1 !important;

  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .site-header[data-header] .menu-toggle span {
  display: block !important;

  height: 2px !important;

  border-radius: 999px !important;

  background: #fff !important;

  opacity: 1 !important;

  transform-origin: center !important;
}

html body .site-header[data-header] .menu-toggle span:nth-child(1),
html body .site-header[data-header] .menu-toggle span:nth-child(3) {
  width: 31px !important;
}

html body .site-header[data-header] .menu-toggle span:nth-child(2) {
  width: 23px !important;
  margin-left: 8px !important;

  background: var(--rp-hp-red) !important;
}


/* Keyboard clarity */

html body .site-header[data-header] .header-logo:focus-visible,
html body .site-header[data-header] .menu-toggle:focus-visible,
html body .menu-close:focus-visible,
html body .menu-links a:focus-visible {
  outline:
    2px solid rgba(255,255,255,.96) !important;

  outline-offset: 5px !important;
}


/* ==========================================================
   4. MENU VIEWPORT GOVERNANCE
   ========================================================== */

html body.menu-open {
  overscroll-behavior: none !important;
}

html body .fullscreen-menu,
html body .mobile-menu,
html body .mobile-menu--premium {
  overscroll-behavior: contain !important;
}

html body .menu-panel {
  box-sizing: border-box !important;

  max-height: 100dvh !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  overscroll-behavior: contain !important;

  -webkit-overflow-scrolling: touch !important;

  padding-bottom:
    max(
      28px,
      env(safe-area-inset-bottom, 0px)
    ) !important;
}


/* Comfortable interactive minimums */

html body .menu-links a,
html body .menu-close {
  min-height: 48px !important;

  touch-action: manipulation !important;

  -webkit-tap-highlight-color: transparent !important;
}


/* ==========================================================
   5. TABLET / MOBILE
   ========================================================== */

@media (max-width: 980px) {

  html body .site-header[data-header] .rp-header-statement {
    display: none !important;
  }

}


@media (max-width: 760px) {

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled,
  html body .site-header[data-header]:hover,
  html body .site-header[data-header]:focus-within,
  html body .site-header[data-header][data-rp-surface="dark"],
  html body .site-header[data-header][data-rp-surface="light"],
  html body.menu-open .site-header[data-header] {

    height:
      calc(
        var(--rp-hp-header-h-mobile)
        + env(safe-area-inset-top, 0px)
      ) !important;

    min-height:
      calc(
        var(--rp-hp-header-h-mobile)
        + env(safe-area-inset-top, 0px)
      ) !important;

    padding-right:
      max(
        clamp(16px, 4.5vw, 24px),
        env(safe-area-inset-right, 0px)
      ) !important;

    padding-left:
      max(
        clamp(16px, 4.5vw, 24px),
        env(safe-area-inset-left, 0px)
      ) !important;
  }


  html body .site-header[data-header] .header-logo,
  html body .site-header[data-header].is-scrolled .header-logo {

    width:
      var(--rp-hp-logo-mobile) !important;

    max-width:
      calc(100vw - 94px) !important;
  }


  html body .site-header[data-header] .menu-toggle {
    flex-basis: 50px !important;

    width: 50px !important;
    min-width: 50px !important;

    height: 50px !important;
    min-height: 50px !important;

    padding: 9px !important;

    border-radius: 13px !important;
  }


  html body .site-header[data-header] .menu-toggle span:nth-child(1),
  html body .site-header[data-header] .menu-toggle span:nth-child(3) {
    width: 29px !important;
  }


  html body .site-header[data-header] .menu-toggle span:nth-child(2) {
    width: 22px !important;
    margin-left: 7px !important;
  }


  html body .fullscreen-menu,
  html body .mobile-menu,
  html body .mobile-menu--premium {
    min-height: 100svh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }


  html body .menu-panel {
    width: 100% !important;

    max-width: none !important;

    min-height: 100% !important;

    padding-left:
      max(
        clamp(20px, 7vw, 36px),
        env(safe-area-inset-left, 0px)
      ) !important;

    padding-right:
      max(
        clamp(20px, 7vw, 36px),
        env(safe-area-inset-right, 0px)
      ) !important;

    padding-bottom:
      max(
        clamp(28px, 7vh, 56px),
        env(safe-area-inset-bottom, 0px)
      ) !important;
  }


  html body .menu-links {
    width: 100% !important;

    margin-inline: auto !important;
  }


  html body .menu-links a {
    min-height: 48px !important;

    font-size:
      clamp(1.75rem, 8.7vw, 3.25rem) !important;

    line-height: .98 !important;

    letter-spacing: -.025em !important;
  }


  html body .menu-close {
    min-width: 50px !important;
    min-height: 50px !important;
  }
}


/* Very narrow phones */

@media (max-width: 360px) {

  :root {
    --rp-hp-logo-mobile:
      min(198px, calc(100vw - 108px));
  }

  html body .site-header[data-header] .menu-toggle {
    width: 48px !important;
    min-width: 48px !important;

    height: 48px !important;
    min-height: 48px !important;
  }

  html body .menu-links a {
    font-size:
      clamp(1.6rem, 8.5vw, 2.5rem) !important;
  }
}


/* Short mobile screens / browser chrome / landscape */

@media (max-width: 760px) and (max-height: 700px) {

  html body .menu-panel {
    padding-top: 16px !important;
    padding-bottom:
      max(
        20px,
        env(safe-area-inset-bottom, 0px)
      ) !important;
  }

  html body .menu-links a {
    min-height: 44px !important;

    font-size:
      clamp(1.5rem, 6.5vh, 2.25rem) !important;

    line-height: 1 !important;
  }
}


@media (orientation: landscape) and (max-height: 560px) {

  html body .site-header[data-header],
  html body .site-header[data-header].is-scrolled {
    --rp-hp-header-h-mobile: 68px;
  }

  html body .menu-panel {
    overflow-y: auto !important;
  }

  html body .menu-links a {
    min-height: 42px !important;

    font-size:
      clamp(1.35rem, 6.2vh, 2rem) !important;
  }
}


/* ==========================================================
   6. MOTION / ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  html body .site-header[data-header],
  html body .site-header[data-header] *,
  html body .fullscreen-menu *,
  html body .mobile-menu *,
  html body .mobile-menu--premium * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* Older viewport fallback */

@supports not (height: 100dvh) {

  html body .fullscreen-menu,
  html body .mobile-menu,
  html body .mobile-menu--premium {
    height: 100vh !important;
    max-height: 100vh !important;
  }

}