/* Pathways & Outcomes — unified content width
   Load after mobile.css on every page. */
@import url("po-icons.css");

:root {
  --po-content-max: 720px;
  --po-shell-max: 1280px;
  --po-logo-height: 2.75rem;
  --po-footer-logo-height: 3.25rem;
  --po-header-height: 4.5rem;
}

@media (min-width: 768px) {
  :root {
    --po-logo-height: 3.25rem;
    --po-footer-logo-height: 3.75rem;
    --po-header-height: 5rem;
  }
}

/* Fixed header height tracks logo size (pages use h-20 / pt-20 in markup) */
header.fixed.h-20 {
  height: var(--po-header-height);
}

main.pt-20 {
  padding-top: var(--po-header-height);
}

.sticky.top-20 {
  top: var(--po-header-height);
}

/* Primary content column — prose, heroes, hubs, listings (720px) */
.po-content,
.reading-container,
.ballot-container,
.po-reading,
.po-reading-wide {
  width: 100%;
  max-width: var(--po-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Wide shell — design tools only; avoid on public pages */
.po-shell {
  width: 100%;
  max-width: var(--po-shell-max);
  margin-left: auto;
  margin-right: auto;
}

/* Site logo — header wordmark */
.po-logo-link {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

/* Site logo — horizontal PNG (icon + wordmark baked in) */
.po-logo {
  display: block;
  height: var(--po-logo-height);
  width: auto;
  max-width: min(14rem, 58vw);
  object-fit: contain;
  object-position: left center;
}

.po-footer-logo {
  display: block;
  height: var(--po-footer-logo-height);
  width: auto;
  max-width: min(16rem, 72vw);
  object-fit: contain;
}

.po-logo--display {
  height: 5.5rem;
  width: auto;
  max-width: 22rem;
  object-fit: contain;
}

/* Site logo — footer */
.po-footer-logo-link {
  display: inline-flex;
  text-decoration: none;
}

/* Breadcrumbs — first element in page hero, above eyebrow/H1 */
.po-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: 1.5rem;
  color: #4A5568; /* on-surface-variant — AA small text on light surfaces */
}

.po-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.po-breadcrumb a:hover {
  color: #3182CE;
}

/* Publication card thumbnails */
.po-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.po-breadcrumb__sep {
  font-size: 12px;
  line-height: 1;
}

.po-breadcrumb__current {
  color: #1A202C;
}

/* Footer — cred line and Donate CTA on gray band (surface-container-highest) */
footer.bg-surface-container-highest > p.text-outline {
  color: #4A5568;
}

footer.bg-surface-container-highest a.text-secondary.font-bold {
  color: #1A202C;
}

footer.bg-surface-container-highest a.text-secondary.font-bold:hover {
  color: #3182CE;
}