/* ==========================================================================
   HRMG Spanish (spec 2026-11-13 §4): the EN | ES switch, the "¿Prefiere español?" banner and the
   "still translating" notice. Theme-neutral: the switch takes the font and colour of where it is put;
   the banner and notice read a theme's --ink / --paper when it has them (tmpst's Mosaic theme does),
   and fall back to neutral dark-on-light otherwise. Markup: includes/class-language-switch.php and
   Renderer::add_notice().
   ========================================================================== */

.hrmg-es-switch,
.hrmg-es-banner,
.hrmg-es-notice {
	--hrmg-es-ink: var(--ink, #262223);
	--hrmg-es-paper: var(--paper, #fbf7f2);
}

.hrmg-es-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* EN | ES switch: inline, sized for touch (44px), inherits the nav's font and colour. */

.hrmg-es-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.hrmg-es-switch__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 6px;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	opacity: 0.72;
}

.hrmg-es-switch__link:hover,
.hrmg-es-switch__link:focus {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 5px;
}

.hrmg-es-switch__link.is-current {
	opacity: 1;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.hrmg-es-switch__link:focus-visible {
	outline: 3px solid var(--hrmg-es-ink);
	outline-offset: 2px;
}

.hrmg-es-switch__sep {
	opacity: 0.4;
}

/* "¿Prefiere español?" banner: printed hidden, shown before the page is drawn, so nothing below it moves. */

.hrmg-es-banner {
	background-color: var(--hrmg-es-ink);
	color: var(--hrmg-es-paper);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.hrmg-es-banner[hidden] {
	display: none !important;
}

.hrmg-es-banner__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 72rem;
	margin: 0 auto;
	padding: 6px 16px;
}

.hrmg-es-banner__text {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	text-align: center;
}

.hrmg-es-banner__link,
.hrmg-es-banner__link:hover,
.hrmg-es-banner__link:focus {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.hrmg-es-banner__link:hover {
	text-decoration-thickness: 2px;
}

.hrmg-es-banner__close {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
}

.hrmg-es-banner__close:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

.hrmg-es-banner__link:focus-visible,
.hrmg-es-banner__close:focus-visible {
	outline: 3px solid var(--hrmg-es-paper);
	outline-offset: 2px;
}

/* "Algunas partes de esta página aún se están traduciendo." (Spanish pages only) */

.hrmg-es-notice {
	box-sizing: border-box;
	width: calc(100% - 32px);
	max-width: 72rem;
	margin: 16px auto;
	padding: 10px 16px;
	border-left: 4px solid var(--hrmg-es-ink);
	border-radius: 4px;
	background-color: var(--hrmg-es-paper);
	color: var(--hrmg-es-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* tmpst.org (the Mosaic theme). These selectors only match that theme's markup (HRMG plan Task 18, layout_check.py).
   1. From 960 to 1179px its nav already fills the header row. There the switch shows only the other language, in a
      narrower box: from 980px nothing wraps that didn't wrap before (from 960 to about 975px the wordmark takes two lines).
   2. Its phone menu is a fixed panel that starts at --header-h. With the banner above the sticky header, the panel
      would cover the menu button; while that menu is open the banner steps aside, so the header is back at the top. */
@media (min-width: 960px) and (max-width: 1179.98px) {
	.mosaic-nav .hrmg-es-switch__link.is-current,
	.mosaic-nav .hrmg-es-switch__sep {
		display: none;
	}

	.mosaic-nav .hrmg-es-switch__link {
		min-width: 32px;
		padding: 0 4px;
	}
}

html.mosaic-nav-open .hrmg-es-banner {
	display: none !important;
}

@media print {
	.hrmg-es-banner,
	.hrmg-es-switch {
		display: none !important;
	}
}