/**
 * Styles for the 2026-09-12 custom header.php/footer.php, replacing
 * Avada's Theme Builder header/footer/page-title-bar sections entirely.
 * See those two files' own docblocks for the full rationale.
 *
 * Reuses this theme's existing --dwfps-* design-token variables
 * (assets/css/public.css) rather than inventing a second color system --
 * --dwfps-rust is the same maroon accent already used on President/
 * Agency pages elsewhere.
 *
 * FLAGGED ASSUMPTION: --dwf-footer-bg below is an approximation of
 * Avada's original footer background (which used the site's global
 * "color8" theme option, unreadable from static HTML) -- adjust this one
 * variable if it doesn't visually match once Eric checks it live.
 */

:root {
	--dwf-footer-bg: #2b2823; /* approximation -- see file header comment */
	--dwf-footer-fg: #f4f1ec;
}

/* ===================== Header ===================== */
.dwf-site-header {
	background: #fff;
	/* 2.6.1: no bottom rule -- Eric, 9/26: remove the dividing line under the header. */
}
.dwf-header-inner {
	/* 3.4.0: same edges as the page content: the site width plus this box's own 30px side padding (was 1216px). */
	max-width: calc(var(--dwf-site-width, 1400px) + 60px);
	margin: 0 auto;
	padding: 20px 30px;
	display: flex;
	align-items: center;
	gap: 2em;
}
.dwf-header-logo img {
	display: block;
	width: 120px;
	height: auto;
}
.dwf-nav-toggle {
	display: none;
	margin-left: auto;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.dwf-nav-toggle-bars,
.dwf-nav-toggle-bars::before,
.dwf-nav-toggle-bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--dwfps-ink, #171717);
	position: relative;
}
.dwf-nav-toggle-bars::before { content: ""; position: absolute; top: -7px; width: 24px; }
.dwf-nav-toggle-bars::after  { content: ""; position: absolute; top: 7px;  width: 24px; }

.dwf-header-nav { margin-left: auto; }

/* ===================== Mega menu (2.6.0, 9/26/26) =====================
 * Markup: includes/mega-menu.php. Behavior: assets/js/dwf-header-footer.js.
 * Desktop: panels open on hover and keyboard focus (CSS below) and on
 * click (JS adds .is-open). Wide panels span the header's inner width;
 * narrow panels are a right-aligned card. Mobile (<=890px): accordion.
 * Replaces the 2.4.x-2.5.x .dwf-nav-menu dropdown styles (removed -- that
 * menu is no longer rendered).
 */
.dwf-header-inner { position: relative; }
.dwf-mega {
	display: flex;
	align-items: center;
	gap: 1.75em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dwf-mega-item { position: static; }
.dwf-mega-item--narrow { position: relative; }
.dwf-mega-trigger {
	background: none;
	border: 0;
	padding: 0.5em 0;
	font: inherit;
	font-weight: 600;
	font-size: 0.95em;
	color: var(--dwfps-ink, #171717);
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.dwf-mega-trigger:hover,
.dwf-mega-trigger:focus-visible,
.dwf-mega-item.is-open > .dwf-mega-trigger {
	color: var(--dwfps-rust, var(--dwf-red));
	border-bottom-color: currentColor;
}

.dwf-mega-panel {
	position: absolute;
	top: 100%;
	left: 30px;
	right: 30px;
	z-index: 200;
	background: #fff;
	border: 1px solid var(--dwfps-rule, #ded8cf);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* Invisible bridge over the header's bottom padding so the pointer can
 * travel from a trigger down into its panel without the hover dropping. */
.dwf-mega-panel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 30px;
}
.dwf-mega-item--narrow > .dwf-mega-panel {
	left: auto;
	right: 0;
	width: 320px;
}
@media (hover: hover) and (min-width: 891px) {
	.dwf-mega-item:hover > .dwf-mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
}
.dwf-mega-item:focus-within > .dwf-mega-panel,
.dwf-mega-item.is-open > .dwf-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Background photo on the right, already faded to white on its left edge. */
.dwf-mega-panel.has-image::before {
	content: "";
	position: absolute;
	inset: 0 0 0 30%;
	background: var(--dwf-mega-image) right center / cover no-repeat;
	pointer-events: none;
}
/* 3.1.3: photo on the LEFT (book images), links on the right. A narrow
 * panel widens so the book and the links both fit. */
.dwf-mega-panel.has-image--left::before {
	inset: 0 52% 0 0;
	background-position: left center;
}
.dwf-mega-panel.has-image--left > .dwf-mega-panel-inner { margin-left: 46%; }
.dwf-mega-item--narrow > .dwf-mega-panel.has-image--left { width: 600px; }
/* 3.1.3: one-line explainer under each panel's heading. */
.dwf-mega-intro {
	margin: -6px 0 16px;
	max-width: 46ch;
	font-size: 0.92em;
	line-height: 1.45;
	color: var(--dwfps-muted, #5f5a54);
}
.dwf-mega-panel-inner {
	position: relative; /* above the ::before photo */
	padding: 26px 32px 30px;
}
.dwf-mega-heading {
	margin: 0 0 14px;
	font-family: var(--dwfps-serif, Georgia, "Times New Roman", serif);
	font-size: 1.6em;
	line-height: 1.2;
	color: var(--dwfps-ink, #171717);
}
.dwf-mega-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 240px)); /* 3.1.3: up to three columns */
	gap: 0 48px;
}
.dwf-mega-item--narrow .dwf-mega-columns { grid-template-columns: 1fr; }
.dwf-mega-group + .dwf-mega-group { margin-top: 18px; }
.dwf-mega-group-title {
	display: block;
	font-weight: 700;
	font-size: 0.95em;
	color: var(--dwfps-ink, #171717);
	text-decoration: none;
	margin-bottom: 4px;
}
a.dwf-mega-group-title:hover { color: var(--dwfps-rust, var(--dwf-red)); }
.dwf-mega-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dwf-mega-group-title + .dwf-mega-links { padding-left: 12px; }
.dwf-mega-links a {
	display: block;
	padding: 4px 0;
	color: var(--dwfps-ink, #171717);
	text-decoration: none;
	font-size: 0.93em;
}
.dwf-mega-links a:hover,
.dwf-mega-links a:focus-visible { color: var(--dwfps-rust, var(--dwf-red)); text-decoration: underline; }

/* Logged-out membership panel: login form (core wp_login_form markup). */
.dwf-mega-panel--login .dwf-mega-panel-inner { padding: 24px 24px 18px; }
.dwf-mega-login p { margin: 0 0 12px; }
.dwf-mega-login label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--dwfps-muted, #55514d);
}
.dwf-mega-login input[type="text"],
.dwf-mega-login input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--dwfps-rule, #ded8cf);
	background: var(--dwfps-soft, #f4f1ec);
	font: inherit;
}
.dwf-mega-login input:focus { outline: 2px solid var(--dwfps-rust, var(--dwf-red)); outline-offset: 1px; }
.dwf-mega-login .login-remember label { display: inline; font-weight: 400; }
.dwf-mega-login .login-submit {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 16px;
}
.dwf-mega-login #dwf-mega-submit,
.dwf-mega-register {
	display: block;
	text-align: center;
	padding: 11px 10px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	border: 2px solid var(--dwfps-rust, var(--dwf-red));
}
.dwf-mega-login #dwf-mega-submit { background: var(--dwfps-rust, var(--dwf-red)); color: #fff; width: 100%; }
.dwf-mega-register { background: #fff; color: var(--dwfps-rust, var(--dwf-red)); }
.dwf-mega-login #dwf-mega-submit:hover { filter: brightness(1.1); }
.dwf-mega-register:hover { background: var(--dwfps-soft, #f4f1ec); }
.dwf-mega-lost {
	display: block;
	margin: 6px -24px -18px;
	padding: 12px 24px;
	text-align: center;
	background: var(--dwfps-soft, #f4f1ec);
	border-top: 1px solid var(--dwfps-rule, #ded8cf);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--dwfps-ink, #171717);
	text-decoration: none;
}
.dwf-mega-lost:hover { color: var(--dwfps-rust, var(--dwf-red)); }

@media (max-width: 890px) {
	.dwf-nav-toggle { display: block; }
	.dwf-header-inner { flex-wrap: wrap; }
	.dwf-header-nav {
		display: none;
		width: 100%;
		margin-left: 0;
		order: 3;
	}
	.dwf-header-nav.is-open { display: block; }
	.dwf-mega { flex-direction: column; align-items: stretch; gap: 0; }
	.dwf-mega-item,
	.dwf-mega-item--narrow { position: static; border-top: 1px solid var(--dwfps-rule, #ded8cf); }
	.dwf-mega-trigger { width: 100%; text-align: left; padding: 14px 0; border-bottom: 0; }
	.dwf-mega-trigger::after { content: "+"; float: right; font-weight: 400; }
	.dwf-mega-item.is-open > .dwf-mega-trigger::after { content: "\2212"; }
	.dwf-mega-panel,
	.dwf-mega-item--narrow > .dwf-mega-panel {
		position: static;
		width: auto;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
	}
	.dwf-mega-item.is-open > .dwf-mega-panel { display: block; }
	.dwf-mega-panel.has-image::before,
	.dwf-mega-panel::after { display: none; }
	.dwf-mega-panel-inner { padding: 0 0 16px 12px; }
	.dwf-mega-heading,
	.dwf-mega-intro { display: none; }
	.dwf-mega-panel.has-image--left > .dwf-mega-panel-inner { margin-left: 0; }
	.dwf-mega-columns { grid-template-columns: 1fr; gap: 16px; }
	.dwf-mega-lost { margin: 6px 0 0; }
}

/* ===================== Footer ===================== */
.dwf-site-footer {
	background: var(--dwf-footer-bg);
	color: var(--dwf-footer-fg);
	padding: 60px 30px 30px;
	position: relative;
}
.dwf-footer-inner {
	max-width: var(--dwf-site-width, 1400px); /* 3.4.0: follows the site width (was 1170px). */
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr; /* logo + Read The Book + About The Site + Legal (3.1.3) */
	gap: 2.5em;
}
.dwf-footer-col-copyright {
	grid-column: 1 / -1;
	border-top: 1px solid rgba(255,255,255,0.15);
	margin-top: 40px;
	padding-top: 20px;
	font-size: 0.85em;
}
.dwf-footer-col-logo img { width: 130px; height: auto; }
.dwf-footer-col-title {
	margin: 0 0 14px;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}
.dwf-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8em;
}
.dwf-footer-menu a {
	color: var(--dwf-footer-fg);
	text-decoration: none;
	font-size: 0.95em;
}
.dwf-footer-menu a:hover { text-decoration: underline; }
.dwf-footer-col-copyright a { color: var(--dwf-footer-fg); font-weight: 700; }
.dwf-footer-to-top {
	position: absolute;
	right: 30px;
	bottom: 30px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.1);
	color: var(--dwf-footer-fg);
	border-radius: 50%;
	text-decoration: none;
}

@media (max-width: 782px) {
	.dwf-footer-inner { grid-template-columns: 1fr 1fr; }
	.dwf-footer-col-logo { grid-column: 1 / -1; }
}
/* 3.1.3: three link columns don't fit two-up on a phone; stack them. */
@media (max-width: 480px) {
	.dwf-footer-inner { grid-template-columns: 1fr; gap: 1.8em; }
}

/* 3.2.2 (Eric, 10/13/26): every dropdown is the same width as the Your
 * Government panel, i.e. the full header width. The items that used to open
 * as a right-aligned card (Read The Book, About The Site, My Account,
 * Join/Login) now span it too. Their content keeps a readable width inside:
 * the link lists flow into columns and the login form stays form-sized.
 * Desktop only; the mobile accordion is unchanged. */
@media (min-width: 891px) {
	.dwf-mega-item--narrow { position: static; }
	.dwf-mega-item--narrow > .dwf-mega-panel,
	.dwf-mega-item--narrow > .dwf-mega-panel.has-image--left {
		left: 30px;
		right: 30px;
		width: auto;
	}
	.dwf-mega-item--narrow .dwf-mega-columns { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
	.dwf-mega-item--narrow > .dwf-mega-panel.has-image--left::before { inset: 0 62% 0 0; }
	.dwf-mega-item--narrow > .dwf-mega-panel.has-image--left > .dwf-mega-panel-inner { margin-left: 40%; }
	.dwf-mega-panel--login .dwf-mega-panel-inner > * { max-width: 380px; }
}