/*
 * Shared public-site navigation contract.
 * Public routes use different HTML shells, so this layer keeps their header
 * geometry identical without duplicating route-specific markup.
 */
:root {
  --qmotion-public-header-height: 78px;
  --qmotion-public-header-border: #e3ddd6;
}

.site-header,
.rp-header,
.plans-header,
body > header:not([class]) {
  display: grid !important;
  grid-template-columns: minmax(176px, 1fr) auto minmax(176px, 1fr) !important;
  align-items: center !important;
  column-gap: 24px !important;
  min-height: var(--qmotion-public-header-height) !important;
  height: var(--qmotion-public-header-height) !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid var(--qmotion-public-header-border) !important;
  position: sticky !important;
  top: 0;
  z-index: 50;
}

.site-header > .site-brand,
.rp-header > .rp-brand,
.plans-header > .brand,
body > header:not([class]) > .brand {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
}

.site-header > nav,
.rp-header > nav,
.plans-header > nav,
body > header:not([class]) > nav {
  grid-column: 2;
  justify-self: center;
  margin: 0 !important;
  white-space: nowrap;
}

.site-header > .header-cta,
.rp-header > .rp-cta,
.plans-header > .cta,
body > header:not([class]) > .cta {
  grid-column: 3;
  justify-self: end;
  min-width: 0;
}

@media (max-width: 960px) {
  .site-header,
  .rp-header,
  .plans-header,
  body > header:not([class]) {
    grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr) !important;
    column-gap: 16px !important;
  }
}

@media (max-width: 720px) {
  :root {
    --qmotion-public-header-height: 66px;
  }

  .site-header,
  .rp-header,
  .plans-header,
  body > header:not([class]) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }

  .site-header > nav,
  .rp-header > nav,
  .plans-header > nav,
  body > header:not([class]) > nav {
    display: none !important;
  }

  .site-header > .header-cta,
  .rp-header > .rp-cta,
  .plans-header > .cta,
  body > header:not([class]) > .cta {
    grid-column: 2;
  }
}