/* ==========================================================================
 * vocab.css — Joe Harvey's house class vocabulary. v1.2 (2026-07-21)
 * ==========================================================================
 * THIS FILE IS THE CANONICAL HOME OF THE OPERATOR-AUTHORED CLASS SYSTEM.
 *
 * Rules (doctrine, ratified 2026-07-20):
 *   1. Every class here is Joe's, under Joe's names. No renames, no "use X
 *      instead" demotion comments, no parallel inventions without sign-off.
 *   2. Every fold gets memorialized in the Design Classes tab, same change.
 *   3. Custom CSS editor = per-site scratchpad; proven patterns graduate here.
 *   4. Single-breakpoint discipline: 768px.
 *   5. !important banned except viewport-visibility utilities (existence rules
 *      are absolute by design). Recurring !important = a missing token.
 *   6. Consumes brand tokens + vocab tokens below so identical markup renders
 *      in each site's own skin.
 *
 * v1.2: stripe-title is now a SELF-CONTAINED full-bleed colored heading stripe
 *       (the "2026 Top Rated DUI Lawyer" bar) — carries its own band bg so the
 *       ink is never white-on-white. Was invisible standalone in v1.1.
 * v1.1: .white family lost its !important (wins by cascade order); h1.stripe
 *       documented mobile-first (base + delta).
 * ========================================================================== */

:root {
	--band-bg:   var(--brand-primary);
	--band-ink:  #ffffff;
	--vocab-inset: 8%;
}

/* --------------------------------------------------------------------------
 * 1. LAYOUT — flex sections
 * -------------------------------------------------------------------------- */
.flex-container { display: flex; flex-wrap: wrap; gap: 0; }
.flex-item { flex: 1 1 calc(25% - 1rem); box-sizing: border-box; padding: .25rem 1rem; }
.flex-container.cols-2 > .flex-item { flex-basis: calc(50% - 1rem); }
.flex-container.cols-3 > .flex-item { flex-basis: calc(33.333% - 1rem); }
.flex-container.cols-4 > .flex-item { flex-basis: calc(25% - 1rem); }
@media screen and (max-width: 768px) { .flex-container { flex-direction: column; } }

/* --------------------------------------------------------------------------
 * 2. BANDS — full-bleed brand-color sections
 * -------------------------------------------------------------------------- */
.page-color-band {
	background: var(--band-bg);
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	color: var(--band-ink);
	padding: 1.5rem 1rem;
	text-align: center;
}
.band-inset { padding-left: var(--vocab-inset); padding-right: var(--vocab-inset); }

/* --------------------------------------------------------------------------
 * 3. TEXT UTILITIES  (no !important — win by cascade order)
 * -------------------------------------------------------------------------- */
.center { text-align: center; }
.white { color: var(--band-ink); text-align: center; }
h2.white { font-size: 24px; color: var(--band-ink); text-align: center; }
h3.white { font-size: 20px; color: var(--band-ink); text-align: center; }
h3.underline {
	color: var(--brand-primary);
	border-bottom: 3px solid var(--brand-accent);
	padding-bottom: .4rem;
	margin-top: 2.5rem;
	font-size: 24px;
}

/* Stripe title — self-contained full-bleed colored heading stripe.
 * The "2026 Top Rated DUI Lawyer" bar: its OWN band background + ink, so it
 * is legible standalone (v1.1 carried band-ink with no background = invisible
 * on a white page). Mobile-first: base carries everything unconditional at
 * mobile sizing; the media query overrides ONLY font-size, same selector, so
 * it wins by order — no !important. */
h1.stripe-title {
	background: var(--band-bg);
	color: var(--band-ink);
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	padding: 14px var(--vocab-inset);
	font-size: 26px;
	line-height: 1.2;
	text-align: center;
}
@media screen and (min-width: 769px) { h1.stripe-title { font-size: 36px; } }

/* --------------------------------------------------------------------------
 * 4. VISIBILITY — show/hide by viewport (the ONE place !important is required)
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
	.mobile-only  { display: none !important; }
	.mobileApp    { display: none !important; }
	.mobileAppB   { display: none !important; }
	.topApp       { display: none !important; }
}
@media screen and (max-width: 768px) { .desktop-only { display: none !important; } }

@media only screen and (max-width: 768px) {
	.topApp { text-align: center; padding-top: 15px; padding-bottom: 15px; margin: auto; background: var(--brand-dark); }
	.topApp a { text-align: center; padding-top: 15px; padding-bottom: 15px; color: var(--brand-white); font-size: 18px; text-decoration: none; margin: auto; }
	.mobileApp { margin-bottom: 20px; text-align: center; margin-top: 20px; font-size: 18.5px; line-height: 1.5em; }
	.mobileAppB { margin-bottom: 125px; text-align: center; margin-top: 20px; font-size: 18.5px; line-height: 1.5em; }
}

/* --------------------------------------------------------------------------
 * 5. MEDIA — image utility (retires the inline-style span wrapper)
 * -------------------------------------------------------------------------- */
img.media {
	display: block;
	width: 80%;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
img.media-full { width: 100%; }

/* --------------------------------------------------------------------------
 * 6. TESTIMONIAL
 * -------------------------------------------------------------------------- */
.testimonial {
	font-style: italic;
	font-size: 1.15em;
	text-align: center;
	max-width: 46rem;
	margin: 2rem auto;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * 7. INTRO — lead paragraph
 * -------------------------------------------------------------------------- */
.intro { font-size: 1.15em; line-height: 1.6; }

/* --------------------------------------------------------------------------
 * 8. TABS — hand-authored markup uses the .fcs-topic-tabs family (main.css,
 * shared with the legacy shortcodes). Editable tabs need THREE legs:
 *   - the markup pattern (Design Classes tab / tabs-pattern.txt)
 *   - kses-allowances.php (input/label survive non-admin saves)
 *   - tab-wpautop-fix.php (wpautop protector — mandatory; wpautop breaks the
 *     input+label+panel adjacency the pure-CSS toggle depends on)
 * -------------------------------------------------------------------------- */