/*
 * Redesign 2026 — header and footer.
 *
 * Loaded only behind the preview flag, on top of the Naxos stylesheets, which
 * are still enqueued by the parent. Hence the .ssr body-class prefix on almost
 * everything: it beats the parent's selectors without an !important war.
 *
 * Direction-agnostic by construction — margin-inline, padding-inline, inset-inline
 * instead of left/right — so the Arabic and Urdu versions mirror without a
 * separate RTL sheet.
 */

body.ssr {
	margin: 0;
	background: var(--ss-bg);
	color: var(--ss-ink);
	font-family: var(--ss-font-ui);
	line-height: var(--ss-lh-base);
	-webkit-font-smoothing: antialiased;
}
body.ssr *, body.ssr *::before, body.ssr *::after { box-sizing: border-box; }

/* Keyboard users get a visible ring everywhere. The handoff asked for this:
   the prototype signalled focus with a border colour on inputs only. */
body.ssr :focus-visible {
	outline: 2px solid var(--ss-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Clipped rather than pushed off-screen: a -9999px offset lands outside the
   viewport on the opposite side under dir=rtl. */
.ssr-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	top: 0;
	inset-inline-start: 0;
	z-index: 100;
	background: var(--ss-surface);
	color: var(--ss-ink);
	padding: 12px 18px;
	border-radius: 0 0 var(--ss-r-btn) 0;
}
.ssr-skip:focus {
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
}

/* Same clip as .ssr-skip, minus the focus-reveal: a label that must exist as
   real (translatable) text for screen readers but never has a visible reason
   to appear, like the hamburger button's name. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Header ---------- */

/* Sticky and translucent, as in the mock: the page scrolls under a blurred
   header rather than pushing it away. The FAQ column's sticky top: 104px is
   measured against this bar's 72px. */
.ssr-head {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(252, 251, 253, .85);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ss-hairline-soft);
}
.ssr-head__inner {
	max-width: var(--ss-max-wide);
	margin: 0 auto;
	padding: 10px var(--ss-pad-x-head);
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 2vw, 28px);
	row-gap: 6px;
	flex-wrap: wrap;
}
.ssr-head__logo { display: inline-flex; flex: 0 0 auto; }
.ssr-head__logo img { height: 32px; width: auto; display: block; }

/* Below 1024px this is a dropdown panel, opened by .ssr-menu-toggle; from
   1024px up it becomes an inline row (see the media query at the end of this
   section). 1024 rather than 1200 because the five items have to stay on the
   bar for anything desktop-shaped, including a browser windowed to half of a
   wide monitor -- at 1200 those widths fell back to the hamburger.
   The inline row went away once already because the nav was allowed
   to shrink -- flex: 1 1 auto with min-width: 0 and overflow-x: auto sized it
   down toward nothing next to its non-shrinking siblings, and the hidden
   scrollbar meant nothing on screen said the items were still there. So the
   desktop rules below never shrink and never clip: the nav is flex: 0 0 auto
   inside an inner that wraps, so the worst case is a second header row rather
   than items silently disappearing. The labels themselves were shortened in
   the 17 dictionaries to fit -- "Auszahlungen und Abhebungen" needed 27
   characters where the header has room for about 12. */
.ssr-head__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: var(--ss-pad-x-head);
	inset-inline-end: var(--ss-pad-x-head);
	z-index: 55;
	margin: 0;
	padding: 6px;
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: 12px;
	box-shadow: var(--ss-shadow-dropdown);
	max-height: min(70vh, 420px);
	overflow-y: auto;
}
.ssr-head__nav[hidden] { display: none; }
.ssr-head__nav a {
	font-family: var(--ss-font-ui);
	color: var(--ss-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	padding: 11px 13px;
	border-radius: 9px;
}
.ssr-head__nav a:hover { color: var(--ss-ink); background: var(--ss-wash); }
.ssr-head__nav a[data-active="1"] { color: var(--ss-ink); background: var(--ss-accent-tint); }

/* The seven pages that used to fill out the rest of the top-level list --
   still one tap away, just not cluttering it. Native <details>, so opening
   it needs no script of its own. */
.ssr-head__more { border-top: 1px solid var(--ss-hairline-soft); margin-top: 4px; padding-top: 4px; }
.ssr-head__more summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--ss-font-ui);
	color: var(--ss-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	padding: 11px 13px;
	border-radius: 9px;
	cursor: pointer;
	list-style: none;
}
.ssr-head__more summary::-webkit-details-marker { display: none; }
.ssr-head__more summary::after {
	content: '';
	width: 7px;
	height: 7px;
	flex: 0 0 auto;
	border-inline-end: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s;
}
.ssr-head__more[open] summary::after { transform: rotate(-135deg); }
.ssr-head__more summary:hover { color: var(--ss-ink); background: var(--ss-wash); }
.ssr-head__more[data-active="1"] > summary { color: var(--ss-ink); background: var(--ss-accent-tint); }
.ssr-head__more-list { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 10px; }
.ssr-head__more-list a {
	font-family: var(--ss-font-ui);
	color: var(--ss-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	padding: 10px 13px;
	border-radius: 9px;
}
.ssr-head__more-list a:hover { color: var(--ss-ink); background: var(--ss-wash); }
.ssr-head__more-list a[data-active="1"] { color: var(--ss-ink); background: var(--ss-accent-tint); }

/* Desktop: the four top-level items sit in the header itself and only
   "Resources" stays a disclosure -- now a dropdown hanging off its own summary
   rather than an indented list. The hamburger is hidden further down, next to
   its own base rule. */
@media (min-width: 1024px) {
	/* [hidden] included on purpose: the toggle script leaves it on the nav
	   whenever the mobile dropdown is closed, and it is also in the markup for
	   the no-JS case -- neither should hide the inline row up here. */
	.ssr-head__nav,
	.ssr-head__nav[hidden] {
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		position: static;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		max-height: none;
		overflow: visible;
	}
	.ssr-head__nav a { font-size: 13px; padding: 9px 10px; white-space: nowrap; }

	.ssr-head__more { position: relative; border-top: 0; margin-top: 0; padding-top: 0; }
	.ssr-head__more summary { font-size: 13px; padding: 9px 10px; gap: 6px; white-space: nowrap; }
	.ssr-head__more-list {
		position: absolute;
		top: calc(100% + 10px);
		inset-inline-start: 0;
		z-index: 60;
		min-width: 250px;
		padding: 6px;
		padding-inline-start: 6px;
		background: var(--ss-surface);
		border: 1px solid var(--ss-hairline);
		border-radius: 12px;
		box-shadow: var(--ss-shadow-dropdown);
	}
}

.ssr-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	background: transparent;
	border: 1px solid var(--ss-input-border);
	border-radius: var(--ss-r-nav);
	color: var(--ss-ink-soft);
	cursor: pointer;
}
.ssr-menu-toggle:hover { border-color: var(--ss-border-hover); }

/* Has to sit after the display:inline-flex above, not up in the 1024px block
   with the rest of the desktop rules: a media query adds no specificity, so
   from up there this lost on source order alone and the hamburger stayed
   visible on desktop next to an already-expanded nav. */
@media (min-width: 1024px) {
	.ssr-menu-toggle { display: none; }
}

.ssr-head__side {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
	flex: 0 0 auto;
}

/* ---------- Buttons ---------- */

.ssr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	/* Padding, not height: German and Russian labels are longer than the English
	   the mock was drawn in, and a fixed height would clip the second line. */
	padding: 9px 16px;
	border-radius: var(--ss-r-input);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .15s, border-color .15s, color .15s;
}
.ssr-btn--solid { background: var(--ss-accent); color: #fff; }
.ssr-btn--solid:hover { background: var(--ss-accent-deep); color: #fff; }
/* Transparent, not white: the mock's outline buttons sit on washed sections,
   where a white fill reads as a second surface. */
.ssr-btn--ghost {
	background: transparent;
	color: var(--ss-ink-soft);
	border-color: var(--ss-border-strong);
}
.ssr-btn--ghost:hover { border-color: var(--ss-border-hover); color: var(--ss-ink-soft); }

/* ---------- Language switcher (18 languages) ---------- */

.ssr-lang { position: relative; }
.ssr-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid var(--ss-input-border);
	border-radius: var(--ss-r-nav);
	color: var(--ss-link-idle);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 13px;
	cursor: pointer;
	max-width: 46vw;
}
.ssr-lang__btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssr-lang__btn:hover { border-color: var(--ss-border-hover); }
.ssr-lang__btn svg { flex: 0 0 auto; transition: transform .15s; }
.ssr-lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.ssr-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	z-index: 60;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--ss-surface);
	border: 1px solid var(--ss-hairline);
	border-radius: 12px;
	box-shadow: var(--ss-shadow-dropdown);
	min-width: 170px;
	/* Capped against the viewport, not just given a min-width: with two fixed
	   150px columns and nowrap labels, "Bahasa Indonesia" / "Bahasa Melayu"
	   forced the menu wider than a phone screen and the whole page gained a
	   horizontal scrollbar. auto-fit collapses to one column on its own once
	   two 150px columns no longer fit -- same pattern as every other grid in
	   this file -- so the max-width is the actual fix and the old >560px media
	   override for grid-template-columns is redundant (position override below
	   still matters, so it stays). */
	max-width: min(360px, calc(100vw - 32px));
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 2px;
	max-height: min(70vh, 460px);
	overflow-y: auto;
}
.ssr-lang__menu[hidden] { display: none; }
.ssr-lang__menu a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--ss-r-chip);
	color: var(--ss-link-idle);
	text-decoration: none;
	font-size: 14px;
	/* normal, not nowrap: a wrapped label is a minor cosmetic cost, an
	   unwrapped one is what caused the overflow above. */
	white-space: normal;
}
.ssr-lang__menu a:hover { background: var(--ss-wash); color: var(--ss-ink); }
.ssr-lang__menu a[data-current="1"] { background: var(--ss-accent-tint-2); color: var(--ss-accent-deep); font-weight: 600; }

@media (max-width: 560px) {
	.ssr-lang__menu { inset-inline-end: auto; inset-inline-start: 0; }
}

/* ---------- Footer ---------- */

.ssr-foot {
	background: var(--ss-bg);
	border-top: 1px solid var(--ss-hairline-soft);
}
.ssr-foot__inner {
	max-width: var(--ss-max-wide);
	margin: 0 auto;
	padding: clamp(40px, 6vw, 56px) var(--ss-pad-x) 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: clamp(28px, 4vw, 40px);
}
.ssr-foot__brand img { height: 30px; width: auto; max-width: 100%; display: block; }
.ssr-foot__brand p {
	font-family: var(--ss-font-ui);
	font-size: 14px;
	line-height: 1.65;
	color: var(--ss-muted-2);
	margin: 18px 0 0;
	max-width: 34ch;
}
.ssr-foot__contacts {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.ssr-foot__contacts li { margin: 0; }
.ssr-foot__col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.ssr-foot__col li { margin: 0; }
.ssr-foot h2 {
	font-size: 11px;
	font-family: var(--ss-font-mono);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ss-muted-2);
	margin: 0;
}
.ssr-foot a {
	font-family: var(--ss-font-ui);
	color: var(--ss-link-idle);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.2;
}
.ssr-foot a:hover { color: var(--ss-accent-deep); }
/* After the shared rule, not before it: same specificity, so file order decides
   and the 15px link size would otherwise win. */
.ssr-foot__contacts a {
	font-size: 14px;
	line-height: 1.4;
	/* Long support addresses must not push the column wider than its track. */
	overflow-wrap: anywhere;
}
.ssr-foot__bottom {
	max-width: var(--ss-max-wide);
	margin: 0 auto;
	padding: 18px var(--ss-pad-x) 28px;
	border-top: 1px solid var(--ss-hairline-soft);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	color: var(--ss-muted-2);
	font-size: 14px;
}