/**
 * Швидко займ — theme styles.
 *
 * Colours, type sizes, and spacing come from theme.json as --wp--preset--*
 * variables. Nothing here declares a raw colour or size that exists as a
 * token. Only the bridge aliases below and genuinely structural values.
 *
 * BREAKPOINTS — three, and only three, matching the prototype:
 *   768px  tablet   gutter 24, header 68, overlap 72
 *   900px  wide     desktop navigation, table rhythm
 *  1080px  desktop  gutter 32, overlap 96
 */

/* --------------------------------------------------------------------- *
 * Bridge: short aliases over the verbose WordPress preset names.
 * --------------------------------------------------------------------- */
:root {
	--c-primary: var(--wp--preset--color--primary);
	--c-primary-soft: var(--wp--preset--color--primary-soft);
	--c-accent: var(--wp--preset--color--accent);
	--c-accent-hover: var(--wp--preset--color--accent-hover);
	--c-accent-deep: var(--wp--preset--color--accent-deep);
	--c-bg: var(--wp--preset--color--background);
	--c-surface: var(--wp--preset--color--surface);
	--c-surface-muted: var(--wp--preset--color--surface-muted);
	--c-text: var(--wp--preset--color--text);
	--c-text-muted: var(--wp--preset--color--text-muted);
	--c-border: var(--wp--preset--color--border);
	--c-border-strong: var(--wp--preset--color--border-strong);
	--c-info: var(--wp--preset--color--info);
	--c-info-soft: var(--wp--preset--color--info-soft);
	--c-on-dark: var(--wp--preset--color--on-dark);

	--on-dark-muted: rgba(255, 255, 255, 0.68);
	--on-dark-rule: rgba(255, 255, 255, 0.16);
	--on-dark-rule-strong: rgba(255, 255, 255, 0.28);

	--f-heading: var(--wp--preset--font-family--heading);
	--f-body: var(--wp--preset--font-family--body);
	--f-mono: var(--wp--preset--font-family--mono);

	--s-xxs: var(--wp--preset--spacing--xxs);
	--s-xs: var(--wp--preset--spacing--xs);
	--s-sm: var(--wp--preset--spacing--sm);
	--s-md: var(--wp--preset--spacing--md);
	--s-lg: var(--wp--preset--spacing--lg);
	--s-xl: var(--wp--preset--spacing--xl);
	--s-2xl: var(--wp--preset--spacing--2xl);
	--s-3xl: var(--wp--preset--spacing--3xl);

	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 12px;

	--gutter: 16px;
	--content-max: 1240px;
	--article-max: 760px;
	--header-height: 56px;
	--tap-min: 44px;

	/* LOCKED GEOMETRY — docs/DECISIONS.md, 2026-07-25.
	   Overlap and shoulder are a paired decision. Changing one without the
	   other breaks the approved silhouette. Do not expose either as an
	   editable block attribute. */
	--showcase-overlap: 40px;
	--band-shoulder: 64px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 24px;
		--header-height: 68px;
		--showcase-overlap: 72px;
	}
}

@media (min-width: 1080px) {
	:root {
		--gutter: 32px;
		--showcase-overlap: 96px;
	}
}

/* --------------------------------------------------------------------- *
 * Base
 * --------------------------------------------------------------------- */
body {
	overflow-x: clip;
}

.sz-container {
	width: 100%;
	max-width: calc(var(--content-max) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.sz-container--article {
	max-width: calc(var(--article-max) + (var(--gutter) * 2));
}

.sz-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--c-border);
}

.sz-rule--strong {
	background: var(--c-border-strong);
}

.sz-rule--on-dark {
	background: var(--on-dark-rule);
}

.sz-meta {
	font-family: var(--f-mono);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: 0.055em;
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

.sz-dark :where(a, button):focus-visible {
	outline-color: var(--c-accent);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sz-skip-link {
	position: absolute;
	left: var(--s-md);
	top: var(--s-xs);
	z-index: 100;
	transform: translateY(-200%);
	background: var(--c-surface);
	color: var(--c-primary);
	padding: var(--s-sm) var(--s-md);
	border-radius: var(--radius-sm);
	border: 1px solid var(--c-border);
	font-weight: 600;
	text-decoration: none;
}

.sz-skip-link:focus-visible {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------- *
 * Header — compact, no oversized desktop CTA
 * --------------------------------------------------------------------- */
.sz-header {
	background-color: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
}

.sz-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-lg);
	/* min-height, not height: a fixed height clips labels at 200% text zoom. */
	min-height: var(--header-height);
	padding-block: var(--s-xxs);
}

.sz-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--s-xs);
	text-decoration: none;
	color: var(--c-primary);
	font-family: var(--f-heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body-md);
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.sz-header__mark {
	width: 18px;
	height: 18px;
	flex: none;
	border-radius: var(--radius-xs);
	background-color: var(--c-primary);
	border-left: 4px solid var(--c-accent);
}

.sz-header__nav {
	display: none;
}

.sz-header__nav ul {
	display: flex;
	align-items: center;
	gap: var(--s-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sz-header__nav a {
	display: inline-block;
	padding: var(--s-xs) 0;
	color: var(--c-primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--legal);
	font-weight: 600;
	letter-spacing: 0.01em;
	border-bottom: 2px solid transparent;
}

.sz-header__nav a:hover,
.sz-header__nav .current-menu-item > a {
	border-bottom-color: var(--c-accent);
}

.sz-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	margin-right: calc(var(--s-sm) * -1);
	padding: 0;
	color: var(--c-primary);
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.sz-header__mobile {
	border-top: 1px solid var(--c-border);
	background-color: var(--c-surface);
	padding-block: var(--s-xs);
}

.sz-header__mobile[hidden] {
	display: none;
}

.sz-header__mobile ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sz-header__mobile a {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	color: var(--c-primary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 600;
	border-bottom: 1px solid var(--c-border);
}

.sz-header__mobile li:last-child a {
	border-bottom: 0;
}

@media (min-width: 900px) {
	.sz-header__nav {
		display: block;
	}

	.sz-header__toggle,
	.sz-header__mobile {
		display: none;
	}
}

/* --------------------------------------------------------------------- *
 * Intro band — APPROVED DIRECTION (concept C, locked 2026-07-25)
 * --------------------------------------------------------------------- */
.sz-band {
	background-color: var(--c-primary);
	color: var(--c-on-dark);
}

.sz-band__inner {
	display: grid;
	gap: var(--s-lg);
	padding-top: var(--s-xl);
	/* Overlap + shoulder are a paired decision — see :root. */
	padding-bottom: calc(var(--showcase-overlap) + var(--band-shoulder));
}

.sz-band__block {
	display: grid;
	gap: var(--s-md);
	padding-left: var(--s-sm);
	border-left: 3px solid var(--c-accent);
}

.sz-band h1 {
	color: var(--c-on-dark);
	margin: 0;
}

.sz-band__lead {
	color: var(--on-dark-muted);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.55;
	max-width: 62ch;
	margin: 0;
}

@media (min-width: 900px) {
	.sz-band__block {
		padding-left: var(--s-lg);
	}

	.sz-band h1 {
		max-width: 18ch;
	}
}

/* Breadcrumbs */
.sz-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sz-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--s-xs);
}

.sz-crumbs--dark,
.sz-crumbs--dark a {
	color: var(--on-dark-muted);
}

.sz-crumbs a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.sz-crumbs--dark a:hover {
	color: var(--c-on-dark);
	border-bottom-color: var(--c-accent);
}

.sz-crumbs--dark .sz-crumbs__sep {
	color: var(--on-dark-rule-strong);
}

.sz-crumbs--light,
.sz-crumbs--light a {
	color: var(--c-text-muted);
}

.sz-crumbs--light a:hover {
	color: var(--c-primary);
	border-bottom-color: var(--c-accent);
}

/* Transparency metadata — inline, quiet */
.sz-transparency {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-xs) var(--s-lg);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--on-dark-muted);
}

.sz-transparency li {
	display: flex;
	align-items: baseline;
	gap: var(--s-xs);
	text-transform: uppercase;
}

.sz-transparency li::before {
	content: '';
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 9999px;
	background-color: var(--c-accent);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------- *
 * Showcase — the primary working surface
 * --------------------------------------------------------------------- */
.sz-showcase-wrap {
	/* The signature move: the white panel intrudes upward into the dark band,
	   in normal flow so the markup stays server-renderable. */
	margin-top: calc(var(--showcase-overlap) * -1);
}

.sz-showcase {
	display: grid;
	gap: var(--s-md);
}

.sz-showcase__panel {
	display: grid;
	gap: var(--s-md);
	background-color: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	padding: var(--s-md);
	/* The single permitted shadow in the entire system. */
	box-shadow: var(--wp--preset--shadow--showcase);
}

.sz-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-sm) var(--s-lg);
}

.sz-topbar__text {
	display: grid;
	gap: var(--s-xxs);
	min-width: 0;
	padding-left: var(--s-sm);
	border-left: 3px solid var(--c-accent);
}

.sz-topbar__label {
	color: var(--c-text-muted);
	margin: 0;
	text-transform: uppercase;
}

.sz-topbar__title {
	color: var(--c-primary);
	margin: 0;
	font-size: var(--wp--preset--font-size--h3);
}

.sz-topbar__desc {
	color: var(--c-text-muted);
	margin: 0;
	font-size: var(--wp--preset--font-size--body-sm);
	max-width: 60ch;
}

.sz-topbar__action {
	flex: none;
}

.sz-text-action {
	display: inline-flex;
	align-items: center;
	gap: var(--s-xxs);
	min-height: var(--tap-min);
	color: var(--c-primary);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sz-text-action:hover {
	color: var(--c-accent-deep);
	text-decoration-thickness: 2px;
}

/* Slot height is declared per breakpoint from block attributes — a
   cross-origin frame cannot be measured. Fallbacks match the defaults. */
.sz-slot {
	display: grid;
	align-content: start;
	width: 100%;
	min-height: var(--sz-slot-mobile, 520px);
}

.sz-frame {
	display: block;
	width: 100%;
	border: 0;
	min-height: inherit;
}

/* The skeleton occupies the slot until the frame reports load, then yields. */
.sz-slot .sz-skeleton {
	grid-area: 1 / 1;
}

.sz-slot .sz-frame {
	grid-area: 1 / 1;
	opacity: 0;
}

[data-sz-state='loaded'] .sz-frame {
	opacity: 1;
}

[data-sz-state='loaded'] .sz-skeleton {
	display: none;
}

@media (min-width: 768px) {
	.sz-slot {
		min-height: var(--sz-slot-tablet, 640px);
	}
}

@media (min-width: 900px) {
	.sz-showcase,
	.sz-showcase__panel {
		gap: var(--s-lg);
	}

	.sz-showcase__panel {
		padding: var(--s-lg);
	}

	.sz-slot {
		min-height: var(--sz-slot-desktop, 720px);
	}
}

/* --------------------------------------------------------------------- *
 * Loading skeleton — never a bare spinner
 * --------------------------------------------------------------------- */
.sz-skeleton {
	display: grid;
	gap: var(--s-md);
	align-content: start;
}

.sz-skeleton__caption {
	color: var(--c-text-muted);
	font-size: var(--wp--preset--font-size--body-sm);
	margin: 0;
}

.sz-skeleton__rows {
	display: grid;
	border-top: 1px solid var(--c-border);
}

.sz-skeleton__row {
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-areas:
		'logo name'
		'amount term'
		'rate cta';
	gap: var(--s-sm) var(--s-md);
	align-items: center;
	padding-block: var(--s-md);
	border-bottom: 1px solid var(--c-border);
}

.sz-skeleton__cell {
	display: block;
	height: 10px;
	border-radius: var(--radius-xs);
	background-color: var(--c-surface-muted);
}

.sz-skeleton__cell--logo {
	grid-area: logo;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
}
.sz-skeleton__cell--name {
	grid-area: name;
	width: 60%;
	height: 14px;
}
.sz-skeleton__cell--amount {
	grid-area: amount;
}
.sz-skeleton__cell--term {
	grid-area: term;
}
.sz-skeleton__cell--rate {
	grid-area: rate;
}
.sz-skeleton__cell--cta {
	grid-area: cta;
	height: var(--tap-min);
	border-radius: var(--radius-sm);
	border: 1px solid var(--c-border);
}

@media (prefers-reduced-motion: no-preference) {
	.sz-skeleton__cell {
		animation: sz-pulse 1.6s ease-in-out infinite;
	}
}

@keyframes sz-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.55;
	}
}

@media (min-width: 900px) {
	.sz-skeleton__row {
		grid-template-columns: 48px minmax(140px, 1.6fr) 1fr 1fr 1fr 168px;
		grid-template-areas: 'logo name amount term rate cta';
		gap: var(--s-lg);
		padding-block: var(--s-lg);
	}
}

/* --------------------------------------------------------------------- *
 * Message states — restrained surfaces, never a flooded section
 * --------------------------------------------------------------------- */
.sz-msg {
	display: grid;
	gap: var(--s-lg);
	align-content: center;
	min-height: 320px;
	padding: var(--s-lg);
	border-radius: var(--radius-sm);
}

.sz-msg__text {
	display: grid;
	gap: var(--s-xs);
	max-width: 60ch;
}

.sz-msg__title,
.sz-msg__body {
	margin: 0;
}

.sz-msg__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-sm);
}

.sz-msg--error {
	background-color: var(--wp--preset--color--error-soft);
}

.sz-msg--error .sz-msg__title {
	color: var(--wp--preset--color--error);
}

.sz-msg--empty,
.sz-msg--fallback {
	background-color: var(--c-surface-muted);
}

.sz-msg--fallback {
	border: 1px solid var(--c-border);
}

.sz-msg--empty .sz-msg__title,
.sz-msg--fallback .sz-msg__title {
	color: var(--c-primary);
}

.sz-msg--empty .sz-msg__body,
.sz-msg--fallback .sz-msg__body {
	color: var(--c-text-muted);
}

/* Fullscreen is a mobile affordance only. */
@media (min-width: 900px) {
	.sz-msg__fullscreen {
		display: none;
	}

	.sz-msg {
		padding: var(--s-xl);
	}
}

/* --------------------------------------------------------------------- *
 * Buttons used inside showcase states
 * --------------------------------------------------------------------- */
.sz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--tap-min);
	padding: 0 var(--s-lg);
	border-radius: var(--radius-sm);
	font-family: var(--f-body);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease;
}

/* Ink-navy label on Signal Green: white on #20C788 measures ~1.9:1 and fails
   WCAG AA. Follows the DESIGN.md token button-primary.textColor. */
.sz-btn--primary {
	background-color: var(--c-accent);
	color: var(--wp--preset--color--on-accent);
	border: 1px solid var(--c-accent);
}

.sz-btn--primary:hover {
	background-color: var(--c-accent-hover);
	border-color: var(--c-accent-hover);
}

.sz-btn--secondary {
	background-color: var(--c-surface);
	color: var(--c-primary);
	border: 1px solid var(--c-border-strong);
}

.sz-btn--secondary:hover {
	border-color: var(--c-primary);
}

@media (min-width: 768px) {
	.sz-btn {
		min-height: 48px;
	}
}

/* --------------------------------------------------------------------- *
 * Editor preview for the showcase block
 * --------------------------------------------------------------------- */
.sz-editor-showcase {
	display: grid;
	gap: var(--s-xs);
	padding: var(--s-lg);
	background-color: var(--c-surface);
	border: 1px solid var(--c-border);
	border-left: 3px solid var(--c-accent);
	border-radius: var(--radius-md);
}

.sz-editor-showcase__label {
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.055em;
	color: var(--c-text-muted);
	margin: 0;
	text-transform: uppercase;
}

.sz-editor-showcase__title {
	margin: 0;
	color: var(--c-primary);
}

.sz-editor-showcase__desc,
.sz-editor-showcase__note {
	margin: 0;
	color: var(--c-text-muted);
	font-size: 14px;
}

.sz-editor-showcase__rule {
	height: 1px;
	border: 0;
	margin: var(--s-xs) 0;
	background: var(--c-border);
}

.sz-editor-showcase__slot {
	padding: var(--s-lg);
	background-color: var(--c-surface-muted);
	border-radius: var(--radius-sm);
	color: var(--c-text-muted);
	font-size: 14px;
	word-break: break-word;
}

/* Affiliate disclosure — directly beneath the slot, never only in the footer */
.sz-disclosure {
	display: flex;
	align-items: flex-start;
	gap: var(--s-sm);
	padding: var(--s-md);
	border-radius: var(--radius-sm);
	background-color: var(--c-info-soft);
	color: var(--c-info);
	font-size: var(--wp--preset--font-size--legal);
	line-height: 1.55;
}

.sz-disclosure p {
	margin: 0;
	max-width: 92ch;
}

/* --------------------------------------------------------------------- *
 * Footer — editorial information footer
 * --------------------------------------------------------------------- */
.sz-footer {
	background-color: var(--c-primary);
	color: var(--c-on-dark);
	padding-block: var(--s-2xl) var(--s-xl);
	margin-top: var(--s-2xl);
}

.sz-footer__inner {
	display: grid;
	gap: var(--s-xl);
}

.sz-footer__brand {
	display: grid;
	gap: var(--s-xs);
	justify-items: start;
	max-width: 42ch;
}

.sz-footer__mark {
	width: 20px;
	height: 20px;
	border-radius: var(--radius-xs);
	background-color: var(--c-on-dark);
	border-left: 4px solid var(--c-accent);
}

.sz-footer__name {
	font-family: var(--f-heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h4);
	letter-spacing: -0.01em;
}

.sz-footer__desc,
.sz-footer__disclosure {
	color: var(--on-dark-muted);
	margin: 0;
}

.sz-footer__cols {
	display: grid;
	gap: var(--s-xl);
}

.sz-footer__col {
	display: grid;
	gap: var(--s-sm);
	align-content: start;
}

/* A <p>, not a heading: these are navigation group labels and must stay out
   of the document outline. */
.sz-footer__heading {
	color: var(--c-accent);
	margin: 0;
	text-transform: uppercase;
}

.sz-footer__col ul {
	display: grid;
	gap: var(--s-xxs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sz-footer__col a {
	display: flex;
	align-items: center;
	min-height: var(--tap-min);
	color: var(--c-on-dark);
	text-decoration: none;
}

.sz-footer__col a:hover {
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sz-footer__legal {
	display: grid;
	gap: var(--s-md);
	margin-top: var(--s-xl);
}

.sz-footer__statement {
	color: var(--c-on-dark);
	font-weight: 600;
	margin: 0;
	max-width: 72ch;
}

@media (min-width: 768px) {
	.sz-footer__cols {
		grid-template-columns: repeat(3, 1fr);
	}

	.sz-footer__col ul {
		gap: 0;
	}

	.sz-footer__col a {
		min-height: 32px;
	}
}

@media (min-width: 900px) {
	.sz-footer {
		padding-block: var(--s-3xl) var(--s-2xl);
	}

	.sz-footer__inner {
		grid-template-columns: minmax(240px, 1fr) 2fr;
		gap: var(--s-3xl);
	}
}