/* ============================================================
   Soleo — Layout (container + header + footer)
   Migrated from D:/laragon/www/soleo-dev/src/scss/layout/ (plain CSS).
   ============================================================ */

@layer layout {
	/* === Container === */
	.container {
		width: 100%;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--container-pad);
	}
	.container--wide { max-width: var(--container-wide); }
	.container--full { max-width: none; }

	.section {
		padding-block: clamp(var(--space-2xl), 6vw, var(--space-5xl));
	}

	/* === Site header === */
	/* Base variant — solidny brand-blue background, dla podstron bez full-bleed hero. */
	.site-header {
		width: 100%;
		background: var(--color-brand-blue);
		color: var(--color-surface);
	}

	/* Overlay variant — leży na hero, transparent BG, białe ikony i tekst. */
	.site-header--overlay {
		position: absolute;
		top: 0;
		inset-inline: 0;
		z-index: 10;
		background: transparent;
		color: var(--color-surface);
	}

	/* Editor canvas: pokaż overlay z brand-blue BG żeby był widoczny w block editorze.
	   W canvas nie ma realnego hero pod nim, więc transparent = invisible. */
	.block-editor-iframe__body .site-header--overlay,
	.editor-styles-wrapper .site-header--overlay {
		position: relative;
		background: var(--color-brand-blue);
	}

	.site-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-xl);
		width: 100%;
		max-width: var(--container-wide);
		margin-inline: auto;
		padding: 0.625rem var(--container-pad);
	}
	@media (min-width: 75rem) {
		.site-header__inner {
			display: grid;
			grid-template-columns: auto 1fr auto;
			padding: 1.25rem var(--container-pad);
		}
	}

	.site-header__logo {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
	}
	.site-header__logo img,
	.site-header__logo svg {
		height: max(2.75rem, 4.58vw);
		width: auto;
	}

	.site-nav { display: none; }
	@media (min-width: 75rem) { .site-nav { display: block; } }

	.site-nav__list {
		display: flex;
		gap: max(2rem, 3.125vw);
		justify-content: center;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.site-nav__link {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.625rem;
		text-decoration: none;
		color: currentColor;
		font-family: var(--font-body);
		font-weight: var(--fw-bold);
		font-size: clamp(1rem, 0.94rem + 0.26vw, 1.25rem);
		line-height: var(--lh-normal);
		font-feature-settings: "liga" off;
		text-align: center;
		transition:
			color var(--duration-fast) var(--ease-out),
			text-shadow var(--duration-fast) var(--ease-out);
	}
	.site-nav__link:hover {
		color: var(--color-brand-red);
		/* sticker-halo(4px, white, 1px) — pełne 48 punktów (32 outer ring r=4 + 16 inner r=2)
		   wokół tekstu, identyczne z soleo-dev/src/scss/abstracts/_mixins.scss output. */
		text-shadow:
			4px 0px 1px var(--color-surface),3.9231411216px 0.7803612881px 1px var(--color-surface),3.69551813px 1.5307337295px 1px var(--color-surface),3.3258784492px 2.2222809321px 1px var(--color-surface),2.8284271247px 2.8284271247px 1px var(--color-surface),2.2222809321px 3.3258784492px 1px var(--color-surface),1.5307337295px 3.69551813px 1px var(--color-surface),0.7803612881px 3.9231411216px 1px var(--color-surface),0px 4px 1px var(--color-surface),-0.7803612881px 3.9231411216px 1px var(--color-surface),-1.5307337295px 3.69551813px 1px var(--color-surface),-2.2222809321px 3.3258784492px 1px var(--color-surface),-2.8284271247px 2.8284271247px 1px var(--color-surface),-3.3258784492px 2.2222809321px 1px var(--color-surface),-3.69551813px 1.5307337295px 1px var(--color-surface),-3.9231411216px 0.7803612881px 1px var(--color-surface),-4px 0px 1px var(--color-surface),-3.9231411216px -0.7803612881px 1px var(--color-surface),-3.69551813px -1.5307337295px 1px var(--color-surface),-3.3258784492px -2.2222809321px 1px var(--color-surface),-2.8284271247px -2.8284271247px 1px var(--color-surface),-2.2222809321px -3.3258784492px 1px var(--color-surface),-1.5307337295px -3.69551813px 1px var(--color-surface),-0.7803612881px -3.9231411216px 1px var(--color-surface),0px -4px 1px var(--color-surface),0.7803612881px -3.9231411216px 1px var(--color-surface),1.5307337295px -3.69551813px 1px var(--color-surface),2.2222809321px -3.3258784492px 1px var(--color-surface),2.8284271247px -2.8284271247px 1px var(--color-surface),3.3258784492px -2.2222809321px 1px var(--color-surface),3.69551813px -1.5307337295px 1px var(--color-surface),3.9231411216px -0.7803612881px 1px var(--color-surface),2px 0px 1px var(--color-surface),1.847759065px 0.7653668647px 1px var(--color-surface),1.4142135624px 1.4142135624px 1px var(--color-surface),0.7653668647px 1.847759065px 1px var(--color-surface),0px 2px 1px var(--color-surface),-0.7653668647px 1.847759065px 1px var(--color-surface),-1.4142135624px 1.4142135624px 1px var(--color-surface),-1.847759065px 0.7653668647px 1px var(--color-surface),-2px 0px 1px var(--color-surface),-1.847759065px -0.7653668647px 1px var(--color-surface),-1.4142135624px -1.4142135624px 1px var(--color-surface),-0.7653668647px -1.847759065px 1px var(--color-surface),0px -2px 1px var(--color-surface),0.7653668647px -1.847759065px 1px var(--color-surface),1.4142135624px -1.4142135624px 1px var(--color-surface),1.847759065px -0.7653668647px 1px var(--color-surface);
	}

	.site-nav__icon {
		width: max(1.75rem, 2.08vw);
		height: max(1.75rem, 2.08vw);
		color: var(--color-surface);
	}

	.site-header__meta {
		display: flex;
		align-items: center;
		gap: max(1rem, 1.25vw);
	}

	/* === Site footer === */
	.site-footer {
		background: var(--color-brand-red-alt);
		color: var(--color-surface);
		padding-block: clamp(2rem, 1.28rem + 3.09vw, 3.75rem);
	}

	.site-footer__inner {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		align-items: center;
		width: 100%;
		max-width: var(--container-wide);
		margin-inline: auto;
		padding-inline: var(--container-pad);
		text-align: center;
	}
	@media (min-width: 48rem) {
		.site-footer__inner {
			align-items: flex-end;
			text-align: initial;
		}
	}

	.site-footer__top {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-xl);
		width: 100%;
		padding-bottom: clamp(2rem, 1.28rem + 3.09vw, 3.75rem);
	}
	@media (min-width: 48rem) {
		.site-footer__top {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}

	.site-footer__logo {
		display: inline-flex;
		align-items: center;
		flex-shrink: 0;
	}
	.site-footer__logo img,
	.site-footer__logo svg {
		width: 13.75rem;
		height: auto;
	}
	@media (min-width: 48rem) {
		.site-footer__logo img,
		.site-footer__logo svg {
			width: auto;
			height: clamp(2.75rem, 1.61rem + 4.86vw, 5.5rem);
		}
	}

	.site-footer__primary ul {
		display: flex;
		flex-wrap: wrap;
		column-gap: clamp(2rem, -0.28rem + 9.72vw, 7.5rem);
		row-gap: 1.25rem;
		list-style: none;
		padding: 0;
		margin: 0;
		justify-content: center;
	}
	@media (min-width: 48rem) {
		.site-footer__primary ul { justify-content: flex-end; }
	}

	.site-footer__primary a {
		color: currentColor;
		text-decoration: none;
		font-family: var(--font-body);
		font-weight: var(--fw-extrabold);
		font-size: clamp(1.375rem, 1.22rem + 0.65vw, 2rem);
		line-height: var(--lh-normal);
		transition: opacity var(--duration-fast) var(--ease-out);
	}
	.site-footer__primary a:hover { opacity: 0.75; }

	.site-footer__middle {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		width: 100%;
	}
	@media (min-width: 48rem) {
		.site-footer__middle {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-lg);
		}
	}

	.site-footer__secondary ul {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.25rem, 0.73rem + 2.21vw, 2.5rem);
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.site-footer__secondary a {
		color: currentColor;
		text-decoration: none;
		font-family: var(--font-body);
		font-weight: var(--fw-medium);
		font-size: 1rem;
		line-height: var(--lh-normal);
		transition: opacity var(--duration-fast) var(--ease-out);
	}
	.site-footer__secondary a:hover { opacity: 0.75; }

	.site-footer__bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.25rem;
		width: 100%;
		padding-top: 1.25rem;
		border-top: 1px solid rgb(255 255 255 / 0.4);
	}
	@media (min-width: 48rem) {
		.site-footer__bottom {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-sm);
		}
	}

	.site-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.25rem, 0.73rem + 2.21vw, 2.5rem);
		list-style: none;
		padding: 0;
		margin: 0;
		justify-content: center;
	}
	@media (min-width: 48rem) {
		.site-footer__legal { justify-content: flex-start; }
	}

	.site-footer__legal a {
		color: currentColor;
		text-decoration: none;
		font-family: var(--font-body);
		font-weight: var(--fw-medium);
		font-size: 0.75rem;
		line-height: normal;
	}
	.site-footer__legal a:hover { text-decoration: underline; }

	.site-footer__copy {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--fw-medium);
		font-size: 0.75rem;
		line-height: normal;
		color: rgb(255 255 255 / 0.8);
	}
}

/* ============================================================
   Out-of-layer overrides — wymuszają currentColor dla linków
   w site-header / site-footer, wbrew theme.json globalnej regule
   styles.elements.link.color = brand-blue (która ląduje w unlayered
   i wygrywa z naszym @layer layout). Bez tego linki w nav/footer
   są niebieskie zamiast white.

   Selektor wyklucza .wp-element-button (analogicznie do WP wzorca)
   żeby button bloki zachowały własny styling.
   ============================================================ */
.site-header a:where(:not(.wp-element-button)),
.site-footer a:where(:not(.wp-element-button)),
.mobile-menu a:where(:not(.wp-element-button)) {
	color: currentColor;
}
.site-header a:where(:not(.wp-element-button)):hover,
.site-footer a:where(:not(.wp-element-button)):hover,
.mobile-menu a:where(:not(.wp-element-button)):hover {
	color: currentColor;
}
/* Nav hover red — wymaga .site-header parent dla wyższej specificity (0,3,0)
   niż general `.site-header a:hover` (0,2,1) zdefiniowany wyżej. */
.site-header .site-nav__link:hover { color: var(--color-brand-red); }
.site-footer__primary a:hover,
.site-footer__secondary a:hover { opacity: 0.75; }
.site-footer__legal a:hover { text-decoration: underline; }
.mobile-menu .mobile-menu__nav a:hover { color: var(--color-brand-red); }