/*
 * Dune IRL — Landing Hero Styles
 *
 * All controllable values reference --dune-* CSS custom properties that are
 * set inline on .dune-hero-wrapper by the pattern PHP (from Customizer
 * theme_mods) and updated live by customizer-preview.js.
 *
 * Responsive @media rules are NOT in this file — they live in a <style>
 * block generated by the pattern PHP so the breakpoint values can be
 * dynamic (CSS @media queries cannot use custom properties).
 */

/* ── Reset (scoped to hero) ──────────────────────────── */
.dune-hero-wrapper *,
.dune-hero-wrapper *::before,
.dune-hero-wrapper *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ── Hero Wrapper (IS the flex container) ────────────── */
.dune-hero-wrapper {
	font-family: var(--dune-body-font-stack);
	background-color: var(--dune-panel-bg);
	color: var(--dune-text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex !important;
	min-height: var(--dune-hero-min-height, 100vh);
	overflow: hidden;
}

/* WP layout resets */
.dune-hero-wrapper.is-layout-flow > * + *,
.dune-hero-wrapper .wp-block-group.is-layout-flow > * + * {
	margin-block-start: 0 !important;
}

/* ── Content Panel ───────────────────────────────────── */
.dune-hero-wrapper .dune-content-panel {
	flex: 0 0 var(--dune-panel-width, 40%);
	display: flex;
	flex-direction: column;
	background-color: var(--dune-panel-bg);
	position: relative;
}

/* ── Nav ─────────────────────────────────────────────── */
.dune-hero-wrapper .dune-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--dune-nav-pad-v) var(--dune-nav-pad-h);
}

.dune-hero-wrapper .dune-nav-logo {
	width: var(--dune-logo-width, 120px);
	height: auto;
}

.dune-hero-wrapper .dune-nav-links {
	display: flex;
	gap: 24px;
	list-style: none;
}

.dune-hero-wrapper .dune-nav-links a {
	color: var(--dune-text-color);
	text-decoration: none;
	font-size: var(--dune-nav-font-size, 13px);
	letter-spacing: 0.03em;
	opacity: var(--dune-nav-opacity, 0.7);
	transition: opacity 0.2s ease;
}

.dune-hero-wrapper .dune-nav-links a:hover {
	opacity: 1;
}

/* ── Content ─────────────────────────────────────────── */
.dune-hero-wrapper .dune-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 var(--dune-content-pad-h, 48px) var(--dune-content-pad-bottom, 96px);
	max-width: var(--dune-content-max-width, 520px);
}

.dune-hero-wrapper .dune-headline {
	font-family: var(--dune-headline-font-stack);
	font-size: clamp(var(--dune-headline-size-min, 28px), 3.2vw, var(--dune-headline-size-max, 42px));
	font-weight: var(--dune-headline-weight, 400);
	font-style: normal;
	line-height: var(--dune-headline-lh, 1.2);
	color: var(--dune-text-color);
	margin-bottom: var(--dune-headline-mb, 24px);
}

.dune-hero-wrapper .dune-body-text {
	font-family: var(--dune-body-font-stack);
	font-weight: 400;
	font-size: clamp(var(--dune-body-size-min, 13px), 1.1vw, var(--dune-body-size-max, 15px));
	line-height: var(--dune-body-lh, 1.6);
	color: var(--dune-text-color);
	opacity: var(--dune-body-opacity, 0.7);
	margin-bottom: 40px;
	max-width: var(--dune-body-max-width, 380px);
}

/* ── CTA Button ──────────────────────────────────────── */
.dune-hero-wrapper .dune-cta {
	display: inline-block;
	background-color: var(--dune-cta-bg);
	color: var(--dune-text-color);
	font-family: var(--dune-body-font-stack);
	font-style: normal;
	font-weight: var(--dune-cta-weight, 600);
	font-size: var(--dune-cta-font-size, 16px);
	letter-spacing: var(--dune-cta-ls, 0.02em);
	text-decoration: none;
	padding: var(--dune-cta-pad-v, 14px) var(--dune-cta-pad-h, 36px);
	border-radius: var(--dune-cta-radius, 999px);
	border: var(--dune-cta-border-width, 2px) solid var(--dune-cta-border-color);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, transform 0.15s ease;
	align-self: flex-start;
}

.dune-hero-wrapper .dune-cta:hover {
	background-color: var(--dune-cta-hover);
	transform: translateY(-1px);
}

.dune-hero-wrapper .dune-cta:active {
	transform: translateY(0);
}

/* ── 3-Dot Accent ────────────────────────────────────── */
.dune-hero-wrapper .dune-dots {
	display: flex;
	flex-direction: column;
	gap: var(--dune-dot-gap, 8px);
	position: absolute;
	bottom: var(--dune-dot-bottom, 48px);
	left: var(--dune-dot-left, 32px);
}

.dune-hero-wrapper .dune-dots span {
	width: var(--dune-dot-size, 16px);
	height: var(--dune-dot-size, 16px);
	border-radius: 50%;
	display: inline-block;
}

.dune-hero-wrapper .dune-dots span:nth-child(1) { background-color: var(--dune-dot1); }
.dune-hero-wrapper .dune-dots span:nth-child(2) { background-color: var(--dune-dot2); }
.dune-hero-wrapper .dune-dots span:nth-child(3) { background-color: var(--dune-dot3); }

/* ── Stripes ─────────────────────────────────────────── */
.dune-hero-wrapper .dune-stripes {
	flex: 0 0 auto;
	display: flex;
	align-items: stretch;
	gap: var(--dune-stripe-gap, 16px);
	padding-right: var(--dune-stripe-bleed, 12px);
	background-color: var(--dune-panel-bg);
}

.dune-hero-wrapper .dune-stripe {
	min-height: 100vh;
	width: var(--dune-stripe-width, 40px);
}

.dune-hero-wrapper .dune-stripe:nth-child(1) { background-color: var(--dune-stripe1); }
.dune-hero-wrapper .dune-stripe:nth-child(2) { background-color: var(--dune-stripe2); }
.dune-hero-wrapper .dune-stripe:nth-child(3) { background-color: var(--dune-stripe3); }
.dune-hero-wrapper .dune-stripe:nth-child(4) { background-color: var(--dune-stripe1); }
.dune-hero-wrapper .dune-stripe:nth-child(5) { background-color: var(--dune-stripe2); }

/* ── Image Panel ─────────────────────────────────────── */
.dune-hero-wrapper .dune-image-panel {
	flex: 1;
	position: relative;
	overflow: hidden;
	background-image: var(--dune-hero-image);
	background-size: var(--dune-image-size, cover);
	background-position: var(--dune-image-position, center bottom);
}

.dune-hero-wrapper .dune-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 32px 0;
}

.dune-hero-wrapper .dune-script-text {
	font-family: var(--dune-script-font-stack);
	font-size: clamp(var(--dune-script-size-min, 32px), 4.5vw, var(--dune-script-size-max, 56px));
	color: var(--dune-text-color);
	text-align: center;
	line-height: 1.15;
	text-shadow: var(--dune-script-shadow);
	transform: rotate(var(--dune-script-rotation, -5deg));
}

/* ── Modal ───────────────────────────────────────────── */
.dune-modal-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(68, 62, 65, var(--dune-modal-backdrop-opacity, 0.85));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	justify-content: center;
	align-items: center;
}

.dune-modal-backdrop.is-open {
	display: flex;
}

.dune-modal {
	background-color: #443E41;
	border: 1px solid rgba(243, 243, 243, 0.1);
	border-radius: var(--dune-modal-radius, 12px);
	width: 90%;
	max-width: var(--dune-modal-max-width, 540px);
	height: 80vh;
	max-height: 700px;
	position: relative;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.dune-modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	color: #F3F3F3;
	font-size: 28px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
	line-height: 1;
	z-index: 10;
}

.dune-modal-close:hover {
	opacity: 1;
}

.dune-modal iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* ── Entrance Animations (Feature F) ─────────────────── */

@keyframes dune-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes dune-slide-up {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes dune-slide-right {
	from { opacity: 0; transform: translateX(-30px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes dune-zoom-in {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

.dune-animate {
	animation-fill-mode: both;
}
.dune-animate--fade-in {
	animation: dune-fade-in var(--dune-animation-duration, 0.6s) ease-out;
}
.dune-animate--slide-up {
	animation: dune-slide-up var(--dune-animation-duration, 0.6s) ease-out;
}
.dune-animate--slide-right {
	animation: dune-slide-right var(--dune-animation-duration, 0.6s) ease-out;
}
.dune-animate--zoom-in {
	animation: dune-zoom-in var(--dune-animation-duration, 0.6s) ease-out;
}

/* ── Full-bleed overrides ────────────────────────────── */
.dune-hero-wrapper {
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

/* Background color on html+body is set dynamically by the pattern PHP via
   <style id="dune-html-bg"> so it stays in sync with the Customizer panel
   background color (including color presets). Margin/padding zeroed here. */
html:has(body.home),
body.home {
	margin: 0 !important;
	padding: 0 !important;
}

/* Override the 32px/46px admin bar margin when logged in */
html:has(body.home.logged-in) {
	margin-top: 0 !important;
	padding-top: 32px !important;
}

body.home .wp-site-blocks {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* Ensure no WP block spacing adds gaps */
body.home .wp-site-blocks > * {
	margin: 0 !important;
}