/* Marta Klimkowicz Academy: style uzupełniające theme.json */

:root {
	--mk-line: #E6D3C6;
	--mk-ease: cubic-bezier(.2, .7, .2, 1);
}

body { -webkit-font-smoothing: antialiased; }

:where(.wp-site-blocks) > * { margin-block-start: 0; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.mk-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--malina);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Nagłówek ---------- */

.mk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--porcelana) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--mk-line);
	padding-block: .7rem;
}
.admin-bar .mk-header { top: 32px; }
.mk-header__row { gap: 1.5rem; align-items: center; }
.mk-brand { gap: .75rem; align-items: center; }
.mk-brand .wp-block-site-logo img { display: block; }
.mk-wordmark,
.mk-wordmark a {
	font-family: var(--wp--preset--font-family--tenor);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .95rem;
	line-height: 1.2;
	color: var(--wp--preset--color--atrament);
	text-decoration: none;
	white-space: nowrap;
}
.mk-nav { margin-left: auto; }
.mk-nav a { text-decoration: none; color: var(--wp--preset--color--atrament); }
.mk-nav a:hover, .mk-nav .current-menu-item > a { color: var(--wp--preset--color--malina); }

@media (max-width: 781px) {
	.mk-header .mk-btn { display: none; }
	.mk-wordmark, .mk-wordmark a { font-size: .8rem; letter-spacing: .12em; }
}

/* ---------- Przyciski ---------- */

.mk-btn {
	display: inline-block;
	background: var(--wp--preset--color--malina);
	color: var(--wp--preset--color--biel) !important;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	padding: .8rem 1.4rem;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s var(--mk-ease);
}
.mk-btn:hover { background: var(--wp--preset--color--atrament); }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--atrament);
	border: 1px solid var(--wp--preset--color--atrament);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--atrament);
	color: var(--wp--preset--color--biel);
}

/* ---------- Sekcja powitalna z linią z logo ---------- */

.mk-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.mk-hero > *:not(.mk-hero__curve) { position: relative; z-index: 1; }
.mk-hero__curve {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	fill: none;
	stroke: var(--wp--preset--color--mokka);
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	opacity: .75;
}
@media (prefers-reduced-motion: no-preference) {
	.mk-hero__curve path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mk-draw 2.4s .3s var(--mk-ease) forwards; }
}
@keyframes mk-draw { to { stroke-dashoffset: 0; } }

.mk-hero h1 { max-width: 14ch; }
.mk-hero .mk-lead { font-size: 1.2rem; max-width: 38ch; color: #4a3f3a; }
.mk-hero .wp-block-image img { border-radius: 220px 220px 4px 4px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.mk-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.6rem;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: .95rem;
	color: var(--wp--preset--color--mokka);
}
.mk-facts li::before { content: "✓ "; color: var(--wp--preset--color--malina); }

/* ---------- Dwa światy: twarz i stopy ---------- */

.mk-doors { gap: 0 !important; }
.mk-doors > .wp-block-column { padding: clamp(2rem, 5vw, 4rem); }
.mk-doors h2 { margin-top: 0; }
.mk-doors ul { padding-left: 1.1rem; }
.mk-doors li { margin-bottom: .3rem; }
.mk-door-img img { border-radius: 4px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* ---------- Kroki wizyty (to prawdziwa sekwencja, więc numery) ---------- */

.mk-steps {
	counter-reset: mk-step;
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2rem;
}
.mk-steps li { counter-increment: mk-step; border-top: 1px solid var(--wp--preset--color--mokka); padding-top: 1rem; }
.mk-steps li::before {
	content: counter(mk-step);
	display: block;
	font-family: var(--wp--preset--font-family--tenor);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--wp--preset--color--malina);
	margin-bottom: .6rem;
}
.mk-steps strong { display: block; font-family: var(--wp--preset--font-family--tenor); font-weight: 400; font-size: 1.15rem; margin-bottom: .3rem; }

/* ---------- Galeria efektów ---------- */

.mk-gallery.wp-block-gallery { gap: .75rem !important; }
.mk-gallery.wp-block-gallery img { aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
@media (max-width: 781px) {
	.mk-gallery.wp-block-gallery {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: .5rem;
	}
	.mk-gallery.wp-block-gallery > figure.wp-block-image { flex: 0 0 72% !important; width: 72% !important; scroll-snap-align: start; }
}

/* ---------- Opinie ---------- */

.mk-reviews .wp-block-quote {
	border: 0;
	margin: 0;
	padding: 0;
}
.mk-reviews .wp-block-quote p::before { content: "„"; }
.mk-reviews .wp-block-quote p::after { content: "”"; }
.mk-reviews .wp-block-quote cite {
	display: block;
	margin-top: .8rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-size: .9rem;
	font-style: normal;
	color: var(--wp--preset--color--mokka);
}
.mk-score { font-family: var(--wp--preset--font-family--tenor); font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; margin: 0; }

/* ---------- Cennik ---------- */

.mk-price table { border-collapse: collapse; width: 100%; }
.mk-price td, .mk-price th { border: 0; border-bottom: 1px solid var(--mk-line); padding: .75rem .25rem; vertical-align: top; }
.mk-price thead { border: 0; }
.mk-price th { text-align: left; font-weight: 600; color: var(--wp--preset--color--mokka); font-size: .9rem; }
.mk-price td:last-child, .mk-price th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-price figcaption { text-align: left; font-size: .9rem; color: var(--wp--preset--color--mokka); }

/* ---------- Pytania i odpowiedzi ---------- */

.wp-block-details { border-top: 1px solid var(--mk-line); }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--mk-line); }
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--tenor);
	font-size: 1.15rem;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: .25rem;
	top: -.1rem;
	font-size: 1.5rem;
	color: var(--wp--preset--color--malina);
	transition: transform .25s var(--mk-ease);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: .75rem; }

/* ---------- Fakty o zabiegu ---------- */

.mk-keyfacts {
	border-left: 2px solid var(--wp--preset--color--malina);
	padding: .25rem 0 .25rem 1.25rem !important;
}
.mk-keyfacts ul { list-style: none; padding: 0; margin: 0; }
.mk-keyfacts li { padding: .3rem 0; }

/* ---------- Wersja robocza: do potwierdzenia przez gabinet ---------- */

.mk-draft {
	border: 1px dashed var(--wp--preset--color--malina);
	background: #fff;
	padding: 1rem 1.25rem !important;
	font-size: .95rem;
}
.mk-draft-inline { color: var(--wp--preset--color--malina); font-size: .9em; }
.mk-footer .mk-draft-inline { color: var(--wp--preset--color--nude); font-style: italic; }
.mk-header .mk-btn-wrap { flex-shrink: 0; }

/* ---------- Stopka ---------- */

.mk-footer { padding-block: var(--wp--preset--spacing--50) 6rem; }
.mk-footer a { color: var(--wp--preset--color--nude); }
.mk-footer a:hover { color: var(--wp--preset--color--biel); }
.mk-footer .mk-wordmark, .mk-footer .mk-wordmark a { color: var(--wp--preset--color--porcelana); }
.mk-footer__h { font-size: 1.1rem !important; color: var(--wp--preset--color--nude) !important; }
.mk-footer .mk-btn { margin-top: .5rem; }
.mk-footer .mk-btn:hover { background: var(--wp--preset--color--porcelana); color: var(--wp--preset--color--atrament) !important; }
.mk-footer__legal { border-top: 1px solid #4a403b; padding-top: 1.5rem; margin-top: 2rem; opacity: .8; }
.mk-social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.mk-contact p { margin: 0 0 .8rem; }
.mk-contact__name { font-weight: 600; }

/* ---------- Pasek kontaktu na telefonie ---------- */

.mk-mobilebar { display: none; }
@media (max-width: 781px) {
	.mk-mobilebar {
		display: grid;
		grid-template-columns: 1fr 1.6fr;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 60;
		background: var(--wp--preset--color--porcelana);
		border-top: 1px solid var(--mk-line);
		padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
		gap: .5rem;
	}
	.mk-mobilebar a {
		text-align: center;
		padding: .75rem;
		border-radius: 999px;
		text-decoration: none;
		font-weight: 600;
		color: var(--wp--preset--color--atrament);
		border: 1px solid var(--wp--preset--color--atrament);
	}
	.mk-mobilebar .mk-mobilebar__book { background: var(--wp--preset--color--malina); border-color: var(--wp--preset--color--malina); color: #fff; }
}

/* ---------- Drobne ---------- */

.mk-sub { color: var(--wp--preset--color--mokka); }
.mk-breadcrumb { font-size: .9rem; color: var(--wp--preset--color--mokka); margin-bottom: 0; }
.mk-breadcrumb a { color: inherit; }
.wp-block-image img { height: auto; }
.mk-price table.has-fixed-layout { table-layout: auto; }
@media (max-width: 781px) { .mk-hero__curve { display: none; } }