/* ============================================================
   Mansfield Child Support Lawyer
   Law Offices of Lisa G. Garza, P.C. — citadel network
   Palette: forest #14392F | sage #5C7A6B | brass #C0A062
            bone #F6F3EC | ink #1C1F23
   Fonts:   Merriweather (headings) / Inter (body), self-hosted
   ============================================================ */

@font-face { font-family:'Merriweather'; src:url('/fonts/merriweather-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Merriweather'; src:url('/fonts/merriweather-400i.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Merriweather'; src:url('/fonts/merriweather-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('/fonts/inter-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --forest:#14392F; --sage:#5C7A6B; --brass:#C0A062;
  --bone:#F6F3EC; --ink:#1C1F23; --line:#DAD3C6;
  --accent:#14392F; --hero-bg:#FFFFFF; --hero-fg:#1C1F23;
  --radius:6px; --measure:74ch;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bone); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:'Merriweather',Georgia,serif; line-height:1.25; color:var(--forest); margin:0 0 .6em; }
h1 { font-size:clamp(2rem,4.4vw,3.1rem); letter-spacing:-.01em; }
h2 { font-size:clamp(1.5rem,2.7vw,2.1rem); margin-top:2.2em; }
h3 { font-size:1.22rem; margin-top:1.8em; }
p,li { max-width:var(--measure); }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { color:var(--forest); }
.wrap { width:min(1040px,92vw); margin-inline:auto; }
section .wrap { width:min(820px,92vw); }
section .wrap .grid, section .wrap table, section .wrap .linklist { width:min(1040px,92vw); margin-inline:auto; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; background:#fff; padding:.6rem 1rem; z-index:99; }
img { max-width:100%; height:auto; }

/* ---- header ---- */
.site-header { background:var(--forest); color:var(--bone); position:sticky; top:0; z-index:40; }
.header-inner { display:flex; align-items:center; gap:1rem; min-height:66px; }
.brand { font-family:'Merriweather',serif; font-weight:700; color:var(--bone); text-decoration:none; font-size:1.03rem; letter-spacing:.01em; }
.brand:hover { color:var(--brass); }
.primary-nav { margin-left:auto; display:flex; align-items:center; gap:1.4rem; }
.primary-nav ul { display:flex; gap:1.15rem; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.primary-nav a { color:var(--bone); text-decoration:none; font-size:.9rem; font-weight:500; opacity:.9; }
.primary-nav a:hover,.primary-nav a.current { color:var(--brass); opacity:1; }
.nav-cta { background:var(--brass); color:var(--forest)!important; padding:.55rem .95rem; border-radius:var(--radius); font-weight:600; font-size:.85rem; white-space:nowrap; }
.nav-cta:hover { background:var(--bone); }
.nav-toggle { display:none; margin-left:auto; background:none; border:0; padding:.5rem; cursor:pointer; flex-direction:column; gap:5px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--bone); }

/* ---- hero ---- */
.hero { background:var(--hero-bg); color:var(--hero-fg); padding:3rem 0; border-bottom:1px solid var(--line); }
.hero h1 { color:var(--hero-fg); max-width:20ch; }
.hero .lede { font-size:1.14rem; max-width:56ch; opacity:.94; }
.hero .eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:600; color:var(--brass); margin:0 0 .9rem; }

/* ---- buttons ---- */
.cta-pair { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.6rem 0; }
.btn { display:inline-block; padding:.8rem 1.35rem; border-radius:var(--radius); font-weight:600; font-size:.94rem; text-decoration:none; border:2px solid transparent; }
.btn-primary { background:var(--brass); color:var(--forest); border-color:var(--brass); }
.btn-primary:hover { background:transparent; color:var(--brass); }
.btn-secondary { background:transparent; color:currentColor; border-color:currentColor; }
.btn-secondary:hover { background:currentColor; }
.btn-ghost { color:currentColor; padding-inline:.4rem; align-self:center; }
.hero .btn-secondary:hover { color:var(--hero-bg); }

/* ---- sections ---- */
section { padding:2.4rem 0; }
section:nth-of-type(even) { background:#fff; }
.grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); margin-top:1.6rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; border-top:3px solid var(--brass); }
section:nth-of-type(even) .card { background:var(--bone); }
.card h3 { margin-top:0; }
.card p { margin-bottom:0; font-size:.95rem; }
.card a { font-weight:600; }
.note { border-left:4px solid var(--brass); background:#fff; padding:1.1rem 1.3rem; border-radius:0 var(--radius) var(--radius) 0; }
.note p:last-child { margin-bottom:0; }
.stat-row { display:flex; flex-wrap:wrap; gap:2.2rem; margin:1.5rem 0; }
.stat b { display:block; font-family:'Merriweather',serif; font-size:1.9rem; color:var(--forest); line-height:1; }
.stat span { font-size:.85rem; opacity:.75; }
.faq details { border-bottom:1px solid var(--line); padding:1rem 0; max-width:var(--measure); }
.faq summary { cursor:pointer; font-weight:600; font-family:'Merriweather',serif; color:var(--forest); }
.faq details[open] summary { margin-bottom:.7rem; }
.linklist { columns:2; column-gap:2.5rem; list-style:none; padding:0; max-width:none; }
.linklist li { padding:.28rem 0; break-inside:avoid; max-width:none; }
table { border-collapse:collapse; width:100%; max-width:var(--measure); margin:1.2rem 0; font-size:.94rem; }
th,td { text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:var(--forest); color:var(--bone); font-family:'Inter',sans-serif; font-weight:600; }

/* ---- footer ---- */
.site-footer { background:var(--forest); color:var(--bone); padding:3.2rem 0 2rem; margin-top:3rem; }
.site-footer h3 { color:var(--brass); font-size:.95rem; margin-bottom:.8rem; }
.site-footer a { color:var(--bone); text-decoration:none; opacity:.86; font-size:.9rem; }
.site-footer a:hover { color:var(--brass); opacity:1; }
.footer-top { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { padding:.2rem 0; }
.office { font-size:.88rem; opacity:.9; margin:.4rem 0; }
.cert { font-size:.85rem; color:var(--brass); }
.footer-cta { border-top:1px solid rgba(255,255,255,.18); margin-top:2rem; padding-top:1.2rem; }
.hub-line { font-size:.9rem; opacity:.9; max-width:none; }
.compliance { font-size:.74rem; line-height:1.6; opacity:.62; border-top:1px solid rgba(255,255,255,.14); padding-top:1.1rem; margin-top:1.1rem; max-width:none; }

@media (max-width:820px) {
  .nav-toggle { display:flex; }
  .primary-nav { display:none; position:absolute; top:66px; left:0; right:0; background:var(--forest); flex-direction:column; align-items:flex-start; gap:.4rem; padding:1rem 4vw 1.4rem; }
  .primary-nav.open { display:flex; }
  .primary-nav ul { flex-direction:column; gap:.1rem; }
  .linklist { columns:1; }
}