/* Proxeno shared chrome: header, navigation and footer. 23.10.2026.
 *
 * Taken from the approved design mockups (proxeno-page-mockups-23.10.2026,
 * design.css). Only the chrome is here. The mockup also redefines .container,
 * .section, .eyebrow, body and a, which would restyle the body of all 30 pages;
 * those pages have no approved design yet, so none of it is carried over.
 * Every rule below is scoped to the header, the nav or the footer.
 *
 * Tokens: --ink, --paper, --parchment, --bronze, --bronze-text and --teal are
 * already defined identically on every page, so they are reused. --chrome-line
 * and --chrome-muted are the mockup's --line and --muted, renamed so they
 * cannot collide with anything a page defines later.
 *
 * Load order: after the page's own stylesheet, so the chrome wins where the old
 * header and footer rules survive.
 */

:root {
  --chrome-line: #d9cdb8;
  --chrome-muted: #4c5c66;
}

/* The header and footer keep their own measure, so every page's chrome lines
   up even where the body still uses the older 1120px container. */
.site-header > .container,
.site-footer > .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 28px;
}

/* Skip link ---------------------------------------------------------------- */

.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: #fff;
  color: var(--ink);
  padding: 14px;
  border: 1px solid var(--chrome-line);
}

.skip-link:focus {
  top: 15px;
}

/* Header ------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--chrome-line);
}

.site-header .header-inner {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--ink);
  text-decoration: none;
}

.site-header .brand svg,
.site-footer .brand svg {
  width: 43px;
  height: 43px;
}

.site-header .brand__name,
.site-footer .brand__name {
  font: 500 28px/1 var(--font-serif, "Fraunces", "Iowan Old Style", Georgia, serif);
  display: block;
  letter-spacing: -0.02em;
}

.site-header .brand__parent {
  font-size: 10px;
  display: block;
  margin-top: 7px;
  color: var(--chrome-muted);
  font-family: var(--font-sans, "Inter", -apple-system, "Segoe UI", sans-serif);
  letter-spacing: 0;
  text-transform: none;
}

/* Navigation --------------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  font-family: var(--font-sans, "Inter", -apple-system, "Segoe UI", sans-serif);
}

.site-nav > a:not(.btn) {
  padding: 12px 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--bronze-text);
}

.site-nav > a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 9px;
  text-decoration-color: var(--bronze);
}

.site-nav .btn {
  font-size: 12px;
  padding: 12px 17px;
  min-height: 46px;
}

/* The assessment button is the nav's main action. On /acuity/ it is the current
   page, and the old active styling dropped it to about 1.60:1 contrast
   (register PX-064). Keeping the bronze fill and the ink text holds the
   contrast and marks the current page with the underline instead. */
.site-nav .btn[aria-current="page"] {
  background: var(--bronze);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--ink);
}

.nav-more {
  position: relative;
}

.nav-more > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.nav-more > summary::-webkit-details-marker {
  display: none;
}

.nav-more > summary:hover {
  color: var(--bronze-text);
}

.nav-more > div {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 230px;
  background: var(--paper);
  border: 1px solid var(--chrome-line);
  box-shadow: 0 18px 34px rgba(11, 22, 32, 0.13);
  padding: 7px 0;
  z-index: 60;
}

.nav-more > div a {
  display: block;
  padding: 9px 16px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}

.nav-more > div a:hover {
  color: var(--bronze-text);
  background: var(--parchment);
}

.menu-toggle {
  display: none;
}

/* Buttons used inside the chrome ------------------------------------------- */

.site-header .btn,
.site-footer .btn {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-sans, "Inter", -apple-system, "Segoe UI", sans-serif);
  font-weight: 500;
  text-decoration: none;
  padding: 13px 20px;
}

.site-header .btn--bronze,
.site-footer .btn--bronze {
  background: var(--bronze);
  color: var(--ink);
}

.site-header .btn--bronze:hover,
.site-footer .btn--bronze:hover {
  background: #c3a475;
  color: var(--ink);
}

/* Footer ------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #bac8ce;
  padding: 50px 0 22px;
  font-size: 12px;
  font-family: var(--font-sans, "Inter", -apple-system, "Segoe UI", sans-serif);
}

/* Brand plus five link columns, after Kate reinstated the longer footer on
   24.10.2026. The brand column is narrower than the mockup's so the five
   columns still have room at 1200px. */
.site-footer .footer-top {
  display: grid;
  grid-template-columns: 1.15fr repeat(5, 1fr);
  gap: 24px 26px;
}

.site-footer .footer-top h2 {
  font: 500 12px var(--font-sans, "Inter", -apple-system, "Segoe UI", sans-serif);
  color: #ddbd85;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  text-transform: none;
}

.site-footer .footer-top > div > a:not(.brand) {
  display: block;
  margin: 10px 0;
  color: #bac8ce;
  text-decoration: none;
}

.site-footer .footer-brand .brand {
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.site-footer .footer-top a:hover,
.site-footer .footer-bottom a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer .footer-bottom {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  border-top: 1px solid #24384a;
  margin-top: 40px;
  padding-top: 20px;
}

.site-footer .footer-bottom p {
  margin: 0;
}

.site-footer .footer-bottom > div {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-footer .footer-bottom a {
  color: #bac8ce;
  text-decoration: none;
}

/* Focus, for keyboard users ------------------------------------------------ */

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header summary:focus-visible,
.site-footer a:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 5px;
}

.site-footer a:focus-visible {
  outline-color: var(--bronze);
}

/* Phone and small tablet --------------------------------------------------- */

@media (max-width: 1100px) {
  .site-header > .container,
  .site-footer > .container {
    padding-inline: 18px;
  }

  .site-header .header-inner {
    height: 76px;
  }

  .site-header .brand__name {
    font-size: 26px;
  }

  .site-header .brand svg {
    width: 36px;
    height: 36px;
  }

  .site-header .brand__parent {
    font-size: 9px;
  }

  .menu-toggle {
    display: flex;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--chrome-line);
    background: none;
    color: var(--ink);
    font: 500 13px var(--font-sans, "Inter", -apple-system, "Segoe UI", sans-serif);
    padding: 11px 14px;
    min-height: 46px;
    cursor: pointer;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--chrome-line);
    padding: 6px 18px 20px;
    /* The menu must scroll inside the viewport so its last action, the
       assessment button, stays reachable on a short screen (PX-064). */
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav > a:not(.btn),
  .nav-more > summary {
    border-bottom: 1px solid var(--chrome-line);
    padding: 14px 0;
    min-height: 50px;
    align-items: center;
  }

  .site-nav .btn {
    max-width: none;
    margin-top: 16px;
    font-size: 14px;
  }

  .nav-more > div {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 5px 0 12px;
    min-width: 0;
  }

  .nav-more > div a {
    padding: 9px 0;
  }

  .site-footer .footer-top {
    gap: 25px;
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer .footer-bottom {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .site-footer .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer {
    padding-top: 36px;
  }

  .site-footer .footer-bottom {
    font-size: 10px;
    gap: 14px;
  }

  .site-footer .footer-bottom > div {
    gap: 10px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav,
  .nav-more > div {
    transition: none !important;
  }
}