/*
Theme Name: Spokój
Theme URI: https://psychoterapia-agnieszkalukas.pl/
Author: Motyw przygotowany dla gabinetu Agnieszki Lukas
Description: Motyw blokowy dla gabinetu psychoterapii poznawczo-behawioralnej. Spokojna, ciepła paleta, jednostronicowy układ z sekcjami i pełna edycja treści z poziomu WordPressa. Fonty hostowane lokalnie.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spokoj
Tags: one-column, block-patterns, full-site-editing, custom-colors, custom-menu, accessibility-ready, translation-ready
*/

/* Wieksza czesc wygladu jest w theme.json - tutaj tylko to, czego theme.json
   nie obejmuje. Kolory bierzemy z presetow, wiec zmiana palety w
   Wyglad > Edytor > Style przenosi sie rowniez na te reguly. */

/* --- Nawigacja po sekcjach jednostronicowej strony --- */
html {
	scroll-behavior: smooth;
	/* Naglowek jest przyklejony (ok. 94px), bez tego zaslanialby poczatek
	   sekcji, do ktorej prowadzi link z menu. Dziala tez przy wejsciu na
	   adres z kotwica, np. /#kontakt - sprawdzone w przegladarce. */
	scroll-padding-top: 6.5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* --- Dostepnosc --- */
:where(a, button, summary, input, textarea, select, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.skip-link:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-2);
	padding: 1rem 1.5rem;
	z-index: 100000;
}

/* --- Przyklejony naglowek --- */
.spokoj-naglowek {
	z-index: 50;
	backdrop-filter: blur(8px);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--surface-2);
}

@supports not (backdrop-filter: blur(8px)) {
	.spokoj-naglowek { background-color: var(--wp--preset--color--base); }
}

/* --- Karty: oferta, dane kontaktowe --- */
.spokoj-karta {
	height: 100%;
	/* Cien w CSS, nie w atrybutach bloku: format zapisu cieni w markupie
	   blokow ("var:preset|shadow|...") musialby dokladnie odpowiadac
	   serializacji WordPressa, inaczej edytor oznacza blok jako
	   nieprawidlowy. */
	box-shadow: var(--wp--preset--shadow--miekki);
	transition: transform .25s ease, box-shadow .25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.spokoj-karta { transition: none; }
}

.spokoj-karta:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--uniesiony);
}

/* Ikona w karcie oferty */
.spokoj-karta .wp-block-image { margin-bottom: 1rem; }
.spokoj-karta .wp-block-image img { width: 3.5rem; height: auto; }

/* --- Szerokosci wewnatrz sekcji ---
   Sekcje maja szerokosc 76rem, zeby naglowki, karty i kolumny mialy wspolna
   lewa krawedz. Same akapity musza byc wezsze - dlugosc wiersza powyzej ~75
   znakow czyta sie zle. */
/* --- Szerokosci wewnatrz sekcji ---
   Sekcje maja szerokosc 76rem, zeby naglowki, kolumny i karty mialy wspolna
   lewa krawedz. Same akapity musza byc wezsze, bo wiersz powyzej ~75 znakow
   czyta sie zle.

   Ograniczamy DZIECI grupy, nie sama grupe: grupa zachowuje wtedy to samo
   wyrownanie co pozostale elementy sekcji (WordPress centruje ja regula z
   !important), a jej zawartosc ustawia sie przy lewej krawedzi, bo uklad
   "default" nie nadaje dzieciom automatycznych marginesow. */
.spokoj-tekst > * { max-width: 46rem; }
.spokoj-waski > * { max-width: 54rem; }

/* --- Etykieta nad naglowkiem sekcji --- */
.spokoj-nadtytul {
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	margin-bottom: .5rem;
}

/* --- Zwijane listy szkolen (blok "Szczegoly") --- */
.wp-block-details {
	transition: border-color .2s ease;
}

.wp-block-details[open] {
	border-color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--base);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--lora);
	color: var(--wp--preset--color--primary-2);
	list-style: none;
	display: flex;
	align-items: center;
	gap: .75rem;
}

.wp-block-details summary::-webkit-details-marker { display: none; }

.wp-block-details summary::before {
	content: "";
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border-right: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
	transition: transform .2s ease;
}

.wp-block-details[open] summary::before { transform: rotate(45deg); }

.wp-block-details p,
.wp-block-details li { color: var(--wp--preset--color--muted); }

/* --- Miekka fala oddzielajaca sekcje --- */
.spokoj-fala {
	background-image: url("assets/img/fala-sekcji.svg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 100%;
	height: 4rem;
}

/* --- Portret --- */
.spokoj-portret img {
	/* Zaokraglony prostokat, nie kolo: na zdjeciu twarz jest w gornej czesci
	   kadru, wiec wpisanie w okrag obcinaloby wlosy i marynarke. */
	border-radius: 18px;
	box-shadow: var(--wp--preset--shadow--miekki);
}

/* --- Elementy na ciemnym tle ---
   Kolory wyprowadzone z palety przez color-mix, zeby przelaczenie wariantu
   stylu (Wyglad > Edytor > Style) zmienialo je razem z reszta strony. */
.spokoj-karta-ciemna {
	/* Karta telefonu jest wyzsza (ma odnosnik do WhatsAppa) - bez tego obie
	   karty w wierszu mialyby rozna wysokosc. */
	height: 100%;
	border-style: solid;
	border-color: color-mix(in srgb, var(--wp--preset--color--secondary-light) 45%, transparent);
}

.spokoj-kreska {
	border: 0;
	height: 1px;
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary-light) 35%, transparent);
}

/* --- Ikony spolecznosciowe ---
   Styl "logos-only" rysuje ikony biezacym kolorem tekstu, wiec wystarczy
   ustawic color - dzieki temu zmieniaja sie razem z wariantem palety. */
.spokoj-social {
	gap: .75rem;
}

.spokoj-social .wp-block-social-link {
	color: var(--wp--preset--color--secondary-light);
	transition: transform .2s ease, color .2s ease;
}

/* Styl "logos-only" daje odnosnik 24x24 px - dokladnie minimum WCAG 2.5.8,
   bez zapasu. Padding powieksza obszar klikalny do 32x32, nie zmieniajac
   wielkosci samej ikony. */
.spokoj-social .wp-block-social-link a {
	padding: 4px;
}

.spokoj-social .wp-block-social-link:hover {
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.spokoj-social .wp-block-social-link { transition: none; }
	.spokoj-social .wp-block-social-link:hover { transform: none; }
}

/* Ikona WhatsAppa w karcie telefonu: ikona i podpis w jednym odnosniku,
   zeby nie mnozyc dwoch linkow do tego samego celu obok siebie. */
.spokoj-social-wa {
	margin-top: .5rem;
}

.spokoj-social-wa .wp-block-social-link a {
	gap: .4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	/* Z widocznym podpisem WordPress zmienia uklad odnosnika i jego wysokosc
	   spada do 23 px - ponizej minimum 24 px z WCAG 2.5.8. */
	min-height: 32px;
}

/* --- Dane kontaktowe: telefon i e-mail maja byc latwe do klikniecia --- */
.spokoj-kontakt-dana {
	font-family: var(--wp--preset--font-family--lora);
	/* Adres e-mail musi zmiescic sie w jednym wierszu na karcie. */
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: 600;
	overflow-wrap: break-word;
}

.spokoj-kontakt-dana a { text-decoration: none; }
.spokoj-kontakt-dana a:hover { text-decoration: underline; }

/* --- Listy w treści: zachowujemy oddech miedzy punktami --- */
.entry-content :where(ul, ol) > li + li { margin-top: .5rem; }

/* --- Na wąskich ekranach nawigacja i telefon ustawiaja sie w kolumnie --- */
@media (max-width: 781px) {
	html { scroll-padding-top: 4.5rem; }
	.spokoj-naglowek { position: static; }
}