/*
Theme Name: RakOFF Liquid
Description: Motyw serwisu zapisów na badania profilaktyczne VI Konferencji Rak OFF (Stowarzyszenie Tyskie Szpilki). Ciepła, edytorialska stylistyka spójna z marką Tyskie Szpilki: kremowe tło, bordo, Fraunces i Inter, z subtelnym akcentem „liquid glass" skupionym wokół formularza.
Author: Magme Agency
Author URI: https://magme.pl
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: rakoff-liquid
*/
/* Zaprojektowane i wykonane przez Magme Agency (magme.pl) na zlecenie Stowarzyszenia Tyskie Szpilki. */

/* ============================================================ *
 * Fonty: hostowane lokalnie (bez ładowania z fonts.googleapis.com,
 * żeby żaden wpis strony z danymi o zdrowiu nie łączył się z Google).
 * ============================================================ */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0304, U+0308, U+0329, U+1E00-1EFF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 380 620;
	font-display: swap;
	src: url('assets/fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 380 620;
	font-display: swap;
	src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0304, U+0308, U+0329, U+1E00-1EFF;
}

/* ============================================================ *
 * Tokeny projektowe: paleta Tyskich Szpilek
 * ============================================================ */
:root {
	--rk-bg: #FBF6F3;
	--rk-surface: #FFFFFF;
	--rk-inset: #F6EFEC;
	--rk-ink: #2B1B22;
	--rk-ink-soft: #7A6670;
	--rk-ink-mute: #A7969E;
	--rk-accent: #8C2F52;
	--rk-accent-ink: #5C1F37;
	--rk-accent-soft: #F4DDE6;
	--rk-zdr-bg: #FBE7E4;
	--rk-zdr-ink: #9A3A2E;
	--rk-line: #E9DFDD;
	--rk-line-strong: #D8C9CD;
	--rk-radius: 14px;
	--rk-radius-sm: 8px;
	--rk-focus: #1B5FA8;
	--a11y-scale: 1;
	--rk-blur: blur(14px) saturate(160%);

	--font-display: 'Fraunces', Georgia, 'Iowan Old Style', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
	font-size: calc(17px * var(--a11y-scale, 1));
	scroll-behavior: smooth;
	overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	background: var(--rk-bg);
	color: var(--rk-ink);
	font-family: var(--font-body);
	font-weight: 450;
	line-height: 1.6;
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
	max-width: 100vw;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; margin: 0; }

a { color: var(--rk-accent); text-underline-offset: 2px; }
a:hover { color: var(--rk-accent-ink); }

:focus-visible { outline: 3px solid var(--rk-focus); outline-offset: 2px; }

/* ============================================================ *
 * Tło ambientowe: bardzo stonowane, ciepłe rozmyte plamy bordo/
 * różu, na których „szkło" formularza subtelnie się załamuje.
 * ============================================================ */
.rk-ambient {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.rk-ambient span {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.4;
}
.rk-ambient span:nth-child(1) { width: 40vw; height: 40vw; background: var(--rk-accent-soft); top: -16vw; right: -10vw; }
.rk-ambient span:nth-child(2) { width: 34vw; height: 34vw; background: var(--rk-zdr-bg); bottom: -14vw; left: -8vw; opacity: 0.5; }

/* ============================================================ *
 * Pasek dostępności: cichy, nad headerem
 * ============================================================ */
.rk-a11y-bar {
	position: sticky;
	top: 0;
	z-index: 80;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 16px;
	background: var(--rk-bg);
	border-bottom: 1px solid var(--rk-line);
}
.rk-a11y-label { font-size: 0.76rem; font-weight: 600; color: var(--rk-ink-mute); margin-right: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.rk-a11y-btn {
	font-size: 0.78rem;
	font-weight: 600;
	font-family: var(--font-body);
	padding: 6px 12px;
	min-height: 34px;
	border: 1px solid var(--rk-line-strong);
	background: var(--rk-surface);
	color: var(--rk-ink-soft);
	border-radius: 999px;
	cursor: pointer;
}
.rk-a11y-btn[aria-pressed="true"] { background: var(--rk-ink); color: #fff; border-color: var(--rk-ink); }
.rk-a11y-btn:hover:not([aria-pressed="true"]) { border-color: var(--rk-accent); color: var(--rk-accent-ink); }

/* ============================================================ *
 * Header: cichy, płaski, bez pudełka i cienia
 * ============================================================ */
.rk-header {
	position: sticky;
	top: 0;
	z-index: 70;
	background: var(--rk-bg);
	border-bottom: 1px solid var(--rk-line);
	padding: 16px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
[data-a11y-stuck] .rk-a11y-bar + .rk-header { top: 0; }

.rk-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.rk-brand svg { flex: none; color: var(--rk-accent); }
.rk-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.rk-brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--rk-ink); }
.rk-brand-sub { font-size: 0.72rem; color: var(--rk-ink-mute); font-weight: 500; letter-spacing: 0.02em; }

.rk-nav { display: flex; align-items: center; gap: 22px; }
.rk-nav a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.92rem;
	color: var(--rk-ink-soft);
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
}
.rk-nav a:hover { color: var(--rk-accent-ink); }
.rk-nav a[aria-current="page"] { color: var(--rk-ink); font-weight: 600; border-bottom-color: var(--rk-accent); }
.rk-nav a.rk-nav-external { color: var(--rk-ink-mute); }

@media (max-width: 640px) {
	.rk-a11y-bar { padding: 7px 10px; gap: 5px; }
	.rk-a11y-label { width: 100%; text-align: center; margin: 0 0 2px; }
	.rk-a11y-btn { font-size: 0.72rem; padding: 6px 9px; min-height: 32px; }
	.rk-header { flex-wrap: wrap; justify-content: center; row-gap: 10px; padding: 14px 16px; }
	.rk-brand-sub { display: none; }
	.rk-nav { width: 100%; justify-content: center; flex-wrap: wrap; gap: 14px; }
}

/* ============================================================ *
 * Treść strony: tu skupia się cały „liquid glass": jeden szklany
 * panel wokół treści (formularza), reszta serwisu zostaje płaska.
 * ============================================================ */
.rk-main { max-width: 900px; margin: 40px auto 48px; padding: 0 16px; }

.rk-content-shell {
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: var(--rk-blur);
	backdrop-filter: var(--rk-blur);
	border: 1px solid var(--rk-line);
	border-radius: var(--rk-radius);
	box-shadow: 0 1px 3px rgba(43, 27, 34, 0.05), 0 16px 40px -20px rgba(92, 31, 55, 0.18);
	padding: clamp(20px, 4vw, 40px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rk-content-shell { background: var(--rk-surface); }
}

.rk-page-title { font-size: 1.7rem; margin: 0 0 12px; color: var(--rk-ink); text-wrap: balance; }
.rk-page-body { max-width: 68ch; }
.rk-page-body p { margin: 0 0 1em; }
.rk-page-body h2 { font-size: 1.2rem; color: var(--rk-ink); margin: 1.6em 0 0.5em; }
.rk-page-body ul { padding-left: 22px; }

/* ============================================================ *
 * Footer: płaski wiersz, jak w projekcie referencyjnym
 * ============================================================ */
.rk-footer-wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.rk-footer {
	border-top: 1px solid var(--rk-line);
	padding: 28px 0 8px;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 20px 24px;
	font-size: 0.86rem;
	line-height: 1.7;
	color: var(--rk-ink-mute);
}
@media (max-width: 640px) { .rk-footer { grid-template-columns: 1fr; } }
.rk-footer a { color: var(--rk-ink-mute); text-decoration: none; }
.rk-footer a:hover { color: var(--rk-accent-ink); }
.rk-footer .rk-footer-org { color: var(--rk-ink-soft); font-weight: 600; }
.rk-footer .rk-footer-it {
	display: inline-block;
	font-size: 0.82rem;
	color: var(--rk-ink-mute);
	margin-top: 8px;
}
.rk-footer .rk-footer-heading {
	display: inline-block;
	font-size: 0.76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rk-ink-soft);
	margin-bottom: 4px;
}
.rk-footer-bottom {
	max-width: 900px;
	margin: 0 auto 28px;
	padding: 0 16px;
	font-size: 0.76rem;
	color: var(--rk-ink-mute);
}
.rk-footer-bottom a { color: var(--rk-ink-mute); font-weight: 600; }
.rk-footer-bottom a:hover { color: var(--rk-accent-ink); }

/* ============================================================ *
 * Tryb wysokiego kontrastu: wyłącza szkło i przezroczystość,
 * wraca do w pełni kryjącej, wysokokontrastowej wersji.
 * ============================================================ */
body.rk-contrast {
	--rk-bg: #ffffff;
	--rk-ink: #000000;
	--rk-ink-soft: #1a1a1a;
	--rk-ink-mute: #333333;
	--rk-surface: #ffffff;
	--rk-inset: #ffffff;
	--rk-line: #000000;
	--rk-line-strong: #000000;
}
body.rk-contrast .rk-ambient { display: none; }
body.rk-contrast .rk-content-shell {
	background: #ffffff !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 2px solid #000000 !important;
	box-shadow: none !important;
}
body.rk-contrast .rk-nav a[aria-current="page"] { color: #000; border-bottom-color: #000; }
body.rk-contrast a { text-decoration: underline; }

body.rk-readable,
body.rk-readable * {
	font-family: Verdana, Tahoma, Arial, sans-serif !important;
	letter-spacing: 0.01em;
}

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