/* ============================================================================
   LeverLaw - components
   ----------------------------------------------------------------------------
   Site-wide primitives that apply regardless of which pattern emits them.
   Anything pattern-specific lives in the pattern's own markup, not here.
   ============================================================================ */

/* ---- Skip link (a11y, WCAG 2.4.1) ---- */
.skip-link {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -110%);
	z-index: var(--z-skip-link);
	padding: var(--space-3) var(--space-5);
	background: var(--color-ink-1000);
	color: var(--color-on-dark-strong);
	font: 600 var(--text-md)/1 var(--font-sans);
	border-radius: 0;
	text-decoration: none;
	transition: transform var(--motion-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
	transform: translate(-50%, 0);
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* ---- Selection ---- */
::selection {
	background: var(--color-brand-gold-soft);
	color: var(--color-ink-1000);
}

/* ---- Container utilities ---- */
.ll-container {
	width: 100%;
	max-width: var(--container-default);
	margin-inline: auto;
	padding-inline: var(--space-5);
}
.ll-container--narrow { max-width: var(--container-narrow); }
.ll-container--wide   { max-width: var(--container-wide); }

@media (min-width: 48em) {
	.ll-container { padding-inline: var(--space-6); }
}
@media (min-width: 80em) {
	.ll-container { padding-inline: var(--space-7); }
}

/* ---- Section rhythm (compacted to legacy density, T-POLISH-VERTICAL-RHYTHM-COMPACT-01) ---- */
.ll-section {
	padding-block: var(--space-7);
}
.ll-section--tight  { padding-block: var(--space-6); }
/* Subtle navy-on-navy honeycomb texture: brand-continuity depth on dark surfaces
   (mirrors the legacy LeverLaw drawer's faint texture). Decorative only, no semantics.
   Tile fill #1B2230 (ink-900) at fill-opacity 0.5 sits ~5-7% above the #0E121A base,
   so white / on-dark-body text keeps its WCAG AA margin. The `background` shorthand
   stays as the solid-navy fallback; `background-image` overrides it where supported. */
.ll-section--inverse {
	background: var(--color-ink-1000);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='49'%20viewBox='0%200%2028%2049'%3E%3Cpath%20d='M13.99%209.25l13%207.5v15l-13%207.5L1%2031.75v-15l12.99-7.5zM3%2017.9v12.7l10.99%206.34%2011-6.35V17.9l-11-6.34L3%2017.9zM0%2015l12.98-7.5V0h-2v6.35L0%2012.69v2.3zm0%2018.5L12.98%2041v8h-2v-6.85L0%2035.81v-2.3zM15%200v7.5L27.99%2015H28v-2.31h-.01L17%206.35V0h-2zm0%2049v-8l12.99-7.5H28v2.31h-.01L17%2042.15V49h-2z'%20fill='%231B2230'%20fill-opacity='0.5'/%3E%3C/svg%3E");
	background-repeat: repeat;
	color: var(--color-on-dark-body);
}
body.post-type-archive .site-content {
	padding-top: 0;
}
/* T-DESIGN-CPT-WIDTH-FULLBLEED-01: full-bleed every CPT archive section so
   the background spans 100vw and the inner .ll-container can reach the
   --container-default (1440px) cap, matching the section-header band content
   width. Previously only `.ll-section--inverse` (the hero) broke out, so the
   grid `.ll-section` stayed bounded by GP's container_width=1200 (see
   inc/gp-hooks.php :391); the grid card area read ~240px narrower than the
   hero at >=1200px and its background stopped before the viewport edges on
   /attorneys/, /practice-areas/, /myths/, /locations/, /videos/, /topics/,
   and /testimonials/. Broadening to `.ll-section` catches: the inverse hero
   (already covered), the grid `<section class="ll-section">` emitted by
   template-parts/cpt-archive-grid.php + the inlined archive-testimonial.php
   section, the `.ll-section--header` + `.ll-section--subtle` bands in
   archive-bankruptcy_topic.php, and the trailing `cta-band` pattern (which
   already carries `alignfull`; the negative-margin technique here matches
   WP's alignfull math, no conflict). CPT singles live under
   `.ll-cpt-single`, not `.ll-cpt-archive`, and emit their sections through
   do_blocks with `align:full`; their patterns own their contentSize
   (Layout-A 1440px [SUPERSEDED 2026-06-27 by T-FIX-LAYOUT-A-SINGLE-WIDTH-01
   per DEC-CONTENT-WIDTH-UNIFY: was 960], location/video 1080px,
   attorney/practice-area/bankruptcy-topic 1440px), and DEC-LAYOUT-SYSTEM-01
   locks the non-Layout-A widths. Not changing single patterns preserves
   the (now unified) body column per the original T-DESIGN-CPT-WIDTH-
   FULLBLEED-01 non-goal. */
body.post-type-archive .ll-section {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
body.post-type-archive .ll-section--inverse > .ll-container {
	text-align: center;
}
.ll-section--inverse :is(h1, h2, h3, h4, h5, h6) {
	color: var(--color-on-dark-strong);
}
.ll-section--subtle {
	background: var(--color-surface-1);
}
/* T-DESIGN-FAMILY-HEADER-BAND-01 + T-DESIGN-FAMILY-CSS-POLISH-01: light page-header
   band, the LIGHT inverse of .ll-section--inverse above. Mirrors that rule's
   STRUCTURE (full-bleed surface + honeycomb texture + the shared .ll-section
   padding) but lands on the light surface so the family-parent page headers
   (about, why-leverlaw, bankruptcy-process) read as visibly distinct from the
   white body without reversing the navy nav into the page header.
   T-DESIGN-FAMILY-CSS-POLISH-01: softened the texture by dropping fill-opacity
   from 0.5 to 0.3 (tile fill #D4D9E1 ink-200 unchanged). At 0.5 the honeycomb
   read too dark and competed with the eyebrow/H1/intro; at 0.3 the texture
   pixels sit ~3-4% below the #F8F9FB surface-1 base (down from the prior
   ~5-7%), so the honeycomb reads as faint vellum behind the type rather than
   as a competing pattern. Lowering opacity only widens the existing WCAG AA
   margin: eyebrow brand-gold-strong (~4.45:1 on solid surface-1) + H1 ink-1000
   (~17:1) + intro ink-500 (~6:1) keep their margin on the densest texture
   pixel and gain headroom on every other pixel. Eyebrow / H1 / intro text
   colors are not overridden here; the patterns set them per-element so the
   same rule composes with both light and dark text in future surfaces if
   reused. */
.ll-section--header {
	background: var(--color-surface-1);
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='49'%20viewBox='0%200%2028%2049'%3E%3Cpath%20d='M13.99%209.25l13%207.5v15l-13%207.5L1%2031.75v-15l12.99-7.5zM3%2017.9v12.7l10.99%206.34%2011-6.35V17.9l-11-6.34L3%2017.9zM0%2015l12.98-7.5V0h-2v6.35L0%2012.69v2.3zm0%2018.5L12.98%2041v8h-2v-6.85L0%2035.81v-2.3zM15%200v7.5L27.99%2015H28v-2.31h-.01L17%206.35V0h-2zm0%2049v-8l12.99-7.5H28v2.31h-.01L17%2042.15V49h-2z'%20fill='%23D4D9E1'%20fill-opacity='0.3'/%3E%3C/svg%3E");
	background-repeat: repeat;
}
/* T-DESIGN-SECTION-HEADER-CENTER-01 (2026-06-21): center the family band
   eyebrow + H1. Parent patterns (page-about, page-why-leverlaw,
   page-bankruptcy-process) explicitly carry has-text-align-center on
   these elements, so this rule is redundant on parents and authoritative
   on descendant pages whose band is emitted by
   scripts/apply-tree-pages-styling.php (the script does not set a
   textAlign attribute, so descendants ship with no align class and this
   rule centers them in the live DB without a re-apply). Descendants
   carry only eyebrow + H1 in the band (no intro paragraph), so the
   parents' intro paragraph case is handled by the explicit class set in
   the patterns.
   Scope: .ll-section--header exists ONLY on the 3 parent patterns + the
   21 descendant DB-wrapped pages (verified by the T-DESIGN-FAMILY-BODY-
   TYPE-01 audit). No bleed into CPT singles/archives, blog, nav, or the
   cta-band. Specificity (0,1,1) wins over the unstyled descendant
   heading default and matches the parent's explicit has-text-align-
   center (0,1,0 + tag = 0,1,1) without conflict. */
.ll-section--header .ll-eyebrow,
.ll-section--header h1 {
	text-align: center;
}

/* T-DESIGN-HEADER-UNIFY-BUILD-01 (2026-06-22): unified section-header band.
   One structure, two skins. Emitted by template-parts/section-header.php
   and consumed by the 5 CPT-single patterns (via layout-a-body for myth +
   testimonial; directly by bankruptcy-topic / practice-area / location /
   video), the 5 grid CPT archives (via template-parts/cpt-archive-grid.php)
   + the testimonial archive (via archive-testimonial.php) calling the
   partial directly, and the topics-hub / filing-reference term archive
   (via archive-bankruptcy_topic.php). The skin class on the parent
   .ll-section swaps colors only; markup, container, alignment, type
   scale, and spacing are identical across skins. Sign-off preview:
   deliverables/preview-header-unify.html (450, approved 2026-06-22).
   Attorney-single retains its bespoke .ll-attorney-single-breadcrumb
   strip (DEC-locked exception); family-page patterns + DB-wrapped
   descendants keep the inlined .ll-section--header markup (pattern-
   source convention, not enforced retroactively). */
.ll-header-band__eyebrow {
	font-family: var(--font-sans);
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	margin: 0 0 var(--space-3);
	text-align: center;
}
.ll-header-band__title {
	font-family: var(--font-display);
	font-size: var(--text-h1-fluid);
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	margin: 0 0 var(--space-4);
	text-align: center;
}
/* T-DESIGN-HEADER-TITLE-FIT-01: nowrap is JS-gated via .is-fit so the
   no-JS fallback keeps wrapping (no horizontal overflow). The fit
   script in assets/js/header-title-fit.js adds the class and then
   scales font-size down per-title to keep each title on one line. */
.ll-header-band__title.is-fit { white-space: nowrap; }
.ll-header-band__intro {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	margin: 0;
	margin-inline: auto;
	text-align: center;
	max-width: 100%;
}
/* Light skin colors (.ll-section--header) */
.ll-section--header .ll-header-band__eyebrow { color: var(--color-brand-gold-strong); }
.ll-section--header .ll-header-band__title   { color: var(--color-ink-1000); }
.ll-section--header .ll-header-band__intro   { color: var(--color-ink-500); }
/* Dark skin colors (.ll-section--inverse) */
.ll-section--inverse .ll-header-band__eyebrow { color: var(--color-brand-gold); }
.ll-section--inverse .ll-header-band__title   { color: var(--color-on-dark-strong); }
.ll-section--inverse .ll-header-band__intro   { color: var(--color-on-dark-body); }

/* Container-level text-align so non-BEM intro markup (e.g. layout-a-body's
   `meta_block` wp:paragraph carrying [lf_field] for myth + testimonial)
   centers in the same band as the BEM children. Scoped to CPT singles +
   the topics archive header / FR term header so the centering does not
   double-bleed into the cta-band (which carries explicit has-text-align-
   center on every element already, so this is a no-op there) or into
   family-page header bands (which carry the legacy .ll-eyebrow / <h1>
   rule above and have their own intro alignment via wp:paragraph
   attributes). T-CPT-SINGLE-FR-LAYOUT-RECONCILE-01 (2026-06-22): the
   prior `.ll-cpt-single .ll-section--header > .ll-container` selector
   was retired with the FR post_content surgery branch in
   template-parts/cpt-single.php; FR singles now render the dark
   `.ll-section--inverse` band via section-header.php like every other
   CPT single. */
.ll-cpt-single .ll-section--inverse > .ll-container,
.ll-cpt-archive .ll-section--header > .ll-container,
.ll-cpt-archive .ll-section--header > .ll-container--wide {
	text-align: center;
}

/* T-DESIGN-FAMILY-BODY-TYPE-01: family body typography. Four CSS-only
   treatments scoped to family-page body sections (about, why-leverlaw,
   bankruptcy-process, plus the 21 descendants under /why-leverlaw/,
   /bankruptcy-process/, and /bankruptcy-topics/). The scope key is the
   .ll-section--header marker that exists ONLY on family parent patterns
   and on descendant pages wrapped by scripts/apply-tree-pages-styling.php
   (verified: only 3 patterns + 21 DB-wrapped pages carry it). The general
   sibling combinator targets every body .ll-section that follows the
   header band; :not(.ll-section--inverse) excludes the shared cta-band;
   the > .ll-container--wide direct-child step lands inside the body
   reading column. Result: rules do not bleed into blog singles (no
   .ll-section--header), CPT singles (no .ll-section--header), home
   (no .ll-section--header), the nav (no .ll-section), or the cta-band
   (.ll-section--inverse + .ll-container, no --wide). For parent patterns,
   wp:paragraph/wp:heading elements carry explicit attribute classes
   (has-ink-500-color, has-lg-font-size, has-text-align-center, etc.) that
   win the cascade, so these rules are largely benign on parents; the
   visible lift lands on descendants whose body renders as raw legacy
   prose inside wp:html with no per-element classes.
   AA: ink-700 (#34394A) on surface-0 (#FFFFFF) ~12:1; brand-gold-strong
   (#A98822) on surface-0 ~4.5:1 (used only as decorative rule + list
   marker fill, not text). */

/* Treatment 1: Lead paragraph. The first body paragraph after the family
   header band reads larger and lighter as a visual entry point. The
   :first-of-type:not(.ll-eyebrow) guard means parent patterns whose first
   body <p> is the centered eyebrow are skipped (no match), while
   descendants whose body opens with a raw legacy <p> get the lead style. */
.ll-section--header + .ll-section:not(.ll-section--inverse) .ll-container--wide > p:first-of-type:not(.ll-eyebrow) {
	font-size: var(--text-lg);
	color: var(--color-ink-700);
	line-height: var(--leading-relaxed);
	margin-block-end: var(--space-5);
}

/* Treatment 2: Accented H2 subheads. A 48x2 gold rule + tightened
   padding/margin so body H2s read as distinct sections.
   T-DESIGN-FAMILY-BODY-TYPE-FIX-01: descendant combinator (no `>`) so
   the rule fires on H2s wrapped one or more levels deep by legacy
   markup. Verified against 21 descendants: 6 pages (Tree B 47434,
   47441; Tree C 47433, 47427, 47436, 47431) carry their body H2 inside
   a legacy <div> wrapper (a stripped ScorpionCMS sideCTAHeaderv1) and
   are NOOP under the prior `>` selector.
   T-DESIGN-SECTION-HEADER-CENTER-01 (2026-06-21): the prior
   :not(.has-text-align-center) gate skipped centered H2s; now that every
   parent-pattern body H2 carries has-text-align-center, the gate is
   dropped so the gold rule renders under BOTH centered (parent) and
   left-aligned (descendant legacy) H2s. The centered ::before variant
   below adds margin-inline:auto so the 48x2 marker centers under the
   heading text; the default ::before above keeps margin-inline at 0 so
   the descendant left-aligned rule sits at the block's inline start. */
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide h2 {
	padding-top: var(--space-4);
	margin-top: var(--space-1);
}
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	background: var(--color-brand-gold-strong);
	margin-bottom: var(--space-3);
}
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide h2.has-text-align-center::before {
	margin-inline: auto;
}

/* Treatment 3: Styled lists. Replace browser bullets with gold diamond
   markers and tighten the per-item rhythm. Parent patterns do not use
   wp:list anywhere, so this lands exclusively on descendant legacy <ul>
   markup. */
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide ul:not(.wp-block-post-template) {
	list-style: none;
	padding-left: 0;
	margin-block: 0 var(--space-5);
}
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide ul:not(.wp-block-post-template) > li {
	position: relative;
	padding-left: var(--space-5);
	margin-block-end: var(--space-3);
	line-height: var(--leading-relaxed);
}
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide ul:not(.wp-block-post-template) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 7px;
	height: 7px;
	background: var(--color-brand-gold-strong);
	transform: rotate(45deg);
}

/* Treatment 4: Spacing rhythm. Loosen the legacy prose rhythm so the
   descendant body reads less dense. wp:paragraph blocks on parents are
   covered by theme.json blockGap (--wp--preset--spacing--5 = same as
   --space-5), so this maintains the parent visual cadence while bringing
   the descendant raw-HTML <p> in line. */
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide > p {
	line-height: var(--leading-relaxed);
	margin-block: 0 var(--space-5);
}

/* T-DESIGN-FAMILY-CSS-POLISH-01 / Treatment 5: Gold body-link accent.
   In-body anchors inside the family ARTICLE BODY (paragraphs, list items,
   blockquotes) render in --color-brand-gold-deep (#7E5F15) with an
   accessibility underline so links read as clearly interactive on white.
   Scope chain (same family-body key as Treatments 1-4) isolates this from:
     - nav         (no .ll-section)
     - footer      (outside <main>, not a sibling of .ll-section--header)
     - cta-band    (.ll-section--inverse excluded)
     - blog single (no .ll-section--header)
     - CPT single  (no .ll-section--header)
     - home        (no .ll-section--header)
   The :is(p, li, blockquote) container guard further excludes links inside
   headings, eyebrows, list markers (markers are ::before pseudo-elements,
   not real <a>), figure captions, and any GenerateBlocks utility wrapper
   that is not flowing prose. The :not(.wp-block-button__link):not(.ll-btn)
   :not(.ll-btn--primary) guard defends against legacy descendants that
   render an inline WP button inside a <p>: those keep their gold-outline /
   gold-fill button treatment from the Buttons block below.
   AA: #7E5F15 on #FFFFFF measures 5.94:1 (computed against WCAG 2.x sRGB
   relative-luminance formula; passes AA normal-text 4.5:1 with margin).
   --color-brand-gold-strong (#A98822) at ~4.5:1 is reserved for the
   decorative H2 rule + diamond marker per DEC-LAYOUT-SYSTEM-01;
   --color-brand-gold (#E1B243) at ~2.4:1 fails AA for text and stays
   reserved for buttons / the dark band per the same decision.
   The underline uses text-underline-offset + text-decoration-thickness
   so the rule sits clear of descender baseline (Lato body) without
   reading as a heavy CSS underline. Hover/focus deepens to ink-1000 so
   the change is visually obvious and pushes contrast to ~17:1. */
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide :is(p, li, blockquote) a:not(.wp-block-button__link):not(.ll-btn):not(.ll-btn--primary) {
	color: var(--color-brand-gold-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--motion-fast);
}
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide :is(p, li, blockquote) a:not(.wp-block-button__link):not(.ll-btn):not(.ll-btn--primary):hover,
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide :is(p, li, blockquote) a:not(.wp-block-button__link):not(.ll-btn):not(.ll-btn--primary):focus-visible {
	color: var(--color-ink-1000);
	text-decoration-thickness: 2px;
}

/* T-POLISH-FAMILY-BAND-GAP-01: band-to-body gap. Measured (Chrome 149,
   1440x900, 2026-06-11): the section-to-section rhythm everywhere on family
   pages is the .ll-section padding sum on both sides of each boundary
   (64+64 = 128px as measured; T-POLISH-VERTICAL-RHYTHM-COMPACT-01 later
   compacted .ll-section to --space-7, so the sum is now 48+48 = 96px; the
   overrides below are padding-independent and compose unchanged), but the
   band-to-body boundary exceeded it on two classes of page:
   (1) Pages whose body opens with an H2: Treatment 2 above adds
       margin-top --space-7 (48px) to body H2s for inter-section rhythm, but
       at the very start of a body section that margin stacks on top of the
       128px boundary (176px on /bankruptcy-process/initial-consultation/,
       200px on /site-map/). The :first-child overrides below zero ONLY the
       body-opening H2 margin (direct child, legacy-div-wrapped child per the
       T-DESIGN-FAMILY-CSS-POLISH-01 audit, and sitemap column tops); H2s in
       mid-prose keep the Treatment 2 rhythm. Specificity: each selector adds
       :first-child to the Treatment 2 chain (or exceeds it), and the block
       sits later in the file, so the override wins without !important.
   (2) /site-map/ only: the editor-inserted page copy carries stray empty
       <p> elements between the section groups; each is 0px tall but takes
       the 24px theme blockGap margin, adding a 24px white slit between the
       band and the body (and before the CTA band). p:empty is hidden inside
       family surfaces only (gated on the band marker); no other page renders
       loose empty paragraphs at this level. Content-level cleanup (deleting
       the empty paragraphs in the editor) would supersede this guard. */
.ll-section--header ~ p:empty {
	display: none;
}
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide > h2:first-child,
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-container--wide > div:first-child > h2:first-child,
.ll-section--header ~ .ll-section:not(.ll-section--inverse) .ll-sitemap-grid .wp-block-column > h2:first-child {
	margin-top: 0;
}

/* T-POLISH-FAMILY-BAND-GAP-01: even sitemap column starts. "The bankruptcy
   process" wraps to two lines at 2xl/Cinzel in a one-third column (h2 box
   123.8px vs 76.9px one-line, so column 2's list started 46.9px lower).
   Reserve the two-line heading box on every column-top H2 so the three
   lists start at the same y. calc: 2 line boxes (lh) + Treatment 2's
   padding-top (--space-4) + 2px gold bar + bar margin-bottom (--space-3),
   border-box. Gated to the side-by-side range: core wp-block-columns
   stacks columns below 782px, where a reserved box would just punch a hole
   under each heading. If a narrow side-by-side viewport wraps a heading to
   three lines the guarantee degrades gracefully (min-height, not height). */
@media (min-width: 48.875em) {
	.ll-sitemap-grid .wp-block-column > h2:first-child {
		min-height: calc(2lh + var(--space-4) + 2px + var(--space-3));
	}
}

/* ---- Eyebrow ---- */
.ll-eyebrow {
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: var(--tracking-eyebrow);
	font-weight: 400;
	color: var(--color-brand-gold-strong);
	margin: 0 0 var(--space-2) 0;
}

/* ============================================================================
   Buttons
   ============================================================================ */

/* Two variants, one mechanism. Base CSS rules apply to both .ll-btn class
   surfaces and to wp:button blocks marked with the Gutenberg block-style
   classes is-style-leverlaw (secondary outline) and
   is-style-leverlaw-primary (primary fill). */
.ll-btn,
.ll-btn--primary,
.wp-block-button.is-style-leverlaw .wp-block-button__link,
.wp-block-button.is-style-leverlaw-primary .wp-block-button__link {
	display: inline-block;
	padding: 10px 22px;
	border: 2px solid var(--color-brand-gold-strong);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.02em;
	cursor: pointer;
	border-radius: 0;
	transition: border-color var(--motion-fast),
	            background-color var(--motion-fast),
	            color var(--motion-fast);
}

/* Secondary - gold-outline on transparent */
.ll-btn,
.wp-block-button.is-style-leverlaw .wp-block-button__link {
	background: transparent;
	color: var(--color-ink-700);
}

/* Primary - gold-fill */
.ll-btn--primary,
.wp-block-button.is-style-leverlaw-primary .wp-block-button__link {
	background: var(--color-brand-gold);
	color: var(--color-ink-1000);
}

.ll-btn:hover,
.wp-block-button.is-style-leverlaw .wp-block-button__link:hover {
	border-color: var(--color-brand-gold-deep);
	color: var(--color-ink-900);
}

.ll-btn--primary:hover,
.wp-block-button.is-style-leverlaw-primary .wp-block-button__link:hover {
	background: var(--color-brand-gold-strong);
	border-color: var(--color-brand-gold-deep);
}

.ll-btn:focus-visible,
.ll-btn--primary:focus-visible,
.wp-block-button.is-style-leverlaw .wp-block-button__link:focus-visible,
.wp-block-button.is-style-leverlaw-primary .wp-block-button__link:focus-visible {
	outline: 0;
	box-shadow: var(--shadow-focus-gold);
}

/* Dark-section visibility: secondary outline on dark bg needs light text */
.ll-section--inverse .ll-btn,
.ll-section--inverse .wp-block-button.is-style-leverlaw .wp-block-button__link {
	color: var(--color-on-dark-strong);
}

.ll-btn:disabled,
.ll-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

.ll-btn[aria-busy="true"] { pointer-events: none; }

/* ============================================================================
   Cards (testimonials, attorney, video, location, generic content)
   ============================================================================ */

/* T-CLEANUP-CSS-CARD-SHELL-01: shared shell + paired hover for the six cards
   that carry the same surface-0 + ink-100 hairline + no-radius + motion-base
   border-color transition (.ll-card, .ll-archive-card, .ll-step, .ll-blog-card,
   .ll-topic-card, .ll-related-posts__card). Each card keeps its own padding,
   overflow, height, display, gap below; per-card :hover and :focus-within
   state is preserved verbatim (cards without :focus-within today do not gain
   it; .ll-related-posts__card has no :hover today and is excluded from the
   paired hover). Placed at top so the cascade still flows into per-card rules
   below. */
.ll-card,
.ll-archive-card,
.ll-step,
.ll-blog-card,
.ll-topic-card,
.ll-related-posts__card {
	background: var(--color-surface-0);
	border: 1px solid var(--color-ink-100);
	border-radius: 0;
	transition: border-color var(--motion-base);
}
.ll-card:hover,
.ll-card:focus-within,
.ll-archive-card:hover,
.ll-step:hover,
.ll-blog-card:hover,
.ll-topic-card:hover,
.ll-topic-card:focus-within {
	border-color: var(--color-brand-gold);
}

.ll-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5);
}

.ll-card--testimonial {
	border-left: var(--border-brand);
	border-radius: 0;
}
.ll-card--testimonial blockquote {
	margin: 0;
	font: 400 var(--text-lg)/var(--leading-relaxed) var(--font-sans);
	color: var(--color-ink-700);
}
.ll-card--testimonial cite {
	font: 600 var(--text-sm)/1 var(--font-sans);
	color: var(--color-ink-400);
	font-style: normal;
}

/* ============================================================================
   Forms
   ============================================================================ */

.ll-form {
	display: grid;
	gap: var(--space-4);
}
.ll-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.ll-field__label {
	font: 600 var(--text-sm)/1.4 var(--font-sans);
	color: var(--color-ink-700);
}
.ll-field__hint {
	font: 400 var(--text-xs)/1.4 var(--font-sans);
	color: var(--color-ink-400);
}
.ll-field__control,
.ll-form input[type="text"],
.ll-form input[type="email"],
.ll-form input[type="tel"],
.ll-form input[type="url"],
.ll-form input[type="number"],
.ll-form select,
.ll-form textarea {
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	font: 400 var(--text-md)/1.4 var(--font-sans); /* 16px prevents iOS zoom */
	color: var(--color-ink-900);
	background: var(--color-surface-0);
	border: 1px solid var(--color-ink-200);
	border-radius: var(--radius-input);
	transition: border-color var(--motion-fast);
}
.ll-form textarea {
	min-height: 7rem;
	resize: vertical;
}
.ll-field__control:focus,
.ll-form :is(input, select, textarea):focus,
.ll-form :is(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--color-brand-gold);
	box-shadow: var(--shadow-focus-gold);
}
.ll-field--error .ll-field__control {
	border-color: var(--color-danger);
}
.ll-field__error {
	font: 500 var(--text-xs)/1.4 var(--font-sans);
	color: var(--color-danger);
}

/* ============================================================================
   Archive cards (PHP fallbacks)
   ============================================================================ */

.ll-archive-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: 0;
	overflow: hidden;
}
.ll-archive-card__media { display: block; }
.ll-archive-card__media img { width: 100%; height: auto; display: block; }
.ll-archive-card__body { padding: var(--space-5); }
.ll-archive-card__title {
	margin: 0 0 var(--space-3);
	font: 700 var(--text-xl)/1.3 var(--font-sans);
}
.ll-archive-card__title a { color: var(--color-ink-900); text-decoration: none; }
.ll-archive-card__title a:hover { color: var(--color-brand-gold-strong); }
.ll-archive-card__excerpt { margin: 0 0 var(--space-4); color: var(--color-ink-500); }
.ll-archive-card__more {
	display: inline-flex;
	gap: var(--space-1);
	font: 600 var(--text-sm)/1 var(--font-sans);
	color: var(--color-brand-gold-strong);
	text-decoration: none;
}
.ll-archive-card__more:hover { text-decoration: underline; }

/* ============================================================================
   Awards strip
   ============================================================================ */

.ll-awards-row .ll-award {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	transition: opacity var(--motion-base);
	opacity: 0.85;
}
.ll-awards-row .ll-award:hover,
.ll-awards-row .ll-award:focus-visible {
	opacity: 1;
}
.ll-awards-row .ll-award img {
	max-height: 80px;
	width: auto;
	object-fit: contain;
}

/* Mobile: 4 badges stack to a 2x2 grid below 768px; 44px min touch target. */
@media (max-width: 48em) {
	.ll-awards-row .ll-award {
		flex: 0 1 40%;
		min-width: 44px;
		min-height: 44px;
	}
}

/* Home: expanded myth Q&A list (T0006). Stacked, scannable blocks with a
   subtle divider so each question/answer reads as a distinct unit.
   T-POLISH-HOME-LAYOUT-02: re-narrowed from LAYOUT-02's 1280px marketing
   measure back to 720px (== --container-narrow) so the Q&A reads as a body,
   not a marketing surface (WCAG SC 1.4.8 line-length). The section bg stays
   full-bleed (pattern align:full) and the eyebrow/heading sit in their own
   group, so only the Q&A column narrows. */
.ll-myths-list .ll-myth-expanded {
	max-width: 720px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--6) 0;
	border-bottom: 1px solid var(--wp--preset--color--ink-100);
}
.ll-myths-list .ll-myth-expanded:last-child {
	border-bottom: 0;
}

/* T-HOTFIX-LAYOUT-04: center-align myth Q&A text per visual review.
   Container width is 720px per T-POLISH-HOME-LAYOUT-02 (see rule above). */
.ll-myth-expanded {
	text-align: center;
}

/* T-HOTFIX-LAYOUT-04: force custom CPT mains to fill GP's flex content surface. */
.site-main.ll-cpt-single,
.site-main.ll-cpt-archive {
	width: 100%;
}

/* ============================================================================
   Blog teaser cards
   ============================================================================ */

.ll-blog-card {
	height: 100%;
	padding: 0;
	overflow: hidden;
}
.ll-blog-card .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
}
.ll-blog-card .wp-block-post-featured-image img {
	border-radius: 0;
	width: 100%;
	height: auto;
}
.ll-blog-card .wp-block-post-date,
.ll-blog-card .wp-block-post-title,
.ll-blog-card .wp-block-post-excerpt {
	padding-inline: var(--space-5);
}
.ll-blog-card .wp-block-post-date { padding-top: var(--space-4); }
.ll-blog-card .wp-block-post-excerpt { padding-bottom: var(--space-5); }

/* ============================================================================
   FAQ accordion (core/details)
   ============================================================================ */

.ll-faq .wp-block-details {
	background: var(--color-surface-0);
	border: 1px solid var(--color-ink-100);
	border-radius: 0;
	padding: 0;
	margin-block-end: var(--space-3);
	transition: border-color var(--motion-base);
}
.ll-faq .wp-block-details[open] {
	border-color: var(--color-ink-200);
}
.ll-faq .wp-block-details summary {
	padding: var(--space-4) var(--space-5);
	cursor: pointer;
	font: 600 var(--text-lg)/1.4 var(--font-sans);
	color: var(--color-ink-900);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
}
.ll-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.ll-faq .wp-block-details summary::after {
	content: "+";
	font: 400 1.5rem/1 var(--font-display);
	color: var(--color-brand-gold-strong);
	transition: transform var(--motion-base);
	flex-shrink: 0;
}
.ll-faq .wp-block-details[open] summary::after {
	content: "−";
}
.ll-faq .wp-block-details > p,
.ll-faq .wp-block-details > .wp-block-paragraph,
.ll-faq .wp-block-details > div > p {
	padding: 0 var(--space-5) var(--space-5);
	margin: 0;
	color: var(--color-ink-500);
	line-height: var(--leading-relaxed);
}

/* ============================================================================
   Process-step row - 5-up at lg, 2-up at md, 1-up at sm (with numbers)
   ============================================================================ */

.ll-process-grid.wp-block-columns {
	flex-wrap: wrap;
	gap: var(--space-5);
}
.ll-process-grid > .wp-block-column {
	flex-basis: calc(20% - (var(--space-5) * 4 / 5)) !important;
	flex-grow: 0;
	min-width: 0;
}
@media (max-width: 64em) {
	.ll-process-grid > .wp-block-column {
		flex-basis: calc(50% - (var(--space-5) / 2)) !important;
	}
}
@media (max-width: 37.5em) {
	.ll-process-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}
.ll-step {
	padding: var(--space-5);
	height: 100%;
}
.ll-step__num {
	font: 700 var(--text-xl)/1 var(--font-display);
	color: var(--color-brand-gold-strong);
	margin: 0 0 var(--space-3);
	letter-spacing: var(--tracking-wide);
}

/* ============================================================================
   Value-statements row - 5-up at lg, 2-up at md, 1-up at sm
   ============================================================================ */

.ll-value-grid.wp-block-columns {
	flex-wrap: wrap;
	gap: var(--space-6);
}
.ll-value-grid > .wp-block-column {
	flex-basis: calc(20% - (var(--space-6) * 4 / 5)) !important;
	flex-grow: 0;
	min-width: 0;
}
@media (max-width: 64em) {
	.ll-value-grid > .wp-block-column {
		flex-basis: calc(50% - (var(--space-6) / 2)) !important;
	}
}
@media (max-width: 37.5em) {
	.ll-value-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}
.ll-value-grid img.ll-icon {
	width: 40px;
	height: 40px;
}

/* ============================================================================
   Icons (Lucide SVGs rendered via [leverlaw_icon])
   ============================================================================ */

.ll-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}
.ll-icon--inline { width: 1em; height: 1em; }

/* ============================================================================
   Reveal-on-scroll
   ============================================================================ */

[data-reveal] {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
	transition: opacity var(--reveal-duration), transform var(--reveal-duration);
	will-change: opacity, transform;
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}
[data-reveal-delay="1"] { transition-delay: 80ms;  }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }

/* ============================================================================
   Universal focus-visible (links, buttons, summary, etc.)
   ============================================================================ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-sm);
}

/* T-A11Y-REMEDIATE-01 (A8/K087, SC 2.4.7 + 1.4.11): the universal rule above
   uses --shadow-focus (rgba info-blue at 0.5 alpha), which composites to
   roughly 1.94:1 against a white background, below the WCAG 1.4.11 non-text
   3:1 floor for focus indicators. On body-content links (p, li, blockquote
   children that are not buttons), override with an opaque brand-gold-strong
   ring (#A98822 = 4.55:1 on white, passes 1.4.11) and add a thickened
   underline as a non-color secondary signal per SC 1.4.1. The more-specific
   family-band rule above (.ll-section--header ~ .ll-section ... :focus-visible)
   still wins where it applies; this rule covers everything else (CPT singles,
   home, archives, blog single, /ko/ tree, etc.). */
:is(p, li, blockquote) a:not(.wp-block-button__link):not(.ll-btn):not(.ll-btn--primary):focus-visible {
	box-shadow: 0 0 0 3px var(--color-brand-gold-strong);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

/* ============================================================================
   Body baseline
   ============================================================================ */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-ink-500);
	background: var(--color-surface-0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Tighten heading rhythm site-wide (theme.json sets element-level base; this
   layers on the spacing-after-heading expectation). */
h1, h2, h3, h4, h5, h6 {
	margin-block: 0 var(--space-3);
}
h1 + p, h2 + p, h3 + p { margin-block-start: var(--space-3); }

p, ul, ol { margin-block: 0 var(--space-4); }
p:last-child, ul:last-child, ol:last-child { margin-block-end: 0; }

img { max-width: 100%; height: auto; }
hr {
	border: 0;
	border-top: var(--border-divider);
	margin-block: var(--space-7);
}

/* ============================================================================
   Header - dark navy band
   ============================================================================ */

body .site-header {
	background: var(--color-ink-1000);
}
body .site-header :is(.main-navigation, .menu-toggle, .site-logo) a {
	color: var(--color-on-dark-strong);
}
body .site-header .main-navigation a:hover,
body .site-header .main-navigation a:focus-visible {
	color: var(--color-brand-gold);
}
body .site-header .site-logo img {
	max-height: 80px;
	height: auto;
	width: auto;
}

/* ============================================================================
   Mobile slideout drawer (W3.10d)
   ----------------------------------------------------------------------------
   GP core main.css:564 applies `.main-navigation .main-nav > ul { display:flex;
   flex-wrap:wrap; align-items:center }` to ALL nav, including the off-canvas
   slideout (it shares the .main-navigation / .main-nav classes). GP's vertical
   override exists only for .sidebar (main.css:602); there is no slideout
   equivalent and this build's Customizer CSS does not emit one, so the drawer
   rendered as a horizontal wrapping row (W3.10d symptom). Restore the vertical,
   left-aligned, indented column GP's responsive nav would normally provide.
   Scoped to #generate-slideout-menu so the Theme Builder block header (a
   separate wp-block-navigation subtree) is never affected.
   ============================================================================ */

#generate-slideout-menu .main-nav > ul {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}
#generate-slideout-menu .main-nav a {
	text-align: left;
	justify-content: flex-start;
}
#generate-slideout-menu .sub-menu {
	display: none;
	position: static;
	width: 100%;
}
#generate-slideout-menu .menu-item-has-children.sfHover > .sub-menu,
#generate-slideout-menu .menu-item-has-children.toggled-on > .sub-menu,
#generate-slideout-menu .sub-menu.toggled-on {
	display: block;
}
#generate-slideout-menu .sub-menu a {
	padding-left: 32px;
}
#generate-slideout-menu .dropdown-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	cursor: pointer;
	color: var(--color-on-dark-body);
}
#generate-slideout-menu .dropdown-menu-toggle svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	transition: transform var(--motion-fast);
}
#generate-slideout-menu .sfHover > a > .dropdown-menu-toggle svg,
#generate-slideout-menu .toggled-on > a > .dropdown-menu-toggle svg {
	transform: rotate(180deg);
}

/* ============================================================================
   Mobile slideout drawer block navigation alignment (T-HOTFIX-NAV-04)
   ----------------------------------------------------------------------------
   The Theme Builder header renders a wp:navigation overlay alongside the GP
   slideout. Its top-tier desktop alignment is right-justified in header.json,
   but the drawer needs a full-width, left-aligned column with indented sub-items.
   ============================================================================ */

:is(#generate-slideout-menu, .ll-site-header .wp-block-navigation__responsive-container.is-menu-open) :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container) {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
}
:is(#generate-slideout-menu, .ll-site-header .wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation-item {
	justify-content: flex-start;
	width: 100%;
	text-align: left;
}
:is(#generate-slideout-menu, .ll-site-header .wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 12px 24px;
	text-align: left;
}
:is(#generate-slideout-menu, .ll-site-header .wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	padding: 0;
	text-align: left;
}
:is(#generate-slideout-menu, .ll-site-header .wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 40px;
}

/* ============================================================================
   Footer - disclaimer block
   ============================================================================ */

.ll-disclaimer {
	clear: both;
	font: 400 var(--text-2xs)/var(--leading-relaxed) var(--font-sans);
	color: var(--color-on-dark-muted);
	margin-inline: 0;
}
.ll-dba-note {
	font: 400 var(--text-2xs)/1.4 var(--font-sans);
	color: var(--color-on-dark-muted);
	margin-block-start: var(--space-3);
	margin-inline: 0;
}

/* ============================================================================
   Clio Grow form (plugin override)
   ============================================================================ */

.ll-clio-consultation {
	width: 100%;
}

.ll-clio-consultation__fallback {
	margin-block-start: var(--space-4);
}

#lf_form_container {
	box-sizing: border-box;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

#lf_form_container h3 {
	margin: 0 0 var(--space-4);
	font: 700 var(--text-2xl)/1.3 var(--font-sans);
	color: var(--color-ink-900);
}

#lf_form_container label.description {
	font: 600 var(--text-sm)/1.4 var(--font-sans);
	color: var(--color-ink-700);
}

#lf_form_container input[type="text"],
#lf_form_container input[type="email"],
#lf_form_container textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	font: 400 var(--text-md)/1.4 var(--font-sans);
	color: var(--color-ink-900);
	background: var(--color-surface-0);
	border: 1px solid var(--color-ink-200);
	border-radius: var(--radius-input);
	transition: border-color var(--motion-fast),
	            box-shadow var(--motion-fast);
}

#lf_form_container textarea {
	min-height: 7rem;
	resize: vertical;
}

#lf_form_container input[type="text"]:focus,
#lf_form_container input[type="email"]:focus,
#lf_form_container textarea:focus,
#lf_form_container input[type="text"]:focus-visible,
#lf_form_container input[type="email"]:focus-visible,
#lf_form_container textarea:focus-visible {
	outline: none;
	border-color: var(--color-brand-gold);
	box-shadow: var(--shadow-focus-gold);
}

#lf_form_container input[type="submit"].button_text {
	display: inline-block;
	padding: 10px 22px;
	border: 2px solid var(--color-brand-gold-strong);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: border-color var(--motion-fast),
	            background-color var(--motion-fast),
	            color var(--motion-fast);
}

#lf_form_container input[type="submit"].button_text:hover {
	background-color: var(--color-brand-gold-strong) !important;
	border-color: var(--color-brand-gold-deep);
}

#lf_form_container input[type="submit"].button_text:focus-visible {
	outline: 0;
	box-shadow: var(--shadow-focus-gold);
}

/* ============================================================================
   Home: dynamic topics grid (T0034 / W2.4 full).
   bankruptcy_topic core/query Loop replacing the legacy hardcoded
   ll-services-grid. Card visuals mirror .ll-card; the grid mirrors the
   .ll-services-grid 4 / 2 / 1 responsive breakpoints so the W2.4 full
   conversion is visually equivalent to the hardcoded grid it replaces.
   ============================================================================ */
.ll-topics-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 64em) {
	.ll-topics-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 37.5em) {
	.ll-topics-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}
.ll-topics-grid .wp-block-post-template > li {
	margin: 0;
}
.ll-topic-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	height: 100%;
	padding: var(--space-5);
}
.ll-topic-card .wp-block-post-title {
	margin: 0;
}
.ll-topic-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.ll-topic-card .wp-block-post-title a:hover,
.ll-topic-card .wp-block-post-title a:focus-visible {
	color: var(--color-brand-gold-strong);
}
.ll-topic-answer {
	margin: 0;
	font: 400 var(--text-sm)/var(--leading-relaxed) var(--font-sans);
	color: var(--color-ink-400);
}

/* ============================================================================
   Site footer - link contrast (T0039 B3: WCAG AA on the navy-deep band)
   Footer list / phone / make-a-payment links carried no on-dark color and
   inherited the global link color (low contrast on #0E121A). on-dark-body
   #D8DEEA on #0E121A is ~12:1 (passes AA + AAA); gold on hover/focus matches
   the site-wide link-hover convention.
   ============================================================================ */

.ll-site-footer a {
	color: var(--color-on-dark-body);
}
.ll-site-footer a:hover,
.ll-site-footer a:focus-visible {
	color: var(--color-brand-gold);
}

/* ============================================================================
   Site footer - review badge + social rows (T-INTEGRATIONS-FOOTER-03)
   Injected into the footer Block Element via the [leverlaw_footer_badges] and
   [leverlaw_footer_social] shortcodes (gp-hooks.php). Star glyphs are a
   decorative trust motif; the accessible name lives on each link's aria-label.
   ============================================================================ */

.ll-footer-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	max-width: 36rem;
	margin-inline: auto;
	margin-block-end: var(--space-5);
}
.ll-footer-badge {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
}
.ll-footer-badge__stars {
	display: block;
	width: 100px;
	height: 20px;
	color: var(--color-brand-gold);
}
.ll-footer-badge__label {
	font: 600 var(--text-xs)/1.2 var(--font-sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-on-dark-body);
}
.ll-footer-badge:hover .ll-footer-badge__label,
.ll-footer-badge:focus-visible .ll-footer-badge__label {
	color: var(--color-brand-gold);
}

.ll-footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 36rem;
	margin-inline: auto;
	margin-block-end: var(--space-5);
}
.ll-site-footer .ll-footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--color-brand-gold);
	text-decoration: none;
	transition: color var(--motion-fast), background-color var(--motion-fast);
}
.ll-site-footer .ll-footer-social__link:hover,
.ll-site-footer .ll-footer-social__link:focus-visible {
	color: var(--color-on-dark-strong);
	background-color: var(--color-ink-900, #1B2230);
}
.ll-footer-social__link .ll-slideout-social__svg {
	width: 22px;
	height: 22px;
}

@media (max-width: 768px) {
	.ll-footer-badges,
	.ll-footer-social {
		float: none;
	}

	.ll-footer-badges {
		margin-block-end: var(--space-4);
	}

	.ll-footer-social {
		margin-block-end: var(--space-5);
	}
}

/* ============================================================================
   T-POLISH-FOOTER-ACCORDION-01: mobile-only footer link-group accordion.
   Companion to assets/js/footer-accordion.js. Desktop is unchanged: the
   toggle reduces to inline text matching the original heading. Mobile turns
   each toggle into a full-width tap target with a chevron + bottom border;
   the list hides only when .is-collapsed is present, so no-JS users see
   every list. Contact column has no <ul> sibling and is left alone.
   ============================================================================ */
.ll-site-footer .ll-footer-acc__toggle {
	display: inline;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: default;
	width: auto;
}
.ll-site-footer .ll-footer-acc__toggle:focus-visible {
	outline: 2px solid var(--color-brand-gold);
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.ll-site-footer .ll-footer-acc.is-mobile h2.wp-block-heading {
		margin-block: 0;
		border-block-end: 1px solid var(--color-ink-700, rgba(255, 255, 255, 0.12));
	}
	.ll-site-footer .ll-footer-acc.is-mobile .ll-footer-acc__toggle {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding-block: var(--space-3);
		cursor: pointer;
	}
	.ll-site-footer .ll-footer-acc.is-mobile .ll-footer-acc__toggle::after {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--motion-fast, 0.2s ease);
	}
	.ll-site-footer .ll-footer-acc.is-mobile:not(.is-collapsed) .ll-footer-acc__toggle::after {
		transform: rotate(-135deg);
	}
	.ll-site-footer .ll-footer-acc.is-mobile.is-collapsed > ul {
		display: none;
	}
}

/* T-POLISH-HOME-FOOTER-WHITE-RECTANGLE-01: the dark CTA band is the last child
   inside #content (.site-content), while the dark footer Block Element renders
   as a sibling AFTER .site-content closes. GP's content padding-bottom on
   .site-content therefore showed the white page background as a strip between
   the two dark bands. hero-carousel.css already zeroes the matching padding-top
   on body.home; this zeroes the bottom so the CTA band meets the footer flush.
   Scoped to body.home so article pages keep their normal content-to-footer gap. */
body.home .site-content {
	padding-bottom: 0;
}

/* ============================================================================
   T-HOTFIX-NAV-01: dropdown panel + slideout drawer color scoping
   ----------------------------------------------------------------------------
   Defends against the wp_navigation post #47902 JSON-vs-DB sync gap where the
   DB-stored block may lack the overlayBackgroundColor + overlayTextColor
   attributes the theme-builder-exports/header.json declares. Without this CSS,
   the core Gutenberg submenu container renders white background + white text
   (the parent nav's white text color cascades down). Mobile drawer was missing
   explicit panel + link colors entirely.
   ============================================================================ */

/* Desktop block-nav dropdown panel. */
.wp-block-navigation .has-child {
    position: relative;
}
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container,
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
    left: 0;
    right: auto;
}
.wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: var(--color-ink-1000);
    border: 1px solid var(--color-ink-700);
    justify-content: flex-start;
    min-width: 14rem;
    width: max-content;
    padding-block: 0.25rem;
    text-align: left;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    font-size: var(--text-sm);
}
.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--color-on-dark-strong);
}
.wp-block-navigation .wp-block-navigation__submenu-container a:hover,
.wp-block-navigation .wp-block-navigation__submenu-container a:focus {
    color: var(--color-brand-gold);
    background-color: var(--color-ink-900, #1B2230);
}

/* Mobile slideout drawer panel + link colors. */
#generate-slideout-menu {
    background-color: var(--color-ink-1000);
}
#generate-slideout-menu .main-nav a,
#generate-slideout-menu .main-nav .sub-menu a,
#generate-slideout-menu a {
    color: var(--color-on-dark-strong);
}
#generate-slideout-menu .main-nav a:hover,
#generate-slideout-menu .main-nav a:focus,
#generate-slideout-menu .sub-menu a:hover,
#generate-slideout-menu .sub-menu a:focus {
    color: var(--color-brand-gold);
    background-color: var(--color-ink-900, #1B2230);
}

/* Mobile drawer rhythm and hierarchy (T-HOTFIX-NAV-05). */
#generate-slideout-menu .main-nav > ul > li,
.ll-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    align-items: flex-start;
    border-bottom: 1px solid var(--color-ink-700);
}
:is(#generate-slideout-menu, .ll-site-header .wp-block-navigation__responsive-container.is-menu-open) :is(a, .wp-block-navigation-item__content) {
    box-sizing: border-box;
    min-height: 44px;
}
#generate-slideout-menu .main-nav a {
    display: flex;
    align-items: center;
    padding: 12px 24px;
}
:is(#generate-slideout-menu, .ll-site-header .wp-block-navigation__responsive-container.is-menu-open) :is(a, .wp-block-navigation-item__content):hover,
:is(#generate-slideout-menu, .ll-site-header .wp-block-navigation__responsive-container.is-menu-open) :is(a, .wp-block-navigation-item__content):focus-visible {
    color: var(--color-brand-gold);
    background-color: var(--color-ink-900, #1B2230);
}
#generate-slideout-menu .main-nav .sub-menu a,
:is(.ll-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container) :is(a, .wp-block-navigation-item__content) {
    font-size: 0.875em;
    color: var(--color-on-dark-body);
}
#generate-slideout-menu :is(.current-menu-item, .current_page_item) > a,
.ll-site-header .wp-block-navigation__responsive-container.is-menu-open :is(a, .wp-block-navigation-item__content)[aria-current="page"] {
    border-left: 3px solid var(--color-brand-gold);
    color: var(--color-brand-gold);
}

/* ============================================================================
   Mobile slideout legacy mirror (T-POLISH-SLIDEOUT-MIRROR-01)
   ----------------------------------------------------------------------------
   GP docs: generate-inside-slideout-navigation.md places the PHP hook output
   inside the slideout .inside-navigation wrapper. Keep every selector under
   #generate-slideout-menu so desktop navigation and the Theme Builder header
   are untouched.
   ============================================================================ */
#generate-slideout-menu .inside-navigation {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100dvh;
    position: relative;
}

/* GP Premium offside.css (Overlay style) applies
   `.slideout-navigation.do-overlay .inside-navigation { padding: 10% 10% 0 }`
   (offside.css line 260), insetting every menu row by ~10vw on each side so the
   <li> dividers float in from both edges. Zero the horizontal padding here so
   rows span the full slideout width and labels sit at the anchor's 24px
   padding-left. ID specificity (1,1,0) beats offside's class chain (0,3,0); no
   !important needed. Top padding from offside (the 0 third value) is unaffected;
   branding owns its own top padding. */
#generate-slideout-menu .inside-navigation {
    padding-left: 0;
    padding-right: 0;
}

#generate-slideout-menu .slideout-exit {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

#generate-slideout-menu .main-nav {
    order: 3;
    width: 100%;
}

#generate-slideout-menu .ll-slideout-branding {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px 24px;
    text-align: center;
    width: 100%;
}

#generate-slideout-menu .ll-slideout-branding__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#generate-slideout-menu .ll-slideout-branding__img {
    display: block;
    margin-inline: auto;
    width: auto;
    max-width: min(210px, 70vw);
    max-height: 76px;
}

#generate-slideout-menu .ll-slideout-branding__phone {
    display: block;
    max-width: 100%;
    margin-inline: auto;
    color: var(--color-on-dark-strong);
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
}

#generate-slideout-menu .ll-slideout-branding__phone:hover,
#generate-slideout-menu .ll-slideout-branding__phone:focus-visible {
    color: var(--color-brand-gold);
}

/* Parent rows: make the anchor the flex row so the label and the chevron sit
   at the two ends. Scoped to .menu-item-has-children > a so both top-level and
   nested parent items get the same right-edge chevron. */
#generate-slideout-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#generate-slideout-menu .main-nav > ul > li > a {
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 0 24px;
    font-size: 1rem;
    font-weight: 700;
}

/* GP Premium offside.css (Overlay style) injects border-left rgba(0,0,0,0.07) +
   padding:0 10px + margin:0 0 0 10px + float:left!important on the toggle. Float
   is moot because the anchor is a flex parent (float is ignored on flex items).
   margin:0 0 0 auto + padding-right:0 push the chevron to the right gutter; the
   legacy LeverLaw drawer drew a white vertical divider before the chevron
   (betheme-child/style.css:2775 border-right rgba(255,255,255,0.2)), mirrored
   here as border-left on the toggle with 12px padding-left for the cell. */
#generate-slideout-menu .dropdown-menu-toggle {
    margin: 0 0 0 auto;
    padding-left: 12px;
    padding-right: 0;
    min-height: 60px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    color: currentColor;
}

#generate-slideout-menu .dropdown-menu-toggle svg {
    display: none;
}

#generate-slideout-menu .dropdown-menu-toggle::after {
    content: ">";
    font: 700 1.125rem/1 var(--font-sans);
    color: currentColor;
    transition: transform var(--motion-fast);
}

#generate-slideout-menu .sfHover > a > .dropdown-menu-toggle::after,
#generate-slideout-menu .toggled-on > a > .dropdown-menu-toggle::after {
    transform: rotate(90deg);
}

#generate-slideout-menu .ll-slideout-social {
    order: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-block-start: auto;
    padding-top: 28px;
    padding-right: 72px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
    padding-left: 24px;
    border-top: 1px solid var(--color-ink-700);
}

#generate-slideout-menu .ll-slideout-social[hidden] {
    display: none;
}

#generate-slideout-menu .ll-slideout-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-brand-gold);
    text-decoration: none;
    transition: color var(--motion-fast), background-color var(--motion-fast);
}

#generate-slideout-menu .ll-slideout-social__link:hover,
#generate-slideout-menu .ll-slideout-social__link:focus-visible {
    color: var(--color-on-dark-strong);
    background-color: var(--color-ink-900, #1B2230);
}

#generate-slideout-menu .ll-slideout-social__svg {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

/* ============================================================================
   Mobile header icon trio (T-HOTFIX-MOBILE-01)
   ----------------------------------------------------------------------------
   GP docs: generate_inside_mobile_header.md places this markup inside
   #mobile-header; mobile-header.md documents the 768px default breakpoint and
   primary-navigation color inheritance. generate-mobile-header-logo.md confirms
   logo output is separate, so the trio only orders itself between logo and
   hamburger.
   ============================================================================ */
@media (max-width: 1024px) {
    #mobile-header.mobile-header-navigation .inside-navigation {
        display: flex;
        align-items: center;
    }
    #mobile-header.mobile-header-navigation .site-logo.mobile-header-logo,
    #mobile-header.mobile-header-navigation .navigation-branding {
        order: 10;
    }
    #mobile-header.mobile-header-navigation .ll-mobile-icons {
        order: 20;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }
    #mobile-header.mobile-header-navigation .menu-toggle {
        order: 30;
        margin-left: 0;
    }
    #mobile-header.mobile-header-navigation .ll-mobile-icons__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        color: var(--color-on-dark-strong);
        text-decoration: none;
        line-height: 1;
        transition: color var(--motion-fast);
    }
    #mobile-header.mobile-header-navigation .ll-mobile-icons__link:hover,
    #mobile-header.mobile-header-navigation .ll-mobile-icons__link:focus-visible {
        color: var(--color-brand-gold);
    }
    #mobile-header.mobile-header-navigation .ll-mobile-icons__svg {
        display: block;
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        fill: currentColor;
    }
    #mobile-header.mobile-header-navigation .menu-bar-items:has([data-gpmodal-trigger="gp-search"]) { display: none !important; }
    #mobile-header.mobile-header-navigation .menu-bar-items [data-gpmodal-trigger="gp-search"] { display: none !important; }
    #mobile-header.mobile-header-navigation .menu-bar-items {
        display: none !important;
    }
}

/* ============================================================================
   T-HOTFIX-NAV-07 (2026-05-27): when GP Premium Mobile Header is active on
   mobile widths, hide the Block Element Site Header so only the streamlined
   GP Mobile Header bar renders. GP docs: mobile-header.md breakpoint default
   768px, configurable; this CSS matches that default. Off Canvas Panel
   (Customizer: Layout > Off Canvas Panel, set to Mobile) is what triggers
   the slideout from the Mobile Header hamburger. NAV-06's slideout sub-menu
   collapse CSS at #generate-slideout-menu then applies cleanly because
   the slideout is now the sole mobile drawer.
   ============================================================================ */
@media (max-width: 1024px) {
    .ll-site-header {
        display: none !important;
    }
}

/* ============================================================================
   Mobile sticky bottom CTA (T-HOTFIX-MOBILE-02)
   ----------------------------------------------------------------------------
   GP docs: wp-footer.md confirms this markup prints just before </body>.
   sticky-navigation.md provides the mobile sticky behavior reference; this
   child-theme block uses fixed bottom positioning so it remains CSS-only.
   ============================================================================ */
.ll-mobile-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    body {
        padding-bottom: 80px;
    }
    .ll-mobile-sticky-cta {
        position: fixed;
        right: 72px;
        bottom: 0;
        left: 0;
        z-index: 999;
        display: flex;
        align-items: stretch;
        min-height: 56px;
        background: var(--color-ink-1000);
        border-top: 1px solid var(--color-ink-700);
        box-shadow: 0 -8px 24px rgba(14, 18, 26, 0.18);
    }
    .ll-mobile-sticky-cta__link {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 56px;
        gap: 8px;
        padding-block: 16px;
        padding-inline: 12px;
        color: var(--color-on-dark-100, var(--color-on-dark-strong));
        font: 700 var(--text-sm)/1.2 var(--font-sans);
        text-align: center;
        text-decoration: none;
        transition: color var(--motion-fast), background-color var(--motion-fast);
    }
    .ll-mobile-sticky-cta__link + .ll-mobile-sticky-cta__link {
        border-left: 1px solid var(--color-ink-700);
    }
    .ll-mobile-sticky-cta__link:hover,
    .ll-mobile-sticky-cta__link:focus-visible {
        color: var(--color-brand-gold);
        background-color: var(--color-ink-900, #1B2230);
    }
    .ll-mobile-sticky-cta__link:focus-visible {
        outline: 2px solid var(--color-brand-gold);
        outline-offset: -4px;
    }
    .ll-mobile-sticky-cta__icon {
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        fill: currentColor;
    }
}

@media (min-width: 769px) {
    .ll-mobile-sticky-cta {
        display: none;
    }
}

/* ============================================================================
   Floating CTA island (T-FEATURE-FLOATING-CTA-ISLAND-01)
   ----------------------------------------------------------------------------
   Site-wide fixed bottom CTA island. PHP render lives in inc/gp-hooks.php as
   leverlaw_floating_cta_render() (wp_footer hook), suppressed on /contact/ +
   /ko/free-consultation/. Locked styling per the 2026-06-27 interactive
   tuner: centered, squared (radius 0), ~6px bottom offset, button min-width
   180px. Desktop = centered auto-width island; mobile (<=600px) = full-width
   bar with the two buttons flexing to fill. Body padding-bottom is scoped via
   :has(.ll-floating-cta) so the suppression set (/contact/ + /ko/free-
   consultation/) keeps its pre-existing spacing, including the mobile-sticky-
   cta's @media body 80px bottom padding at <=768px.
   ============================================================================ */
.ll-floating-cta {
    position: fixed;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: var(--color-ink-1000);
    border: 1px solid var(--color-ink-700);
    border-radius: 0;
    box-shadow: 0 -4px 16px rgba(14, 18, 26, 0.18);
}

.ll-floating-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 10px 22px;
    border: 2px solid var(--color-brand-gold-strong);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 0;
    transition: border-color var(--motion-fast),
                background-color var(--motion-fast),
                color var(--motion-fast);
}

.ll-floating-cta__btn--phone {
    background: transparent;
    color: var(--color-on-dark-strong, #FFFFFF);
}

.ll-floating-cta__btn--phone:hover,
.ll-floating-cta__btn--phone:focus-visible {
    background: var(--color-ink-900, #1B2230);
    border-color: var(--color-brand-gold-deep);
    color: var(--color-brand-gold);
}

.ll-floating-cta__btn--consult {
    background: var(--color-brand-gold);
    color: var(--color-ink-1000);
}

.ll-floating-cta__btn--consult:hover,
.ll-floating-cta__btn--consult:focus-visible {
    background: var(--color-brand-gold-strong);
    border-color: var(--color-brand-gold-deep);
}

.ll-floating-cta__btn:focus-visible {
    outline: 0;
    box-shadow: var(--shadow-focus-gold);
}

body:has(.ll-floating-cta) {
    padding-bottom: 72px;
}

/* Hide the now-shadowed mobile sticky CTA when the floating island also
   renders, so the two fixed bottom bars do not stack on mobile (K121). On
   the suppression set (/contact/ + /ko/free-consultation/) the floating
   island is absent and the mobile sticky CTA stays unchanged. */
body:has(.ll-floating-cta) .ll-mobile-sticky-cta {
    display: none;
}

@media (max-width: 600px) {
    .ll-floating-cta {
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        gap: 4px;
        padding: 6px;
        border-left: 0;
        border-right: 0;
    }
    .ll-floating-cta__btn {
        flex: 1 1 0;
        min-width: 0;
    }
    body:has(.ll-floating-cta) {
        padding-bottom: 80px;
    }
}

/* ---- Home attorney section: circle portrait thumbnails (T-POLISH-HOME-ATTORNEYS-01) ---- */
/* Grid column count (2-up) lives in the pattern's wp:post-template columnCount.
   Here we only shape the portrait into a centered circle so the loop stays brand-consistent. */
.ll-attorney-card .wp-block-post-featured-image {
	max-width: 220px;
	margin-inline: auto;
}
.ll-attorney-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

/* ---- T-DESIGN-ATTORNEY-CARDS-MAXWIDTH-01: cap each card at 450px + center the pair ---- */
/* Applied to BOTH the home attorneys loop (patterns/home-attorneys.php) and the About
   page attorney query grid (patterns/page-about.php). The wp:post-template grid (columnCount:2)
   is identified via :has(.ll-attorney-card) so the cap+center auto-applies wherever this card
   class is loaded, without per-surface scoping or a pattern edit. Container is capped to two
   450px tracks plus the WP block-gap so the pair sits centered inside its outer ll-container
   instead of spreading to the section edges. */
.ll-attorney-card {
	max-width: 450px;
	width: 100%;
	margin-inline: auto;
}
.wp-block-post-template.is-layout-grid:has(.ll-attorney-card) {
	max-width: calc((450px * 2) + var(--wp--style--block-gap, 1.5rem));
	margin-inline: auto;
}
@media (max-width: 600px) {
	.wp-block-post-template.is-layout-grid:has(.ll-attorney-card) {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   Sticky Site Header (T-POLISH-STICKY-01)
   ----------------------------------------------------------------------------
   The Block Element Site Header (.ll-site-header, a custom wp:group) replaces
   GP's default header markup, so GP Premium's sticky-navigation JS has no
   default nav structure to bind to (body still carries sticky-enabled). This
   CSS-only rule opts the custom header into position: sticky at the desktop
   breakpoint only. Mobile (<= 768px) keeps the GP Mobile Header per
   T-HOTFIX-NAV-07, which hides .ll-site-header, so this never double-stacks.
   z-index uses var(--z-header) (200) deliberately: the skip link sits at
   var(--z-skip-link) (700) and must surface above the sticky bar (WCAG 2.4.1).
   ============================================================================ */
@media (min-width: 769px) {
	.ll-site-header { position: sticky; top: 0; z-index: var(--z-header); background-color: var(--color-ink-1000); }
}

/* ============================================================================
   Sticky Site Header - admin-bar offset (T-FIX-ADMINBAR-STICKY-01)
   ----------------------------------------------------------------------------
   WP injects the admin bar above <html> on logged-in renders and adds the
   `admin-bar` class to <body>. The bar is 46px tall up to 782px and 32px tall
   from 783px (WP core breakpoint). Without an offset, position:sticky top:0
   above pushes the LeverLaw header behind the admin bar on every logged-in
   page. Scoped to .admin-bar so logged-out render is byte-identical, and
   nested inside the same min-width:769px gate that opts the header into
   sticky in the first place (below 769px the GP Mobile Header takes over and
   .ll-site-header is display:none per the rule at line 1533).
   ============================================================================ */
@media (min-width: 769px) {
	.admin-bar .ll-site-header { top: 46px; }
}
@media (min-width: 783px) {
	.admin-bar .ll-site-header { top: 32px; }
}

/* ============================================================================
   Home nav item - house icon (T-POLISH-NAV-HOME-ICON-01)
   ----------------------------------------------------------------------------
   The wp_navigation 47902 Home link carries the Additional CSS class
   `menu-item-home-icon` on its <li> (.wp-block-navigation-item); the anchor is
   <a class="wp-block-navigation-item__content">, so the bare `a` selector below
   matches it. Scoped to .ll-site-header so only the DESKTOP block nav gets the
   glyph: GP's classic #mobile-menu and slideout-menu carry the same class but
   sit outside .ll-site-header, so mobile chrome is untouched. The glyph is a
   CSS mask painted with `currentColor`, so it inherits the link color (white at
   rest, gold on hover) rather than a fixed fill. The visible "Home" label is
   kept for accessibility and clarity.
   ----------------------------------------------------------------------------
   T-POLISH-NAV-HOME-ICONONLY-01 (2026-05-30): hide the visible "Home" label so
   only the house glyph shows in the desktop header, reclaiming horizontal room
   to keep the 8-item nav on one row at ~1200px. The label is collapsed with
   font-size:0 on the anchor (NOT display:none on the text, NOT color:transparent
   which would also kill the currentColor glyph): the text node stays in the
   accessibility tree for screen readers, while the ::before glyph keeps its
   fixed 16x16 width/height + currentColor mask and remains visible. gap:0
   replaces the prior 6px so the now-zero-width label leaves no phantom flex gap
   beside the glyph.
   ============================================================================ */
.ll-site-header .menu-item-home-icon a {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 0;
}
.ll-site-header .menu-item-home-icon a::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.1 1 12h3v9h6v-6h4v6h6v-9h3z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.1 1 12h3v9h6v-6h4v6h6v-9h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ============================================================================
   T-POLISH-NAV-BREAKPOINT-01: desktop header single-row safety net + tighten
   ----------------------------------------------------------------------------
   Symptom: at common laptop widths the 8-item primary nav + logo + "Free
   consultation" CTA exceeded the container measure and the wp-block-navigation
   block flex-wrapped to a second (and at <=1057px a third) row inside the
   Theme Builder Block Element Site Header (gp_elements 47515), leaving a
   broken multi-row dead zone between the wrap point and the 768px GP Mobile
   Header takeover.

   Fix is two-pronged, scoped under .ll-site-header so neither the open-state
   responsive overlay (T-HOTFIX-NAV-04 rules at line 684, which add
   .is-menu-open and therefore win on specificity) nor the GP Mobile Header
   nor any non-header wp:navigation instance is affected.

   (1) Tighten. Reduce the inter-item gap on the wp-block-navigation container
       from the WP Core default (~2em from --wp--style--block-gap) to a fluid
       clamp(), and reduce the outer ll-container--wide flex gap likewise, so
       single-line labels fit at common laptop widths. Modest CTA padding
       reduction (10px 22px -> 8px 14px) keeps the gold button readable while
       reclaiming ~16px of horizontal room. No font-size shrink: link text
       stays at its inherited size to preserve readability and tap target.

   (2) Safety net. Legacy ScorpionCMS nav (verified 2026-05-31 in the ticket)
       used flex-wrap:nowrap on the row plus white-space:normal on link text
       so that in the squeeze band just above the mobile breakpoint, LABELS
       wrap inside their item ("Bankruptcy Topics" stacks to two lines) and
       the whole bar stays ONE row. We adopt the same combination here so
       there is no width above the GP Mobile Header takeover at which the
       desktop nav is in a multi-row state.

   Breakpoint sub-item (Goal 3, hamburger engages at ~1024px): The GP Mobile
   Header takeover threshold is a Menu Plus customizer setting at
   Appearance -> Customize -> Layout -> Header -> Mobile Header Breakpoint
   (DB-controlled; option_generate_menu_plus_settings exposes mobile_header
   enable/disable + sticky options per the GP docs but NOT the breakpoint).
   Per the ticket's STOP CONDITION ("if it is a customizer/DB setting, do NOT
   write the DB; instead report the exact customizer path for Joe to set and
   HALT on that sub-item"), this is documented for Joe in the completion
   report and not edited here. The components.css line 1332 hide rule
   (max-width: 768px) is intentionally left untouched in this run; if Joe
   raises the GP Mobile Header breakpoint to 1024px, the corresponding hide
   rule should follow as a paired one-line edit.
   ============================================================================ */
.ll-site-header .wp-block-navigation__container {
    flex-wrap: nowrap;
    gap: clamp(0.5rem, 1.1vw, 1.25rem);
}
/* T-POLISH-NAV-BREAKPOINT-02: the WP Core nav renders three nested flex layers
   (.ll-container--wide > nav > .wp-block-navigation__responsive-container-content
   > ul.wp-block-navigation__container). NAV-BREAKPOINT-01 fixed the outer and
   innermost layers, but the intermediate __responsive-container-content wrapper
   was still flex-wrap:wrap, so the whole nav still broke to a 2nd row at common
   laptop widths. Forcing nowrap here closes the gap. The open-state rule at
   line 684 uses .is-menu-open and wins on specificity (and also sets
   flex-direction:column), so the mobile overlay still stacks vertically. */
.ll-site-header .wp-block-navigation__responsive-container-content {
    flex-wrap: nowrap;
}
.ll-site-header .wp-block-navigation-item__content {
    white-space: normal;
}
.ll-site-header .ll-container--wide {
    gap: clamp(0.75rem, 1.4vw, 1.5rem);
}
.ll-site-header .wp-block-buttons .is-style-leverlaw-primary .wp-block-button__link {
    padding: 8px 14px;
}
/* T-DESIGN-HEADER-NAV-FIT-01: when the shrink-to-fit script (assets/js/
   header-nav-fit.js) is in control of the desktop block-nav, lock the inner
   labels to nowrap so the JS-driven font scale produces a true one-row nav.
   Without the .is-nav-fit class (JS off, or JS released the class at the
   floor because even the min size still overflows), the legacy
   white-space:normal rule above continues to apply and labels wrap inside
   their item rather than overflowing the viewport. */
.ll-site-header nav.wp-block-navigation.is-nav-fit .wp-block-navigation-item__content {
    white-space: nowrap;
}

/* ============================================================================
   Blog: single-post body + /blog/ posts-index archive
   ----------------------------------------------------------------------------
   T-POLISH-BLOG-TEMPLATE-01. After T-CONTENT-BLOG-MIGRATE-01 restored 30
   legacy post bodies into post_content, the blog single + /blog/ archive
   rendered through GP's CLASSIC templates (parent theme single.php and the
   child-theme home.php which delegates to GP's content.php loop). The
   Single - Post and Archive - Posts Block Element JSONs at
   theme-builder-exports/single-post.json + archive-post.json are NOT
   imported into gp_elements (DB carries only Header + Footer Block
   Elements), so the GP classic markup is what visitors see. These rules
   give the single-post body a 720px reading column with brand typography
   and the /blog/ archive a styled list + pagination using existing tokens
   from tokens.css, without touching any pattern, template, JSON, or DB
   surface. GP docs cited: docs_archive/articles/blog-content-layout.md +
   blog-overview.md + content-padding.md (classic Customizer path).
   The dormant .ll-blog-card rules earlier in this file (Block Editor
   markup) stay intact for the day the Archive Block Element is imported.
   ============================================================================ */

/* --- Single post: reading column on .inside-article ---------------------
   T-POLISH-BLOG-WIDTH-01 widened from --container-narrow (720) to
   --container-blog (960). T-DESIGN-CONTENT-WIDTH-UNIFY-01 (2026-06-27)
   re-points this to --container-wide (1440) per CEO_DECISION 2026-06-26
   so the blog single body matches the section-header band width site-wide.
   --container-blog (960) is retired as a content-body cap; the token
   stays defined in tokens.css for any non-content surface that still
   needs the 960 stage. .entry-content + its paragraphs/headings/lists,
   .post-navigation, and the .ll-share row are children of .inside-article
   and inherit / widen with it. The featured-image cap below is explicitly
   left at --container-narrow (720) per the ticket's "featured-image cap
   unchanged" so the image stays a tidy 720x405 lead band inside the
   now-wider article. */
body.single-post .inside-article {
    max-width: var(--container-wide);
    margin-inline: auto;
}

body.single-post .entry-header {
    margin-bottom: var(--space-6);
}
body.single-post .entry-title {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink-1000);
    margin: 0 0 var(--space-4);
}
body.single-post .entry-header .entry-meta {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-ink-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
body.single-post .entry-header .entry-meta a {
    color: var(--color-ink-400);
    text-decoration: none;
}
body.single-post .entry-header .entry-meta a:hover,
body.single-post .entry-header .entry-meta a:focus {
    color: var(--color-brand-gold-strong);
}

/* Entry content: 18px lead body, comfortable rhythm, brand headings. */
body.single-post .entry-content {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-500);
}
body.single-post .entry-content p {
    margin: 0 0 var(--space-5);
}
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content h5,
body.single-post .entry-content h6 {
    margin: var(--space-7) 0 var(--space-4);
    color: var(--color-ink-1000);
}
body.single-post .entry-content h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2-fluid);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
}
body.single-post .entry-content h3 {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    line-height: var(--leading-snug);
    font-weight: 700;
}
body.single-post .entry-content h4 {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    font-weight: 600;
    color: var(--color-ink-700);
}
body.single-post .entry-content a {
    color: var(--color-brand-gold-deep);
    text-decoration: underline;
}
body.single-post .entry-content a:hover,
body.single-post .entry-content a:focus {
    color: var(--color-brand-gold-strong);
    text-decoration: underline;
}
body.single-post .entry-content ul,
body.single-post .entry-content ol {
    margin: 0 0 var(--space-5);
    padding-inline-start: var(--space-6);
}
body.single-post .entry-content li + li {
    margin-top: var(--space-2);
}
body.single-post .entry-content blockquote,
body.single-post .entry-content .wp-block-quote {
    margin: var(--space-6) 0;
    padding: var(--space-3) var(--space-5);
    border-left: 4px solid var(--color-brand-gold);
    background: var(--color-surface-1);
    color: var(--color-ink-700);
    font-style: italic;
}
body.single-post .entry-content blockquote p:last-child,
body.single-post .entry-content .wp-block-quote p:last-child {
    margin-bottom: 0;
}
body.single-post .entry-content img,
body.single-post .entry-content figure {
    max-width: 100%;
    height: auto;
    margin: var(--space-6) auto;
    display: block;
}
body.single-post .entry-content figure img {
    margin: 0;
}
body.single-post .entry-content figcaption,
body.single-post .entry-content .wp-caption-text {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-400);
    text-align: center;
    line-height: var(--leading-snug);
}
body.single-post .entry-content hr,
body.single-post .entry-content .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--color-ink-200);
    margin: var(--space-7) 0;
}

/* YouTube + other oEmbed: responsive 16:9 wrapper. The wp:embed block
   wraps the iframe in .wp-block-embed__wrapper; aspect-ratio keeps the
   intrinsic 16:9 ratio across viewports without legacy padding-bottom
   tricks. */
body.single-post .entry-content .wp-block-embed {
    margin: var(--space-6) 0;
}
body.single-post .entry-content .wp-block-embed__wrapper {
    position: relative;
}
body.single-post .entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper,
body.single-post .entry-content .wp-block-embed-youtube .wp-block-embed__wrapper {
    aspect-ratio: 16 / 9;
}
body.single-post .entry-content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe,
body.single-post .entry-content .wp-block-embed-youtube .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Cat-links (entry footer) + post navigation (prev / next) */
body.single-post .entry-meta[aria-label="Entry meta"] {
    margin-top: var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-ink-400);
}
body.single-post .cat-links {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: var(--text-xs);
}
body.single-post .cat-links a {
    color: var(--color-brand-gold-strong);
    text-decoration: none;
}
body.single-post .cat-links a:hover,
body.single-post .cat-links a:focus {
    color: var(--color-info);
}
body.single-post .post-navigation {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-ink-200);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
}
body.single-post .post-navigation a {
    color: var(--color-info);
    text-decoration: none;
    font-weight: 600;
}
body.single-post .post-navigation a:hover,
body.single-post .post-navigation a:focus {
    color: var(--color-brand-gold-strong);
    text-decoration: underline;
}

/* Comments area + reply form. The comments_template() call in GP's
   single.php fires AFTER content-single.php closes the .inside-article
   wrapper, so the comments DOM is a sibling of .inside-article (not a
   child) and does NOT inherit the article column above. T-POLISH-BLOG-
   WIDTH-01 widened this to --container-blog (960) for visual coherence
   with the article body it sits below. T-DESIGN-CONTENT-WIDTH-UNIFY-01
   re-points to --container-wide (1440) so the form edge keeps tracking
   the article edge above it after the body widened to 1440. The form
   inputs / textarea use width:100%, so they widen with the container. */
body.single-post .comments-area {
    max-width: var(--container-wide);
    margin: var(--space-8) auto 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-ink-200);
}
body.single-post .comments-title,
body.single-post .comment-reply-title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    color: var(--color-ink-1000);
    margin: 0 0 var(--space-5);
}
body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"],
body.single-post .comment-form input[type="url"],
body.single-post .comment-form textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-ink-200);
    border-radius: var(--radius-input);
    background: var(--color-surface-0);
    color: var(--color-ink-900);
    font: 400 var(--text-md)/1.4 var(--font-sans);
}
body.single-post .comment-form textarea {
    min-height: 7rem;
    resize: vertical;
}
body.single-post .comment-form input:focus,
body.single-post .comment-form textarea:focus {
    outline: none;
    border-color: var(--color-brand-gold);
    box-shadow: var(--shadow-focus-gold);
}
body.single-post .comment-form .comment-form-comment,
body.single-post .comment-form .comment-form-author,
body.single-post .comment-form .comment-form-email,
body.single-post .comment-form .comment-form-url,
body.single-post .comment-form .comment-form-cookies-consent {
    margin: 0 0 var(--space-4);
}
body.single-post .comment-form label {
    font: 600 var(--text-sm)/1.4 var(--font-sans);
    color: var(--color-ink-700);
}
body.single-post .comment-form .form-submit input[type="submit"] {
    background: var(--color-brand-gold);
    color: var(--color-ink-1000);
    border: 0;
    border-radius: var(--radius-md);
    padding: 0.875rem 1.5rem;
    font: 600 var(--text-md)/1 var(--font-sans);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--motion-fast);
}
body.single-post .comment-form .form-submit input[type="submit"]:hover,
body.single-post .comment-form .form-submit input[type="submit"]:focus {
    background: var(--color-brand-gold-strong);
}

/* --- /blog/ posts-index archive (home.php loop via GP content.php) ------
   T-DESIGN-CONTENT-WIDTH-UNIFY-01 widened the per-card reading cap from
   --container-narrow (720) to --container-wide (1440) so /blog/ tracks
   the section-header band width. When the archive carries a sidebar the
   .left-sidebar / .right-sidebar override below (`max-width: none`) still
   wins per source order; the 1440 cap only applies on the no-sidebar
   variants (date archives etc) where the cards previously read at 720. */
body.blog article.post {
    max-width: var(--container-wide);
    margin-inline: auto;
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-ink-200);
}
body.blog article.post:last-of-type {
    border-bottom: 0;
    margin-bottom: var(--space-4);
}
body.blog article.post .inside-article {
    padding: 0;
}
body.blog article.post .entry-header {
    margin-bottom: var(--space-3);
}
body.blog article.post .entry-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink-1000);
    margin: 0 0 var(--space-3);
    font-weight: 700;
}
body.blog article.post .entry-title a {
    color: inherit;
    text-decoration: none;
}
body.blog article.post .entry-title a:hover,
body.blog article.post .entry-title a:focus {
    color: var(--color-brand-gold-strong);
}
body.blog article.post .entry-meta {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-ink-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
body.blog article.post .entry-meta a {
    color: var(--color-ink-400);
    text-decoration: none;
}
body.blog article.post .entry-meta a:hover,
body.blog article.post .entry-meta a:focus {
    color: var(--color-brand-gold-strong);
}
body.blog article.post .post-image {
    margin: var(--space-4) 0;
}
body.blog article.post .post-image img {
    max-width: 100%;
    height: auto;
    display: block;
}
body.blog article.post .entry-summary,
body.blog article.post .entry-content {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-500);
}
body.blog article.post .entry-summary p,
body.blog article.post .entry-content p {
    margin: 0 0 var(--space-3);
}
body.blog article.post footer.entry-meta {
    margin-top: var(--space-3);
    font-size: var(--text-xs);
}

/* Pagination on /blog/. T-DESIGN-CONTENT-WIDTH-UNIFY-01 widened from
   --container-narrow (720) to --container-wide (1440) to track the cards
   above on no-sidebar archives. The .left-sidebar / .right-sidebar
   override below still wins (`max-width: none`) on sidebar archives. */
body.blog .paging-navigation {
    max-width: var(--container-wide);
    margin: var(--space-7) auto 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-ink-200);
    font-family: var(--font-sans);
    font-size: var(--text-md);
}
body.blog .paging-navigation .nav-previous {
    margin-bottom: var(--space-4);
}
body.blog .paging-navigation .nav-previous a {
    color: var(--color-info);
    text-decoration: none;
    font-weight: 600;
}
body.blog .paging-navigation .nav-previous a:hover,
body.blog .paging-navigation .nav-previous a:focus {
    color: var(--color-brand-gold-strong);
    text-decoration: underline;
}
body.blog .paging-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
body.blog .paging-navigation .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-ink-200);
    border-radius: var(--radius-sm);
    color: var(--color-ink-700);
    text-decoration: none;
    font-weight: 600;
}
body.blog .paging-navigation .page-numbers.dots {
    border-color: transparent;
    color: var(--color-ink-400);
}
body.blog .paging-navigation .page-numbers.current {
    background: var(--color-ink-1000);
    border-color: var(--color-ink-1000);
    color: var(--color-on-dark-strong);
}
body.blog .paging-navigation a.page-numbers:hover,
body.blog .paging-navigation a.page-numbers:focus {
    border-color: var(--color-brand-gold);
    color: var(--color-brand-gold-strong);
}

/* ============================================================================
   T-POLISH-BLOG-LAYOUT-02: branded banner, archive sidebar, static share,
   related-posts strip, "Continue Reading" CSS arrow.
   ----------------------------------------------------------------------------
   Layered ON TOP of T-POLISH-BLOG-TEMPLATE-01 (single-post + archive body
   typography). Mechanism: child-theme template parts (template-parts/
   blog-banner.php, sidebar.php) + inc/blog.php (generate_sidebar_layout
   filter -> no-sidebar on is_singular('post'), right-sidebar on is_home()
   and post archives; generate_after_header hook for the single banner;
   generate_after_entry_content for static share; generate_after_content
   for the related-posts strip). Zero DB writes; zero new third-party
   scripts; static share links only (no FB/X/LinkedIn JS SDKs, no Google+).
   ============================================================================ */

/* --- Header band breadcrumb + categories (folded into section-header band)
   T-DESIGN-BLOG-HEADER-FOLD-01 (2026-06-23): the blog index, post archives,
   and single posts now render the header band through template-parts/
   section-header.php in dark skin (.ll-section--inverse, honeycomb texture)
   instead of the bespoke template-parts/blog-banner.php. The wrapper +
   image hero + overlay + .ll-blog-banner__inner + .ll-blog-banner__eyebrow
   / __title / __meta rules that the prior banner relied on are removed
   below; the .ll-blog-banner__breadcrumb / __crumbs / __sep / __categories
   classes survive because inc/blog.php emits them inside section-header
   .php's intro_html slot to preserve the breadcrumb (+ category chips on
   singles) inside the same band. The body.blog / body.archive /
   body.single-post .ll-section--inverse > .ll-container { text-align:
   center } rule below mirrors the existing .ll-cpt-single / .ll-cpt-
   archive precedent so the breadcrumb's inline-flex ol + chips center
   under the H1 the same way the prior .ll-blog-banner__inner did. */
body.blog .ll-section--inverse > .ll-container,
body.archive .ll-section--inverse > .ll-container,
body.single-post .ll-section--inverse > .ll-container {
    text-align: center;
}

.ll-blog-banner__breadcrumb {
    margin: 0 0 var(--space-4);
}
.ll-blog-banner__crumbs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--space-2);
    font: 600 var(--text-xs)/1.4 var(--font-sans);
    color: var(--color-on-dark-body);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.ll-blog-banner__crumbs a {
    color: var(--color-brand-gold-soft);
    text-decoration: none;
}
.ll-blog-banner__crumbs a:hover,
.ll-blog-banner__crumbs a:focus {
    color: var(--color-on-dark-strong);
    text-decoration: underline;
}
.ll-blog-banner__crumbs a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-gold);
    border-radius: var(--radius-sm);
}
.ll-blog-banner__sep {
    color: var(--color-on-dark-muted);
}
.ll-blog-banner__crumbs li {
    display: inline-flex;
    align-items: center;
}

.ll-blog-banner__categories {
    margin: 0 0 var(--space-3);
    font: 600 var(--text-xs)/1.4 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.ll-blog-banner__categories a {
    color: var(--color-brand-gold-soft);
    text-decoration: none;
}
.ll-blog-banner__categories a:hover,
.ll-blog-banner__categories a:focus {
    color: var(--color-on-dark-strong);
    text-decoration: underline;
}
.ll-blog-banner__categories a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-gold);
    border-radius: var(--radius-sm);
}

/* Single-post banner reads on the entry-header already styled by
   T-POLISH-BLOG-TEMPLATE-01 above; suppress the inline duplicate so we do
   not show the title + date twice. The legacy article header still
   renders for non-banner contexts (e.g. RSS readers, screen readers
   relying on the entry-header landmark) but visually collapses. */
body.single-post .inside-article > .entry-header {
    display: none;
}

/* On /blog/, the per-card .ll-container--narrow cap from
   T-POLISH-BLOG-TEMPLATE-01 made each article center inside the main
   column. With a sidebar present, drop the narrow cap so cards span the
   available main width (which is already constrained by the sidebar flex).
   T-DESIGN-BLOG-HEADER-SIDEBAR-01: sidebar moved right -> left, so the
   GP body class is now body.blog.left-sidebar; both selectors retained
   defensively. */
body.blog.right-sidebar article.post,
body.blog.left-sidebar article.post {
    max-width: none;
    margin-inline: 0;
}
body.blog.right-sidebar .paging-navigation,
body.blog.left-sidebar .paging-navigation {
    max-width: none;
    margin-inline: 0;
}

/* --- Sidebar styling ----------------------------------------------------
   T-DESIGN-BLOG-HEADER-SIDEBAR-01: re-skin onto the shared .ll-sidebar-card
   + .ll-sidebar-siblings primitives (components.css:3775+) so the blog
   left-sidebar matches the bankruptcy-topic child submenu look. The card
   shell, heading, padding, divider rules, link colors, and focus ring all
   come from the shared primitive; the rules below restyle the default
   wp_list_categories / wp_get_archives <li><a> markup to mirror the
   .ll-sidebar-siblings__item shape (so we do not need a custom walker)
   and stack the recent-posts time meta. */
.ll-blog-sidebar {
    font-family: var(--font-sans);
    color: var(--color-ink-700);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.ll-blog-sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ll-blog-sidebar__list > li {
    margin: 0;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-ink-200);
}
.ll-blog-sidebar__list > li:last-child {
    border-bottom: none;
}
.ll-blog-sidebar__list > li > a {
    display: block;
    color: var(--color-ink-700);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    line-height: 1.4;
}
.ll-blog-sidebar__list > li > a:hover,
.ll-blog-sidebar__list > li > a:focus-visible {
    color: var(--color-brand-gold-strong);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.ll-blog-sidebar__list > li > a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-gold);
    border-radius: var(--radius-sm);
}
.ll-blog-sidebar__list--recent > .ll-blog-sidebar__item--recent {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
/* T-DESIGN-BLOG-HEADER-FOLD-01 (2026-06-23): inline (right-aligned) count
   on the Categories + Archives lists. wp_list_categories + wp_get_archives
   emit `<li><a>Label</a> (N)` where N is a bare text node sibling of the
   anchor; with the anchor at display:block the count was wrapping to a
   second line. Promoting the li to a flex row with space-between puts
   the anchor on the left and the count on the right at the baseline.
   Scoped via :not(...--recent) so the Recent posts list (whose li
   carries a custom <a> + <time> child stack via flex-direction:column
   above) is unchanged. */
.ll-blog-sidebar__list:not(.ll-blog-sidebar__list--recent) > li {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.ll-blog-sidebar__date {
    font-size: var(--text-xs);
    color: var(--color-ink-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* --- Static social share ------------------------------------------------ */
/* .ll-share is emitted only on is_singular('post') (see inc/blog.php
   leverlaw_blog_share_row) and lives inside .inside-article via the
   generate_after_entry_content hook. T-POLISH-BLOG-WIDTH-01 widened it
   to --container-blog (960); T-DESIGN-CONTENT-WIDTH-UNIFY-01 re-points to
   --container-wide (1440) so the row edges keep matching the article
   body now that the body widened to 1440. */
.ll-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    max-width: var(--container-wide);
    margin: var(--space-6) auto;
    padding-block: var(--space-4);
    border-block: 1px solid var(--color-ink-200);
}
.ll-share__label {
    font: 700 var(--text-xs)/1 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink-700);
    margin-right: var(--space-2);
}
.ll-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-1);
    color: var(--color-ink-900);
    text-decoration: none;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.ll-share__link:hover,
.ll-share__link:focus {
    background: var(--color-brand-gold);
    color: var(--color-ink-1000);
}
.ll-share__link:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-gold);
}
.ll-share__svg {
    display: block;
}

/* --- Related-posts strip ------------------------------------------------ */
.ll-related-posts {
    background: var(--color-surface-1);
    padding-block: var(--space-8);
    margin-top: var(--space-8);
}
.ll-related-posts__eyebrow {
    text-align: center;
    margin: 0 0 var(--space-6);
}
.ll-related-posts__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}
@media (min-width: 48em) {
    .ll-related-posts__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 64em) {
    .ll-related-posts__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.ll-related-posts__card {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.ll-related-posts__date {
    font: 600 var(--text-xs)/1.2 var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-ink-400);
}
.ll-related-posts__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--color-ink-1000);
    margin: 0;
    font-weight: 700;
}
.ll-related-posts__title a {
    color: inherit;
    text-decoration: none;
}
.ll-related-posts__title a:hover,
.ll-related-posts__title a:focus {
    color: var(--color-brand-gold-strong);
}
.ll-related-posts__title a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-gold);
    border-radius: var(--radius-sm);
}
.ll-related-posts__excerpt {
    margin: 0;
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-ink-500);
    flex-grow: 1;
}
.ll-related-posts__more {
    font: 600 var(--text-sm)/1.2 var(--font-sans);
    color: var(--color-info);
    text-decoration: none;
    margin-top: var(--space-2);
}
.ll-related-posts__more:hover,
.ll-related-posts__more:focus {
    color: var(--color-brand-gold-strong);
    text-decoration: underline;
}
/* End T-POLISH-BLOG-LAYOUT-02 */

/* ============================================================================
   T-POLISH-BLOG-LAYOUT-04 - 2026-06-01
   /blog/ archive as a card grid (visually matches the home .ll-blog-card from
   patterns/home-blog-teaser.php and the rules at lines ~369-396 above) +
   single-post featured-image cap. CSS-only. No PHP / JSON / DB write.

   Why this is CSS-only: GP's classic loop (home.php -> GP content.php) emits
   article.post markup; the Single - Post / Archive - Posts Block Element JSONs
   under theme-builder-exports/ are NOT imported (verified BLOG-TEMPLATE-01).
   Restyling the classic markup as a card grid keeps the structural pieces
   (banner from BLOG-LAYOUT-03, right sidebar from BLOG-LAYOUT-02) intact and
   avoids importing a Block Element or rewriting the loop.

   Archive markup confirmed by curl:
     main.site-main
       > article.post.has-post-thumbnail
           > .inside-article
               > header.entry-header > h2.entry-title + .entry-meta
               > .post-image > a > img         (only when has-post-thumbnail)
               > .entry-summary (or .entry-content)
                   > p ... <a class="read-more">
               > footer.entry-meta (cats / tags / comments-link)
       > .paging-navigation

   Single-post .featured-image emit confirmed by curl on /tired-of-timeshare.../
   (body class `post-image-above-header featured-image-active`):
     .inside-article > .featured-image.page-header-image-single > img
   That uncapped square image (1024x1024) was the "enormous" element the
   ticket described; the BLOG-LAYOUT-02 ll-blog-banner already shows the same
   image as a capped lead, so this in-body emit becomes the redundant graphic.

   GP doc citations:
     - GP Documentation/docs_archive/articles/blog-overview.md (classic blog
       rendering path: posts page -> home.php -> content.php loop)
     - GP Documentation/docs_archive/articles/blog-content-layout.md (classic
       archive layout primitives - .post-image, .entry-header, .entry-summary)
     - GP Documentation/docs_archive/articles/adding-featured-images.md
       (singles render featured image as a hero; archives as a thumbnail)
     - GP Documentation/docs_archive/articles/adjusting-the-featured-images.md
       (Customizer "above-header / aligned-center" emits the
       .featured-image.page-header-image-single element on singles)
   ============================================================================ */

/* --- /blog/ archive: turn the main column into a 3-up card grid ---------
   T-POLISH-CARD-3UP-01 (2026-06-01): step the grid 1-up (mobile) ->
   2-up (>= 48em, intermediate; keeps cards readable in the narrowed main
   column when the sidebar takes ~30%) -> 3-up (>= 64em, desktop). Pagination
   continues to span the full grid row below the cards via grid-column: 1/-1.
   Equal-height stretch + the T-POLISH-CARD-HEIGHT-01 excerpt clamp are
   unchanged; only grid-template-columns values move. */
body.blog #primary > main.site-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: stretch;
}
@media (min-width: 48em) {
    body.blog #primary > main.site-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 64em) {
    body.blog #primary > main.site-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* Pagination spans the full grid row below the cards. */
body.blog #primary > main.site-main > .paging-navigation {
    grid-column: 1 / -1;
}

/* --- /blog/ archive: each article.post renders as a card ---------------- */
body.blog article.post {
    background: var(--color-surface-0);
    border: 1px solid var(--color-ink-100);
    border-radius: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: border-color var(--motion-base);
    height: 100%;
}
body.blog article.post:hover,
body.blog article.post:focus-within {
    border-color: var(--color-brand-gold);
}
/* Override BLOG-TEMPLATE-01 row-separator + last-of-type tweak; each post
   is its own bordered card now. */
body.blog article.post:last-of-type {
    margin: 0;
    border: 1px solid var(--color-ink-100);
}
/* Override BLOG-LAYOUT-02 + BLOG-TEMPLATE-01 inline cap; cards fill their
   grid cell. */
body.blog.right-sidebar article.post {
    max-width: none;
    margin-inline: 0;
}

/* Stretch .inside-article to the card edges and re-order so .post-image
   (which GP emits AFTER .entry-header) sits at the TOP of the card, matching
   the home teaser composition (image -> date -> title -> excerpt). */
body.blog article.post .inside-article {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
    height: 100%;
}
body.blog article.post .post-image {
    order: -1;
    margin: 0;
}
body.blog article.post .post-image a,
body.blog article.post .post-image img {
    display: block;
}
body.blog article.post .post-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Card interior padding mirrors the home .ll-blog-card pattern:
   padding-inline space-5, date padded space-4 top, excerpt padded space-5
   bottom. */
body.blog article.post .entry-header {
    order: 0;
    padding: var(--space-4) var(--space-5) 0;
    margin: 0 0 var(--space-2);
    display: flex;
    flex-direction: column;
}
body.blog article.post .entry-summary,
body.blog article.post .entry-content {
    order: 1;
    padding: 0 var(--space-5) var(--space-5);
    margin: 0;
    flex: 1 1 auto;
}
body.blog article.post footer.entry-meta {
    order: 2;
    padding: var(--space-3) var(--space-5) var(--space-4);
    margin-top: auto;
    border-top: 1px solid var(--color-ink-100);
    font-size: var(--text-xs);
    color: var(--color-ink-400);
}

/* Header pieces in home-card order: date-style meta above title, title at xl
   (BLOG-TEMPLATE-01 set 4xl which is too large at 2-up). */
body.blog article.post .entry-header .entry-meta {
    order: -1;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-ink-400);
    margin: 0 0 var(--space-2);
}
body.blog article.post .entry-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.3;
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink-1000);
    margin: 0;
    font-weight: 700;
}

/* Pagination: drop the BLOG-TEMPLATE-01 top border / narrow cap so it sits
   naturally as a grid row below the cards. */
body.blog .paging-navigation {
    max-width: none;
    margin: var(--space-2) 0 0;
    padding-top: 0;
    border-top: 0;
}

/* --- Single post: cap featured image so it reads as a tidy lead -------- */
/* GP's classic single template emits the featured image as
   <div class="featured-image page-header-image-single"><img></div> inside
   .inside-article BEFORE the entry-header (Customizer setting
   `post-image-above-header`). Without a cap a 1024x1024 source fills the
   720px reading column as a giant square. Apply a 16:9 aspect-ratio crop
   with object-fit:cover so it reads as a consistent 720x405 lead band. */
body.single-post .inside-article > .featured-image,
body.single-post .featured-image.page-header-image-single {
    max-width: var(--container-narrow);
    margin: 0 auto var(--space-6);
    border-radius: 0;
    overflow: hidden;
}
body.single-post .featured-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
/* End T-POLISH-BLOG-LAYOUT-04 */

/* ============================================================================
   T-POLISH-CARD-HEIGHT-01 - Equal-height cards via 3-line excerpt clamp.

   Cards in a row already stretch to equal height by virtue of CSS grid's
   default `align-items: stretch` on the surrounding grid containers (home
   teaser via `.ll-blog-card` in its grid; /blog/ archive via
   `body.blog #primary > main.site-main` set to `display: grid` in
   T-POLISH-BLOG-LAYOUT-04). The remaining height variance came from one
   card's excerpt running noticeably longer than its neighbors, which made
   the tallest card set the row height while shorter cards padded out.

   Clamping the excerpt paragraph to 3 lines reduces that text-block
   variance so cards in the same row read as a tidy set. Title is left
   unclamped because dropping copy from a title risks losing the entire
   hook (a 2-3 line title is acceptable for hierarchy; 4-line titles are
   exceedingly rare in this content set). Line-clamp is purely visual: the
   full excerpt text remains in the DOM, so screen readers and search
   crawlers still see the entire string.

   Both card surfaces are targeted:
     - Home blog teaser block-card excerpt:
         `.ll-blog-card .wp-block-post-excerpt p` (WP excerpt block emits
         a single <p>; if a future variant emits multiple, each clamps to
         3 lines independently, still bounded).
     - Classic archive card excerpt:
         `body.blog article.post .entry-summary p` (and `.entry-content`
         when no manual excerpt is set; the_excerpt() / the_content() emit
         on the classic archive markup confirmed by curl in BLOG-LAYOUT-04).

   Standards `line-clamp` plus WebKit-prefixed fallback: `display:-webkit-box`
   + `-webkit-box-orient:vertical` + `-webkit-line-clamp` is the universally
   supported pattern across Chromium, WebKit, and current Firefox. The
   standards `line-clamp` is listed for forward compatibility (CSS Overflow
   Module Level 4).

   Companion cleanup: removed the now-inert
   `body.blog.right-sidebar #primary { display:flex; ... }` block + its
   `@media (min-width: 64em)` companion that BLOG-LAYOUT-02 left as a
   safety-net. BLOG-LAYOUT-03 moved the archive banner out of `.site-content`
   via `generate_after_header`, leaving `#primary`'s sole child as `<main>`;
   the sidebar lives as a sibling of `#primary` (GP's standard right-sidebar
   layout structure), not as a child. The flex rule therefore had no
   children to lay out and was a no-op. Confirmed by reading
   `deliverables/leverlaw-child/inc/blog.php` which registers
   `generate_sidebar_layout` -> `right-sidebar` for archive but does not
   move the sidebar into `#primary`.

   GP docs cited:
     - `GP Documentation/docs_archive/articles/blog-content-layout.md`
       (classic archive markup primitives - .entry-summary / .entry-content).
   CSS spec cited:
     - CSS Grid Layout Module Level 1: `align-items: stretch` is the
       default for grid containers, so grid items stretch to fill the row
       on the cross axis without an explicit height value.

   Security note (RampStack web-dev): CSS-only. No PHP / JS / template /
   JSON / DB / dynamic output / new external surface. The excerpt + entry
   markup are GP-emitted (escaped by GP). Pass.
   ============================================================================ */
.ll-blog-card .wp-block-post-excerpt p,
body.blog article.post .entry-summary p,
body.blog article.post .entry-content p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
/* End T-POLISH-CARD-HEIGHT-01 */

/* ============================================================================
   T-POLISH-BLOG-READMORE-01 - 2026-06-01
   /blog/ archive card footer: read-more as a brand-button-styled link below
   the clamped excerpt, tag-list hidden (categories kept). CSS-only here;
   the read-more relocation pairs with inc/blog.php (filter
   generate_excerpt_more_output -> '' on is_home(), action
   generate_after_entry_content priority 5 emits the new <a class="ll-btn">).

   Scope: body.blog only (the /blog/ posts index, which is what is_home()
   matches on this site because the front page is a static page). Category /
   tag / author / date post archives, the home blog teaser pattern, and
   single posts are all unaffected.

   GP doc citations:
     - GP Documentation/docs_archive/articles/generate-excerpt-more-output.md
       (GP filter that wraps the default ' ... <a class="read-more">Read more</a>'
       string GP injects via the WP core excerpt_more filter)
     - GP Documentation/docs_archive/articles/generate-show-tags.html
       (generate_show_tags filter is documented as the GP-native off-switch
       for tag rendering; CSS hide is preferred here because (a) the ticket
       specifies CSS for tag hiding, (b) the rule scopes precisely to
       body.blog so single-post tag-list output is preserved with no
       conditional PHP, and (c) the legacy markup remains in the DOM and
       crawler-accessible)

   Security note (RampStack web-dev): no new user input is interpolated;
   the read-more is a static escaped <a> (esc_url + esc_attr + esc_html
   on permalink, aria-label, and label respectively). Tag-hide is CSS.
   No new third-party surface, no JS. Pass.
   ============================================================================ */

/* Read-more button: slot it between .entry-summary (order: 1) and
   footer.entry-meta (order: 2). Source DOM order already keeps the new
   <p class="ll-blog-readmore"> before the footer (priority 5 hook fires
   before priority 10), so with order: 2 the equal-order tie resolves to
   source order and the visual sequence is summary -> readmore -> footer.
   footer.entry-meta retains margin-top: auto (CARD-HEIGHT-01 path), which
   continues to pin the footer to the card bottom. */
body.blog article.post .ll-blog-readmore {
    order: 2;
    margin: 0;
    padding: 0 var(--space-5) var(--space-4);
}

/* The .ll-btn class (Buttons section above) supplies the gold-outline
   brand button (border, color, padding, focus-visible ring). Here we
   guarantee a 44x44 minimum tap target (WCAG SC 2.5.5 / 2.5.8) on the
   archive card variant: .ll-btn's natural height at the 0.875rem font
   size + 10px y-padding + 2px border lands near 40px on most renderings;
   inline-flex + align-items: center + min-height: 44px lifts it above
   the threshold without altering the button look on the rest of the site. */
body.blog article.post .ll-blog-readmore .ll-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Hide tag-list on /blog/ archive cards; categories (.cat-links) and
   comments-link (.comments-link) inside footer.entry-meta remain visible
   and crawlable. Single-post body uses body.single-post so its
   .tags-links is unaffected and tags continue to render in the single
   footer. No !important needed: the GP-emitted footer.entry-meta carries
   no inline display style and no higher-specificity rule fights this. */
body.blog article.post .tags-links {
    display: none;
}

/* Belt-and-suspenders: hide any legacy "Read more" anchor on archive
   cards. The PHP filter on generate_excerpt_more_output already strips
   GP's inline excerpt read-more at source, but posts whose post_content
   carries a WP <!--more--> tag render via the_content() and emit
   <p class="read-more-container"><a class="read-more">Read more</a></p>
   from WP core, which is unreachable by the excerpt_more filter. Hiding
   .read-more + .read-more-container on body.blog removes that legacy
   anchor so the only CTA visible on every card is the new
   .ll-blog-readmore brand button above. Single-post body is unaffected
   (body.single-post scope). T-POLISH-BLOG-CLEANUP-01 removed the prior
   .read-more color/font/::after-arrow declarations once display:none
   here turned them into no-ops. */
body.blog article.post .read-more,
body.blog article.post .read-more-container {
    display: none;
}
/* End T-POLISH-BLOG-READMORE-01 */

/* ============================================================================
   T-POLISH-CARD-NOIMAGE-01 - 2026-06-01
   Hide the card thumbnail on the /blog/ + post archives and on the home blog
   teaser so every card reads as a uniform text card (date -> Cinzel title ->
   3-line excerpt -> brand "Continue reading" button). Only ~1 of 10 posts
   carries a featured image, so the prior image-on-some-cards rendering made
   that single card visibly taller than its neighbors and broke the row's
   uniform height. The featured image on the SINGLE POST page (its in-body
   .featured-image.page-header-image-single lead band AND the
   .ll-blog-banner__image inside the BLOG-LAYOUT-03 banner) is unchanged: this
   ticket scopes the hide to the card surfaces only.

   Selectors and why each is safe to hide:
     - .ll-blog-card .wp-block-post-featured-image - the home teaser block
       card image (sized + bordered by the .ll-blog-card rules at lines
       ~381-389). Class is unique to the home teaser pattern
       (patterns/home-blog-teaser.php); it does not appear on the single-post
       template, on archive cards, or on any other CPT card surface.
     - body.blog article.post .post-image - the classic archive card image
       (re-ordered to card top by BLOG-LAYOUT-04 lines ~2470-2483). body.blog
       only matches the posts index (/blog/ + /blog/page/N/); single posts
       use body.single-post, so their .featured-image is untouched. CPT
       archives (e.g. /attorneys/) use body.post-type-archive-<cpt>, never
       body.blog, so their cards are also untouched.

   Top padding: both cards already define proper top spacing on the first
   text element below the now-hidden image, so hiding the image collapses
   no needed padding:
     - .ll-blog-card .wp-block-post-date carries padding-top: var(--space-4)
       (line ~395), which keeps the date off the card's top border.
     - body.blog article.post .entry-header carries padding: var(--space-4)
       var(--space-5) 0 (line ~2490), which keeps the date/meta off the
       card's top border on the archive grid.

   GP doc citations:
     - GP Documentation/docs_archive/articles/blog-content-layout.md (classic
       archive markup primitive .post-image emitted by GP's content.php loop)
     - GP Documentation/docs_archive/articles/adding-featured-images.md
       (singles render featured image as a hero, archives as a thumbnail;
        this rule suppresses only the archive/teaser thumbnail)

   Security note (RampStack web-dev): CSS-only. No PHP / JS / template /
   JSON / DB / dynamic output / new external surface. No wp_kses allow-list
   change. Pass.
   ============================================================================ */
.ll-blog-card .wp-block-post-featured-image,
body.blog article.post .post-image {
    display: none;
}
/* End T-POLISH-CARD-NOIMAGE-01 */

/* ============================================================================
   T-POLISH-BODY-FONT-01 (2026-06-02)
   ----------------------------------------------------------------------------
   Force body + body-copy elements to render Lato (--font-sans). Live diagnosis
   on /about/ 2026-06-01: body computed generic `sans-serif` and .entry-content
   p computed `Cinzel, Georgia, ...serif`, even though tokens.css already
   defines --font-sans = 'Lato, ...' and the @font-face block lands Lato per
   T-POLISH-02. Two defects, both cascade-shape:

     (1) Specificity tie on `body { font-family }`. The plain `body` rule at
         line 572 (specificity 0,0,0,1) ties with WP global-styles inline
         `body { font-family: var(--wp--preset--font-family--sans) }` emitted
         by theme.json AND with GP Premium customizer typography emit; on the
         current install the customizer body font is "Inherit" (Joe flipped
         from Inter 2026-06-01 per T-POLISH-02 note) which routes GP to emit
         a `body { font-family: <system stack> }` rule that loads AFTER our
         child stylesheet and wins on cascade order, computing as generic
         `sans-serif`. Documented at GP Documentation/docs_archive/articles/
         using-our-typography-options.md (Body Typography "Inherit" semantics)
         and the upstream WP behavior at theme.json `styles.typography.fontFamily`
         emitting a same-specificity `body {}` rule.

     (2) Bleed of --font-display into body-copy. .entry-content p computing
         Cinzel on /about/ (a regular page, NOT body.single-post which is the
         only scope where this stylesheet sets .entry-content fonts) implies
         the inherited font-family is being set higher in the cascade by
         either a GP Premium "Content" typography emit, or a theme.json /
         global-styles bleed via has-display-font-family that has spread
         beyond the heading blocks it was intended for. No selector in
         components.css applies var(--font-display) to .entry-content or
         .ll-section paragraph containers (grep verified: every --font-display
         occurrence targets a heading, .ll-eyebrow, .ll-step__num, a banner
         eyebrow, or a pseudo-element); the source of the bleed is therefore
         outside FILES IN SCOPE for this ticket (likely GP Premium Customizer
         > Typography > Content, or the WP global-styles emit). Per the
         ticket's "Fix the root if it is a wrong rule; otherwise add a
         correctly-scoped body-copy rule" clause: add the override here.

   Fix:
     - `html body` raises specificity to (0,0,0,2) so the body rule wins over
       any `body {}` rule regardless of cascade order. No !important needed.
     - `.entry-content :is(p, ul, ol, li, blockquote, td, dd, dt, figcaption)`
       and the matching `.ll-section ...` selector reset body-copy elements
       to --font-sans at specificity (0,0,1,1) which beats single-class /
       single-container Cinzel emits from GP customizer "Content" typography
       or any global-styles bleed.
     - `:not(.ll-eyebrow, .ll-step__num)` preserves the two body-copy
       containers that intentionally render Cinzel: .ll-eyebrow (gold
       sentence-case eyebrow above section headings, used in every section
       header pattern) and .ll-step__num (the "01"..."05" Cinzel numerals on
       the home Process pattern). Both are <p class="..."> elements inside
       .ll-section and would otherwise be hit by the override. .ll-blog-banner
       __eyebrow lives outside .entry-content/.ll-section so it is not in the
       match set and needs no exclusion.

   Headings (h1-h6) are out of scope here: theme.json `styles.elements.h1/h2`
   set fontFamily = --wp--preset--font-family--display (Cinzel) and the
   body.single-post .entry-content h2-h6 rules above (lines 1646-1665) reinforce
   that. Both win over the .ll-section container-level cascade because they
   target the heading element directly; this body-copy override targets
   p / list / blockquote / td / dd / dt / figcaption only and does not include
   h1-h6 in the :is() list.

   Security note (RampStack web-dev): CSS-only. No PHP / JS / template / JSON
   / DB / dynamic output / new external surface. No wp_kses allow-list change.
   No font-family literal hardcoded - both --font-sans and --font-display are
   sourced from tokens.css. No !important. Pass.

   T-POLISH-TYPO-ROOT-01 (2026-06-16, CEO Option B): closure note. This override
   is RETAINED PERMANENTLY as the documented, code-driven enforcement of the
   brand-locked body font (Lato). GP Premium's modern Body Typography field
   emits `body, button, input, select, textarea { font-family: inherit }` by
   design and loads after both the theme.json body rule and any legacy gp-hooks
   `font_body=Lato` default, so without this override `body` computes to
   `inherit` and falls back to UA generic sans-serif. The override is the
   correct mechanism, not a removable workaround; do not delete.
   ============================================================================ */
html body {
    font-family: var(--font-sans);
}

.entry-content :is(p, ul, ol, li, blockquote, td, dd, dt, figcaption):not(.ll-eyebrow, .ll-step__num),
.ll-section :is(p, ul, ol, li, blockquote, td, dd, dt, figcaption):not(.ll-eyebrow, .ll-step__num) {
    font-family: var(--font-sans);
}
/* End T-POLISH-BODY-FONT-01 */

/* ============================================================================
   Why-LeverLaw value-prop cards (page-why-leverlaw pattern)
   ----------------------------------------------------------------------------
   Reuses the global .ll-card surface for the six value-prop cards on
   /why-leverlaw/. This rule scopes only the heading anchor color + hover
   so card titles read as ink-on-paper, not as default blue link text,
   then turn gold-strong on hover or keyboard focus (matches the
   .ll-topic-card precedent at lines ~872-882 above).

   Cards stack via core wp:columns mobile flex; no grid override here.
   ============================================================================ */
.ll-why-grid .ll-card h3 a {
    color: var(--color-ink-900);
    text-decoration: none;
}
.ll-why-grid .ll-card h3 a:hover,
.ll-why-grid .ll-card h3 a:focus-visible {
    color: var(--color-brand-gold-strong);
}

/* ============================================================================
   Bankruptcy-process hub step links (page-bankruptcy-process pattern)
   ----------------------------------------------------------------------------
   The hub recomposes the legacy five-stage list as numbered .ll-step cards
   inside .ll-process-grid, each H3 wrapping the link to the matching sub-page.
   The home-process pattern uses the same .ll-step + .ll-process-grid surfaces
   but its H3s have no anchor, so this rule has no effect on /. Matches the
   ink-on-paper base + gold-strong hover treatment used by .ll-why-grid above
   and .ll-topic-card at line ~872.
   ============================================================================ */
.ll-process-grid .ll-step h3 a {
    color: var(--color-ink-900);
    text-decoration: none;
}
.ll-process-grid .ll-step h3 a:hover,
.ll-process-grid .ll-step h3 a:focus-visible {
    color: var(--color-brand-gold-strong);
}

/* ============================================================================
   Home hero banner (T-POLISH-HERO-CAROUSEL-CUT-01)
   ----------------------------------------------------------------------------
   Single static hero replacing the 3-slide Splide carousel (client decision
   2026-06-06). Markup comes from the [leverlaw_home_hero] shortcode in
   inc/shortcodes.php; copy is Customizer-driven. Composition, spacing, and
   the navy overlay are ported verbatim from the retired
   assets/css/hero-carousel.css, with raw-hex fallbacks replaced by the
   tokens.css custom properties (clears the K062 debt for this surface).
   Background stays Slide1.jpg per the image-agnostic ticket scope; the
   overlay stops (0.70 -> 0.85, rgba of ink-1000) are unchanged per the
   separate overlay-lighten ticket. No animation, so no reduced-motion
   handling is needed (WCAG 2.2.2: nothing auto-plays).

   Security note (RampStack web-dev): CSS-only. No new input/output surface.
   ============================================================================ */
.ll-hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 640px;
    /* Block padding is the legacy editorial vertical rhythm; inline padding
       mirrors the .ll-container ladder (--space-5 / --space-6 / --space-7
       at the same breakpoints) so the inner stage's left edge lines up with
       the header's content left edge (T-DESIGN-HOME-HERO-ALIGN-01). The
       mobile (max-width: 767px) override below replaces both sides. */
    padding-block: clamp(4rem, 8vw, 7rem);
    padding-inline: var(--space-5);
    /* Full-bleed: break out of .site-content's container padding, matching
       the retired carousel's edge-to-edge navy panel. */
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    /* ink-1000 fallback paints while the photo loads. */
    background-color: var(--color-ink-1000);
    background-image: url("../images/Slide1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Home route only: zero .site-content's top padding so the navy banner sits
   flush against the navy navigation (ported from hero-carousel.css, which
   no longer loads). Bottom padding stays for the following section. */
body.home .site-content {
    padding-top: 0;
}

.ll-hero-banner__overlay {
    position: absolute;
    inset: 0;
    /* Navy scrim: 14,18,26 = --color-ink-1000. Stops keep the W2.1 copy at
       WCAG AA over the brightest photo regions (see T-POLISH-HERO-BG-01). */
    background: linear-gradient(180deg, rgba(14, 18, 26, 0.70) 0%, rgba(14, 18, 26, 0.85) 100%);
    z-index: 1;
    pointer-events: none;
}

.ll-hero-banner__inner {
    position: relative;
    z-index: 2;
    /* Stage = 1440 (matches .ll-container--wide on the header), centered by
       the flex parent. Prose-cap is applied per-child below so the
       eyebrow/heading/lead/CTA sit at the stage's LEFT edge (lined up with
       the header logo) while the heading + lead still wrap at a reading
       measure. */
    width: 100%;
    max-width: var(--container-wide);
    text-align: left;
    color: var(--color-on-dark-strong);
}

.ll-hero-banner__eyebrow {
    margin: 0 0 1rem;
    color: var(--color-brand-gold);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ll-hero-banner__heading {
    margin: 0 0 1.25rem;
    max-width: 760px;
    color: var(--color-on-dark-strong);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.5vw + 1rem, 3.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.ll-hero-banner__lead {
    margin: 0 0 2rem;
    max-width: 640px;
    color: var(--color-on-dark-body);
    font-size: 1.125rem;
    line-height: 1.55;
}

.ll-hero-banner__lead a {
    color: var(--color-brand-gold);
}

.ll-hero-banner__cta {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    border-radius: 0;
    background-color: var(--color-brand-gold);
    color: var(--color-ink-1000);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ll-hero-banner__cta:hover,
.ll-hero-banner__cta:focus-visible {
    background-color: var(--color-brand-gold-soft);
    transform: translateY(-1px);
    outline: 2px solid transparent;
}

.ll-hero-banner__cta:focus-visible {
    outline: 2px solid var(--color-on-dark-strong);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .ll-hero-banner {
        min-height: 520px;
        padding: 4rem 1.25rem;
    }
    .ll-hero-banner__heading {
        font-size: clamp(1.875rem, 4vw + 0.5rem, 2.5rem);
    }
    .ll-hero-banner__lead {
        font-size: 1rem;
    }
}

/* Header-gutter ladder for the inline padding (paired with the base rule
   above). Same breakpoints as .ll-container so the hero stage edge tracks
   the header content edge from 768px upward. */
@media (min-width: 48em) {
    .ll-hero-banner {
        padding-inline: var(--space-6);
    }
}
@media (min-width: 80em) {
    .ll-hero-banner {
        padding-inline: var(--space-7);
    }
}

/* Reduced motion: the banner itself is static; only the CTA micro-transition
   is suppressed (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    .ll-hero-banner__cta {
        transition: none;
    }
}
/* End T-POLISH-HERO-CAROUSEL-CUT-01 */

/* ============================================================================
   2026 California Homestead Exemption KWR page (TS-POLISH-04)
   ----------------------------------------------------------------------------
   Scoped under .ll-homestead-page (set on every section in
   patterns/page-homestead-exemption-2026.php). Reuses existing tokens; no new
   spacing or color values. Purpose: lift the dollar figures inside body copy
   and the $743,681 maximum without changing the page's section rhythm.
   ============================================================================ */
.ll-homestead-page strong {
	color: var(--color-ink-1000);
	font-weight: 700;
}

.ll-homestead-page__highlight {
	border-left: 4px solid var(--color-brand-gold);
	margin-block: var(--space-5);
}

.ll-homestead-page__bands {
	margin-block: 0;
	padding-left: var(--space-5);
}

.ll-homestead-page__bands li {
	margin-block: var(--space-2);
	line-height: 1.55;
}

.ll-homestead-page__bands li strong {
	color: var(--color-brand-gold-strong);
}
/* End TS-POLISH-04 */

/* ============================================================================
   Home lead-capture section (T-CONV-07)
   ----------------------------------------------------------------------------
   Scoped wrapper for the Clio Grow [grow-contact-form] shortcode embedded by
   patterns/home-lead-form.php. The plugin renders its own form chrome; this
   wrapper only bounds width and softens the surface so the embed reads as a
   first-class section rather than a raw plugin drop. Token-only.
   ============================================================================ */
.ll-home-lead-form {
	background: var(--color-surface-0);
	border: var(--border-divider);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}

.ll-home-lead-form form {
	margin: 0;
}

@media (max-width: 47.9375em) {
	.ll-home-lead-form {
		padding: var(--space-4);
	}
}
/* End T-CONV-07 */

/* ============================================================================
   Related bankruptcy topics cross-link block (T-IA-TOPICS-PLACEMENT-STYLE-01).
   Rendered on bankruptcy_topic singles (sibling topics) and practice_area
   singles (mapped topics). Lives inside .ll-section--subtle so it visually
   separates from the body without competing with the cta-band.
   ============================================================================ */

.ll-related-topics {
	background: var(--color-surface-1);
}
.ll-related-topics > .ll-container {
	max-width: var(--container-default);
}
.ll-related-topics__heading {
	margin: 0 0 var(--space-5);
	font: 700 var(--text-3xl)/1.2 var(--font-display);
	color: var(--color-ink-900);
	text-align: center;
}
.ll-related-topics__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-4);
}
.ll-related-topics__item {
	margin: 0;
}
.ll-related-topics__link {
	display: block;
	height: 100%;
	padding: var(--space-5);
	background: var(--color-surface-0);
	border: 1px solid var(--color-ink-100);
	color: var(--color-ink-900);
	text-decoration: none;
	transition: border-color var(--motion-base), box-shadow var(--motion-base), transform var(--motion-base);
}
.ll-related-topics__link:hover,
.ll-related-topics__link:focus-visible {
	border-color: var(--color-brand-gold);
	box-shadow: 0 1px 0 var(--color-brand-gold);
	transform: translateY(-1px);
	outline: none;
}
.ll-related-topics__title {
	display: block;
	font: 700 var(--text-lg)/1.3 var(--font-sans);
	color: var(--color-ink-900);
	margin: 0 0 var(--space-2);
}
.ll-related-topics__answer {
	display: block;
	font: 400 var(--text-md)/1.5 var(--font-sans);
	color: var(--color-ink-500);
}
.ll-related-topics__hub {
	margin: var(--space-6) 0 0;
	text-align: center;
}
.ll-related-topics__hub-link {
	display: inline-block;
	font: 600 var(--text-md)/1.4 var(--font-sans);
	color: var(--color-ink-1000);
	text-decoration: none;
	border-bottom: 2px solid var(--color-brand-gold);
	padding-bottom: 2px;
}
.ll-related-topics__hub-link:hover,
.ll-related-topics__hub-link:focus-visible {
	color: var(--color-brand-gold-strong);
	outline: none;
}
/* Topics archive hub grid: explicit 3 desktop / 2 tablet / 1 mobile.
   Scoped to the bankruptcy_topic hub only; other CPT archives keep the shared
   ll-grid-auto auto-fit behavior. Mobile-first ladder: 1 col by default,
   2 from 560px, 3 from 900px (the 960 reading container with two gaps clears
   3 columns at ~300px per card). The chained selector raises specificity to
   (0,0,2,0) so this rule outranks .ll-grid-auto's auto-fit declaration in
   utilities.css regardless of stylesheet load order.
   T-POLISH-TOPICS-HUB-CARD-FORMAT-01: second selector covers the JSON
   theme-builder template path, where the wp:query wrapper carries
   ll-cpt-archive--bankruptcy-topic__grid and the actual grid lives on the
   wp:post-template <ul> inside it. Same 3/2/1 ladder applied to both paths so
   PHP fallback + Theme Builder render visually match. */
.ll-grid-auto.ll-cpt-archive--bankruptcy-topic__grid,
.ll-cpt-archive--bankruptcy-topic__grid > .wp-block-post-template {
	grid-template-columns: 1fr;
}
.ll-cpt-archive--bankruptcy-topic__grid > .wp-block-post-template {
	display: grid;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ll-cpt-archive--bankruptcy-topic__grid > .wp-block-post-template > li {
	margin: 0;
}
@media (min-width: 560px) {
	.ll-grid-auto.ll-cpt-archive--bankruptcy-topic__grid,
	.ll-cpt-archive--bankruptcy-topic__grid > .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 900px) {
	.ll-grid-auto.ll-cpt-archive--bankruptcy-topic__grid,
	.ll-cpt-archive--bankruptcy-topic__grid > .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* T-POLISH-TOPICS-HUB-CARD-FORMAT-01: hub-page card treatment on /topics/.
   Mirrors the .ll-why-grid .ll-card title-link convention (ink-on-paper +
   gold-strong hover) and adds a read-more affordance below the answer line.
   Scoped to .ll-cpt-archive--bankruptcy-topic__grid so the rule does not bleed
   to the .ll-why-grid + .ll-card composition on /why-leverlaw/. */
.ll-cpt-archive--bankruptcy-topic__grid .ll-card h3 a {
	color: var(--color-ink-900);
	text-decoration: none;
}
.ll-cpt-archive--bankruptcy-topic__grid .ll-card h3 a:hover,
.ll-cpt-archive--bankruptcy-topic__grid .ll-card h3 a:focus-visible {
	color: var(--color-brand-gold-strong);
}
.ll-cpt-archive--bankruptcy-topic__grid .ll-card__more {
	margin-top: auto;
	align-self: flex-start;
	font: 600 var(--text-sm)/1 var(--font-sans);
	color: var(--color-brand-gold-strong);
	text-decoration: none;
}
.ll-cpt-archive--bankruptcy-topic__grid .ll-card__more:hover,
.ll-cpt-archive--bankruptcy-topic__grid .ll-card__more:focus-visible {
	text-decoration: underline;
}
/* End T-POLISH-TOPICS-HUB-CARD-FORMAT-01 (supersedes the prior
   T-IA-TOPICS-PLACEMENT-STYLE-01 inverse-hero + .ll-archive-card hub for
   /topics/ only; other 5 CPT archives still use the archive-card system) */
   
/* ============================================================================
   T-DESIGN-HEADER-SINGLEROW-BUILD-01: single-row desktop header.
   ----------------------------------------------------------------------------
   Collapses the prior two-tier header (570 / 489) into ONE flex row: enlarged
   wp:site-logo on the left + the 10-item wp:navigation (ref 47902) inline and
   right-aligned. The two square header CTAs are removed (the body content
   already carries enough CTA instances); the [leverlaw_header_ctas] shortcode
   handler in inc/gp-hooks.php remains defined but unused (rollback-safe). The
   wp:site-logo width is owner-driven via the leverlaw_header_logo_width
   Customizer field (default 540, emitted by leverlaw_header_logo_width_css()
   in inc/gp-hooks.php); right-alignment is set on the wp:navigation block's
   own layout.justifyContent ("right") in header.json so items pack at the
   right edge of the nav area while the parent flex's space-between pushes
   the logo left + the nav block right.

   Supersedes the 489 .ll-site-header__nav-row bordered second-row band and
   the 570 .ll-btn--header CTA rules; the 489 .ll-site-header__ctas wrapper
   class is also retired because its enclosing group is gone from header.json.

   Scope: only >1024px (.ll-site-header is display:none at <=1024px from the
   rule at line 1709; GP Mobile Header + sticky bottom CTA own mobile chrome).
   ============================================================================ */
.ll-site-header__top {
    padding-block: 0.75rem;
}

/* ============================================================================
   T-RESTORE-BANKRUPTCY-TOPICS-TABLES-BRAND-01
   Reference data tables on the static /bankruptcy-topics/ tree.
   Used by /bankruptcy-topics/exemptions/ (47426) and /bankruptcy-topics/income/
   (47433). Brand palette only - no inline bgcolor. Preserves the two semantic
   distinctions the legacy palette encoded: column-header row vs body row, and
   the mid-table 703 -> 704 section break. The legacy decorative accent-row
   coloring is intentionally dropped (it carried no consistent semantic meaning
   - see decisions/020-T-RESTORE-BANKRUPTCY-TOPICS-TABLES-BRAND-01_decision.md).
   .ll-draft-note is the visible "DRAFT - pending attorney verification" banner
   the CEO required to cover both the narrative figures ($30,825, $600,000) and
   the table figures while Christine / Jill complete the checklist.
   ============================================================================ */
.ll-draft-note {
	margin: 0 0 var(--space-4);
	padding: 0.65rem 0.85rem;
	background: var(--color-surface-1);
	border-left: 4px solid var(--color-brand-gold);
	color: var(--color-ink-900);
	font-size: 0.95rem;
	line-height: 1.5;
}
.ll-draft-note strong {
	color: var(--color-ink-1000);
}
.ll-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--space-4) 0;
}
.ll-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--color-brand-gold);
	background: var(--color-surface-0);
	color: var(--color-ink-700);
	font-size: 0.95rem;
	line-height: 1.5;
}
.ll-table th,
.ll-table td {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--color-ink-200);
	text-align: left;
	vertical-align: top;
}
.ll-table thead.ll-table__head th,
.ll-table tr.ll-table__section th {
	background: var(--color-ink-1000);
	color: var(--color-on-dark-strong);
	font-weight: 600;
	letter-spacing: 0.01em;
	border-color: var(--color-ink-1000);
}
.ll-table tbody th[scope="row"] {
	font-weight: 600;
	color: var(--color-ink-900);
	background: var(--color-surface-1);
	white-space: nowrap;
}
.ll-table tbody tr:nth-child(even) > td {
	background: var(--color-surface-1);
}
.ll-table tbody tr:nth-child(odd) > td {
	background: var(--color-surface-0);
}
.ll-table tr.ll-table__section th {
	text-align: left;
}
@media (max-width: 480px) {
	.ll-table {
		font-size: 0.875rem;
	}
	.ll-table th,
	.ll-table td {
		padding: 0.5rem 0.6rem;
	}
	.ll-table tbody th[scope="row"] {
		white-space: normal;
	}
}
/* End T-RESTORE-BANKRUPTCY-TOPICS-TABLES-BRAND-01 */
/* ============================================================================
   T-UNIFY-CHILD-PAGES-PHASE2-CPT-PA-TOPICS-01 -- Unified CPT-single sidebar shell.
   ----------------------------------------------------------------------------
   Two-column body for practice_area + bankruptcy_topic (Q&A) singles per
   DEC-CHILD-PAGE-UNIFICATION-01 (locked 2026-06-13):
     - 30 sidebar / 70 body at >= 64em viewports.
     - sidebar on the LEFT (DEC item 1).
     - at tablet/mobile: column-reverse so the body reads ABOVE the sidebar
       (DEC item 11); the sidebar becomes a navigation appendix.
     - mobile sibling-list cap of 4 + "All <hub> ->" footer link (DEC item 12).
   Phase 3+ reuses these primitives for myth/location/video/testimonial singles.
   ============================================================================ */

.ll-cpt-body-cols {
	gap: var(--space-7);
}
.ll-cpt-body-cols__sidebar {
	min-width: 0;
}
.ll-cpt-body-cols__body {
	min-width: 0;
}
@media (max-width: 63.999em) {
	/* Body reads above the sidebar on tablet/mobile. wp:columns stacks
	   sidebar-first naturally; flex-direction: column-reverse re-orders. */
	.ll-cpt-body-cols {
		flex-direction: column-reverse;
	}
	.ll-cpt-body-cols__sidebar,
	.ll-cpt-body-cols__body {
		flex-basis: 100% !important;
	}
}

/* ---- Sidebar shell (the <aside> wrapping the 3 cards) ---- */
.ll-cpt-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.ll-cpt-sidebar > .ll-sidebar-card {
	margin: 0;
}

/* ---- Shared sidebar card primitives ---- */
.ll-sidebar-card {
	background: var(--color-surface-1);
	padding: var(--space-5);
	border-radius: 0;
}
.ll-sidebar-card__heading {
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	font-weight: 700;
	margin: 0 0 var(--space-4);
	color: var(--color-ink-1000);
	line-height: 1.2;
}

/* ---- Card 2: master-hub switcher (collapsible) ---- */
/* T-DESIGN-SIDEBAR-RESTRUCTURE-01: the switcher ships as a native
   <details>/<summary>, collapsed by default. The summary doubles as the
   card heading (.ll-sidebar-card__heading typography is preserved) AND the
   keyboard-operable toggle (Enter/Space activate it natively). When the
   <details> is closed the summary's bottom margin collapses to 0 so the card
   reads as a single heading line; when open, the gap to the list is restored
   via margin-top on the list itself. */
.ll-hub-switcher__details {
	margin: 0;
}
.ll-hub-switcher__summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
	min-height: 44px;
}
.ll-hub-switcher__summary::-webkit-details-marker { display: none; }
.ll-hub-switcher__summary::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--motion-base);
	flex-shrink: 0;
}
.ll-hub-switcher__details[open] .ll-hub-switcher__summary::after {
	transform: rotate(-135deg);
}
.ll-hub-switcher__list {
	list-style: none;
	margin: var(--space-4) 0 0;
	padding: 0;
}
.ll-hub-switcher__item {
	margin: 0;
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-ink-200);
}
.ll-hub-switcher__item:last-child {
	border-bottom: none;
}
.ll-hub-switcher__link {
	display: block;
	color: var(--color-ink-700);
	font-weight: 600;
	font-size: var(--text-sm);
	text-decoration: none;
	line-height: 1.4;
}
.ll-hub-switcher__link:hover,
.ll-hub-switcher__link:focus-visible {
	color: var(--color-brand-gold-strong);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.ll-hub-switcher__link--current {
	color: var(--color-ink-1000);
	text-decoration: underline;
	text-decoration-color: var(--color-brand-gold);
	text-decoration-thickness: 0.18em;
	text-underline-offset: 0.22em;
}

/* ---- Card 2: per-hub sibling list ---- */
.ll-sidebar-siblings__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ll-sidebar-siblings__item {
	margin: 0;
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-ink-200);
}
.ll-sidebar-siblings__item:last-child {
	border-bottom: none;
}
.ll-sidebar-siblings__link {
	display: block;
	color: var(--color-ink-700);
	font-weight: 600;
	font-size: var(--text-sm);
	text-decoration: none;
	line-height: 1.4;
}
.ll-sidebar-siblings__link:hover,
.ll-sidebar-siblings__link:focus-visible {
	color: var(--color-brand-gold-strong);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.ll-sidebar-siblings__link--current {
	color: var(--color-ink-1000);
	text-decoration: underline;
	text-decoration-color: var(--color-brand-gold);
	text-decoration-thickness: 0.18em;
	text-underline-offset: 0.22em;
}
.ll-sidebar-siblings__more {
	margin: var(--space-4) 0 0;
	font-size: var(--text-sm);
}
.ll-sidebar-siblings__more-link {
	color: var(--color-brand-gold-strong);
	font-weight: 600;
	text-decoration: none;
}
.ll-sidebar-siblings__more-link:hover,
.ll-sidebar-siblings__more-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Mobile sibling cap: first 4 + the "All <hub> ->" link. Hides the 5th and
   beyond at narrow widths (DEC item 12). The "more" link remains visible. */
@media (max-width: 47.999em) {
	.ll-sidebar-siblings__list .ll-sidebar-siblings__item:nth-child(n+5) {
		display: none;
	}
}

/* ---- Card 3: shared CTA card ---- */
.ll-sidebar-cta {
	background: var(--color-ink-1000);
	color: var(--color-on-dark-body);
}
.ll-sidebar-cta__heading {
	color: var(--color-on-dark-strong);
}
.ll-sidebar-cta__lead {
	font-size: var(--text-sm);
	color: var(--color-on-dark-body);
	margin: 0 0 var(--space-4);
}
.ll-sidebar-cta__action {
	margin: 0;
}
.ll-sidebar-cta__button {
	display: inline-block;
}

/* ---- /ko/ sidebar contact card (T-DESIGN-KOREAN-SIDEBAR-CARD-01) ----
   The 사무소 안내 card in ko-sidebar.php is raw template HTML, so it gets none
   of the WP block-layout classes the /contact/ body card relied on; the fit
   rules the block era supplied are re-created here, every selector scoped
   under .ll-ko-sidebar so no non-/ko/ surface can be touched.
   (1) Heading margin collapses to 0: .ll-card is already a flex column with
       gap var(--space-4), so .ll-sidebar-card__heading's own bottom margin
       would double the gap to the first row.
   (2) Clusters top-align with the 1px icon nudge, same optics as the
       T-FIX-CONTACT-CARD-POLISH-01 rules on .ll-contact-columns: multi-line
       rows (addresses, hours) must hang from the first text line, and at sm
       line-height (~22px) the nudge centers the 20px icon on that line.
   (3) Paragraphs zero their default margins (the card's rhythm is the flex
       gap), and the label+value stacks reintroduce the space-2 gap the block
       markup expressed as blockGap.
   (4) Clusters must not wrap in the narrow column: the .ll-cluster utility's
       flex-wrap dropped the long hours line below an orphaned clock icon at
       390. nowrap + min-width 0 makes long lines wrap INSIDE the text column
       so every row keeps its icon + text shape. */
.ll-ko-sidebar .ll-sidebar-contact .ll-sidebar-card__heading {
	margin: 0;
}
.ll-ko-sidebar .ll-sidebar-contact .ll-cluster {
	align-items: flex-start;
	flex-wrap: nowrap;
}
.ll-ko-sidebar .ll-sidebar-contact .ll-cluster > p,
.ll-ko-sidebar .ll-sidebar-contact .ll-sidebar-contact__lines {
	min-width: 0;
}
.ll-ko-sidebar .ll-sidebar-contact .ll-cluster > .ll-icon {
	margin-block-start: 1px;
}
.ll-ko-sidebar .ll-sidebar-contact p {
	margin: 0;
}
.ll-ko-sidebar .ll-sidebar-contact .ll-sidebar-contact__lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Contact: stretch the office card to the form column height at desktop (2026-06-15) */
@media (min-width: 782px) {
	.ll-contact-columns { align-items: stretch; }
	.ll-contact-columns > .wp-block-column { display: flex; flex-direction: column; }
	.ll-contact-columns .ll-card { flex: 1; }
}

/* T-FIX-CONTACT-CARD-FORMAT-01: defend the /contact/ office card against any
   inherited centering and stretch the inner flex clusters full-width so each
   row (Call, Text, addresses, hours, Email) reads icon + label + value flush
   left. The `.ll-cluster` utility is `display: flex` without an explicit width,
   so WP's `is-layout-constrained > * { margin: 0 auto }` block-layout rule
   shrink-centers it inside `.ll-card` (which composes `display: flex` column
   + WP's constrained-layout class). `width: 100%` + `justify-content: flex-start`
   stop that path without altering the cluster utility's other consumers (other
   pages: scope is gated to `.ll-contact-columns .ll-card`). The explicit
   `text-align: left` is defense-in-depth against any future child-paragraph
   alignment rule cascading into the card. */
.ll-contact-columns .ll-card {
	text-align: left;
}
.ll-contact-columns .ll-card .ll-cluster {
	width: 100%;
	justify-content: flex-start;
}

/* T-FIX-CONTACT-CARD-POLISH-01: card row icon-to-text alignment + tighten the
   trailing gap beneath Office hours.
   (1) `align-items: flex-start` puts every row's icon top at the first text
       line's top regardless of whether the row is single-line (Call / Text /
       Email shortcode-emitted clusters, which had defaulted to the
       `.ll-cluster` utility's `align-items: center`) or multi-line (LA / LB /
       Office hours wp:groups, which already carry verticalAlignment top
       through their pattern markup). A 1px icon nudge optically centers the
       20x20 icon against the first text line at sm body size: line-height
       ~22px, so (22-20)/2 = 1px puts the icon's vertical center on the
       first em-box center. Single-line rows render visually identically to
       the prior `align-items: center` default (cluster height equals
       line-height there, so the math is the same).
   (2) The email row's inline `style="margin-top:var(--wp--preset--spacing--2)"`
       emitted by `[leverlaw_email as="row"]` stacks ON TOP of the .ll-card
       flex gap, so the gap beneath Office hours measured ~24px (16 gap + 8
       inline) instead of the card's normal 16px rhythm. Zeroing the inline
       margin here (scoped to .ll-contact-columns so other consumers of the
       shortcode keep their margin) restores rhythm without changing the
       shortcode. `!important` is required because the inline `style` attr
       on the emitted div would otherwise win the cascade. The 180-era
       `.ll-contact-columns .ll-card { flex: 1 }` equal-height stretch is
       untouched. */
.ll-contact-columns .ll-card .ll-cluster {
	align-items: flex-start;
}
.ll-contact-columns .ll-card .ll-cluster > .ll-icon {
	margin-block-start: 1px;
}
.ll-contact-columns .ll-card .ll-cluster.ll-email {
	margin-block-start: 0 !important;
}

/* T-FIX-CONTACT-CARD-VCENTER-01: with the 180 desktop equal-height stretch
   (`.ll-contact-columns .ll-card { flex: 1 }`) the office card matches the
   form column's height, but the card's content was top-aligned and the
   bottom pooled empty whitespace. `.ll-card` is already
   `display: flex; flex-direction: column;` (line 442), so
   `justify-content: center` vertically centers the existing cluster rows
   along the main axis without touching the 180 stretch (`flex: 1`) or
   the 188 left-alignment / icon alignment (cross-axis text + icon
   placement, orthogonal to the centering added here). Scoped to the same
   782px breakpoint as the 180 stretch so mobile (where the card stacks at
   content height) is unaffected. */
@media (min-width: 782px) {
	.ll-contact-columns .ll-card {
		justify-content: center;
	}
}

/* ============================================================================
   T-POLISH-BLOG-CARD-PARITY-01 - 2026-06-17
   ----------------------------------------------------------------------------
   PART A: home teaser "Continue reading" reads as the SAME gold-outline brand
   button as the /blog/ archive card's READMORE-01 button.

   Surfaces measured (Chrome 1366x900, LocalWP):
     - Archive /blog/ card uses `<a class="ll-btn ll-blog-readmore__link">`
       inside `<p class="ll-blog-readmore">`. Styled by the shared `.ll-btn`
       block (lines ~320-385) plus the READMORE-01 tap-target override at
       line ~2863 (`body.blog article.post .ll-blog-readmore .ll-btn`).
     - Home teaser `.ll-blog-card` carries a wp:post-excerpt with
       moreText "Continue reading ->" emitted as
       `<p class="wp-block-post-excerpt__more-text">
          <a class="wp-block-post-excerpt__more-link">Continue reading ->`
       (per patterns/home-blog-teaser.php line 43). Before this rule the
       link rendered as an unstyled gold-color text link with the trailing
       arrow inline, breaking visual parity with the archive button.

   Scope guard: the selector is `.ll-blog-card .wp-block-post-excerpt__more-link`
   so the attorney CPT card's "Read full bio ->" more-link (also
   `wp-block-post-excerpt__more-link` but in a `.ll-card` not `.ll-blog-card`)
   is unaffected. Verified by grepping the rendered home HTML: only blog
   teaser cards live inside `.ll-blog-card`.

   Mirror, not alter: this rule mirrors the shared `.ll-btn` block (border,
   padding, font, hover, focus-visible) plus the READMORE-01 inline-flex +
   44px tap target. The archive `.ll-btn` rule itself is NOT touched, so
   the archive card's appearance is unchanged.

   Markup: the wp:post-excerpt moreText still contains the trailing arrow
   character. The ticket forbids a home-teaser markup change without a
   gated rebuild; CSS cannot retarget a single text-node character without
   removing the accessible name. The arrow stays on the teaser button and
   is acceptable as the frontend-design call: both cards read as the same
   gold-outline component, differing only by one trailing glyph.

   GP / WP docs cited:
     - GP Documentation/docs_archive/articles/buttons.md (shared button block
       primitive and the `is-style-leverlaw` brand variants)
     - WordPress core block reference: core/post-excerpt emits
       `wp-block-post-excerpt__more-link` when `moreText` is set. The link
       is a real `<a href>` (keyboard-focusable, real accessible name),
       so converting it to a button via CSS preserves a11y.

   Security note (RampStack web-dev, legal site): presentation-only CSS;
   no new input/output, no DB, no enqueue, no shortcode, no JS. Pass.
   ============================================================================ */
.ll-blog-card .wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 22px;
	border: 2px solid var(--color-brand-gold-strong);
	background: transparent;
	color: var(--color-ink-700);
	font-family: var(--font-sans);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.02em;
	border-radius: 0;
	transition: border-color var(--motion-fast),
	            background-color var(--motion-fast),
	            color var(--motion-fast);
}
.ll-blog-card .wp-block-post-excerpt__more-link:hover {
	border-color: var(--color-brand-gold-deep);
	color: var(--color-ink-900);
}
.ll-blog-card .wp-block-post-excerpt__more-link:focus-visible {
	outline: 0;
	box-shadow: var(--shadow-focus-gold);
}

/* ----------------------------------------------------------------------------
   PART B: stop the /blog/ flex container from stretching its two columns to
   each other's height.

   Diagnosis (Chrome 1366x900, LocalWP measure):
     - `#content.site-content` is GP's right-sidebar layout: display: flex,
       align-items: normal (which resolves to `stretch` for a flex container).
     - On /blog/ the sidebar (#right-sidebar > aside.ll-blog-sidebar) is the
       TALLER of the two flex children at 1822.95px (Categories 718.5px +
       Recent posts 552.5px + Archives 487.9px + the 32px between-section
       gaps), because the Archives section lists every year from 2009 to
       2025.
     - The cards column (#primary > main.site-main) is 1669.80px natural
       (3 rows of 3-up cards + 1 partial row + pagination). With
       align-items: stretch on the flex container, #primary is forced to
       1822.95px to match the sidebar, leaving ~153px of dead white below
       the pagination row.
   The "tall white panel" the ticket flags is that 153px on the cards
   column, not the sidebar itself - the sidebar (every section) is already
   only as tall as its content (h2 + ul, no min-height, no padding excess,
   no widget chrome - sidebar.php emits a hand-rolled `.ll-blog-sidebar`,
   not a widget area).

   Fix: scope `align-items: flex-start` to `body.blog #content.site-content`
   so neither column is stretched. The sidebar keeps its natural height,
   the cards column ends cleanly at its pagination row, and the 153px of
   dead space disappears. The sidebar will now extend slightly below the
   cards column (its natural geometry); per the ticket option (a) this is
   the intended trade for removing the stretch artifact.

   Scope strictly to body.blog (the /blog/ posts index). Single posts use
   no-sidebar via the generate_sidebar_layout filter (inc/blog.php) so they
   never reach this layout. Category/tag/date archives do use right-sidebar
   per the same filter but carry body.archive (not body.blog), so they are
   not touched here. The cards grid (`body.blog #primary > main.site-main`
   at line ~2589, T-POLISH-CARD-3UP-01) keeps its own internal
   align-items: stretch for per-row card uniformity - different scope.

   Security note: presentation-only CSS.
   ---------------------------------------------------------------------------- */
body.blog #content.site-content {
	align-items: flex-start;
}
/* End T-POLISH-BLOG-CARD-PARITY-01 */

/* ============================================================================
   T-DESIGN-FAMILY-BODY-CALLOUTS-01 - 2026-06-18
   ----------------------------------------------------------------------------
   Two reusable body components for the family-page tree (about + why-leverlaw
   descendants). Both are intended to sit inside a `.ll-container--wide` body
   section between the family-header band and the trailing cta-band.

   .ll-callout: branded pull-out for a key line/stat. Surface-1 fill + gold
   left accent bar + ink-1000 body. Square corners (project rule: corner
   radius capped to inputs only). Wraps existing copy verbatim; never
   replaces or rewrites it.

   .ll-inline-cta: smaller in-flow consultation card mirroring the practice-
   area sidebar `.ll-sidebar-cta` ("Talk to us first") - same dark-navy
   surface + on-dark text + gold-fill primary button - laid out as a
   responsive heading/lead + button row that stacks under 48em.

   Scope guard: both classes are scoped strictly to `.ll-callout` /
   `.ll-inline-cta`; they do not piggyback on any existing selectors
   (.ll-card, .ll-sidebar-card, .ll-step, .ll-blog-card, .ll-archive-card,
   .ll-topic-card, .ll-related-posts__card all keep their existing rules).
   ---------------------------------------------------------------------------- */
.ll-callout {
	background: var(--color-surface-1);
	border-left: 4px solid var(--color-brand-gold);
	padding: var(--space-5) var(--space-6);
	margin: var(--space-6) 0;
	border-radius: 0;
}
.ll-callout > :first-child { margin-top: 0; }
.ll-callout > :last-child  { margin-bottom: 0; }
.ll-callout p {
	color: var(--color-ink-1000);
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}
.ll-callout__eyebrow {
	display: block;
	margin: 0 0 var(--space-2);
	font-size: var(--text-2xs);
	font-weight: 700;
	color: var(--color-brand-gold-strong);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.2;
}
.ll-callout__cite {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Surface-1 sections (`.ll-section--subtle`) flip the callout to surface-0
   so the box still reads against the surrounding gray. */
.ll-section--subtle .ll-callout {
	background: var(--color-surface-0);
}

.ll-inline-cta {
	background: var(--color-ink-1000);
	color: var(--color-on-dark-body);
	padding: var(--space-6);
	margin: var(--space-7) 0;
	border-radius: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	justify-content: space-between;
}
.ll-inline-cta__body {
	flex: 1 1 18rem;
	min-width: 0;
}
.ll-inline-cta__heading {
	color: var(--color-on-dark-strong);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 var(--space-2);
}
.ll-inline-cta__lead {
	margin: 0;
	color: var(--color-on-dark-body);
	font-size: var(--text-md);
	line-height: 1.5;
}
.ll-inline-cta__action {
	flex: 0 0 auto;
	margin: 0;
}
.ll-inline-cta__button {
	display: inline-block;
}

@media (max-width: 47.999em) {
	.ll-inline-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}
}
/* End T-DESIGN-FAMILY-BODY-CALLOUTS-01 */

/* ============================================================================
   Bankruptcy Process Stepper (T-PROCESS-STEPPER-SHELL-01, Phase A shell)
   ----------------------------------------------------------------------------
   Reusable five-stop progress bar for the /bankruptcy-process/ tree. Default
   state shows the overview (used on the hub). The current step is matched by
   the WordPress-default body slug class against the per-item modifier; the hub
   body class is `page-bankruptcy-process` and matches none of the 5 step
   slugs, so the hub renders with no item current. Visited and current styles
   land on Phase B child pages automatically; Phase C wires the interactive
   checklist + localStorage on top of this shell.
   ============================================================================ */

.ll-stepper-band {
	padding-top: var(--space-6);
	padding-bottom: var(--space-6);
}

.ll-stepper.wp-block-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	position: relative;
	margin-top: var(--space-4);
}

.ll-stepper__item.wp-block-group {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	padding: 0;
	position: relative;
}

/* Horizontal connector between items - default ink-200; becomes gold-soft when
   the preceding item is visited (Phase B+ behavior). */
.ll-stepper__item::before {
	content: "";
	position: absolute;
	top: calc(var(--space-7) + 2px);
	left: calc(-50% + var(--space-5));
	right: calc(50% + var(--space-5));
	height: 2px;
	background: var(--color-ink-200);
	z-index: 0;
}
.ll-stepper__item:first-child::before {
	display: none;
}

.ll-stepper__num {
	font: 700 var(--text-xs)/1 var(--font-display);
	color: var(--color-brand-gold-strong);
	letter-spacing: var(--tracking-wide);
	margin: 0 0 var(--space-2);
	text-transform: none;
}

.ll-stepper .ll-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 0 auto var(--space-3);
	padding: var(--space-3);
	background: var(--color-surface-0);
	border: 2px solid var(--color-ink-200);
	border-radius: var(--radius-pill);
	box-sizing: content-box;
	position: relative;
	z-index: 1;
	vertical-align: middle;
}

.ll-stepper__label {
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: var(--leading-snug);
	margin: 0 0 var(--space-2);
	color: var(--color-ink-500);
}
.ll-stepper__label a {
	color: inherit;
	text-decoration: none;
}
.ll-stepper__label a:hover,
.ll-stepper__label a:focus-visible {
	color: var(--color-ink-1000);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ll-stepper__blurb {
	margin: 0;
}
/* T-A11Y-REMEDIATE-01 (A5 BLOCKER, SC 1.4.3): the stepper blurb markup
   carries the has-ink-400-color preset class from inc/shortcodes.php, which
   renders ink-400 (#6E7689) on surface-1 (#F8F9FB) at 13px = 4.36:1 (below
   the 4.5:1 normal-text minimum). The WP-generated preset class is
   !important, so override here with the same flag to lift the color to
   ink-500 (#4E556A) = 6.97:1 on surface-1 (passes AA, near AAA). Size +
   weight still demote the blurb visually from body prose. */
.ll-stepper__blurb.has-ink-400-color {
	color: var(--color-ink-500) !important;
}

/* --- Visited state (Phase C will toggle the modifier; no item is visited
       on the Phase A hub render). --- */
.ll-stepper__item--visited .ll-icon {
	background: var(--color-brand-gold-soft);
	border-color: var(--color-brand-gold-soft);
}
.ll-stepper__item--visited + .ll-stepper__item::before {
	background: var(--color-brand-gold-soft);
}
.ll-stepper__item--visited .ll-stepper__label {
	color: var(--color-ink-700);
}

/* --- Current state - flipped by a generic `--current` modifier so Phase B+
       child pages can mark the matching item server-side (via a body_class
       filter + a small selector swap) or Phase C can flip it client-side
       from localStorage. Phase A on the hub renders no current item; the
       hub is the overview. WordPress does not add a `page-{slug}` body class
       to pages by default, so a slug-based selector strategy is deferred to
       Phase B+. */
.ll-stepper__item--current .ll-icon {
	background: var(--color-brand-gold);
	border-color: var(--color-brand-gold-strong);
	box-shadow: 0 0 0 4px rgba(225, 178, 67, 0.18);
}
.ll-stepper__item--current .ll-stepper__label {
	color: var(--color-ink-1000);
	font-weight: 700;
}

/* --- Responsive: keep 5-up to 62em; 2x3 grid below 48em; stacked on phone. */
@media (max-width: 62em) {
	.ll-stepper__label {
		font-size: var(--text-xs);
	}
	.ll-stepper__blurb {
		display: none;
	}
}

@media (max-width: 47.999em) {
	.ll-stepper.wp-block-group {
		flex-wrap: wrap;
		gap: var(--space-5);
	}
	.ll-stepper__item.wp-block-group {
		flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3);
	}
	.ll-stepper__item::before {
		display: none;
	}
}

@media (max-width: 30em) {
	.ll-stepper.wp-block-group {
		flex-direction: column;
		gap: var(--space-3);
	}
	.ll-stepper__item.wp-block-group {
		flex: 0 0 100%;
		display: flex;
		align-items: center;
		text-align: left;
		gap: var(--space-3);
	}
	.ll-stepper__item .ll-stepper__num {
		display: none;
	}
	.ll-stepper .ll-icon {
		margin: 0;
		flex-shrink: 0;
	}
	.ll-stepper__label {
		flex: 1 1 auto;
		margin: 0;
	}
}
/* End T-PROCESS-STEPPER-SHELL-01 */

/* ----------------------------------------------------------------------------
   T-POLISH-VIDEO-ARCHIVE-3COL-01: video archive grid - 3 desktop / 2 tablet / 1 mobile.
   T-DESIGN-VIDEO-GRID-4COL-01 (2026-06-24): extended the ladder with a 4-column
   tier from 1200px so 11 video cards lay out 4 + 4 + 3 at desktop, stepping
   down 4 -> 3 -> 2 -> 1 below.
   Scoped to body.post-type-archive-video so the shared .ll-grid-auto--lg
   auto-fit rule in utilities.css continues to drive every other CPT archive
   (attorney, location, myth, testimonial, practice_area). The chained
   body-class selector raises specificity to (0,0,2,0), enough to outrank the
   utilities.css single-class rule regardless of stylesheet load order.
   Mobile-first ladder mirrors the bankruptcy-topic hub: 1 col by default,
   2 from 560px, 3 from 900px. The video archive container is
   .ll-container--wide (max-width 1080px) so 3 columns at minmax(0, 1fr)
   give roughly 340px per card with a single var(--space-5) gap.
   ---------------------------------------------------------------------------- */
body.post-type-archive-video .ll-grid-auto--lg {
	grid-template-columns: 1fr;
}
@media (min-width: 560px) {
	body.post-type-archive-video .ll-grid-auto--lg {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 900px) {
	body.post-type-archive-video .ll-grid-auto--lg {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	body.post-type-archive-video .ll-grid-auto--lg {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
/* End T-POLISH-VIDEO-ARCHIVE-3COL-01 / T-DESIGN-VIDEO-GRID-4COL-01 */

/* ============================================================================
   T-PROCESS-STEPPER-CHECKLIST-04: per-step interactive checklist component
   ----------------------------------------------------------------------------
   Renders below the body prose on each bankruptcy-process step + sub-page
   via the [leverlaw_step_checklist] shortcode. Native <input type=checkbox>
   + <label for> inside a <fieldset><legend>; an aria-live "X of N complete"
   readout; gold focus-visible ring; square corners on the section + items
   (input rounding is OS-default per the --radius-input "inputs only" rule).
   Reuses the existing .ll-draft-note pill above the fieldset; no second
   progress bar (the top stepper is the A2 Element).
   ============================================================================ */

.ll-step-checklist {
	margin: var(--space-6) 0 var(--space-5);
}

.ll-step-checklist__fieldset {
	margin: 0;
	padding: var(--space-5);
	border: 1px solid var(--color-ink-200);
	background: var(--color-surface-0);
	border-radius: 0;
}

.ll-step-checklist__legend {
	padding: 0 var(--space-2);
	margin: 0;
	font: 700 var(--text-lg)/var(--leading-snug) var(--font-display);
	color: var(--color-ink-1000);
	letter-spacing: var(--tracking-tight);
}

.ll-step-checklist__items {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: var(--space-4) 0 0;
}

.ll-step-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: var(--color-surface-1);
	border-left: 3px solid var(--color-ink-200);
	border-radius: 0;
	transition: border-color var(--motion-fast), background-color var(--motion-fast);
}

.ll-step-checklist__item:has(.ll-step-checklist__checkbox:checked) {
	border-left-color: var(--color-brand-gold);
	background: var(--color-surface-2);
}

.ll-step-checklist__checkbox {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.25rem 0 0;
	accent-color: var(--color-brand-gold);
	cursor: pointer;
}

.ll-step-checklist__checkbox:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus-gold);
}

.ll-step-checklist__label {
	flex: 1 1 auto;
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-ink-1000);
	cursor: pointer;
}

.ll-step-checklist__item:has(.ll-step-checklist__checkbox:checked) .ll-step-checklist__label {
	color: var(--color-ink-500);
	text-decoration: line-through;
	text-decoration-color: var(--color-brand-gold-strong);
	text-decoration-thickness: 1px;
}

.ll-step-checklist__progress {
	margin: var(--space-4) 0 0;
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-ink-200);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-ink-700);
	letter-spacing: var(--tracking-wide);
}

@media (max-width: 30em) {
	.ll-step-checklist__fieldset {
		padding: var(--space-4);
	}
	.ll-step-checklist__legend {
		font-size: var(--text-md);
	}
}
/* End T-PROCESS-STEPPER-CHECKLIST-04 */

/* ============================================================================
   T-DESIGN-ATTORNEY-SINGLE-REBUILD-01: redesigned attorney single
   ----------------------------------------------------------------------------
   Pattern-scoped CSS for the Juris-reskin attorney single per
   DEC-ATTORNEY-SINGLE-REDESIGN-01 (2026-06-18 + 2026-06-20 refinement). All
   classes namespaced .ll-attorney-single-* to avoid collision with the home
   Loop's .ll-attorney-card rule above (line ~1693, T-POLISH-HOME-ATTORNEYS-01).
   Composition order (top -> bottom): dark breadcrumb -> 50/50 hero (portrait
   left + surface-1 centered contact card right) -> 50/50 body sharing the
   hero seam (white bio + Education left | ink-1000 Areas panel right) ->
   cta-band. Container width is .ll-container--wide (1440px) per
   DEC-LAYOUT-SYSTEM-01; the seam at 50% lands at the same x-coordinate in
   both hero and body, satisfying the "continuous 50/50 divide" rule. The
   body >=16px (--text-md, K034), the CTA stays canvas-button radius
   (--radius-input 3px, K033 + K035), the bar line is conditional via
   [leverlaw_bar_admitted] (K025), and the mail icon's accessible name is
   carried by the visible "Mail" label (K032).
   AA contrast verified against tokens.css :root values (sRGB relative
   luminance, WCAG 2.x):
     on-dark-muted #94A0B8 on ink-1000 #0E121A  = 6.2:1 (AA Normal)  breadcrumb
     on-dark-strong #FFFFFF on ink-1000          = 17.9:1 (AAA)       current
     ink-1000 on surface-1 #F8F9FB              = 17.1:1 (AAA)       card name
     ink-700 on surface-1                        = 11.5:1 (AAA)       card role
     ink-500 on surface-0                        = 7.3:1  (AAA)       body prose
     gold-strong #A98822 on surface-0           = 4.5:1  (AA Large)   eyebrow
     gold-deep #7E5F15 on surface-0             = 5.9:1  (AA Normal)  bio links
     brand-gold #E1B243 on ink-1000             = 9.4:1  (AAA)        areas links + CTA
     ink-1000 on brand-gold                      = 9.4:1  (AAA)        CTA label
   ============================================================================ */

/* ---- Breadcrumb (dark band, ink-1000) ---- */
.ll-attorney-single-breadcrumb {
	padding-block: var(--space-3);
}
.ll-attorney-single-breadcrumb > .ll-container--wide {
	gap: var(--space-3);
	color: var(--color-on-dark-muted);
}
.ll-attorney-single-breadcrumb__home,
.ll-attorney-single-breadcrumb__sep,
.ll-attorney-single-breadcrumb__current {
	margin: 0;
	font: 400 var(--text-xs)/1 var(--font-sans);
	letter-spacing: 0.02em;
}
.ll-attorney-single-breadcrumb__home a {
	color: var(--color-brand-gold);
	text-decoration: none;
}
.ll-attorney-single-breadcrumb__home a:hover,
.ll-attorney-single-breadcrumb__home a:focus-visible {
	color: var(--color-brand-gold-soft);
}
.ll-attorney-single-breadcrumb__sep {
	color: var(--color-on-dark-muted);
}
.ll-attorney-single-breadcrumb__current {
	color: var(--color-on-dark-strong);
}

/* ---- Hero (50/50: portrait + surface-1 contact card) ---- */
.ll-attorney-single-hero > .ll-container--wide {
	padding-inline: 0;
}
.ll-attorney-single-hero__cols.wp-block-columns {
	margin: 0;
	align-items: stretch;
}
.ll-attorney-single-hero__portrait-col,
.ll-attorney-single-hero__card-col {
	padding: 0;
}
.ll-attorney-single-hero__portrait-col {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6);
}
.ll-attorney-single-hero__portrait-col .wp-block-post-featured-image {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ll-attorney-single-hero__portrait-col .wp-block-post-featured-image img {
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
	border-radius: 0;
	object-fit: none;
}
.ll-attorney-single-hero__card-col {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-7) var(--space-6);
}

/* Centered contact card sits inside the surface-1 column */
.ll-attorney-single-card {
	width: 100%;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}
.ll-attorney-single-card__name {
	margin: 0;
	color: var(--color-ink-1000);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
	line-height: var(--leading-tight);
	letter-spacing: 0.01em;
}
.ll-attorney-single-card__role {
	margin: 0;
	color: var(--color-ink-700);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}
.ll-attorney-single-card__role strong {
	font-weight: inherit;
	color: var(--color-ink-1000);
}
.ll-attorney-single-card__rule {
	width: 54px;
	height: 2px;
	margin: var(--space-2) 0;
	background: var(--color-brand-gold);
	border: 0;
	opacity: 1;
}
.ll-attorney-single-card__row {
	margin: 0;
	color: var(--color-ink-700);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: var(--leading-snug);
}
.ll-attorney-single-card__dt {
	display: inline-block;
	margin-inline-end: var(--space-2);
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-ink-400);
}
.ll-attorney-single-card__row a {
	color: var(--color-ink-700);
	text-decoration: none;
	border-bottom: 1px solid var(--color-ink-200);
}
.ll-attorney-single-card__row a:hover,
.ll-attorney-single-card__row a:focus-visible {
	color: var(--color-ink-1000);
	border-bottom-color: var(--color-brand-gold);
}
.ll-attorney-single-card__cta-wrap {
	margin-top: var(--space-3);
}
.ll-attorney-single-card__cta .wp-block-button__link {
	padding: var(--space-3) var(--space-5);
	background: var(--color-brand-gold);
	color: var(--color-ink-1000);
	border: 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-input);
}
.ll-attorney-single-card__cta .wp-block-button__link:hover,
.ll-attorney-single-card__cta .wp-block-button__link:focus-visible {
	background: var(--color-brand-gold-soft);
	color: var(--color-ink-1000);
	box-shadow: var(--shadow-focus-gold);
}

/* ---- Body (50/50: white bio + Education | ink-1000 Areas panel) ---- */
.ll-attorney-single-body > .ll-container--wide {
	padding-inline: 0;
}
.ll-attorney-single-body__cols.wp-block-columns {
	margin: 0;
	align-items: stretch;
}
.ll-attorney-single-body__bio-col,
.ll-attorney-single-body__panel-col {
	padding: var(--space-7) var(--space-6);
}
.ll-attorney-single-body__bio-col {
	background: var(--color-surface-0);
	color: var(--color-ink-500);
}
.ll-attorney-single-body__eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-brand-gold-strong);
	line-height: 1;
}
.ll-attorney-single-body__bio-col .wp-block-post-content,
.ll-attorney-single-body__bio-col > div:not([class]) {
	max-width: 56ch;
}
.ll-attorney-single-body__bio-col p {
	margin: 0 0 var(--space-4);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-ink-500);
	max-width: 56ch;
}
.ll-attorney-single-body__bio-col p:last-child {
	margin-bottom: 0;
}
.ll-attorney-single-body__bio-col a {
	color: var(--color-brand-gold-deep);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
.ll-attorney-single-body__bio-col a:hover,
.ll-attorney-single-body__bio-col a:focus-visible {
	color: var(--color-ink-1000);
	text-decoration-thickness: 2px;
}

/* Education block (rendered by [leverlaw_attorney_education] when degrees on file) */
.ll-attorney-single-edu {
	margin-top: var(--space-6);
	max-width: 56ch;
}
.ll-attorney-single-edu__eyebrow {
	margin: 0 0 var(--space-2);
	color: var(--color-brand-gold-strong);
}
.ll-attorney-single-edu__sub {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink-1000);
}
.ll-attorney-single-edu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ll-attorney-single-edu__list li {
	padding: var(--space-2) 0;
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-ink-700);
	border-bottom: 1px solid var(--color-ink-200);
}
.ll-attorney-single-edu__list li:last-child {
	border-bottom: 0;
}

/* Areas of practice panel (ink-1000, brand-gold links with chevron) */
.ll-attorney-single-body__panel-col {
	color: var(--color-on-dark-body);
}
.ll-attorney-single-body__panel-eyebrow {
	margin: 0 0 var(--space-4);
	color: var(--color-brand-gold);
}
.ll-attorney-single-areas {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ll-attorney-single-areas__item {
	border-top: 1px solid rgba(225, 178, 67, 0.40);
}
.ll-attorney-single-areas__item:last-child {
	border-bottom: 1px solid rgba(225, 178, 67, 0.40);
}
.ll-attorney-single-areas__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) 0;
	color: var(--color-brand-gold);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color var(--motion-fast);
}
.ll-attorney-single-areas__link:hover,
.ll-attorney-single-areas__link:focus-visible {
	color: var(--color-brand-gold-soft);
	box-shadow: none;
}
.ll-attorney-single-areas__link::after {
	content: "\203A";
	margin-inline-start: var(--space-4);
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: inherit;
}

/* Responsive: <=600px stacks portrait > card > bio > panel (single column) */
@media (max-width: 37.5em) {
	.ll-attorney-single-hero__cols.wp-block-columns,
	.ll-attorney-single-body__cols.wp-block-columns {
		flex-wrap: wrap;
	}
	.ll-attorney-single-hero__portrait-col,
	.ll-attorney-single-hero__card-col,
	.ll-attorney-single-body__bio-col,
	.ll-attorney-single-body__panel-col {
		flex-basis: 100% !important;
		width: 100%;
	}
	.ll-attorney-single-hero__card-col,
	.ll-attorney-single-body__bio-col,
	.ll-attorney-single-body__panel-col {
		padding: var(--space-6) var(--space-5);
	}
	.ll-attorney-single-hero__portrait-col .wp-block-post-featured-image img {
		max-width: 100%;
		width: auto;
		height: auto;
	}
}
/* End T-DESIGN-ATTORNEY-SINGLE-REBUILD-01 */

/* T-FEATURE-LOCATION-INTERLINK-01 + T-FEATURE-CPT-INTERLINK-NAV-01: shared
   prev / next / back-to-hub nav row emitted by [leverlaw_cpt_nav] (generic)
   and [leverlaw_location_nav] (legacy alias) on location, myth, and video
   CPT singles. Selectors are grouped so the location alias renders byte-
   identical output (still .ll-location-nav class names) while myth + video
   use the generic .ll-cpt-nav class names; both inherit the same row + hub
   treatment. Reuses .ll-btn (gold-outline secondary). Prev and Next sit on
   the left as the sequential pair; "Back to <hub>" is rendered visually
   secondary by dropping its border so it reads as a tertiary text-link
   inside the same gold-outline row, and is pushed to the row end with
   margin-inline-start: auto. Wraps on mobile, and below 600px the hub
   button drops the auto margin so all three stack with a consistent gap. */
.ll-cpt-nav,
.ll-location-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}
.ll-cpt-nav__hub,
.ll-location-nav__hub {
	margin-inline-start: auto;
	border-color: transparent;
}
.ll-cpt-nav__hub:hover,
.ll-location-nav__hub:hover {
	border-color: var(--color-brand-gold-deep);
}
@media (max-width: 37.5em) {
	.ll-cpt-nav__hub,
	.ll-location-nav__hub {
		margin-inline-start: 0;
	}
}
/* End T-FEATURE-LOCATION-INTERLINK-01 / T-FEATURE-CPT-INTERLINK-NAV-01 */

/* T-FEATURE-BLOG-SINGLE-POSTNAV-01: blog-single context spacing for the
   .ll-cpt-nav row emitted by leverlaw_blog_single_postnav (inc/blog.php).
   The row sits as a direct child of .inside-article (between the
   .ll-share row above and the related-posts strip below), so it needs the
   same top separation the prior bare .post-navigation rule supplied
   (margin-top + padding-top + 1px ink-200 rule). Scope is body.single-post
   so other .ll-cpt-nav contexts (myth / video / location / why-leverlaw
   children, all wrapped in their own .ll-section bands) stay unaffected. */
body.single-post .ll-cpt-nav {
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-ink-200);
}
/* End T-FEATURE-BLOG-SINGLE-POSTNAV-01 */

/* T-FIX-BLOG-TOP-POSTNAV-PLACEMENT-01: drop the shared top-rule treatment on
   the TOP instance of the blog single .ll-cpt-nav. The shared rule above
   gives the bottom nav a 1px ink-200 separator from the .ll-share row
   directly above it; on the top instance there is no element above it (the
   entry-header wrapper is display:none from T-DESIGN-BLOG-HEADER-FOLD-01),
   so the same border draws as a floating rule against empty white below the
   dark title band. :first-of-type targets the top instance because the
   entry-header is a <header>, .ll-share is a <div>, and footer.entry-meta is
   a <footer> -- so the top emit is the first nav.ll-cpt-nav child of
   .inside-article. Margin-top is preserved for breathing room from the
   inside-article top edge. */
body.single-post .inside-article > nav.ll-cpt-nav:first-of-type {
      margin-top: 0;
      margin-bottom: var(--space-5);
      padding-top: 0;
      border-top: 0;
   }
/* End T-FIX-BLOG-TOP-POSTNAV-PLACEMENT-01 */

/* T-CONTENT-VIDEO-YOUTUBE-EMBED-01: privacy-enhanced youtube-nocookie facade
   emitted by [leverlaw_video_embed] on the 11 video CPT singles. The wrapper
   carries the 16:9 box (CSS aspect-ratio so no padding-hack offset; falls back
   to a tall block on legacy engines that ignore aspect-ratio). The poster
   `<img>` is sized 100% / 100% with object-fit cover so it fills the box even
   when the Featured Image has a different aspect. The play button sits centered
   over the poster as a gold filled circle with a white triangle; :focus-visible
   carries the brand-gold-deep ring so keyboard focus is obvious. After the
   click, video-embed.js replaces the poster + button with an absolutely-
   positioned <iframe> that inherits the same 16:9 box. */
.ll-video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--color-ink-1000);
	overflow: hidden;
	border-radius: var(--radius-md);
}
.ll-video-embed__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ll-video-embed__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 5rem;
	height: 5rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-brand-gold);
	color: var(--color-ink-1000);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--motion-fast), transform var(--motion-fast);
}
.ll-video-embed__play:hover {
	background: var(--color-brand-gold-strong);
	transform: scale(1.05);
}
.ll-video-embed__play:focus-visible {
	outline: 2px solid var(--color-brand-gold-deep);
	outline-offset: 3px;
}
.ll-video-embed__play-icon {
	display: inline-block;
	width: 0;
	height: 0;
	margin-inline-start: 0.4rem;
	border-top: 0.85rem solid transparent;
	border-bottom: 0.85rem solid transparent;
	border-inline-start: 1.4rem solid currentColor;
}
.ll-video-embed__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (prefers-reduced-motion: reduce) {
	.ll-video-embed__play {
		transition: none;
	}
	.ll-video-embed__play:hover {
		transform: none;
	}
}
/* End T-CONTENT-VIDEO-YOUTUBE-EMBED-01 */

/* ============================================================================
   Figures-reviewed disclaimer (T-PUBLISH-HOMESTEAD-01)
   ----------------------------------------------------------------------------
   Small muted "Figures last reviewed: <date>" disclaimer rendered by the
   [leverlaw_figures_reviewed] shortcode. Reuses the existing fine-print look
   (xs font-size + ink-400 muted color, parallel to .ll-fineprint usage in
   patterns/page-contact.php) so no new tokens are introduced. The italic label
   comes from the inline <em> in the shortcode output.
   ============================================================================ */
.ll-figures-reviewed {
	margin-block: var(--space-3) 0;
	color: var(--color-ink-400);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
}
/* End T-PUBLISH-HOMESTEAD-01 */

/* ============================================================================
   T-DESIGN-BLOG-SIMPLIFY-01 (2026-06-27)
   ----------------------------------------------------------------------------
   Strip blog category/tag chrome and slot the new band meta line:
     - hide footer.entry-meta on the single (cat-links + tags-links) so the
       bottom shows only .ll-share + the .ll-cpt-nav post-nav. The share row
       and post-nav are siblings of footer.entry-meta (emitted by separate
       generate_after_entry_content hooks), so the hide does not touch them.
     - hide footer.entry-meta on archive cards (body.blog covers the index +
       category + tag + author + date archives via the body_class parity
       filter widened by T-FEATURE-BLOG-ARCHIVE-PARITY-01). Replaces the
       narrower T-POLISH-BLOG-READMORE-01 .tags-links hide; comments are
       disabled site-wide via inc/disable-comments.php so the comments-link
       previously inside that footer was already dead, and .ll-blog-readmore
       (priority 5) stays as the visible card CTA pinned to the bottom by
       .entry-summary { flex: 1 1 auto } from BLOG-LAYOUT-04.
     - meta line in the dark single band: reuses .ll-header-band__intro for
       color/centering; .ll-header-band__meta tightens the size (xs) and
       uppercase styling to read as meta, not lede prose. The .ll-section--
       inverse intro color rule continues to govern color.
   ============================================================================ */
body.single-post footer.entry-meta,
body.blog article.post footer.entry-meta {
	display: none;
}

.ll-header-band__meta {
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}
.ll-header-band__meta time {
	font-variant-numeric: tabular-nums;
}
/* End T-DESIGN-BLOG-SIMPLIFY-01 */

/* ============================================================================
   T-DESIGN-MOBILE-CONTENT-PADDING-REDUCE-01 (2026-06-27): reduce GP's
   Customizer-sourced mobile content padding on .one-container .site-content
   from 96px top/bottom to var(--space-7) (48px) at phone widths.
   Desktop (24px) is untouched because this override is scoped inside GP's
   mobile breakpoint (@media (max-width: 768px), the same breakpoint GP's
   dynamic-CSS uses for its mobile_content_padding override). Horizontal
   padding (24px mobile, set by GP's mobile rule's 2nd + 4th shorthand
   values) is untouched because this override sets ONLY padding-top +
   padding-bottom, not the shorthand.
   Surfaces this affects (post T-DESIGN-CONTENT-PADDING-REDUCE-01 545
   discovery: blog single, /blog/, blog category/tag/author/date archives,
   404) drop from 96/96 to 48/48 on mobile. The attorney + testimonial
   archives (post-type-archive bodies, currently 0 top / 96 bottom via
   line 69's body.post-type-archive .site-content {padding-top:0}) drop
   to 0 top / 48 bottom on mobile; the line-69 rule is NOT touched and
   continues to govern their padding-top because Rule 2 below does not
   set padding-top.
   Full-bleed pages (home, /about/, /privacy-policy/, /site-map/, CPT
   singles, topic taxonomy archive, etc.) stay at 0/0 because both rules
   carve out :not(.full-width-content); the existing GP rule
   .full-width-content.one-container .site-content {padding:0} continues
   to govern them.
   Specificity: each rule is body + 3 classes (the :not() contributes its
   inner selector's specificity, here a single class) + 1 tag-equivalent
   for the inner class = (0,4,1), which beats GP dynamic (0,2,0) and the
   .full-width-content.one-container .site-content (0,3,0) carve-out
   (which is moot here because :not(.full-width-content) excludes those
   bodies). Mobile-only via the media-query wrapper. */
@media (max-width: 768px) {
	body.one-container:not(.post-type-archive):not(.full-width-content) .site-content {
		padding-top: var(--space-7);
		padding-bottom: var(--space-7);
	}
	body.post-type-archive.one-container:not(.full-width-content) .site-content {
		padding-bottom: var(--space-7);
	}
}
/* End T-DESIGN-MOBILE-CONTENT-PADDING-REDUCE-01 */

/* ============================================================================
   Korean (/ko/) Hangul typography (T-DESIGN-KOREAN-TYPOGRAPHY-01)
   ----------------------------------------------------------------------------
   Scoped to the /ko/ page tree via <html lang="ko"> (emitted by
   leverlaw_language_attributes in inc/gp-hooks.php). Hangul is square-set and
   dense, so the theme's Latin display treatment reads badly on it: negative /
   wide letter-spacing smears the syllable blocks, tight heading leading crowds
   the tall glyphs, and the default line-break rules can split Korean words
   mid-word (the client's "alignment / inconsistency" report, 2026-07-07). Reset
   tracking to normal, loosen leading, and keep-all so Korean breaks on word
   boundaries. Latin runs on these pages still resolve to Cinzel / Lato via
   per-glyph fallback, so this only reshapes the Hangul.
   ============================================================================ */
html[lang="ko"] {
	word-break: keep-all;
	overflow-wrap: break-word;
}
html[lang="ko"] :is(h1, h2, h3, h4, h5, h6, .wp-block-heading, .ll-header-band__title) {
	letter-spacing: normal;
	line-height: 1.35;
}
html[lang="ko"] :is(.ll-eyebrow, .ll-header-band__eyebrow) {
	letter-spacing: normal;
	line-height: 1.4;
}
html[lang="ko"] :is(p, li) {
	line-height: 1.8;
}