/*
Theme Name: Astra Child — Wooden
Theme URI: https://wooden.pl
Description: Motyw potomny Astry dla wooden.pl. Wszystkie własne zmiany w kodzie i CSS trafiają tutaj, dzięki czemu aktualizacja Astry ich nie nadpisuje.
Author: Wooden
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/*
 * Zakres tego pliku: wyłącznie warstwa motywu — nagłówek, stopka i widżety wtyczek,
 * czyli miejsca, w których Astra ani Elementor nie dają potrzebnego ustawienia.
 * Treść stron budowana w Elementorze nie ma tu żadnych reguł: jej style siedzą
 * w globalnych klasach i zmiennych Elementora.
 */

/* --- Nagłówek: wysokość paska ----------------------------------------------
 * Astra trzyma minimalną wysokość wiersza nawet po ustawieniu jej na 30 px,
 * przez co pasek był wyraźnie wyższy niż w projekcie (59 px).
 */
.ast-primary-header-bar .ast-builder-grid-row,
.ast-primary-header-bar .site-primary-header-wrap {
	min-height: 0;
}


/* --- Nagłówek mobilny: przycisk menu --------------------------------------------
 * Kolor ikony (hamburger / X) ustawiony w Astrze. Po dotknięciu przeglądarka i Astra
 * rysowały obwódkę fokusu (kropkowany kontur, podświetlenie dotknięcia, tło przycisku
 * po najechaniu) — wyłączone dla dotknięcia; dla klawiatury zostaje wyraźny kontur.
 */
.menu-toggle,
.ast-mobile-popup-drawer .menu-toggle-close {
	-webkit-tap-highlight-color: transparent;
}

/* Na telefonie skrypt Astry ustawia fokus na przycisku po dotknięciu, więc :focus-visible potrafi
 * się włączyć — kontur wyłączony we wszystkich stanach, a stan fokusu z klawiatury pokazuje
 * przycisk nie ma żadnego wizualnego stanu fokusu (otwarcie menu jest informacją zwrotną). */
.menu-toggle,
.menu-toggle:focus,
.menu-toggle:focus-visible,
.menu-toggle:active,
.menu-toggle:hover,
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .menu-toggle-close:focus,
.ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	color: #f6f3ee !important;
	border-radius: 4px;
	border: 0 !important; /* Astra rysuje po fokusie kropkowane obramowanie (border-style: dotted), nie kontur */
}

/* Wrapper przycisku i jego wnętrze też bez konturu (na wypadek fokusu na innym elemencie). */
.ast-button-wrap,
.ast-button-wrap *,
.ast-mobile-header-wrap .ast-button-wrap .menu-toggle .mobile-menu-toggle-icon {
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

/* --- Stopka na telefonie i tablecie: ikony społecznościowe na końcu ------------------
 * Blok ikon siedzi w pierwszej kolumnie razem z logo i opisem. Poniżej 921 px kolumna
 * i jej obszar widżetów przestają być pudełkami (display: contents), więc widżety stają
 * się elementami siatki stopki, a blok ikon dostaje kolejność po kolumnie „Siedziba".
 */
@media (max-width: 921px) {
	.site-primary-footer-wrap .site-footer-primary-section-1,
	.site-primary-footer-wrap .site-footer-primary-section-1 > .footer-widget-area {
		display: contents !important; /* Astra ustawia display: block regułą o wyższej szczegółowości */
	}

	.site-primary-footer-wrap .site-footer-primary-section-1 .widget_block:has(.wp-block-social-links) {
		order: 10;
	}

	/* ikony społecznościowe wyśrodkowane w poziomie */
	.site-primary-footer-wrap .widget_block .wp-block-social-links {
		justify-content: center;
	}
}

/* --- Menu mobilne: pełnoekranowe okno wysuwane z prawej ----------------------------
 * Astra: typ „off-canvas", kierunek „right", w oknie logo + menu + ikony społecznościowe
 * (ustawienia w astra-settings). Tu tylko to, czego Astra nie daje: pełna szerokość,
 * animacja ease-out w obie strony, X dokładnie w miejscu hamburgera, logo w lewym górnym
 * rogu, ikony społecznościowe przy dolnej krawędzi, wygodne pozycje menu.
 */
.ast-mobile-popup-drawer .ast-mobile-popup-overlay {
	display: none; /* okno zakrywa cały ekran, przyciemnienie tła jest zbędne */
}

/* Kontener okna: przy zamykaniu ma zostać widoczny przez czas animacji wyjazdu. */
.ast-mobile-popup-drawer {
	transition: opacity 0s linear 0.4s, visibility 0s linear 0.4s, left 0s linear 0.4s, right 0s linear 0.4s;
	z-index: 2147483000 !important; /* także w trakcie zamykania (klasa active już zdjęta) — nad przyklejonym nagłówkiem */
}

.ast-mobile-popup-drawer.active {
	transition: none;
}

.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	width: 100%;
	max-width: 100%;
	opacity: 1;
	visibility: visible;
	transition: transform 0.4s ease-out !important; /* wjazd i wyjazd z tą samą krzywą */
	display: flex;
	flex-direction: column;
	padding: 0 22px 110px; /* miejsce na ikony przy dolnej krawędzi */
	background-color: #221e1a !important; /* tło jak w stopce */
	color: #f6f3ee;
}

/* Pasek z X: przycisk w tym samym miejscu ekranu co hamburger w nagłówku (42×42, 14 px od góry). */
.ast-mobile-popup-drawer .ast-mobile-popup-header {
	position: absolute;
	top: 14px;
	right: 22px;
	min-height: 0;
	padding: 0;
	z-index: 2;
}

.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close,
.ast-mobile-popup-drawer.active .ast-mobile-popup-header .menu-toggle-close,
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close:focus,
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close:hover {
	width: 42px;
	height: 42px;
	padding: 0;
	margin: 0;
	align-items: center;
	justify-content: center;
	color: #f6f3ee !important;
	background: transparent !important;
	border: 0 !important; /* Astra rysuje po dotknięciu kropkowaną ramkę z border-style */
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

.ast-mobile-popup-drawer .menu-toggle-close svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Treść: pasek z logo i X jak nagłówek strony (wysokość, tło, kreska), menu, ikony na dole. */
.ast-mobile-popup-drawer .ast-mobile-popup-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
}

/* Pasek z logo: te same wymiary i tło co nagłówek mobilny Astry (70 px z kreską 1 px, wypełnienie 10/22 px). */
.ast-mobile-popup-content > .site-header-focus-item:first-child {
	box-sizing: border-box;
	height: 70px;
	margin: 0 -22px;
	padding: 10px 22px !important;
	display: flex;
	align-items: center;
	background-color: #171512;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ast-mobile-popup-content .site-logo-img img {
	width: 72px; /* jak w nagłówku */
	height: auto;
}

.ast-mobile-popup-content .ast-builder-menu-mobile {
	margin-top: 28px;
	padding: 0 !important;
}

.ast-mobile-popup-content .main-header-bar-navigation {
	width: 100%;
	margin: 0;
	line-height: 1.3;
}

.ast-mobile-popup-content .main-header-menu .menu-item > .menu-link {
	font-size: 26px;
	font-weight: 300;
	padding: 14px 0;
	min-height: 52px;
	border: 0;
	color: #f6f3ee;
	-webkit-tap-highlight-color: transparent;
}

.ast-mobile-popup-content .main-header-menu .menu-item:hover > .menu-link,
.ast-mobile-popup-content .main-header-menu .menu-item:focus > .menu-link,
.ast-mobile-popup-content .main-header-menu .current-menu-item > .menu-link {
	color: #b0855a;
}

/* Ikony przy dolnej krawędzi okna niezależnie od wysokości treści (okno jest position: fixed). */
.ast-mobile-popup-content > .site-header-focus-item:last-child {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 32px;
	padding: 0 !important;
}

/* Ikony społecznościowe w oknie: kółka 40 px z obrysem, jak w stopce (ustawienia Astry nie dały koloru ani rozmiaru).
 * Kontener ikon Astra renderuje jako blok — tu wiersz z odstępem 24 px jak w stopce. */
.ast-mobile-popup-content .element-social-inner-wrap {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
}

.ast-mobile-popup-content .ast-builder-social-element {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: transparent !important;
	color: #a79d91 !important;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.ast-mobile-popup-content .ast-builder-social-element svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.ast-mobile-popup-content .ast-builder-social-element:hover,
.ast-mobile-popup-content .ast-builder-social-element:focus {
	color: #ffffff !important;
	border-color: #ffffff;
}

/* Tablet (545–921 px): nagłówek Astry ma tam 48 px wcięcia. */
@media (min-width: 545px) and (max-width: 921px) {
	.ast-mobile-popup-drawer .ast-mobile-popup-inner {
		padding-left: 48px;
		padding-right: 48px;
	}

	.ast-mobile-popup-drawer .ast-mobile-popup-header {
		top: 15px;
		right: 48px;
	}

	.ast-mobile-popup-content > .site-header-focus-item:first-child {
		height: 73px;
		margin: 0 -48px;
		padding-left: 48px !important;
		padding-right: 48px !important;
	}

	.ast-mobile-popup-content > .site-header-focus-item:last-child {
		left: 48px;
		right: 48px;
	}

	.ast-mobile-popup-content .site-logo-img img {
		width: 82px;
	}

	.ast-mobile-popup-content .main-header-menu .menu-item > .menu-link {
		font-size: 28px;
	}
}

/* --- Stopka: tytuły kolumn --------------------------------------------------
 * Astra nie wystawia dla widżetów stopki ani wielkości liter, ani rozstrzelenia.
 */
.site-primary-footer-wrap .widget-title {
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

/* --- Stopka: ikony społecznościowe ------------------------------------------
 * W projekcie to kółka z cienkim obrysem. Blok WordPressa umie tylko wypełnienie,
 * a komponent Astry nie ma ustawienia obrysu.
 */
.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link,
.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link:hover {
	width: 40px;
	height: 40px;
	background-color: transparent !important;
	border-radius: 50%;
	transform: none;
}

.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: #a79d91 !important;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link-anchor svg {
	fill: currentColor;
}

.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link-anchor:hover,
.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link-anchor:focus,
.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link:hover .wp-block-social-link-anchor {
	color: #ffffff !important;
	border-color: #ffffff;
	background-color: transparent !important;
}

.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link:hover svg,
.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link-anchor:hover svg,
.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link-anchor:focus svg {
	fill: #ffffff;
}

.site-primary-footer-wrap .wp-block-social-links .wp-block-social-link svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* --- Odnośniki w treści akapitów Elementora ----------------------------------
 * Elementor wymusza na odnośnikach w akapitach atomowych „color: unset" (dziedziczą
 * kolor akapitu), a klasy globalne nie sięgają do elementów zagnieżdżonych. Projekt
 * zakłada odnośniki w kolorze akcentu, po najechaniu w kolorze drewna.
 */
.elementor .e-paragraph-base a {
	color: #8195b5;
}

.elementor .e-paragraph-base a:hover,
.elementor .e-paragraph-base a:focus {
	color: #b0855a;
}

/* --- Konfigurator opcji (strony modeli domów) ---------------------------------
 * Wiersz opcji reaguje na dotknięcie jak przycisk; przeglądarki na telefonach
 * podświetlają wtedy cały element na niebiesko. Elementor nie ma na to ustawienia.
 */
/* Akordeon FAQ (widżet Elementora): to samo niebieskie podświetlenie dotknięcia na tytule pytania. */
.elementor .e-n-accordion-item-title,
.elementor .e-n-accordion-item-title * {
	-webkit-tap-highlight-color: transparent;
}

.elementor .konf-row {
	-webkit-tap-highlight-color: transparent;
	/* tekst opcji nie zaznacza się kursorem przy klikaniu — schemat stylów Elementora nie ma user-select */
	-webkit-user-select: none;
	user-select: none;
}

/* Najechanie na wiersz opcji: ciemniejszy obrys kwadracika wyboru (klasy globalne Elementora nie sięgają
 * do elementów zagnieżdżonych; krycie i tint samego wiersza są w stanie hover klasy konf-row).
 * Tylko dla niezaznaczonego kwadracika — zaznaczony (konf-box-on) ma już pełne tło. */
.elementor .konf-row:hover .konf-box:not(.konf-box-on),
.elementor .konf-row:focus-visible .konf-box:not(.konf-box-on) {
	border-color: #171512;
}

/* --- Karty domów na stronie głównej: funkcja czasowa przejścia ------------------
 * Uniesienie i tint po najechaniu są w klasie globalnej Elementora (stan hover),
 * ale schemat stylów nie ma funkcji czasowej — projekt chce ease-out.
 */
/* Wyższa szczegółowość niż reguła klasy Elementora (skrót transition wpisany po tym arkuszu przywracał ease). */
.elementor .e-con.card,
.elementor .e-con.card-sand {
	transition-timing-function: ease-out;
}

/* --- Stopka: szerokość opisu ------------------------------------------------------
 * Opis w pierwszej kolumnie jest zawężony, żeby cztery kolumny wyglądały na równe.
 * (Jasna linia nad stopką była obramowaniem górnym z ustawień Astry — wyłączone opcją hb-footer-main-sep.)
 */
.site-primary-footer-wrap #text-1 .textwidget {
	max-width: 300px;
}

/* Odnośnik w prawach autorskich: kolor drewna, po najechaniu jasny jak „Polityka prywatności”. */
.ast-footer-copyright a {
	color: #b0855a;
}

.ast-footer-copyright a:hover,
.ast-footer-copyright a:focus {
	color: #f6f3ee;
}

/* --- Formularz kontaktowy (Fluent Forms) ------------------------------------
 * Widżet wtyczki nie ma ustawień etykiet, obrysu pól ani odstępów.
 */
.fluentform .ff-el-input--label label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b635a;
	margin-bottom: 6px;
}

/* Wtyczka wstawia własne reguły o wyższej szczegółowości dla obrysu i zaokrąglenia,
 * stąd wymuszenie tych dwóch właściwości. */
.fluentform .ff-el-form-control {
	padding: 15px 16px !important;
	height: auto !important;
	font-family: inherit !important; /* wtyczka wstawia krój systemowy; projekt ma Poppins (krój tekstu Astry) */
	font-size: 15px;
	line-height: 1.4;
	color: #22201d;
	background: #ffffff;
	border: 1px solid #d9d0c4 !important;
	border-radius: 4px !important;
	box-shadow: none;
}

.fluentform .ff-el-form-control:focus {
	border-color: #b0855a;
	box-shadow: none;
}

.fluentform .ff-el-group {
	margin-bottom: 18px;
}

.fluentform .ff-btn-submit {
	width: 100% !important;
	padding: 14px 24px !important;
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.5;
	border: none;
	transition: background-color 0.2s ease;
}

.fluentform .ff-el-group.ff_submit_btn_wrapper,
.fluentform .ff-el-group.ff_submit_btn_wrapper_custom {
	width: 100%;
	padding-top: 14px; /* większy odstęp między ostatnim polem a przyciskiem (margines składałby się z marginesem pola) */
}

/* Telefon: mniejszy przycisk „Wyślij” — jak przyciski Elementora w wariancie mobilnym (ok. 45 px). */
@media (max-width: 640px) {
	.fluentform .ff-btn-submit {
		padding: 11px 20px !important;
		font-size: 14px !important;
	}
}

/* --- Formularz z polem wiadomości (podstrona Kontakt) ------------------------
 * Ramka formularza ma tę samą wysokość co kolumna obok, a pole wiadomości rośnie,
 * żeby dolne krawędzie obu ramek były na jednej linii. Dotyczy tylko formularzy
 * z polem wieloliniowym; widżet wtyczki nie ma na to ustawienia.
 */
.elementor-widget-fluent-form-widget:has(textarea),
.elementor-widget-fluent-form-widget:has(textarea) .elementor-widget-container,
.elementor-widget-fluent-form-widget:has(textarea) .fluentform-widget-wrapper,
.elementor-widget-fluent-form-widget:has(textarea) .fluentform,
.elementor-widget-fluent-form-widget:has(textarea) form,
.elementor-widget-fluent-form-widget:has(textarea) fieldset {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.fluentform .ff-el-group:has(> .ff-el-input--content > textarea) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.fluentform .ff-el-group:has(> .ff-el-input--content > textarea) .ff-el-input--content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	margin-left: 0; /* wtyczka daje tu margin-left: auto, co w kolumnie flex zwęża pole do szerokości treści */
}

.fluentform textarea.ff-el-form-control {
	flex: 1 1 auto;
	width: 100%;
	min-height: 120px;
	resize: vertical;
	/* wtyczka ustawia line-height: 1 dla wszystkich pól — w polu wieloliniowym tekst był ściśnięty */
	line-height: 1.7;
}

/* Odnośniki w kolumnie „Menu” stopki (widżet tekstowy, pozycje rozdzielone <br>): każdy ma co najmniej
   24 px wysokości i odstęp od sąsiada — wymóg dostępności (PageSpeed: „docelowe elementy dotykowe”). */
.site-primary-footer-wrap .textwidget a {
	display: inline-block;
	padding: 3px 0;
}

/* Jeden H1 w hero (SEO, 2026-10-17): pogrubione słowo tytułu to <strong> w treści nagłówka (klasa h1),
   a przeglądarka dałaby mu 700 — projekt ma 500 (dawna klasa h1-strong). Elementor nie przepuszcza
   atrybutów w treści, więc grubość nadaje ta reguła. */
.elementor .h1 strong {
	font-weight: 500;
}

/* Człony tytułu (pogrubione słowo, końcówka w <span>) nie łamią się w środku — tak jak dawniej, gdy były
   osobnymi elementami wiersza; sam tytuł ma limit 700 px jak dawny wiersz (styl lokalny w generatorach). */
.elementor .h1 strong,
.elementor .h1 span {
	white-space: nowrap;
}