/* ==========================================================================
   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;
}

/* pridecorpuschristi.com (Verno + Groovy Menu). These selectors only match Groovy's markup (HRMG plan 3, layout_check.py).
   Pride_Profile prints the switch on gm_main_menu_actions_button_first, which Groovy copies into two places: first in
   the desktop actions (before Search) and in the bar beside the phone burger; and on gm_mobile_main_menu_top, the top
   of the phone menu.
   1. The header is dark: the switch is white there (the theme's link colour is dark grey) and so is its focus ring.
   2. Desktop (Groovy's header from 1024px): the menu already fills the header row (on the home page, below 1366px, and
      there the cart sits past the screen's edge below 1100px), so the switch takes no room in it. It is a box of no size
      first in the actions, and its links sit just above Search and the cart, 24px tall, in the sticky header too. Below
      1100px only the other language shows, so it stays on the screen where the home page's own icons already don't.
   3. Beside the phone burger the title sponsor's logo fills the bar, so that copy and the wrapper Groovy prints for it
      are hidden; on phones the switch is at the top of the menu. */
.gm-navbar .hrmg-es-switch,
.gm-navigation-drawer .hrmg-es-switch {
	--hrmg-es-ink: #fff;
}

.gm-navbar .hrmg-es-switch__link,
.gm-navbar .hrmg-es-switch__link:hover,
.gm-navbar .hrmg-es-switch__link:focus,
.gm-navigation-drawer .hrmg-es-switch__link,
.gm-navigation-drawer .hrmg-es-switch__link:hover,
.gm-navigation-drawer .hrmg-es-switch__link:focus {
	color: #fff !important;
}

@media (min-width: 1024px) {
	.gm-navbar .gm-actions .hrmg-es-switch {
		position: relative;
		top: 20px;
		flex: none;
		width: 0;
		height: 0;
		overflow: visible;
		font-size: 12px;
	}

	.gm-navbar .gm-actions .hrmg-es-switch__link {
		min-width: 24px;
		min-height: 24px;
		padding: 0 4px;
		text-underline-offset: 3px;
	}
}

@media (min-width: 1024px) and (max-width: 1099.98px) {
	.gm-navbar .gm-actions .hrmg-es-switch__link.is-current,
	.gm-navbar .gm-actions .hrmg-es-switch__sep {
		display: none;
	}
}

.gm-navbar .gm-menu-actions-wrapper > .hrmg-es-switch,
.gm-navbar .gm-menu-actions-wrapper:not(:has(> :not(.hrmg-es-switch))) {
	display: none !important;
}

.gm-navigation-drawer .hrmg-es-switch {
	margin: 4px 0 8px;
	font-size: 16px;
}

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