/* JuraSum public website: the shared header, footer, buttons and cards
   (site-structure-redesign.md, sections 1 and 2; design-brief.md).
   The header is written by jurasum-shell.js. Public pages link this file;
   jurasum-app.css imports it, so a tool page shows the same header to a
   signed-out visitor. Everything is scoped to pub-* classes. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,600&display=swap");

.pub-header,.pub-footer,.pub-page{
  --p-ink:#1c2438; --p-ink-soft:#3a4358; --p-muted:#5f6573; --p-ground:#efe9dc; --p-paper:#ffffff; --p-line:#e6e1d5;
  --p-accent:#7a5c2e; --p-accent-deep:#5e4620; --p-glow:#d8b878;
  --p-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --p-serif:'Spectral',Georgia,serif;
}

/* Pages style bare header/footer elements for their own use; keep those rules off these two. */
header.pub-header,footer.pub-footer{display:block;max-width:none;width:auto;margin:0;padding:0;box-sizing:border-box;text-align:left;line-height:1.5}

/* ---- header ---- */
.pub-header{position:relative;z-index:20;background:#fff;border-bottom:1px solid #e6e8ec;font-family:var(--p-sans)}
.pub-header .pub-in{max-width:1280px;margin:0 auto;padding:0 80px;height:76px;display:flex;align-items:center;gap:36px;box-sizing:content-box}
.pub-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.pub-lockup span{font:600 25px/1 'Newsreader',Georgia,serif;letter-spacing:-.015em}
/* "Legal Math" under the wordmark (header 11px, footer 9.5px, 3px below) */
.pub-lockup .lk-stack,.pub-foot2 .pf-lockup .lk-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.pub-lockup .lk-tag{font:500 11px/1 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.06em;color:#5f6573}
.pub-nav{display:flex;align-items:center;gap:36px;margin-left:auto}
.pub-nav a{font-size:14.5px;line-height:1;color:var(--p-ink-soft);text-decoration:none;padding:10px 0}
.pub-nav a:hover{color:var(--p-ink)}
.pub-nav a[aria-current]{color:var(--p-ink);font-weight:500}
.pub-cta{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border-radius:6px;background:var(--p-ink);color:#fff;
  font:500 14px/1 var(--p-sans);text-decoration:none;white-space:nowrap;flex-shrink:0}
.pub-cta:hover{background:#2a3450;color:#fff}
html.ws-in .pub-cta.out,html:not(.ws-in) .pub-cta.in{display:none}
.pub-menu{display:none;height:40px;padding:0 14px;border:1px solid #c9ced8;border-radius:6px;background:#fff;color:var(--p-ink);font:500 14px/1 var(--p-sans);cursor:pointer}
.pub-header :focus-visible,.pub-footer :focus-visible,.pub-page :focus-visible{outline:2px solid var(--p-accent);outline-offset:2px}

/* ---- footer ---- */
.pub-footer{background:var(--p-ground);border-top:1px solid var(--p-line);font:13px/1.6 var(--p-sans);color:var(--p-muted)}
.pub-footer .pub-in{max-width:1120px;margin:0 auto;padding:28px 48px;box-sizing:content-box}
.pub-footer .pub-disc{margin-top:4px}
.pub-footer a{color:inherit;text-decoration:none}
.pub-footer a:hover{color:var(--p-ink);text-decoration:underline;text-underline-offset:2px}

/* ---- page content (pages that adopt the full public design) ---- */
.pub-page{background:var(--p-ground);color:var(--p-ink);font:16px/1.6 var(--p-sans)}
.pub-page .pub-wrap{max-width:1120px;margin:0 auto;padding:0 48px;box-sizing:content-box}
.pub-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:6px;border:1px solid var(--p-ink);
  background:var(--p-ink);color:#fff;font:500 15px/1 var(--p-sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.pub-btn:hover{background:#2a3450;border-color:#2a3450;color:#fff}
.pub-btn.secondary{background:var(--p-paper);color:var(--p-ink);border-color:#cfc8b8}
.pub-btn.secondary:hover{background:var(--p-paper);border-color:var(--p-ink);color:var(--p-ink)}
.pub-btn.cream{background:var(--p-ground);color:var(--p-ink);border-color:var(--p-ground)}
.pub-btn.cream:hover{background:#fff;border-color:#fff;color:var(--p-ink)}
.pub-card{background:var(--p-paper);border:1px solid var(--p-line);border-radius:8px}
.pub-kicker{font:500 14px/1.4 var(--p-sans);color:var(--p-accent)}
.pub-link{color:var(--p-accent-deep);text-decoration:underline;text-underline-offset:2px}
.pub-link:hover{color:var(--p-ink)}

/* ---- phones ---- */
@media (max-width:1100px){ .pub-header .pub-in{padding:0 40px} }
@media (max-width:820px){
  .pub-header .pub-in,.pub-footer .pub-in,.pub-page .pub-wrap{padding-left:20px;padding-right:20px}
  .pub-header .pub-in{height:64px;gap:10px}
  .pub-lockup{margin-right:auto}
  .pub-menu{display:inline-flex;align-items:center}
  .pub-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:#fff;border-bottom:1px solid #e6e8ec;padding:6px 20px 14px}
  .pub-header.open .pub-nav{display:flex}
  .pub-nav a{padding:14px 0;border-bottom:1px solid #e6e8ec;font-size:15px}
  .pub-nav a:last-child{border-bottom:0}
}
@media (max-width:380px){ .pub-lockup span{font-size:21px} .pub-cta{padding:0 12px} }
@media print{ .pub-header,.pub-footer{display:none!important} }

/* ---- footer, v2 (public-redesign-v2.md section 2): closing line, then lockup, disclaimer and links ---- */
footer.pub-foot2{display:block;margin:0;padding:0;max-width:none;background:#fff;color:#3a4358;border-top:1px solid #e6e8ec;font-family:'IBM Plex Sans',system-ui,sans-serif}
.pub-foot2 .pub-in{max-width:1280px;margin:0 auto;padding:72px 80px 40px;box-sizing:content-box;display:flex;flex-direction:column;gap:56px}
.pub-foot2 .pf-close{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;padding-bottom:56px;border-bottom:1px solid #e6e8ec}
.pub-foot2 .pf-close p{margin:0;font:500 34px/1.2 'Spectral',Georgia,serif;letter-spacing:-.015em;color:#1c2438}
.pub-foot2 .pf-btn{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:6px;background:#1c2438;color:#fff;font:500 15px/1 'IBM Plex Sans',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.pub-foot2 .pf-btn:hover{background:#2a3450}
.pub-foot2 .pf-base{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;font-size:13px}
.pub-foot2 .pf-brand{display:flex;flex-direction:column;gap:10px}
.pub-foot2 .pf-lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.pub-foot2 .pf-lockup span{font:600 18px/1 'Newsreader',Georgia,serif}
.pub-foot2 .pf-lockup .lk-tag{font:500 9.5px/1 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:.06em;color:#5f6573}
.pub-foot2 .pf-disc{color:#5f6573}
.pub-foot2 .pf-links{display:flex;gap:28px;flex-wrap:wrap}
.pub-foot2 .pf-links a{color:#3a4358;text-decoration:none}
.pub-foot2 .pf-links a:hover{color:#1c2438;text-decoration:underline;text-underline-offset:3px}
.pub-foot2 .pf-links span{color:#5f6573}
.pub-foot2 :focus-visible{outline:2px solid #7a5c2e;outline-offset:2px}
@media (max-width:1100px){ .pub-foot2 .pub-in{padding:64px 40px 36px} }
@media (max-width:720px){
  .pub-foot2 .pub-in{padding:48px 20px 32px;gap:36px}
  .pub-foot2 .pf-close{padding-bottom:36px;gap:20px}
  .pub-foot2 .pf-close p{font-size:26px}
  .pub-foot2 .pf-links{gap:12px 20px}
}
@media print{ .pub-foot2{display:none!important} }

/* Two-tone "JuraSum" inside headings (h1-h3). One class, colour only: the heading's font and size are inherited.
   Light grounds: Jura #1C2438, Sum #7A5C2E. Dark grounds (add .on-dark to the span or an ancestor): Jura #A9BEDF, Sum #C79A63.
   Body text, buttons, fine print, titles and metadata keep a plain "JuraSum". */
.jura-sum{color:#1c2438}
.jura-sum .jura-sum-s{color:#7a5c2e}
.on-dark .jura-sum,.jura-sum.on-dark{color:#a9bedf}
.on-dark .jura-sum .jura-sum-s,.jura-sum.on-dark .jura-sum-s{color:#c79a63}