/*
Theme Name: Brooks Law 2.4 Editorial
Theme URI: https://patrickbrookslaw.com/
Author: Brooks Law Firm
Description: Custom theme for Brooks Law Firm, Memphis. Version 2.4 — the 2.3 accessibility-first build plus the editorial layer: the scrolling river, bluff, bridge, and Beale Street sign background from the Probation Violation page, and the shared profile components, mapped onto this theme's own palette. Everything else is the 2.3 rebuild (WCAG 2.2 AA targets): static typographic hero, keyboard-operable navigation, Customizer-managed testimonials, case results, and service-area bubbles, curated footer menu, LegalService schema, mobile call bar.
Version: 2.4.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brooks-law
Tags: accessibility-ready, custom-menu, custom-logo, one-column
*/

/* --------------------------------------------------------------
   1. Design tokens
   Palette drawn from the firm's world: Shelby County courtrooms —
   river-slate wood, aged brass, limestone, law-book oxblood.
   All text combinations meet WCAG 2.2 AA (4.5:1 normal, 3:1 large/UI).
----------------------------------------------------------------- */
:root {
  --court:        #12202e;  /* deep river-slate: hero, contact, footer */
  --court-2:      #1b2c3d;  /* raised panels on dark */
  --court-line:   #2c405366; /* hairlines on dark */
  --paper:        #ffffff;
  --limestone:    #f5f2ea;  /* alternating section band */
  --ink:          #222933;  /* body text on light  (≈14:1) */
  --muted:        #4b5563;  /* secondary text      (≈7.5:1) */
  --brass:        #b08d3e;  /* decorative rules & numerals only */
  --brass-bright: #d9b45c;  /* text-safe brass on dark (≈8:1) */
  --brass-btn:    #c8a04a;  /* button fill; ink text on it ≈6.8:1 */
  --oxblood:      #7c2d2d;  /* eyebrow labels on light (≈9:1) */
  --link:         #14538c;  /* links on light (≈6.8:1), underlined */
  --link-dark:    #e6c778;  /* links on dark */
  --focus-ring:   #2f74c0;  /* ≥3:1 on both light and dark */

  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;

  --measure: 66ch;
  --radius: 3px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --section-y: clamp(3.2rem, 8vw, 5.5rem);
}

/* --------------------------------------------------------------
   2. Base & reset-lite
----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  word-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0 0 1.5rem; }
iframe, embed, object, video { max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4vw + 0.8rem, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 2.2vw + 0.7rem, 2.15rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.12rem; }
h5, h6 { font-size: 1rem; }

p, ul, ol, blockquote, table { margin: 0 0 1.25rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #0e3d68; }

hr {
  border: 0;
  border-top: 1px solid var(--brass);
  opacity: 0.5;
  margin: 2.5rem auto;
  max-width: 8rem;
}

blockquote {
  border-left: 3px solid var(--brass);
  margin-left: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
}

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #d8d4c8; padding: 0.55rem 0.7rem; text-align: left; }
th { background: var(--limestone); font-family: var(--serif); }

/* --------------------------------------------------------------
   3. Accessibility utilities
----------------------------------------------------------------- */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto;
  background: var(--paper); color: var(--ink);
  display: block; left: 8px; top: 8px; padding: 0.8rem 1.1rem;
  z-index: 100000; font-weight: 700; text-decoration: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus-ring);
}

.skip-link {
  position: absolute; left: 8px; top: -100px;
  background: var(--court); color: #fff;
  padding: 0.8rem 1.2rem; z-index: 100000;
  font-weight: 700; text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: 8px; color: #fff; }

/* One visible focus style everywhere; white gap keeps it visible on dark. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid transparent; /* Windows High Contrast Mode */
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--focus-ring);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------
   4. Layout primitives
----------------------------------------------------------------- */
.wrap { max-width: 72rem; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.band-limestone { background: var(--limestone); }
.band-dark { background: var(--court); color: #f2f0ea; }
.band-dark a { color: var(--link-dark); }
.band-dark a:hover { color: #f4dfa4; }
.flow > * + * { margin-top: 1.1rem; }
.prose { max-width: var(--measure); }

/* Signature: the "docket rule" section header — small-caps label
   sitting on a brass hairline that ends in a file-stamp square. */
.rule-header { margin-bottom: 2rem; }
.rule-header .kicker {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--oxblood); margin-bottom: 0.9rem;
}
.band-dark .rule-header .kicker { color: var(--brass-bright); }
.rule-header .kicker::after {
  content: ""; flex: 1; height: 1px; background: var(--brass);
  position: relative;
}
.rule-header .kicker .stamp {
  order: 3; width: 9px; height: 9px; background: var(--brass); flex: none;
}
.rule-header h2 { margin-bottom: 0.3em; }
.rule-header .subtitle { color: var(--muted); max-width: var(--measure); margin: 0; }
.band-dark .rule-header .subtitle { color: #c9cfd6; }

/* --------------------------------------------------------------
   5. Buttons
----------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  line-height: 1.2; text-align: center; text-decoration: none;
  padding: 0.95rem 1.5rem; min-height: 48px; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-brass { background: var(--brass-btn); color: var(--court); }
.btn-brass:hover { background: #d9b45c; color: var(--court); }
.btn-outline { background: transparent; color: var(--court); border-color: var(--court); }
.btn-outline:hover { background: var(--court); color: #fff; }
.band-dark .btn-outline, .btn-outline-light { background: transparent; color: #fff; border-color: #ffffffb3; }
.band-dark .btn-outline:hover, .btn-outline-light:hover { background: #fff; color: var(--court); border-color: #fff; }

/* --------------------------------------------------------------
   6. Top bar + header + navigation
----------------------------------------------------------------- */
.topbar { background: var(--court); color: #dfe3e8; font-size: 0.88rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.topbar a { color: var(--link-dark); font-weight: 700; }
.topbar .topbar-note { color: #dfe3e8; }

.site-header { background: var(--paper); border-bottom: 1px solid #e4e0d5; position: relative; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.brand { display: flex; align-items: center; gap: 0.9rem; }
.brand .custom-logo { max-height: 56px; width: auto; }
.brand .name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; margin: 0; line-height: 1.15; }
.brand .name a { color: var(--court); text-decoration: none; }
.brand .name a:hover { color: var(--oxblood); }
.brand .tag { margin: 0; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.menu-toggle {
  display: none;
  background: var(--court); color: #fff; border: 0; border-radius: var(--radius);
  font: inherit; font-weight: 700; padding: 0.65rem 1rem; min-height: 48px; min-width: 48px;
  cursor: pointer;
}
.menu-toggle[aria-expanded="true"] { background: var(--oxblood); }

.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.main-navigation li { position: relative; margin: 0; }
.main-navigation a {
  display: block; padding: 0.7rem 0.85rem;
  color: var(--court); text-decoration: none; font-weight: 600; font-size: 0.98rem;
  border-radius: var(--radius);
}
.main-navigation a:hover { color: var(--oxblood); background: var(--limestone); }
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a { box-shadow: inset 0 -3px 0 var(--brass); }

/* Sub-menus: open on hover, on :focus-within (keyboard), or via toggle button */
.main-navigation .sub-menu {
  position: absolute; left: 0; top: 100%; z-index: 999;
  min-width: 15rem; flex-direction: column; gap: 0;
  background: var(--paper); border: 1px solid #e4e0d5; border-top: 3px solid var(--brass);
  box-shadow: 0 12px 28px rgba(18, 32, 46, 0.14);
  padding: 0.4rem; display: none;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu,
.main-navigation li.open > .sub-menu { display: flex; }
.main-navigation .sub-menu a { font-weight: 500; padding: 0.6rem 0.75rem; }

.submenu-toggle {
  background: transparent; border: 0; cursor: pointer;
  padding: 0.7rem 0.4rem; min-width: 40px; min-height: 44px;
  color: var(--court); font: inherit; border-radius: var(--radius);
}
.submenu-toggle::after { content: "▾"; font-size: 0.85em; }
.submenu-toggle[aria-expanded="true"]::after { content: "▴"; }
.menu-item-has-children { display: flex; align-items: center; }

@media (max-width: 960px) {
  .site-header .wrap { flex-wrap: wrap; }
  .menu-toggle { display: inline-block; }
  .main-navigation { display: none; width: 100%; }
  .main-navigation.toggled { display: block; padding-bottom: 0.75rem; }
  .main-navigation ul { flex-direction: column; gap: 0; }
  .main-navigation a { padding: 0.85rem 0.5rem; border-bottom: 1px solid #edeae0; }
  .main-navigation .sub-menu {
    position: static; display: none; box-shadow: none; border: 0;
    border-left: 3px solid var(--brass); padding: 0 0 0 0.9rem; min-width: 0;
  }
  .main-navigation li.open > .sub-menu { display: block; }
  .main-navigation li:hover > .sub-menu { display: none; }
  .main-navigation li.open:hover > .sub-menu { display: block; }
  .menu-item-has-children { flex-wrap: wrap; }
  .menu-item-has-children > a { flex: 1; }
}

/* --------------------------------------------------------------
   7. Hero — typographic; the phone numbers are the design
----------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--court) 0%, #17293a 100%);
  color: #f2f0ea;
}

/* Optional photo behind the hero. The image sits at z-index -2, the scrim at
   -1, so text always lands on a controlled dark field rather than directly on
   whatever the photograph happens to be doing. */
.hero-media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, center);
}
.hero.has-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(18, 32, 46, var(--hero-overlay, 0.82)) 0%,
    rgba(18, 32, 46, var(--hero-overlay, 0.82)) 46%,
    rgba(18, 32, 46, calc(var(--hero-overlay, 0.82) * 0.66)) 100%
  );
}
/* On narrow screens the text spans the full width, so the scrim must too. */
@media (max-width: 860px) {
  .hero.has-image::after {
    background: rgba(18, 32, 46, var(--hero-overlay, 0.82));
  }
}

.hero .wrap { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.hero .kicker {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-bright); margin: 0 0 1.1rem;
}
.hero h1 { color: #fff; max-width: 22ch; margin-bottom: 0.5em; }
.hero .lead {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 1.2vw + 0.9rem, 1.4rem); line-height: 1.55;
  color: #d9dde2; max-width: 56ch; margin-bottom: 2rem;
}
.hero-calls { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: stretch; margin-bottom: 1.4rem; }
.hero-call {
  display: block; text-decoration: none; border-radius: var(--radius);
  padding: 0.9rem 1.4rem; border: 2px solid transparent;
}
.hero-call .call-label {
  display: block; font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.15rem;
}
.hero-call .call-number { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(1.45rem, 2vw + 0.7rem, 2rem); line-height: 1.1; }
.hero-call-primary { background: var(--brass-btn); color: var(--court); }
.hero-call-primary:hover { background: var(--brass-bright); color: var(--court); }
.hero-call-secondary { border-color: #ffffff8c; color: #fff; }
.hero-call-secondary:hover { background: #fff; color: var(--court); }
.hero .hero-consult { color: var(--link-dark); font-weight: 700; }

.trust-points {
  list-style: none; margin: 2.2rem 0 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--court-line);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem;
  font-size: 0.95rem; color: #cfd5db;
}
.trust-points li { margin: 0; padding-left: 1.1rem; position: relative; }
.trust-points li::before {
  content: ""; position: absolute; left: 0; top: 0.48em;
  width: 8px; height: 8px; background: var(--brass);
}

/* --------------------------------------------------------------
   8. Practice cards (the firm's I · II · III divisions)
----------------------------------------------------------------- */
.practice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.4rem; }
.practice-card {
  position: relative; background: var(--paper);
  border: 1px solid #e4e0d5; border-top: 3px solid var(--brass);
  padding: 1.6rem 1.5rem 1.4rem; border-radius: var(--radius);
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.practice-card:hover { box-shadow: 0 14px 30px rgba(18, 32, 46, 0.12); transform: translateY(-2px); }
.practice-card:focus-within { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--focus-ring); }
.practice-card .numeral {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 700;
  color: var(--brass); letter-spacing: 0.12em; margin-bottom: 0.7rem;
}
.practice-card h3 { margin-bottom: 0.45rem; }
.practice-card h3 a { color: var(--court); text-decoration: none; }
.practice-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.practice-card h3 a:focus-visible { box-shadow: none; } /* card carries the ring */
.practice-card p { color: var(--muted); font-size: 0.98rem; margin-bottom: 0.9rem; }
.practice-card .more {
  margin-top: auto; font-weight: 700; font-size: 0.9rem;
  color: var(--oxblood); letter-spacing: 0.04em;
}

/* --------------------------------------------------------------
   9. About
----------------------------------------------------------------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.about-photo img { border-radius: var(--radius); border: 1px solid #e0dccf; width: 100%; }
.about-photo figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.attorney-line { font-family: var(--serif); font-size: 1.1rem; }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------
   10. Testimonials (Customizer-managed)
----------------------------------------------------------------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; }
.testimonial {
  background: var(--paper); border: 1px solid #e4e0d5; border-radius: var(--radius);
  padding: 1.6rem 1.5rem; margin: 0; position: relative;
}
.testimonial::before {
  content: "\201C"; position: absolute; top: 0.2rem; left: 1.1rem;
  font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--brass);
  opacity: 0.55;
}
.testimonial blockquote { border: 0; padding: 1.4rem 0 0; margin: 0 0 0.9rem; color: var(--ink); font-size: 1.02rem; }
.testimonial figcaption { font-weight: 700; font-size: 0.9rem; color: var(--muted); letter-spacing: 0.03em; }
.testimonial figcaption::before { content: "— "; color: var(--brass); }
.section-disclaimer { font-size: 0.85rem; color: var(--muted); max-width: var(--measure); margin: 1.6rem 0 0; }

/* --------------------------------------------------------------
   11. Case results — docket ledger
----------------------------------------------------------------- */
.results-list { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.results-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1.5rem;
  align-items: baseline; padding: 0.9rem 0.2rem; margin: 0;
  border-bottom: 1px solid #ddd8ca;
}
.results-list li:first-child { border-top: 1px solid #ddd8ca; }
.results-list .charge { font-family: var(--serif); font-weight: 700; }
.results-list .outcome { color: var(--oxblood); font-weight: 700; font-size: 0.95rem; text-align: right; }
@media (max-width: 560px) { .results-list li { grid-template-columns: 1fr; } .results-list .outcome { text-align: left; } }

/* --------------------------------------------------------------
   12. Contact section
----------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2.2rem; }
.contact-item h3 {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--brass-bright);
  margin-bottom: 0.5rem;
}
.contact-item p { margin-bottom: 0.4rem; }
.contact-item .big { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; }
.contact-note { border-top: 1px solid var(--court-line); margin-top: 2.2rem; padding-top: 1.4rem; font-size: 0.92rem; color: #c9cfd6; max-width: var(--measure); }
.contact-form-slot { margin-top: 2.2rem; background: var(--court-2); border: 1px solid var(--court-line); border-radius: var(--radius); padding: 1.6rem; }
.contact-form-slot label { font-weight: 700; }
.contact-form-slot input[type="text"], .contact-form-slot input[type="email"],
.contact-form-slot input[type="tel"], .contact-form-slot textarea {
  width: 100%; background: #fff; color: var(--ink);
  border: 1px solid #cfd5db; border-radius: var(--radius); padding: 0.7rem 0.8rem; font: inherit;
}

/* --------------------------------------------------------------
   13. Interior pages
----------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--court);
  color: #fff;
}
.page-hero .wrap { padding-top: clamp(2.2rem, 5vw, 3.4rem); padding-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.page-hero h1 { color: #fff; margin-bottom: 0; max-width: 28ch; }

/* A page's Featured Image becomes its hero photo — no extra control needed. */
.page-hero.has-image .wrap { padding-top: clamp(3rem, 7vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 4.5rem); }
.page-hero .hero-media img { object-position: var(--hero-focus, center); }
.page-hero.has-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(18, 32, 46, var(--hero-overlay, 0.84)) 0%,
    rgba(18, 32, 46, var(--hero-overlay, 0.84)) 52%,
    rgba(18, 32, 46, calc(var(--hero-overlay, 0.84) * 0.7)) 100%
  );
}
@media (max-width: 860px) {
  .page-hero.has-image::after { background: rgba(18, 32, 46, var(--hero-overlay, 0.84)); }
}


.breadcrumb { font-size: 0.88rem; margin-bottom: 1rem; color: #c9cfd6; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.35rem; color: var(--brass-bright); }
.breadcrumb a { color: #dfe3e8; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }

.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .content-layout { grid-template-columns: 1fr; } }

.entry-content { max-width: var(--measure); }
.entry-content h2 { margin-top: 2.2rem; padding-bottom: 0.35rem; border-bottom: 1px solid #e4e0d5; }
.entry-content h3 { margin-top: 1.8rem; color: var(--court); }
.entry-content a { text-decoration: underline; }
.entry-content .wp-block-image img { border-radius: var(--radius); }
.entry-content .wp-block-button__link { background: var(--brass-btn); color: var(--court); border-radius: var(--radius); text-decoration: none; font-weight: 700; padding: 0.9rem 1.4rem; }
.entry-content .wp-block-separator { border-color: var(--brass); opacity: 0.5; }

.sidebar-box {
  background: var(--limestone); border: 1px solid #e0dccf; border-top: 3px solid var(--brass);
  border-radius: var(--radius); padding: 1.4rem 1.3rem; margin-bottom: 1.6rem;
}
.sidebar-box h2 { font-size: 1.05rem; margin-bottom: 0.8rem; }
.sidebar-box .btn { display: block; margin-bottom: 0.7rem; }
.sidebar-box ul { list-style: none; padding: 0; margin: 0; }
.sidebar-box li { border-bottom: 1px solid #e0dccf; margin: 0; }
.sidebar-box li:last-child { border-bottom: 0; }
.sidebar-box li a { display: block; padding: 0.55rem 0.1rem; text-decoration: none; font-weight: 600; color: var(--court); }
.sidebar-box li a:hover { color: var(--oxblood); text-decoration: underline; }
.sidebar-box .fine { font-size: 0.85rem; color: var(--muted); margin: 0.4rem 0 0; }

/* Blog index / archives */
.post-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.post-list li { border-bottom: 1px solid #e4e0d5; padding: 1.4rem 0; margin: 0; }
.post-list h2 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.post-list h2 a { color: var(--court); text-decoration: none; }
.post-list h2 a:hover { color: var(--oxblood); text-decoration: underline; }
.post-meta { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.5rem; }

.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 2.5rem 0 0; }
.pagination .page-numbers {
  display: inline-block; min-width: 44px; min-height: 44px; padding: 0.6rem 0.9rem;
  border: 1px solid #d8d4c8; border-radius: var(--radius); text-align: center; text-decoration: none;
}
.pagination .current { background: var(--court); color: #fff; border-color: var(--court); }

/* Search form */
.search-form { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 30rem; }
.search-form .search-field {
  flex: 1; min-width: 12rem; font: inherit; padding: 0.75rem 0.9rem;
  border: 1px solid #b9b3a4; border-radius: var(--radius); background: #fff; color: var(--ink);
}
.search-form .search-submit { min-height: 48px; }

/* Comments (rarely used; kept accessible) */
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { border-top: 1px solid #e4e0d5; padding: 1.2rem 0; }
.comment-form p { margin-bottom: 1rem; }
.comment-form label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.comment-form input[type="text"], .comment-form input[type="email"],
.comment-form input[type="url"], .comment-form textarea {
  width: 100%; max-width: 34rem; font: inherit; padding: 0.7rem 0.8rem;
  border: 1px solid #b9b3a4; border-radius: var(--radius);
}

/* --------------------------------------------------------------
   14. Footer
----------------------------------------------------------------- */
.site-footer { background: var(--court); color: #cfd5db; font-size: 0.95rem; }
.site-footer .wrap { padding-top: 3rem; padding-bottom: 1rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.2rem; padding-bottom: 2.2rem; border-bottom: 1px solid var(--court-line); }
.footer-heading {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--brass-bright);
  margin-bottom: 0.9rem;
}
.site-footer p { margin-bottom: 0.45rem; }
.footer-menu ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.6rem; }
.footer-menu li { margin: 0 0 0.15rem; break-inside: avoid; }
.footer-menu a { display: inline-block; padding: 0.3rem 0; color: #dfe3e8; text-decoration: none; }
.footer-menu a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 560px) { .footer-menu ul { columns: 1; } }

.footer-legal { padding: 1.6rem 0 2rem; font-size: 0.83rem; line-height: 1.7; color: #aab3bd; max-width: 60rem; }
.footer-legal a { color: #dfe3e8; }
.footer-copyright { font-size: 0.85rem; color: #cfd5db; padding-bottom: 1.5rem; }

/* --------------------------------------------------------------
   15. Mobile sticky call bar
----------------------------------------------------------------- */
.call-bar { display: none; }
@media (max-width: 782px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .call-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    box-shadow: 0 -6px 18px rgba(18, 32, 46, 0.25);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--court);
  }
  .call-bar a {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 60px; font-weight: 700; font-size: 1.02rem; text-decoration: none;
  }
  .call-bar .call-bar-call { background: var(--brass-btn); color: var(--court); }
  .call-bar .call-bar-text { background: var(--court); color: #fff; border-left: 1px solid var(--court-line); }
}

/* --------------------------------------------------------------
   16. 404 / misc
----------------------------------------------------------------- */
.error-404 .wrap { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.error-404 .search-form { margin: 1.5rem 0 2rem; }

.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: 0.85rem; color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.alignleft { float: left; margin: 0.4rem 1.4rem 1rem 0; }
.alignright { float: right; margin: 0.4rem 0 1rem 1.4rem; }
.aligncenter { margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .alignleft, .alignright { float: none; margin: 0 0 1rem; } }

.sticky { display: block; }
.bypostauthor { display: block; }

/* ==== v2.2.0 media retrofit ==== */
.hero-media--video { z-index: -1; }
.hero-media--video video { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, center); display: block; }
.hero.has-image::after { z-index: 0; }
.hero .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero-media--video { display: none; } }

/* --------------------------------------------------------------
   12. Service area bubbles (v2.3)
   Community links between homepage content and Contact. Disc uses
   the courtroom slate with a brass marker; photos (Customizer)
   fill the disc. All states meet WCAG 2.2 AA.
----------------------------------------------------------------- */
.sa-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem 1.25rem;
  justify-items: center;
}
.sa-item { width: 100%; max-width: 170px; }
.sa-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  min-height: 48px;
  outline-offset: 4px;
}
.sa-disc {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, var(--court-2), var(--court) 70%);
  color: var(--brass-bright);
  box-shadow: 0 4px 14px rgba(18, 32, 46, .18);
  border: 3px solid transparent;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sa-photo,
.sa-disc.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sa-pin { width: 44px; height: 44px; }
.sa-label {
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  line-height: 1.3;
}
.sa-bubble:hover .sa-disc,
.sa-bubble:focus-visible .sa-disc {
  transform: translateY(-4px);
  border-color: var(--brass);
  box-shadow: 0 10px 22px rgba(18, 32, 46, .28);
}
.sa-bubble:hover .sa-label,
.sa-bubble:focus-visible .sa-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sa-bubble:focus-visible {
  outline: 3px solid var(--focus-ring);
  border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce) {
  .sa-disc { transition: none; }
  .sa-bubble:hover .sa-disc,
  .sa-bubble:focus-visible .sa-disc { transform: none; }
}
@media (max-width: 480px) {
  .sa-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .sa-disc { width: 96px; height: 96px; }
  .sa-pin { width: 36px; height: 36px; }
  .sa-label { font-size: .9rem; }
}

/* --------------------------------------------------------------
   13. Page title ribbons (v2.3.1)
   Decorative title band above content on selected pages/posts.
----------------------------------------------------------------- */
.page-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(120deg, var(--court-2), var(--court) 65%);
  border-radius: 6px;
  padding: 1.1rem 1.5rem;
  margin: 0 0 1.75rem;
  box-shadow: 0 4px 14px rgba(18, 32, 46, .2);
}
.page-ribbon__icon {
  width: 46px;
  height: 46px;
  color: var(--brass-bright);
  flex: 0 0 auto;
}
.page-ribbon__title {
  color: #f2f0ea;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .page-ribbon { padding: .9rem 1rem; }
  .page-ribbon__icon { width: 32px; height: 32px; }
}

/* v2.3.2 — ribbon photo variant */
.page-ribbon.has-photo {
  background-size: cover;
  background-position: center;
}