/*
 * Homepage redesign (staging).
 * Loaded only on the front page, after styles.css, so it can override
 * homepage-specific rules without touching any other template.
 * Reuses the site's existing palette (#2AB399 accent, #686969 grey,
 * #262626 ink) and body font (Roboto) so the homepage still matches the
 * header/nav/footer, which are unchanged.
 */

/* Nav bar overlay: was a neutral rgba(0,0,0,.5) in the original theme —
   tinted dark teal instead so it reads as intentional/branded rather than
   generic gray, while staying translucent so the hero photo still shows
   through at the top of the page (the white "stuck" state on scroll is
   unchanged, from the original theme). */
#nav-container {
	background: rgba(12, 33, 31, 0.6);
}
/* Safety net: #main-nav (the full desktop menu) is meant to be hidden
   below Foundation's "large" breakpoint (64em) in favor of the mobile
   burger menu, but it's been reported leaking through on some phones —
   force it below the same breakpoint the "is-stuck" rules already use. */
@media screen and (max-width: 63.9375em) {
	#main-nav {
		display: none !important;
	}
}

/* Mobile menu (#mobile-nav) opens correctly on tap, but the original
   theme only gives it z-index:2 while the hero carousel's own content
   (.main-carousel, z-index:2 set below) sits in the same stacking
   order — so the open menu was rendering behind the hero, with only a
   sliver of its first item visible above it. Confirmed by reproducing
   and testing this fix directly before shipping it. */
#mobile-nav {
	z-index: 500;
}

.legis-strip h2,
.leadership-section h2,
.paths-section h2,
.news-section-head h2 {
	text-wrap: balance;
}

.eyebrow {
	display: inline-block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1f8a72;
	margin-bottom: 10px;
}

/* ---------- news ticker ---------- */
.news-ticker {
	background: #fff;
	border-bottom: 1px solid #ececec;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	/* No z-index/positioning here on purpose — Foundation's nav dropdowns
	   (.is-dropdown-submenu) need to layer above this bar, which only
	   works if this stays in the normal stacking order. */
}
.news-ticker-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 11px 0;
}
.news-ticker-label {
	flex: none;
	font-size: 14px;
	font-weight: 700;
	color: #262626;
	padding-inline-end: 18px;
	border-inline-end: 1px solid #e0e0e0;
	white-space: nowrap;
}
.news-ticker-track {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 20px;
}
.news-ticker-item {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 700;
	color: #1f8a72;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease;
}
.news-ticker-item.is-active {
	opacity: 1;
	visibility: visible;
}
.news-ticker-item:hover {
	text-decoration: underline;
}
@media (max-width: 640px) {
	.news-ticker-label {
		font-size: 12px;
		padding-inline-end: 10px;
	}
	.news-ticker-item {
		font-size: 12px;
	}
}

/* ---------- hero ---------- */
.hero-shell {
	position: relative;
	overflow: hidden;
}
.hero-motif {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 42%;
	opacity: 0.35;
	pointer-events: none;
	z-index: 1;
}
.hero-shell .main-carousel {
	position: relative;
	z-index: 2;
}
.hero-search {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 3;
	width: min(560px, calc(100% - 40px));
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
	padding: 6px 6px 6px 18px;
}
[dir="rtl"] .hero-search {
	padding: 6px 18px 6px 6px;
}
.hero-search-icon {
	flex: none;
	color: #939393;
}
.hero-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	font-size: 14px;
	color: #262626;
	background: transparent;
	appearance: none;
}
.hero-search input[type="search"]::placeholder {
	color: #939393;
}
.hero-search button {
	flex: none;
	border: 0;
	border-radius: 999px;
	background: #2AB399;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 10px 20px;
	cursor: pointer;
	transition: background 0.2s ease;
}
.hero-search button:hover {
	background: #1f8a72;
}
@media (max-width: 640px) {
	/* The hero's fixed-height carousel plus a long caption (especially in
	   Arabic) can push the "Continue Reading" button down far enough that
	   an absolutely-positioned search bar overlaps it and the Quick
	   Actions bar beneath. Below this breakpoint the search bar drops out
	   of the overlay entirely and sits in normal flow under the hero
	   image instead, so it can never collide with the caption content. */
	.hero-search {
		position: static;
		left: auto;
		bottom: auto;
		transform: none;
		width: auto;
		margin: 12px 16px 0;
		padding: 5px 5px 5px 14px;
	}
	.hero-search button {
		padding: 9px 14px;
		font-size: 12px;
	}
}
.hero-shell .caption .eyebrow {
	color: #fff;
	opacity: 0.85;
}
/* Legibility scrim behind the hero caption — slide photos can be bright
   enough to wash out the dark text the original theme uses. */
.hero-shell .carousel-cell {
	position: relative;
}
.hero-shell .carousel-cell::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(4, 20, 18, 0.72) 0%, rgba(4, 20, 18, 0.42) 42%, rgba(4, 20, 18, 0) 68%);
	z-index: 1;
	pointer-events: none;
}
.hero-shell .carousel-cell .grid-container {
	position: relative;
	z-index: 2;
}
.hero-shell .caption h3,
.hero-shell .caption p {
	color: #fff;
}
[dir="rtl"] .hero-shell .carousel-cell::before {
	background: linear-gradient(260deg, rgba(4, 20, 18, 0.72) 0%, rgba(4, 20, 18, 0.42) 42%, rgba(4, 20, 18, 0) 68%);
}

/* ---------- legal framework strip ---------- */
.legis-strip {
	background: #F7f7f7;
	padding: 44px 0;
}
.legis-header {
	margin-bottom: 30px;
	max-width: 60ch;
}
.legis-strip h2 {
	font-size: 22px;
	font-weight: bold;
	color: #262626;
	margin: 0;
}
.legis-card {
	background: #fff;
	border-radius: 6px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.04);
	padding: 22px 20px 20px;
	display: flex;
	gap: 14px;
	align-items: stretch;
	height: 100%;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.legis-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #2AB399;
}
.legis-card:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}
.legis-card-linkable {
	cursor: pointer;
}
.legis-tag {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #2AB399;
	border-radius: 4px;
	padding: 3px 8px;
	white-space: nowrap;
	margin-top: 2px;
	flex: none;
}
.legis-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.legis-content .legis-link {
	margin-top: auto;
	padding-top: 10px;
}
/* When a card has no separate button (Newsletter today — its "Click
   Here" link lives inside the raw box_content, not as a .legis-link),
   the content block itself is the last child — push it down the same
   way, so this card lines up at the bottom like the other two instead
   of leaving "Click Here" stranded right under the title. */
.legis-content .legis-body:last-child {
	margin-top: auto;
	margin-bottom: 0;
}
.legis-card h4 {
	font-size: 15px;
	font-weight: bold;
	color: #262626;
	margin: 0 0 6px;
}
.legis-card p {
	font-size: 13px;
	color: #686969;
	margin: 0 0 10px;
}
/* The ACF box_content field is free-form WYSIWYG content authored years
   ago — for at least one card it contains its own heading/link (e.g. a
   "Click Here" h4) rather than plain text. Normalize any heading level
   inside it down to link-sized text so old content can't reintroduce a
   second oversized title into the card. */
.legis-body {
	font-size: 13px;
	color: #686969;
	margin: 0 0 10px;
}
.legis-body h1,
.legis-body h2,
.legis-body h3,
.legis-body h4,
.legis-body h5,
.legis-body h6 {
	display: block;
	font-size: 13px;
	font-weight: bold;
	margin: 6px 0 0;
	color: #1f8a72;
}
.legis-body a {
	color: #1f8a72;
	text-decoration: none;
}
.legis-link {
	font-size: 13px;
	font-weight: bold;
	color: #1f8a72;
	text-decoration: none;
}

/* ---------- leadership ---------- */
.leadership-section {
	padding: 48px 0 8px;
}
.leadership-section h2 {
	font-size: 22px;
	font-weight: bold;
	color: #262626;
	margin: 0 0 28px;
}
.leaders {
	margin-top: 0;
}
.leader-card {
	background: #fff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.04);
	border-radius: 6px;
	padding: 28px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	height: 100%;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.leader-card:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}
.leader-card img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 50%;
	flex: none;
}
.leader-copy h5 {
	font-weight: bold;
	color: #262626;
	margin: 0 0 10px;
}
.leader-copy p {
	color: #686969;
	padding-bottom: 16px;
	border-bottom: solid 1px #e8e8e8;
}
.leader-copy a {
	font-weight: bold;
	font-size: 14px;
	color: #1f8a72;
	text-decoration: none;
}

/* ---------- find your path ---------- */
.paths-section {
	background: #F7f7f7;
	padding: 48px 0;
	margin-top: 40px;
}
.paths-section h2 {
	font-size: 22px;
	font-weight: bold;
	color: #262626;
	margin: 0 0 28px;
}
.paths-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #e2e2e2;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	overflow: hidden;
}
.path-card {
	background: #fff;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 190px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	position: relative;
	z-index: 1;
}
.path-card:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
	z-index: 2;
}
.path-num {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	color: #939393;
}
.path-card h3 {
	font-size: 16px;
	font-weight: bold;
	color: #262626;
	margin: 0;
}
.path-card p {
	margin: 0;
	font-size: 13px;
	color: #686969;
	flex: 1;
}
.path-card a {
	font-size: 13px;
	font-weight: bold;
	color: #1f8a72;
	text-decoration: none;
	margin-top: auto;
}
@media (max-width: 768px) {
	.paths-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- news section head ---------- */
.news-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-top: 48px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e8e8e8;
}
.news-section-head h2 {
	font-size: 22px;
	font-weight: bold;
	color: #262626;
	margin: 6px 0 0;
}
.news-section-head .see-all {
	font-size: 13px;
	font-weight: bold;
	color: #1f8a72;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- floating latest-news panel ---------- */
.news-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 320px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
	z-index: 999;
	overflow: hidden;
	font-family: roboto, "sans-serif";
}
.news-float-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #2AB399;
	color: #fff;
	border: 0;
	padding: 12px 16px;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
}
.news-float-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
}
.news-float-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.news-float-chevron {
	transition: transform 0.2s ease;
	flex: none;
}
.news-float.is-collapsed .news-float-chevron {
	transform: rotate(180deg);
}
.news-float-body {
	max-height: 320px;
	overflow-y: auto;
	transition: max-height 0.25s ease, padding 0.25s ease;
	padding: 8px 0;
}
.news-float.is-collapsed .news-float-body {
	max-height: 0;
	padding: 0;
}
.news-float-body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.news-float-body li + li {
	border-top: 1px solid #f0f0f0;
}
.news-float-body a {
	display: block;
	padding: 10px 16px;
	text-decoration: none;
	color: #262626;
}
.news-float-body time {
	display: block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #939393;
	margin-bottom: 3px;
}
.news-float-body a span {
	display: block;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.35;
}
.news-float-all {
	display: block;
	text-align: center;
	padding: 10px 16px 4px;
	font-size: 12px;
	font-weight: bold;
	color: #1f8a72;
	text-decoration: none;
}
/* Arabic pages read right-to-left, so keep the floating panel on the
   leading side of the page (bottom-left) instead of always bottom-right. */
[dir="rtl"] .news-float {
	right: auto;
	left: 20px;
}
[dir="rtl"] .news-float-body a {
	text-align: right;
}

@media (max-width: 640px) {
	.news-float,
	[dir="rtl"] .news-float {
		left: 12px;
		right: 12px;
		width: auto;
		bottom: 12px;
	}
	/* The news panel becomes a full-width bar on small screens, so move the
	   a11y toggle out of the way to the top instead of sharing the bottom edge. */
	.a11y-widget,
	[dir="rtl"] .a11y-widget {
		bottom: auto;
		top: 12px;
		left: 12px;
		right: auto;
	}
	[dir="rtl"] .a11y-widget {
		left: auto;
		right: 12px;
	}
	.a11y-panel,
	[dir="rtl"] .a11y-panel {
		bottom: auto;
		top: 46px;
	}
}

/* ---------- scroll-reveal ---------- */
.reveal-on-scroll {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-on-scroll.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.reveal-on-scroll {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- quick actions ---------- */
.quick-actions {
	background: #0c211f;
	padding: 14px 0;
}
.quick-actions-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	justify-content: center;
}
.quick-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.quick-action svg {
	flex: none;
	opacity: 0.85;
}
.quick-action:hover {
	color: #7ce9de;
	border-color: #2AB399;
}

/* ---------- newsletter ---------- */
.newsletter-strip {
	background: #0c211f;
	color: #fff;
	padding: 44px 0;
	margin-top: 48px;
	border-radius: 8px;
}
.newsletter-strip .eyebrow {
	color: #7ce9de;
}
.newsletter-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.newsletter-inner h2 {
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	margin: 0 0 6px;
}
.newsletter-inner > div:first-child {
	max-width: 46ch;
}
.newsletter-inner p {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
}
.newsletter-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
	min-width: 240px;
	padding: 11px 14px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 14px;
}
.newsletter-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
.newsletter-message {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	padding: 10px 16px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.1);
}
.newsletter-message-success {
	background: rgba(42, 179, 153, 0.25);
}
.newsletter-message-error {
	background: rgba(220, 90, 90, 0.25);
}

/* ---------- accessibility widget ---------- */
/* Bottom-left in LTR, opposite corner from the floating news panel (which
   sits bottom-right in LTR / bottom-left in RTL) so the two never overlap
   in either language. */
.a11y-widget {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 1000;
}
[dir="rtl"] .a11y-widget {
	left: auto;
	right: 20px;
}
.a11y-panel {
	position: absolute;
	bottom: 46px;
	left: 0;
}
[dir="rtl"] .a11y-panel {
	left: auto;
	right: 0;
}
#gasreg-a11y-toggle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #d7d7d7;
	background: #fff;
	color: #262626;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.a11y-panel {
	width: 220px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
	padding: 14px;
}
.a11y-panel-title {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #939393;
}
.a11y-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 13px;
	color: #262626;
}
.a11y-stepper {
	display: flex;
	gap: 6px;
}
.a11y-stepper button,
.a11y-switch {
	border: 1px solid #d7d7d7;
	background: #fff;
	border-radius: 4px;
	padding: 4px 9px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	color: #262626;
}
.a11y-stepper button:hover,
.a11y-switch:hover {
	border-color: #2AB399;
	color: #1f8a72;
}

/* Text-size steps: scoped to the homepage content so header/nav (shared
   across the whole site) are unaffected by a preference set here. */
html.a11y-text-large #main-content,
html.a11y-text-large .hero-shell,
html.a11y-text-large .quick-actions,
html.a11y-text-large .partners-strip {
	font-size: 1.12em;
}
html.a11y-text-xlarge #main-content,
html.a11y-text-xlarge .hero-shell,
html.a11y-text-xlarge .quick-actions,
html.a11y-text-xlarge .partners-strip {
	font-size: 1.28em;
}

/* High contrast: darker text, stronger borders, no reliance on subtle greys. */
html.a11y-high-contrast body {
	background: #fff;
}
html.a11y-high-contrast #main-content,
html.a11y-high-contrast .hero-shell,
html.a11y-high-contrast .quick-actions,
html.a11y-high-contrast .partners-strip {
	color: #000;
}
html.a11y-high-contrast .legis-card,
html.a11y-high-contrast .leader-card,
html.a11y-high-contrast .path-card {
	border: 2px solid #000;
	box-shadow: none;
}
html.a11y-high-contrast .legis-card p,
html.a11y-high-contrast .leader-copy p,
html.a11y-high-contrast .path-card p,
html.a11y-high-contrast .partners-list li {
	color: #000;
}
html.a11y-high-contrast a {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.newsletter-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.newsletter-form {
		width: 100%;
	}
	.newsletter-form input[type="email"] {
		flex: 1;
		min-width: 0;
	}
}

/* ---------- inline PDF preview cue ---------- */
.gasreg-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.gasreg-pdf-icon {
	display: inline-flex;
	flex: none;
	opacity: 0.75;
}
html.gasreg-dark .gasreg-pdf-icon {
	color: #9fb8b3;
}

/* ---------- "New" freshness badge (posts under 48h old) ---------- */
.badge-new {
	display: inline-block;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: #2AB399;
	border-radius: 4px;
	padding: 3px 7px;
}
.latest-news figure {
	position: relative;
}
.latest-news figure .badge-new {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.badge-new-inline {
	margin-inline-start: 6px;
	padding: 2px 5px;
	font-size: 9px;
	vertical-align: middle;
}
/* .news-float-body a span (further up this file) targets the title span
   inside the same link and would otherwise force this badge to the same
   full-width block styling — this beats that on specificity. */
.news-float-body a span.badge-new-inline {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
}

/* =====================================================================
   Dark mode — scoped entirely to html.gasreg-dark, and only ever loaded
   on the front page (this stylesheet is is_front_page()-only), so it
   can safely restyle shared markup (header, footer) without touching
   any other template or leaking outside the homepage.
   ===================================================================== */
html.gasreg-dark body {
	background: #0b1615;
	color: #eaf4f2;
}
html.gasreg-dark #top-head {
	background: #12211f;
}
html.gasreg-dark #top-head li {
	border-color: rgba(255, 255, 255, 0.1);
}
html.gasreg-dark div#nav-container.is-stuck {
	background: #12211f;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html.gasreg-dark div#nav-container.is-stuck #main-nav > ul > li > a {
	color: #9fb8b3;
}
html.gasreg-dark #mobile-nav {
	background: #12211f;
	color: #eaf4f2;
}
html.gasreg-dark #main-content,
html.gasreg-dark #main-foot {
	background: #0b1615;
}
html.gasreg-dark #main-foot {
	box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.3);
}
html.gasreg-dark #main-foot .copyright,
html.gasreg-dark #main-foot p {
	color: #9fb8b3;
}
html.gasreg-dark #main-foot svg path[fill="#b3b4b4"] {
	fill: #1f3d38;
}

html.gasreg-dark .news-ticker {
	background: #12211f;
	border-bottom-color: #1f3d38;
	box-shadow: none;
}
html.gasreg-dark .news-ticker-label {
	color: #eaf4f2;
	border-inline-end-color: #1f3d38;
}

html.gasreg-dark .legis-strip,
html.gasreg-dark .paths-section {
	background: #101f1d;
}
html.gasreg-dark .legis-strip h2,
html.gasreg-dark .leadership-section h2,
html.gasreg-dark .paths-section h2,
html.gasreg-dark .news-section-head h2 {
	color: #eaf4f2;
}
html.gasreg-dark .legis-card,
html.gasreg-dark .leader-card,
html.gasreg-dark .path-card,
html.gasreg-dark .partners-strip,
html.gasreg-dark .a11y-panel,
html.gasreg-dark .news-float {
	background: #12211f;
	color: #eaf4f2;
}
html.gasreg-dark .legis-card h4,
html.gasreg-dark .leader-copy h5,
html.gasreg-dark .path-card h3,
html.gasreg-dark .latest-news h6,
html.gasreg-dark .news-float-body a {
	color: #eaf4f2;
}
html.gasreg-dark .legis-card p,
html.gasreg-dark .leader-copy p,
html.gasreg-dark .path-card p,
html.gasreg-dark .partners-list li,
html.gasreg-dark .last-updated-stamp {
	color: #9fb8b3;
}
html.gasreg-dark .leader-copy p {
	border-bottom-color: #1f3d38;
}
html.gasreg-dark .partners-strip {
	border-bottom-color: #1f3d38;
}
html.gasreg-dark .paths-grid {
	background: #1f3d38;
	border-color: #1f3d38;
}
html.gasreg-dark .latest-news .read-more span {
	background: #12211f;
}
html.gasreg-dark .latest-news .read-more a {
	color: #9fb8b3;
}
html.gasreg-dark .a11y-panel-title {
	color: #9fb8b3;
}
html.gasreg-dark .a11y-row {
	color: #eaf4f2;
}
html.gasreg-dark .a11y-stepper button,
html.gasreg-dark .a11y-switch {
	background: #101f1d;
	border-color: #1f3d38;
	color: #eaf4f2;
}
html.gasreg-dark .news-float-body li + li {
	border-top-color: #1f3d38;
}
html.gasreg-dark .news-float-body time {
	color: #7fa39c;
}

/* ---------- mobile/tablet fixes ---------- */
@media (max-width: 640px) {
	/* Below Foundation's medium breakpoint the 3 legal-framework cards
	   stack into single-column rows, but they were still being stretched
	   to match each other's height (correct for the 3-across desktop
	   row, wrong once stacked) — leaving a big empty gap in the shorter
	   cards. Let each stacked card size to its own content instead. */
	.legis-strip .cell {
		height: auto;
	}
	.legis-card {
		height: auto;
	}
}