/**
 * Site header/footer — match static HTML; override Bootstrap/Picostrap collisions.
 * Load last on public pages.
 */

#theme-main {
  padding-top: var(--po-header-height);
}

/* Logged-in view: clear WP admin bar */
.admin-bar #wrapper-navbar {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar #wrapper-navbar {
    top: 46px;
  }

  .admin-bar #theme-main {
    padding-top: calc(var(--po-header-height) + 46px);
  }
}

@media (min-width: 783px) {
  .admin-bar #theme-main {
    padding-top: calc(var(--po-header-height) + 32px);
  }
}

/* Header shell — flex layout (Bootstrap reboot sets display:block on header) */
.po-site-chrome #wrapper-navbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box;
}

.po-site-chrome #wrapper-navbar nav {
  display: none;
}

@media (min-width: 768px) {
  .po-site-chrome #wrapper-navbar nav {
    display: flex !important;
    align-items: center;
    gap: 2rem;
  }
}

/* Nav links — no Bootstrap link color/underline */
.po-site-chrome #wrapper-navbar nav a,
.po-site-chrome #wrapper-navbar .po-logo-link,
.po-site-chrome #wrapper-navbar .po-header-cta {
  text-decoration: none !important;
}

.po-site-chrome #wrapper-navbar nav a {
  font-family: "Public Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.po-site-chrome #wrapper-navbar .po-header-cta {
  font-family: "Public Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 0;
}

/* Tailwind token colors — Bootstrap utilities use the same class names */
.po-site-chrome #wrapper-navbar .text-primary,
.po-site-chrome #wrapper-footer .text-primary {
  color: #1a202c !important;
}

.po-site-chrome #wrapper-navbar .bg-primary,
.po-site-chrome #wrapper-navbar .po-header-cta.bg-primary {
  background-color: #1a202c !important;
}

.po-site-chrome #wrapper-navbar .text-on-primary,
.po-site-chrome #wrapper-navbar .po-header-cta.text-on-primary {
  color: #ffffff !important;
}

.po-site-chrome #wrapper-navbar .text-secondary,
.po-site-chrome #wrapper-footer .text-secondary {
  color: #3182ce !important;
}

.po-site-chrome #wrapper-navbar .text-on-surface-variant,
.po-site-chrome #wrapper-footer .text-on-surface-variant,
.po-site-chrome #side-drawer .text-on-surface-variant {
  color: #4a5568 !important;
}

.po-site-chrome #wrapper-navbar .border-secondary {
  border-color: #3182ce !important;
}

.po-site-chrome #wrapper-navbar .bg-surface-container-lowest {
  background-color: #ffffff !important;
}

.po-site-chrome #wrapper-footer .bg-surface-container-highest {
  background-color: #f7fafc !important;
}

.po-site-chrome #wrapper-navbar .border-outline-variant,
.po-site-chrome #wrapper-footer .border-outline-variant {
  border-color: #e2e8f0 !important;
}

.po-site-chrome #side-drawer .bg-surface-container-low {
  background-color: #f7fafc !important;
}

.po-site-chrome #side-drawer .bg-surface-container-high,
.po-site-chrome #side-drawer a:hover {
  background-color: #edf2f7;
}

.po-site-chrome #wrapper-navbar .md\:hidden {
  display: none !important;
}

@media (max-width: 767px) {
  .po-site-chrome #wrapper-navbar .md\:hidden {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .po-site-chrome #wrapper-navbar .md\:hidden {
    display: none !important;
  }

  .po-site-chrome #side-drawer {
    display: none !important;
  }
}

/* Footer — match site-layout.css */
.po-site-chrome #wrapper-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}

.po-site-chrome #wrapper-footer > p.text-outline {
  color: #4a5568 !important;
}

.po-site-chrome #wrapper-footer a.text-secondary.font-bold {
  color: #1a202c !important;
}

.po-site-chrome #wrapper-footer a.text-secondary.font-bold:hover {
  color: #3182ce !important;
}

.po-site-chrome #wrapper-footer nav a {
  font-family: "Public Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #4a5568 !important;
  text-decoration: underline !important;
}

.po-site-chrome #wrapper-footer nav a:hover {
  color: #1a202c !important;
}

.po-site-chrome #wrapper-footer .custom-logo-link,
.po-site-chrome #wrapper-navbar .custom-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  line-height: 0;
}

.po-site-chrome .skip-link.visually-hidden-focusable:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: #1a202c;
  color: #fff;
  clip: auto;
  width: auto;
  height: auto;
}