/* ==========================================================================
   Niebo-dent - design tokens
   Wyciagniete z zywego CSS Oxygena (rebuild/assets/css/oxygen-live.css)
   wg rzeczywistej czestotliwosci uzycia. Nie zmieniac wartosci bez powodu -
   sa zgodne 1:1 z obecna produkcja.
   ========================================================================== */

:root {
	/* --- marka --------------------------------------------------------- */
	--c-brand:            #7590c5;  /* niebieski marki - naglowki, linki, panele */
	--c-brand-dark:       #113b69;  /* navy - stopka, mocne akcenty */
	--c-brand-light:      #c9d6ed;  /* jasny niebieski - obramowania, karty */
	--c-brand-bg:         #eff3ff;  /* tlo sekcji */

	/* --- CTA ----------------------------------------------------------- */
	--c-cta:              #ff6b35;  /* pomaranczowy - przyciski glowne */
	--c-cta-hover:        #e25522;

	/* --- neutralne ---------------------------------------------------- */
	--c-text:             #282828;
	--c-text-muted:       #606e79;
	--c-text-soft:        #5a5959;
	--c-white:            #ffffff;
	--c-off-white:        #fafafa;
	--c-border:           #e5e5e5;

	/* --- akcenty poboczne --------------------------------------------- */
	--c-accent-yellow:    #e8c900;
	--c-accent-yellow-dk: #c4ab09;

	/* --- typografia --------------------------------------------------- */
	--f-heading: "Ranade", "Poppins", "Poppins-fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--f-body:    "Poppins", "Poppins-fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--fs-h1:    clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	--fs-h2:    clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
	--fs-h3:    clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	--fs-body:  1rem;
	--fs-small:  0.875rem;

	--lh-tight: 1.15;
	--lh-body:  1.65;

	/* --- rytm --------------------------------------------------------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	/* --- ksztalty ----------------------------------------------------- */
	--r-sm: 6px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-pill: 999px;

	/* Jeden cien, nie drabinka elevation. Uzywany WYLACZNIE dla elementow
	   fizycznie unoszacych sie nad trescia: panel mega menu i sticky pasek. */
	--shadow-panel: 0 12px 32px rgba(17, 59, 105, 0.14);

	/* --- layout ------------------------------------------------------- */
	--w-container: 1240px;
	--w-narrow:    760px;
	--h-header:    84px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Fonty self-hosted. Na produkcji sa tylko pliki .ttf (18 odmian Poppins,
   ladowanych przez ma_customfonts.css Oxygena) - stad na razie ttf.
   DO ZROBIENIA: konwersja do woff2 (okolo 30% mniej bajtow) oraz pobranie
   Ranade z Fontshare; na produkcji Ranade jest wczytywany z innego arkusza,
   ktorego nie ma w oxygen-live.css.

   font-display:swap - w tracie produkcji FontDisplay pokazywal 1030 ms
   oszczednosci na FCP. */
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Poppins";
	src: url("../fonts/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
	font-display: swap;
}

/* Font zastepczy z dopasowanymi metrykami. Przy `font-display: swap`
   podmiana kroju zmienia szerokosc tekstu i przesuwa layout - w nawigacji
   dawalo to CLS 0,0065. `size-adjust` zbliza metryki systemowego kroju do
   Poppins, wiec podmiana jest niewidoczna.
   Wartosc wyliczona z proporcji wysokosci x obu krojow. */
@font-face {
	font-family: "Poppins-fallback";
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 106%;
	ascent-override: 95%;
	descent-override: 25%;
	line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--f-heading);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-4);
	color: var(--c-brand-dark);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a { color: var(--c-brand); }

/* Kazdy obraz ma zarezerwowane miejsce. To bylo zrodlo CLS 0,854 na
   obecnej stronie: 53/53 obrazow Oxygena bez width/height. */
img, video, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	width: 100%;
	max-width: var(--w-container);
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn--cta { background: var(--c-cta); color: var(--c-white); }
.btn--cta:hover { background: var(--c-cta-hover); transform: translateY(-1px); }
.btn--brand { background: var(--c-brand); color: var(--c-white); }
.btn--ghost { background: transparent; color: var(--c-brand); border: 1.5px solid var(--c-brand-light); }

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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Tresc z bazy WordPressa zawiera wklejone, pelne URL-e (np. w polityce
   prywatnosci linki do polityk Apple i Facebooka). Bez tego dlugie slowa
   bez spacji rozpychaja strone - przy 320 px bylo +75 px. */
.prose a,
.prose p,
.prose li,
.prose td,
.prose th {
	overflow-wrap: break-word;
	word-break: break-word;
}