/*
 * Option F — header, footer, and (on the front page only) the full-bleed
 * hero. The header/footer/mobile-nav components render on every template
 * (see debradisman_site_header()/debradisman_site_footer() in
 * functions.php) and are self-contained — their own font, link colors,
 * and box-sizing — so they never affect the rest of any interior page's
 * existing content. The full-viewport flex layout and hero rules further
 * down are scoped to body.home-option-f, which only front-page.php sets,
 * so they cannot leak onto any other template. See DEPLOY-NOTES.md at the
 * theme root for the handoff record.
 */

:root {
	--ddf-ink: oklch(0.15 0.005 250);
	--ddf-ink-secondary: oklch(0.45 0.01 250);
	--ddf-ink-meta: oklch(0.55 0.01 250);
	--ddf-rule: oklch(0.92 0.005 250);
	--ddf-hero-bg: oklch(0.98 0.002 250);
	--ddf-brand-navy: #263857;
	--ddf-pad-x: 20px;
}

/* Front-page-only: full-viewport page layout */
body.home-option-f {
	margin: 0;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	font-family: 'Source Sans 3', sans-serif;
	color: var(--ddf-ink);
	background: #fff;
}
body.home-option-f *,
body.home-option-f *::before,
body.home-option-f *::after {
	box-sizing: border-box;
}
body.home-option-f a {
	color: var(--ddf-ink-secondary);
	text-decoration: none;
	transition: color 150ms ease;
}
body.home-option-f a:hover {
	color: var(--ddf-ink);
}
body.home-option-f a:focus-visible,
body.home-option-f button:focus-visible {
	outline: 2px solid var(--ddf-ink);
	outline-offset: 2px;
}

/*
 * Header / footer / mobile nav — shared by every template. Scoped to
 * these components specifically (not body-wide) so a non-front-page
 * template's existing typography and link styling elsewhere on the page
 * is untouched.
 */
.ddf-header,
.ddf-footer,
.ddf-mobile-nav {
	font-family: 'Source Sans 3', sans-serif;
}
.ddf-header,
.ddf-header *,
.ddf-header *::before,
.ddf-header *::after,
.ddf-footer,
.ddf-footer *,
.ddf-footer *::before,
.ddf-footer *::after,
.ddf-mobile-nav,
.ddf-mobile-nav *,
.ddf-mobile-nav *::before,
.ddf-mobile-nav *::after {
	box-sizing: border-box;
}
.ddf-header a,
.ddf-footer a,
.ddf-mobile-nav a {
	color: var(--ddf-ink-secondary);
	text-decoration: none;
	transition: color 150ms ease;
}
.ddf-header a:hover,
.ddf-footer a:hover,
.ddf-mobile-nav a:hover {
	color: var(--ddf-ink);
}
.ddf-header a:focus-visible,
.ddf-footer a:focus-visible,
.ddf-mobile-nav a:focus-visible,
.ddf-header button:focus-visible,
.ddf-mobile-nav button:focus-visible {
	outline: 2px solid var(--ddf-ink);
	outline-offset: 2px;
}

/* Header */
.ddf-header {
	position: relative;
	z-index: 110;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px var(--ddf-pad-x) 14px;
	border-bottom: 1px solid var(--ddf-rule);
}
.ddf-logo {
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--ddf-ink) !important;
	white-space: nowrap;
	font-weight: 400;
}
.ddf-nav {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	text-transform: uppercase;
}
.ddf-nav li {
	position: relative;
	display: inline-block;
}
.ddf-nav a {
	white-space: nowrap;
}

/* Dropdown (About > CV / Media) */
.ddf-caret {
	display: inline-flex;
	margin-left: 4px;
	vertical-align: middle;
	transition: transform 150ms ease;
}
.ddf-nav .menu-item-has-children:hover > a > .ddf-caret,
.ddf-nav .menu-item-has-children:focus-within > a > .ddf-caret {
	transform: rotate(180deg);
}
.ddf-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 120;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	min-width: 160px;
	background: #fff;
	border: 1px solid var(--ddf-rule);
	text-transform: none;
}
.ddf-nav .menu-item-has-children:hover > .sub-menu,
.ddf-nav .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}
.ddf-nav .sub-menu li {
	display: block;
}
.ddf-nav .sub-menu a {
	display: block;
	padding: 8px 16px;
}
/*
 * :focus/:hover explicitly repeated here (not just the base selector):
 * the theme's own style.css has a generic `button:focus, button:hover
 * {background-color:#c3251d}` brand-red rule that's slightly more
 * specific than a bare `.ddf-nav-toggle` class selector (an added `button`
 * type selector on their side), so it would otherwise flash red the
 * moment this button is clicked or hovered.
 */
.ddf-nav-toggle,
.ddf-nav-toggle:focus,
.ddf-nav-toggle:hover {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -12px -10px -12px 0;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--ddf-ink-secondary);
}
.ddf-nav-toggle:hover {
	color: var(--ddf-ink);
}
.ddf-icon-close {
	display: none;
}
.ddf-nav-toggle[aria-expanded="true"] .ddf-icon-open {
	display: none;
}
.ddf-nav-toggle[aria-expanded="true"] .ddf-icon-close {
	display: block;
}

/* Mobile nav panel */
.ddf-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	padding: 24px;
}
.ddf-mobile-nav[hidden] {
	display: none;
}
.ddf-mobile-nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.ddf-mobile-nav-list a {
	font-size: 24px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ddf-ink);
}

/* Hero (front page only) */
.ddf-hero {
	--ddf-hero-pad: 14px;
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: var(--ddf-hero-bg);
}
/*
 * The hero renders the front page's real Beaver Builder content (see
 * template-parts/home-option-f/hero.php) — a Photo module and/or a Video
 * module, inside whatever row/column structure the client has built
 * (including any leftover empty/spacer columns from older layouts).
 * Rather than assume a fixed nesting depth, strip the BB wrapper divs'
 * own box model (padding, margins, backgrounds, forced heights) and
 * absolutely-position the actual media element against .ddf-hero itself,
 * so it fills the hero edge to edge — letterboxed, never cropped, no
 * page scroll — regardless of how many wrapper divs sit in between.
 */
.ddf-hero .fl-builder-content,
.ddf-hero .fl-row,
.ddf-hero .fl-row-content-wrap,
.ddf-hero .fl-row-content,
.ddf-hero .fl-col-group,
.ddf-hero .fl-col,
.ddf-hero .fl-col-content,
.ddf-hero .fl-module-photo,
.ddf-hero .fl-module-video,
.ddf-hero .fl-photo-content,
.ddf-hero .fl-video,
.ddf-hero figure,
.ddf-hero .fluid-width-video-wrapper {
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	min-height: 0 !important;
	background: none !important;
	border: 0 !important;
}
body.home-option-f .ddf-hero picture,
body.home-option-f .ddf-hero img,
body.home-option-f .ddf-hero video,
body.home-option-f .ddf-hero .wp-video,
body.home-option-f .ddf-hero iframe {
	/*
	 * Deliberately not `inset: var(--ddf-hero-pad)` + width/height auto:
	 * percentage/auto sizing on an absolutely-positioned *replaced*
	 * element (img/video) resolves against the full containing block and
	 * ignores the offsets, so it either fills edge-to-edge (percentage)
	 * or renders at intrinsic size (auto) instead of the letterboxed
	 * inset box. An explicit calc() width/height sidesteps both cases.
	 */
	position: absolute !important;
	top: var(--ddf-hero-pad) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: min(calc(100% - (var(--ddf-hero-pad) * 2)), 1400px) !important;
	height: calc(100% - (var(--ddf-hero-pad) * 2)) !important;
	margin: 0 !important;
	object-fit: contain;
	display: block;
}

/* Footer */
.ddf-footer {
	border-top: 1px solid var(--ddf-rule);
	padding: 14px var(--ddf-pad-x) 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.ddf-socials {
	display: flex;
	align-items: center;
	gap: 9px;
}
.ddf-socials a {
	display: flex;
}
.ddf-socials svg {
	width: 16px;
	height: 16px;
}
.ddf-footer .ddf-socials a {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
}
.ddf-copyright {
	font-size: 11px;
	letter-spacing: 0.03em;
	color: var(--ddf-ink-meta);
}

@media (min-width: 834px) {
	:root {
		--ddf-pad-x: 40px;
	}
	.ddf-header {
		padding: 26px var(--ddf-pad-x);
	}
	.ddf-logo {
		font-size: 21px;
	}
	.ddf-nav {
		display: flex;
		gap: 22px;
		font-size: 16px;
		letter-spacing: 0.03em;
		color: var(--ddf-ink-secondary);
		white-space: nowrap;
	}
	.ddf-nav-toggle {
		display: none;
	}
	.ddf-hero {
		--ddf-hero-pad: 28px;
	}
	.ddf-footer {
		padding: 26px var(--ddf-pad-x) 32px;
		gap: 12px;
	}
	.ddf-socials {
		gap: 11px;
	}
	.ddf-socials svg {
		width: 20px;
		height: 20px;
	}
	.ddf-copyright {
		font-size: 14px;
	}
}

@media (min-width: 1200px) {
	:root {
		--ddf-pad-x: 64px;
	}
	.ddf-header {
		padding: 34px var(--ddf-pad-x);
		gap: 40px;
	}
	.ddf-logo {
		font-size: 29px;
	}
	.ddf-nav {
		gap: 34px;
		font-size: 16px;
	}
	.ddf-hero {
		--ddf-hero-pad: 48px;
	}
	.ddf-footer {
		padding: 32px var(--ddf-pad-x) 40px;
		gap: 14px;
	}
	.ddf-socials {
		gap: 14px;
	}
	.ddf-socials svg {
		width: 26px;
		height: 26px;
	}
	.ddf-copyright {
		font-size: 17px;
	}
}

/* Mobile nav panel is desktop-irrelevant; hide toggle/panel at 834px+ */
@media (min-width: 834px) {
	.ddf-mobile-nav {
		display: none !important;
	}
}