/* VS LINE olive charcoal navigation — approved 2026-09-23. */
.brand-header,
.mobile-drawer {
  --nav-bg: #363C35;
  --nav-text: #F3F0E5;
  --nav-accent: #C8B185;
  --nav-line: rgba(200, 177, 133, .32);
  --nav-hover: #3D443B;
}

.brand-header,
.brand-header.is-home:not(.is-scrolled),
.brand-header.is-scrolled {
  background: var(--nav-bg);
  color: var(--nav-text);
  border-bottom: 1px solid var(--nav-accent);
}

.brand-header.is-scrolled {
  box-shadow: 0 6px 20px rgba(28, 33, 27, .12);
}

.brand-header .branch-wordmark,
.brand-header .branch-wordmark b {
  color: var(--nav-accent);
}

.brand-header .branch-wordmark small,
.brand-header .main-nav > a,
.brand-header .hospital-menu-toggle,
.brand-header .header-actions > button {
  color: var(--nav-text);
}

.brand-header .main-nav a:hover,
.brand-header .main-nav a:focus,
.brand-header .hospital-menu-toggle:hover,
.brand-header .hospital-menu-toggle:focus-visible,
.brand-header .header-actions > button:hover {
  color: var(--nav-accent);
}

.brand-header a:focus-visible,
.brand-header button:focus-visible,
.mobile-drawer a:focus-visible,
.mobile-drawer button:focus-visible,
.mobile-drawer summary:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 3px;
}

.brand-header .hospital-submenu {
  background: var(--nav-bg);
  color: var(--nav-text);
  border-color: var(--nav-line);
  box-shadow: 0 12px 30px rgba(28, 33, 27, .2);
}

.brand-header .hospital-submenu a:hover,
.brand-header .hospital-submenu a:focus-visible {
  background: var(--nav-hover);
  color: var(--nav-accent);
}

.mobile-drawer {
  background: var(--nav-bg);
  color: var(--nav-text);
}

.mobile-drawer-head,
.mobile-drawer-nav > a,
.mobile-drawer .drawer-hospital > summary,
.mobile-drawer .drawer-hospital > div {
  border-color: var(--nav-line);
}

.mobile-drawer-head strong {
  color: var(--nav-accent);
}

.mobile-drawer-head button,
.mobile-drawer .drawer-hospital > div a {
  color: var(--nav-text);
}

.mobile-drawer .drawer-hospital > div {
  background: var(--nav-hover);
}

.mobile-drawer-nav a:hover,
.mobile-drawer-nav a:focus-visible,
.mobile-drawer .drawer-hospital > div a:hover,
.mobile-drawer .drawer-hospital > div a:focus-visible {
  color: var(--nav-accent);
}

.mobile-drawer-contact a,
.mobile-drawer-contact button {
  border-color: var(--nav-accent);
  color: var(--nav-text);
}

.mobile-drawer-contact a:last-child,
.mobile-drawer-contact button:last-child {
  background: var(--nav-accent);
  color: var(--nav-bg);
}

/* The procedure and care pages use the public-shell navigation. */
.public-shell-page .public-shell-header,
.public-shell-page .public-shell-drawer {
  --nav-bg: #363C35;
  --nav-text: #F3F0E5;
  --nav-accent: #C8B185;
  --nav-line: rgba(200, 177, 133, .32);
  --nav-hover: #3D443B;
  background: var(--nav-bg);
  color: var(--nav-text);
}

.public-shell-page .public-shell-header {
  border-bottom-color: var(--nav-accent);
  box-shadow: 0 6px 20px rgba(28, 33, 27, .12);
}

.public-shell-page .public-shell-header .branch-wordmark,
.public-shell-page .public-shell-header .branch-wordmark b {
  color: var(--nav-accent);
}

.public-shell-page .public-shell-header .branch-wordmark small,
.public-shell-page .public-shell-nav > a,
.public-shell-page .public-shell-hospital__toggle,
.public-shell-page .public-shell-search,
.public-shell-page .public-shell-menu-open,
.public-shell-page .public-shell-hospital__submenu a {
  color: var(--nav-text);
}

.public-shell-page .public-shell-nav > a:hover,
.public-shell-page .public-shell-nav > a:focus-visible,
.public-shell-page .public-shell-nav > a[aria-current="page"],
.public-shell-page .public-shell-hospital__toggle:hover,
.public-shell-page .public-shell-hospital__toggle:focus-visible,
.public-shell-page .public-shell-search:hover,
.public-shell-page .public-shell-menu-open:hover {
  color: var(--nav-accent);
}

.public-shell-page .public-shell-header a:focus-visible,
.public-shell-page .public-shell-header button:focus-visible,
.public-shell-page .public-shell-drawer a:focus-visible,
.public-shell-page .public-shell-drawer button:focus-visible,
.public-shell-page .public-shell-drawer summary:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 3px;
}

.public-shell-page .public-shell-hospital__submenu {
  background: var(--nav-bg);
  color: var(--nav-text);
  border-color: var(--nav-line);
  box-shadow: 0 12px 30px rgba(28, 33, 27, .2);
}

.public-shell-page .public-shell-hospital__submenu a:hover,
.public-shell-page .public-shell-hospital__submenu a:focus-visible,
.public-shell-page .public-shell-hospital__submenu a[aria-current="page"] {
  background: var(--nav-hover);
  color: var(--nav-accent);
}

.public-shell-page .public-shell-drawer__head,
.public-shell-page .public-shell-drawer__nav > a,
.public-shell-page .public-shell-drawer__hospital > summary,
.public-shell-page .public-shell-drawer__hospital > div {
  border-color: var(--nav-line);
}

.public-shell-page .public-shell-drawer__head strong {
  color: var(--nav-accent);
}

.public-shell-page .public-shell-drawer__hospital > div {
  background: var(--nav-hover);
}

.public-shell-page .public-shell-drawer__head button,
.public-shell-page .public-shell-drawer__hospital a {
  color: var(--nav-text);
}

.public-shell-page .public-shell-drawer__nav a:hover,
.public-shell-page .public-shell-drawer__nav a:focus-visible,
.public-shell-page .public-shell-drawer__nav a[aria-current="page"] {
  color: var(--nav-accent);
}

.public-shell-page .public-shell-drawer__contact a {
  border-color: var(--nav-accent);
  color: var(--nav-text);
}

.public-shell-page .public-shell-drawer__contact a:last-child {
  background: var(--nav-accent);
  color: var(--nav-bg);
}