/*
 * Kosmetologia Faszczewska — arkusz motywu.
 *
 * Prototypy z Claude Design opisywały stany atrybutami, których przeglądarka nie zna:
 * style-hover, style-focus, style-before. Tutaj są przepisane na prawdziwy CSS.
 * Wartości (kolory, odstępy, clamp) są przeniesione 1:1 — nic nie zostało dobrane od nowa.
 *
 * Reguły stanów mają !important, bo nadpisują style inline pozostawione w znacznikach.
 * Style inline zostały celowo zachowane: to najwierniejsze odwzorowanie makiety.
 */

/* ---------------------------------------------------------------
   1. Podstawa — sekcja <style> z <helmet> prototypu
   --------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #F1F4EF;
	color: #20241F;
	font-family: 'Schibsted Grotesk', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

* {
	box-sizing: border-box;
}

a {
	color: #3E5544;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: #30422F;
}

:focus-visible {
	outline: 3px solid #20241F;
	outline-offset: 2px;
	border-radius: 2px;
}

summary::-webkit-details-marker {
	display: none;
}

summary {
	list-style: none;
}

img {
	display: block;
}

@keyframes fkUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

@keyframes fkIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fkZoom {
	from { transform: scale(1.03); }
	to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 120ms !important;
	}
	html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------
   2. Przełączanie wariantów makiet
   Makieta telefoniczna ma inne teksty niż desktopowa (krótsze nagłówki,
   inaczej pogrupowany cennik), więc oba warianty są w dokumencie i
   przełącza je media query. Granica 768 px = próg `mobile` z prototypu.
   --------------------------------------------------------------- */

/* Elementy oznaczone .fk-d / .fk-m NIE mają display w stylu inline —
   o widoczności decydują wyłącznie te reguły. */
.fk-d      { display: block; }
.fk-d-flex { display: flex; }
.fk-m,
.fk-m-flex { display: none !important; }

@media (max-width: 767px) {
	.fk-d,
	.fk-d-flex { display: none !important; }
	.fk-m      { display: block !important; }
	.fk-m-flex { display: flex !important; }
}

/* Nawigacja: pełna od 1024 px, hamburger poniżej — próg `narrow` z prototypu. */
.fk-nav-wide   { display: flex; }
.fk-nav-narrow { display: none; }

@media (max-width: 1023px) {
	.fk-nav-wide   { display: none; }
	.fk-nav-narrow { display: flex; }
}

/* ---------------------------------------------------------------
   3. Stany :hover — z atrybutów style-hover
   --------------------------------------------------------------- */

/* Pigułka „Umów wizytę” w nagłówku. */
.fk-hv-pill:hover {
	background: #3E5544 !important;
	border-color: #3E5544 !important;
	color: #F9FBF7 !important;
}

/* Odnośniki nawigacji, nagłówki-linki, telefon i e-mail. */
.fk-hv-link:hover {
	color: #3E5544 !important;
}

/* Zielony przycisk główny. */
.fk-hv-dark:hover {
	background: #30422F !important;
}

/* Zielony przycisk z obramowaniem (submit, „Akceptuję”). */
.fk-hv-dark2:hover {
	background: #30422F !important;
	border-color: #30422F !important;
}

/* Przycisk konturowy i kafelki na tle #F9FBF7 / #F1F4EF. */
.fk-hv-sage:hover {
	background: #E2E9E0 !important;
}

/* Przycisk „Pokaż mapę” na tle #E2E9E0. */
.fk-hv-mist:hover {
	background: #F1F4EF !important;
}

/* Podkreślenie odnośnika „Poznaj terapię →”. */
.fk-hv-bd:hover {
	border-color: #3E5544 !important;
}

/* Jasny przycisk na zielonym tle (stopka, CTA Kobido). */
.fk-hv-white:hover {
	background: #fff !important;
}

/* Odnośniki kontaktowe w stopce. */
.fk-hv-u:hover {
	text-decoration: underline !important;
}

/* Nawigacja w stopce. */
.fk-hv-uw:hover {
	color: #fff !important;
	text-decoration: underline !important;
}

/* ---------------------------------------------------------------
   4. Stany :focus — z atrybutów style-focus
   --------------------------------------------------------------- */

.fk-fc:focus {
	border-color: #3E5544 !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(62, 85, 68, .18) !important;
}

/* Wariant telefoniczny — w makiecie bez poświaty. */
.fk-fc-m:focus {
	border-color: #3E5544 !important;
	outline: none !important;
}

/* Odnośnik „Przejdź do treści” — widoczny dopiero po sfokusowaniu. */
.fk-skip:focus {
	left: 16px !important;
	top: 16px !important;
}

/* ---------------------------------------------------------------
   5. ::before — z atrybutów style-before (kropki przy specjalizacjach)
   --------------------------------------------------------------- */

.fk-dot::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: #A96A79;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   6. Zgoda na cookies, pasek rezerwacji i mapa
   Stany z prototypu: cookieBar (zgoda === null), stickyBar (mobile i po decyzji),
   mapaOn / mapaOff. Klasę na <html> ustawia skrypt w <head>, żeby nic nie mrugało.
   --------------------------------------------------------------- */

.fk-cookie-bar,
.fk-sticky-bar {
	display: none;
}

html.fk-zgoda-brak .fk-cookie-bar {
	display: flex;
}

html.fk-zgoda-tak .fk-sticky-bar,
html.fk-zgoda-nie .fk-sticky-bar {
	display: block;
}

/* Pasek rezerwacji jest tylko na telefonie — `mob` z prototypu. */
@media (min-width: 768px) {
	html.fk-zgoda-tak .fk-sticky-bar,
	html.fk-zgoda-nie .fk-sticky-bar {
		display: none;
	}
}

/* Przy otwartym menu pasek znika — `!this.state.menu` z prototypu. */
html.fk-menu-otwarte .fk-sticky-bar {
	display: none !important;
}

/* Mapa: placeholder do czasu zgody, potem iframe wstrzykiwany skryptem.
   Oba pojemniki NIE mają display w stylu inline — inaczej nadpisałby te reguły. */
.fk-mapa-off {
	display: flex;
}

.fk-mapa-on {
	display: none;
}

html.fk-zgoda-tak .fk-mapa-off {
	display: none;
}

html.fk-zgoda-tak .fk-mapa-on {
	display: flex;
}

/* ---------------------------------------------------------------
   7. Menu pod hamburgerem
   Dwa warianty: szerszy (76-pikselowy nagłówek, 768–1023 px) i telefoniczny.
   --------------------------------------------------------------- */

.fk-menu {
	display: none;
}

html.fk-menu-otwarte .fk-menu-d {
	display: flex;
}

@media (max-width: 767px) {
	html.fk-menu-otwarte .fk-menu-d { display: none; }
	html.fk-menu-otwarte .fk-menu-m { display: flex; }
}

/* ---------------------------------------------------------------
   8. Honeypot — pole antyspamowe poza ekranem, nie „display:none”,
   bo część botów pomija ukryte pola.
   --------------------------------------------------------------- */

.fk-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------------
   9. Skrypty wyłączone
   Menu, zgoda na cookies i pasek rezerwacji działają na JS. Bez skryptu
   pokazujemy pasek cookies i chowamy hamburger — nawigacja pozostaje
   dostępna w stopce, więc strona nadal działa.
   --------------------------------------------------------------- */

html.fk-no-js .fk-cookie-bar {
	display: flex;
}

html.fk-no-js .fk-hamburger {
	display: none;
}