/* Shared LymphAware logo geometry across the public website. */
:root {
  --brand-header-padding-top: 4px;
  --brand-header-padding-bottom: 10px;
  --brand-mobile-logo-gap: 14px;
}

/* Homepage and supporting pages use the same desktop/tablet logo position. */
body .public-site-header .public-header-inner,
body .secondary-header .header-inner {
  min-height: 0 !important;
  padding-top: var(--brand-header-padding-top) !important;
  padding-bottom: var(--brand-header-padding-bottom) !important;
  align-items: center;
}

body .public-site-header .public-header-brand,
body .secondary-header .header-brand {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body .public-site-header .public-site-logo,
body .secondary-header .header-logo {
  display: block;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* QR profile branding keeps its own full-width profile layout. */
body .public-brand,
body .shell > .brand {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Preserve the established administration header independently. */
body:has(main.admin-page) .site-header .header-inner {
  min-height: 0 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

body:has(main.admin-page) .site-header .header-inner::before {
  height: auto;
  aspect-ratio: 1121 / 197;
}

@media (max-width: 680px) {
  /*
    Homepage and every supporting page use exactly the same mobile logo
    position: no extra space above the logo and a 14px gap beneath it before
    the blue navigation/return bar.
  */
  body .public-site-header .public-header-inner,
  body .secondary-header .header-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body .public-site-header .public-header-brand,
  body .secondary-header .header-brand {
    padding-top: 0 !important;
    padding-bottom: var(--brand-mobile-logo-gap) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Keep current QR-profile mobile spacing aligned independently. */
  body .public-profile-page .public-brand,
  body .page .shell > .brand {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
  }

  body .page .shell > .brand {
    margin-left: 4px;
    margin-right: 4px;
  }
}