/*
Theme Name: Salient Child - Uluna
Description: Motyw potomny Salient dla sklepu uluna.pl. Kod w functions.php, tu paleta, fonty i poprawki wyglądu.
Author: Uluna
Template: salient
Version: 1.1.0
Text Domain: salient-child-uluna
*/

/*
 * 1. PALETA A "Noc i len" (decyzja Pawła, 12.10.2026) - jedyne miejsce z kodami kolorów.
 *    Pięć pierwszych zmiennych czyta też wysuwany koszyk (inc/koszyk) i kasa (inc/kasa).
 *    Selektor html:root jest o stopień mocniejszy niż :root z modułu koszyka i :where(:root) z kasy,
 *    więc paleta wygrywa niezależnie od kolejności arkuszy.
 *    Dozwolone pary tekst-tło (kontrast policzony w strona/paleta/propozycje-2026-10-12.md):
 *    tekst i tekst pomocniczy na tle / sekcji / karcie, napis przycisku na przycisku,
 *    tło (jasny napis) i akcent na granacie. Akcent nigdy jako tekst na jasnym tle.
 */
html:root {
	--uluna-tlo: #F5F0E6;            /* krem - tło strony */
	--uluna-tekst: #1E2A44;          /* granat - tekst, nagłówki, pasek górny, stopka */
	--uluna-linia: #E4D8C6;          /* piasek - linie i ramki ozdobne */
	--uluna-przycisk: #EC8F45;       /* morela - przycisk zakupu */
	--uluna-przycisk-tekst: #1E2A44; /* granat - napis na przycisku */
	--uluna-sekcja: #E4D8C6;         /* piasek - tło sekcji */
	--uluna-karta: #FFFFFF;          /* biały - karty i pola */
	--uluna-akcent: #E9C46A;         /* księżycowy - tylko na granacie */
	--uluna-pomoc: #4A556E;          /* granat szary - tekst pomocniczy */

	--uluna-font-naglowek: "Fraunces", Georgia, "Times New Roman", serif;
	--uluna-font-tekst: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/*
 * 2. STRONA: tło, kolor i krój tekstu. Rozmiary wg tabeli z notatki palety
 *    (tekst 18 px na komputerze, 17 px na telefonie, interlinia 1,6).
 */
html body {
	background-color: var(--uluna-tlo);
	color: var(--uluna-tekst);
	font-family: var(--uluna-font-tekst);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
}

html body .container-wrap,
html body .ajax-loader-wrap,
html body #ajax-content-wrap {
	background-color: var(--uluna-tlo);
}

body p,
body li,
body td,
body th,
body label,
body input,
body select,
body textarea,
body button {
	font-family: var(--uluna-font-tekst);
}

body strong,
body b {
	font-weight: 600;
}

/* 3. NAGŁÓWKI i nazwa sklepu w nagłówku strony: Fraunces 600, granat. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body #page-header-bg h1,
body .row .col.section-title h1,
body.woocommerce div.product .product_title,
body .woocommerce div.product .product_title,
#header-outer #logo,
#header-outer #logo.no-image {
	font-family: var(--uluna-font-naglowek);
	font-weight: 600;
	color: var(--uluna-tekst);
	text-transform: none;
}

body h1 { font-size: 44px; line-height: 1.15; }
body h2 { font-size: 32px; line-height: 1.2; }
body h3 { font-size: 24px; line-height: 1.25; }

/* Tytuł strony informacyjnej (pas tytułu włączony w ustawieniach motywu): piasek z granatowym napisem. */
body #page-header-bg,
body #page-header-wrap {
	background-color: var(--uluna-sekcja);
}

body #page-header-bg h1,
body #page-header-bg .subheader {
	color: var(--uluna-tekst);
}

/* 4. LINKI: granat, w treści podkreślone. */
body a {
	color: var(--uluna-tekst);
}

/* Zmiana koloru po najechaniu tylko w treści na jasnym tle - nie na granatowych pasach. */
.container-wrap p > a:not(.button):not(.nectar-button):hover {
	color: var(--uluna-pomoc);
}

.container-wrap p > a:not(.button):not(.nectar-button),
.container-wrap .woocommerce-privacy-policy-text a,
.container-wrap .woocommerce-terms-and-conditions-checkbox-text a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * 5. PRZYCISKI WooCommerce: morela z granatowym napisem, zwykły zapis liter
 *    (motyw robił "Dodaj Do Koszyka"). !important, bo motyw koloruje przyciski
 *    własnym arkuszem generowanym z ustawień, o wysokiej wadze selektorów.
 */
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce #respond input#submit,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body .woocommerce ul.products li.product .button,
body.woocommerce ul.products li.product .button,
body .woocommerce div.product form.cart .button,
body.woocommerce div.product form.cart .button,
body .single_add_to_cart_button,
body a.added_to_cart,
body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body .woocommerce #payment #place_order,
body .wc-block-components-button:not(.is-link),
body .wp-block-button .wp-block-button__link.add_to_cart_button {
	background-color: var(--uluna-przycisk) !important;
	background-image: none !important;
	border-color: var(--uluna-przycisk) !important;
	color: var(--uluna-przycisk-tekst) !important;
	font-family: var(--uluna-font-tekst);
	font-weight: 700;
	text-transform: none !important;
	letter-spacing: 0;
	opacity: 1;
}

body.woocommerce a.button *,
body.woocommerce button.button *,
body .woocommerce a.button *,
body .woocommerce button.button *,
body .single_add_to_cart_button * {
	color: var(--uluna-przycisk-tekst) !important;
	text-transform: none !important;
}

/* Najechanie i fokus: kolory bez zmian (żadnej nowej pary), dochodzi granatowa obwódka. */
body.woocommerce a.button:hover,
body.woocommerce button.button:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .single_add_to_cart_button:hover,
body.woocommerce a.button:focus-visible,
body.woocommerce button.button:focus-visible,
body .woocommerce a.button:focus-visible,
body .woocommerce button.button:focus-visible,
body .single_add_to_cart_button:focus-visible {
	background-color: var(--uluna-przycisk) !important;
	color: var(--uluna-przycisk-tekst) !important;
	box-shadow: inset 0 0 0 2px var(--uluna-tekst);
	opacity: 1;
}

/* Wyłączony przycisk zostaje czytelny: te same kolory, tylko bez reakcji. */
body .woocommerce button.button:disabled,
body .woocommerce button.button.disabled,
body .woocommerce a.button.disabled {
	opacity: 1;
	cursor: not-allowed;
	box-shadow: none;
}

/* Przycisk zakupu na stronie produktu: rozmiary z notatki palety. */
body .woocommerce div.product form.cart .single_add_to_cart_button,
body.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 56px;
	font-size: 18px;
	line-height: 1.2;
}

/* 6. CENA: granat, Inter 700. */
body .woocommerce div.product p.price,
body.woocommerce div.product p.price,
body .woocommerce div.product span.price,
body .woocommerce ul.products li.product .price,
body.woocommerce ul.products li.product .price,
body .woocommerce .price .amount {
	color: var(--uluna-tekst);
	font-family: var(--uluna-font-tekst);
	font-weight: 700;
}

body .woocommerce div.product .summary p.price,
body.woocommerce div.product .summary p.price {
	font-size: 28px;
	line-height: 1.2;
}

body .woocommerce .price del,
body .woocommerce .price del .amount {
	color: var(--uluna-pomoc);
	font-weight: 400;
}

/*
 * 7. POLA FORMULARZY poza kasą (kasa ma własny wygląd w inc/kasa i tu jej nie ruszamy).
 *    Pole ilości (.qty) zostaje po stronie motywu.
 */
body:not(.woocommerce-checkout) input[type="text"],
body:not(.woocommerce-checkout) input[type="email"],
body:not(.woocommerce-checkout) input[type="tel"],
body:not(.woocommerce-checkout) input[type="password"],
body:not(.woocommerce-checkout) input[type="search"],
body:not(.woocommerce-checkout) input[type="url"],
body:not(.woocommerce-checkout) input[type="date"],
body:not(.woocommerce-checkout) input[type="number"]:not(.qty),
body:not(.woocommerce-checkout) textarea,
body:not(.woocommerce-checkout) select {
	background-color: var(--uluna-karta);
	color: var(--uluna-tekst);
	border: 1px solid var(--uluna-pomoc);
	border-radius: 6px;
	font-family: var(--uluna-font-tekst);
	font-size: 17px;
	line-height: 1.4;
	box-shadow: none;
}

body:not(.woocommerce-checkout) input[type="text"]:focus,
body:not(.woocommerce-checkout) input[type="email"]:focus,
body:not(.woocommerce-checkout) input[type="tel"]:focus,
body:not(.woocommerce-checkout) input[type="password"]:focus,
body:not(.woocommerce-checkout) input[type="search"]:focus,
body:not(.woocommerce-checkout) input[type="url"]:focus,
body:not(.woocommerce-checkout) input[type="date"]:focus,
body:not(.woocommerce-checkout) input[type="number"]:not(.qty):focus,
body:not(.woocommerce-checkout) textarea:focus,
body:not(.woocommerce-checkout) select:focus {
	border-color: var(--uluna-tekst);
	outline: 2px solid var(--uluna-tekst);
	outline-offset: 1px;
}

body:not(.woocommerce-checkout) input::placeholder,
body:not(.woocommerce-checkout) textarea::placeholder {
	color: var(--uluna-pomoc);
	opacity: 1;
}

body:not(.woocommerce-checkout) .woocommerce form .form-row label,
body:not(.woocommerce-checkout) .woocommerce-form label {
	color: var(--uluna-tekst);
	font-weight: 600;
}

/* 8. PASEK GÓRNY ("Darmowa dostawa"): granat z jasnym napisem, wyśrodkowany. */
body #header-secondary-outer {
	background-color: var(--uluna-tekst);
	border-bottom: 0;
}

body #header-secondary-outer .nectar-center-text,
body #header-secondary-outer .nectar-center-text a,
body #header-secondary-outer nav > ul > li > a {
	color: var(--uluna-tlo);
	font-family: var(--uluna-font-tekst);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

body #header-secondary-outer .nectar-center-text {
	text-align: center;
}

/*
 * 9. STOPKA: linki z menu "Stopka" (blok wypisuje functions.php) nad linią praw autorskich.
 *    Granat, jasne linki; po najechaniu kolor akcentu (dozwolony tylko na granacie).
 */
body #footer-outer,
body #footer-outer #copyright {
	background-color: var(--uluna-tekst);
}

body #footer-outer #copyright,
body #footer-outer #copyright p,
body #footer-outer #copyright a {
	color: var(--uluna-tlo);
	font-size: 15px;
}

/* Blok sam środkuje listę (flex). Samo "margin: 0 auto" na liście nie wystarcza: na ekranie szerszym
   niż lista (ok. 1450 px) motyw zeruje jej marginesy i linki lądowały przy lewej krawędzi. */
.uluna-stopka {
	display: flex;
	justify-content: center;
	background-color: var(--uluna-tekst);
	padding: 28px 16px 20px;
	border-bottom: 1px solid var(--uluna-pomoc);
}

.uluna-stopka .uluna-stopka__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 28px;
	width: 100%;
	max-width: 1425px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.uluna-stopka .uluna-stopka__lista li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .uluna-stopka .uluna-stopka__lista a {
	display: inline-block;
	padding: 10px 0;
	color: var(--uluna-tlo);
	font-family: var(--uluna-font-tekst);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}

body .uluna-stopka .uluna-stopka__lista a:hover,
body .uluna-stopka .uluna-stopka__lista a:focus-visible {
	color: var(--uluna-akcent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 10. TELEFON: rozmiary z notatki palety; linki stopki jeden pod drugim. */
@media only screen and (max-width: 690px) {
	html body {
		font-size: 17px;
		line-height: 1.6;
	}

	body h1 { font-size: 30px; line-height: 1.15; }
	body h2 { font-size: 24px; line-height: 1.2; }
	body h3 { font-size: 20px; line-height: 1.25; }

	body .woocommerce div.product .summary p.price,
	body.woocommerce div.product .summary p.price {
		font-size: 24px;
	}

	body .woocommerce div.product form.cart .single_add_to_cart_button,
	body.woocommerce div.product form.cart .single_add_to_cart_button {
		min-height: 54px;
		font-size: 17px;
	}

	.uluna-stopka {
		padding: 20px 16px 12px;
	}

	.uluna-stopka .uluna-stopka__lista {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	body .uluna-stopka .uluna-stopka__lista a {
		padding: 12px 8px;
		font-size: 17px;
	}
}

/*
 * 12. POPRAWKI Z TESTU W PRZEGLĄDARCE (12.10.2026)
 *
 * a) "Zamawiam i płacę", "Przejdź do płatności" na stronie koszyka, "Wróć do sklepu" i przycisk
 *    w komunikacie "dodano do koszyka": motyw kładł na nich granatowe tło (kolor akcentu) pod nasz
 *    granatowy napis - wychodził pusty granatowy pas. Selektor z powtórzeniami jest mocniejszy
 *    niż reguły motywu i przywraca morelę z granatowym napisem (para z palety).
 */
html body .woocommerce #order_review #payment #place_order#place_order,
html body.woocommerce-checkout #payment #place_order#place_order#place_order,
html body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button.checkout-button.checkout-button,
html body .woocommerce .return-to-shop a.button.button.button,
html body .woocommerce p.return-to-shop a.button.button.button,
html body .woocommerce .woocommerce-message a.button.button.button,
html body .woocommerce-notices-wrapper a.button.button.button {
	background-color: var(--uluna-przycisk) !important;
	background-image: none !important;
	border-color: var(--uluna-przycisk) !important;
	color: var(--uluna-przycisk-tekst) !important;
	opacity: 1 !important;
}

/*
 * b) Koszyk i kasa bez pasa z tytułem strony - na telefonie zabierał pierwszy ekran,
 *    a kasa ma własne nagłówki części.
 */
body.woocommerce-cart #page-header-wrap,
body.woocommerce-cart #page-header-bg,
body.woocommerce-checkout #page-header-wrap,
body.woocommerce-checkout #page-header-bg {
	display: none !important;
}