/*
Theme Name: Watts & Wire
Theme URI: https://lightslategrey-rhinoceros-963881.hostingersite.com
Description: Custom theme for Watts & Wire — U.S. power & gas market news, data, and analysis. A navy & amber "power grid" identity built on the Astra framework for a fast, secure, fully-responsive foundation.
Author: Watts & Wire
Template: astra
Version: 1.0.0
Text Domain: watts-wire
*/

/* ==================================================================
   0. Design tokens
   ================================================================== */
:root {
	--ww-navy: #0f1f33;
	--ww-navy-2: #16283f;
	--ww-navy-3: #1e3350;
	--ww-amber: #f5a623;
	--ww-amber-dark: #d98c0f;
	--ww-white: #ffffff;
	--ww-offwhite: #f6f7f9;
	--ww-text: #1a1d23;
	--ww-muted: #5a6473;
	--ww-border: #e4e7ec;
	--ww-radius: 12px;
	--ww-shadow: 0 2px 10px rgba(15, 31, 51, 0.06);
	--ww-shadow-hover: 0 12px 28px rgba(15, 31, 51, 0.14);
	--ww-font-heading: 'Space Grotesk', 'Poppins', sans-serif;
	--ww-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==================================================================
   1. Base
   ================================================================== */
body {
	font-family: var(--ww-font-body);
	color: var(--ww-text);
	background: var(--ww-offwhite);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .ww-hero-title, .ww-section-title {
	font-family: var(--ww-font-heading);
	color: var(--ww-navy);
	letter-spacing: -0.01em;
}

a { color: var(--ww-navy-3); }
a:hover { color: var(--ww-amber-dark); }

::selection { background: var(--ww-amber); color: var(--ww-navy); }

.ww-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; }

/* ==================================================================
   2. Header
   ================================================================== */
.site-header,
#masthead,
.main-header-bar {
	background-color: var(--ww-navy) !important;
	border-bottom: 3px solid var(--ww-amber);
}

.ast-above-header,
.ast-above-header-wrap {
	background-color: var(--ww-navy-2) !important;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header .site-title a,
.site-header .site-title,
.site-header .ast-site-identity,
.site-header .site-description {
	color: var(--ww-white) !important;
}

.site-header .custom-logo-link img {
	max-height: 46px;
	width: auto;
}

/* If the menu still wraps at very narrow desktop widths, keep it tidy:
   right-align and give the wrapped row breathing room instead of the
   default left-packed look that reads as "misaligned". */
.main-header-menu {
	justify-content: flex-end;
	row-gap: 6px;
}

/* The uploaded logo already includes the "Watts & Wire" wordmark, so
   hide the separate text site title to avoid showing the name twice. */
.site-header .custom-logo-link ~ .site-title,
.site-header .ast-site-identity .site-title {
	display: none;
}

.main-header-menu a,
.site-header .main-navigation a {
	color: var(--ww-white) !important;
	font-family: var(--ww-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
}

/* Astra's default nav item padding (~15px each side, responsive) plus our
   full-size logo don't both fit on one line at common laptop widths
   (1280-1440px), which forces the menu to wrap into a second row and
   makes it look misaligned. Tighten padding/size so 8 nav items + logo
   comfortably fit on one line at typical desktop widths. */
.main-header-menu > .menu-item > a {
	padding-left: 9px !important;
	padding-right: 9px !important;
	font-size: 0.84rem !important;
}

.main-header-menu a:hover,
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a {
	color: var(--ww-amber) !important;
}

/* Underline uses absolute positioning (not a layout-flow element) so
   hovering never changes the link's box height/width — that box-size
   change was shifting the flex-wrap point on hover, causing the whole
   menu to visibly jump/flicker between one and two rows. */
.main-header-menu > .menu-item > a {
	position: relative;
}
.main-header-menu > .menu-item > a::after {
	content: "";
	position: absolute;
	left: 9px;
	right: 9px;
	bottom: 2px;
	height: 2px;
	background: var(--ww-amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.main-header-menu > .menu-item:hover > a::after {
	transform: scaleX(1);
}

.ast-mobile-menu-trigger-minimal svg,
.menu-toggle svg,
.astra-menu-toggle-icon,
.astra-menu-toggle-icon span {
	background-color: var(--ww-white) !important;
	color: var(--ww-white) !important;
}

/* small icons before key nav items, matched by URL — resilient to menu re-ordering */
.main-header-menu a[href*="/category/energy-markets-101"],
.main-header-menu a[href*="/category/news"],
.main-header-menu a[href*="/category/rep-corner"],
.main-header-menu a[href*="/category/guest-voices"],
.main-header-menu a[href*="/data-dashboards"] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ==================================================================
   2b. Front-page content-area flex fix
   Astra's .ast-container (wrapping #primary/#secondary) is a nowrap flex
   row. Our hero/tiles/heading hooks inject as siblings of the content
   area inside that same flex row, so without this they get squeezed
   into one line alongside the post column. Force each to its own
   full-width row on the front page only.
   ================================================================== */
body.home .ast-container {
	flex-wrap: wrap;
}
body.home .ww-hero,
body.home .ww-cat-grid-section,
body.home .ww-latest-heading-wrap,
body.home .ast-container > .content-area,
body.home .ww-footer-trust {
	flex: 1 1 100%;
	max-width: 100%;
}

/* ==================================================================
   3. Hero
   ================================================================== */
.ww-hero {
	background: linear-gradient(135deg, var(--ww-navy) 0%, var(--ww-navy-3) 100%);
	position: relative;
	overflow: hidden;
	padding: 72px 24px 84px;
}
.ww-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(245,166,35,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245,166,35,0.06) 1px, transparent 1px);
	background-size: 44px 44px;
	pointer-events: none;
}
.ww-hero-inner {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.ww-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ww-amber);
	font-family: var(--ww-font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	margin-bottom: 20px;
}
.ww-eyebrow-icon { width: 16px; height: 16px; }

.ww-hero-title {
	color: var(--ww-white) !important;
	font-size: clamp(2rem, 4.5vw, 3rem);
	line-height: 1.15;
	font-weight: 700;
	margin: 0 0 20px;
}
.ww-hero-sub {
	color: #c9d2df;
	font-size: 1.1rem;
	line-height: 1.6;
	margin: 0 0 32px;
}
.ww-hero-cta {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.ww-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 999px;
	font-family: var(--ww-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ww-btn:hover { transform: translateY(-2px); }
.ww-btn-amber {
	background: var(--ww-amber);
	color: var(--ww-navy) !important;
	box-shadow: 0 8px 20px rgba(245,166,35,0.35);
}
.ww-btn-amber:hover { background: var(--ww-amber-dark); color: var(--ww-navy) !important; }
.ww-btn-outline {
	background: transparent;
	color: var(--ww-white) !important;
	border: 1.5px solid rgba(255,255,255,0.5);
}
.ww-btn-outline:hover { border-color: var(--ww-amber); color: var(--ww-amber) !important; }

/* ==================================================================
   4. Section shells
   ================================================================== */
.ww-section-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 64px 24px;
}
.ww-cat-grid-section .ww-section-inner { padding-bottom: 24px; }

.ww-section-title {
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0 0 32px;
	position: relative;
	padding-bottom: 14px;
}
.ww-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: var(--ww-amber);
}

/* ==================================================================
   5. Category tiles
   ================================================================== */
.ww-cat-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
.ww-cat-tile {
	background: var(--ww-white);
	border: 1px solid var(--ww-border);
	border-radius: var(--ww-radius);
	padding: 26px 20px;
	text-decoration: none !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ww-cat-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--ww-shadow-hover);
	border-color: var(--ww-amber);
}
.ww-cat-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--ww-navy);
	color: var(--ww-amber);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ww-cat-icon .ww-icon { width: 22px; height: 22px; }
.ww-cat-tile-accent .ww-cat-icon { background: var(--ww-amber); color: var(--ww-navy); }
.ww-cat-name {
	font-family: var(--ww-font-heading);
	font-weight: 700;
	color: var(--ww-navy);
	font-size: 1.02rem;
}
.ww-cat-blurb {
	color: var(--ww-muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

/* ==================================================================
   6. Post grid / cards (front page + archives)
   ================================================================== */
.ww-latest-heading-wrap { padding-bottom: 0; margin-bottom: -12px; }

.site-main {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px 64px;
}

.site-main .ast-row {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.ast-article-post {
	background: var(--ww-white);
	border: 1px solid var(--ww-border);
	border-radius: var(--ww-radius);
	padding: 26px 24px 24px !important;
	box-shadow: var(--ww-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	margin: 0 !important;
}
.ast-article-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--ww-shadow-hover);
}

.ast-taxonomy-container.cat-links {
	display: inline-block;
	font-family: var(--ww-font-heading);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ww-navy);
	background: rgba(245,166,35,0.18);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.ast-taxonomy-container.cat-links a { color: var(--ww-navy); }

.entry-title.ast-blog-single-element {
	font-size: 1.2rem;
	line-height: 1.35;
	margin: 0 0 10px;
}
.entry-title a { color: var(--ww-navy); }
.entry-title a:hover { color: var(--ww-amber-dark); }

.entry-meta {
	color: var(--ww-muted);
	font-size: 0.82rem;
	margin-bottom: 12px;
}

.ast-article-post .entry-content,
.ast-article-post .entry-summary {
	color: var(--ww-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* pagination should span the full grid width */
.navigation.pagination,
.page-numbers.pagination,
nav.navigation {
	grid-column: 1 / -1;
}

/* Astra injects an inline "width: 33.33%" rule on .ast-article-post for
   its native flex/float layout. Under our grid override that percentage
   resolves against the grid CELL (already 1/3 width) instead of the row,
   shrinking each card to 1/9 width. Force cards to fill their cell. */
.site-main .ast-row > .ast-article-post {
	width: 100% !important;
	max-width: 100% !important;
}

/* ==================================================================
   7. Single post / page content
   ================================================================== */
.single .entry-content,
.page .entry-content {
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--ww-text);
	max-width: 760px;
}
.single .entry-title,
.page .entry-title {
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
	line-height: 1.25;
}
.single .entry-content h2,
.page .entry-content h2 {
	margin-top: 2em;
	font-size: 1.5rem;
	border-left: 4px solid var(--ww-amber);
	padding-left: 14px;
}
.single .entry-content blockquote,
.page .entry-content blockquote {
	border-left: 4px solid var(--ww-amber);
	background: var(--ww-offwhite);
	padding: 16px 20px;
	border-radius: 0 8px 8px 0;
	color: var(--ww-navy);
}
.single .entry-content table,
.page .entry-content table {
	border-collapse: collapse;
	width: 100%;
}
.single .entry-content table th,
.page .entry-content table th {
	background: var(--ww-navy);
	color: var(--ww-white);
	font-family: var(--ww-font-heading);
	text-align: left;
	padding: 12px 14px;
}
.single .entry-content table td,
.page .entry-content table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--ww-border);
}
.single .entry-content table tr:nth-child(even) td,
.page .entry-content table tr:nth-child(even) td {
	background: var(--ww-offwhite);
}

/* ==================================================================
   8. Buttons, forms, WPUF submission form
   NOTE: deliberately scoped to real submit/CTA controls only —
   NOT a bare "button" selector. WPUF's rich-text toolbar renders its
   Bold/Italic/etc. controls as plain <button> elements with no class,
   and ".wpuf-submit" is the *wrapping <li>* around Submit + Save Draft
   (not the button itself), so a broad rule here turns editor icons
   into amber pills and swallows Submit+Save Draft into one giant pill.
   ================================================================== */
input[type="submit"],
input[type="button"],
.wpuf-submit-button,
.wp-block-button__link,
a.ww-btn {
	background: var(--ww-amber) !important;
	color: var(--ww-navy) !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--ww-font-heading);
	font-weight: 600 !important;
	padding: 12px 26px !important;
	transition: background 0.15s ease;
}
input[type="submit"]:hover,
input[type="button"]:hover,
.wpuf-submit-button:hover {
	background: var(--ww-amber-dark) !important;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
textarea, select, .wpuf-fields input, .wpuf-fields textarea {
	border: 1.5px solid var(--ww-border) !important;
	border-radius: 8px !important;
	padding: 11px 14px !important;
	font-family: var(--ww-font-body);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--ww-amber) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(245,166,35,0.2) !important;
}

/* ==================================================================
   9. Footer
   ================================================================== */
#colophon,
.site-footer,
.ast-builder-footer-grid,
.site-below-footer-wrap {
	background-color: var(--ww-navy) !important;
	color: #c9d2df !important;
}
#colophon a { color: var(--ww-white) !important; }
#colophon a:hover { color: var(--ww-amber) !important; }

.ww-footer-trust {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px 24px;
	background: var(--ww-navy-2);
	color: #c9d2df;
	font-size: 0.88rem;
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid rgba(255,255,255,0.08);
	border-radius: var(--ww-radius);
	margin-top: 8px;
}
.ww-footer-trust-icon { color: var(--ww-amber); flex-shrink: 0; }
.ww-footer-trust a { color: var(--ww-amber) !important; text-decoration: underline; }

/* ==================================================================
   9b. Site-wide scrolling energy-data ticker
   ================================================================== */
.ww-ticker-wrap {
	position: sticky;
	top: var(--ww-adminbar-h, 0px);
	z-index: 501;
	display: flex;
	align-items: center;
	background: var(--ww-navy);
	color: #ffe3ad;
	overflow: hidden;
	white-space: nowrap;
	font-family: var(--ww-font-body);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-bottom: 2px solid var(--ww-amber);
}

.ww-ticker-track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	animation: ww-ticker-scroll 50s linear infinite;
	padding-right: 40px;
	will-change: transform;
}

.ww-ticker-wrap:hover .ww-ticker-track {
	animation-play-state: paused;
}

.ww-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 24px;
	border-right: 1px solid rgba(255,255,255,0.15);
	color: #ffe3ad;
	font-weight: 700;
}

.ww-ticker-icon {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	color: var(--ww-amber);
}

.ww-ticker-link {
	flex-shrink: 0;
	margin-left: auto;
	padding: 9px 18px;
	background: var(--ww-amber);
	color: var(--ww-navy) !important;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none !important;
	position: relative;
	z-index: 2;
}
.ww-ticker-link:hover { background: #fff; }

@keyframes ww-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.ww-ticker-track {
		animation: none;
		overflow-x: auto;
	}
}

@media (max-width: 600px) {
	.ww-ticker-link { display: none; }
	.ww-ticker-item { padding: 9px 18px; font-size: 0.72rem; }
}

/* ==================================================================
   9c. Sticky header (menu stays visible on scroll)
   ================================================================== */
#masthead.site-header {
	position: sticky;
	top: var(--ww-sticky-header-top, 0px);
	z-index: 500;
}

/* ==================================================================
   9d. "Get Involved" band (subscribe + guest post CTA)
   ================================================================== */
.ww-involved-band {
	background: var(--ww-navy-2);
	padding: 44px 0;
	border-top: 3px solid var(--ww-amber);
}
.ww-involved-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.ww-involved-col-guest {
	border-left: 1px solid rgba(255,255,255,0.14);
	padding-left: 32px;
}
.ww-involved-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ww-font-heading);
	color: #fff;
	font-size: 1.15rem;
	margin: 0 0 6px;
}
.ww-involved-icon { width: 18px; height: 18px; color: var(--ww-amber); flex-shrink: 0; }
.ww-involved-sub { color: #b9c4d6; font-size: 0.9rem; margin: 0 0 16px; max-width: 420px; }
.ww-subscribe-form { display: flex; gap: 10px; max-width: 420px; flex-wrap: wrap; }
.ww-subscribe-input {
	flex: 1;
	min-width: 200px;
	padding: 11px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.06);
	color: #fff;
	font-family: var(--ww-font-body);
	font-size: 0.92rem;
}
.ww-subscribe-input::placeholder { color: #8fa0b8; }
.ww-subscribe-input:focus { outline: 2px solid var(--ww-amber); background: rgba(255,255,255,0.1); }
.ww-subscribe-btn {
	padding: 11px 20px;
	border-radius: 8px;
	border: none;
	background: var(--ww-amber);
	color: var(--ww-navy);
	font-family: var(--ww-font-heading);
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.ww-subscribe-btn:hover { background: #fff; }
.ww-subscribe-notice { font-size: 0.86rem; margin-bottom: 10px; padding: 8px 12px; border-radius: 6px; }
.ww-subscribe-notice-ok { background: rgba(39,174,96,0.18); color: #7ee2a8; }
.ww-subscribe-notice-error { background: rgba(192,57,43,0.2); color: #ff9d91; }
@media (max-width: 700px) {
	.ww-involved-inner { grid-template-columns: 1fr; }
	.ww-involved-col-guest { border-left: none; padding-left: 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14); }
}

/* ==================================================================
   10. Responsive
   ================================================================== */
@media (max-width: 1024px) {
	.ww-cat-grid { grid-template-columns: repeat(3, 1fr); }
	.site-main .ast-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.ww-hero { padding: 56px 20px 64px; }
	.ww-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.site-main .ast-row { grid-template-columns: 1fr; }
	.ww-section-inner { padding: 44px 20px; }
}

@media (max-width: 480px) {
	.ww-cat-grid { grid-template-columns: 1fr; }
	.ww-hero-cta { flex-direction: column; }
	.ww-btn { justify-content: center; }
}


/* =========================================================================
   11. Market Pulse band
   ========================================================================= */
.ww-pulse-band {
	background: linear-gradient(135deg, var(--ww-navy) 0%, var(--ww-navy-2) 100%);
	border-radius: var(--ww-radius);
	padding: 28px 30px 32px;
	margin: 0 0 32px;
	box-shadow: var(--ww-shadow);
}
.ww-pulse-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}
.ww-pulse-head h2 {
	font-family: var(--ww-font-heading);
	color: var(--ww-white);
	margin: 0;
	font-size: 1.4rem;
}
.ww-pulse-live, .ww-news-head .ww-pulse-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ww-amber);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.ww-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #35d07f;
	box-shadow: 0 0 0 rgba(53, 208, 127, 0.6);
	animation: ww-pulse-dot 1.8s infinite;
}
@keyframes ww-pulse-dot {
	0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(53, 208, 127, 0); }
	100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}
.ww-pulse-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.ww-pulse-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 18px 20px;
}
.ww-pulse-label {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
}
.ww-pulse-value {
	font-family: var(--ww-font-heading);
	color: var(--ww-white);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 6px;
}
.ww-pulse-meta {
	color: var(--ww-amber);
	font-size: 0.76rem;
	font-weight: 500;
}

/* =========================================================================
   12. Chart cards (Price & production trend charts)
   ========================================================================== */
.ww-chart-card {
	background: var(--ww-white);
	border: 1px solid var(--ww-border);
	border-radius: var(--ww-radius);
	padding: 22px 24px 18px;
	margin: 18px 0 30px;
	box-shadow: var(--ww-shadow);
}
.ww-chart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.ww-chart-head h3, .ww-chart-head h4 {
	font-family: var(--ww-font-heading);
	color: var(--ww-navy);
	margin: 0;
	font-size: 1.05rem;
}
.ww-chart-badge {
	display: inline-block;
	background: rgba(245, 166, 35, 0.14);
	color: var(--ww-amber-dark);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 100px;
}
.ww-chart-card canvas {
	max-width: 100%;
}

/* ==========================================================================
   13. Latest Market News feed
   ========================================================================== */
.ww-news-feed {
	margin: 0 0 34px;
}
.ww-news-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.ww-news-head h2 {
	font-family: var(--ww-font-heading);
	color: var(--ww-navy);
	margin: 0;
	font-size: 1.4rem;
}
.ww-news-head .ww-pulse-live {
	color: var(--ww-amber-dark);
}
.ww-news-head .ww-live-dot {
	background: var(--ww-amber);
}
.ww-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.ww-news-loading {
	color: var(--ww-muted);
	grid-column: 1 / -1;
}
.ww-news-card {
	display: flex;
	flex-direction: column;
	background: var(--ww-white);
	border: 1px solid var(--ww-border);
	border-radius: var(--ww-radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--ww-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ww-news-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ww-shadow-hover);
}
.ww-news-thumb {
	height: 140px;
	background-size: cover;
	background-position: center;
	background-color: var(--ww-navy-3);
}
.ww-news-thumb-blank {
	background: linear-gradient(135deg, var(--ww-navy) 0%, var(--ww-navy-3) 100%);
}
.ww-news-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ww-news-cat {
	color: var(--ww-amber-dark);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.ww-news-date {
	color: var(--ww-muted);
	font-size: 0.76rem;
}
.ww-news-title {
	font-family: var(--ww-font-heading);
	color: var(--ww-text);
	font-size: 1.02rem;
	margin: 2px 0 2px;
	line-height: 1.3;
}
.ww-news-excerpt {
	color: var(--ww-muted);
	font-size: 0.86rem;
	line-height: 1.45;
	margin: 0;
}

/* ==========================================================================
   14. Responsive — Market Pulse / Chart cards / News feed
   ========================================================================== */
@media (max-width: 768px) {
	.ww-pulse-grid { grid-template-columns: 1fr; }
	.ww-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.ww-news-grid { grid-template-columns: 1fr; }
	.ww-pulse-value { font-size: 1.6rem; }
}

/* Get Involved band -- force full-width stacking below the content area.
   .ast-container is display:flex; flex-wrap:nowrap, so without an explicit
   wrap the band renders as a side-by-side column beside the page content. */
.ast-container:has(> .ww-involved-band) { flex-wrap: wrap; }
.ww-involved-band { flex: 0 0 100%; width: 100%; max-width: 100%; align-self: stretch; }
.content-area.primary { min-width: 0; }

/* Data & Dashboards (page-id-50): let the dashboard breathe.
   Astra caps .entry-content at 760px for prose readability, which
   squeezes the charts, KPI band, news grid and wide data tables. */
.page-id-50 .entry-content { max-width: 100%; }
.page-id-50 .entry-content > p,
.page-id-50 .entry-content > h2,
.page-id-50 .entry-content > h3 { max-width: 860px; }

/* ==========================================================================
   15. Comment form
   Astra outputs .ast-grid-common-col / .ast-width-lg-33 wrappers but that
   grid CSS is not loading in this child theme, so the name/email/website
   inputs and the textarea collapse to their HTML size/cols attribute.
   These rules make the comment form self-sufficient.
   ========================================================================== */
#respond {
	max-width: 100%;
}
.comment-form .ast-comment-formwrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 18px;
}
.comment-form .ast-comment-formwrap > p {
	margin: 0;
	float: none;
	width: auto;
	max-width: none;
}
/* Astra puts the textarea inside .ast-row, a 3-column grid meant for the
   name/email/website row, so the textarea gets trapped in column 1. */
.comment-form .ast-row.comment-textarea,
.comment-form .comment-textarea {
	display: block;
	grid-template-columns: none;
	margin-bottom: 4px;
}
.comment-form .comment-form-comment,
.comment-form .comment-form-textarea {
	width: 100%;
	max-width: none;
	float: none;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--ww-border);
	border-radius: 8px;
	background: var(--ww-white);
	color: var(--ww-text);
	font-family: var(--ww-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-form textarea {
	min-height: 160px;
	resize: vertical;
	display: block;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--ww-amber);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}
.comment-form input::placeholder,
.comment-form textarea::placeholder {
	color: var(--ww-muted);
	opacity: 0.75;
}
.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 4px 0 18px;
}
.comment-form .comment-form-cookies-consent input[type="checkbox"] {
	margin: 3px 0 0;
	flex-shrink: 0;
}
.comment-form .comment-form-cookies-consent label {
	font-size: 0.88rem;
	color: var(--ww-muted);
	line-height: 1.5;
	margin: 0;
}
.comment-form .comment-notes {
	font-size: 0.88rem;
	color: var(--ww-muted);
	margin-bottom: 18px;
}
.comment-form .form-submit {
	margin: 0;
}

@media (max-width: 768px) {
	.comment-form .ast-comment-formwrap { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   16. Registration / auth forms
   ========================================================================== */
.ww-auth-card {
	background: var(--ww-white);
	border: 1px solid var(--ww-border);
	border-radius: var(--ww-radius);
	padding: 30px 32px 28px;
	box-shadow: var(--ww-shadow);
	max-width: 720px;
}
.ww-auth-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}
.ww-field {
	margin: 0 0 18px;
}
.ww-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ww-navy);
	margin-bottom: 6px;
}
.ww-field label span[aria-hidden] {
	color: var(--ww-amber-dark);
}
.ww-auth-form input[type="text"],
.ww-auth-form input[type="email"],
.ww-auth-form input[type="url"],
.ww-auth-form input[type="password"],
.ww-auth-form textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--ww-border);
	border-radius: 8px;
	background: var(--ww-white);
	color: var(--ww-text);
	font-family: var(--ww-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ww-auth-form textarea {
	resize: vertical;
	min-height: 110px;
	display: block;
}
.ww-auth-form input:focus,
.ww-auth-form textarea:focus {
	outline: none;
	border-color: var(--ww-amber);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}
.ww-field-hint {
	display: block;
	margin-top: 6px;
	font-size: 0.8rem;
	color: var(--ww-muted);
}
.ww-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 22px;
}
.ww-consent input[type="checkbox"] {
	margin: 3px 0 0;
	flex-shrink: 0;
}
.ww-consent label {
	font-size: 0.88rem;
	color: var(--ww-muted);
	line-height: 1.55;
	margin: 0;
	font-weight: 400;
}
.ww-auth-submit {
	margin: 0 0 12px;
}
.ww-auth-form .ww-btn-primary {
	background: var(--ww-amber);
	color: var(--ww-navy);
	border: 0;
	border-radius: 100px;
	padding: 13px 30px;
	font-family: var(--ww-font-body);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.ww-auth-form .ww-btn-primary:hover {
	background: var(--ww-amber-dark);
	transform: translateY(-1px);
}
.ww-auth-note {
	font-size: 0.86rem;
	color: var(--ww-muted);
	margin: 0;
}
.ww-auth-notice {
	padding: 14px 16px;
	border-radius: 8px;
	margin-bottom: 22px;
	font-size: 0.92rem;
	line-height: 1.55;
	border-left: 4px solid;
}
.ww-auth-notice-ok {
	background: #e9f7ef;
	border-left-color: #2f9e5f;
	color: #14562f;
}
.ww-auth-notice-err {
	background: #fdeeee;
	border-left-color: #d24b47;
	color: #7d2320;
}

/* Honeypot: visually hidden but not display:none, so bots still fill it. */
.ww-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (max-width: 600px) {
	.ww-auth-card { padding: 24px 20px 22px; }
	.ww-auth-grid { grid-template-columns: 1fr; gap: 0; }
}