/*
 * Hero Section — observatorio-cero-theme
 *
 * Styles for the homepage hero (.oc-hero).
 * Uses only CSS custom properties from theme.json / color-modes.css.
 */

.oc-hero {
	overflow: hidden;
	position: relative;
}

.oc-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* Text shadow: only in light mode where background is dark */
.oc-hero__content h1,
.oc-hero__content p {
	text-shadow:
		0 1px 3px color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--text-shadow--primary), transparent),
		0 4px 16px color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--text-shadow--secondary), transparent);
}

[data-theme="dark"] .oc-hero__content h1,
[data-theme="dark"] .oc-hero__content p,
[data-theme="high-contrast"] .oc-hero__content h1,
[data-theme="high-contrast"] .oc-hero__content p {
	color: var(--wp--preset--color--on-background) !important;
}

/* ── Generic hero banners and oceanic-hero gradient containers ─ */
.has-oceanic-hero-gradient-background,
.oc-hero-banner {
	color: var(--wp--preset--color--on-primary);
}

.has-oceanic-hero-gradient-background h1,
.has-oceanic-hero-gradient-background h2,
.has-oceanic-hero-gradient-background h3,
.has-oceanic-hero-gradient-background p,
.has-oceanic-hero-gradient-background .wp-block-heading,
.oc-hero-banner h1,
.oc-hero-banner h2,
.oc-hero-banner h3,
.oc-hero-banner p,
.oc-hero-banner .wp-block-heading {
	color: var(--wp--preset--color--on-primary);
}

[data-theme="dark"] .has-oceanic-hero-gradient-background,
[data-theme="dark"] .has-oceanic-hero-gradient-background h1,
[data-theme="dark"] .has-oceanic-hero-gradient-background h2,
[data-theme="dark"] .has-oceanic-hero-gradient-background h3,
[data-theme="dark"] .has-oceanic-hero-gradient-background p,
[data-theme="dark"] .has-oceanic-hero-gradient-background .wp-block-heading,
[data-theme="dark"] .oc-hero-banner,
[data-theme="dark"] .oc-hero-banner h1,
[data-theme="dark"] .oc-hero-banner h2,
[data-theme="dark"] .oc-hero-banner h3,
[data-theme="dark"] .oc-hero-banner p,
[data-theme="dark"] .oc-hero-banner .wp-block-heading {
	color: var(--wp--preset--color--on-background) !important;
}

[data-theme="high-contrast"] .has-oceanic-hero-gradient-background,
[data-theme="high-contrast"] .has-oceanic-hero-gradient-background h1,
[data-theme="high-contrast"] .has-oceanic-hero-gradient-background h2,
[data-theme="high-contrast"] .has-oceanic-hero-gradient-background h3,
[data-theme="high-contrast"] .has-oceanic-hero-gradient-background p,
[data-theme="high-contrast"] .has-oceanic-hero-gradient-background .wp-block-heading,
[data-theme="high-contrast"] .oc-hero-banner,
[data-theme="high-contrast"] .oc-hero-banner h1,
[data-theme="high-contrast"] .oc-hero-banner h2,
[data-theme="high-contrast"] .oc-hero-banner h3,
[data-theme="high-contrast"] .oc-hero-banner p,
[data-theme="high-contrast"] .oc-hero-banner .wp-block-heading {
	color: var(--wp--preset--color--on-background) !important;
}

/* ── Overlay gradient & backdrop across modes ─ */
.oc-hero .wp-block-cover__background.has-oceanic-hero-gradient-background {
	background: var(--wp--preset--gradient--oceanic-hero) !important;
	transition:
		background var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease),
		opacity var(--wp--custom--mode-transitions--duration, 0.3s) var(--wp--custom--mode-transitions--timing, ease);
}

[data-theme="dark"] .oc-hero .wp-block-cover__background {
	opacity: var(--wp--custom--ui--opacity--overlay-dark) !important;
}

[data-theme="high-contrast"] .oc-hero .wp-block-cover__background {
	opacity: var(--wp--custom--ui--opacity--overlay-hc) !important;
}

/* ── Button: primary (filled) ─ */
.oc-hero .wp-block-button .wp-block-button__link {
	transition: transform var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing), box-shadow var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing), background-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing), border-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

/* ── Button: outline ─ */
.oc-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-width: var(--wp--custom--ui--border-width--standard);
	border-color: color-mix(in srgb, var(--wp--preset--color--on-primary) var(--wp--custom--blend--border-strong), transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--on-primary) var(--wp--custom--blend--background), transparent);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--shadow-hover--secondary), transparent);
	color: var(--wp--preset--color--on-primary);
}

[data-theme="dark"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border-strong), transparent) !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--background), transparent) !important;
	color: var(--wp--preset--color--primary) !important;
}

[data-theme="high-contrast"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--primary) !important;
	background-color: transparent !important;
	color: var(--wp--preset--color--primary) !important;
}

.oc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.oc-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	transform: scale(var(--wp--custom--ui--scale--text));
	border-color: color-mix(in srgb, var(--wp--preset--color--on-primary) var(--wp--custom--blend--border-stronger), transparent);
	background-color: color-mix(in srgb, var(--wp--preset--color--on-primary) var(--wp--custom--blend--background-strong), transparent);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--text-shadow--secondary), transparent);
	color: var(--wp--preset--color--on-primary);
}

[data-theme="dark"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border-stronger), transparent) !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--background-strong), transparent) !important;
	color: var(--wp--preset--color--primary) !important;
}

[data-theme="high-contrast"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="high-contrast"] .oc-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--primary) !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent) !important;
	color: var(--wp--preset--color--primary) !important;
}

@media (prefers-reduced-motion: reduce) {
	.oc-hero .wp-block-button .wp-block-button__link {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oc-hero::after {
		animation: none;
	}
}