/*
Theme Name: Family Law Riverside
Theme URI: https://familylawriverside.com/
Author: Webhaus LLC
Description: The bespoke theme for familylawriverside.com, adapted from the boracay.biz theme. Phone first: a search band over the instant-answers index under the header, Start-here tiles, the answer first and the long sections folded, visible citation numbers, the disclaimer on every page. System fonts, inline Lucide line icons, no images in the chrome. Styles the markup written by niche-sites/tools/publish.py.
Version: 0.9.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: familylaw
*/

/* =========================================================================
 * Tokens, palette "Ledger". The only place colors live. FL_PALETTE in functions.php puts palette-navy or
 * palette-burgundy on <body>; dark mode swaps the same tokens and nothing else. Both sets are at or above 4.5:1.
 * ====================================================================== */
:root {
  --bg: #f4efe4;        /* the page */
  --paper: #fbf8f1;     /* cards, boxes, the search box */
  --box: #f8f3e8;       /* callouts */
  --soft: #efe6d2;      /* the help box tint, a targeted source */
  --ink: #22325a;       /* headings, the In brief bar, callout bars */
  --text: #1c2541;
  --mute: #5b6378;
  --line: #d9d1bf;
  --accent: #9b3d1c;    /* links, citation numbers, the help box bar */
  --on-accent: #fff;
  --band: #22325a;      /* the header and the tab bar */
  --band-fg: #f4efe4;
  --band-sub: #c9c2b2;  /* the tagline, the tabs at rest */
  --band-line: #2f416f;
  --hfont: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --bfont: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 10px;
  --col: 68ch;
  --ico: 44px;      /* In brief, the help box, the tab labels' sections */
  --ico-s: 32px;    /* Most asked, callouts, the FAQ, Related and Sources headings */
  --ico-xs: 28px;   /* the disclaimer strip, Print this */
  --ico-tile: 40px; /* the Start-here tiles */
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #182238; --paper: #202c47; --box: #1d2740; --soft: #263352; --ink: #ede6d6; --text: #e6dfcf; --mute: #b3b8c6; --line: #33405e; --accent: #e4875a; --on-accent: #182238; --band: #121a2c; --band-fg: #ede6d6; --band-sub: #b3b8c6; --band-line: #263352; }
}
body.palette-burgundy { --box: #f8f1ee; --soft: #e9ebe3; --ink: #5f2230; --text: #2a1b1f; --mute: #6b5a5e; --line: #dccfc6; --accent: #1b5a62; --band: #5f2230; --band-sub: #d9c3c8; --band-line: #7a3344; }
@media (prefers-color-scheme: dark) {
  body.palette-burgundy { --bg: #1f1418; --paper: #2a1c21; --box: #261a1f; --soft: #1e2a2c; --ink: #ede4dc; --text: #ede4dc; --mute: #b8aaae; --line: #3b2a30; --accent: #6fc3c9; --on-accent: #1f1418; --band: #160c10; --band-fg: #ede4dc; --band-sub: #b8aaae; --band-line: #3b2a30; }
}
/* the accent (FL_ACCENT): graphite is the default since 0.7.0 (#4a4f55: 7.2:1 on the page, 7.8:1 on the cards, 6.7:1
   on its help tint; dark #b8bec6: 9.6:1 on the dark page); teal was the burgundy design's first accent; brass its
   alternative; rust the navy preview's original. Each overrides --accent, --on-accent and --soft, light and dark. */
body.accent-graphite { --accent: #4a4f55; --on-accent: #fff; --soft: #e9e8e4; }
body.accent-teal { --accent: #1b5a62; --on-accent: #fff; --soft: #e9ebe3; }
body.accent-brass { --accent: #8a5a12; --on-accent: #fff; --soft: #efe6d2; }
body.accent-rust { --accent: #9b3d1c; --on-accent: #fff; --soft: #efe6d2; }
@media (prefers-color-scheme: dark) {
  body.accent-graphite { --accent: #b8bec6; --on-accent: var(--bg); --soft: #2a2426; }
  body.accent-teal { --accent: #6fc3c9; --on-accent: var(--bg); --soft: #1e2a2c; }
  body.accent-brass { --accent: #d9a441; --on-accent: var(--bg); --soft: #2a241a; }
  body.accent-rust { --accent: #e4875a; --on-accent: var(--bg); --soft: #263352; }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.5 var(--bfont); padding-bottom: calc(72px + env(safe-area-inset-bottom)); overflow-wrap: break-word; }
a { color: var(--accent); }
img, svg, video, iframe { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--hfont); color: var(--ink); line-height: 1.25; margin: 1.4em 0 .5em; font-weight: 700; }
h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } h4 { font-size: 1rem; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; } li { margin: 0 0 .4em; }
[hidden] { display: none !important; }
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px; z-index: 99; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.sec-label { font-family: var(--bfont); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); margin: 24px 0 10px; }
.btn { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: .92rem; text-decoration: none; }

/* icons: inline SVG from inc/icons.php, one color (currentColor), sized here */
.ico { width: var(--ico); height: var(--ico); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-s { width: var(--ico-s); height: var(--ico-s); }
.ico-xs { width: var(--ico-xs); height: var(--ico-xs); }

/* header: the logo mark and the wordmark with its tagline at the left; at the right a small stack: the menu button
   (icon + "Menu") on top and the compact language switch (flag + EN / ES) under it, right-aligned */
.site-head { background: var(--band); color: var(--band-fg); padding: 8px 0; position: sticky; top: 0; z-index: 5; border-bottom: 3px solid var(--band-line); transition: padding .2s; }
/* compacted on scroll (app.js adds is-compact past 80 px, removes it under 24 px) */
.brand-logo svg, .brand .wm, .head-corner { transition: width .2s, height .2s, font-size .2s, transform .2s; }
.site-head.is-compact { padding: 4px 0; }
.site-head.is-compact .brand-logo svg { width: 26px; height: 26px; }
.site-head.is-compact .brand .wm { font-size: 1rem; }
.site-head.is-compact .brand .tl { display: none; }
.site-head.is-compact .head-corner { transform: scale(.82); }
.head-row { max-width: 96vw; margin: 0 auto; padding: 0 2vw; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--band-fg); text-decoration: none; min-width: 0; flex: 1; }
.brand-logo { display: inline-flex; flex: none; color: var(--band-fg); }
.brand-logo svg { width: 34px; height: 34px; }
.brand .wm { display: block; font-family: var(--hfont); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.brand .tl { display: none; font-size: .75rem; color: var(--band-sub); margin-top: 2px; }   /* shown from 600 px */
@media (min-width: 600px) { .brand .tl { display: block; } }
.head-corner { display: grid; grid-template-columns: auto; justify-items: stretch; gap: 9px; flex: none; transform-origin: right center; }   /* the switch, then the Menu button, both the width of the wider */
.menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 10px 0 8px; border: 1px solid var(--band-line); background: rgb(255 255 255 / .06); color: var(--band-fg); border-radius: 8px; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; }
.menu-btn .ico { width: 22px; height: 22px; }
.menu-btn:focus-visible, .lang-switch a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.lang-switch { display: flex; align-items: center; gap: 6px; flex: none; font-size: .85rem; }
.lang-switch a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; opacity: .8; }
.lang-switch a.is-current { font-weight: 700; opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lang-switch .flag { width: 22px; height: 15px; border-radius: 2px; flex: none; }
.lang-sep { opacity: .5; }
.lang-head { font-size: .7rem; gap: 4px; line-height: 1; justify-content: flex-end; }
.lang-head a { gap: 3px; opacity: .85; } .lang-head a.is-current { text-decoration: none; opacity: 1; } .lang-head .flag { width: 16px; height: 11px; }

/* the search form: the label line and the box (the white input, the accent submit button at its right). It sits in
   the pull-down panel under the header, or in the open band inside the home hero. */
.ask-band { background: var(--box); border-bottom: 1px solid var(--line); padding: 12px 0 14px; }
.ask { margin: 0; }
.ask-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.ask-box { display: flex; align-items: stretch; }
.ask input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--line); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: #fff; color: #1c2541; -webkit-appearance: none; appearance: none; }
.ask-go { flex: none; width: 50px; display: grid; place-items: center; border: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--accent); color: #fff; cursor: pointer; padding: 0; }
.ask-go .ico { width: 24px; height: 24px; color: #fff; }
.ask-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the pull-down (0.7.0): a tab hanging from the header's bottom edge, centred over the hero; the panel slides down
   from under the header and stays with it while scrolled. Collapsed only when JavaScript runs (html.js). */
.search-tab { position: absolute; left: 50%; bottom: -36px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 12px; border: 0; border-radius: 0 0 10px 10px; background: var(--band); color: var(--band-fg); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; box-shadow: 0 3px 10px rgb(0 0 0 / .25); }
.search-tab .ico { width: 20px; height: 20px; }
.search-tab:focus-visible { outline: 2px solid var(--band-fg); outline-offset: -3px; }
.search-tab[aria-expanded="true"] { background: var(--box); color: var(--ink); }
.search-panel { background: var(--box); border-top: 1px solid var(--line); }
.search-panel-in { position: relative; padding-top: 12px; padding-bottom: 14px; padding-right: 48px; }
.search-close { position: absolute; right: 8px; top: 6px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--mute); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.search-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
html.js .search-panel { max-height: 0; overflow: hidden; visibility: hidden; border-top-width: 0; transition: max-height .25s ease, visibility 0s .25s, border-top-width 0s .25s; }
html.js .search-panel.is-open { max-height: 220px; visibility: visible; border-top-width: 1px; transition: max-height .25s ease, visibility 0s, border-top-width 0s; }
.ask input::placeholder { color: #5b6378; }
.ask input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the menu panel (a <dialog>; app.js opens it with showModal); it carries the full language switch */
.menu-panel { border: 0; padding: 0; background: transparent; margin: 0; inset: 0 0 auto auto; max-width: 100vw;   /* opens at the top right, under the hamburger (owner, 2026-10-10) */ color: var(--text); }
.menu-panel::backdrop { background: rgb(0 0 0 / .45); }
.menu-panel[open] { display: grid; gap: 10px; width: min(92vw, 360px); padding: 18px 18px 16px; margin: 10px 12px; background: var(--paper); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .35); position: fixed; top: 0; right: 0; left: auto; }
.menu-sections { display: grid; gap: 2px; }
.menu-sections a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.06rem; font-family: var(--hfont); }
.menu-sections a:hover, .menu-sections a:focus-visible, .menu-sections a.is-current { background: var(--soft); }
.menu-sections .ico { color: var(--accent); width: 32px; height: 32px; }
.menu-sections a[lang="es"] { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 6px; padding-top: 12px; }
.menu-panel .lang-switch { color: var(--text); padding: 6px 10px 0; } .menu-panel .lang-switch a { opacity: 1; } .menu-panel .lang-switch a.is-current { color: var(--ink); }
.menu-tools { margin: 0; padding: 0 10px; }
.a11y-open { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 6px 8px; cursor: pointer; }
.a11y-open .ico { width: 20px; height: 20px; }
.foot-tools { margin: 0 0 12px; }
.menu-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; }
.menu-links a { color: var(--text); }
.menu-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--mute); font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* the accessibility panel (a <dialog> like the menu, centred) and its switches */
.a11y-panel { border: 0; padding: 0; background: transparent; margin: 0; color: var(--text); max-width: 100vw; }
.a11y-panel::backdrop { background: rgb(0 0 0 / .45); }
.a11y-panel[open] { display: block; width: min(92vw, 400px); padding: 18px 18px 16px; background: var(--paper); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .35); position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.a11y-panel h2 { display: flex; align-items: center; gap: 10px; margin: 0 30px 4px 0; font-size: 1.2rem; }
.a11y-panel h2 .ico { color: var(--accent); width: 28px; height: 28px; }
.a11y-intro { margin: 0 0 10px; font-size: .85rem; color: var(--mute); }
.a11y-list { display: grid; gap: 2px; }
.a11y-list [role="switch"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 6px 4px 6px 8px; font: inherit; font-weight: 600; color: var(--ink); text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.a11y-list [role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sw { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--line); position: relative; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .2s; }
[role="switch"][aria-checked="true"] .sw { background: var(--accent); }
[role="switch"][aria-checked="true"] .sw::after { transform: translateX(16px); }
.a11y-acts { display: flex; gap: 10px; justify-content: flex-end; margin: 14px 0 0; }
.a11y-reset, .a11y-close { font: inherit; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.a11y-reset { color: var(--accent); background: none; border: 1px solid var(--line); }
.a11y-close { color: var(--on-accent); background: var(--accent); border: 0; }

/* the folded sections: a card with the heading as the summary and a +/- at the right */
details.fold { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 8px; }
details.fold > summary { list-style: none; cursor: pointer; padding: 13px 42px 13px 16px; font-family: var(--hfont); font-weight: 700; font-size: 1.05rem; position: relative; min-height: 48px; color: var(--ink); line-height: 1.35; }
summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; position: absolute; right: 14px; top: 8px; font-family: var(--bfont); font-size: 1.5rem; font-weight: 400; color: var(--accent); }
details[open].fold > summary::after { content: "\2212"; }
summary h2, summary h3 { display: inline; font: inherit; color: inherit; margin: 0; }
details.fold > summary h2 { display: flex; align-items: center; gap: 10px; }
.fold-body { padding: 0 16px 6px; }
.fold-body > :first-child { margin-top: 0; }

/* question-and-answer pairs (the FAQ, Most asked, the search answers): the question row with a chevron that turns
   when open; the answer in a tinted panel with an accent bar and an arrow at its start; more room between pairs than
   inside one */
details.faq-item { margin: 0 0 14px; }
details.faq-item > summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 34px 8px 0; min-height: 44px; font-weight: 600; color: var(--ink); line-height: 1.35; }
details.faq-item > summary .chev { position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--accent); transition: transform .2s; }
details[open].faq-item > summary .chev { transform: rotate(180deg); }
.faq-answer { position: relative; background: var(--box); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 14px 10px 34px; margin: 4px 0 0; }
.faq-answer::before { content: "\2192"; position: absolute; left: 11px; top: 9px; color: var(--accent); font-weight: 700; }
.faq-answer > :first-child { margin-top: 0; } .faq-answer > :last-child { margin-bottom: 0; }
.faq-answer p { margin: 0 0 .6em; }
.faq-answer .more { display: block; margin-top: 6px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.answers { padding-top: 12px; padding-bottom: 24px; }
.answers-count, .answers-none, .answers-more { font-size: .85rem; color: var(--mute); margin: 0 0 8px; }
.answers-more { margin-top: 14px; }
.searching #main > :not(#answers) { display: none; }

/* home: the Start-here tiles and the Most-asked list */
.tiles { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tile { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; text-decoration: none; color: var(--text); min-height: 64px; }
.tile .ico { width: var(--ico-tile); height: var(--ico-tile); color: var(--ink); }
.tile-text { flex: 1; }
.tile b { display: block; font-family: var(--hfont); font-size: 1.08rem; color: var(--ink); line-height: 1.25; }
.tile small { display: block; color: var(--mute); font-size: .875rem; line-height: 1.35; margin-top: 2px; }
.tile i { flex: none; font-style: normal; color: var(--accent); font-size: 1.3rem; }
.asked { margin: 0 0 16px; }
.asked summary .ico { color: var(--accent); }
.asked-text { flex: 1; }
.asked-cat { display: block; color: var(--mute); font-size: .8rem; font-weight: 400; margin-top: 1px; }
.asked-all { margin: 4px 0 20px; font-weight: 600; }   /* the Spanish home: the whole Spanish archive */
.guides { list-style: none; padding: 0; margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.guides li { margin: 0; border-top: 1px solid var(--line); } .guides li:first-child { border-top: 0; }
.guides a { display: block; padding: 12px 14px; font-weight: 600; text-decoration: none; color: var(--ink); line-height: 1.35; }
.guides small { display: block; padding: 0 14px 12px; margin-top: -6px; color: var(--mute); font-size: .85rem; }
.empty { color: var(--mute); margin-top: 24px; }

/* article */
.entry-title { font-size: 1.45rem; line-height: 1.18; margin: 0 0 8px; }
.entry-meta { color: var(--mute); font-size: .85rem; margin: 0 0 14px; } .entry-meta a { color: inherit; }
.entry-pair { font-size: .9rem; font-weight: 600; margin: -8px 0 14px; } .entry-meta + .entry-pair { margin-top: -8px; }
.entry-content { font-size: 1rem; }
.key-facts { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: var(--r); padding: 12px 16px 4px; margin: 0 0 12px; }
.key-facts-label { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); margin: 0 0 8px; }
.key-facts-label .ico { color: var(--ink); }
.key-facts p { margin: 0 0 8px; } .key-facts ul { margin: 6px 0 10px; padding-left: 20px; } .key-facts li { margin: 0 0 6px; }
.aff-note { font-size: .8rem; color: var(--mute); margin: 0 0 12px; }
.disclaimer-strip { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--mute); margin: 10px 0 18px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.disclaimer-strip .ico { color: var(--accent); }
sup.cite { font-size: .68em; line-height: 0; vertical-align: super; margin-left: 1px; } sup.cite + sup.cite { margin-left: 3px; }
sup.cite a { text-decoration: none; color: var(--accent); font-weight: 600; padding: 0 1px; } sup.cite a:hover { text-decoration: underline; }
.callout { margin: 16px 0; padding: 12px 16px; border-radius: 8px; background: var(--box); border: 1px solid var(--line); border-left: 5px solid var(--ink); }
.callout p { margin: 0; } .callout p + p { margin-top: .6em; }
.callout-label { display: flex; align-items: center; gap: 10px; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.callout .ico { color: var(--ink); }
.callout-disagree { border-left-color: var(--accent); border-style: dashed; border-left-style: solid; background: var(--paper); }
.callout-disagree .callout-label, .callout-disagree .ico { color: var(--accent); }
.callout-heard { border-left-color: var(--mute); }
.table-wrap { overflow-x: auto; margin: 0 -16px 1em; padding: 0 16px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.4; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 600; }
.table-wrap table { min-width: 560px; }
.table-wrap-decision table { min-width: 0; }
/* the decision grid ("If you are… | Do this") as cards on phones; a table again from 800 px */
table.decision thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.decision tbody, table.decision tr, table.decision td { display: block; width: auto; }
table.decision tr { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); margin: 0 0 8px; padding: 4px 0; }
table.decision td { border: 0; padding: 6px 14px; }
table.decision td:first-child { font-weight: 600; color: var(--ink); padding-bottom: 0; }
table.decision td:last-child { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
ol.steps { list-style: none; padding: 0; counter-reset: step; }
ol.steps li { position: relative; padding: 0 0 8px 34px; counter-increment: step; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font-family: var(--bfont); font-size: .8rem; font-weight: 700; text-align: center; line-height: 24px; }
.fold-body .table-wrap, .help .table-wrap { margin-left: 0; margin-right: 0; padding: 0; }
.fold-body .callout, .faq-answer .callout { background: var(--bg); }
.intro > :last-child { margin-bottom: 12px; }
.help { background: var(--soft); border-left: 5px solid var(--accent); border-radius: 8px; padding: 14px 16px 2px; margin: 24px 0; }
.help h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.2rem; }
.help .ico { color: var(--accent); }
.entry-content h2#faq, .entry-content h2#related, .entry-content h2#sources { display: flex; align-items: center; gap: 10px; }
.related-articles ul { list-style: none; padding: 0; margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.related-articles li { margin: 0; border-top: 1px solid var(--line); } .related-articles li:first-child { border-top: 0; }
.related-articles a { display: block; padding: 12px 14px; font-weight: 600; text-decoration: none; color: var(--ink); line-height: 1.35; }
.sources { font-size: .9rem; line-height: 1.45; }
.sources ol { list-style: none; padding: 0; margin: 0 0 8px; counter-reset: src; }
.sources li { counter-increment: src; position: relative; padding: 6px 0 6px 38px; margin: 0; border-bottom: 1px solid var(--line); }
.sources li::before { content: counter(src); position: absolute; left: 0; top: 7px; width: 26px; height: 22px; border: 1px solid var(--accent); color: var(--accent); border-radius: 5px; font-family: var(--bfont); font-size: .78rem; font-weight: 700; text-align: center; line-height: 20px; }
.sources li:target { background: var(--soft); }
.sources a { word-break: break-word; font-weight: 600; }
.fold-sources .fold-body { padding-bottom: 10px; }
.print-row { margin: 0 0 12px; }
.print-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; color: var(--accent); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
figure { margin: 0 0 1em; } figcaption { font-size: .8rem; color: var(--mute); } .photo-credit { opacity: .85; }

/* =========================================================================
 * The hero band (0.5.0): under the search band, full bleed, in the section's tint with a watermark of its icon; the
 * title, the section label and the meta line sit inside it. The tints are small steps around the band colour:
 *   burgundy  court #5f2230 (the band) · filing #5b2538 (towards plum) · children #672a2e (towards brick) ·
 *             help #552031 (darker, cooler) · checklists #6a2f3b (lighter) · espanol #5d2541 (plum) · page #4f1f2a
 *             (legal pages, darkest) · home = the band.
 *   navy      court #22325a · filing #203660 · children #283152 · help #1d2b50 · checklists #2a3a62 · espanol #26305d ·
 *             page #1c2848.
 * Every tint is 8.8:1 or better under the band text (#f4efe4) and 6:1 under the subline; in dark mode and in high
 * contrast every hero is the band colour. 'photo' puts the featured image under the tint at 85% (5.8:1 or better over
 * a white photo). Heights: 240 px on phones, 330 px from 800 px.
 * ====================================================================== */
.hero { position: relative; overflow: hidden; background: var(--hero, var(--band)); color: var(--band-fg); min-height: 240px; display: flex; align-items: flex-end; padding: 28px 0 30px; margin: 0 0 12px; }
.hero-court { --hero: #3a3f45; } .hero-filing { --hero: #363b42; } .hero-children { --hero: #3e4148; } .hero-help { --hero: #33383e; } .hero-checklists { --hero: #42474d; } .hero-espanol { --hero: #3b3f47; } .hero-page { --hero: #2f3338; } .hero-home { --hero: #3a3f45; }   /* graphite hero tints for every section and both palettes (owner, 2026-10-10); band text #f4efe4 reads 8.5:1 or better on all */
/* the burgundy palette used its own hero tints here; since 0.8.3 every palette uses the graphite set above */
@media (prefers-color-scheme: dark) { body.palette-burgundy .hero, body.palette-navy .hero { --hero: var(--band); } }
html.a11y-contrast body.palette-burgundy .hero, html.a11y-contrast body.palette-navy .hero { --hero: #000; }
.hero-in { position: relative; z-index: 1; width: 100%; }
.hero-mark { position: absolute; right: -36px; bottom: -36px; width: 200px; height: 200px; opacity: .12; color: var(--band-fg); pointer-events: none; }
.hero-mark .ico { width: 100%; height: 100%; stroke-width: 1.5; }
.crumbs { margin: 0 0 20px; font-size: .8rem; color: var(--mute); } .crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.hero-label { margin: 0 0 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--band-sub); }
.hero-label a { color: inherit; text-decoration: none; }
.hero .entry-title { color: var(--band-fg); }
.hero .entry-meta { color: var(--band-sub); margin: 0 0 6px; } .hero .entry-meta a { color: var(--band-fg); }
.hero .entry-pair { margin: 0; } .hero .entry-pair a { color: var(--band-fg); }
.hero-intro { color: var(--band-sub); max-width: 75ch; } .hero-intro p { margin: 0; } .hero-intro a { color: var(--band-fg); }
/* photo variant: the picture at full opacity under a vertical gradient of the tint, 25% at the top, 82% at 55%
   of the height, 92% at the bottom (after longbeach.biz's pillar hero), the text at the bottom with a soft shadow */
.hero-photo { background-image: linear-gradient(rgb(0 0 0 / .6), rgb(0 0 0 / .6)), var(--hero-img); background-image: radial-gradient(circle at bottom left, rgb(0 0 0 / .7) 0%, rgb(0 0 0 / .2) 100%), var(--hero-img); background-size: cover; background-position: center; }
.hero-photo .entry-title, .hero-photo .hero-label, .hero-photo .entry-meta, .hero-photo .entry-pair { text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.hero-photo .hero-label, .hero-photo .entry-meta, .hero-photo .hero-intro { color: var(--band-fg); }   /* the subline tint is under 4.5:1 over a white photo; full band text is 5.3:1 or better */
.hero-photo .hero-mark { display: none; }
.hero-credit { position: absolute; right: 12px; bottom: 8px; margin: 0; font-size: .7rem; color: var(--band-sub); z-index: 1; }
/* the home hero (0.8.0): the owner's photo of downtown Riverside under a bottom-weighted gradient heavier than the
   article photo heroes: desktop 45% at the top, 90% at 42%, 95% at the bottom (the headline sits at 32-63% of the
   height, 6.9:1 or better over the photo's brightest pixels); phones 55% / 92% at 40% / 95% (the headline starts at 14%,
   over the snow: 5.3:1 or better). The two-line introduction and the open search band; 360 px tall on phones, 520 px
   from 800 px. The photo sits at 50% 45% so the mountains stay in view on phones. */
.hero-home { align-items: flex-end; min-height: 300px; padding: 28px 0 22px; }
.hero-img { position: absolute; inset: 0; z-index: 0; }   /* layers: photo 0, gradient (::before) 1, text (.hero-in) 2 */
.hero-home .hero-in { z-index: 2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.hero-home::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at bottom left, rgb(0 0 0 / .7) 0%, rgb(0 0 0 / .2) 100%); }
   /* phones: the headline starts at 14% of the height, over the snow, so the top is heavier */
.hero-home .hero-mark { display: none; } .hero-home { margin-bottom: 0; }
.hero-headline { font-family: var(--hfont); font-size: 1.75rem; font-weight: 700; line-height: 1.12; margin: 0 0 10px; color: var(--band-fg); max-width: 22ch; text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.hero-line { margin: 0 0 16px; font-size: 1rem; line-height: 1.4; color: var(--band-fg); max-width: 60ch; text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.hero-home .ask-band { background: none; border: 0; padding: 0; } .hero-home .ask-band .wrap { max-width: none; padding: 0; } .hero-home .ask-label { color: var(--band-fg); text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.listing-start { margin: 18px 0 8px; }

/* listings */
.listing-intro { color: var(--mute); }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.pagination .page-numbers { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-decoration: none; color: var(--text); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* footer and the phone tab bar */
.site-foot { margin-top: 32px; padding: 20px 0 24px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--mute); }
.foot-brand { font-family: var(--hfont); font-weight: 700; color: var(--ink); margin: 0 0 8px; font-size: 1rem; }
.foot-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; } .foot-links li { margin: 0; }
.foot-links a { color: var(--text); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; } .foot-row .foot-links { margin: 0; }
.lang-foot { color: var(--text); } .lang-foot a { opacity: 1; } .lang-foot a.is-current { color: var(--ink); }
.foot-legal { font-size: .8rem; margin: 0 0 6px; } .foot-legal a { color: inherit; }
.install-open { font: inherit; font-size: .8rem; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-around; background: var(--band); border-top: 1px solid var(--band-line); padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); }
.tabbar a { flex: 1; min-width: 56px; text-align: center; color: var(--band-sub); font-size: .72rem; text-decoration: none; padding: 4px 2px; }
.tabbar .ico { display: block; margin: 0 auto 2px; width: 28px; height: 28px; }
.tabbar .is-current { color: var(--band-fg); font-weight: 700; }

/* the "keep on your phone" sheet */
.install { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--paper); border-top: 3px solid var(--accent); box-shadow: 0 -8px 24px rgb(0 0 0 / .18); padding: 16px 0 calc(18px + env(safe-area-inset-bottom)); text-align: center; }
.install-title { margin: 0 0 10px; font-weight: 700; font-size: 1.05rem; }
.install-btn { font: inherit; font-weight: 700; color: var(--on-accent); background: var(--accent); border: 0; border-radius: var(--r); padding: 12px 18px; min-height: 48px; cursor: pointer; }
.install-how { margin: 10px 0 0; font-weight: 600; }
.install-note { margin: 8px auto 0; max-width: 34em; font-size: .88rem; color: var(--mute); }
.install-acts { margin: 12px 0 0; display: flex; gap: 10px; justify-content: center; }
.install-alt { font: inherit; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 16px; min-height: 44px; cursor: pointer; }

/* =========================================================================
 * Wide screens (owner, 2026-10-09): no tab bar (the menu button is the way to the sections); the content area is 80% of the viewport
 * up to 1400 px; running text inside it is capped at 75ch while tables, the decision grid, boxes and tiles use the
 * full width; the icons grow.
 * ====================================================================== */
@media (min-width: 800px) {
  :root { --ico: 60px; --ico-s: 40px; --ico-xs: 36px; --ico-tile: 60px; }
  html { scroll-padding-top: 100px; }
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .wrap { max-width: min(80vw, 1400px); }
  .site-head { padding: 10px 0; }
  .brand-logo svg { width: 42px; height: 42px; }
  .brand .wm { white-space: nowrap; font-size: 1.3rem; }
  .site-head.is-compact .brand-logo svg { width: 30px; height: 30px; }
  .site-head.is-compact .brand .wm { font-size: 1.05rem; }
  .lang-switch { gap: 8px; font-size: .9rem; }
  .lang-head { font-size: .7rem; gap: 4px; }
  .ask-band { padding: 14px 0 16px; }
  .ask { max-width: 640px; }
  .search-panel-in { padding-top: 14px; padding-bottom: 16px; }
  .search-close { right: 2vw; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  body { line-height: 1.55; }
  h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
  .entry-title { font-size: 2.1rem; max-width: 40ch; }
  .entry-content { font-size: 1.0625rem; }
  .entry-content h2 { font-size: 1.5rem; }
  details.fold > summary { font-size: 1.1rem; }
  .entry-pair, .ask, .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h3, .entry-content > h4, .intro > *, .fold-body > p, .fold-body > ul, .fold-body > ol, .fold-body > h3, .fold-body > h4, .help > p, .help > ul, .help > ol, .faq-answer > *, .key-facts > p, .key-facts > ul, .callout > p, .disclaimer-strip, .entry-meta, .listing-intro, .aff-note, .sources ol, .related-articles ul, details.faq-item, .answers details.qa, .answers p, .guides, .asked { max-width: 75ch; }
  .table-wrap { margin: 0 0 1em; padding: 0; } .table-wrap table { min-width: 0; }
  .hero { min-height: 330px; padding: 40px 0 36px; margin-bottom: 12px; }
  .hero-credit { right: 16px; bottom: 10px; }
  .hero-mark { width: 320px; height: 320px; right: 30px; bottom: -50px; }
  .hero-home { min-height: 440px; padding: 48px 0 34px; }
  .hero-headline { font-size: 3rem; }
  .hero-line { font-size: 1.1rem; margin-bottom: 22px; }
  .hero-home .ask { max-width: 640px; }
  table.decision thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  table.decision tbody { display: table-row-group; }
  table.decision tr { display: table-row; border: 0; border-radius: 0; background: none; margin: 0; padding: 0; }
  table.decision td { display: table-cell; border: 0; border-bottom: 1px solid var(--line); padding: 9px 8px; margin: 0; }
  table.decision td:first-child { width: 52%; padding-bottom: 9px; }
}

/* print: the page without the chrome ("Print this" on the checklists; works on every page) */
@media print {
  .site-head, .ask-band, .search-panel, .search-tab, .menu-panel, .a11y-panel, .tabbar, .skip, .site-foot, .install, #answers, .print-row, .pagination, .related-articles, h2#related, .hero-mark, .hero-credit, .crumbs { display: none !important; }
  .hero { background: none !important; color: #000; min-height: 0; padding: 0; margin-bottom: 12pt; } .hero-img, .hero-home::before { display: none !important; } .hero-headline, .hero-line { color: #000; text-shadow: none; } .hero .entry-title, .hero .entry-meta, .hero .entry-meta a, .hero-label { color: #000; text-shadow: none; }
  body { background: #fff; color: #000; padding: 0; font-size: 12pt; }
  .wrap { max-width: none; padding: 0; }
  details.fold, details.faq-item, .key-facts, .callout, .help, .guides { background: none; border-color: #999; }
  .disclaimer-strip, .entry-meta, .sources { color: #333; }
  a { color: inherit; text-decoration: none; }
  .sources a { text-decoration: underline; }
}

/* =========================================================================
 * Accessibility states (the panel in the footer and the menu): classes on <html>, honoured in both palettes and in dark
 * mode. Last in the file so that they win; the contrast set is on html+body to beat body.palette-* and body.accent-*.
 * ====================================================================== */
html.a11y-text-112 { font-size: 112%; }
html.a11y-text-125 { font-size: 125%; }
html.a11y-contrast, html.a11y-contrast body { --bg: #fff; --paper: #fff; --box: #f2f2f2; --soft: #f2f2f2; --ink: #000; --text: #111; --mute: #333; --line: #555; --accent: #0b4a6f; --on-accent: #fff; --band: #000; --band-fg: #fff; --band-sub: #ddd; --band-line: #444; }
html.a11y-contrast a { text-decoration: underline; }
html.a11y-contrast .ask input { background: #fff; color: #000; border-color: #000; }
html.a11y-contrast .search-tab { border: 1px solid #fff; border-top: 0; }
html.a11y-contrast .tabbar a, html.a11y-contrast .lang-switch a { opacity: 1; }
html.a11y-contrast .menu-btn, html.a11y-contrast .a11y-open, html.a11y-contrast .a11y-reset, html.a11y-contrast .install-alt { border-color: currentColor; }
html.a11y-contrast .sw { background: #777; }
html.a11y-spacing body { line-height: 1.8; letter-spacing: .02em; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 1.4em; }
html.a11y-spacing .key-facts p, html.a11y-spacing .faq-answer p, html.a11y-spacing .callout p { margin-bottom: 1em; }
html.a11y-underline a { text-decoration: underline; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }