/**
 * Content & Style Guide component CSS -- the actual stylesheet that was
 * missing across every Bill of Rights batch-import test. Pulled directly
 * from Content_and_Style_Guide_DWF.html's own <style> block (the guide
 * document itself is a static reference file, never enqueued anywhere on
 * the live site -- this file is the real, loadable equivalent for the
 * subset of its components that generated post content actually uses).
 *
 * SCOPE, deliberately narrow: only the design tokens (:root) and the
 * component classes actually referenced by generated content -- .quote,
 * .accent-card/.box-head, .link-rows/.link-row. This project's standing
 * rule is "theme owns layout and typography, plugins own structure and
 * logic" -- so this file does NOT touch body text, headings, or links in
 * general (Avada already owns those), only the custom structural
 * components that have no native WordPress/Avada equivalent. The guide's
 * own page-chrome styles (.section-title, .section-intro, .shell, etc.)
 * are reference-document-only and intentionally left out -- they style
 * the guide itself, not real site content.
 *
 * NOT INCLUDED, flagged rather than guessed: .lede. Every batch-generated
 * intro paragraph uses class="lede", and "lede paragraph" is referenced
 * as a real structural concept elsewhere in this project (e.g. the rep
 * profile page section order), but Content_and_Style_Guide_DWF.html has
 * no CSS rule for it anywhere -- confirmed by direct search, not an
 * oversight in this file. Left unstyled (renders as a plain paragraph)
 * rather than inventing a treatment that was never actually specified.
 *
 * NOT INCLUDED, deliberately: the guide's global img{display:block;
 * max-width:100%} and a{color:var(--ink)} resets. Those are safe inside
 * the guide's own self-contained document but not safe here -- unscoped,
 * they'd apply to every image and link on the entire site, not just this
 * component library. Icon sizing is handled per-component instead
 * (.accent-card img.icon, .link-row img.icon below), which doesn't need
 * a global img reset to work correctly.
 *
 * No !important anywhere in this file -- per this project's standing
 * rule, that's only added after direct cross-theme testing shows a real
 * conflict, not preemptively. If Avada bleed-through shows up in testing
 * (the same category of bug already found and fixed for OceanWP/
 * Memberlite in dwf-public-square-plugin's Presidents CSS), add it there
 * with the same evidence-based reasoning, not here in advance.
 */

:root {
	--ink: #171717;
	--muted: #55514d;
	--rule: #ddd7cf;
	--soft: #f4f1ec;
	--paper: #fff;
	--font: Arial, Helvetica, sans-serif;
	--serif: Georgia, 'Times New Roman', serif;

	--president: #1F3F6B;
	--house: #9C2140;
	--senate: #541D34;
	--judicial: #246042;
	--agencies: #3E6BA3;
}

/* ==========================================================================
   Quote -- one component, any width. Quotation marks flank the text (open
   left, close right); citation right-aligns to the text column itself.
   White background always, never a colored box. Fluid: fills whatever
   width its container provides.

   height:100% deliberately OMITTED here, unlike the Style Guide's own
   reference-document CSS. Confirmed real bug, not theoretical: on the
   live site, Avada wraps post content in nested flex columns
   (.fusion-flex-column / .fusion-content-tb), and flex layout can stretch
   a child to match a sibling's cross-axis size even when neither one sets
   an explicit height -- height:100% on .quote then resolved against that
   stretched flex height instead of collapsing to auto the way it does in
   the guide's own plain, non-flex reference document. Visible result: a
   blockquote several hundred pixels tall with its actual text centered
   in the middle of mostly empty space (screenshot-confirmed on the real
   Bill of Rights import, 8/9/26). Every real usage on this site is a
   quote in normal article body flow, never inside a container that's
   deliberately sized to a fixed height -- so height:auto (the default,
   simply omitting the property) is correct for every actual use case
   here. If a genuine fixed-height showcase-card use ever comes up, that
   should be a .quote--fill modifier added at that point, not the base
   rule's default -- earning the override with a real need, same
   evidence-based-override principle as everywhere else in this file.
   ========================================================================== */
.quote {
	background: #fff;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.quote .rule {
	/* Intentionally hidden -- present in generated markup for a red accent
	   rule that was part of an earlier design pass, deliberately not shown
	   in the current spec. Do not delete the <div class="rule"></div> from
	   generated markup on the strength of it being invisible; that's the
	   guide's own documented current state, not breakage. */
	display: none;
}
.quote-body {
	display: flex;
	gap: 16px;
	align-items: center;
}
.quote--narrow .quote-body {
	gap: 10px;
}
.quote-mark {
	font-family: var(--serif);
	font-size: 112px;
	line-height: 0.7;
	color: #a39784;
	flex-shrink: 0;
}
.quote--narrow .quote-mark {
	font-size: 76px;
}
.quote-text {
	flex: 1;
	min-width: 0;
}
.quote-text p {
	font-family: var(--serif);
	font-style: normal;
	font-size: 22px;
	line-height: 1.4;
	color: var(--ink);
}
.quote--narrow .quote-text p {
	font-size: 16px;
}
.quote-text cite {
	display: block;
	text-align: right;
	margin-top: 12px;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ==========================================================================
   Accent card -- light beige background, dark text. Its own scoped
   .box-head, separate from the colored/white-text .box family's
   .box-head (that variant isn't used by generated post content and isn't
   shipped in this file -- keeping this file scoped to what's actually
   used, not the guide's full box family).
   ========================================================================== */
.accent-card {
	background: var(--soft);
	border-radius: 10px;
	padding: 20px 22px;
}
.accent-card .box-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.accent-card img.icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	object-fit: contain;
}
.accent-card h4 {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--ink);
}
.accent-card p {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.55;
}
.accent-card-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* ==========================================================================
   Link rows -- a grid of icon + heading + description rows, each row a
   full-row <a>. cols-1 through cols-4 control grid column count;
   link-rows--highlight (used by the amendment grid) keeps icon and text
   top-aligned since descriptions run to different heights row to row.
   ========================================================================== */
.link-rows {
	display: grid;
	gap: 14px;
}
.link-rows.cols-1 {
	grid-template-columns: 1fr;
}
.link-rows.cols-2 {
	grid-template-columns: 1fr 1fr;
}
.link-rows.cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.link-rows.cols-4 {
	grid-template-columns: repeat(4, 1fr);
}
.link-row {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--ink);
}
.link-row img.icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	object-fit: contain;
}
.link-row .link-row-text {
	flex: 1;
	min-width: 0;
}
.link-row h4 {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 3px;
}
.link-row p {
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.4;
}
.link-row .arrow {
	flex-shrink: 0;
	font-size: 16px;
	color: var(--muted);
}
.link-row:hover .arrow {
	color: var(--ink);
}

.link-rows--list .link-row {
	padding: 10px 0;
}
.link-rows--cards .link-row {
	padding: 16px 18px;
}
.link-rows--cards .link-row:hover h4 {
	color: var(--ink);
	text-decoration: underline;
}
.link-rows--highlight .link-row {
	align-items: flex-start;
}

.link-row-group h4.group-head {
	font-family: var(--font);
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 14px;
	color: var(--ink);
}