/*
 * Hero Pattern — observatorio-cero-theme
 *
 * Styles for the hero pattern (inc/patterns/hero-oc-1.php):
 *   - Page hero section (.oc-hero-page)
 *   - Hero content, breadcrumb, buttons
 *
 * Uses only CSS custom properties from theme.json / color-modes.css.
 */

/* ═══════════════════════════════════════════
 * Page Hero — Hero for internal pages
 * ═══════════════════════════════════════════ */

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

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

/* ── Overlay gradient & backdrop across modes ─ */
.oc-hero-page .wp-block-cover__background.has-horizon-gradient-background {
	background: var(--wp--preset--gradient--horizon) !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-page .wp-block-cover__background {
	opacity: var(--wp--custom--ui--opacity--overlay-dark) !important;
}

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

/* Text shadow for readability on image background */
.oc-hero-page__content h1,
.oc-hero-page__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 2px 6px color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--text-shadow--secondary), transparent)*/;
}

/* Breadcrumb styling — ensure high contrast in all modes */
.oc-hero-page .wp-block-breadcrumbs,
.oc-hero-page .wp-block-breadcrumbs a,
.oc-hero-page__breadcrumb,
.oc-hero-page__breadcrumb a {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	transition:
		color var(--wp--custom--ui--interaction--medium),
		transform var(--wp--custom--ui--interaction--medium);
	display: inline-block;
}

.oc-hero-page .wp-block-breadcrumbs a:hover,
.oc-hero-page__breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--ui--decoration--text-underline-offset);
	transform: translateX(var(--wp--custom--ui--decoration--transform-translate)) scale(var(--wp--custom--ui--scale--text));
}

/* Button transitions */
.oc-hero-page .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 style */
.oc-hero .wp-block-button.is-style-outline .wp-block-button__link,
.oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link,
.has-oceanic-hero-gradient-background .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,
[data-theme="dark"] .oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link,
[data-theme="dark"] .has-oceanic-hero-gradient-background .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

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

.oc-hero-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
.oc-hero-page .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-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="dark"] .oc-hero-page .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-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
[data-theme="high-contrast"] .oc-hero-page .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;
}

/* ═══════════════════════════════════════════
 * High Contrast Mode Overrides
 * ═══════════════════════════════════════════ */

[data-theme="high-contrast"] .oc-hero-page .wp-block-cover__gradient-background {
	opacity: var(--wp--custom--ui--opacity--medium);
}

[data-theme="high-contrast"] .oc-hero-page__content h1,
[data-theme="high-contrast"] .oc-hero-page__content p {
	text-shadow:
		0 1px 6px color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--text-shadow--secondary), transparent)/*,
		0 4px 24px color-mix(in srgb, var(--wp--preset--color--on-surface) var(--wp--custom--blend--text-shadow--secondary), transparent)*/;
}

/* ═══════════════════════════════════════════
 * Reduced Motion
 * ═══════════════════════════════════════════ */

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