/* Preeklampsiföreningen — front-end polish that theme.json cannot express.
   Keep this small. Tokens come from theme.json CSS custom properties. */

/* Reserve the scrollbar gutter on every page so the header and content never
   shift horizontally between pages that scroll and pages that don't (a vertical
   scrollbar otherwise narrows the viewport ~15px only on long pages). */
html {
	scrollbar-gutter: stable;
}

/* Sticky footer: keep the footer at the bottom of the viewport on short
   pages, while still flowing naturally when content is tall. Responsive —
   svh avoids the mobile URL-bar height jump. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Full-bleed sections (hero, CTA bands) should meet the header and footer with
   no seam. Remove the default flow gap around <main>; templates that want
   breathing room (e.g. page.html) set their own margins on the main group,
   which still win via inline styles. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Visible, high-contrast focus for keyboard users (WCAG 2.2 — 2.4.11/2.4.13). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--rubin);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On dark (rubin) surfaces, flip the focus ring so it stays visible. */
.has-rubin-background-color :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--white);
}

/* Skip link (core injects the markup for block themes; we style it). */
.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--rubin);
	outline: 3px solid var(--wp--preset--color--rubin);
	padding: 0.75rem 1rem;
	z-index: 100000;
}

/* Decorated hero: soft circular brand motif + hands illustration watermark,
   layered behind the content so the flat panel reads warmer and less sterile.
   Decorative only (aria-hidden via pseudo-elements); text stays fully legible. */
.hero--decorated {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.hero--decorated::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 34rem;
	height: 34rem;
	border-radius: 50%;
	background: var(--wp--preset--color--dusty);
	opacity: 0.22;
	top: -12rem;
	right: -10rem;
}
.hero--decorated::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 22rem;
	height: 26rem;
	bottom: -4rem;
	left: -3rem;
	opacity: 0.10;
	background: center / contain no-repeat
		url("../images/logo/icon-mark-white.svg");
}
@media (max-width: 600px) {
	.hero--decorated::after { display: none; }
	.hero--decorated::before { width: 22rem; height: 22rem; top: -9rem; right: -8rem; }
}

/* Knowledge-base cards: equal height with the "Läs mer" link pinned to the
   bottom, so read-more links align across a row regardless of excerpt length. */
.kb-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.kb-card .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.kb-card .wp-block-post-excerpt__more-text {
	margin-top: auto;
	margin-bottom: 0;
}

/* Current page in the navigation (set by the aria-current filter). */
.wp-block-navigation [aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 2px;
}

/* Footer links: ensure underline + sufficient contrast on rubin. */
.site-footer a {
	color: var(--wp--preset--color--white);
	text-underline-offset: 0.18em;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}