/*
Theme Name: MedKorekta
Theme URI: https://www.plastyczna.pl/
Description: Motyw strony Kliniki MedKorekta (chirurgia plastyczna i estetyczna, Poznań). Odwzorowuje układ dawnej strony na Joomla: menu w nagłówku, lewa kolumna z kontaktem, zdjęciem kliniki i certyfikatami.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
Author: Dyalcom
Text Domain: medkorekta
License: GPLv2 or later
*/

:root {
	--fiolet: #684a92;
	--fiolet-ciemny: #4f3672;
	--fiolet-jasny: #f3eff8;
	--granat: #262c6e;
	--tekst: #2b2b33;
	--szary: #6b6b76;
	--linia: #e4dfeb;
	--tlo: #f6f4f9;
	--szer: 1000px;
	--serif: Georgia, "Times New Roman", Times, serif;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--tlo);
	color: var(--tekst);
	font: 16px/1.65 var(--sans);
}

img { max-width: 100%; height: auto; }

a { color: var(--fiolet); }
a:hover, a:focus { color: var(--fiolet-ciemny); }

h1, h2, h3 { font-family: var(--serif); font-weight: normal; color: var(--granat); line-height: 1.25; }
h1 { font-size: 2rem; margin: 0 0 1rem; }
h2 { font-size: 1.45rem; margin: 2rem 0 .75rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--fiolet); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto;
	padding: .5rem 1rem; background: #fff; color: var(--granat);
}

/* ---------- Ramka strony ---------- */
.site {
	max-width: var(--szer);
	margin: 24px auto;
	background: #fff;
	box-shadow: 0 2px 18px rgba(38, 44, 110, .08);
	border-radius: 6px;
	overflow: hidden;
}

/* ---------- Nagłówek ---------- */
.site-header {
	position: relative;
	height: 254px;
	background: #fff url(assets/img/portret.jpg) no-repeat right top;
}
.site-branding {
	position: absolute;
	left: 238px;
	right: 160px;
	top: 48px;
	text-align: center;
}
.site-title {
	margin: 0;
	font: normal 2rem/1.2 var(--serif);
	color: var(--granat);
}
.site-title a { color: inherit; text-decoration: none; }
.site-description {
	margin: .35rem 0 0;
	font: normal 1.45rem/1.2 var(--serif);
	color: var(--granat);
}
.main-navigation {
	position: absolute;
	left: 238px;
	right: 144px;
	top: 157px;
	height: 48px;
	background: var(--fiolet);
}
.main-navigation ul { list-style: none; margin: 0; padding: 0 0 0 8px; display: flex; height: 100%; }
.main-navigation li { display: flex; }
.main-navigation a {
	display: flex; align-items: center;
	padding: 0 1rem;
	color: #fff;
	text-decoration: none;
	font-size: .95rem;
	letter-spacing: .02em;
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a { background: var(--fiolet-ciemny); color: #fff; }
.menu-toggle { display: none; }

/* ---------- Układ ---------- */
.site-content {
	display: grid;
	grid-template-columns: 238px 1fr;
	gap: 0;
	border-top: 1px solid var(--linia);
}
.sidebar {
	padding: 24px 16px 24px 16px;
	background: var(--fiolet-jasny);
	border-right: 1px solid var(--linia);
}
.content-area { padding: 28px 36px 40px; min-width: 0; }

/* ---------- Bloki boczne ---------- */
.widget { margin: 0 0 24px; }
.widget-title {
	margin: 0 0 .6rem;
	padding: 0 0 .35rem;
	font: normal 1.05rem/1.3 var(--serif);
	color: var(--fiolet);
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 2px solid var(--fiolet);
}
.widget p { margin: 0 0 .6rem; font-size: .93rem; }
.widget a[href^="mailto:"] { overflow-wrap: anywhere; font-size: .88rem; }
.widget .kontakt-nazwa { font: 1.12rem/1.3 var(--serif); color: var(--granat); }
.widget .kontakt-tel { font-size: 1.05rem; font-weight: 600; color: var(--granat); text-decoration: none; }
.widget img { display: block; width: 100%; border: 1px solid var(--linia); border-radius: 3px; background: #fff; }
.widget .opis { font-size: .85rem; color: var(--szary); margin-top: .4rem; }
.przycisk {
	display: inline-block;
	padding: .55rem 1.1rem;
	background: var(--fiolet);
	color: #fff !important;
	border: 0;
	border-radius: 3px;
	text-decoration: none;
	font: inherit;
	font-size: .95rem;
	cursor: pointer;
}
.przycisk:hover, .przycisk:focus { background: var(--fiolet-ciemny); }

/* ---------- Treść ---------- */
.entry-header h1 { margin-top: 0; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content p { text-align: justify; hyphens: auto; }
.entry-content ul { padding-left: 1.3rem; }
.entry-content li { margin: .15rem 0; }
.entry-content li::marker { color: var(--fiolet); }
.entry-content .alignright { float: right; margin: .3rem 0 1rem 1.5rem; max-width: 40%; }
.entry-content .alignleft { float: left; margin: .3rem 1.5rem 1rem 0; max-width: 40%; }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.entry-content figure { margin: 0 0 1rem; }
.entry-content::after { content: ""; display: table; clear: both; }
.wp-block-separator { border: 0; border-top: 1px solid var(--linia); margin: 2rem auto; width: 70%; }

/* Rodzaje zabiegów – Wenus w tle, jak na dawnej stronie */
.medk-venus {
	background: url(assets/img/venus.png) no-repeat right 20px bottom 0 / 260px auto;
	padding-right: 270px;
	min-height: 620px;
}

/* Rezultaty – pary przed/po */
.medk-pair { display: flex; gap: 20px; justify-content: center; margin: 0 0 1.25rem; }
.medk-pair > .wp-block-column { flex: 0 1 260px; text-align: center; }
.medk-pair figure { margin: 0; }
.medk-pair img { border-radius: 3px; }
.medk-pair figcaption { font-size: .9rem; color: var(--szary); margin-top: .3rem; }
.entry-content h2:has(+ .medk-pair) { text-align: center; }

/* Kontakt */
.medk-contact { display: flex; gap: 36px; flex-wrap: wrap; }
.medk-contact > .wp-block-column { flex: 1 1 280px; }
.medk-contact p { text-align: left; }
.medk-lead { font-size: 1.1rem; }
.medk-hours { padding: .75rem 1rem; background: var(--fiolet-jasny); border-left: 3px solid var(--fiolet); }

/* Formularz */
.medk-form label { display: block; font-size: .9rem; margin: 0 0 .2rem; color: var(--granat); }
.medk-form input[type=text],
.medk-form input[type=email],
.medk-form input[type=tel],
.medk-form textarea {
	width: 100%;
	padding: .5rem .6rem;
	margin: 0 0 .8rem;
	border: 1px solid #cfc8da;
	border-radius: 3px;
	font: inherit;
	background: #fff;
}
.medk-form textarea { min-height: 130px; resize: vertical; }
.medk-form input:focus, .medk-form textarea:focus { outline: 2px solid var(--fiolet); outline-offset: 0; border-color: var(--fiolet); }
.medk-form .zgoda { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: var(--szary); margin: 0 0 1rem; }
.medk-form .zgoda input { margin-top: .25rem; }
.medk-form .pole-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.medk-komunikat { padding: .7rem 1rem; border-radius: 3px; margin: 0 0 1rem; font-size: .95rem; }
.medk-komunikat.ok { background: #eaf6ec; color: #1f5f2c; border: 1px solid #b9dfc1; }
.medk-komunikat.blad { background: #fbecec; color: #7a1f1f; border: 1px solid #ecc0c0; }

/* Mapa ładowana dopiero po kliknięciu (bez ciasteczek Google przed zgodą) */
.medk-mapa {
	margin: 2rem 0 0;
	border: 1px solid var(--linia);
	border-radius: 4px;
	background: var(--fiolet-jasny);
	min-height: 220px;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	text-align: center; padding: 1rem;
}
.medk-mapa p { margin: 0 0 .8rem; font-size: .9rem; color: var(--szary); max-width: 32rem; text-align: center; }
.medk-mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.medk-mapa.zaladowana { padding: 0; background: none; aspect-ratio: 16 / 9; }

/* ---------- Stopka ---------- */
.site-footer {
	padding: 18px 24px;
	background: var(--fiolet);
	color: #fff;
	font-size: .85rem;
	text-align: center;
}
.site-footer a { color: #fff; }
.site-footer p { margin: .2rem 0; }

/* ---------- Telefony / tablety ---------- */
@media (max-width: 860px) {
	.site { margin: 0; border-radius: 0; box-shadow: none; }
	.site-header {
		height: auto;
		background-size: auto 150px;
		min-height: 150px;
		padding: 22px 140px 0 16px;
	}
	.site-branding { position: static; text-align: left; }
	.site-title { font-size: 1.45rem; }
	.site-description { font-size: 1.1rem; }
	.main-navigation { position: relative; left: auto; right: auto; top: auto; height: auto; margin: 18px -140px 0 -16px; }
	.menu-toggle {
		display: block; width: 100%;
		padding: .8rem 16px; text-align: left;
		background: var(--fiolet); color: #fff; border: 0; font: inherit; cursor: pointer;
	}
	.main-navigation ul { display: none; flex-direction: column; height: auto; padding: 0 0 .4rem; }
	.main-navigation.otwarte ul { display: flex; }
	.main-navigation a { padding: .7rem 16px; }
	.site-content { grid-template-columns: 1fr; }
	.content-area { padding: 22px 16px 32px; order: 1; }
	.sidebar { order: 2; border-right: 0; border-top: 1px solid var(--linia); padding: 22px 16px; }
	.sidebar-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 24px; }
	.medk-venus { background: none; padding-right: 0; min-height: 0; }
	.entry-content p { text-align: left; }
	.entry-content .alignright { max-width: 42%; margin-left: 1rem; }
}
@media (max-width: 480px) {
	.medk-pair { gap: 10px; }
	h1 { font-size: 1.6rem; }
}
@media (min-width: 861px) {
	.main-navigation ul { display: flex !important; }
}
@media print {
	.sidebar, .main-navigation, .medk-mapa, .site-footer { display: none; }
	.site-content { display: block; }
}