@import url("./wordpress-header-navigation.css");

/* ====================================================
Digital Presence Foundation
Pass 1: portable foundational layer
Owns tokens, semantic theme, typography, sections, surfaces,
containers, stack rhythm, and flow rhythm.
==================================================== */

/* ====================================================
1. Root Tokens and Semantic Theme
Portable baseline tokens for type, spacing, motion, layout,
rhythm, and semantic color roles.
==================================================== */

:root {
	/* Type scale */
	--dpf-text-xs: 0.75rem;
	--dpf-text-sm: 0.875rem;
	--dpf-text-base: 1rem;
	--dpf-text-lg: 1.125rem;
	--dpf-text-xl: 1.25rem;
	--dpf-text-2xl: 1.5rem;
	--dpf-text-3xl: 2rem;
	--dpf-text-4xl: 2.5rem;
	--dpf-text-5xl: 3rem;

	/* Font weights */
	--dpf-font-regular: 400;
	--dpf-font-medium: 500;
	--dpf-font-semi-bold: 600;
	--dpf-font-bold: 700;

	/* Spacing */
	--dpf-space-2xs: 0.25rem;
	--dpf-space-xs: 0.5rem;
	--dpf-space-sm: 1rem;
	--dpf-space-md: 1.5rem;
	--dpf-space-lg: 2rem;
	--dpf-space-xl: 2.5rem;
	--dpf-space-2xl: 4rem;
	--dpf-space-3xl: 6rem;
	--dpf-space-4xl: 8rem;

	/* Letter spacing */
	--dpf-tracking-tight: -0.02em;
	--dpf-tracking-snug: -0.015em;
	--dpf-tracking-normal: -0.01em;
	--dpf-tracking-wide: 0.05em;
	--dpf-tracking-wider: 0.1em;

	/* Line height */
	--dpf-leading-tight: 1.04;
	--dpf-leading-snug: 1.12;
	--dpf-leading-normal: 1.2;
	--dpf-leading-body: 1.6;
	--dpf-leading-relaxed: 1.75;

	/* Readability measures */
	--dpf-measure-wide: 60ch;
	--dpf-measure-default: 52ch;
	--dpf-measure-narrow: 46ch;
	--dpf-measure-tight: 38ch;

	/* Heading widths */
	--dpf-heading-max-width-wide: 16ch;
	--dpf-heading-max-width-default: 14ch;
	--dpf-heading-max-width-tight: 12ch;

	/* Fluid heading sizes */
	--dpf-heading-display-size: clamp(2.35rem, 1.95rem + 1.7vw, 3.6rem);
	--dpf-heading-section-size: clamp(1.95rem, 1.7rem + 1.05vw, 2.8rem);
	--dpf-heading-subsection-size: clamp(1.55rem, 1.38rem + 0.72vw, 2.2rem);
	--dpf-heading-component-size: clamp(1.28rem, 1.18rem + 0.38vw, 1.65rem);
	--dpf-heading-label-size: clamp(1.08rem, 1.02rem + 0.18vw, 1.25rem);

	/* Radius */
	--dpf-radius-sm: 6px;
	--dpf-radius-md: 10px;
	--dpf-radius-lg: 14px;

	/* Shadows */
	--dpf-shadow-panel: 0 6px 20px rgba(0, 0, 0, 0.06);

	/* Motion */
	--dpf-motion-duration-fast: 0.25s;
	--dpf-motion-duration-default: 0.35s;
	--dpf-motion-ease-standard: ease;
	--dpf-motion-ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
	--dpf-motion-lift-subtle: -2px;

	/* Layout widths */
	--dpf-layout-max-width: 1200px;
	--dpf-layout-content-width: 760px;
	--dpf-layout-grid-gap: 2rem;
	--dpf-container-max-width: var(--dpf-layout-max-width);
	--dpf-container-narrow-width: var(--dpf-layout-content-width);
	--dpf-container-gutter: 2.5rem;
	--dpf-container-gutter-tight: 1.5rem;
	--dpf-container-padding: var(--dpf-container-gutter);

	/* Section rhythm */
	--dpf-section-space-y-sm: 2.5rem;
	--dpf-section-space-y: 4rem;
	--dpf-section-space-y-lg: 6rem;
	--dpf-section-space-y-sm-mobile: 3rem;
	--dpf-section-space-y-mobile: 4rem;
	--dpf-section-space-y-lg-mobile: 4rem;

	/* Stack rhythm */
	--dpf-stack-space-tight: var(--dpf-space-sm);
	--dpf-stack-space-default: var(--dpf-space-md);
	--dpf-stack-space-loose: var(--dpf-space-lg);

	/* Flow rhythm */
	--dpf-flow-space-heading-to-body: var(--dpf-space-md);
	--dpf-flow-space-body-to-body: var(--dpf-space-md);
	--dpf-flow-space-body-to-structure: var(--dpf-space-xl);

	/* Semantic theme */
	--dpf-color-brand-primary: #002A4E;
	--dpf-color-brand-secondary: #517891;
	--dpf-color-brand-accent: #2D7167;

	--dpf-color-surface-dark: #002A4E;
	--dpf-color-surface-light: #F2F2F2;

	--dpf-color-text-primary: #000204;
	--dpf-color-text-inverse: #F2F2F2;
	--dpf-color-text-muted: rgba(0, 0, 0, 0.45);
	--dpf-color-text-muted-inverse: rgba(255, 255, 255, 0.52);

	--dpf-color-border-subtle: rgba(0, 0, 0, 0.06);
	--dpf-color-border-strong: rgba(0, 0, 0, 0.12);
	--dpf-color-border-inverse: rgba(255, 255, 255, 0.08);
	--dpf-color-signal: #4DA3FF;
}

/* ====================================================
2. Typography System
Canonical heading, label, and body-text roles.
==================================================== */

.dpf-heading-display,
.dpf-heading-section,
.dpf-heading-subsection,
.dpf-heading-component,
.dpf-heading-label {
	margin: 0;
	color: inherit;
	font-weight: var(--dpf-font-semi-bold);
	text-transform: none;
	text-wrap: balance;
}

.dpf-heading-display {
	font-size: var(--dpf-heading-display-size);
	line-height: var(--dpf-leading-tight);
	letter-spacing: var(--dpf-tracking-tight);
	max-width: var(--dpf-heading-max-width-default);
}

.dpf-heading-section {
	font-size: var(--dpf-heading-section-size);
	line-height: var(--dpf-leading-tight);
	letter-spacing: var(--dpf-tracking-tight);
	max-width: var(--dpf-heading-max-width-default);
}

.dpf-heading-subsection {
	font-size: var(--dpf-heading-subsection-size);
	line-height: var(--dpf-leading-snug);
	letter-spacing: var(--dpf-tracking-snug);
}

.dpf-heading-component {
	font-size: var(--dpf-heading-component-size);
	line-height: var(--dpf-leading-snug);
	letter-spacing: var(--dpf-tracking-normal);
}

.dpf-heading-label {
	font-size: var(--dpf-heading-label-size);
	line-height: var(--dpf-leading-normal);
	letter-spacing: var(--dpf-tracking-wide);
	text-transform: uppercase;
}

.dpf-eyebrow,
.dpf-micro-heading,
.dpf-label {
	display: block;
	margin: 0;
	font-size: 1.106rem;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: var(--dpf-font-semi-bold);
	color: var(--dpf-color-text-muted);
}

.dpf-text-intro {
	margin: 0;
	font-size: var(--dpf-text-xl);
	line-height: var(--dpf-leading-body);
	color: var(--dpf-color-text-primary);
	max-width: var(--dpf-measure-default);
}

.dpf-text-body {
	margin: 0;
	font-size: var(--dpf-text-base);
	line-height: var(--dpf-leading-relaxed);
	color: var(--dpf-color-text-primary);
	max-width: var(--dpf-measure-default);
}

.dpf-surface-light .dpf-text-intro {
	color: var(--dpf-color-text-primary);
}

.dpf-surface-light .dpf-text-body {
	color: var(--dpf-color-text-primary);
}

.dpf-surface-light .dpf-eyebrow,
.dpf-surface-light .dpf-micro-heading,
.dpf-surface-light .dpf-label {
	color: var(--dpf-color-text-muted);
}

.dpf-surface-dark .dpf-text-intro {
	color: var(--dpf-color-text-inverse);
}

.dpf-surface-dark .dpf-text-body {
	color: var(--dpf-color-text-inverse);
}

.dpf-surface-dark .dpf-eyebrow,
.dpf-surface-dark .dpf-micro-heading,
.dpf-surface-dark .dpf-label {
	color: var(--dpf-color-text-muted-inverse);
}

.dpf-surface-dark .dpf-surface-light .dpf-text-intro,
.dpf-surface-light .dpf-text-intro {
	color: var(--dpf-color-text-primary);
}

.dpf-surface-dark .dpf-surface-light .dpf-text-body,
.dpf-surface-light .dpf-text-body {
	color: var(--dpf-color-text-primary);
}

.dpf-surface-dark .dpf-surface-light .dpf-eyebrow,
.dpf-surface-dark .dpf-surface-light .dpf-micro-heading,
.dpf-surface-dark .dpf-surface-light .dpf-label {
	color: var(--dpf-color-text-muted);
}

.dpf-surface-light .dpf-surface-dark .dpf-text-intro {
	color: var(--dpf-color-text-inverse);
}

.dpf-surface-light .dpf-surface-dark .dpf-text-body {
	color: var(--dpf-color-text-inverse);
}

.dpf-surface-light .dpf-surface-dark .dpf-eyebrow,
.dpf-surface-light .dpf-surface-dark .dpf-micro-heading,
.dpf-surface-light .dpf-surface-dark .dpf-label {
	color: var(--dpf-color-text-muted-inverse);
}

.dpf-text-intro + .dpf-text-intro,
.dpf-text-body + .dpf-text-body {
	margin-top: var(--dpf-space-md);
}

/* ====================================================
3. Section System
Reusable vertical section spacing tiers.
==================================================== */

.dpf-section {
	--dpf-section-space: var(--dpf-section-space-y);
	padding-top: var(--dpf-section-space);
	padding-bottom: var(--dpf-section-space);
}

.dpf-section--sm {
	--dpf-section-space: var(--dpf-section-space-y-sm);
}

.dpf-section--lg {
	--dpf-section-space: var(--dpf-section-space-y-lg);
}

/* ====================================================
4. Surface System
Portable light and dark surfaces using semantic tokens.
==================================================== */

.dpf-surface-light {
	background: var(--dpf-color-surface-light);
	color: var(--dpf-color-text-primary);
}

.dpf-surface-dark {
	background: var(--dpf-color-surface-dark);
	color: var(--dpf-color-text-inverse);
}

/* ====================================================
5. Container System
Horizontal containment and readable-width narrowing.
==================================================== */

.dpf-container,
.dpf-hero__inner {
	width: min(var(--dpf-container-max-width), calc(100% - (2 * var(--dpf-container-padding))));
	margin: 0 auto;
}

.dpf-container--narrow {
	width: min(var(--dpf-container-narrow-width), calc(100% - (2 * var(--dpf-container-padding))));
	margin: 0 auto;
}

/* ====================================================
6. Stack System
Wrapper-owned sibling rhythm for intros and narrative stacks.
==================================================== */

.dpf-stack > * {
	margin: 0;
}

.dpf-stack > * + * {
	margin-top: var(--dpf-stack-space-default);
}

.dpf-stack--tight > * + * {
	margin-top: var(--dpf-stack-space-tight);
}

.dpf-stack--loose > * + * {
	margin-top: var(--dpf-stack-space-loose);
}

.dpf-stack > h1 + *,
.dpf-stack > h2 + *,
.dpf-stack > h3 + *,
.dpf-stack > h4 + *,
.dpf-stack > h5 + *,
.dpf-stack > h6 + *,
.dpf-stack > .dpf-heading-display + *,
.dpf-stack > .dpf-heading-section + *,
.dpf-stack > .dpf-heading-subsection + * {
	margin-top: var(--dpf-flow-space-heading-to-body);
}

.dpf-stack > .dpf-eyebrow + *,
.dpf-stack > .dpf-micro-heading + *,
.dpf-stack > .dpf-label + * {
	margin-top: var(--dpf-space-md);
}

.dpf-stack > p + :where(.dpf-stack, .dpf-flow, .dpf-container, .dpf-container--narrow),
.dpf-stack > .dpf-text-body + :where(.dpf-stack, .dpf-flow, .dpf-container, .dpf-container--narrow),
.dpf-stack > .dpf-text-intro + :where(.dpf-stack, .dpf-flow, .dpf-container, .dpf-container--narrow) {
	margin-top: var(--dpf-flow-space-body-to-structure);
}

/* ====================================================
7. Flow System
Relationship-based flow utility for body content blocks.
==================================================== */

.dpf-flow > * {
	margin-top: 0;
	margin-bottom: 0;
}

.dpf-flow > * + * {
	margin-top: var(--dpf-flow-space-body-to-body);
}

.dpf-flow > h1 + *,
.dpf-flow > h2 + *,
.dpf-flow > h3 + *,
.dpf-flow > h4 + *,
.dpf-flow > h5 + *,
.dpf-flow > h6 + *,
.dpf-flow > .dpf-flow-heading + * {
	margin-top: var(--dpf-flow-space-heading-to-body);
}

.dpf-flow > p + :where(.dpf-stack, .dpf-flow, .dpf-container, .dpf-container--narrow),
.dpf-flow > .dpf-flow-body + :where(.dpf-stack, .dpf-flow, .dpf-container, .dpf-container--narrow) {
	margin-top: var(--dpf-flow-space-body-to-structure);
}

.dpf-flow-heading,
.dpf-flow-body {
	margin-top: 0;
	margin-bottom: 0;
}

.dpf-flow > .dpf-eyebrow + *,
.dpf-flow > .dpf-micro-heading + *,
.dpf-flow > .dpf-label + * {
	margin-top: var(--dpf-flow-space-heading-to-body);
}

/* ====================================================
8. List System
Portable list utility with one clear row-rhythm owner.
==================================================== */

.dpf-list {
	margin: 0;
	padding-left: 1.2rem;
	display: grid;
	row-gap: 0.6rem;
}

.dpf-list li {
	margin: 0;
	line-height: var(--dpf-leading-relaxed);
}

.dpf-list li:last-child {
	margin-bottom: 0;
}

/* ====================================================
9. Grid Utilities
Minimal structural grid helpers for common column layouts.
==================================================== */

.dpf-grid {
	display: grid;
	gap: var(--dpf-layout-grid-gap);
}

.dpf-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dpf-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dpf-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ====================================================
10. Panel Primitive
Neutral contained surface primitive with no internal structure assumptions.
==================================================== */

.dpf-panel {
	padding: var(--dpf-space-lg);
	background: var(--dpf-color-surface-light);
	color: var(--dpf-color-text-primary);
	border: 1px solid var(--dpf-color-border-subtle);
	border-radius: var(--dpf-radius-lg);
	box-shadow: var(--dpf-shadow-panel);
}

/* ====================================================
11. Signal Dot
Minimal inline signal marker utility.
==================================================== */

.dpf-signal-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dpf-color-signal);
	flex: 0 0 auto;
}

/* ====================================================
12. Elevate Utility
Reusable hover and focus lift utility for interactive blocks.
==================================================== */

.dpf-elevate {
	transition:
		transform var(--dpf-motion-duration-default) var(--dpf-motion-ease-soft),
		box-shadow var(--dpf-motion-duration-default) var(--dpf-motion-ease-soft),
		border-color var(--dpf-motion-duration-default) var(--dpf-motion-ease-soft);
}

.dpf-elevate:hover,
.dpf-elevate:focus-visible {
	transform: translateY(var(--dpf-motion-lift-subtle));
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* ====================================================
13. Card System
Grouped-content surface primitive with optional media, body, and footer structure.
==================================================== */

.dpf-card {
	background: var(--dpf-color-surface-light);
	color: var(--dpf-color-text-primary);
	border: 1px solid var(--dpf-color-border-subtle);
	border-radius: var(--dpf-radius-lg);
	box-shadow: var(--dpf-shadow-panel);
	overflow: hidden;
}

.dpf-card--soft {
	box-shadow: none;
}

.dpf-card--outline {
	box-shadow: none;
	border-color: var(--dpf-color-border-strong);
}

.dpf-card--elevated {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.dpf-card__media,
.dpf-card__body,
.dpf-card__footer {
	margin: 0;
}

.dpf-card__body,
.dpf-card__footer {
	padding: var(--dpf-space-lg);
}

.dpf-card__footer {
	border-top: 1px solid var(--dpf-color-border-subtle);
}

/* ====================================================
14. Hero Framework
Structural top-of-page wrapper for composable hero content.
==================================================== */

.dpf-hero {
	padding-top: var(--dpf-section-space-y);
	padding-bottom: var(--dpf-section-space-y);
	position: relative;
	overflow: hidden;
}

.dpf-hero__inner {
	position: relative;
}

.dpf-hero__content {
	display: grid;
	gap: var(--dpf-space-md);
	max-width: var(--dpf-measure-wide);
}

.dpf-hero__media {
	min-width: 0;
}

.dpf-hero__atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dpf-hero--split .dpf-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--dpf-layout-grid-gap);
	align-items: center;
}

.dpf-hero--compact {
	padding-top: var(--dpf-section-space-y-sm);
	padding-bottom: var(--dpf-section-space-y-sm);
}

/* ====================================================
15. Atmosphere Utilities
Optional pseudo-element atmosphere layer for subtle depth.
==================================================== */

.dpf-atmosphere {
	position: relative;
	isolation: isolate;
}

.dpf-atmosphere::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}

.dpf-atmosphere--light::before {
	background: radial-gradient(
		ellipse at 50% 42%,
		rgba(0, 0, 0, 0.04) 0%,
		rgba(0, 0, 0, 0.02) 32%,
		rgba(0, 0, 0, 0) 78%
	);
}

.dpf-atmosphere--dark::before {
	background: radial-gradient(
		ellipse at 50% 42%,
		rgba(255, 255, 255, 0.08) 0%,
		rgba(255, 255, 255, 0.04) 32%,
		rgba(255, 255, 255, 0) 78%
	);
}

/* ====================================================
16. Button Primitive
Neutral action primitive for composable interfaces.
Action tokens can be formalised in a later pass if the foundation grows.
==================================================== */

.dpf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--dpf-color-border-strong);
	border-radius: var(--dpf-radius-md);
	background: transparent;
	color: var(--dpf-color-text-primary);
	font: inherit;
	font-weight: var(--dpf-font-semi-bold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--dpf-motion-duration-fast) var(--dpf-motion-ease-soft),
		box-shadow var(--dpf-motion-duration-fast) var(--dpf-motion-ease-soft),
		background-color var(--dpf-motion-duration-fast) var(--dpf-motion-ease-soft),
		border-color var(--dpf-motion-duration-fast) var(--dpf-motion-ease-soft),
		color var(--dpf-motion-duration-fast) var(--dpf-motion-ease-soft);
}

.dpf-button--primary {
	background: var(--dpf-color-text-primary);
	color: var(--dpf-color-text-inverse);
	border-color: var(--dpf-color-text-primary);
}

.dpf-button--secondary {
	background: transparent;
	color: var(--dpf-color-text-primary);
	border-color: var(--dpf-color-border-strong);
}

.dpf-button--block {
	display: inline-flex;
	width: 100%;
}

.dpf-surface-dark .dpf-button {
	color: var(--dpf-color-text-inverse);
	border-color: var(--dpf-color-border-inverse);
}

.dpf-surface-dark .dpf-button--primary {
	background: var(--dpf-color-text-inverse);
	color: var(--dpf-color-text-primary);
	border-color: var(--dpf-color-text-inverse);
}

/* ====================================================
Responsive Foundation
Portable mobile adjustments for section spacing, containers,
and foundational utilities.
==================================================== */

@media (max-width: 767px) {
	.dpf-section {
		--dpf-section-space: var(--dpf-section-space-y-mobile);
		padding-top: var(--dpf-section-space);
		padding-bottom: var(--dpf-section-space);
	}

	.dpf-section--sm {
		--dpf-section-space: var(--dpf-section-space-y-sm-mobile);
	}

	.dpf-section--lg {
		--dpf-section-space: var(--dpf-section-space-y-lg-mobile);
	}

	.dpf-container,
	.dpf-hero__inner,
	.dpf-container--narrow {
		--dpf-container-padding: var(--dpf-container-gutter-tight);
		width: min(100% - (2 * var(--dpf-container-padding)), 100%);
	}

	.dpf-grid--2,
	.dpf-grid--3,
	.dpf-grid--4 {
		grid-template-columns: 1fr;
	}

	.dpf-hero,
	.dpf-hero--compact {
		padding-top: var(--dpf-section-space-y-mobile);
		padding-bottom: var(--dpf-section-space-y-mobile);
	}

	.dpf-hero--split .dpf-hero__inner {
		grid-template-columns: 1fr;
	}

	.dpf-text-intro {
		font-size: 1.125rem;
		line-height: 1.65;
	}

	.dpf-text-body {
		line-height: 1.7;
	}
}