/*
 * INB Developer — layout.css
 * Właściciel: agent A (Layout & Design System), sprint HOME v1.
 *
 * Header (template part parts/header.html), nawigacja (desktop + overlay mobile),
 * stopka (parts/footer.html) i logo inwestycji (HOME v2: SVG zamiast znaku słownego).
 * Selektory zakotwiczone w .inb-header / .inb-footer / .inb-logo.
 * Kolory wyłącznie przez tokeny theme.json.
 *
 * Spis:
 *  1. Logo (.inb-logo) — REUSABLE CORE (plik logo = konfiguracja projektu)
 *  2. Header: sticky, pasek, przycisk telefonu (z ikoną słuchawki)
 *  3. Nawigacja: desktop
 *  4. Nawigacja: overlay mobile
 *  4a. Zgodność ze sticky wtyczki INB Settings (.inb-sticky-fixed)
 *  5. Stopka
 */

/* ---------------------------------------------------------------------
 * 1. Logo (wzorzec patterns/brand-logo.php)
 * Oryginalny SVG (viewBox 1484.5 × 339.7). Wysokość z CSS, szerokość z proporcji
 * pliku — brak przesunięć układu przy ładowaniu. Logo jest linkiem do strony głównej;
 * nazwę dostępną daje tekst alternatywny obrazu.
 * ------------------------------------------------------------------- */

.inb-logo {
	--inb-logo-height: 2.75rem;
	margin: 0;
	line-height: 0;
}

.inb-logo a {
	display: inline-block;
	border-radius: var(--wp--preset--border-radius--small);
	transition: opacity var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.inb-logo a:hover {
	opacity: 0.86;
}

/* Szerokość jawna (z wysokości i proporcji), wysokość z aspect-ratio: edytor bloków wstawia
   do obrazu styl inline height:auto, a SVG bez wymiarów zapadłby się wtedy do zera. */
.inb-logo img {
	display: block;
	width: calc(var(--inb-logo-height) * 1484.5 / 339.7);
	max-width: none;
	height: auto;
	aspect-ratio: 1484.5 / 339.7;
}

/* ---------------------------------------------------------------------
 * 2. Header
 * Sticky stosujemy na elemencie <header> template partu (bezpośrednie dziecko
 * .wp-site-blocks), bo tylko on ma wysokość całej strony do „przyklejenia”.
 * ------------------------------------------------------------------- */

.wp-site-blocks > header:has(> .inb-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/*
 * Wysokość nagłówka jest stała (zmiana wysokości elementu sticky przesuwałaby całą stronę
 * i liczyła się do CLS). Po przewinięciu zmienia się tylko cień. Wysokość mierzy site.js
 * (--inb-header-height) dla przyklejonego renderu „Atutów” i przesunięcia kotwic.
 */
.inb-header {
	padding-block: 0.625rem;
	transition: box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.inb-header.is-scrolled {
	box-shadow: 0 1px 0 var(--wp--custom--color--rule-on-dark),
		0 0.75rem 2rem -1rem color-mix(in srgb, var(--wp--preset--color--primary-deep) 70%, transparent);
}

.inb-header .inb-header__bar {
	min-height: 3.25rem;
	gap: var(--wp--preset--spacing--40);
}

.inb-header .inb-logo {
	flex: 0 0 auto;
}

.inb-header .inb-header__nav {
	flex: 1 1 auto;
	justify-content: flex-end;
}

.inb-header .inb-header__actions {
	flex: 0 0 auto;
	margin: 0;
}

.inb-header .inb-header__actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	box-sizing: border-box;
	padding: 0.5rem 1.15rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--bold);
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
	gap: 0.45em;
}

/*
 * Ikona słuchawki przed tekstem (ten sam symbol co w pasku mobilnym INB Settings).
 * Pseudo-element ::after, bo ::before przycisku to kierunkowe wypełnienie (base.css);
 * order: -1 stawia go jako pierwszy element flex, odstęp daje gap przycisku.
 * Maska SVG + currentColor: kolor zawsze jak tekst przycisku. Pusty content —
 * czytniki ekranu ikonę pomijają (nazwą linku zostaje „Zadzwoń” / numer).
 */
.inb-header .inb-header__actions .wp-block-button__link[href^="tel:"]::after {
	content: "";
	order: -1;
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79a15.53 15.53 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.24 1.02l-2.21 2.21z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79a15.53 15.53 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.56.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.56 1 1 0 0 1-.24 1.02l-2.21 2.21z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Strzałki linków przesuwają się przy hover/fokusie (base.css) — słuchawka stoi w miejscu. */
.inb-header .inb-header__actions .wp-block-button__link[href^="tel:"]:is(:hover, :focus-visible)::after {
	transform: none;
}

/* Desktop: sam numer (czytelny jak na billboardzie); słowo „Zadzwoń” ukryte wizualnie. */
.inb-header .inb-header__phone-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Wąsko (tablet/mobile): krótkie „Zadzwoń”, numer tylko dla czytników. */
@media (max-width: 1080px) {
	.inb-header .inb-header__phone-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}

	/* Węższy margines wewnętrzny kompensuje szerokość ikony (menu desktop od 901 px nie łamie się). */
	.inb-header .inb-header__actions .wp-block-button__link {
		padding-inline: 1rem;
	}

	.inb-header .inb-header__phone-number {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------
 * 3. Nawigacja — desktop
 * ------------------------------------------------------------------- */

.inb-header .inb-header__nav .wp-block-navigation__container {
	gap: clamp(1rem, 0.2rem + 1.6vw, 2.25rem);
}

.inb-header .inb-header__nav .wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.9375rem;
	font-weight: var(--wp--custom--font-weight--regular);
	letter-spacing: 0.01em;
	color: var(--wp--custom--color--on-dark-muted);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.inb-header .inb-header__nav .wp-block-navigation-item__content:hover,
.inb-header .inb-header__nav .wp-block-navigation-item__content:focus-visible,
.inb-header .inb-header__nav .wp-block-navigation-item__content.is-active {
	color: var(--wp--custom--color--on-dark);
}

/*
 * Piaskowa kreska pod linkiem: wjeżdża od lewej przy hover/fokusie i zjeżdża w prawo
 * po zjechaniu kursorem. Na aktywnej sekcji (site.js: .is-active + aria-current) zostaje.
 */
.inb-header .inb-header__nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0.55rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--custom--color--accent-on-dark);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing-out);
}

.inb-header .inb-header__nav .wp-block-navigation-item__content:hover::after,
.inb-header .inb-header__nav .wp-block-navigation-item__content:focus-visible::after,
.inb-header .inb-header__nav .wp-block-navigation-item__content.is-active::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.inb-header .inb-header__nav .wp-block-navigation-item__content:focus-visible {
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--small);
}

/* Między 600 a 900 px pełne menu nie mieści się obok znaku i przycisku —
   przechodzimy na overlay wcześniej niż domyślne 600 px z core. */
@media (max-width: 900px) {
	.inb-header .inb-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.inb-header .inb-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Kolejność: logo | telefon | menu (przycisk menu przy prawej krawędzi, pod kciukiem). */
	.inb-header .inb-logo {
		margin-inline-end: auto;
	}

	.inb-header .inb-header__nav {
		order: 3;
		flex: 0 0 auto;
	}
}

/* Przycisk otwierania menu: cel 44 px. */
.inb-header .inb-header__nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	color: inherit;
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}

/* ---------------------------------------------------------------------
 * 4. Nawigacja — overlay mobile
 * Kolory overlay z atrybutów bloku (primary-deep / surface).
 * ------------------------------------------------------------------- */

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	top: 0.75rem;
	right: max(1rem, var(--wp--style--root--padding-right, 1rem));
	color: inherit;
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
	align-items: stretch;
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	align-items: stretch;
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-block-end: 1px solid var(--wp--custom--color--rule-on-dark);
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	min-height: 3.5rem;
	padding-block: 0.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--font-weight--light);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--custom--color--on-dark);
	transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
		padding var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.is-active {
	color: var(--wp--custom--color--accent-on-dark);
}

@media (hover: hover) {
	.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
		padding-inline-start: 0.5rem;
	}
}

/* Wejście pozycji menu po otwarciu nakładki (kolejno, krótko). */
@media (prefers-reduced-motion: no-preference) {
	.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		animation: inb-menu-item 520ms var(--wp--custom--motion--easing-out) both;
	}

	.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 40ms; }
	.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 80ms; }
	.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 120ms; }
	.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 160ms; }
	.inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 200ms; }
}

@keyframes inb-menu-item {
	from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
	to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
 * 4a. Zgodność ze sticky wtyczki INB Settings (współdzielona wtyczka INB)
 * Po przewinięciu wtyczka dokłada do <header> klasę .inb-sticky-fixed i inline
 * `.inb-sticky-fixed a, .inb-sticky-fixed li a { color: …czarny… !important }` (0,1,1).
 * Na ciemnym pasku .inb-header dawało to czarne linki. Przywracamy dokładnie te same
 * kolory co przed przewinięciem — tylko w nagłówku motywu i tylko w tym stanie;
 * !important jest tu konieczne, by wygrać z !important wtyczki (wyższa specyficzność).
 * Białe tło, które wtyczka nadaje <header>, w całości zakrywa .inb-header (te same wymiary).
 * ------------------------------------------------------------------- */

.inb-sticky-fixed .inb-header .inb-logo a {
	color: inherit !important;
}

.inb-sticky-fixed .inb-header .inb-header__nav .wp-block-navigation-item__content {
	color: var(--wp--custom--color--on-dark-muted) !important;
}

.inb-sticky-fixed .inb-header .inb-header__nav .wp-block-navigation-item__content:is(:hover, :focus-visible, .is-active) {
	color: var(--wp--custom--color--on-dark) !important;
}

.inb-sticky-fixed .inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--custom--color--on-dark) !important;
}

.inb-sticky-fixed .inb-header .inb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible, .is-active) {
	color: var(--wp--custom--color--accent-on-dark) !important;
}

/* Przycisk telefonu (styl inb-accent): tekst i ikona w kolorze tła paska we wszystkich stanach. */
.inb-sticky-fixed .inb-header .wp-block-button.is-style-inb-accent .wp-block-button__link {
	color: var(--wp--custom--color--surface-dark) !important;
}

/* Wąsko: niższe logo, żeby zmieścić „Zadzwoń” i przycisk menu. */
@media (max-width: 600px) {
	.inb-header .inb-logo {
		--inb-logo-height: 2.375rem;
	}
}

/* Ikona słuchawki poszerza przycisk o ok. 21 px — na wąskich ekranach odzyskujemy to z odstępów
   (pasek, wnętrze przycisku), żeby logo, telefon i menu mieściły się w pasku jak przed zmianą.
   Odstęp logo–telefon i tak wyznacza margin-inline-end: auto; zmienia się tylko odstęp telefon–menu. */
@media (max-width: 480px) {
	.inb-header .inb-header__bar {
		gap: var(--wp--preset--spacing--20);
	}
}

@media (max-width: 420px) {
	.inb-header .inb-logo {
		--inb-logo-height: 2.125rem;
	}

	.inb-header .inb-header__actions .wp-block-button__link {
		padding-inline: 0.625rem;
	}
}

/* ---------------------------------------------------------------------
 * 5. Stopka
 * Ciemna (primary-deep); cienka piaskowa linia u góry oddziela ją od ciemnej
 * sekcji CTA (primary).
 * ------------------------------------------------------------------- */

.inb-footer {
	border-block-start: 1px solid var(--wp--custom--color--rule-on-dark);
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.inb-footer .inb-footer__grid {
	gap: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--60);
}

.inb-footer .inb-footer__brand .inb-logo {
	--inb-logo-height: clamp(3.5rem, 2.75rem + 2vw, 4.75rem);
}

.inb-footer .inb-footer__tagline {
	margin-block-start: var(--wp--preset--spacing--50);
	max-width: 22ch;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: var(--wp--custom--font-weight--light);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	text-wrap: balance;
}

.inb-footer .inb-footer__tagline strong {
	font-weight: var(--wp--custom--font-weight--black);
}

.inb-footer .inb-footer__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: 0.08em;
	color: var(--wp--custom--color--accent-on-dark);
}

.inb-footer .inb-footer__contact > *,
.inb-footer .inb-footer__links > * {
	margin-block: 0;
}

.inb-footer .inb-footer__contact > .inb-footer__label,
.inb-footer .inb-footer__links > .inb-footer__label {
	margin-block-end: var(--wp--preset--spacing--40);
}

.inb-footer .inb-footer__contact > * + * {
	margin-block-start: 0.5rem;
}

.inb-footer .inb-footer__phone {
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--bold);
	font-variant-numeric: lining-nums tabular-nums;
}

.inb-footer .inb-footer__contact .inb-footer__address {
	margin-block: var(--wp--preset--spacing--30);
	line-height: 1.5;
}

.inb-footer .inb-footer__contact a,
.inb-footer .inb-footer__nav a {
	display: inline-block;
	padding-block: 0.6rem;
	margin-block: -0.6rem;
}

.inb-footer .inb-footer__nav {
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

/*
 * Linki tekstowe stopki (kontakt + „Na stronie”): bez podkreśleń. Stan aktywny = zmiana
 * koloru z białego (on-dark) na piaskowy akcent (accent-on-dark, ok. 6:1 na primary-deep).
 * Hover tylko na urządzeniach z kursorem; :active (dotyk) i :focus-visible wszędzie —
 * fokus dodatkowo z obrysem z base.css. Przejście koloru: duration-fast + easing motywu,
 * wyłączone przy prefers-reduced-motion.
 */
.inb-footer .inb-footer__contact a,
.inb-footer .inb-footer__nav a {
	color: var(--wp--custom--color--on-dark);
	text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
	.inb-footer .inb-footer__contact a,
	.inb-footer .inb-footer__nav a {
		transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
	}
}

.inb-footer .inb-footer__contact a:is(:focus-visible, :active),
.inb-footer .inb-footer__nav a:is(:focus-visible, :active) {
	color: var(--wp--custom--color--accent-on-dark);
	text-decoration: none;
}

@media (hover: hover) {
	.inb-footer .inb-footer__contact a:hover,
	.inb-footer .inb-footer__nav a:hover {
		color: var(--wp--custom--color--accent-on-dark);
		text-decoration: none;
	}
}

.inb-footer .inb-footer__bottom {
	padding-block-start: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
}

.inb-footer .inb-footer__bottom > p {
	margin: 0;
}

@media (max-width: 781px) {
	.inb-footer .inb-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}