/*
 * Blok "Kontakt — ikony i CTA" (fotolady/contact-icons, render:
 * inc/blocks/class-fotolady-contact-icons-block.php) — wspólny komponent
 * nagłówka, panelu menu mobilnego i stopki: ciemne, kwadratowe przyciski
 * telefonu i social media + opcjonalny przycisk CTA.
 *
 * Tu tylko sam wygląd komponentu. Rozmieszczenie w konkretnym miejscu:
 * nagłówek — header-icons.css, panel menu — navigation.css, stopka —
 * footer.css.
 */
:root .fotolady-contact-icons {
	/* Kolory i rozmiar ustawia się w panelu bocznym bloku (Kolory ikon /
	 * Wygląd) — trafiają tu jako zmienne na wrapperze; bez nich zostają
	 * domyślne kolory motywu. */
	--fotolady-icon-size: 34px;
	--fotolady-icon-glyph: 16px;
	display: flex;
	align-items: center;
	gap: 5px;
}

:root .fotolady-contact-icons--small {
	--fotolady-icon-size: 28px;
	--fotolady-icon-glyph: 13px;
}

:root .fotolady-contact-icons--large {
	--fotolady-icon-size: 40px;
	--fotolady-icon-glyph: 19px;
}

:root .fotolady-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: var(--fotolady-icon-size);
	height: var(--fotolady-icon-size);
	border-radius: 8px;
	background-color: var(--fotolady-icon-bg, var(--wp--preset--color--background-dark));
	color: var(--fotolady-icon-color, var(--wp--preset--color--paper));
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

:root .fotolady-icon-btn svg {
	width: var(--fotolady-icon-glyph);
	height: var(--fotolady-icon-glyph);
	fill: currentColor;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

/* Loga FB/YT to cienkie obrysowe kształty (dużo pustej przestrzeni w
 * środku) — przy tym samym rozmiarze co gęsto wypełniona słuchawka
 * telefonu wizualnie wyglądają mniejsze/drobniejsze, wyrównujemy optycznie,
 * nie liczbowo. */
:root .fotolady-icon-btn--facebook svg,
:root .fotolady-icon-btn--youtube svg,
:root .fotolady-icon-btn--instagram svg {
	width: calc(var(--fotolady-icon-glyph) * 1.2);
	height: calc(var(--fotolady-icon-glyph) * 1.2);
}

/* Telefon z numerem obok ikony (opcja "Pokaż numer obok ikony"). */
:root .fotolady-icon-btn.has-text {
	width: auto;
	padding: 0 0.875rem 0 0.75rem;
}

:root .fotolady-icon-btn__text {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
}

:root .fotolady-icon-btn:hover,
:root .fotolady-icon-btn:focus-visible {
	background-color: var(--fotolady-icon-hover-bg, var(--wp--preset--color--accent));
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -10px rgba(255, 90, 54, 0.55);
}

:root .fotolady-icon-btn:hover svg,
:root .fotolady-icon-btn:focus-visible svg {
	transform: scale(1.12);
}

/* Przycisk CTA (tekst i link z Dostosuj → Nagłówek FotoLady) — na końcu
 * grupy ikon, lekko od nich odsunięty. */
:root .fotolady-cta {
	display: inline-flex;
	align-items: center;
	height: var(--fotolady-icon-size);
	margin-left: 0.5rem;
	padding: 0 1.125rem;
	border-radius: 8px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

:root .fotolady-cta:hover,
:root .fotolady-cta:focus-visible {
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--white);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -10px rgba(181, 96, 63, 0.6);
}

@media (prefers-reduced-motion: reduce) {
	:root .fotolady-icon-btn,
	:root .fotolady-icon-btn svg,
	:root .fotolady-cta {
		transition: none;
	}

	:root .fotolady-icon-btn:hover,
	:root .fotolady-icon-btn:focus-visible,
	:root .fotolady-cta:hover,
	:root .fotolady-cta:focus-visible {
		transform: none;
	}
}