/*
 * contact.css — strona kontaktu
 *
 * Część arkuszy theme'u rozbitych per feature. Kolejność ładowania i lista
 * plików: functions.php → oliwa_enqueue_assets(). Wszystkie wartości pochodzą
 * z assets/css/tokens.css.
 *
 * Ikony: theme nie ma systemu ikon, a projekt kontaktu opiera się na sześciu
 * piktogramach (telefon, koperta, pinezka, dostawa, kropla, tarcza). Zamiast
 * wstrzykiwać SVG blokiem wp:html — czego edytor nie waliduje i czego redakcja
 * nie umie zmienić — piktogram jest maską CSS na pseudoelemencie. Blok dostaje
 * klasy `oliwa-icon has-icon-<nazwa>`, kolor bierze z reguły obok, więc ta sama
 * ikona działa na kremie i na oliwce.
 */

/* -------------------------------------------------------------------------
   Ikony jako maski
   ---------------------------------------------------------------------- */

.oliwa-icon::before {
	background-color: currentColor;
	content: "";
	display: block;
	flex: none;
	height: var(--icon-lg);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: var(--icon-lg);
}

.has-icon-phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.has-icon-mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.has-icon-pin::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.has-icon-truck::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
}

.has-icon-droplet::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/%3E%3C/svg%3E");
}

.has-icon-shield::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Nagłówek strony
   ---------------------------------------------------------------------- */

/* Lead pod H1 — miara wiersza, żeby zdanie nie ciągnęło się przez 1240 px.
   Akapit siedzi w grupie o layoucie `default`, nie `constrained`: w tym drugim
   WordPress wypisuje `margin-left: auto !important` i każde dziecko węższe od
   kontenera zjeżdża na środek sekcji zamiast stać pod nagłówkiem. Struktura
   bloków rozwiązuje to bez wojny na `!important`. */
.oliwa-lead {
	max-width: var(--measure-prose);
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   Wiersz kontaktowy — ikona w złocie, etykieta nad wartością
   ---------------------------------------------------------------------- */

.oliwa-contact-row {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: var(--space-5);
}

.oliwa-contact-row::before {
	color: var(--text-accent-deep);
}

.oliwa-contact-row .oliwa-contact-row__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.oliwa-contact-row .oliwa-contact-row__body p {
	margin: 0;
}

.oliwa-contact-row a {
	color: inherit;
	text-decoration: none;
}

.oliwa-contact-row a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Godziny kontaktu — karta oliwkowa, dzień z lewej, godziny z prawej
   ---------------------------------------------------------------------- */

.oliwa-hours .oliwa-hours__row {
	align-items: baseline;
	display: flex;
	flex-direction: row;
	gap: var(--space-6);
	justify-content: space-between;
}

.oliwa-hours .oliwa-hours__row p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Formularz — karta z Contact Form 7
   ---------------------------------------------------------------------- */

/* Shortcode CF7 wypada z rytmu bloków: `blockGap` karty daje odstęp tylko
   elementom, których marginesu nikt nie wyzerował, a `.wpcf7` domyślnie ma
   własny margines z wtyczki. Stąd jawna wartość — inaczej etykieta pierwszego
   pola przykleja się do nagłówka „Formularz kontaktowy:". */
.oliwa-contact-form .wpcf7 {
	margin: var(--space-6) 0 0;
}

/* Spinner CF7 jest elementem flex formularza i rezerwuje 24 px + gap na dole
   karty, mimo że do czasu wysyłki jest niewidoczny. Pokazujemy go dopiero,
   gdy wtyczka oznaczy formularz jako wysyłany. */
.oliwa-contact-form .wpcf7-spinner {
	display: none;
}

.oliwa-contact-form form.submitting .wpcf7-spinner {
	display: block;
}

.oliwa-contact-form .wpcf7 form {
	gap: var(--space-5);
}

/* Zgoda RODO: pole wyboru obok tekstu, nie nad nim, i bez wersalików etykiety
   — reguła z forms.css ustawia labelom uppercase, co dla zdania zgody jest
   nieczytelne. */
.oliwa-contact-form .wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.oliwa-contact-form .wpcf7 .wpcf7-acceptance label {
	align-items: flex-start;
	color: var(--text-body);
	display: flex;
	font-size: var(--text-sm);
	font-weight: var(--weight-regular);
	gap: var(--space-3);
	letter-spacing: 0;
	line-height: var(--leading-normal);
	text-transform: none;
}

.oliwa-contact-form .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	accent-color: var(--wp--preset--color--primary);
	flex: none;
	height: var(--icon-md);
	margin-top: 3px;
	width: var(--icon-md);
}

/* -------------------------------------------------------------------------
   FAQ — trzy karty na cieniu
   ---------------------------------------------------------------------- */

/* Kolumny same się nie wyrównują — karta ma wypełnić kolumnę na całą wysokość,
   inaczej trzy różnej długości odpowiedzi dają trzy różne wysokości kart. */
.oliwa-faq-grid > .wp-block-column {
	display: flex;
}

.oliwa-faq-grid > .wp-block-column > .oliwa-faq-card {
	flex: 1;
}

.oliwa-faq-card {
	box-shadow: var(--shadow-card);
}

.oliwa-faq-card::before {
	color: var(--text-accent-deep);
	margin-bottom: var(--space-3);
}

.oliwa-faq-card h3 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--weight-light);
	line-height: var(--leading-snug);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Mobile — ikona wraca do góry wiersza, gdy wartość łamie się na dwie linie
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.oliwa-contact-row {
		align-items: flex-start;
	}
}