/* =============================================
   OdinMind — Custom CSS
   ============================================= */

/* Fonts loaded via theme.json fontFace — no @import needed */

/* Root variables */
:root {
	--om-gold: #C9A84C;
	--om-gold-light: #E8C870;
	--om-navy: #0A0F1E;
	--om-navy-2: #111827;
	--om-card: #1A2236;
	--om-subtle: #1E2A3A;
	--om-border: #1E2D45;
	--om-text: #F8FAFC;
	--om-text-muted: #94A3B8;
	--om-text-dim: #64748B;
	--om-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global resets */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background-color: var(--om-navy);
	color: var(--om-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* =============================================
   HEADER
   ============================================= */
.om-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 15, 30, 0.92);
	backdrop-filter: blur(12px);
	padding-left: clamp(1.5rem, 5vw, 4rem) !important;
	padding-right: clamp(1.5rem, 5vw, 4rem) !important;
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--om-border);
	transition: background var(--om-transition);
}

.om-header .wp-block-site-title {
	text-align: left !important;
}

/* Raven logo mark — invert black to white, blend into dark bg */
.om-logo-mark img {
	filter: invert(1);
	mix-blend-mode: screen;
	opacity: 0.92;
}

.om-header .wp-block-site-title a {
	color: var(--om-text) !important;
	text-decoration: none;
	font-family: 'Cormorant', serif;
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.om-wordmark {
	margin: 0 !important;
	line-height: 1 !important;
}

.om-wordmark a {
	color: var(--om-text) !important;
	text-decoration: none !important;
	font-family: 'Cormorant', serif;
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
}

.om-wordmark .om-gold {
	color: var(--om-gold);
}

.om-header .wp-block-site-title a span.om-gold {
	color: var(--om-gold);
}

.om-header .wp-block-navigation a {
	color: var(--om-text-muted) !important;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color var(--om-transition);
}

.om-header .wp-block-navigation a:hover {
	color: var(--om-gold) !important;
}

/* CTA button in nav */
.om-nav-cta a {
	background: var(--om-gold) !important;
	color: var(--om-navy) !important;
	padding: 0.5rem 1.25rem !important;
	border-radius: 2px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	transition: background var(--om-transition) !important;
}

.om-nav-cta a:hover {
	background: var(--om-gold-light) !important;
}

/* =============================================
   HERO SECTION
   ============================================= */
.om-hero {
	min-height: 92vh;
	display: flex;
	align-items: flex-start;
	background: #0A0F1E;
	position: relative;
	overflow: hidden;
	padding-left: clamp(1.5rem, 5vw, 4rem) !important;
	padding-right: clamp(1.5rem, 5vw, 4rem) !important;
	padding-top: 3.5rem !important;
	padding-bottom: 3.5rem !important;
}

.om-hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--om-border), transparent);
}

/* Hero two-column inner layout */
.om-hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 4rem;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--60);
	position: relative;
	z-index: 2;
}

.om-hero-content {
	position: relative;
	z-index: 2;
}

/* Neural network canvas */
.om-hero-canvas-wrap {
	position: relative;
	height: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#om-neural-canvas {
	width: 100%;
	height: 100%;
	opacity: 0.9;
}

/* Ambient glow behind canvas */
.om-hero-canvas-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(201,168,76,0.07) 0%, transparent 70%);
	pointer-events: none;
}

/* Fade-in animation for hero content */
@keyframes om-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.om-hero-content .om-section-label { animation: om-fade-up 0.6s ease both; }
.om-hero-content h1                { animation: om-fade-up 0.6s 0.1s ease both; }
.om-hero-content .om-hero-body     { animation: om-fade-up 0.6s 0.2s ease both; }
.om-hero-content .wp-block-buttons { animation: om-fade-up 0.6s 0.3s ease both; }
.om-hero-content .om-hero-logos    { animation: om-fade-up 0.6s 0.4s ease both; }
.om-hero-canvas-wrap               { animation: om-fade-up 0.8s 0.3s ease both; }

/* Logos strip */
.om-hero-logos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	border-top: 1px solid var(--om-border);
	padding-top: 2rem;
	margin-top: 2.5rem;
}

.om-hero-logos-label {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--om-text-dim);
	width: 100%;
	margin-bottom: 0.25rem;
}

.om-hero-logos-names {
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--om-text-muted);
	line-height: 1.8;
}

/* Headshot size fix */
.om-headshot img {
	max-width: 420px;
	width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Responsive hero */
@media (max-width: 900px) {
	.om-hero-inner {
		grid-template-columns: 1fr;
	}
	.om-hero-canvas-wrap {
		height: 300px;
	}
}

.om-eyebrow {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--om-gold);
	margin-bottom: 1.5rem;
}

.om-hero h1 {
	font-family: 'Cormorant', serif;
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--om-text);
	margin-bottom: 1.5rem;
}

.om-hero h1 em {
	font-style: italic;
	color: var(--om-gold);
}

.om-hero-desc {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--om-text-muted);
	max-width: 560px;
	margin-bottom: 2.5rem;
}

/* =============================================
   BUTTONS
   ============================================= */
.om-btn-primary {
	display: inline-block;
	background: var(--om-gold);
	color: var(--om-navy);
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.875rem 2rem;
	border-radius: 2px;
	text-decoration: none;
	transition: background var(--om-transition), transform var(--om-transition);
	cursor: pointer;
}

.om-btn-primary {
	will-change: transform;
}

.om-btn-primary:hover {
	background: var(--om-gold-light);
	transform: translateY(-1px);
}

.om-btn-ghost {
	display: inline-block;
	color: var(--om-text-muted);
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.875rem 2rem;
	border-radius: 2px;
	border: 1px solid var(--om-border);
	text-decoration: none;
	transition: border-color var(--om-transition), color var(--om-transition);
	cursor: pointer;
}

.om-btn-ghost:hover {
	border-color: var(--om-gold);
	color: var(--om-gold);
}

/* =============================================
   STATS STRIP
   ============================================= */
.om-stats {
	background: var(--om-card);
	border-top: 1px solid var(--om-border);
	border-bottom: 1px solid var(--om-border);
	padding: 3rem 0;
}

.om-stat-number {
	font-family: 'Cormorant', serif;
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	font-weight: 700;
	color: var(--om-gold);
	line-height: 1;
}

.om-stat-label {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--om-text-muted);
	margin-top: 0.5rem;
}

/* =============================================
   SERVICE CARDS
   ============================================= */
.om-card {
	background: var(--om-card);
	border: 1px solid var(--om-border);
	border-radius: 4px;
	padding: 2.5rem;
	transition: border-color var(--om-transition), transform var(--om-transition), box-shadow var(--om-transition);
	cursor: pointer;
}

.om-card:focus-visible {
	outline: 2px solid var(--om-gold);
	outline-offset: 2px;
}

.om-card:hover {
	border-color: var(--om-gold);
	transform: translateY(-4px);
	box-shadow: 0 8px 40px rgba(201,168,76,0.1);
}

.om-card-icon {
	width: 48px;
	height: 48px;
	margin-bottom: 1.5rem;
	color: var(--om-gold);
}

.om-card h3 {
	font-family: 'Cormorant', serif;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--om-text);
	margin-bottom: 1rem;
}

.om-card p {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--om-text-muted);
}

/* =============================================
   SECTION STYLES
   ============================================= */
.om-section {
	padding: 6rem 0;
}

.om-section-dark {
	background: var(--om-navy-2);
}

.om-section-label {
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--om-gold);
	margin-bottom: 1rem;
}

.om-section h2 {
	font-family: 'Cormorant', serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
	color: var(--om-text);
	line-height: 1.1;
	margin-bottom: 1.5rem;
}

.om-section-desc {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--om-text-muted);
	max-width: 600px;
}

/* =============================================
   SINGLE POST — ARTICLE TITLE
   ============================================= */
.wp-block-post-title {
	font-family: 'Cormorant', serif !important;
	font-size: clamp(3rem, 5vw, 4.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em !important;
	color: #F8FAFC !important;
}

/* =============================================
   INSIGHTS ARCHIVE — POST CARDS
   ============================================= */

/* Insights archive — single line heading matching card width */
.wp-block-query .wp-block-group:first-child {
	margin-bottom: 2rem !important;
}

main.wp-block-group > .wp-block-group h1 {
	font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}

@media (min-width: 768px) {
	main.wp-block-group > .wp-block-group h1 {
		white-space: nowrap !important;
	}
}

/* Insights archive — compact card list */
.wp-block-query .om-insight-card {
	padding: 1.5rem 2rem !important;
}

.wp-block-query .om-insight-card .wp-block-post-title,
.wp-block-query .om-insight-card .wp-block-post-title a {
	font-size: 1.35rem !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.wp-block-query .om-insight-card .wp-block-post-excerpt,
.wp-block-query .om-insight-card .wp-block-post-excerpt p {
	font-size: 0.9rem !important;
	line-height: 1.65 !important;
}

/* Force 3-column grid on homepage latest insights */
#blog .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--wp--preset--spacing--60) !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

#blog .wp-block-post-template > .wp-block-post {
	margin-top: 0 !important;
}

#blog .wp-block-post-template .wp-block-post-title {
	font-size: 1.25rem !important;
	line-height: 1.3 !important;
}

@media (max-width: 768px) {
	#blog .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

.om-insight-card {
	transition: border-color 200ms ease, transform 200ms ease;
}

.om-insight-card:hover {
	border-color: var(--om-gold) !important;
	transform: translateY(-2px);
}

.om-insight-card .wp-block-post-title a {
	color: var(--om-text) !important;
	text-decoration: none;
}

.om-insight-card .wp-block-post-title a:hover {
	color: var(--om-gold) !important;
}

.om-insight-card .wp-block-read-more {
	color: var(--om-gold) !important;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* =============================================
   ABOUT — DIFFERENTIATOR BULLETS
   ============================================= */
#about .wp-block-group.wp-block-group {
	gap: 0.3rem !important;
}

/* =============================================
   CASE STUDY / RESULT CARDS
   ============================================= */
.om-result-card {
	background: linear-gradient(135deg, var(--om-card) 0%, var(--om-subtle) 100%);
	border: 1px solid var(--om-border);
	border-left: 3px solid var(--om-gold);
	border-radius: 4px;
	padding: 2rem 2.5rem;
	transition: transform var(--om-transition), box-shadow var(--om-transition);
}

.om-result-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.om-result-value {
	font-family: 'Cormorant', serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--om-gold);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.om-result-org {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--om-text-dim);
	margin-bottom: 0.75rem;
}

.om-result-desc {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--om-text-muted);
}

/* =============================================
   FOOTER
   ============================================= */
.om-footer {
	background: #060B16;
	border-top: 1px solid var(--om-border);
	padding: 3rem clamp(1.5rem, 5vw, 4rem) 2rem;
}

.om-footer-brand {
	font-family: 'Cormorant', serif;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--om-text);
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.om-footer-tagline {
	font-size: 0.8rem;
	color: var(--om-text-dim);
	letter-spacing: 0.05em;
}

.om-footer-links a {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--om-text-dim);
	text-decoration: none;
	transition: color var(--om-transition);
}

.om-footer-links a:hover {
	color: var(--om-gold);
}

.om-footer-copy {
	font-size: 0.75rem;
	color: var(--om-text-dim);
	border-top: 1px solid var(--om-border);
	padding-top: 1.5rem;
	margin-top: 2rem;
}

/* =============================================
   UTILITIES
   ============================================= */

.om-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--om-gold);
	border: 1px solid rgba(201,168,76,0.3);
	padding: 0.25rem 0.75rem;
	border-radius: 2px;
}

/* Responsive */
@media (max-width: 768px) {
	.om-hero { min-height: 80vh; padding: 4rem 0; }
	.om-section { padding: 4rem 0; }
	.om-card { padding: 1.75rem; }
}

/* =============================================
   MOBILE NAVIGATION OVERLAY
   ============================================= */

/* Hamburger button color — always gold on dark header */
.om-header .wp-block-navigation__responsive-container-open {
	color: var(--om-gold) !important;
}

.om-header .wp-block-navigation__responsive-container-open svg {
	fill: var(--om-gold) !important;
}

/* Close button */
.wp-block-navigation__responsive-container-close {
	color: var(--om-gold) !important;
}

.wp-block-navigation__responsive-container-close svg {
	fill: var(--om-gold) !important;
}

/* Override WP default white overlay background — must use high specificity */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #0A0F1E !important;
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
	color: #ffffff !important;
}

/* Overlay — compact dropdown anchored to the right (where hamburger is) */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #0A0F1E !important;
	position: fixed !important;
	top: 0 !important;
	left: auto !important;
	right: 1rem !important;
	bottom: auto !important;
	width: auto !important;
	min-width: 160px !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 1rem 1.5rem 1.5rem !important;
	z-index: 9999 !important;
	border: 1px solid rgba(201,168,76,0.3) !important;
	border-radius: 4px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Hide the close button — tapping outside or the hamburger closes it */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute !important;
	top: 1rem !important;
	right: 1rem !important;
}

/* Nav list */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	margin-top: 0 !important;
	gap: 0 !important;
}

/* Each nav link row */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid rgba(201,168,76,0.15) !important;
}

/* Link text — compact, fits all items without scrolling */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #ffffff !important;
	font-size: 0.875rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	padding: 0.75rem 0 !important;
	display: block !important;
	text-decoration: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	color: #ffffff !important;
}

/* Contact CTA in overlay */
.wp-block-navigation__responsive-container.is-menu-open .om-nav-cta {
	border-bottom: none !important;
	margin-top: 0.75rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .om-nav-cta .wp-block-navigation-item__content {
	background: var(--om-gold) !important;
	color: #0A0F1E !important;
	text-align: center !important;
	border-radius: 2px !important;
	padding: 0.6rem 1rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .om-nav-cta .wp-block-navigation-item__label {
	color: #0A0F1E !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.om-hero-content .om-section-label,
	.om-hero-content h1,
	.om-hero-content .om-hero-body,
	.om-hero-content .wp-block-buttons,
	.om-hero-content .om-hero-logos,
	.om-hero-canvas-wrap {
		animation: none !important;
	}
}