/**
 * CSS for the shared Umbrella Page template (page-templates/template-umbrella.php).
 *
 * Ported from the confirmed mockup,
 * Design-System/Umbrella-Page-Mockups/income-umbrella-v4-REVISED.html --
 * same visual system, same component shapes (resource-area accordion
 * copied from the real Chapter Resource Center, mini-chart/mini-grid/
 * note-box components shared with other DWF panels). Every selector
 * prefixed `dwf-u-` (not the mockup's bare `.hero`/`.panel`/etc.) so
 * this can never collide with unrelated theme CSS on other templates.
 *
 * Uses the same --dwf-* custom-property fallback pattern as the rest
 * of this theme's CSS files (base.css, dwf-gtg-component-library.css)
 * -- real live theme tokens first, canonical style-guide values as the
 * fallback if a token isn't defined yet.
 *
 * @package DWF_Custom_Theme
 * @since   2.5.11
 */

.dwf-umbrella {
	--u-ink: var(--dwf-ink, #171717);
	--u-muted: var(--dwf-muted, #55514d);
	--u-rule: var(--dwf-rule, #ddd7cf);
	--u-soft: var(--dwf-soft, #f4f1ec);
	--u-navy: var(--dwf-navy, #16233b);
	--u-navy-mid: var(--dwf-navy-mid, #1f3350);
	--u-navy-faint: var(--dwf-navy-faint, #22314a);
	--u-rust: var(--dwf-rust, var(--dwf-red));
	--u-rust-dark: var(--dwf-rust-dark, var(--dwf-red));
	--u-gold: var(--dwf-gold, #b3934a);
	--u-house: var(--dwf-house, var(--dwf-red));
	--u-font: var(--dwf-font, Georgia, 'Times New Roman', serif);
	--u-font-sans: var(--dwf-font-sans, Arial, Helvetica, sans-serif);
}
.dwf-umbrella h1, .dwf-umbrella h2, .dwf-umbrella h3 { font-family: var(--u-font); font-weight: 400; margin: 0; }
/* 3.0.4: background:transparent. base.css gives every .shell a white background (.shell,.gtg-shell{...background:#fff},
   there since 1.4.0). Inside this template that painted a white box over the navy hero, where the pale sub-copy
   became unreadable, and over the tan Act III band, which is meant to run edge to edge (Eric, 9/12/26). */
.dwf-umbrella .shell { max-width: var(--dwf-site-width, 96%); margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); background: transparent; } /* 3.4.7 Grok 890: fluid site-width token (Eric: no fixed widths). */

/* ===== HERO (Act I) ===== */
.dwf-u-hero {
	background: linear-gradient(160deg, var(--u-navy) 0%, var(--u-navy-mid) 55%, var(--u-navy-faint) 100%);
	color: #fff;
	padding: 52px 0 44px;
	position: relative;
	overflow: hidden;
}
.dwf-u-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 34px);
	pointer-events: none;
}
.dwf-u-hero-inner { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.dwf-u-hero-eyebrow { font-size: 13px; letter-spacing: .03em; color: var(--u-gold); margin-bottom: 10px; font-family: var(--u-font-sans); }
/* 3.0.4: color:#fff. base.css colors every heading with --dwf-ink, which beat the hero's inherited white. */
.dwf-u-hero-hook { font-size: 32px; line-height: 1.28; max-width: 640px; margin-bottom: 14px; color: #fff; }
.dwf-u-hero-hook .accent { color: var(--u-gold); font-style: italic; }
.dwf-u-hero-sub { font-size: 14.5px; color: #c9d2e0; max-width: 560px; font-family: var(--u-font-sans); }
/* 3.0.4: belief line under the hero sub-copy; values from the 10/2 design source (.hero-belief). */
.dwf-u-hero-belief { font-size: 13.5px; color: #a8b4c8; font-style: italic; max-width: 560px; margin: 12px 0 0; line-height: 1.45; font-family: var(--u-font-sans); }
.dwf-u-hero-widget { flex-shrink: 0; max-width: 380px; }

/* ===== RESOURCE AREA (Act II) ===== */
.dwf-u-resource-area { display: grid; grid-template-columns: minmax(300px,.42fr) minmax(0,.58fr); gap: 52px; align-items: stretch; padding: 46px 0 52px; } /* 3.4.7: stretch so left nav + stage share height */
.dwf-u-resource-intro h2 { margin: 0 0 14px; color: var(--u-ink); font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-family: var(--u-font-sans); }
.dwf-u-intro-text { color: var(--u-muted); font-size: 15px; line-height: 1.55; max-width: 410px; margin-bottom: 10px; font-family: var(--u-font-sans); }
.dwf-u-resource-nav { margin-top: 12px; }
.dwf-u-resource-link {
	width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: center;
	padding: 16px 0; border: 0; border-bottom: 1px solid var(--u-rule); background: transparent; color: inherit;
	text-align: left; cursor: pointer; font: inherit;
}
.dwf-u-resource-link:hover .dwf-u-link-title, .dwf-u-resource-link.active .dwf-u-link-title { color: var(--u-rust); }
.dwf-u-link-title { display: block; color: #1b1b1b; font-size: 16px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; font-family: var(--u-font-sans); }
.dwf-u-link-desc { display: block; margin-top: 5px; color: var(--u-muted); font-size: 13.5px; line-height: 1.4; font-family: var(--u-font-sans); }
.dwf-u-link-arrow { color: var(--u-rust-dark); font-size: 18px; line-height: 1; }
.dwf-u-stage { min-width: 0; }
.dwf-u-panel { display: none; }
.dwf-u-panel.active { display: block; }
.dwf-u-panel h2 { font-size: 22px; color: var(--u-rust-dark); margin-bottom: 14px; font-family: var(--u-font-sans); font-weight: 700; letter-spacing: -.02em; }
.dwf-u-panel p { font-size: 15px; color: #333; max-width: 680px; margin: 0 0 14px; font-family: var(--u-font-sans); }
.dwf-u-lede { font-size: 17px; color: var(--u-ink); font-weight: 700; line-height: 1.4; font-family: var(--u-font-sans); }
.dwf-u-panel h3 { margin: 30px 0 10px; color: var(--u-rust); font-size: 13px; line-height: 1.15; letter-spacing: .22em; text-transform: uppercase; font-weight: 900; font-family: var(--u-font-sans); }
.dwf-u-note-box { margin: 24px 0; padding: 20px 22px; background: var(--u-soft); }
.dwf-u-note-box h4 { margin: 0 0 8px; color: var(--u-rust-dark); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; font-family: var(--u-font-sans); }
.dwf-u-note-box p { margin-bottom: 0; }
.dwf-u-mini-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 24px 0 6px; }
.dwf-u-mini-card { border-top: 3px solid var(--u-rust); padding: 16px 0 0; }
.dwf-u-mini-card strong { display: block; margin-bottom: 8px; color: var(--u-rust); font-size: 15px; line-height: 1.2; font-weight: 900; font-family: var(--u-font-sans); }
.dwf-u-mini-card span { display: block; color: #363b42; font-size: 14px; line-height: 1.46; font-family: var(--u-font-sans); }
.dwf-u-mini-chart { display: flex; align-items: flex-end; gap: 26px; height: 130px; margin: 22px 0 8px; padding: 0 6px; }
.dwf-u-bar-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.dwf-u-bar { width: 100%; max-width: 64px; background: var(--u-navy); border-radius: 3px 3px 0 0; }
.dwf-u-bar-accent { background: var(--u-rust); }
.dwf-u-bar-label { font-size: 11.5px; color: var(--u-muted); text-align: center; font-family: var(--u-font-sans); }
.dwf-u-bar-value { font-size: 13px; font-weight: 700; color: var(--u-ink); font-family: var(--u-font-sans); }
.dwf-u-footnote { font-size: 12px; color: var(--u-muted); border-top: 1px solid var(--u-rule); padding-top: 10px; margin-top: 18px; font-family: var(--u-font-sans); }

/* ===== ACT III BAND ===== */
.dwf-u-engage { background: var(--u-soft); padding: 50px 0 60px; margin-top: 36px; }
.dwf-u-engage-head { margin-bottom: 28px; }
.dwf-u-engage-head h2 { font-size: 24px; color: var(--u-navy); margin-bottom: 6px; font-family: var(--u-font-sans); }
.dwf-u-engage-head p { font-size: 14px; color: var(--u-muted); max-width: 640px; font-family: var(--u-font-sans); }
.dwf-u-engage-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; margin-bottom: 22px; }
.dwf-u-tool-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--u-rule); border-radius: 8px; padding: 22px; height: 100%; } /* 3.4.7: equal-height team */
.dwf-u-tool-card h4 { font-size: 15px; color: var(--u-navy); margin-bottom: 4px; font-family: var(--u-font-sans); }
.dwf-u-tool-sub { font-size: 12.5px; color: var(--u-muted); margin-bottom: 16px; font-family: var(--u-font-sans); }
.dwf-u-cta-link { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--u-rust-dark); text-decoration: none; font-weight: 600; font-family: var(--u-font-sans); }
.dwf-u-cta-link:hover { text-decoration: underline; }
.dwf-u-third-tile { margin-bottom: 22px; }

.dwf-u-action-head { margin: 8px 0 18px; }
.dwf-u-action-head h3 { font-size: 19px; color: var(--u-navy); font-weight: 700; font-family: var(--u-font-sans); }
.dwf-u-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dwf-u-action-card { background: #fff; border: 1px solid var(--u-rule); border-radius: 8px; padding: 20px; position: relative; }
.dwf-u-commitment-tag { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--u-rust-dark); background: var(--u-soft); border-radius: 10px; padding: 3px 9px; margin-bottom: 10px; font-family: var(--u-font-sans); }
.dwf-u-action-card h5 { font-size: 16px; color: var(--u-ink); margin: 0 0 6px; font-family: var(--u-font-sans); font-weight: 700; }
.dwf-u-action-hook { font-size: 13.5px; color: var(--u-muted); margin: 0 0 12px; font-family: var(--u-font-sans); }
.dwf-u-action-body { font-size: 14px; color: #333; line-height: 1.55; font-family: var(--u-font-sans); }
.dwf-u-action-body p { margin: 0 0 12px; }
.dwf-u-action-body h3, .dwf-u-action-body h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--u-rust); margin: 16px 0 8px; font-family: var(--u-font-sans); }
.dwf-u-action-body ul, .dwf-u-action-body ol { margin: 0 0 12px; padding-left: 20px; }
.dwf-u-action-body li { margin-bottom: 6px; }

@media (max-width: 820px) {
	.dwf-u-resource-area { grid-template-columns: 1fr; }
	.dwf-u-engage-grid { grid-template-columns: 1fr; }
	.dwf-u-action-grid { grid-template-columns: 1fr; }
	.dwf-u-hero-widget { max-width: 100%; }
}

/* 2.6.8 (9/28/26): fixes from the Corporate Power screenshot.
   1) Act II panel column is narrow; an .alignright box floated beside the
      text squeezed it to a few words per line. Boxes sit full width here.
   2) The Voting toolkit's own headings (h2/h3) rendered at page-title size
      inside the small tool cards. Scale them to card size. */
.dwf-umbrella .box.alignright,
.dwf-umbrella .box.alignleft { float: none; width: auto; max-width: none; margin: 1.25em 0; }
.dwf-umbrella .dwf-u-tool-card h1,
.dwf-umbrella .dwf-u-tool-card h2 { font-size: 20px; line-height: 1.25; margin: 14px 0 6px; }
.dwf-umbrella .dwf-u-tool-card h3 { font-size: 17px; line-height: 1.3; margin: 12px 0 4px; }
.dwf-umbrella .dwf-u-tool-card p { font-size: 14px; }


/* 2.6.15: tagged-post lists (Act II "More on how we got here", Act III
   "Articles on fixing it"), rendered by the Category Toolkit shortcode from
   dwf_umbrella_tagged_posts() in template-umbrella.php. Sized to sit under the
   panels and inside the Act III band without competing with them. */
.dwf-u-more { margin: 36px 0 8px; max-width: 760px; }
.dwf-u-engage .dwf-u-more { margin-top: 36px; }
.dwf-u-more .category-toolkit-title { font-size: 19px; color: var(--u-navy); font-weight: 700; font-family: var(--u-font-sans); margin-bottom: 6px; }
.dwf-u-more .category-toolkit-items { gap: 0; }
.dwf-u-more .category-toolkit-post { padding: 14px 0; border-bottom: 1px solid var(--u-rule); }
.dwf-u-more .category-toolkit-post h3 { font-size: 17px; line-height: 1.3; margin: 0 0 4px; }
.dwf-u-more .category-toolkit-post h3 a:hover { text-decoration: underline; }
.dwf-u-more .category-toolkit-excerpt { font-size: 14.5px; }
.dwf-u-more-link { display: inline-block; margin-top: 14px; }


/* =====================================================================
   3.1.7 (10/13/26, Claude MV): Eric's 10/6 notes on the Income umbrella
   (_Inbox/Eric-Feedback-10-6-26/umbrella-income.png).
   1) Wider page (see .shell above).
   2) Hero chart should "pop" and balance the text column.
   3) The related-posts list under the panels: cards, not a plain list.
   4) Act III looked "cheap": step-numbered tool cards with icons, tidy
      plugin forms, a navy band for the third tile, and action cards
      that open to show their steps.
   ===================================================================== */

/* --- 1) Bands run edge to edge; content inside .shell stays up to 1400px.
   The site wrapper (#main > .fusion-row) caps pages at --dwf-site-width, which
   boxed the navy hero and tan Act III band. Same breakout as the home slider
   (style-guide.css); body has overflow-x:hidden, so no sideways scroll. --- */
#main > .fusion-row > .dwf-umbrella { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); flex: 0 0 100vw; }

/* --- 2) Hero: two balanced columns, chart in a lit panel --- */
.dwf-u-hero { padding: 56px 0 52px; background: linear-gradient(160deg, var(--u-navy) 0%, var(--u-navy-mid) 62%, #1b2c47 100%); } /* the site's --dwf-navy-faint is a pale tint, which washed the right side of a full-width hero to grey */
.dwf-u-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.dwf-u-hero-hook { font-size: clamp(28px, 2.6vw, 40px); max-width: 680px; }
.dwf-u-hero-sub { font-size: 15.5px; max-width: 620px; }
.dwf-u-hero-widget { max-width: none; width: 100%; }
.dwf-u-hero-widget:empty { display: none; }
.dwf-u-hero-widget > * {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	padding: 22px 24px 18px !important;
	max-width: none !important; /* DSB prints an inline max-width:75% */
	margin: 0 !important;
}
.dwf-u-hero-widget .dsb-chart-title { font-family: var(--u-font-sans); font-size: 15px; font-weight: 700; line-height: 1.35; color: #fff; margin: 0 0 12px; letter-spacing: 0; }
.dwf-u-hero-widget .dsb-line-graph-line { stroke-width: 4 !important; fill: none !important; } /* DSB's on-dark rule (.dsb-on-dark .dsb-line-2 {fill:#fff}) filled the top-1% line into a white jagged shape, the 'handwriting' Eric saw on 10/4. Also to fix in Data Story Blocks. */ /* was 7.5 inline: Eric 10/4, "a graph not handwriting" */
.dwf-u-hero-widget .dsb-line-1 { filter: drop-shadow(0 0 6px rgba(230, 120, 90, .55)); }
.dwf-u-hero-widget .dsb-line-2 { stroke-dasharray: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)); }
.dwf-u-hero-widget .dsb-line-graph-point { opacity: 0; }
.dwf-u-hero-widget .dsb-line-graph-point:hover,
.dwf-u-hero-widget .dsb-line-graph-point:focus { opacity: 1; }
.dwf-u-hero-widget .dsb-line-graph-xlabel { font-size: 15px; fill: rgba(255, 255, 255, .78); }
.dwf-u-hero-widget .dsb-line-graph-tooltip { font-size: 17px; }
.dwf-u-hero-widget .dsb-line-graph-legend { justify-content: flex-start; font-family: var(--u-font-sans); font-size: 13px; gap: 18px; flex-wrap: wrap; }
.dwf-u-hero-widget .dsb-legend-swatch { width: 18px; height: 4px; border-radius: 2px; }
.dwf-u-hero-widget .dsb-source-note { font-family: var(--u-font-sans); }

/* --- 3) Related posts under the panels: a row of cards --- */
.dwf-u-more { max-width: none; margin: 8px 0 44px; padding-top: 28px; border-top: 1px solid var(--u-rule); }
.dwf-u-more .category-toolkit-title { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--u-rust); font-weight: 800; margin-bottom: 16px; }
.dwf-u-more .category-toolkit-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.dwf-u-more .category-toolkit-post { position: relative; background: #fff; border: 1px solid var(--u-rule); border-top: 4px solid var(--u-rust); border-radius: 10px; padding: 20px 22px 22px; transition: box-shadow .2s ease, transform .2s ease; }
.dwf-u-more .category-toolkit-post:hover { box-shadow: 0 10px 24px rgba(22, 35, 59, .12); transform: translateY(-2px); }
.dwf-u-more .category-toolkit-post h3 { font-family: var(--u-font-sans); font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.dwf-u-more .category-toolkit-post h3 a { color: var(--u-ink); text-decoration: none; }
.dwf-u-more .category-toolkit-post h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.dwf-u-more .category-toolkit-excerpt { font-size: 14px; line-height: 1.5; color: var(--u-muted); margin: 0; }
.dwf-u-engage .dwf-u-more { border-top-color: #e2dbcf; }

/* --- 4) Act III --- */
.dwf-u-engage { padding: 60px 0 70px; }
.dwf-u-engage-head h2 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.dwf-u-engage-grid { grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.dwf-u-tool-card { display: flex; flex-direction: column; height: 100%; border: 0; border-radius: 14px; padding: 26px 28px 28px; box-shadow: 0 1px 2px rgba(22, 35, 59, .06), 0 10px 28px rgba(22, 35, 59, .08); border-top: 5px solid var(--u-navy); }
.dwf-u-tool-card--reps { border-top-color: var(--u-rust); }
.dwf-u-tool-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.dwf-u-tool-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--u-soft); color: var(--u-rust-dark); }
.dwf-u-tool-card--vote .dwf-u-tool-icon { color: var(--u-navy); }
.dwf-u-tool-step { display: block; font-family: var(--u-font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--u-rust); margin-bottom: 2px; }
.dwf-u-tool-card h4 { font-size: 19px; line-height: 1.25; margin: 0; }
.dwf-u-tool-sub { font-size: 14px; margin: 0 0 18px; }

/* Plugin output inside the tool cards: one form style for both plugins. */
.dwf-u-tool-body h2, .dwf-umbrella .dwf-u-tool-body h2 { font-family: var(--u-font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--u-muted); margin: 18px 0 10px; }
.dwf-u-tool-body h3, .dwf-umbrella .dwf-u-tool-body h3 { font-family: var(--u-font-sans); font-size: 16px; font-weight: 700; color: var(--u-ink); margin: 0 0 4px; }
.dwf-u-tool-body .dwfv-elections > .dwfv-muted { display: none; } /* plugin's setup note, not visitor copy */
.dwf-u-tool-body .dwfv-card-grid { display: grid; gap: 10px; }
.dwf-u-tool-body .dwfv-card { background: var(--u-soft); border: 0; border-left: 4px solid var(--u-rust); border-radius: 8px; padding: 12px 16px; }
.dwf-u-tool-body .dwfv-card p { margin: 0; font-size: 14px; }
.dwf-u-tool-body .dwf-help-text { font-size: 13px; color: var(--u-muted); margin: 0 0 12px; }
.dwf-u-tool-body .dwf-lookup-grid,
.dwf-u-tool-body .dwfv-lookup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.dwf-u-tool-body .dwf-lookup-grid label:first-child,
.dwf-u-tool-body .dwfv-field-street { grid-column: 1 / -1; }
.dwf-u-tool-body label { display: block; font-family: var(--u-font-sans); font-size: 12px; font-weight: 700; color: var(--u-muted); letter-spacing: .02em; }
.dwf-u-tool-body .dwfv-field { margin: 0; }
.dwf-u-tool-body input[type="text"] { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; padding: 11px 12px; font-size: 15px; border: 1px solid #cfc7ba; border-radius: 8px; background: #fff; color: var(--u-ink); }
.dwf-u-tool-body input[type="text"]:focus { outline: 2px solid var(--u-rust); outline-offset: 1px; border-color: var(--u-rust); }
.dwf-u-tool-body button,
.dwf-u-tool-body .dwf-button,
.dwf-u-tool-body .dwfv-button { display: inline-block; margin-top: 14px; padding: 12px 22px; border: 0; border-radius: 8px; background: var(--u-rust-dark); color: #fff; font-family: var(--u-font-sans); font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s ease; }
.dwf-u-tool-body button:hover,
.dwf-u-tool-body .dwf-button:hover,
.dwf-u-tool-body .dwfv-button:hover { background: var(--u-rust); }

/* Third tile: a navy band across the width. */
.dwf-u-third-tile { margin-bottom: 52px; }
.dwf-u-third-band { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(135deg, var(--u-navy) 0%, var(--u-navy-mid) 100%); color: #fff; border-radius: 14px; padding: 26px 30px; box-shadow: 0 10px 28px rgba(22, 35, 59, .18); }
.dwf-u-third-band .dwf-u-tool-icon { background: rgba(255, 255, 255, .12); color: var(--u-gold); }
.dwf-u-third-text { flex: 1 1 280px; }
.dwf-u-third-band .dwf-u-tool-step { color: var(--u-gold); }
.dwf-u-third-band h4 { font-family: var(--u-font-sans); font-size: 20px; color: #fff; margin: 0 0 4px; }
.dwf-u-third-band .dwf-u-tool-sub { color: #c9d2e0; margin: 0; }
.dwf-u-band-button { flex: 0 0 auto; display: inline-block; padding: 13px 22px; border-radius: 8px; background: #fff; color: var(--u-navy); font-family: var(--u-font-sans); font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.dwf-u-band-button:hover { background: var(--u-soft); }

/* Action cards: a menu of cards that open to show their steps. */
.dwf-u-action-head { margin: 0 0 20px; }
.dwf-u-action-head h3 { font-size: 24px; }
.dwf-u-action-head p { font-family: var(--u-font-sans); font-size: 14.5px; color: var(--u-muted); margin: 6px 0 0; }
.dwf-u-action-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.dwf-u-action-card { padding: 0; border: 1px solid #e2dbcf; border-radius: 12px; overflow: hidden; transition: box-shadow .2s ease; }
.dwf-u-action-card:hover, .dwf-u-action-card[open] { box-shadow: 0 10px 26px rgba(22, 35, 59, .10); }
.dwf-u-action-card summary { list-style: none; cursor: pointer; padding: 20px 22px 18px; display: block; }
.dwf-u-action-card summary::-webkit-details-marker { display: none; }
.dwf-u-action-card summary:focus-visible { outline: 2px solid var(--u-rust); outline-offset: -2px; }
.dwf-u-action-card h5 { font-size: 17px; line-height: 1.3; }
.dwf-u-action-hook { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }
.dwf-u-action-toggle { font-family: var(--u-font-sans); font-size: 13.5px; font-weight: 700; color: var(--u-rust-dark); }
.dwf-u-action-toggle::after { content: " \2193"; }
.dwf-u-action-card[open] .dwf-u-action-toggle::after { content: " \2191"; }
.dwf-u-close-text, .dwf-u-action-card[open] .dwf-u-open-text { display: none; }
.dwf-u-action-card[open] .dwf-u-close-text { display: inline; }
.dwf-u-action-card .dwf-u-action-body { padding: 4px 22px 20px; border-top: 1px solid #efe9df; padding-top: 16px; }
.dwf-u-action-body ul { list-style: none; padding-left: 0; }
.dwf-u-action-body li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.dwf-u-action-body li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--u-rust); }

@media (max-width: 900px) {
	.dwf-u-hero-inner { grid-template-columns: 1fr; }
	.dwf-u-engage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.dwf-u-tool-card { padding: 22px 18px 24px; }
	.dwf-u-tool-body .dwf-lookup-grid,
	.dwf-u-tool-body .dwfv-lookup-grid { grid-template-columns: 1fr; }
	.dwf-u-third-band { padding: 22px 20px; }
	.dwf-u-band-button { width: 100%; text-align: center; box-sizing: border-box; }
}
/* The rep lookup wraps itself in a padded box of its own; inside a tool card that doubled the padding. */
.dwf-u-tool-body .dwf-civic-toolkit { padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }

/* =====================================================================
   3.1.9 (10/13/26, Claude MV): saved-address versions of tiles 1 and 2,
   the free-account invitation and the members' save panel
   (includes/umbrella-saved-address.php; Eric's PERSONALIZED mockup).
   ===================================================================== */
.dwf-u-saved-banner { background: #f7f3eb; border: 1px solid #e6dcc8; border-radius: 8px; padding: 9px 13px; font-family: var(--u-font-sans); font-size: 13px; color: var(--u-muted); margin: 0 0 14px; }
.dwf-u-saved-banner a { color: var(--u-rust-dark); font-weight: 700; text-decoration: none; }
.dwf-u-saved-banner a:hover { text-decoration: underline; }
.dwf-u-rep-cards { display: grid; gap: 10px; }
.dwf-u-rep-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--u-rule); border-radius: 10px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .2s ease, border-color .2s ease; }
.dwf-u-rep-card:hover { border-color: var(--u-rust); box-shadow: 0 6px 16px rgba(22, 35, 59, .08); }
.dwf-u-rep-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--u-soft); }
span.dwf-u-rep-photo { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--u-font-sans); font-weight: 800; background: var(--u-navy); }
.dwf-u-rep-photo--r { background: var(--dwf-red); }
.dwf-u-rep-name { display: block; font-family: var(--u-font-sans); font-size: 16px; font-weight: 700; color: var(--u-ink); }
.dwf-u-rep-office { display: block; font-family: var(--u-font-sans); font-size: 13px; color: var(--u-muted); margin-top: 2px; }
.dwf-u-rep-arrow { color: var(--u-rust-dark); font-size: 18px; }
.dwf-u-place-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.dwf-u-place-card { border: 1px solid var(--u-rule); border-radius: 10px; padding: 12px 14px; font-family: var(--u-font-sans); font-size: 13.5px; line-height: 1.45; color: #333; }
.dwf-u-place-card strong, .dwf-u-place-card span { display: block; }
.dwf-u-place-heading { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--u-rust); margin-bottom: 6px; }
.dwf-u-place-hours { color: var(--u-muted); margin-top: 4px; }
.dwf-u-saved-invite { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 4px 0 22px; padding: 16px 20px; background: #fff; border: 1px dashed #cfc3ad; border-radius: 12px; }
.dwf-u-saved-invite p { margin: 0; flex: 1 1 340px; font-family: var(--u-font-sans); font-size: 15px; color: var(--u-ink); }
.dwf-u-saved-invite-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dwf-u-invite-button { display: inline-block; padding: 11px 20px; border-radius: 8px; background: var(--u-rust-dark); color: #fff; font-family: var(--u-font-sans); font-weight: 700; text-decoration: none; }
.dwf-u-invite-button:hover { background: var(--u-rust); color: #fff; }
.dwf-u-saved-save { margin: 4px 0 22px; background: #fff; border: 1px solid var(--u-rule); border-radius: 12px; padding: 0 20px; }
.dwf-u-saved-save summary { cursor: pointer; padding: 15px 0; font-family: var(--u-font-sans); font-weight: 700; color: var(--u-rust-dark); }
.dwf-u-saved-save[open] { padding-bottom: 20px; }

/* =====================================================================
   3.2.0 (10/13/26, Claude MV): Eric's notes on the 3.1.9 page.
   - At most five How We Got Here panels, "Browse all" at the end of the list.
   - "More on how we got here" cards removed.
   - How You Can Engage back to three columns; Step 3 keeps the navy box
     and leads to the umbrella's archive of ways to take action.
   - Ways to Actually Do Something About It: three columns.
   - Elections use the Style Guide date tile (components.html#date-tile).
   - Tool icons are the site's own (DWF Private Plugin icon library).
   ===================================================================== */
.dwf-u-browse-all { display: inline-block; margin-top: 16px; font-family: var(--u-font-sans); font-size: 14px; font-weight: 700; color: var(--u-rust-dark); text-decoration: none; }
.dwf-u-browse-all:hover { text-decoration: underline; }
.dwf-u-engage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.dwf-u-tool-icon--img { background: var(--u-soft); }
.dwf-u-tool-icon--img img { width: 28px; height: 28px; object-fit: contain; display: block; }
.dwf-u-tool-card--more { display: flex; flex-direction: column; background: linear-gradient(160deg, var(--u-navy) 0%, var(--u-navy-mid) 100%); color: #fff; border-top-color: var(--u-gold); }
.dwf-u-tool-card--more h4 { color: #fff; }
.dwf-u-tool-card--more .dwf-u-tool-step { color: var(--u-gold); }
.dwf-u-tool-card--more .dwf-u-tool-sub { color: #c9d2e0; }
.dwf-u-tool-card--more .dwf-u-tool-icon { background: rgba(255, 255, 255, .12); }
.dwf-u-tool-card--more .dwf-u-tool-icon--img img { filter: invert(1); }
.dwf-u-more-list { list-style: none; margin: 4px 0 20px; padding: 0; font-family: var(--u-font-sans); }
.dwf-u-more-list li { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 14.5px; color: #fff; }
.dwf-u-more-list li span { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--u-gold); }
.dwf-u-tool-card--more .dwf-u-band-button { margin-top: auto; align-self: flex-start; }
.dwf-u-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dwf-u-election { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.dwf-u-election-name { display: block; font-family: var(--u-font-sans); font-size: 16px; color: var(--u-ink); margin-bottom: 2px; }
.dwf-u-election-day { display: block; font-family: var(--u-font-sans); font-size: 13.5px; color: var(--u-muted); }
.dwf-u-tool-body .dwf-u-election + .dwfv-voter-info h2 { margin-top: 6px; }
@media (max-width: 1100px) {
	.dwf-u-engage-grid { grid-template-columns: 1fr 1fr; }
	.dwf-u-tool-card--more { grid-column: 1 / -1; }
	.dwf-u-action-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.dwf-u-engage-grid, .dwf-u-action-grid { grid-template-columns: 1fr; }
}
.dwf-u-engage-grid + .dwf-u-action-head { margin-top: 48px; }
/* 3.2.1: panels and cards from posts end with a link to the full post. */
.dwf-u-continue { text-align: right; margin-top: 8px; }
.dwf-u-continue a { font-family: var(--u-font-sans); font-weight: 700; font-size: 14px; color: var(--u-rust-dark); text-decoration: none; }
.dwf-u-continue a:hover { text-decoration: underline; }
.dwf-u-action-body .dwf-u-continue { text-align: left; }

/* ===== 3.2.3: act lists (/{umbrella}/how-we-got-here/ and its two siblings) ===== */
.dwf-u-hero--slim { padding: 30px 0 26px; }
.dwf-u-hero--slim .dwf-u-hero-hook { font-size: 30px; margin-bottom: 8px; }
.dwf-u-actlist-page { font-size: .6em; color: #c9d2e0; font-style: italic; }
.dwf-u-actlist-back { font-family: var(--u-font-sans); font-size: 14px; font-weight: 700; color: var(--u-gold); text-decoration: none; }
.dwf-u-actlist-back:hover, .dwf-u-actlist-back:focus-visible { text-decoration: underline; }
.dwf-umbrella .dwf-u-actlist-body { padding-top: 28px; padding-bottom: 48px; } /* .dwf-umbrella .shell sets padding: 0 ...; this must outrank it. */
.dwf-u-actlist-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.dwf-u-actlist-tab { font-family: var(--u-font-sans); font-size: 14px; font-weight: 700; padding: 8px 14px; border: 1px solid var(--u-navy); border-radius: 999px; color: var(--u-navy); text-decoration: none; background: #fff; }
.dwf-u-actlist-tab:hover, .dwf-u-actlist-tab:focus-visible { background: var(--u-navy); color: #fff; }
.dwf-u-actlist-tab.is-current { background: var(--u-navy); color: #fff; }
@media (max-width: 600px) { .dwf-u-hero--slim .dwf-u-hero-hook { font-size: 24px; } }

/* 3.4.7 Grok 890 — Ways to Actually folded into Step 3 */
.dwf-u-tool-card--more .dwf-u-step3-actions { margin-top: 12px; }
.dwf-u-tool-card--more .dwf-u-step3-actions details { border-bottom: 1px solid rgba(255,255,255,.14); }
.dwf-u-tool-card--more .dwf-u-step3-actions summary { cursor: pointer; padding: 10px 0; list-style: none; font-family: var(--u-font-sans); font-size: 14.5px; color: #fff; }
.dwf-u-tool-card--more .dwf-u-step3-actions summary::-webkit-details-marker { display: none; }
.dwf-u-tool-card--more .dwf-u-step3-actions summary h5 { margin: 0; font-size: 14.5px; font-weight: 700; color: #fff; font-family: var(--u-font-sans); }
.dwf-u-tool-card--more .dwf-u-step3-actions .dwf-u-action-body { padding: 0 0 12px; font-size: 13.5px; color: #c9d2e0; line-height: 1.45; }
.dwf-u-tool-card--more .dwf-u-commitment-tag { display: inline-block; margin-bottom: 4px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--u-gold); }
.dwf-u-stage { display: flex; flex-direction: column; }
.dwf-u-stage .dwf-u-panel.active { flex: 1; }

/* ==========================================================================
   3.4.15 (Eric 11/1/26, Social Safety Net screenshot): umbrella pages follow the sitewide text rules
   (one text size, one paragraph spacing, one heading scale from content-flow.css) through their own
   classes, plus the fixes marked on the screenshot. Units in rem/em/%; buttons title red, right-aligned.
   ========================================================================== */
/* One heading size for the two section heads ("How We Got Here", "How You Can Engage") */
.dwf-u-resource-intro h2,
.dwf-u-engage-head h2 { font-size: calc(var(--dwf-text-size, 1.125rem) * 1.5); line-height: 1.25; letter-spacing: -.015em; color: var(--u-ink); margin: 0 0 .4em; }
.dwf-u-intro-text,
.dwf-u-engage-head p { font-size: 1rem; line-height: var(--dwf-text-leading, 1.6); }

/* The article panel reads like every other page: sitewide text size and spacing, full column width */
.dwf-u-panel h2 { font-size: calc(var(--dwf-text-size, 1.125rem) * 1.25); line-height: 1.3; color: var(--u-ink); margin: 0 0 .5em; }
.dwf-u-lede { font-size: var(--dwf-text-size, 1.125rem); line-height: var(--dwf-text-leading, 1.6); margin: 0 0 var(--dwf-block-gap, 1.15em); }
.dwf-u-panel p,
.dwf-u-panel li { font-size: var(--dwf-text-size, 1.125rem); line-height: var(--dwf-text-leading, 1.6); max-width: none; color: var(--u-ink); }
.dwf-u-panel p { margin: 0 0 var(--dwf-block-gap, 1.15em); }
.dwf-u-panel h3 { font-size: calc(var(--dwf-text-size, 1.125rem) * 1.12); line-height: 1.3; letter-spacing: -.01em; text-transform: none; font-weight: 700; color: var(--u-ink); margin: 1.5em 0 .5em; }
.dwf-u-panel h4 { font-size: calc(var(--dwf-text-size, 1.125rem) * 1.05); line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--u-ink); margin: 1.4em 0 .5em; }

/* Step cards: readable sub-lines */
.dwf-u-tool-sub { font-size: .9375rem; line-height: 1.45; }

/* Early voting hours (theme 3.4.15 dwf_umbrella_hours_html): one line per day inside a closed list */
.dwf-u-place-card details.dwf-u-place-hours { margin-top: .4em; }
.dwf-u-place-card details.dwf-u-place-hours summary { cursor: pointer; font-weight: 700; color: var(--u-ink); }
.dwf-u-place-card details.dwf-u-place-hours ul { list-style: none; margin: .4em 0 0; padding: 0; }
.dwf-u-place-card details.dwf-u-place-hours li { padding: .15em 0; }

/* Buttons and "Browse all": title red, right-aligned (Eric 10/29 rules) */
.dwf-u-band-button,
.dwf-u-tool-card--more .dwf-u-band-button { align-self: flex-end; margin-left: auto; background: var(--dwf-red, var(--u-rust-dark)); color: #fff; }
.dwf-u-band-button:hover { background: var(--dwf-red, var(--u-rust-dark)); color: #fff; filter: brightness(1.1); }
.dwf-u-browse-all,
.dwf-u-more-link { display: block; text-align: right; }

/* Article and video cards: summary ends on a full sentence (umbrella-functions.php); no clipped text */
.dwf-u-more .category-toolkit-excerpt { font-size: .9375rem; line-height: 1.5; }

/* No white strip between the last umbrella band and the footer */
main:has(.dwf-umbrella),
.dwf-main:has(.dwf-umbrella) { padding-bottom: 0; } /* 3.4.18: checked on live, a .fusion-row sits between main and .dwf-umbrella */
.dwf-umbrella > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.dwf-u-band-button,
	.dwf-u-tool-card--more .dwf-u-band-button { align-self: stretch; margin-left: 0; }
}

/* ==========================================================================
   3.4.20 (Claude MV helper, 11/1/26, Eric's Social Safety Net screenshot)
   ========================================================================== */
/* 1) No dividing lines in the article panel. A rule (an <hr>, a block-editor separator or a stray
      border) was drawn across the first line of a paragraph. Posts shown in a panel come through
      the_content, so any separator in them becomes space only, floats are cleared before it and the
      panel contains its own floats, so nothing can sit on top of the text. */
.dwf-u-panel :is(hr,.wp-block-separator){border:0!important;height:0;margin:1.5em 0;background:none!important;clear:both;overflow:hidden}
.dwf-u-panel .wp-block-separator::before,.dwf-u-panel .wp-block-separator::after{content:none}
.dwf-u-panel{display:flow-root}
.dwf-u-panel > :is(p,ul,ol,h2,h3,h4){position:relative;z-index:1;background:none;border:0;text-decoration:none}

/* 2) No white strip above the footer. The 3.4.15/3.4.18 rule (main:has(.dwf-umbrella)) lost to
      style-guide.css "#main{padding:0 30px 60px}" because an id outranks an element selector;
      the 60px bottom padding was the strip. Same rule, with the id. */
#main:has(> .fusion-row > .dwf-umbrella){padding-bottom:0}
#main > .fusion-row:has(> .dwf-umbrella){margin-bottom:0;padding-bottom:0}
.dwf-umbrella > .dwf-u-engage:last-child{margin-bottom:0}

/* 3) One size for every summary line on umbrella pages: a step below body text, muted.
      (How We Got Here list, step-card sub-lines, How we can fix it / article card summaries,
      action-card hooks.) The navy Step 3 card keeps its light text color. */
.dwf-umbrella :is(.dwf-u-link-desc,.dwf-u-tool-sub,.category-toolkit-excerpt,.category-toolkit-description,.dwf-u-action-hook,.dwf-u-action-head p){font-size:calc(var(--dwf-text-size,1rem) * .9);line-height:1.45;color:var(--u-muted)}
.dwf-umbrella .dwf-u-tool-card--more .dwf-u-tool-sub{color:#c9d2e0}