/**
 * parts/header.html + parts/header-mobile.html — the >=1248px / <1248px swap.
 *
 * desktop-nav and mobile-header are each built for one breakpoint only and
 * neither hides itself; that responsibility belongs to whichever template
 * part assembles the header, which is this file. WordPress renders whichever of `header` /
 * `header-mobile` the active template calls; each part hides its own block
 * instance at the wrong breakpoint instead of relying on only one part ever
 * being requested.
 */

/**
 * WP's own global styles auto-space every direct child of `.wp-site-blocks`
 * with `margin-block-start: var(--wp--preset--spacing--50)` (the root
 * blockGap), zeroed only for the FIRST such child — that is topbar, so it
 * gets no gap. The desktop and mobile header landmarks are the 2nd/3rd
 * child, so each still gets the full 40px pushing it down, landing on the
 * `<header class="wp-block-template-part">` landmark itself, not on
 * anything inside it. `header.wp-block-template-part` matches all three
 * header-area landmarks (WP wraps every area: "header" part in a <header>
 * tag); zeroing it on topbar's too is a no-op since that one is already 0
 * from WP's own :first-child rule.
 */
header.wp-block-template-part {
	margin-block-start: 0;
}

/**
 * The breakpoint switch is declared twice on purpose, on two different levels.
 *
 * `.site-header--*` is the inner div inside the part; `.site-header-landmark--*`
 * is the <header> wrapper core emits, tagged by miraigo_name_header_landmarks()
 * in inc/render-filters.php.
 *
 * Hiding only the inner div leaves the wrapper displayed with nothing in it,
 * so a screen reader still announces an empty "banner" region at every width.
 * Hiding the wrapper removes the whole landmark from the accessibility tree.
 *
 * The inner rules stay because the site editor renders template parts client
 * side and never runs a render_block filter: the wrapper class does not exist
 * there, so the inner rule is the only one the editor canvas has. On the front
 * end the wrapper wins first and the inner rule is simply moot.
 */
.site-header--desktop,
.site-header-landmark--desktop {
	display: none;
}

@media (min-width: 1248px) {

	.site-header--desktop,
	.site-header-landmark--desktop {
		display: block;
	}

	.site-header--mobile,
	.site-header-landmark--mobile {
		display: none;
	}
}

/**
 * The mobile header row carries its own side padding (mobile-header/style.scss),
 * so the root padding the wrapper group inherits is dropped: left on, it stacked
 * a second 20px and pushed the menu button 40px in from the screen edge.
 */
.site-header--mobile.has-global-padding {
	padding-inline: 0;
}

/**
 * Mobile sticky header (below 1248px).
 *
 * `position: sticky` on the <header> landmark, not on the block inside it:
 * the landmark is a direct child of `.wp-site-blocks`, so it can travel the
 * whole page, while the inner group's parent is only the landmark itself.
 * The topbar above scrolls away; only the logo / Demo / menu row stays.
 * The drawer is `position: fixed`, which sticky does not contain, and the
 * header's own z-index sits above every in-page layer (summary bar is 90).
 *
 * `scroll-padding-top` keeps in-page anchors (#aceleradores, #contacto…)
 * from landing under the bar. With the admin bar (logged-in only) the bar
 * sticks under it; at 600px and below WordPress lets the admin bar scroll
 * away, so the offset goes back to 0 there.
 */
@media (max-width: 1247.98px) {

	header.site-header-landmark--mobile {
		position: sticky;
		top: 0;
		z-index: var(--wp--custom--z-index--header);
	}

	.admin-bar header.site-header-landmark--mobile {
		top: var(--wp-admin--admin-bar--height, 0px);
	}

	html {
		scroll-padding-top: var(--wp--custom--header--height-mobile);
	}
}

@media (max-width: 600px) {

	.admin-bar header.site-header-landmark--mobile {
		top: 0;
	}
}

/**
 * Language selector (inc/i18n.php, assets/js/language-switch.js).
 *
 * Without JavaScript it is a row of plain links (ES EN). With JavaScript it is
 * a button that opens a card (top bar) or a sheet from the bottom (mobile
 * drawer). The enhanced look keys off `html.miraigo-js`, set in <head> before
 * first paint (miraigo_js_flag()), not off the deferred script, so the links
 * never flash and shift the login link while the page loads.
 */
.lang-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.lang-switch__trigger {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--row);
	cursor: pointer;
}

.miraigo-js .lang-switch .lang-switch__trigger {
	display: inline-flex;
}

.lang-switch__globe,
.lang-switch__chevron {
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
}

.lang-switch__chevron {
	transition: transform var(--wp--custom--transition--hover);
}

.lang-switch.is-open .lang-switch__chevron {
	transform: rotate(180deg);
}

/* Links and options */
.lang-switch__list,
.lang-sheet__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang-switch__option,
.lang-switch__fallback-link {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.9rem;
	line-height: 1.2;
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--row);
}

.lang-switch__chip {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	min-inline-size: 34px;
	block-size: 24px;
	padding: 0 6px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--wp--preset--color--text-primary);
	background: var(--wp--preset--color--gray-100);
	border-radius: var(--wp--custom--radius--chip);
}

.lang-switch__text {
	display: grid;
	gap: 2px;
}

.lang-switch__name {
	font-weight: 600;
}

.lang-switch__note {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-secondary);
}

.lang-switch__tick {
	flex: 0 0 auto;
	margin-inline-start: auto;
	inline-size: 20px;
	block-size: 20px;
	color: var(--wp--preset--color--text-brand);
	opacity: 0;
}

.lang-switch__option[aria-current="true"] {
	background: color-mix(in srgb, var(--wp--preset--color--background-brand) 10%, var(--wp--preset--color--background-primary));
}

.lang-switch__option[aria-current="true"] .lang-switch__chip {
	color: var(--wp--preset--color--text-inverse);
	background: var(--wp--preset--color--background-brand);
}

.lang-switch__option[aria-current="true"] .lang-switch__tick {
	opacity: 1;
}

.lang-switch__option:hover {
	background: var(--wp--preset--color--gray-100);
}

.lang-switch__option[aria-current="true"]:hover {
	background: color-mix(in srgb, var(--wp--preset--color--background-brand) 16%, var(--wp--preset--color--background-primary));
}

/* No JavaScript: a compact row of chips; the names stay for screen readers. */
html:not(.miraigo-js) .lang-switch .lang-switch__list {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

html:not(.miraigo-js) .lang-switch .lang-switch__option {
	padding: 0;
	color: inherit;
}

html:not(.miraigo-js) .lang-switch .lang-switch__tick,
html:not(.miraigo-js) .lang-switch .lang-switch__head,
html:not(.miraigo-js) .lang-switch .lang-switch__note {
	display: none;
}

html:not(.miraigo-js) .lang-switch .lang-switch__name {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.lang-switch__fallback {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
}

.miraigo-js .lang-switch .lang-switch__fallback {
	display: none;
}

/* Top bar: the card under the globe. Sizes are the approved proposal's, in px/rem on purpose. */
.miraigo-js .lang-switch--popover .lang-switch__panel {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-end: 0;
	z-index: calc(var(--wp--custom--z-index--header) + 1);
	display: none;
	inline-size: 270px;
	padding: 8px;
	background: var(--wp--preset--color--background-primary);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--card-hover), 0 0 0 var(--wp--custom--border--hairline) var(--wp--preset--color--border-default);
}

/* The little notch pointing at the globe. */
.miraigo-js .lang-switch--popover .lang-switch__panel::before {
	content: "";
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: 28px;
	inline-size: 12px;
	block-size: 12px;
	background: var(--wp--preset--color--background-primary);
	transform: rotate(45deg);
	box-shadow: -1px -1px 0 color-mix(in srgb, var(--wp--preset--color--text-primary) 8%, transparent);
}

.lang-switch--popover.is-open .lang-switch__panel {
	display: block;
	animation: lang-switch-in var(--wp--custom--transition--hover);
}

.lang-switch__head {
	margin: 0;
	padding: 8px 12px 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

/* stylelint-disable-next-line no-descending-specificity -- The no-JS `html:not(.miraigo-js)` option rule above never matches when this one does. */
.miraigo-js .lang-switch--popover .lang-switch__option {
	padding: 10px 12px;
}

.lang-switch--popover .lang-switch__trigger {
	font-size: 0.8125rem;
	font-weight: 600;
}

.wp-block-miraigo-topbar .lang-switch__trigger:hover {
	background: color-mix(in srgb, var(--wp--preset--color--text-inverse) 14%, transparent);
}

.wp-block-miraigo-topbar .lang-switch__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--border-inverse);
	outline-offset: 2px;
}

.wp-block-miraigo-topbar .lang-switch__option {
	color: var(--wp--preset--color--text-primary);
}

html:not(.miraigo-js) .wp-block-miraigo-topbar .lang-switch .lang-switch__option {
	color: inherit;
}

.lang-switch__option:focus-visible,
.lang-sheet a:focus-visible,
.lang-sheet button:focus-visible {
	outline: 2px solid var(--wp--preset--color--border-brand);
	outline-offset: 2px;
}

/* Mobile drawer: the pill becomes the button */
.miraigo-js .wp-block-miraigo-mobile-header p.mobile-header__lang:has(.lang-switch) {
	padding: 0;
}

.mobile-header__lang .lang-switch--sheet .lang-switch__trigger {
	min-block-size: 44px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	color: inherit;
	border-radius: var(--wp--custom--radius--pill);
}

.mobile-header__lang .lang-switch__fallback-link {
	color: inherit;
}

.mobile-header__lang .lang-switch__fallback-link[aria-current="true"] {
	color: var(--wp--preset--color--text-brand);
}

/* Bottom sheet, printed in the footer */
.lang-sheet {
	position: fixed;
	inset: 0;
	z-index: calc(var(--wp--custom--z-index--drawer) + 2);
	display: flex;
	align-items: flex-end;
	background: color-mix(in srgb, var(--wp--preset--color--text-primary) 55%, transparent);
	animation: lang-sheet-fade var(--wp--custom--transition--hover);
}

.lang-sheet[hidden] {
	display: none;
}

.lang-sheet__panel {
	inline-size: 100%;
	max-block-size: 90vh;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--40) + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	background: var(--wp--preset--color--background-primary);
	border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0;
	animation: lang-sheet-up var(--wp--custom--transition--drawer);
}

.lang-sheet__grab {
	display: block;
	inline-size: 40px;
	block-size: 4px;
	margin: 0 auto var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--radius--pill);
}

.lang-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--30);
}

.lang-sheet__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--subtitle-sm);
	font-weight: 800;
}

.lang-sheet__close {
	inline-size: 44px;
	block-size: 44px;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--text-secondary);
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--row);
	cursor: pointer;
}

.lang-sheet__list li + li {
	margin-block-start: var(--wp--preset--spacing--20);
}

.lang-sheet .lang-switch__option {
	min-block-size: 56px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-default);
	border-radius: var(--wp--custom--radius--card);
}

.lang-sheet .lang-switch__option[aria-current="true"] {
	border-color: var(--wp--preset--color--border-brand);
}

.lang-sheet .lang-switch__name {
	font-size: 0.9rem;
	font-weight: 600;
}

/* The sheet marks the current language with a radio, not a tick. */
.lang-sheet .lang-switch__tick {
	display: none;
}

.lang-sheet .lang-switch__option::after {
	content: "";
	flex: 0 0 auto;
	margin-inline-start: auto;
	inline-size: 22px;
	block-size: 22px;
	border: 2px solid var(--wp--preset--color--gray-300);
	border-radius: 50%;
}

.lang-sheet .lang-switch__option[aria-current="true"]::after {
	background: radial-gradient(circle, var(--wp--preset--color--background-brand) 0 5px, transparent 6px);
	border-color: var(--wp--preset--color--border-brand);
}

html.has-lang-sheet {
	overflow: hidden;
}

@keyframes lang-switch-in {

	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

@keyframes lang-sheet-fade {

	from {
		opacity: 0;
	}
}

@keyframes lang-sheet-up {

	from {
		transform: translateY(100%);
	}
}

@media (prefers-reduced-motion: reduce) {

	.lang-switch__panel,
	.lang-sheet,
	.lang-sheet__panel {
		animation: none;
	}
}

/**
 * Top bar on a phone: the same selector, as the bottom sheet, so it is one tap
 * away without opening the menu. The bar renders both variants; each shows on
 * its own side of 768px. (blocks/topbar hides .topbar__lang below 768px in its
 * compiled CSS; this brings the selector back.)
 */
.wp-block-miraigo-topbar .topbar__lang--switch {
	display: inline-flex;
}

.lang-switch__current--code {
	display: none;
}

.wp-block-miraigo-topbar .lang-switch--sheet .lang-switch__current--name {
	display: none;
}

.wp-block-miraigo-topbar .lang-switch--sheet .lang-switch__current--code {
	display: inline;
}

.wp-block-miraigo-topbar .lang-switch--sheet .lang-switch__trigger {
	min-block-size: 24px;
	padding-inline: var(--wp--preset--spacing--10);
	font-size: 0.8125rem;
	font-weight: 600;
}

.wp-block-miraigo-topbar .lang-switch--sheet .lang-switch__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--border-inverse);
	outline-offset: 2px;
}

@media (max-width: 767.98px) {

	.wp-block-miraigo-topbar .lang-switch--popover {
		display: none;
	}
}

@media (min-width: 768px) {

	.wp-block-miraigo-topbar .lang-switch--sheet {
		display: none;
	}
}