/* Site chrome: the one header and footer every page shares.
   Loaded last on every page, after the page's own stylesheet (home.css, or
   styles.css + refresh.css, or a standalone page's inline styles). It reads the
   Tidepool tokens from whichever system the page uses and falls back to the
   literal values, so the header and footer look identical everywhere.
   Behavior lives in assets/js/chrome.js. */

.site-header,
.site-footer {
  --chrome-ground: var(--mist, var(--bg, #F0F5F3));
  --chrome-surface: var(--surface, #FFFFFF);
  --chrome-tint: var(--sea-glass, var(--surface-2, #E9F1ED));
  --chrome-line: var(--line, var(--border, #D4E0DC));
  --chrome-line-soft: var(--line-soft, var(--border-soft, #E2EAE7));
  --chrome-ink: var(--ink, #15393C);
  --chrome-ink-soft: var(--ink-soft, #3D5A5A);
  --chrome-ink-muted: var(--ink-muted, #4E6564);
  --chrome-action: var(--teal, var(--primary, #1E5F62));
  --chrome-action-ink: var(--btn-primary-ink, var(--primary-ink, #FFFFFF));
  --chrome-mark: var(--coral, var(--warm, #DE7356));
  --chrome-focus: var(--coral-deep, var(--accent-brown, #9C4429));
  --chrome-display: var(--font-display, "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif);
  --chrome-body: var(--font-body, "Source Serif 4", Georgia, serif);
  --chrome-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --chrome-t: 240ms var(--chrome-ease);
}

:root {
  --header-h: 72px;
  --header-height: 72px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--chrome-ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: border-color var(--chrome-t), box-shadow var(--chrome-t);
}
.site-header.is-scrolled {
  background: color-mix(in oklab, var(--chrome-ground) 94%, transparent);
  border-bottom-color: var(--chrome-line);
  box-shadow: 0 10px 28px -24px rgba(14, 42, 45, 0.5);
}
.site-header .site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6, 1.5rem);
  height: var(--header-h);
}
.site-header :focus-visible,
.site-footer :focus-visible {
  outline: 2.5px solid var(--chrome-focus);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Brand */
.site-header .brand,
.site-footer .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  color: var(--chrome-ink);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
}
.site-header .brand:hover { color: var(--chrome-ink); }
.site-header .brand__mark,
.site-footer .brand__mark {
  width: 36px;
  height: 36px;
  padding: 3px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--chrome-surface);
  border: 1px solid var(--chrome-line-soft);
  box-shadow: none;
}
[data-theme="dark"] .site-header .brand__mark {
  background: transparent;
  border-color: transparent;
  content: url("/assets/img/original-logo-mark-no-words-transparent.png");
}
.site-header .brand__name,
.site-footer .brand__name {
  font-family: var(--chrome-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* Nav */
.site-header .nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header .nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .nav__list > li { margin: 0; }
.site-header .nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  color: var(--chrome-ink-soft);
  background: none;
  border-radius: 8px;
  font-family: var(--chrome-display);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--chrome-t);
}
.site-header .nav__link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--chrome-mark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--chrome-t);
}
.site-header .nav__link:hover {
  color: var(--chrome-ink);
  background: none;
}
.site-header .nav__link:hover::after,
.site-header .nav__link[aria-current="page"]::after,
.site-header .nav__summary.is-current::after { transform: scaleX(1); }
.site-header .nav__link[aria-current="page"],
.site-header .nav__summary.is-current { color: var(--chrome-ink); background: none; }

/* Free tools menu (details/summary: works without JS, closes via chrome.js) */
.site-header .nav__details { position: relative; }
.site-header .nav__summary {
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
.site-header .nav__summary::-webkit-details-marker { display: none; }
.site-header .nav__summary::marker { content: ""; }
.site-header .nav__chev {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform var(--chrome-t);
}

/* Just above the menu breakpoint the seven top-level items are a little
   wider than the bar, so the tabs (and their underline) sit closer. */
@media (min-width: 1001px) and (max-width: 1080px) {
  .site-header .nav__link { padding-left: 0.5rem; padding-right: 0.5rem; }
  .site-header .nav__link::after { left: 0.5rem; right: 0.5rem; }
}
.site-header .nav__details[open] .nav__chev { transform: rotate(180deg); }
.site-header .nav__details[open] .nav__summary { color: var(--chrome-ink); }

.site-header .nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 344px;
  padding: 0.5rem;
  background: var(--chrome-surface);
  border: 1px solid var(--chrome-line);
  border-radius: 16px;
  box-shadow: 0 28px 56px -28px rgba(14, 42, 45, 0.38), 0 2px 6px -2px rgba(14, 42, 45, 0.08);
  transform: translateX(-50%);
}
.site-header .nav__submenu {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header .nav__submenu li { margin: 0; }
.site-header .nav__submenu-link {
  display: grid;
  gap: 2px;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 160ms var(--chrome-ease);
}
.site-header .nav__submenu-link:hover,
.site-header .nav__submenu-link[aria-current="page"] { background: var(--chrome-tint); }
.site-header .nav__submenu-title {
  color: var(--chrome-ink);
  font-family: var(--chrome-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}
.site-header .nav__submenu-desc {
  color: var(--chrome-ink-muted);
  font-family: var(--chrome-body);
  font-size: 0.875rem;
  line-height: 1.4;
}
.site-header .nav__menu-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.35rem;
  padding: 0.75rem 0.8rem 0.4rem;
  border-top: 1px solid var(--chrome-line-soft);
  color: var(--chrome-action);
  font-family: var(--chrome-display);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.site-header .nav__menu-all span { transition: transform var(--chrome-t); }
.site-header .nav__menu-all:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: no-preference) {
  .site-header .nav__details[open] .nav__menu { animation: chrome-menu-in 200ms var(--chrome-ease); }
}
@keyframes chrome-menu-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Account link + primary action sit apart from the section links */
.site-header .nav__auth {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}
.site-header .nav__auth::before {
  content: "";
  width: 1px;
  height: 20px;
  margin-right: 0.5rem;
  background: var(--chrome-line);
}
.site-header .nav__cta { margin-left: 0.25rem; }
.site-header .nav__cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.55rem 1.15rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--chrome-action);
  color: var(--chrome-action-ink);
  box-shadow: 0 10px 22px -16px rgba(30, 95, 98, 0.7);
  font-family: var(--chrome-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--chrome-t), transform 140ms var(--chrome-ease), box-shadow var(--chrome-t);
}
.site-header .nav__cta .btn:hover {
  background: var(--teal-soft, var(--primary-hover, #2E7A77));
  color: var(--chrome-action-ink);
  transform: translateY(-1px);
}

/* Theme + menu buttons */
.site-header .theme-toggle,
.site-header .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--chrome-line);
  border-radius: 999px;
  background: var(--chrome-surface);
  color: var(--chrome-ink-soft);
  cursor: pointer;
  transition: color var(--chrome-t), border-color var(--chrome-t), transform 140ms var(--chrome-ease);
}
.site-header .theme-toggle:hover { color: var(--chrome-ink); border-color: var(--chrome-ink-muted); transform: rotate(-12deg); }
.site-header .theme-toggle__sun { display: none; }
[data-theme="dark"] .site-header .theme-toggle__sun { display: block; }
[data-theme="dark"] .site-header .theme-toggle__moon { display: none; }

.site-header .nav-toggle { display: none; color: var(--chrome-ink); }
.site-header .nav-toggle__bars { position: relative; display: block; width: 18px; height: 12px; }
.site-header .nav-toggle__bars::before,
.site-header .nav-toggle__bars::after,
.site-header .nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  /* transform + opacity only: the bars never animate `top` (a layout property). */
  transition: transform var(--chrome-t), opacity var(--chrome-t);
}
.site-header .nav-toggle__bars::before { top: 0; }
.site-header .nav-toggle__bars span { top: 5px; }
.site-header .nav-toggle__bars::after { top: 10px; }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }
.site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }

/* ---------- Header: menu layout below 1000px ---------- */
@media (max-width: 1000px) {
  /* The menu button comes first in the DOM so focus moves from it straight into
     the open list; visually it sits at the far right. */
  .site-header .theme-toggle { order: 1; }
  .site-header .nav-toggle { display: inline-flex; order: 2; }
  .site-header .nav__list {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1rem, 4vw, 2.25rem) 1.5rem;
    background: var(--chrome-ground);
    border-bottom: 1px solid var(--chrome-line);
    box-shadow: 0 32px 64px -30px rgba(14, 42, 45, 0.4);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--chrome-t), opacity var(--chrome-t), visibility 0s linear 240ms;
  }
  .site-header .nav.is-open .nav__list {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--chrome-t), opacity var(--chrome-t), visibility 0s;
  }
  .site-header .nav__list > li { border-bottom: 1px solid var(--chrome-line-soft); }
  .site-header .nav__link {
    width: 100%;
    min-height: 54px;
    padding: 0.75rem 0.25rem;
    border-radius: 0;
    font-size: 1.0625rem;
  }
  .site-header .nav__link::after { display: none; }
  .site-header .nav__link[aria-current="page"],
  .site-header .nav__summary.is-current { font-weight: 600; }
  .site-header .nav__link[aria-current="page"]::before,
  .site-header .nav__summary.is-current::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--chrome-mark);
  }
  .site-header .nav__summary { justify-content: flex-start; }
  .site-header .nav__summary .nav__chev { margin-left: auto; }
  .site-header .nav__chev { width: 14px; height: 14px; }
  .site-header .nav__menu {
    position: static;
    width: auto;
    padding: 0 0 0.75rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    animation: none !important;
  }
  .site-header .nav__submenu-link { padding: 0.6rem 0.75rem; }
  .site-header .nav__menu-all { margin-top: 0.25rem; padding: 0.6rem 0.75rem; border-top: 0; }
  .site-header .nav__auth { margin: 0; }
  .site-header .nav__auth::before { display: none; }
  .site-header .nav__list > .nav__cta { margin: 1.25rem 0 0; border-bottom: 0; }
  .site-header .nav__cta .btn { width: 100%; min-height: 52px; font-size: 1rem; }
}

@media (max-width: 720px) {
  :root { --header-h: 64px; --header-height: 64px; }
}
@media (max-width: 420px) {
  .site-header .site-header__inner { gap: 0.75rem; }
  /* Let the wordmark give way on the narrowest screens (320px phones, Display
     Zoom, 400% browser zoom): the brand may shrink and the name wraps to two
     lines instead of pushing the menu button off-screen (WCAG 1.4.10). */
  .site-header .brand { flex-shrink: 1; min-width: 0; gap: 0.5rem; }
  .site-header .brand__mark { flex-shrink: 0; }
  .site-header .brand__name { font-size: 1rem; line-height: 1.05; white-space: normal; }
}

/* ---------- Footer ---------- */
.site-footer {
  --chrome-on-dark: #EDF4F1;
  --chrome-on-dark-soft: #BCD2CC;
  --chrome-on-dark-muted: #9DB5AF;
  --chrome-on-dark-line: rgba(237, 244, 241, 0.14);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
  background: #0E2A2D;
  border-top: 0;
  color: var(--chrome-on-dark);
}
[data-theme="dark"] .site-footer {
  background: #0A1F1E;
  border-top: 1px solid var(--chrome-on-dark-line);
}
.site-footer :focus-visible { outline-color: #E78D6F; }
.site-footer .site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.site-footer .brand,
.site-footer .brand:hover,
.site-footer .brand__name { color: #FFFFFF; }
.site-footer .brand__mark {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--chrome-on-dark-line);
}
.site-footer .site-footer__tag {
  max-width: 30ch;
  margin: 1.1rem 0 0;
  color: var(--chrome-on-dark-soft);
  font-family: var(--chrome-body);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.site-footer .footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  color: var(--chrome-on-dark-soft);
  font-family: var(--chrome-display);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--chrome-t);
}
.site-footer .footer-ig:hover { color: #FFFFFF; }

.site-footer .site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.site-footer .site-footer__heading {
  margin: 0 0 1rem;
  color: #FFFFFF;
  font-family: var(--chrome-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}
.site-footer .footer-list {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-list li { margin: 0; }
.site-footer .footer-list a {
  color: var(--chrome-on-dark-soft);
  font-family: var(--chrome-display);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--chrome-t);
}
.site-footer .footer-list a:hover,
.site-footer .footer-list a[aria-current="page"] { color: #FFFFFF; }

.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--chrome-on-dark-line);
  color: var(--chrome-on-dark-muted);
  font-family: var(--chrome-body);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.site-footer .footer-bottom p { margin: 0; color: inherit; font-size: inherit; max-width: none; }
.site-footer .footer-bottom a {
  color: var(--chrome-on-dark-soft);
  text-decoration: underline;
  text-decoration-color: var(--chrome-on-dark-line);
  text-underline-offset: 3px;
  transition: color var(--chrome-t), text-decoration-color var(--chrome-t);
}
.site-footer .footer-bottom a:hover { color: #FFFFFF; text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .site-footer .site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-footer .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}

@media print {
  .site-header,
  .site-footer { display: none; }
}