/* ---------------------------------------------------------------------------
   CalMHIN v2 site styles.

   The palette below is the single source of truth for brand direction. All four
   delivered colors are used as given; the neutrals are additions the logo style
   guide does not specify, because a logo guide has no reason to.

   Every text/background pairing here was measured, not estimated, and the ratios
   are recorded inline. If you change a color, re-measure rather than assuming the
   new one behaves like the old one. The project documentation names the tool and
   holds the full brand record, including which colors may carry text and why.
   -------------------------------------------------------------------------- */

:root {
  /* ---- delivered palette ---- */
  --teal:       #005D53;  /* the only delivered color that carries text. 7.8:1 on white */
  --green:      #9DC131;  /* fill only. 2.1:1 on white */
  --cyan:       #64C8D0;  /* fill only. 2.0:1 on white */
  --amber:      #FFB40A;  /* fill only. 1.8:1 on white */

  /* ---- additions the guide does not specify ---- */
  --teal-deep:  #00473F;  /* hover / pressed. 10.6:1 on white */
  --ink:        #5B6670;  /* body text. 5.9:1 on white */
  --muted:      #66707A;  /* captions. 5.0:1 on white, 4.6:1 on the band */
  --on-fill:    #1A1A1A;  /* the only text safe on green, cyan or amber. 8.4 to 9.8:1 */
  --on-teal:    #B9D6D1;  /* secondary text on a teal ground. 5.1:1 */
  --band:       #EFF5F4;  /* light teal tint for banded sections */
  --line:       #DCE5E3;  /* hairlines */
  --bg:         #ffffff;

  --header-clear: 180px;  /* what an anchor target must clear: the two-row sticky header */
  --maxw:       1120px;
  --maxw-text:  720px;    /* single-column reading pages; ~68ch of measure */
  --radius:     14px;
  --font-sans:  "Heuvel Grotesk", Arial, Helvetica, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); }
a:hover { color: var(--teal-deep); }

h1, h2, h3 { color: var(--teal); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1rem; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem;
  font-weight: 700; color: var(--teal); margin: 0 0 .9rem;
}

.accent-rule {
  width: 56px; height: 4px; border-radius: 4px;
  background: var(--amber); margin: 0 0 1.4rem;
}

/* ---- buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font: inherit; font-weight: 700; text-decoration: none;
  padding: .7em 1.3em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--teal); color: #fff; }            /* 7.8:1 */
.btn-primary:hover { background: var(--teal-deep); color: #fff; } /* 10.6:1 */
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal); color: #fff; }

/* ---- header ----------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 16px; min-height: 72px; padding-top: 8px; padding-bottom: 8px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: 230px; height: auto; }

/* ---- primary nav: four sections, each with a flyout of children -----------
   There is no JavaScript on this site and the CSP forbids adding any, so the
   open state lives in a native <details>. That gives tap-to-open on touch and
   Enter/Space on a keyboard for free, and screen readers announce it correctly.
   Hover is layered on top for mouse users only, via ::details-content, and
   degrades to "click the chevron" where a browser lacks it.

   The section label is a plain link and only a link; the chevron beside it is
   the disclosure. That is what resolves the touch conflict: a tap on the label
   navigates to the section's landing page, a tap on the chevron opens the list.
   name="primary-nav" on the four <details> makes them mutually exclusive in
   current browsers and is ignored, harmlessly, in older ones. */
.nav-links { display: flex; align-items: center; }
.menu-bar {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
}
.menu-bar a.navlink {
  color: var(--teal); text-decoration: none; font-weight: 600; font-size: .95rem;
  white-space: nowrap;
}
.menu-bar a.navlink:hover { color: var(--teal-deep); text-decoration: underline; }
/* Matches any aria-current value, not just "page": a child page marks its section
   label aria-current="true" and its own entry in the panel aria-current="page".
   Both should show the current-item underline. */
.menu-bar a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }

.menu { position: relative; display: flex; align-items: center; gap: 2px; }
.menu summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; color: var(--teal);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .15s;
}
.menu summary:hover { background: var(--band); color: var(--teal-deep); }  /* 9.6:1 */
.menu details[open] summary svg { transform: rotate(180deg); }

/* Hover-to-open, mouse only. Scoped to (hover: hover) because a touch browser
   can leave :hover stuck on the item after a tap, which would hold a panel open
   after the chevron closed it. */
@media (hover: hover) {
  .menu:hover > details::details-content { display: block; content-visibility: visible; }
  .menu:hover summary svg { transform: rotate(180deg); }
  /* A panel opened by click stays [open] while the pointer hovers a neighbour,
     which would put two panels on screen at once. The hovered one wins; the
     clicked one comes back when the pointer leaves the bar. */
  .menu-bar:has(.menu:hover) .menu:not(:hover) > details[open] > .panel { display: none; }
}

.panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 1;
  min-width: 230px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,93,83,.10);
}
/* Bridges the gap between the item and the panel so the pointer can cross it
   without the hover dropping and the panel closing on the way. */
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.panel a {
  display: block; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
  color: var(--teal); text-decoration: none; font-weight: 600; font-size: .95rem; /* 7.8:1 */
}
.panel a:hover { background: var(--band); color: var(--teal-deep); }              /* 9.6:1 */
.panel a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }

/* ---- orientation banner ----------------------------------------------- */
.banner { background: var(--band); border-bottom: 1px solid var(--line); }
.banner .wrap { padding-top: 12px; padding-bottom: 12px; font-size: .92rem; color: var(--ink); }
.banner strong { color: var(--teal); }
.banner a { font-weight: 700; white-space: nowrap; }

/* ---- home hero -------------------------------------------------------- */
.hero .wrap {
  padding: 64px 24px 40px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.hero p.lede { font-size: 1.15rem; max-width: 52ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.art {
  position: relative; aspect-ratio: 5 / 4; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); background: var(--band);
}
.art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---- interior page head ----------------------------------------------- */
.page-head { background: var(--band); border-bottom: 1px solid var(--line); }
.page-head .wrap { padding: 56px 24px 48px; }
.page-head p.lede { font-size: 1.15rem; max-width: 60ch; margin-bottom: 0; }

/* ---- card grids ------------------------------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.section { padding: 56px 0; }
.section-band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: 36px; max-width: 60ch; }
/* The back link that closes a child page. Tighter above than a full section so it reads as
   attached to the content it follows, centered to sit with the contact box below it, and
   carrying its own space underneath so that it still stands off correctly in contexts where
   nothing follows it. */
.section-back { padding: 28px 0 44px; }
.section-back .cta { justify-content: center; }

.card-tile {
  display: block; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; background: #fff; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
a.card-tile:hover { border-color: var(--teal); box-shadow: 0 4px 16px rgba(0,93,83,.10); }
.card-tile h3 { margin-bottom: .5rem; }
.card-tile p { margin: 0; font-size: .98rem; }
/* A tile holding two paragraphs, one per audience, needs the gap the zeroed margin
   above removes. Most tiles are a single paragraph and unaffected. */
.card-tile p + p { margin-top: .6rem; }
.card-tile .more { display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--teal); }

/* Icon plates. The three accent fills are decorative grounds only. */
.ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
}
.ico-green { background: var(--green); }
.ico-cyan  { background: var(--cyan); }
.ico-amber { background: var(--amber); }
.ico svg { fill: var(--on-fill); }   /* 8.4 to 9.8:1 on the three fills */

/* ---- purpose band ----------------------------------------------------- */
.purpose { background: var(--band); }
.purpose .wrap { padding: 56px 24px; text-align: center; }
.purpose .statement {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); color: var(--teal); font-weight: 700;
  max-width: 56rem; margin: 0 auto; line-height: 1.4;
}

/* ---- leadership ------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-align: center; }
.portrait { padding: 32px 24px 0; }
.portrait img {
  width: 180px; height: 180px; border-radius: 50%; object-fit: cover; object-position: center 25%;
  display: block; margin: 0 auto; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.card .body { padding: 18px 24px 28px; }
.card .accent-rule { margin: 0 auto 1rem; }
.card .role { color: var(--teal); font-weight: 700; margin: 0 0 .8rem; }
.card .card-bio { margin: 0 0 .9rem; font-size: .95rem; }
.card .card-email { font-weight: 700; font-size: .92rem; text-decoration: none; word-break: break-word; }
.card .card-email:hover { text-decoration: underline; }

/* ---- text pages (the service pages) ------------------------------------
   A 68ch column pinned left inside the 1120px wrap left ~430px of dead space
   down the right, which read as the page being weighted to one side. These
   pages are a single reading column, so the whole column narrows and centers
   instead: the h1, the lede and the body keep a shared left edge, and the
   leftover width splits evenly. The contact band is excluded because it is the
   same module on every page and should not change shape here.
   Not applied to the home or services index pages, whose card grids want the
   full width.
   The selectors are unqualified rather than main.text-page deliberately: the
   class is also carried on a section wrapper rather than on <main>, and it must
   lay out the same way in both positions. */
.text-page .page-head .wrap,
.text-page .section:not(.contact) .wrap { max-width: var(--maxw-text); }

/* Inside a text page the wrap sets the measure, so the prose cap would only
   reintroduce a smaller version of the same right-hand gap. */
.text-page .prose { max-width: none; }

/* ---- prose (service pages) -------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; }
.prose ul { padding-left: 1.2em; margin: 0 0 1rem; }
.prose li { margin-bottom: .5rem; }

/* A subtitle belonging to the h2 above it, for the sections whose heading comes
   with one. Folding a subtitle into the h2 makes an already-large heading
   unreadable, and dropping it loses the words, so it gets a slot of its own:
   teal like the heading it belongs to, at the lede size the page head already
   uses, pulled up tight so
   it reads as one unit with the h2 rather than as a first paragraph.

   It is deliberately a <p> and not an <h3>. It names no section a reader would
   navigate to, and an h3 here would put a rung in the outline that the page does
   not actually have. */
.prose h2 + .subhead {
  margin-top: -.35rem; margin-bottom: 1.3rem;
  font-size: 1.15rem; font-weight: 600; line-height: 1.35;
  color: var(--teal); max-width: 60ch;
}
/* A callout inside prose. Currently unused. Kept because a callout is a general
   shape a later page may want, not because something still needs it. */
.prose .note {
  border-left: 4px solid var(--cyan); background: var(--band);
  padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 2rem 0;
}
.prose .note p:last-child { margin-bottom: 0; }

/* ---- placeholder blocks ------------------------------------------------
   Amber ground, near-black text (9.8:1, measured), dashed border: impossible to
   mistake for content. .ph marks a short slot inline, inside a card or a
   heading, where a whole block would be too heavy. */
.placeholder {
  background: var(--amber); color: var(--on-fill);
  border: 2px dashed var(--teal); border-radius: var(--radius);
  padding: 20px 24px; margin: 0 0 2rem;
}
.placeholder .eyebrow { color: var(--on-fill); margin-bottom: .5rem; }
.placeholder p { margin: 0 0 .6rem; }
.placeholder p:last-child { margin-bottom: 0; }
.placeholder a { color: var(--on-fill); }
.ph {
  background: var(--amber); color: var(--on-fill);
  padding: 0 .3em; border-radius: 4px; box-decoration-break: clone;
}

/* ---- two-column layout: prose beside an aside ---------------------------
   Used by the product feature archetype (aside = at-a-glance details) and the
   dense reference archetype (aside = contents list). A single reading column
   pinned left inside the wide wrap read as lopsided on the service pages; on
   these pages the aside is what fills the right-hand side instead. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.aside {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--band); padding: 22px 24px;
}
.aside dl { margin: 0; }   /* the aside heading is an h2 carrying the .eyebrow class */
.aside dt { font-weight: 700; color: var(--teal); margin-top: .8rem; }
.aside dt:first-child { margin-top: 0; }
.aside dd { margin: .15rem 0 0; font-size: .95rem; }
.aside ol { margin: 0; padding-left: 1.2em; }
.aside li { margin-bottom: .4rem; }
.aside.sticky { position: sticky; top: var(--header-clear); }

/* ---- dense reference archetype ---------------------------------------- */
.reference h2 { scroll-margin-top: var(--header-clear); }
.reference dl {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: .4rem 1.4rem; margin: 0 0 1.5rem;
}
.reference dt { font-weight: 700; color: var(--teal); }
.reference dd { margin: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.reference table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.reference th, .reference td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.reference th { color: var(--teal); }

/* ---- listing archetype ------------------------------------------------- */
.listing { display: grid; gap: 16px; margin: 0 0 2rem; }
.listing .item {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center;
}
.listing .item h3 { margin: 0; }
.listing .item .meta { color: var(--muted); font-size: .92rem; margin: 0; }   /* 5.0:1 */
.listing .empty {
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--band);
  padding: 28px 24px; text-align: center; color: var(--muted);              /* 4.6:1 */
}

/* ---- "in this section" row on a section landing page ------------------- */
.in-section ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.in-section li { margin: 0; }   /* the .prose li margin would otherwise leak into the tiles */
.in-section .card-tile { padding: 16px 18px; }
.in-section .card-tile h3 { font-size: 1.05rem; margin: 0; }

/* ---- contact ---------------------------------------------------------- */
.contact { scroll-margin-top: var(--header-clear); }   /* every header's Contact link lands here */
.contact .box {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 32px;
  text-align: center; background: var(--band);
}
.contact .email { font-size: 1.35rem; font-weight: 800; margin: .1rem 0 0; }
.contact .email a { color: var(--teal); text-decoration: none; }
.contact .email a:hover { text-decoration: underline; }

/* ---- footer ----------------------------------------------------------- */
footer.site { background: var(--teal); color: #fff; }          /* white on teal: 7.8:1 */
footer.site a { color: #fff; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 36px; padding: 52px 24px 30px; }
.foot-brand img { display: block; width: 200px; height: auto; margin-bottom: 1rem; }
.foot-brand p { color: var(--on-teal); font-size: .9rem; max-width: 34ch; }  /* 5.1:1 */
.foot-col h2 {
  text-transform: uppercase; letter-spacing: .12em; font-size: .7rem;
  color: var(--on-teal); margin: 0 0 1rem; font-weight: 700;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot-col .email { font-weight: 700; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.22); padding: 18px 24px 34px;
  display: flex; flex-wrap: wrap; justify-content: center; text-align: center;
  gap: 10px; color: var(--on-teal); font-size: .82rem;
}

/* ---- utilities -------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.visually-hidden:focus {
  position: fixed; top: 10px; left: 10px; width: auto; height: auto;
  clip: auto; overflow: visible; background: var(--teal); color: #fff;
  padding: 9px 16px; border-radius: 8px; font-weight: 700; z-index: 100;
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 40px; }

  /* The hero art earns its place only when it can sit beside the text. Once the
     grid collapses it stops being a composition and becomes an 800px-tall
     interruption between the visitor and the headline, so it goes rather than
     stacking. It is decorative (empty alt, label on the wrapper), so hiding it
     costs nothing a screen reader or a search engine wanted. */
  .hero .art { display: none; }
  .grid-3 { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Do not hide the nav links at this width. That is survivable on a single page
     with anchor links; across a multi-page site it strands anyone on a phone with
     no way to navigate. Wrap to a second row instead. */
  .nav { justify-content: center; position: relative; }
  .nav-links { justify-content: center; }
  .menu-bar { justify-content: center; gap: 8px 14px; }
  .menu-bar a.navlink { font-size: .92rem; }
  .brand img { width: 200px; }

  /* The flyout becomes a full-width strip hanging beneath the header, still out
     of flow, so a sticky header does not grow by an accordion and eat the
     viewport. Only one is open at a time thanks to name="primary-nav". */
  .menu { position: static; }
  .panel {
    left: 0; right: 0; top: 100%; min-width: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .panel::before { display: none; }
  .panel a { white-space: normal; }

  /* Three rows of header (logo, sections, button) pinned to the top of a phone
     would take a third of the viewport on every scroll. It scrolls away instead,
     so anchor targets no longer need to clear it. */
  header.site { position: static; }
  :root { --header-clear: 16px; }

  .split { grid-template-columns: 1fr; gap: 28px; }
  .split > .aside { order: -1; }   /* contents and at-a-glance read first when stacked */
  .aside.sticky { position: static; }
  .listing .item { grid-template-columns: 1fr; }
}