/*
 * Visual polish and motion for rga.org (TAG Strategies, October 2026).
 *
 * Loads after Foundation and the parent theme's site CSS, so plain rules here win. The child
 * style.css and the Customizer's Additional CSS still use !important in places; the few rules
 * below that need to beat those say so.
 */

:root {
	--rga-navy: #1d3050;
	--rga-red: #a70317;
	--rga-blue: #2e6298;
	--rga-ink: #2f3540;
	--rga-muted: #5b6270;
	--rga-ease: cubic-bezier(.2, .7, .2, 1);

	/* Layout rhythm. Every interior page uses the same container, gutter and spacing. */
	--rga-container: 1200px;
	--rga-gutter: 20px;
	--rga-space-top: 32px;    /* title strip to content */
	--rga-space-bottom: 48px; /* content to the signup band */
	--rga-section: 48px;      /* homepage section padding */
	--rga-measure: 42rem;     /* reading width for statements, bios, letters */
}

@media screen and (min-width: 40em) {
	:root {
		--rga-gutter: 24px;
		--rga-space-top: 48px;
		--rga-space-bottom: 64px;
		--rga-section: 64px;
	}
}

@media screen and (min-width: 64em) {
	:root {
		--rga-space-top: 56px;
		--rga-space-bottom: 72px;
		--rga-section: 72px;
	}
}

/* ---------- Header paint ----------
 * The homepage photo and the interior photo bands sit under the white logo and menu, so each is
 * painted dark (black, the photo's top edge; navy for the bands) before its image loads. */
.rga-hero {
	background-color: #000;
}

html body .page-header,
html body #aboutheader,
html body #govheader,
html body #raceheader {
	background-color: var(--rga-navy) !important; /* the Customizer's background shorthands reset it */
}

/* The menu floats over the hero or photo band, which is pulled up beneath it. Before those paint,
 * the page background showed through as a white bar behind the white logo and menu, so the
 * 85px behind the menu (76px on phones) is painted dark from the first frame. */
.off-canvas-content {
	background: linear-gradient(var(--rga-navy), var(--rga-navy)) 0 0 / 100% 85px no-repeat #fefefe;
}

.home .off-canvas-content {
	background-image: linear-gradient(#000, #000);
}

/* ---------- Header alignment ----------
 * The logo and menu sat 24px from the screen edges at every width, so on wide screens they began
 * 96px or more outside everything below them. They now share the container's edges; on phones
 * and tablets the logo and the burger's lines sit on the gutter. */
@media screen and (min-width: 64em) {
	.top-bar {
		padding-left: max(calc(var(--rga-gutter) - 16px), calc((100% - var(--rga-container)) / 2 - 16px)); /* the logo link pads itself 1rem */
		padding-right: max(var(--rga-gutter), calc((100% - var(--rga-container)) / 2));
	}

	.top-bar-right {
		padding-right: 0; /* the child theme adds 20px */
	}
}

.logomobile {
	margin-left: calc(var(--rga-gutter) - 8px); /* the title bar pads itself 8px */
}

/* ---------- Mobile overflow ----------
 * The Twitter feed prints each tweet's photo permalink as one unbroken link, about 470px wide,
 * which made every page wider than a phone screen. Wrap anything long, and drop the photo
 * permalinks: the camera icon beside each tweet already links to the photo. */
.ctf-tweet-text,
.ctf-tweet-text a {
	overflow-wrap: anywhere;
}

.ctf-tweet-text a[href*="/photo/"],
.ctf-tweet-text a[href*="/video/"] {
	display: none;
}

.entry-content {
	overflow-wrap: break-word;
}

/* ---------- Tweet panel ---------- */
#twitterfeedtext .ctf-item {
	max-width: 34rem;
	margin-left: auto;
	margin-right: auto;
}

#twitterfeedtext .ctf-tweet-text {
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* ---------- Page title strip ----------
 * Every template shows its title in the navy strip along the bottom of the photo band (set in
 * the Customizer for h1.page-title). Single posts used a light h2 instead; they now use a
 * p.page-title, since the post headline is the page's h1. */
.page-header p.page-title {
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 5px 0;
	background: var(--rga-navy);
	color: #fff;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
}

@media screen and (min-width: 40em) {
	.page-header p.page-title {
		font-size: 30px;
	}
}

/* ---------- News cards ----------
 * Cards in a row share a height, and Read More plus the share buttons sit along the bottom
 * instead of floating at whatever height each headline ends. */
#newsitems > article,
.archive #main,
.search #main {
	display: flex !important; /* beats the child theme's article { display: table !important } */
	flex-wrap: wrap;
}

.newspost {
	display: flex;
	flex-direction: column;
}

.newspost h4 {
	margin-bottom: 28px; /* the gap the button's own margin used to give the tallest card */
}

.newspost > .button {
	align-self: flex-start;
	margin-top: auto;
}

#nav-posts,
#newsitems > article > p,
#post-not-found {
	flex: 0 0 100%;
}

.newspost > a:first-child {
	display: block;
	overflow: hidden;
	margin-bottom: 10px;
}

.newspost > a:first-child .wp-post-image {
	display: block;
	margin-bottom: 0;
	transition: transform .5s var(--rga-ease);
}

.newspost:hover > a:first-child .wp-post-image {
	transform: scale(1.03);
}

.newspost h4 a:hover {
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* ---------- Signup band ----------
 * Name fields were 39px tall and the email field 43px, so the rows never lined up. */
#emailrow .gform_wrapper input[type="text"],
#emailrow .gform_wrapper input[type="email"] {
	height: 44px;
	padding: 0 .875rem;
	border: 0 !important; /* the child theme sets borders on the email field with !important */
	border-radius: 2px;
	font-size: 1rem;
}

#emailrow #gform_submit_button_1 {
	width: 100%;
	height: 44px;
	margin: 0;
	border-radius: 2px;
	letter-spacing: .04em;
}

/* ---------- Footer ----------
 * The "Paid for by" disclaimer was #666 on #333 (about 2:1); now about 9:1. Footer links wrap as
 * whole items instead of breaking inside "Press Inquiries". */
.footer p.copyright {
	color: #d2d5db;
	line-height: 1.4 !important; /* parent sets line-height: 1 !important, which clips descenders */
}

.footer #menu-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
}

.footer #menu-footer-menu > li > a {
	padding: .6rem 0;
	white-space: nowrap;
	font-size: .8125rem;
	letter-spacing: .04em;
}

@media screen and (max-width: 39.9375em) {
	.footer #menu-footer-menu {
		justify-content: center;
	}

	/* The longest link was 2px wider than a 375px phone's column, which pushed the links 1px off
	 * centre; it now fits there and wraps evenly on narrower phones. */
	.footer #menu-footer-menu > li > a {
		letter-spacing: .02em;
		white-space: normal;
		text-wrap: balance;
	}
}

/* ---------- Layout ----------
 * Interior pages each had their own spacing: 46 to 100px between the title strip and the content,
 * 10 to 217px before the signup band, and side margins anywhere from 10 to 62px. They now share one
 * centred container, one gutter and one vertical rhythm (tokens at the top of this file). Foundation
 * columns pad themselves 10px (phones) or 15px (wider), so the container adds the rest. */
#content {
	margin: 0 auto;
	padding: var(--rga-space-top) 0 var(--rga-space-bottom);
}

#content #inner-content,
#content > #newsrow > #newsitems,
.home #newsitems,
.footer #inner-footer {
	max-width: calc(var(--rga-container) + 2 * var(--rga-gutter));
	margin-left: auto;
	margin-right: auto;
	padding-left: calc(var(--rga-gutter) - 10px);
	padding-right: calc(var(--rga-gutter) - 10px);
}

@media screen and (min-width: 40em) {
	#content #inner-content,
	#content > #newsrow > #newsitems,
	.home #newsitems,
	.footer #inner-footer {
		padding-left: calc(var(--rga-gutter) - 15px);
		padding-right: calc(var(--rga-gutter) - 15px);
	}
}

#content #inner-content {
	padding-top: 0; /* the parent theme adds 1rem here */
	padding-bottom: 0;
}

/* The child theme centres every <article> as a shrink-wrapped table, which pushed statements and
 * page content in from the column's left edge. Content articles fill their column instead. */
#content #main > article:not(#content-not-found) {
	display: block !important;
	margin-left: 0;
	margin-right: 0;
}

/* About and Press Inquiries nest columns inside a column, doubling the side padding. */
#content #main.large-12:has(> .columns) {
	padding-left: 0;
	padding-right: 0;
}

/* Trailing margins would otherwise add 16 to 31px to the space above the signup band. */
#content .entry-content > :last-child,
#content #main > .button:last-child {
	margin-bottom: 0;
}

.single .article-footer {
	margin-top: 0;
}

.single .article-footer .tags:empty {
	display: none;
}

#content > #newsrow {
	padding: 0;
}

#content > #newsrow > #newsitems {
	margin-top: 0;
}

/* The governor tiles have no column padding (the child theme removes it for an edge-to-edge
 * mosaic), so the grid itself takes the column inset to land on the gutter like other content. */
.govlist #main {
	padding: 0 10px;
}

@media screen and (min-width: 40em) {
	.govlist #main {
		padding: 0 15px;
	}
}

/* Videos prints an empty pagination block (a divider and 32px of padding with no links). */
#nav-posts:not(:has(.pagination)) {
	display: none;
}

/* ---------- Buttons ----------
 * One shape for every button: 44px tall, label centred, same type. The outline ("hollow") style had
 * no working colour and showed white text on white; it is a navy outline now. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.button.tiny {
	min-height: 32px;
	padding: 0 .875rem;
	font-size: .6875rem;
}

a.button.hollow,
a.button.hollow:visited {
	border: 2px solid var(--rga-navy);
	background-color: transparent;
	color: var(--rga-navy) !important; /* the theme's link colours otherwise win */
}

a.button.hollow:hover,
a.button.hollow:focus-visible {
	background-color: var(--rga-navy);
	color: #fff !important;
}

/* ---------- Search forms ----------
 * The field (44px) and its button (41px) never lined up. */
.search-form {
	display: flex;
	gap: 8px;
	margin: 0;
}

.search-form label {
	flex: 1;
	margin: 0;
}

.search-form .search-field {
	height: 44px;
	margin: 0;
}

.search-form .search-submit {
	flex: none;
	margin: 0;
}

/* ---------- Statements, bios and letters ----------
 * Body copy ran about 107 characters per line; these pages now hold a reading width. */
.single .post {
	margin-bottom: 0;
	padding-right: 0;
}

.single .article-header,
.single .entry-content,
.page-template-governors-single #main .entry-content,
.page-template-about #main .entry-content {
	max-width: var(--rga-measure);
}

.single .entry-content p,
.page-template-governors-single #main .entry-content p,
.page-template-about #main .entry-content p {
	font-size: 1.0625rem;
	line-height: 1.65;
}

.single .byline {
	margin-bottom: 24px;
	color: var(--rga-muted); /* #999 was 2.8:1 */
	font-size: .875rem;
}

.single h1.entry-title {
	margin-bottom: 8px;
}

/* Related and popular posts: the same placeholder logo four times over added nothing. */
#sidebar1 {
	padding: 24px;
}

#sidebar1 img[src*="RGA-site-image"] {
	display: none;
}

#sidebar1 h6 {
	margin: 0 0 12px;
	color: var(--rga-muted);
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

#sidebar1 .relatedposts li,
#sidebar1 .popposts li {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid #dfe2e7;
	line-height: 1.35;
}

@media screen and (min-width: 64em) {
	#sidebar1.large-3 {
		width: 33.33333%; /* main is 8 columns; 3 left an empty column on the right */
	}
}

/* On phones the grey box sat 10px from the edges while every line of text sits at 20px. */
@media screen and (max-width: 39.9375em) {
	#sidebar1 {
		width: calc(100% - 20px);
		margin: 32px 10px 0;
	}
}

/* Foundation's Equalizer stretched the grey box to the statement's full height. */
#sidebar1 .relatedposts {
	height: auto !important; /* overrides Equalizer's inline height */
}

.single #sidebar1 {
	align-self: flex-start;
}

/* ---------- Share links ----------
 * X, Facebook and email in the brand-red squares Shareaholic drew, without its scripts. The
 * squares are 32px, the height of Read More beside them (Shareaholic's were 20px, a small touch
 * target), and the first starts on the content edge (Shareaholic's sat 4px in). */
.rga-share {
	display: flex;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.rga-share li {
	margin: 0;
}

.newspost .rga-share {
	margin-top: 0; /* Read More's own 16px margin is the gap */
}

/* Scoped under .rga-share to outrank the child theme's body .row a { color: #2e6298 }, which
 * turned the glyphs blue on the red. */
.rga-share .rga-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: var(--rga-red);
	color: #fff;
	transition: background-color .2s ease;
}

.rga-share .rga-share__link:hover,
.rga-share .rga-share__link:focus-visible {
	background-color: var(--rga-navy);
	color: #fff;
}

.rga-share .rga-share__link:focus-visible {
	outline-color: var(--rga-navy); /* the global ring uses the link colour, white here */
}

.rga-share__link svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ---------- Letters and videos ----------
 * Joint letters show their PDF in a 1000 x 1280 EmbedPress viewer and Elementor centred it; the
 * theme now centres both the saved viewer markup and the [embedpress_pdf] shortcode's. Videos
 * fill the content column (up to the same 1000px) instead of a fixed 500 or 600px box: the
 * [video] shortcode's player, and EmbedPress's player for a bare .mp4 link (Wilson Bridge). */
.entry-content iframe[src*="action=get_viewer"] {
	display: block !important; /* the plugin sets inline-block in a style attribute */
	margin-left: auto;
	margin-right: auto;
}

.entry-content .embedpress-document-embed {
	margin-left: auto;
	margin-right: auto;
}

.entry-content .wp-video {
	width: 100% !important; /* WordPress sets 640px in a style attribute */
	max-width: 1000px;
	margin: 0 auto;
}

.entry-content .wp-video video {
	display: block;
	width: 100%;
	height: auto;
}

.entry-content [data-embed-type="document_mp4"] {
	display: block !important; /* EmbedPress sets a 600 x 550 inline-block box in a style attribute */
	width: 100% !important;
	max-width: 1000px !important;
	height: auto !important;
	max-height: none !important;
	margin: 0 auto;
}

.entry-content [data-embed-type="document_mp4"] video {
	display: block;
	width: 100%;
	height: auto;
}

/* Embeds leave empty paragraphs around themselves, each adding 16px. */
.entry-content > p:empty {
	display: none;
}

/* ---------- News grids ----------
 * Rows are spaced with a flex gap rather than a margin under every card, so the last row adds
 * nothing to the space above the signup band (Videos ended 64px late). */
#newsitems > article,
.archive #main,
.search #main {
	row-gap: 48px;
}

#newsitems .newspost,
.archive #main .newspost,
.search #main .newspost {
	margin-bottom: 0;
}

.newspost .entry-date {
	display: block;
	margin-bottom: 6px;
	color: var(--rga-muted);
	font-size: .75rem;
	letter-spacing: .06em;
}

.newspost h4 {
	font-size: 1.125rem;
	line-height: 1.3;
}

/* Pagination: one centred row of equal squares. The child theme forced the items to inline-block,
 * which left the current page's number pinned to the top of its box, and the empty "previous"
 * slot on page one took up room. The divider now spans the content width, not the column box. */
#nav-posts {
	flex: 0 0 calc(100% - 20px);
	margin: 0 10px;
	padding-top: 32px;
	border-top-color: #dfe2e7;
}

@media screen and (min-width: 40em) {
	#nav-posts {
		flex-basis: calc(100% - 30px);
		margin: 0 15px;
	}
}

#nav-posts .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: 0;
}

#nav-posts .pagination li {
	display: flex !important; /* beats the child theme's inline-block !important */
	margin: 0;
}

#nav-posts .pagination li:empty {
	display: none !important;
}

#nav-posts .pagination a,
#nav-posts .pagination .current {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	margin: 0;
	padding: 0 8px;
	font-size: .875rem;
	line-height: 1;
}

@media screen and (max-width: 39.9375em) {
	#nav-posts .pagination {
		gap: 2px;
	}

	#nav-posts .pagination a,
	#nav-posts .pagination .current {
		min-width: 32px;
		padding: 0 6px;
	}
}

/* ---------- Homepage photo ----------
 * The photo was a one-slide Slider Revolution slider whose text and arrows the Customizer hid.
 * It is now a plain image at the slider's sizes: 1500 x 550 proportions on desktops (550px tall
 * at most), 998 x 450 from 480px (450px at most) and 650 x 450 on phones. Padding sets the height
 * from the width; aspect-ratio would let max-height narrow the photo on wide screens. No overflow
 * rule: it would make the box dodge the header's floated logo and menu above it. */
.rga-hero {
	position: relative;
}

.rga-hero::before {
	content: "";
	display: block;
	padding-top: calc(450 / 650 * 100%);
}

.rga-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (min-width: 30em) {
	.rga-hero {
		max-height: 450px;
	}

	.rga-hero::before {
		padding-top: calc(450 / 998 * 100%);
	}
}

@media screen and (min-width: 64em) {
	.rga-hero {
		max-height: 550px;
	}

	.rga-hero::before {
		padding-top: calc(550 / 1500 * 100%);
	}
}

/* The Customizer pulls the photo up under the menu by 85px, the desktop menu's height. The phone
 * and tablet title bar is 76px, so the photo began 9px above the top of the screen. */
@media screen and (max-width: 63.9375em) {
	body.home .header {
		margin-bottom: -76px;
	}
}

/* ---------- Homepage sections ----------
 * Each band had its own padding (1.5rem, 40/10px, 60px, 40px); they now share one value. */
body #aboutfooter {
	padding: var(--rga-section) var(--rga-gutter) !important; /* beats the Customizer's !important */
}

#aboutfooter h4 {
	line-height: 1.45;
}

#aboutfooter .button {
	margin-top: 24px;
	margin-bottom: 0;
}

#emailrow {
	padding: var(--rga-section) calc(var(--rga-gutter) - 10px); /* plus the column's own 10px */
}

@media screen and (min-width: 40em) {
	#emailrow {
		padding-left: calc(var(--rga-gutter) - 15px);
		padding-right: calc(var(--rga-gutter) - 15px);
	}
}

#emailrow h4 {
	margin: 0 0 20px;
}

#emailrow .gform_wrapper {
	margin: 0;
}

/* The submit button sits inline with the fields, so the form footer only holds hidden inputs; its
 * 38px of padding unbalanced the band. Collapsed, not removed: the hidden inputs still submit. */
#emailrow .gform_footer {
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* The map band keeps its full-bleed photo, but its text and map line up with the container the
 * news section below uses (the text started at 24px while the news grid starts at 120px). */
#maprow {
	padding: var(--rga-section) max(calc(var(--rga-gutter) - 10px), calc((100% - var(--rga-container)) / 2 - 10px));
}

@media screen and (min-width: 40em) {
	#maprow {
		padding-left: max(calc(var(--rga-gutter) - 15px), calc((100% - var(--rga-container)) / 2 - 15px));
		padding-right: max(calc(var(--rga-gutter) - 15px), calc((100% - var(--rga-container)) / 2 - 15px));
	}
}

#maprow .mapinfo {
	margin-top: 0;
}

.home #newsrow {
	padding: var(--rga-section) 0;
}

.home #newsitems {
	margin-top: 32px;
}

/* Read More News sits one grid row-gap (48px) below the cards, so it reads as its own row
 * rather than part of the last card. */
.homenews {
	margin: 48px 0 0 !important; /* the child theme sets margin-top: 0 !important */
}

/* ---------- Video and tweet band ----------
 * The photo and the tweet panel run to the screen edges, but what sits on them lines up with the
 * container like every other band: the caption starts on its left edge; the tweets and the Follow
 * labels end on its right edge. The edges are measured from each half (100% - half the
 * container), since 100vw counts the scrollbar on Windows. */
.playbutton {
	inset: 0;
	margin: auto; /* centred on the photo; the child theme's 38% / 40% offsets drifted 29px on phones */
}

/* A soft shade under the caption, which crosses the shirt and tie in the photo. */
#ourvideos::before {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
	pointer-events: none;
}

#ourvideostext {
	left: 0;
	bottom: 0;
	padding: 0 var(--rga-gutter) 32px max(var(--rga-gutter), calc(100% - var(--rga-container) / 2));
}

#ourvideostext .button {
	margin: 16px 0 0;
}

/* On phones the band is a single column with everything else in it centred (the play button,
 * the tweets, the Follow tiles), so the caption centres on the same axis. */
@media screen and (max-width: 39.9375em) {
	#ourvideostext {
		right: 0;
		text-align: center;
	}
}

@media screen and (max-width: 39.9375em) {
	#twitterfeedtext {
		padding: 40px calc(var(--rga-gutter) - 10px) 16px; /* plus the column's own 10px at the sides; the last tweet adds 24px */
	}

	/* The feed's own bottom margin and last-item padding left a 110px empty band above the tiles. */
	#twitterfeedtext #ctf,
	#twitterfeedtext .ctf-tweets {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	#twitterfeedtext .ctf-item:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

/* The two Follow tiles share one height, and each whole tile is the link. Icons and labels sit
 * at the top, so the two icons stay level when the Facebook label wraps. The colour is on the
 * tile rather than its column, so the Facebook blue can run on past the container. */
#socialicons {
	display: flex;
}

#socialicons::before,
#socialicons::after {
	display: none; /* Foundation's clearfix would become flex items */
}

#socialicons > div {
	display: flex;
	flex: 1 1 50%;
}

#socialiconsfb {
	background-color: #a70317;
}

#socialiconstw {
	background-color: #2e6298;
}

#socialicons > div > .columns {
	display: flex;
	width: 100%;
	float: none;
	padding: 0 !important; /* the child theme sets 30px 20px 10px */
	background-color: transparent;
}

#socialicons a {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	padding: 28px 12px;
	text-align: center;
}

#socialicons p {
	margin: 0;
}

/* The Follow tiles sat above an empty band; they now sit at the bottom of the tweet column.
 * The background photo tiled, leaving a seam above the tiles; it now covers the panel and keeps
 * the eagle in the top corner. */
#twitterfeed {
	display: flex;
	flex-direction: column;
	background-position: right top;
	background-size: cover;
}

#twitterfeedtext {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center; /* tweets sit in the middle of the space above the tiles */
}

/* Side by side, the two columns share one height through flexbox (Foundation's Equalizer measured
 * them before the web fonts loaded). The tweet panel's 112px of padding becomes the band rhythm,
 * and the X tile takes one half of the container's right half; the Facebook tile takes the other
 * and its colour carries on to the screen edge. */
@media screen and (min-width: 40em) {
	#socialfooter {
		display: flex;
	}

	#socialfooter::before,
	#socialfooter::after {
		display: none;
	}

	#twitterfeed {
		padding-left: 0;
		padding-right: 0;
	}

	#twitterfeedtext {
		padding: var(--rga-section) max(var(--rga-gutter), calc(100% - var(--rga-container) / 2)) var(--rga-section) calc(2 * var(--rga-gutter));
	}

	#twitterfeedtext .ctf-item {
		max-width: none; /* the panel's padding sets the line length */
	}

	#socialicons {
		margin-left: 0;
		margin-right: 0;
	}

	#socialicons > #socialiconsfb {
		flex: 0 0 calc((100% - max(var(--rga-gutter), 100% - var(--rga-container) / 2)) / 2);
	}

	#socialicons > #socialiconstw {
		flex: 1 1 0%;
		padding-right: max(var(--rga-gutter), calc(100% - var(--rga-container) / 2));
	}
}

/* ---------- Footer ---------- */
.footer #inner-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 32px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.footer #inner-footer::before,
.footer #inner-footer::after {
	display: none; /* Foundation's clearfix would become flex items */
}

.footer #inner-footer > .columns {
	width: auto;
	flex: 0 1 auto;
}

.footer p.copyright {
	float: none;
	padding: 0;
}

@media screen and (max-width: 39.9375em) {
	.footer #inner-footer {
		flex-direction: column;
		text-align: center;
	}
}

/* ---------- Not found ---------- */
#content-not-found {
	max-width: 36rem;
	margin: 0 auto;
	text-align: center;
}

#content-not-found .article-header h2 {
	margin: 0 0 12px;
}

#content-not-found .entry-content > p:first-child {
	margin-bottom: 0;
}

#content-not-found .search-form {
	margin: 28px 0 20px;
}

#content-not-found .not-found-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

#content-not-found .not-found-actions .button {
	flex: 1 1 220px; /* equal widths: stacked full-width on phones, side by side when they fit */
	margin: 0;
}

/* ---------- X (formerly Twitter) ---------- */
.navtw {
	background-image: url('../../images/navx.svg');
}

#socialicons .x-logo {
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px auto 18px;
}

/* ---------- Mobile menu ----------
 * The burger's three lines fold into an X while the panel is open, and it stays above the panel
 * as the close button. The panel fades in under the title bar and its links settle in one after
 * another. Donate is the panel's one red button; the social icons sit in a row beneath it. */
.rga-burger {
	position: relative;
	width: 44px;
	height: 44px;
	margin: 8px calc(var(--rga-gutter) - 18px) 0 0; /* centred on the 60px logo; the lines end on the gutter (the bar pads 8px, the lines sit 10px in) */
	cursor: pointer;
}

.rga-burger__line {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
	transition: top .3s var(--rga-ease), transform .3s var(--rga-ease), opacity .2s ease;
}

.rga-burger__line:nth-child(1) {
	top: 14px;
}

.rga-burger__line:nth-child(2) {
	top: 21px;
}

.rga-burger__line:nth-child(3) {
	top: 28px;
}

.rga-burger[aria-expanded="true"] .rga-burger__line:nth-child(1) {
	top: 21px;
	transform: rotate(45deg);
}

.rga-burger[aria-expanded="true"] .rga-burger__line:nth-child(2) {
	opacity: 0;
	transform: scaleX(.3);
}

.rga-burger[aria-expanded="true"] .rga-burger__line:nth-child(3) {
	top: 21px;
	transform: rotate(-45deg);
}

.rga-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 998; /* under the title bar (999), so the logo and the close button stay on top */
	display: flex;
	flex-direction: column;
	padding: 96px var(--rga-gutter) 40px; /* the links share the logo's gutter */
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--rga-navy);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

html.rga-nav-open .rga-mobile-nav {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
}

/* Logged-in editors also have the WordPress admin bar above the title bar. */
.admin-bar .rga-mobile-nav {
	padding-top: 128px;
}

@media screen and (max-width: 782px) {
	.admin-bar .rga-mobile-nav {
		padding-top: 142px;
	}
}

html.rga-nav-open,
html.rga-nav-open body {
	overflow: hidden;
}

.rga-mobile-nav__menu {
	margin: 0;
	list-style: none;
}

.rga-mobile-nav__menu > li {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity .35s var(--rga-ease), transform .35s var(--rga-ease);
}

html.rga-nav-open .rga-mobile-nav__menu > li {
	opacity: 1;
	transform: none;
}

html.rga-nav-open .rga-mobile-nav__menu > li:nth-child(2) { transition-delay: .04s; }
html.rga-nav-open .rga-mobile-nav__menu > li:nth-child(3) { transition-delay: .08s; }
html.rga-nav-open .rga-mobile-nav__menu > li:nth-child(4) { transition-delay: .12s; }
html.rga-nav-open .rga-mobile-nav__menu > li:nth-child(5) { transition-delay: .16s; }
html.rga-nav-open .rga-mobile-nav__menu > li:nth-child(6) { transition-delay: .2s; }
html.rga-nav-open .rga-mobile-nav__menu > li:nth-child(n+7) { transition-delay: .24s; }

.rga-mobile-nav__menu > li:not(.navicon) {
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.rga-mobile-nav__menu > li:not(.navicon) > a {
	display: block;
	padding: 14px 0;
	color: #fff;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	transition: opacity .2s ease;
}

.rga-mobile-nav__menu > li:not(.navicon) > a:hover {
	opacity: .8;
}

/* The current page gets a red bar at the screen edge, so every label keeps one left edge. */
.rga-mobile-nav__menu > .current-menu-item > a {
	position: relative;
}

.rga-mobile-nav__menu > .current-menu-item > a::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--rga-gutter));
	width: 4px;
	background: var(--rga-red);
}

.rga-mobile-nav__menu > li:has(> a[href*="winred.com"]) {
	border-bottom: 0;
}

.rga-mobile-nav__menu > li:not(.navicon) > a[href*="winred.com"] {
	display: inline-block;
	margin: 28px 0 8px;
	padding: 14px 32px;
	background: var(--rga-red);
	font-size: 1.125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.rga-mobile-nav__menu > li.navicon {
	display: inline-block;
	width: 44px;
	height: 44px;
	margin: 24px 12px 0 0;
	background-position: left center; /* the first icon starts on the gutter */
	background-size: 40px 40px;
}

.rga-mobile-nav__menu > li.navicon > a {
	display: block;
	height: 100%;
	overflow: hidden;
}

@media screen and (min-width: 64em) {
	.rga-mobile-nav {
		display: none;
	}
}

/* Foundation's wrapper hides an unused off-canvas panel with overflow-x: hidden, but a hidden
 * overflow can still be scrolled by focus or touch, which slid the whole page 147px left when the
 * menu opened. A clipped overflow cannot scroll at all. */
.off-canvas-wrapper {
	overflow-x: hidden;
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	.rga-burger__line,
	.rga-mobile-nav,
	.rga-mobile-nav__menu > li {
		transition: none !important;
	}
}

/* ---------- Interaction ---------- */
.button,
.gform_button,
#socialicons a {
	transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

#socialicons a:hover {
	opacity: .85;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Motion ----------
 * One quiet movement, used everywhere: content settles up 14px and fades in as it enters the
 * viewport, and fades away as it leaves through the top. Cards and tiles in a row follow each
 * other by a beat. A tiny script in the head adds .rga-motion to <html> only when the visitor
 * allows motion, and motion.js toggles .is-in / .is-out; without both, nothing is hidden. The
 * :where() lists keep these rules at low specificity so .is-in and .is-out override them.
 * The page title strip fades in once on load. */
@media screen and (prefers-reduced-motion: no-preference) {

html.rga-motion :where(
	#aboutfooter .row,
	#governorbar .columns,
	#emailrow .emailform,
	#maprow .mapinfo,
	#maprow [id="2016map"],
	#newsrow > h2,
	.newspost,
	.homenews,
	#nav-posts,
	#ourvideostext,
	#twitterfeedtext .ctf-item,
	#socialicons .columns,
	.govlist .columns,
	#sidebar1 .relatedposts li,
	#statenews > h2
) {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity .7s var(--rga-ease), transform .7s var(--rga-ease);
	transition-delay: var(--rga-delay, 0ms);
}

html.rga-motion :where(
	#aboutfooter .row,
	#governorbar .columns,
	#emailrow .emailform,
	#maprow .mapinfo,
	#maprow [id="2016map"],
	#newsrow > h2,
	.newspost,
	.homenews,
	#nav-posts,
	#ourvideostext,
	#twitterfeedtext .ctf-item,
	#socialicons .columns,
	.govlist .columns,
	#sidebar1 .relatedposts li,
	#statenews > h2
).is-in {
	opacity: 1;
	transform: none;
}

html.rga-motion .is-out.is-out {
	opacity: 0;
	transform: translate3d(0, -10px, 0);
	transition-duration: .45s;
	transition-delay: 0ms;
}

}

@keyframes rga-settle {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.page-header .page-title {
	animation: rga-settle .5s var(--rga-ease) both;
}

@media (prefers-reduced-motion: reduce) {
	.page-header .page-title {
		animation: none;
	}

	.newspost > a:first-child .wp-post-image {
		transition: none;
	}
}