/* The header and footer every page has except the homepage (which has its own, with a
 * script-driven drawer) and the request page (kept to the logo and "Back to site", so
 * nothing pulls a patient away from the form).
 * Used by the pages scripts/build_pages.py generates and by the three legal pages; the
 * markup is build_pages.site_header()/site_footer(), and a test keeps the legal pages'
 * copies identical to it. Needs the design tokens (--blue, --navy, --ivory, ...) from
 * the page's own :root.
 */
/* ---------- header ----------
   The homepage's header: light (the logo is dark artwork and disappears on navy),
   its menu, and the same point (1160px) where the menu folds behind a button. That
   button is a <details>, so it needs no script. */
.lhead{background:var(--ivory);border-bottom:1px solid var(--hair);position:relative}
.lhead .in{max-width:1240px;margin:0 auto;padding:10px clamp(20px,5vw,72px);display:flex;align-items:center;gap:2.4rem}
.lhead .brand{margin-right:auto}
.lhead img{height:62px;width:auto;flex-shrink:0}
.lhead ul{list-style:none;margin:0;padding:0}
.lhead li{margin:0}  /* the legal pages style ul/li for their text */
.lhead .links ul{display:flex;align-items:center;gap:1.9em}
.lhead .links a,.lhead .menu a{color:var(--ink);font-size:.86rem;font-weight:500;letter-spacing:.01em}
.lhead .links a:hover,.lhead .menu a:hover{color:var(--blue);text-decoration:none}
.lhead a.cta{color:#fff;background:var(--blue);border:1px solid var(--blue);padding:.8em 1.4em;border-radius:2px;
  font-size:.92rem;font-weight:600;white-space:nowrap}
.lhead a.cta:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;text-decoration:none}
.lhead .menu{display:none}
.lhead .menu summary{list-style:none;cursor:pointer;width:46px;height:42px;border:1px solid var(--hair);border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.lhead .menu summary::-webkit-details-marker{display:none}
.lhead .menu summary span{width:20px;height:1.6px;background:var(--ink);display:block;transition:.3s}
.lhead .menu[open] summary span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.lhead .menu[open] summary span:nth-child(2){opacity:0}
.lhead .menu[open] summary span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.lhead .menu nav{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--ivory);
  border-bottom:1px solid var(--hair);box-shadow:0 24px 40px -30px rgba(12,46,94,.5);padding:.3rem clamp(20px,5vw,72px) .8rem}
.lhead .menu li{border-bottom:1px solid var(--hair)}
.lhead .menu li:last-child{border-bottom:0}
.lhead .menu a{display:block;padding:.85rem 0;font-family:var(--serif);font-size:1.05rem}
@media (max-width:1160px){
  .lhead .links{display:none}
  .lhead .menu{display:block}
  .lhead .in{gap:1rem}
}
@media (max-width:600px){
  .lhead img{height:44px}
  .lhead a.cta{padding:.55em .8em;font-size:.82rem}
}

/* ---------- footer ---------- */
footer.lfoot{background:var(--navy);color:#9fb1cc;font-size:.85rem}
footer.lfoot .in{max-width:760px;margin:0 auto;padding:2.2rem 24px;display:flex;flex-direction:column;gap:.7rem;text-align:center}
footer.lfoot a{color:#cdd8ea}

@media print{
  .lhead,footer.lfoot{display:none}
}