@import url("/shared/header-tools.css?v=20261021");

/* Shared site bar (see site-nav.js), in the homepage's type and colors: IBM Plex,
   near-black on off-white, hairline rules, one red accent. Its own tokens, so it reads the same on every door.
   The IBM Plex faces are declared here once for every page that loads this file (same files as /homepage-fonts.css: WOFF2 subsets with the full TTFs as fallback; weights 400 and 600, as on the homepage). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-regular-latin.woff2) format("woff2"), url(/fonts/ibm-plex-sans-regular.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-semibold-latin.woff2) format("woff2"), url(/fonts/ibm-plex-sans-semibold.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-regular-latin.woff2) format("woff2"), url(/fonts/ibm-plex-mono-regular.ttf) format("truetype"); }

:root {
  --unm-nav-bg: #f6f5f1;
  --unm-nav-text: #191918;
  --unm-nav-secondary: #62625b;
  --unm-nav-rule: #d5d4cd;
  --unm-nav-accent: #ae0808;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --unm-nav-bg: #171918;
    --unm-nav-text: #eeeee7;
    --unm-nav-secondary: #adaea5;
    --unm-nav-rule: #3c403a;
    --unm-nav-accent: #d87067;
  }
}
:root[data-theme="dark"] {
  --unm-nav-bg: #171918;
  --unm-nav-text: #eeeee7;
  --unm-nav-secondary: #adaea5;
  --unm-nav-rule: #3c403a;
  --unm-nav-accent: #d87067;
}

/* Page column shared with the homepage (.wrap in /homepage.css): 1120px wide, gutters of 16, 24, and 40px.
   Door stylesheets size their main column with these, so content lines up under the logo. */
:root { --unm-gutter: 16px; --unm-wrap: 1120px; }
@media (min-width: 600px) { :root { --unm-gutter: 24px; } }
@media (min-width: 960px) { :root { --unm-gutter: 40px; } }

/* The bar repeats the homepage header (.header-row): logo, then the doors on a second row below 960px and in
   the same row from 960px up. Sticky only in its one-row form, where it is 64px tall (anchors leave 80px). */
.unm-sitebar {
  border-bottom: 1px solid var(--unm-nav-rule);
  background: var(--unm-nav-bg);
  color: var(--unm-nav-text);
  font: 400 1rem/1.55 "IBM Plex Sans", system-ui, sans-serif;
}
.unm-sitebar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  width: min(100% - 2 * var(--unm-gutter), var(--unm-wrap));
  min-height: 64px;
  margin-inline: auto;
}
.unm-sitebar .header-tools { justify-self: end; }
.unm-standalone-title { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.unm-sitebar-standalone { position: sticky; top: 0; z-index: 50; }
.unm-sitebar-standalone .unm-sitebar-inner { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 64px; }
.unm-sitebar-standalone .unm-sitebar-links { grid-column: 2; grid-row: 1; border-top: 0; }
.unm-sitebar-standalone .header-tools { grid-column: 3; grid-row: 1; }
.unm-sitebar a { color: inherit; text-decoration: none; }
.unm-sitebar a:hover { color: var(--unm-nav-accent); }
.unm-sitebar a:focus-visible { outline: 2px solid var(--unm-nav-accent); outline-offset: 3px; }
.unm-sitebar-brand { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; }
.unm-sitebar-brand picture { display: block; }
.unm-sitebar-brand img { display: block; width: auto; height: 32px; }
.unm-sitebar-brand .brand-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .unm-sitebar-brand .brand-light { display: none; }
  :root:not([data-theme="light"]) .unm-sitebar-brand .brand-dark { display: block; }
}
:root[data-theme="dark"] .unm-sitebar-brand .brand-light { display: none; }
:root[data-theme="dark"] .unm-sitebar-brand .brand-dark { display: block; }
/* Phones spread the five doors across the row with an 8px minimum gap; 600px and up pack them left, 24px
   apart (the homepage's .door-nav ul). */
.unm-sitebar-links { display: flex; flex-wrap: wrap; justify-content: space-between; grid-column: 1 / -1; grid-row: 2; column-gap: 8px; min-width: 0; border-top: 1px solid var(--unm-nav-rule); }
@media (min-width: 600px) {
  .unm-sitebar-links { justify-content: flex-start; column-gap: 24px; }
}
.unm-sitebar-links a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; font-size: 0.9375rem; white-space: nowrap; }
.unm-sitebar-links a[aria-current="page"] { border-bottom-color: var(--unm-nav-accent); font-weight: 600; }

/* Desktop: the doors move into the logo row, as on the homepage. */
@media (min-width: 960px) {
  .unm-sitebar { position: sticky; top: 0; z-index: 50; }
  .unm-sitebar-inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 32px; }
  .unm-sitebar-links { grid-column: 2; grid-row: 1; border-top: 0; }
  .unm-sitebar-links a { min-height: 64px; }
}
@media (max-width: 599px) {
  .unm-sitebar:not(.unm-sitebar-standalone) .header-tools { grid-column: 2; grid-row: 1; }
  .unm-sitebar-standalone .unm-sitebar-links { display: none; }
}
/* The Spanish door names (the patient app in Spanish) are about 20% longer: on phones they shrink with the
   screen so the five still fit one row from 360px up, and just above 960px the gaps narrow so the one-row
   desktop bar does not wrap. */
@media (max-width: 429px) {
  :root[lang="es"] .unm-sitebar-links { column-gap: 6px; }
  :root[lang="es"] .unm-sitebar-links a { font-size: clamp(0.75rem, 3.4vw, 0.9375rem); }
}
@media (min-width: 960px) and (max-width: 1023px) {
  :root[lang="es"] .unm-sitebar-links { column-gap: 18px; }
}
@media (forced-colors: active) {
  .unm-sitebar-links a[aria-current="page"] { border-bottom-color: Highlight; }
}
@media print { .unm-sitebar { display: none; } }

/* Shared footer (siteFooter in site-nav.js; the homepage carries the same markup). Doors, legal links, the
   one-sentence warning, and the copyright line, on the same 1120px column as the bar. */
.unm-sitefooter {
  margin-top: 48px;
  border-top: 1px solid var(--unm-nav-rule);
  background: var(--unm-nav-bg);
  color: var(--unm-nav-text);
  font: 400 1rem/1.55 "IBM Plex Sans", system-ui, sans-serif;
}
.unm-sitefooter-inner { width: min(100% - 2 * var(--unm-gutter), var(--unm-wrap)); margin-inline: auto; padding-block: 16px 32px; }
.unm-sitefooter ul { display: flex; flex-wrap: wrap; column-gap: 20px; margin: 0; padding: 0; list-style: none; }
.unm-sitefooter a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 0.9375rem; text-decoration: none; }
.unm-sitefooter a:hover { color: var(--unm-nav-accent); text-decoration: underline; }
.unm-sitefooter a:focus-visible { outline: 2px solid var(--unm-nav-accent); outline-offset: 3px; }
.unm-sitefooter-legal a { color: var(--unm-nav-secondary); font-size: 0.875rem; }
.unm-sitefooter p { margin: 8px 0 0; color: var(--unm-nav-secondary); font-size: 0.875rem; }
.unm-sitefooter-note { color: var(--unm-nav-text) !important; }
.unm-sitefooter-compact { margin-top: 32px; }
@media print { .unm-sitefooter { display: none; } }
