/*
Theme Name: Bordent
Theme URI: https://bordent.pl
Description: Motyw potomny Twenty Twenty-Five dla bordent.pl. Wszystkie zmiany wyglądu trzymamy TUTAJ - motywu nadrzędnego nie tykamy, bo aktualizacja go nadpisze.
Author: Bordent
Version: 0.2.0
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: bordent
*/

/* Kolory i typografię ustawiaj w theme.json, nie tutaj -
   wtedy działają też w edytorze blokowym. Tu zostaje to,
   czego theme.json nie potrafi: stany, animacje, pseudoelementy. */

:root {
	--bordent-hover: #8F3244;
	--bordent-cien-cta: rgba(107, 31, 46, .24);
	--bordent-ikona-telefon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* ===============================================================
   PRZYCISKI
   Jeden akcent na stronie, więc musi być dopracowany.
   =============================================================== */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	border-radius: 2px;
	transition: background-color .25s ease, color .25s ease,
	            transform .25s ease, box-shadow .25s ease,
	            border-color .25s ease;
}

/* Wypełniony - główne wezwanie do działania */
.wp-element-button:not(.is-style-outline),
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	color: var(--wp--preset--color--biel);
	background-color: var(--wp--preset--color--bordo);
	padding: 1.15em 1.8em;
	border: 1px solid var(--wp--preset--color--bordo);
}

.wp-element-button:not(.is-style-outline):hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	color: var(--wp--preset--color--biel);
	background-color: var(--bordent-hover);
	border-color: var(--bordent-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px var(--bordent-cien-cta);
}

.wp-element-button:not(.is-style-outline):active,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: 0 2px 7px var(--bordent-cien-cta);
}

/* Obrysowany - działanie drugorzędne, wypełnia się na najechaniu */
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--bordo);
	background-color: transparent;
	padding: 1.15em 1.8em;
	border: 1px solid var(--wp--preset--color--bordo);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--biel);
	background-color: var(--wp--preset--color--bordo);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px var(--bordent-cien-cta);
}

/* Ikona słuchawki doklejana automatycznie do każdego przycisku z numerem.
   currentColor sprawia, że sama nadąża za kolorem tekstu w każdym stanie. */
.wp-element-button[href^="tel:"]::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--bordent-ikona-telefon) no-repeat center / contain;
	        mask: var(--bordent-ikona-telefon) no-repeat center / contain;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--bordo);
	outline-offset: 3px;
}

/* ===============================================================
   NAGŁÓWEK - logo, nawigacja
   =============================================================== */

.bordent-header .wp-block-site-logo a,
footer a {
	text-decoration: none;
}

.bordent-header .wp-block-site-logo a:hover {
	opacity: .82;
}

/* Wyłącznie linki tekstowe. Przycisk MUSI zostać wykluczony -
   inaczej przejmuje kolor grafitowy i traci kontrast na bordowym tle. */
.bordent-header .bordent-nav a:not(.wp-element-button) {
	position: relative;
	display: inline-block;
	padding-bottom: .4em;
	color: var(--wp--preset--color--grafit);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .25s ease;
}

/* Podkreślenie wyjeżdża od lewej zamiast po prostu się pojawiać */
.bordent-header .bordent-nav a:not(.wp-element-button)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--wp--preset--color--bordo);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .28s ease;
}

.bordent-header .bordent-nav a:not(.wp-element-button):hover,
.bordent-header .bordent-nav a:not(.wp-element-button):focus-visible {
	color: var(--wp--preset--color--bordo);
}

.bordent-header .bordent-nav a:not(.wp-element-button):hover::after,
.bordent-header .bordent-nav a:not(.wp-element-button):focus-visible::after {
	transform: scaleX(1);
}

.bordent-header .bordent-nav p {
	margin: 0;
}

/* ===============================================================
   STOPKA
   =============================================================== */

footer a:hover,
footer a:focus-visible {
	color: var(--wp--preset--color--bordo);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

/* ===============================================================
   PRZYKLEJONY NAGŁÓWEK, ZWIJAJĄCY SIĘ PO PRZEWINIĘCIU

   `fixed`, nie `sticky` - i to jest istotne.
   Sticky zostaje w przepływie strony, więc zwinięcie nagłówka skraca
   dokument, przeglądarka kompensuje to zakotwiczeniem przewijania,
   scrollY przeskakuje przez próg i klasa zaczyna się przełączać w kółko.
   Efekt: nagłówek drga przy przewijaniu w górę.
   Przy `fixed` nagłówek nie zajmuje miejsca w przepływie, a jego wysokość
   rekompensuje padding na <body>, więc zmiana wysokości nie rusza układu.
   =============================================================== */

header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Miejsce pod nagłówek. Wartość ustawia JS, mierząc stan rozwinięty;
   zapasowa wartość działa, zanim skrypt się wykona. */
body {
	padding-top: var(--bordent-wys-naglowka, 100px);
}

/* Pasek administracyjny WordPressa też chce swoje miejsce */
.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* Kotwice nie mogą chować się pod nagłówkiem */
html {
	scroll-padding-top: calc(var(--bordent-wys-naglowka, 100px) + 1.5rem);
}

/* Na czas pomiaru wysokości wyciszamy animacje, żeby nagłówek nie mrugnął */
.bordent-bez-animacji,
.bordent-bez-animacji * {
	transition: none !important;
}

.bordent-header {
	padding-top: clamp(1rem, 2vw, 1.5rem);
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
	transition: padding-top .3s ease, padding-bottom .3s ease, box-shadow .3s ease;
}

.bordent-header .wp-block-site-logo img {
	height: auto;
	transition: width .3s ease;
}

.przewiniete .bordent-header {
	padding-top: clamp(.5rem, 1.2vw, .7rem);
	padding-bottom: clamp(.5rem, 1.2vw, .7rem);
	box-shadow: 0 1px 20px rgba(26, 20, 22, .07);
}

.przewiniete .bordent-header .wp-block-site-logo img {
	width: 146px;
}

/* Przycisk w zwiniętym nagłówku też schodzi o stopień */
.przewiniete .bordent-header .wp-element-button {
	padding-top: .95em;
	padding-bottom: .95em;
}

@media (prefers-reduced-motion: reduce) {
	.bordent-header,
	.bordent-header .wp-block-site-logo img,
	.bordent-header .bordent-nav a::after,
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover {
		transform: none;
	}
}

/* ===============================================================
   FORMULARZ KONTAKTOWY
   =============================================================== */

.bordent-formularz {
	max-width: 46rem;
}

.bordent-formularz__pola {
	display: grid;
	gap: 1.25rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.bordent-formularz__pole {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 0;
}

.bordent-formularz__pole--szeroki {
	grid-column: 1 / -1;
}

.bordent-formularz label {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grafit);
}

.bordent-formularz__opcjonalne {
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--wp--preset--color--szary);
}

.bordent-formularz input[type="text"],
.bordent-formularz input[type="tel"],
.bordent-formularz input[type="email"],
.bordent-formularz textarea {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--grafit);
	background-color: var(--wp--preset--color--biel);
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 2px;
	padding: .85rem 1rem;
	width: 100%;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.bordent-formularz textarea {
	resize: vertical;
	min-height: 8rem;
	line-height: 1.6;
}

.bordent-formularz input:focus,
.bordent-formularz textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--bordo);
	box-shadow: 0 0 0 3px rgba(107, 31, 46, .12);
}

.bordent-formularz [aria-invalid="true"] {
	border-color: var(--wp--preset--color--bordo);
	background-color: var(--wp--preset--color--roz);
}

.bordent-formularz__podpowiedz {
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--szary);
}

/* Pułapka na boty - niewidoczna, ale nie przez display:none,
   bo część botów pomija pola ukryte w ten sposób. */
.bordent-formularz__pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bordent-formularz__zgoda {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	margin: 1.75rem 0 0;
}

.bordent-formularz__zgoda input {
	margin-top: .2rem;
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
	accent-color: var(--wp--preset--color--bordo);
}

.bordent-formularz__zgoda label {
	font-size: .875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.6;
	color: var(--wp--preset--color--szary);
}

.bordent-formularz__zgoda a {
	color: var(--wp--preset--color--bordo);
}

.bordent-formularz__wyslij {
	margin: 1.75rem 0 0;
}

.bordent-formularz__bledy {
	background-color: var(--wp--preset--color--roz);
	border-left: 2px solid var(--wp--preset--color--bordo);
	padding: 1rem 1.25rem;
	margin: 0 0 1.75rem;
	font-size: .9375rem;
}

.bordent-formularz__bledy-tytul {
	margin: 0 0 .4rem;
	font-weight: 800;
	color: var(--wp--preset--color--bordo);
}

.bordent-formularz__bledy ul {
	margin: 0;
	padding-left: 1.1rem;
}

.bordent-formularz__potwierdzenie {
	background-color: var(--wp--preset--color--kosc);
	border-left: 2px solid var(--wp--preset--color--bordo);
	padding: 1.75rem 2rem;
	max-width: 46rem;
}

.bordent-formularz__potwierdzenie-tytul {
	margin: 0 0 .5rem;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--bordo);
}

.bordent-formularz__potwierdzenie p:last-child {
	margin: 0;
	color: var(--wp--preset--color--szary);
}

/* ===============================================================
   MENU MOBILNE
   Na 375 px nawigacja zawijała się do trzech rzędów i nagłówek
   urastał do 188 px - ćwierć ekranu na każdej podstronie.
   =============================================================== */

.bordent-header {
	position: relative;
}

.bordent-hamburger {
	display: none;
	align-items: center;
	gap: .6rem;
	background: none;
	border: 0;
	padding: .5rem 0;
	margin: 0;
	cursor: pointer;
	color: var(--wp--preset--color--grafit);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Trzy kreski: środkowa to samo tło, skrajne to pseudoelementy */
.bordent-hamburger__kreski,
.bordent-hamburger__kreski::before,
.bordent-hamburger__kreski::after {
	display: block;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	transition: transform .25s ease, opacity .2s ease;
}

.bordent-hamburger__kreski {
	position: relative;
}

.bordent-hamburger__kreski::before,
.bordent-hamburger__kreski::after {
	content: "";
	position: absolute;
	left: 0;
}

.bordent-hamburger__kreski::before { top: -7px; }
.bordent-hamburger__kreski::after  { top:  7px; }

/* Otwarte: kreski składają się w krzyżyk */
.menu-otwarte .bordent-hamburger__kreski {
	background-color: transparent;
}

.menu-otwarte .bordent-hamburger__kreski::before {
	transform: translateY(7px) rotate(45deg);
}

.menu-otwarte .bordent-hamburger__kreski::after {
	transform: translateY(-7px) rotate(-45deg);
}

.bordent-hamburger:focus-visible {
	outline: 2px solid var(--wp--preset--color--bordo);
	outline-offset: 4px;
}

@media (max-width: 899px) {
	.bordent-hamburger {
		display: inline-flex;
	}

	.bordent-header .bordent-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.15rem;
		padding: 1.5rem clamp(1.25rem, 5vw, 4rem) 1.85rem;
		background-color: var(--wp--preset--color--biel);
		border-bottom: 1px solid var(--wp--preset--color--linia);
		box-shadow: 0 14px 28px rgba(26, 20, 22, .09);
	}

	.bordent-header.menu-otwarte .bordent-nav {
		display: flex;
	}

	/* W rozwiniętym menu linki są celami dotykowymi, nie drobnym tekstem */
	.bordent-header .bordent-nav a:not(.wp-element-button) {
		font-size: .82rem;
		padding-block: .5rem;
	}

	.bordent-header .bordent-nav .wp-block-buttons {
		width: 100%;
		margin-top: .35rem;
	}

	.bordent-header .bordent-nav .wp-block-button,
	.bordent-header .bordent-nav .wp-element-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bordent-hamburger__kreski,
	.bordent-hamburger__kreski::before,
	.bordent-hamburger__kreski::after {
		transition: none;
	}
}

/* ===============================================================
   FOKUS

   Twenty Twenty-Five ma w swoim style.css:
       :where(.wp-site-blocks *:focus) { outline-width:2px; outline-style:solid }
   To `:focus`, a nie `:focus-visible`, więc obwódka pojawia się także po
   kliknięciu myszą. Koloru nie ustawia, więc bierze `currentColor` -
   przy logo wychodził czarny prostokąt oblepiający znak.

   Zostawiamy pierścień wyłącznie dla nawigacji klawiaturą i dajemy mu
   markowy kolor oraz odstęp, żeby nie dotykał treści.
   =============================================================== */

.wp-site-blocks *:focus:not(:focus-visible) {
	outline: none;
}

.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible,
.wp-site-blocks summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--bordo);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Pola formularza świadomie POMINIĘTE powyżej.
   Mają własny wskaźnik fokusu (bordowa ramka + poświata), a dołożenie
   im jeszcze zewnętrznej obwódki daje dwa pierścienie naraz. */

/* Logo jest grafiką - pierścień potrzebuje większego luzu niż tekst */
.bordent-header .wp-block-site-logo a:focus-visible {
	outline-offset: 6px;
}