/* =========================================================
   Page Header — style.css
   Variantes: cover (default) | split | minimal
   Tokens: --wp--preset--color--* y --wp--preset--spacing--*
   ========================================================= */

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
.pageheader {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-block-start: 0 !important;
}

.pageheader__inner {
	position: relative;
	z-index: 1;
}

/* Kicker */
.pageheader__kicker {
	display: inline-block;
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--22);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

/* Title */
.pageheader__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--white);
	text-wrap: balance;
	text-transform: uppercase;
	position: relative;
}

.pageheader__title:before {
    background: var(--wp--preset--color--gold);
    content: '';
    display: block;
    height: 110%;
    /* margin-top: -5%; */
    left: -50px;
    position: absolute;
    top: -5%;
    width: 10px;
}

.pageheader:not(.pageheader--bg-light, .is-style-split) .pageheader__title {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Separator (split variant) */
.pageheader__separator {
	width: 3rem;
	height: 2px;
	margin-block: 1.25rem;
	background-color: var(--wp--preset--color--primary);
}

/* Subtitle */
.pageheader__subtitle {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--18);
	line-height: 1.7;
	color: var(--wp--preset--color--white);
	text-transform: uppercase;
}

/* Body */
.pageheader__body {
	margin: 0.75rem 0 0;
	font-size: 1.2rem;
	line-height: 1.7;
	color: var(--wp--preset--color--white);
}

.pageheader__body p {
	margin: 0 0 0.75em;
	font-size: var(--wp--preset--font-size--18);
}

.pageheader__body p:last-child {
	margin-bottom: 0;
}

.pageheader--dark-text .pageheader__body,
.pageheader--dark-text .pageheader__body p {
	color: var(--wp--preset--color--text, #555);
}

/* CTA — visual styles come from .btn.btn--* (main.css).
   Only wrapper spacing/layout live here. */
.pageheader__cta {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.pageheader--align-center .pageheader__cta {
	justify-content: center;
}

/* ---------------------------------------------------------
   CTA modal (formulario en ventana modal)
   ".form-modal*" — markup en st_render_form_modal() (inc/helpers.php),
   JS compartido en assets/js/main.js. Mismo modal que usa el bloque CTA;
   estas reglas están duplicadas en blocks/core/cta/style.css con las
   mismas clases (WordPress carga el CSS por bloque, ver comentario
   equivalente sobre .accordion__* en blocks/core/toc/style.css).
   --------------------------------------------------------- */
.pageheader__cta-modal-btn {
	cursor: pointer;
}

.form-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard),
		visibility 0s linear var(--wp--custom--motion--duration--base);
}

.form-modal.is-open {
	visibility: visible;
	opacity: 1;
	transition:
		opacity var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard),
		visibility 0s;
}

.form-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.form-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 32rem;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--4, 0.5rem);
	padding: 2.5rem 2rem 2rem;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	transform: translateY(1rem) scale(0.97);
	transition: transform var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard);
}

.form-modal.is-open .form-modal-dialog {
	transform: translateY(0) scale(1);
}

.form-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard);
}

.form-modal-close:hover,
.form-modal-close:focus-visible {
	background: var(--wp--preset--color--bg-secondary);
}

.form-modal-title {
	margin: 0 0 0.75rem;
	padding-right: 1.5rem;
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--22);
	font-weight: 700;
	color: var(--wp--preset--color--text-heading);
	text-transform: uppercase;
}

.form-modal-description {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--15, 0.9375rem);
	line-height: 1.6;
	color: var(--wp--preset--color--text);
}

/* Gravity Forms' default field shadow (--gf-ctrl-shadow, Orbital theme) is
   almost invisible against a white background — bump its opacity here
   without touching the rest of the field styling. Overriding the variable
   on the theme-framework wrapper itself (not just an ancestor) so it wins
   over the plugin's own same-element declaration. */
.form-modal-form .gform-theme--framework,
.form-modal-form .gform-theme--api {
	--gf-ctrl-shadow: 0 1px 4px rgba(18, 25, 97, 0.22);
}

/* Body scroll lock while a form modal is open */
body.has-form-modal-open {
	overflow: hidden;
}

/* Breadcrumbs */
.pageheader__breadcrumbs {
	margin-bottom: 1.25rem;
}

.pageheader__breadcrumbs.breadcrumb-no-split {
	margin-bottom: 1.25rem;
}

/* El .container envolvente (ver render.php) ya centra y limita el ancho
   de las migas y les da el padding lateral correcto en móvil. */
.archive .pageheader__breadcrumbs.breadcrumb-no-split .container {
	max-width: var(--wp--style--global--wide-size);
}

.pageheader__breadcrumbs.breadcrumb-no-split nav ol {
	color: var(--wp--preset--color--text);
}

.pageheader__breadcrumbs.breadcrumb-no-split nav ol li a {
	color: var(--wp--preset--color--primary);
}

.pageheader__breadcrumbs .breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
}

.pageheader__breadcrumbs .breadcrumbs li::after {
	content: "/";
	margin-left: 0.5rem;
}

.pageheader__breadcrumbs .breadcrumbs li:last-child::after {
	content: "";
	margin: 0;
}

.pageheader__breadcrumbs .breadcrumbs a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: underline;
}

.pageheader__breadcrumbs .breadcrumbs a:hover {
	text-decoration: none;
}

/* Form */
.pageheader__form {
	margin-top: 1.5rem;
}

/* Row: content (+ form, when present) side by side (cover/default variant
   only — split already uses its second column for the image, minimal stays
   compact). Always a grid; the 2-column split (below) only kicks in on
   desktop when there's a form, or when the text is left-aligned — with no
   form and centered text there's nothing to sit next to, so it stays a
   single centered column instead of hugging the left half.
   position + z-index lift it above .pageheader__bg/.pageheader__overlay
   (both position:absolute), same treatment .pageheader__inner already had
   on its own — needed here too since .pageheader__form-col is now a
   sibling of .pageheader__inner, not wrapped inside it. */
.pageheader__row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}

.pageheader__form-col .pageheader__form {
	margin-top: 0;
}

.pageheader__form .gform-body .gfield_checkbox label {
	color: white;
}

@media (min-width: 64rem) {
	.pageheader__row--has-form {
		grid-template-columns: 1fr 1fr;
	}

	/* Sin formulario: la columna de contenido gana más ancho (2fr de 3)
	   ya que la segunda columna se queda vacía — antes usaba el mismo
	   1fr/1fr que con formulario real. Cubre tanto la variante
	   --align-left (que siempre reserva una 2ª columna vacía) como el
	   botón de "CTA con modal" (que tampoco necesita columna propia). El
	   :not() evita pisar la regla de arriba cuando SÍ hay formulario. */
	.pageheader--align-left .pageheader__row:not(.pageheader__row--has-form),
	.pageheader__row--has-modal {
		grid-template-columns: 2fr 1fr;
	}

	/* With a form, the content column always fills its grid cell (half the
	   container) instead of the narrow centered width --align-center
	   applies below this breakpoint. */
	.pageheader--align-center .pageheader__row--has-form .pageheader__inner {
		max-width: none;
		margin-inline: 0;
	}
}

/* ---------------------------------------------------------
   Size modifiers
   --------------------------------------------------------- */
.pageheader--sm {
	padding-block: 2rem;
}

.pageheader--md {
	padding-block: 3rem;
}

.pageheader--lg {
	padding-block: 4rem;
}

/* ---------------------------------------------------------
   Background colors
   --------------------------------------------------------- */
.pageheader--bg-default {
	background-color: var(--wp--preset--color--bg);
}

.pageheader--bg-light {
	background-color: var(--wp--preset--color--bg-secondary);
}

.pageheader--bg-primary {
	background-color: var(--wp--preset--color--primary);
}

.pageheader--bg-dark {
	background-color: var(--wp--preset--color--text);
}

/* ---------------------------------------------------------
   Text alignment modifiers
   --------------------------------------------------------- */
.pageheader--align-center {
	text-align: center;
}

.pageheader--align-center .pageheader__inner {
	max-width: 42rem;
	margin-inline: auto;
}

.pageheader--align-center .pageheader__breadcrumbs .breadcrumbs ol {
	justify-content: center;
}

.pageheader--align-left {
	text-align: left;
}

.pageheader--align-left .pageheader__breadcrumbs .breadcrumbs ol {
	justify-content: flex-start;
}

/* ---------------------------------------------------------
   Dark-text modifier (split, minimal, cover without image)
   --------------------------------------------------------- */
.pageheader--dark-text:not(.is-style-cover) .pageheader__title {
	color: var(--wp--preset--color--white);
}

.pageheader--dark-text:not(.is-style-cover) .pageheader__subtitle {
	color: var(--wp--preset--color--text);
}

.pageheader--dark-text:not(.is-style-cover) .pageheader__kicker {
	color: var(--wp--preset--color--primary);
}

.pageheader--dark-text .pageheader__breadcrumbs .breadcrumbs ol {
	color: var(--wp--preset--color--text-muted);
}

.pageheader--dark-text .pageheader__breadcrumbs .breadcrumbs a {
	color: var(--wp--preset--color--primary);
}

/* Override dark-text for primary/dark bg */
.pageheader--bg-primary:not(.is-style-split) .pageheader__title,
.pageheader--bg-dark:not(.is-style-split) .pageheader__title {
	color: var(--wp--preset--color--white);
}

.pageheader--bg-primary:not(.is-style-split) .pageheader__subtitle,
.pageheader--bg-dark:not(.is-style-split) .pageheader__subtitle {
	color: rgba(255, 255, 255, 0.85);
}

.pageheader--bg-primary:not(.is-style-split) .pageheader__kicker,
.pageheader--bg-dark:not(.is-style-split) .pageheader__kicker {
	color: rgba(255, 255, 255, 0.75);
}

.pageheader--bg-primary:not(.is-style-split)
	.pageheader__breadcrumbs
	.breadcrumbs
	ol,
.pageheader--bg-dark:not(.is-style-split)
	.pageheader__breadcrumbs
	.breadcrumbs
	ol {
	color: rgba(255, 255, 255, 0.7);
}

.pageheader--bg-primary:not(.is-style-split)
	.pageheader__breadcrumbs
	.breadcrumbs
	a,
.pageheader--bg-dark:not(.is-style-split)
	.pageheader__breadcrumbs
	.breadcrumbs
	a {
	color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================
   VARIANT: cover (default)
   Full background image + overlay + centered/left content
   ========================================================== */
.pageheader:not([class*="is-style"]),
.pageheader.is-style-cover {
	min-height: 8rem;
}

.pageheader__bg {
	position: absolute;
	inset: 0;
}

.pageheader__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pageheader__overlay {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--black);
}

/* Cover with image: kicker becomes light */
.pageheader:not([class*="is-style"])
	.pageheader__bg
	~ .pageheader__inner
	.pageheader__kicker,
.pageheader.is-style-cover
	.pageheader__bg
	~ .pageheader__inner
	.pageheader__kicker {
	color: var(--wp--preset--color--white);
}

/* ==========================================================
   VARIANT: split
   Content on one side, image on the other
   ========================================================== */
.pageheader.is-style-split {
	display: grid;
	grid-template-columns: 1fr;
	padding-block: 0;
}

.pageheader.is-style-split .pageheader__media {
	position: relative;
	overflow: hidden;
	min-height: 14rem;
}

.pageheader.is-style-split .pageheader__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pageheader.is-style-split .pageheader__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem 1.5rem;
	text-align: left;
	width: auto;
}	

.pageheader.is-style-split .pageheader__title {
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-family: var(--wp--preset--font-family--primary);
	color: var(--wp--preset--color--text-heading);
	text-transform: uppercase;
}

.pageheader--bg-dark.is-style-split .pageheader__title,
.pageheader--bg-dark.is-style-split .pageheader__body p,
.pageheader--bg-dark.is-style-split .pageheader__body strong {
	color: var(--wp--preset--color--white);
}

.pageheader.is-style-split.pageheader--bg-dark .pageheader__body p {
	font-weight: 500;
}

.pageheader.is-style-split .pageheader__subtitle {
	margin-top: 0;
}

.pageheader.is-style-split .pageheader__breadcrumbs .breadcrumbs ol {
	justify-content: flex-start;
}

.pageheader--bg-dark.is-style-split .pageheader__breadcrumbs .breadcrumbs ol {
	color: rgba(255, 255, 255, 0.7);
}

/* Split: image left — swap columns */
.pageheader.is-style-split.pageheader--image-left .pageheader__media {
	order: -1;
}

.pageheader.is-style-split.pageheader--image-left .pageheader__inner {
	order: 1;
}

/* ==========================================================
   VARIANT: minimal
   No image, solid background, compact
   ========================================================== */
.pageheader.is-style-minimal {
	text-align: left;
}

.pageheader.is-style-minimal .pageheader__title {
	font-size: clamp(1.375rem, 3vw, 2rem);
}

.pageheader.is-style-minimal .pageheader__breadcrumbs .breadcrumbs ol {
	justify-content: flex-start;
}

/* ==========================================================
   Responsive
   ========================================================== */

/* Móvil (hasta 48rem / 768px) */
@media (max-width: 47.9375rem) {
	.pageheader__title:before {
		left: -20px;
	}

	.pageheader__inner {
		margin-left: 30px;
	}
}

/* Tablet (48rem / 768px) */
@media (min-width: 48rem) {
	.pageheader--sm {
		padding-block: 2.5rem;
	}

	.pageheader--md {
		padding-block: 4rem;
	}

	.pageheader--lg {
		padding-block: 6rem;
	}

	/* Cover */
	.pageheader:not([class*="is-style"]),
	.pageheader.is-style-cover {
		min-height: 8rem;
	}

	/* Split: 2 columns — image height driven by content */
	.pageheader.is-style-split {
		grid-template-columns: 1fr 1fr;
	}

	.pageheader.is-style-split .pageheader__inner {
		padding: 3rem 2.5rem;
	}
}

/* Desktop (64rem / 1024px) */
@media (min-width: 64rem) {
	.pageheader.is-style-split .pageheader__inner {
		padding: 4rem 3.5rem;
	}

	.pageheader__form-col .pageheader__form {
		padding-left: 10rem;
	}

	.pageheader__title {
		/* font-size: clamp(1.75rem, 4vw, 3rem); */
		font-size: 2.6rem;
	}
}