/**
 * MOVED 2026-08-30, from DWF Private Plugin (assets/css/content-components.css) to this
 * theme, per direct instruction: theme owns look, plugins own function --
 * front-end CSS living in a plugin was a standing violation of this
 * project's own stated rule (see this file's style.css header). Only the
 * file's LOCATION and its enqueue call site changed (now
 * get_stylesheet_directory_uri() + wp_get_theme()->get('Version') instead
 * of DWFPS_PLUGIN_URL + DWFPS_VERSION, in class-dwfps-plugin.php). The
 * CSS content itself is unchanged in this move -- deliberately not
 * combined with any refactor of its own rules, to keep this a pure,
 * low-risk relocation. Content-level cleanup (e.g. public.css's own
 * --dwfps-* token system duplicating this theme's real design tokens) is
 * a separate, bigger, deliberately deferred decision.
 */
/**
 * 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;
	/* Resets a real, now-confirmed bug: Avada's own default <blockquote>
	   styling (margin + left border) was bleeding through, visible as an
	   unintended colored left border on every quote (screenshot-confirmed,
	   8/9/26 -- flagged as a suspected risk back when CSS first started
	   loading, but never actually resolved until now, since there was no
	   direct evidence yet to justify the override at that point). This is
	   the exact same category of bug already found and fixed for OceanWP
	   in dwf-public-square-plugin's Presidents quote component -- same
	   root cause (an unreset native <blockquote> default), different
	   theme. The Style Guide's own reference CSS documents this exact
	   fix for its own demo (blockquote,cite{margin:0} in its base reset),
	   but that base reset was deliberately left out of this file's scope
	   (theme owns generic tag styling, not this plugin) -- the miss was
	   not carrying this one specific, necessary exception along with it. */
	border: none;
	margin: 0;
	padding: 0;
}
.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);
}

/* ==========================================================================
   Responsive breakpoints for .link-rows -- CONFIRMED MISSING from this file
   until now (8/9/26). Found by a direct line-by-line diff against the
   authoritative Content_and_Style_Guide_DWF.html, not a guess: the guide
   has always had these two rules (lines 552 and 591 in the current
   version), but they were never carried into this plugin file when it was
   first written. Real, likely consequence: without a max-width breakpoint,
   .link-rows.cols-2/3/4 stay locked at their full column count no matter
   how narrow the container gets -- in a real page layout (a sidebar, a
   narrower theme column, a mobile viewport), that forces icon+text pairs
   into cramped, visually misaligned columns instead of collapsing to
   fewer columns or a single column the way the guide's own responsive
   design intends.

   Both rules are kept exactly as they appear in the guide, in the same
   order, including the fact that the second (broader, later) rule
   overrides the first for .cols-4 at the same 900px breakpoint -- that's
   the guide's own existing cascade, not something introduced here. Not
   silently "cleaned up," since that would be a design decision this file
   isn't the place to make unilaterally.
   ========================================================================== */
@media (max-width: 900px) {
	.link-rows.cols-4 {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 900px) {
	.link-rows.cols-2,
	.link-rows.cols-3,
	.link-rows.cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Highlighter, 6-piece variant with a micro-label -- CONFIRMED MISSING
   from both this file and the guide itself until now (8/9/26). Found by
   searching the original "New Component Guides" draft files: a
   "6-piece section overview" pattern (icon + title + body + a small
   uppercase tag line underneath, e.g. "Article II duty", "Shared powers")
   explicitly noted in that draft as being for "Presidential powers /
   section overview designs." This variant never made it through the
   original Assembly-to-Guide consolidation -- it's a real, confirmed gap,
   not the base Highlighter arrangement (which was already correctly
   consolidated as .link-rows--highlight and is untouched here).

   Markup: same .link-rows--highlight wrapper, but each row's text block
   gets an additional <span class="micro"> after the description.
   ========================================================================== */
.link-row .micro {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 6px;
}