/*
 * WP-only chrome additions (header/footer/floating/final-cta), loaded after
 * assets/styles.css + wp.css. Design feedback 2026-10-15.
 *
 * Everything here mirrors the static design system: square corners, no new
 * shadows beyond the existing dropdown shadow, brand blues #0B38D5/#2051da.
 */

/* --------------------------------------------------------------------------
 * Final CTA — photo background (design feedback 2026-10-15 A4).
 * bg-3.jpg cover; brand-blue overlay keeps the worst-case white-text contrast
 * at 5.59:1 (measured 2026-10-15; without overlay the brightest spot is 3.83:1).
 * ------------------------------------------------------------------------ */

.final-cta {
	position: relative;
	overflow: hidden;
}

.final-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(11, 56, 213, 0.5), rgba(11, 56, 213, 0.5)),
		url("../images/bg-3.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.final-cta__inner {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
 * Header language switcher (design feedback 2026-10-15 A6). Sits right of the
 * CTA, sized like .header-actions__cta but white with a blue border. Behaviour
 * (open/close, outside click, Escape) reuses the [data-nav-dropdown] hooks.
 * ------------------------------------------------------------------------ */

.header-language {
	position: relative;
}

.header-language__toggle {
	--cut-ring: #2051da;
	--cut-fill: #fff;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	border: 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
	background: var(--cut-ring);
	color: var(--color-line-blue);
	padding: 11px 20px;
	font-size: 14px;
	font-weight: var(--font-weight-semibold);
	line-height: 21px;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.header-language__toggle::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	background: var(--cut-fill);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 11.4px 100%, 0 calc(100% - 11.4px));
}

.header-language__toggle:focus-visible {
	outline-offset: -5px;
}

.header-language__toggle:hover {
	--cut-fill: #dcf1ff;
}

.header-language__chevron {
	display: inline-flex;
	color: currentColor;
}

.header-language__chevron svg {
	height: 16px;
	width: 16px;
	transition: rotate 0.2s ease;
}

.header-language[data-open="true"] .header-language__chevron svg {
	rotate: 180deg;
}

.header-language__menu {
	visibility: hidden;
	position: absolute;
	top: calc(100% + calc(var(--spacing) * 5));
	right: 0;
	z-index: 50;
	min-width: 170px;
	display: grid;
	gap: var(--spacing);
	padding: calc(var(--spacing) * 3);
	background-color: var(--color-white);
	border: 1px solid #e6eaf0;
	box-shadow: 0 12px 28px #0000001f;
	opacity: 0;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.header-language[data-open="true"] .header-language__menu {
	visibility: visible;
	opacity: 1;
}

.header-language__menu a,
.header-language__menu > button,
.header-language__pending {
	padding-inline: calc(var(--spacing) * 3);
	padding-block: calc(var(--spacing) * 2);
	text-align: left;
	font-size: 14px;
	color: var(--color-line-ink);
	text-decoration: none;
	border: 0;
	background: none;
	cursor: pointer;
}

.header-language__menu a:hover,
.header-language__menu > button:hover {
	background-color: var(--color-line-mint);
}

.header-language__menu > button[aria-current="true"] {
	font-weight: var(--font-weight-semibold);
	color: var(--color-line-blue);
}

.header-language__pending,
.mobile-menu__language-pending {
	color: #5f6368;
	font-weight: var(--font-weight-normal);
	cursor: not-allowed;
}

/* Mobile menu: current language row mirrors the submenu link style. */

.mobile-menu__language-current {
	padding-inline: calc(var(--spacing) * 3);
	padding-block: calc(var(--spacing) * 2);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-line-blue);
}

/* --------------------------------------------------------------------------
 * Footer link groups (design feedback 2026-10-15 A7): non-interactive heading
 * on desktop (≥640px, where statics hides the accordion toggle), accordion
 * stays for mobile. Styling of the h2 itself comes from styles.css.
 * ------------------------------------------------------------------------ */

.footer-links section > h2 {
	display: none;
}

@media (min-width: 640px) {
	.footer-links section > h2 {
		display: block;
	}
}

/* --------------------------------------------------------------------------
 * Footer store badges without a store URL yet (design feedback 2026-10-15 A5):
 * light overlay + disabled look. Site.js keeps data-pending-url from
 * navigating; aria-disabled marks them for assistive tech (qc-wp allows it on
 * these two badges only).
 * ------------------------------------------------------------------------ */

.footer-store-badge[aria-disabled="true"] {
	position: relative;
	cursor: not-allowed;
}

.footer-store-badge[aria-disabled="true"] img {
	opacity: 0.55;
	filter: grayscale(0.6);
}

.footer-store-badge[aria-disabled="true"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.35);
}

.footer-store-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 12px;
	margin-left: auto;
}

.footer-store-badge,
.footer-store-badge img {
	border-radius: 4px;
}

.footer-store-badge {
	overflow: hidden;
}

@media (max-width: 639px) {
	.footer-store-badges {
		flex-wrap: nowrap;
		gap: 8px;
		width: 100%;
	}

	.footer-store-badge,
	.footer-store-badge img {
		width: 128px;
		height: 38px;
	}

	.footer-store-badge[aria-disabled="true"] img {
		opacity: 1;
		filter: none;
	}

	.footer-store-badge[aria-disabled="true"]::after {
		display: none;
	}
}

/* Google Translate language buttons reuse the existing WordPress menu links. */
.mobile-menu__submenu .mobile-menu__language button[data-translate-lang] {
	display: block;
	width: 100%;
	padding-inline: calc(var(--spacing) * 3);
	padding-block: calc(var(--spacing) * 2);
	text-align: left;
	font: inherit;
	font-size: var(--text-sm);
	color: inherit;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.mobile-menu__submenu .mobile-menu__language button[data-translate-lang][aria-current="true"] {
	font-weight: var(--font-weight-semibold);
	color: var(--color-line-blue);
}