/**
 * Refonte V2 — header alignment overrides (#760).
 *
 * Reference stylesheet that locks the visual contract of the V2 site
 * header against the prototype. Loaded last so it overrides the values
 * declared in assets/css/realisons-v2.css.
 *
 * The overrides cover sizing (header height per breakpoint), nav rail
 * spacing, CTA bar alignment, and the burger threshold so the live
 * WebDev header matches the prototype on desktop, tablet, and mobile.
 *
 * Token dependencies are declared in assets/css/realisons-tokens.css
 * and must stay in sync with the values below.
 */

:root {
  /* Desktop header height contract from the prototype. */
  --r-header-h: 72px;
}

/* Header sits above page content even when neighbouring modules promote
 * their own stacking context (e.g. sticky right rails). */
.et-boc > header.et-l--header {
  isolation: isolate;
  z-index: var(--r-z-nav);
}

html body.et-db #page-container #et-boc .et-l.et-l--header,
html body.et-db #page-container #et-boc .et-l.et-l--header .et_builder_inner_content,
html body.et-db #page-container #et-boc .et-l.et-l--header .et_pb_row,
html body.et-db #page-container #et-boc .et-l.et-l--header .et_pb_column,
html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__actions,
html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__nav,
html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__ctas {
  overflow: visible;
}

html body.et-db #page-container #et-boc .et-l.et-l--header .et_pb_section:has(.r-header) {
  overflow: visible;
}

.r-header {
  min-height: var(--r-header-h);
  padding-inline: var(--r-gutter-sm);
  padding-block: calc(var(--r-section-gap) * 0.75);
  align-items: center;
  justify-content: space-between;
  gap: var(--r-section-gap);
}

.r-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.r-header__logo svg,
.r-header__logo-img {
  height: calc(var(--r-header-h) - var(--r-section-gap) * 2);
  width: auto;
  max-width: 170px;
}

.r-header__actions {
  display: flex;
  align-items: center;
  gap: var(--r-section-gap);
}

.r-header__nav {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  transform: translateY(calc((var(--r-section-gap) + 4px) / -2));
}

.r-header__ctas {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  transform: translateY(calc((var(--r-section-gap) + 4px) / -2));
}

.r-header__cta {
  white-space: nowrap;
}

.r-header .r-nav-btn--svg,
.r-header__cta.r-nav-btn--svg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 44px;
  height: 44px;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn);
  color: var(--r-teal);
  line-height: 1;
  overflow: visible;
  text-decoration: none;
  white-space: normal;
}

.r-header .r-nav-btn--svg svg {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--r-text-dark);
  transition: color var(--r-transition);
}

.r-header .r-nav-btn__label {
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  max-inline-size: none;
  margin: 0;
  overflow: visible;
  color: var(--r-text-dark);
  font-family: var(--r-font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  pointer-events: none;
  text-align: center;
  text-overflow: clip;
  transform: translateX(-50%);
  white-space: nowrap;
}

.r-header__cta.r-nav-btn--svg {
  min-block-size: 44px;
  padding-inline: 0;
}

html body.et-db #page-container #et-boc .et-l.et-l--header .r-header .r-nav-btn__label {
  display: block;
  color: var(--r-text-dark);
  overflow: visible;
}

.r-header .r-nav-btn--svg:hover,
.r-header .r-nav-btn--svg:focus-visible {
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-teal-dark);
}

.r-header .r-nav-btn--active,
.r-header .r-nav-btn--active:hover,
.r-header .r-nav-btn--active:focus-visible {
  box-shadow: var(--r-neu-btn-active);
  color: var(--r-teal-dark);
}

html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--exchange.r-nav-btn {
  color: var(--r-orange);
  box-shadow: var(--r-neu-btn);
}

html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--exchange.r-nav-btn svg {
  color: var(--r-orange);
}

html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--order.r-nav-btn {
  color: var(--r-orange);
  box-shadow: var(--r-neu-btn);
}

html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--order.r-nav-btn svg {
  color: var(--r-orange);
}

html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--order.r-nav-btn:hover,
html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--order.r-nav-btn:focus-visible,
html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--order.r-nav-btn:hover svg,
html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--order.r-nav-btn:focus-visible svg,
html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--order.r-nav-btn--active,
html body.et-db #page-container #et-boc .et-l.et-l--header .r-header__cta--order.r-nav-btn--active svg {
  color: var(--r-orange);
}

html body.et-db #page-container #et-boc .r-header .r-nav-btn.r-nav-btn--svg svg {
  width: 22px;
  height: 22px;
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
  color: var(--r-text-dark);
}

html body.et-db #page-container #et-boc .r-header .r-nav-btn.r-nav-btn--svg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: visible;
}

html body.et-db #page-container #et-boc .et-l.et-l--header .r-header {
  height: auto;
  min-height: 80px;
  overflow: visible;
}

body.r-v2--landing-page #page-container #et-boc .et-l.et-l--header,
body.r-v2--landing-page #page-container #et-boc .et-l.et-l--header .r-header {
  display: none;
}

html body.et-db #page-container #et-boc .r-header .r-nav-btn.r-nav-btn--svg .r-nav-btn__label {
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  color: var(--r-text-dark);
  font-family: var(--r-font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  overflow: visible;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Tablet/mobile — collapse to logo + burger so the nav is touch-opened. */
@media (max-width: 1024px) {
  :root {
    --r-header-h: 64px;
  }

  .r-header {
    padding-inline: calc(var(--r-gutter-sm) * 0.85);
  }

  .r-header__actions {
    gap: calc(var(--r-section-gap) / 3);
  }

  .r-header__burger {
    display: inline-flex;
  }

  .r-header__nav,
  .r-header__ctas {
    display: none;
  }

  .r-header__nav {
    position: absolute;
    top: calc(100% + (var(--r-section-gap) / 2));
    right: var(--r-gutter-sm);
    min-inline-size: min(calc(var(--r-section-gap) * 18), calc(100vw - (var(--r-gutter-sm) * 2)));
    max-block-size: min(calc(100vh - var(--r-header-h) - var(--r-footer-h) - (var(--r-section-gap) * 3)), calc(var(--r-section-gap) * 28));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--r-section-gap) / 3);
    padding: var(--r-section-gap);
    border: 1px solid var(--r-separator);
    border-radius: var(--r-radius-input);
    background: var(--r-bg);
    box-shadow: var(--r-neu-card);
    transform: none;
    z-index: calc(var(--r-z-nav) + 1);
  }

  .r-header[data-r-v2-menu-open="true"] .r-header__nav {
    display: flex;
  }

  .r-header .r-nav-btn--svg,
  .r-header__cta.r-nav-btn--svg {
    inline-size: 44px;
    min-block-size: 44px;
    padding-inline: 0;
  }

  .r-header__ctas {
    transform: none;
  }

  .r-header .r-nav-btn__label {
    font-size: 11px;
  }
}

/* Compact phones — keep the shorter prototype header height. */
/* Mobile phones — make the portaled burger menu fill the viewport (#1131). */
@media (max-width: 768px) {
  :root {
    --r-header-h: 56px;
  }

  .r-header {
    padding-block: calc(var(--r-section-gap) * 0.375);
  }

  [data-r-v2-header-portaled="true"].r-header__nav {
    position: fixed;
    /* Header mobile menu height limit contract (#1156). */
    top: calc(var(--r-header-h) + (var(--r-section-gap) / 2) + env(safe-area-inset-top));
    inset-inline: var(--r-gutter-sm);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--r-section-gap) / 3);
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - var(--r-header-h) - var(--r-footer-h) - (var(--r-section-gap) * 2) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: calc(var(--r-section-gap) / 2);
    border: 0;
    border-radius: var(--r-radius-card);
    background: var(--r-bg);
    box-shadow: var(--r-neu-card);
    overflow-y: visible;
    overscroll-behavior: contain;
    z-index: var(--r-z-skip);
  }

  [data-r-v2-header-portaled="true"].r-header__ctas {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--r-section-gap) / 3);
    box-sizing: border-box;
    width: 100%;
    max-height: none;
    padding: 0;
    border-block-start: 0;
    background: transparent;
    box-shadow: none;
    overflow-y: visible;
    overscroll-behavior: contain;
    z-index: auto;
  }

  [data-r-v2-header-portaled="true"] .r-nav-btn.r-nav-btn--svg .r-nav-btn__label,
  [data-r-v2-header-portaled="true"] .r-nav-btn .r-nav-btn__label {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    margin-inline-start: calc(var(--r-section-gap) / 2);
    color: var(--r-text-dark);
    font-family: var(--r-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    pointer-events: none;
    white-space: nowrap;
  }

  [data-r-v2-header-portaled="true"] .r-nav-btn.r-nav-btn--svg,
  [data-r-v2-header-portaled="true"] .r-header__cta {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 36px;
    border-radius: var(--r-radius-input);
    padding: calc(var(--r-section-gap) / 4) calc(var(--r-section-gap) / 1.5);
    background: var(--r-bg);
    box-shadow: var(--r-neu-btn-sm);
    color: var(--r-text-dark);
  }

  [data-r-v2-header-portaled="true"] .r-nav-btn--action,
  [data-r-v2-header-portaled="true"] .r-nav-btn--action svg {
    color: var(--r-orange);
    stroke: var(--r-orange);
  }

  [data-r-v2-header-portaled="true"] .r-nav-btn.r-nav-btn--svg:hover,
  [data-r-v2-header-portaled="true"] .r-nav-btn.r-nav-btn--svg:focus-visible,
  [data-r-v2-header-portaled="true"] .r-header__cta:hover,
  [data-r-v2-header-portaled="true"] .r-header__cta:focus-visible {
    color: var(--r-orange);
    box-shadow: var(--r-neu-btn-hover);
  }

  [data-r-v2-header-portaled="true"] .r-nav-btn.r-nav-btn--svg svg,
  [data-r-v2-header-portaled="true"] .r-header__cta svg {
    color: currentcolor;
  }
}