/*
 * 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: #fff;
	--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: 21px;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--ddf-ink) !important;
	white-space: nowrap;
	font-weight: 700;
}
.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 — a dropdown that slides down from under the header
 * (in normal document flow, pushing the rest of the page down), not a
 * full-screen overlay. grid-template-rows: 0fr -> 1fr on the outer
 * element, with overflow:hidden on the single inner wrapper, is what
 * animates the height without knowing the content's real height ahead
 * of time. home-option-f.js's TRANSITION_MS must match the duration here.
 */
.ddf-mobile-nav {
	position: relative;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--ddf-rule);
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 280ms ease;
}
.ddf-mobile-nav.ddf-mobile-nav--open {
	grid-template-rows: 1fr;
}
.ddf-mobile-nav[hidden] {
	display: none;
}
.ddf-mobile-nav-inner {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: 24px var(--ddf-pad-x);
}
.ddf-mobile-nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	width: 100%;
}
.ddf-mobile-nav-list a {
	font-size: 18px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ddf-ink);
}
.ddf-mobile-nav-list li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/* Dropdown (About > Statement/Bio / CV / Media, WORK > ...) */
.ddf-mobile-nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
}
/*
 * :focus/:hover repeated explicitly here too, same reason as
 * .ddf-nav-toggle above: style.css's generic `button:focus, button:hover
 * {background-color:#c3251d}` brand-red rule outranks a bare class
 * selector on a <button>.
 */
.ddf-mobile-sub-toggle,
.ddf-mobile-sub-toggle:focus,
.ddf-mobile-sub-toggle:hover {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -6px -6px -6px 0;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--ddf-ink-secondary);
	transition: transform 150ms ease;
}
.ddf-mobile-sub-toggle:hover {
	color: var(--ddf-ink);
}
.ddf-mobile-sub-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
}
.ddf-mobile-nav-list .sub-menu {
	margin: 4px 0 0;
	padding-left: 18px;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
}
.ddf-mobile-nav-list .sub-menu[hidden] {
	display: none;
}
.ddf-mobile-nav-list .sub-menu a {
	font-size: 15px;
	text-transform: none;
	color: var(--ddf-ink-secondary);
}

/* Hero (front page only) */
.ddf-hero {
	/*
	 * Full-bleed, cropped on small screens (no side padding, object-fit:
	 * cover below) — restored to a letterboxed inset at 834px+, see that
	 * media query below.
	 */
	--ddf-hero-pad: 0px;
	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;
	/*
	 * Full-bleed + cropped below 834px (matches --ddf-hero-pad: 0 above) —
	 * small screens favor filling the space over showing the whole image.
	 * Restored to letterboxed/uncropped at 834px+, see that media query.
	 */
	object-fit: cover;
	display: block;
}

/*
 * Phones held sideways (e.g. iPhone 13 mini landscape, 812x375) are under
 * the 834px breakpoint but have a very short, wide hero box — the cover
 * crop above ends up trimming the TOP and BOTTOM of the image instead of
 * the sides, since the box is proportionally wider/shorter than the photo.
 * Switch to the same full-width/scroll-if-needed approach used at 1200px+
 * for this specific case, rather than cropping vertically.
 */
@media (max-width: 833px) and (orientation: landscape) {
	.ddf-hero {
		flex: none;
		overflow: visible;
	}
	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 {
		position: static !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
	}
}

/* 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: 13px;
	height: 13px;
}
.ddf-social-bg {
	fill: var(--ddf-ink-meta);
}
.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-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;
	}
	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 {
		object-fit: contain;
	}
	.ddf-footer {
		padding: 26px var(--ddf-pad-x) 32px;
		gap: 12px;
	}
	.ddf-socials {
		gap: 11px;
	}
	.ddf-socials svg {
		width: 16px;
		height: 16px;
	}
	.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: 32px;
	}
	.ddf-nav {
		gap: 34px;
		font-size: 16px;
	}
	.ddf-hero {
		--ddf-hero-pad: 48px;
		/*
		 * Above 1200px, stop shrinking the media to fit inside one viewport
		 * (that's what made the picture look small/letterboxed on laptop
		 * screens) and instead fill the full width, letting the image's own
		 * height follow its natural aspect ratio. If that makes the hero
		 * taller than the viewport, the page just scrolls — same tradeoff
		 * already applied on mobile, extended to desktop.
		 */
		flex: none;
		overflow: visible;
	}
	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 {
		position: static !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		height: auto !important;
		/*
		 * width: auto + max-width (not width: 100%) so a large photo fills
		 * the available space (up to the 1920px ceiling, for huge/ultrawide
		 * monitors) but a smaller/lower-res photo just displays at its own
		 * native size instead of being stretched up and going soft/blurry.
		 */
		width: auto !important;
		max-width: min(1920px, 100%) !important;
		margin: 0 auto !important;
	}
	.ddf-footer {
		padding: 32px var(--ddf-pad-x) 40px;
		gap: 14px;
	}
	.ddf-socials {
		gap: 14px;
	}
	.ddf-socials svg {
		width: 21px;
		height: 21px;
	}
	.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;
	}
}