/* ============================================================
   Soleo — Components (button, social, burger, mobile-menu, lang-switch, text-styles)
   Migrated from D:/laragon/www/soleo-dev/src/scss/components/ (plain CSS).
   Section-specific komponenty (media-text, card, product-tile, decoration) idą per-block.
   ============================================================ */

@layer components {
	/* ===== Buttons ===== */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		height: 3.5rem;
		padding-inline: clamp(2rem, 0.8rem + 4vw, 4rem);
		border-radius: var(--radius-pill);
		font-family: var(--font-body);
		font-weight: var(--fw-semibold);
		font-size: clamp(1.125rem, 0.94rem + 0.39vw, 1.25rem);
		text-decoration: none;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		transition:
			background-color 0.3s ease-in-out,
			color 0.3s ease-in-out;
	}
	@media (max-width: 47.99rem) {
		.btn:not(.btn--ghost) {
			display: flex;
			width: 100%;
			padding-inline: 1.5rem;
		}
	}
	.btn--primary {
		background: var(--color-brand-blue);
		color: var(--color-surface);
	}
	.btn--primary:hover { background: var(--color-brand-red); }

	.btn--secondary {
		background: var(--color-brand-green-dark);
		color: var(--color-surface);
	}
	.btn--secondary:hover { background: var(--color-brand-green-darker); }

	.btn--tertiary {
		background: var(--color-surface-alt);
		color: var(--color-brand-blue);
	}
	.btn--tertiary:hover { background: var(--color-border); }

	.btn--ghost {
		background: transparent;
		color: var(--color-brand-blue);
		height: auto;
		padding-inline: 0;
	}
	.btn--ghost:hover { color: var(--color-brand-blue-dark); }

	.btn--large {
		height: 4rem;
		padding-inline: 2.5rem;
		font-size: 1.125rem;
	}

	/* ===== Social list ===== */
	.social-list {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.social-list li { display: flex; align-items: center; }

	.social-list__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: var(--radius-md);
		color: currentColor;
		transition:
			background-color var(--duration-fast) var(--ease-out),
			transform var(--duration-fast) var(--ease-out),
			opacity var(--duration-fast) var(--ease-out);
	}
	.social-list__link:hover {
		background: color-mix(in oklab, currentColor 18%, transparent);
		transform: translateY(-1px);
	}
	.social-list__link svg { width: 1.375rem; height: 1.375rem; }

	.social-list--footer,
	.social-list--header {
		gap: clamp(1rem, 0.79rem + 0.88vw, 1.5rem);
	}

	.social-list--header { display: none; }
	@media (min-width: 75rem) { .social-list--header { display: flex; } }

	.social-list--footer .social-list__link,
	.social-list--header .social-list__link {
		width: 2rem;
		height: 2rem;
		border-radius: 0;
	}
	.social-list--footer .social-list__link:hover,
	.social-list--header .social-list__link:hover {
		background: transparent;
		transform: none;
		opacity: 0.75;
	}
	.social-list--footer .social-list__link svg,
	.social-list--header .social-list__link svg {
		width: 100%;
		height: 100%;
	}

	/* ===== Burger ===== */
	.burger {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		width: auto;
		min-height: 2.5rem;
		padding: 0.25rem 0.5rem;
		color: currentColor;
		background: transparent;
		border: none;
		cursor: pointer;
		transition: opacity var(--duration-fast) var(--ease-out);
	}
	@media (min-width: 75rem) { .burger { display: none; } }
	.burger:hover { opacity: 0.75; }

	.burger__bars {
		position: relative;
		width: 1.75rem;
		height: 1.125rem;
		display: inline-block;
	}
	.burger__bars::before,
	.burger__bars::after,
	.burger__bars span {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		transition: transform var(--duration-fast) var(--ease-out);
	}
	.burger__bars::before { top: 0; }
	.burger__bars span    { top: 50%; transform: translateY(-50%); }
	.burger__bars::after  { bottom: 0; }

	.burger__label {
		font-family: var(--font-body);
		font-weight: var(--fw-bold);
		font-size: clamp(0.875rem, 0.80rem + 0.32vw, 1.1875rem);
		line-height: 1;
		font-feature-settings: "liga" off;
	}

	/* ===== Mobile offcanvas + overlay ===== */
	.nav-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		z-index: 60;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s 0.25s ease;
	}
	.nav-overlay.is-open {
		opacity: 1;
		pointer-events: auto;
		transition: opacity 0.25s ease;
	}

	.mobile-menu { display: none; }

	@media (max-width: 74.99rem) {
		.mobile-menu {
			position: fixed;
			top: 0.75rem;
			right: 0.75rem;
			bottom: 0.75rem;
			width: min(22rem, calc(100vw - 1.5rem));
			background: var(--color-surface);
			color: var(--color-ink);
			border-radius: var(--radius-xl);
			box-shadow: var(--shadow-lg);
			z-index: 70;
			display: flex;
			flex-direction: column;
			padding: 1.25rem 1.5rem 1.5rem;
			overflow-y: auto;
			transform: translateX(calc(100% + 2rem));
			visibility: hidden;
			transition:
				transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
				visibility 0s 0.3s;
		}
		.mobile-menu.is-open {
			transform: translateX(0);
			visibility: visible;
			transition:
				transform 0.35s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
				visibility 0s 0.15s;
		}
		.mobile-menu__close {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.5rem;
			height: 2.5rem;
			background: var(--color-surface-alt);
			border: none;
			border-radius: 999px;
			cursor: pointer;
			color: var(--color-ink);
			align-self: flex-end;
			flex-shrink: 0;
			margin-bottom: 1.25rem;
			transition: background-color var(--duration-fast) var(--ease-out);
		}
		.mobile-menu__close:hover {
			background: var(--color-brand-blue);
			color: var(--color-surface);
		}
		.mobile-menu__close svg { width: 1.25rem; height: 1.25rem; }

		.mobile-menu__nav { display: flex; flex-direction: column; }
		.mobile-menu__nav a {
			color: var(--color-ink);
			font-family: var(--font-body);
			font-size: 1.125rem;
			font-weight: var(--fw-bold);
			padding: 1rem 0;
			text-decoration: none;
			border-bottom: 1px solid var(--color-border);
			transition: color var(--duration-fast) var(--ease-out);
		}
		.mobile-menu__nav a:hover,
		.mobile-menu__nav a:focus-visible { color: var(--color-brand-blue); }
		.mobile-menu__nav a:last-child { border-bottom: none; }

		.mobile-menu__social {
			list-style: none;
			padding: 0;
			margin: auto 0 0;
			display: flex;
			gap: 1rem;
			padding-top: 1.5rem;
			justify-content: center;
		}
		.mobile-menu__social .social-list__link {
			color: var(--color-ink);
			width: 2.25rem;
			height: 2.25rem;
		}
		.mobile-menu__social .social-list__link svg { width: 100%; height: 100%; }
		.mobile-menu__social .social-list__link:hover { color: var(--color-brand-blue); }

		body.nav-open { overflow: hidden; }
	}

	/* ===== Lang switch ===== */
	.lang-switch {
		position: relative;
		display: inline-flex;
		align-items: center;
	}
	.lang-switch__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: var(--space-2xs) var(--space-xs);
		border-radius: var(--radius-md);
		color: currentColor;
		background: transparent;
		border: none;
		cursor: pointer;
		transition: background-color var(--duration-fast) var(--ease-out);
	}
	.lang-switch__toggle:hover,
	.lang-switch__toggle[aria-expanded="true"] {
		background: color-mix(in oklab, currentColor 18%, transparent);
	}
	.lang-switch__flag {
		display: block;
		width: max(1.75rem, 2.08vw);
		height: max(1.75rem, 2.08vw);
		flex-shrink: 0;
	}
	.lang-switch__chevron {
		transition: transform var(--duration-fast) var(--ease-out);
	}
	.lang-switch__toggle[aria-expanded="true"] .lang-switch__chevron {
		transform: rotate(180deg);
	}
	.lang-switch__menu {
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		min-width: 8rem;
		margin: 0;
		padding: 0.5rem;
		list-style: none;
		background: var(--color-surface);
		color: var(--color-ink);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);
		z-index: 30;
	}
	.lang-switch__menu[hidden] { display: none; }

	.lang-switch__option {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.5rem 0.75rem;
		border-radius: var(--radius-sm);
		color: var(--color-ink);
		font-family: var(--font-body);
		font-weight: var(--fw-semibold);
		font-size: 1rem;
		text-decoration: none;
		transition: background-color var(--duration-fast) var(--ease-out);
	}
	.lang-switch__option.is-active { background: var(--color-surface-alt); }
	.lang-switch__option:hover,
	.lang-switch__option:focus-visible { background: var(--color-border); }
	.lang-switch__option .lang-switch__flag { width: 1.5rem; height: 1.5rem; }

	/* ===== flexisnap/language-switcher (universal plugin block) =====
	   Plugin emituje neutralny markup z data-lang="<slug>". Theme dostarcza
	   flagi przez background-image + ::before pseudoelement. */
	.flexisnap-lang-switch {
		position: relative;
		display: inline-flex;
		align-items: center;
	}
	.flexisnap-lang-switch__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: var(--space-2xs) var(--space-xs);
		border-radius: var(--radius-md);
		color: currentColor;
		background: transparent;
		border: none;
		cursor: pointer;
		font: inherit;
		transition: background-color var(--duration-fast) var(--ease-out);
	}
	.flexisnap-lang-switch__toggle:hover,
	.flexisnap-lang-switch__toggle[aria-expanded="true"] {
		background: color-mix(in oklab, currentColor 18%, transparent);
	}
	.flexisnap-lang-switch__current,
	.flexisnap-lang-switch__option {
		display: inline-flex;
		align-items: center;
		gap: 0.625rem;
	}
	.flexisnap-lang-switch__current::before,
	.flexisnap-lang-switch__option::before {
		content: "";
		display: block;
		width: max(1.75rem, 2.08vw);
		height: max(1.75rem, 2.08vw);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		flex-shrink: 0;
	}
	.flexisnap-lang-switch__option::before {
		width: 1.5rem;
		height: 1.5rem;
	}
	.flexisnap-lang-switch__current[data-lang="en"]::before,
	.flexisnap-lang-switch__option[data-lang="en"]::before {
		background-image: url("../images/flag-en.svg");
	}
	.flexisnap-lang-switch__current[data-lang="pl"]::before,
	.flexisnap-lang-switch__option[data-lang="pl"]::before {
		background-image: url("../images/flag-pl.svg");
	}
	.flexisnap-lang-switch__current[data-lang="it"]::before,
	.flexisnap-lang-switch__option[data-lang="it"]::before {
		background-image: url("../images/flag-it.svg");
	}
	.flexisnap-lang-switch__label {
		display: none; /* flag-only widget; label ukryty (a11y zachowany w aria-label) */
	}
	.flexisnap-lang-switch__chevron {
		width: 12px;
		height: 12px;
		display: inline-block;
		transition: transform var(--duration-fast) var(--ease-out);
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
		background-repeat: no-repeat;
		background-position: center;
	}
	.flexisnap-lang-switch__toggle[aria-expanded="true"] .flexisnap-lang-switch__chevron {
		transform: rotate(180deg);
	}
	.flexisnap-lang-switch__menu {
		position: absolute;
		top: calc(100% + 0.5rem);
		right: 0;
		min-width: 8rem;
		margin: 0;
		padding: 0.5rem;
		list-style: none;
		background: var(--color-surface);
		color: var(--color-ink);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);
		z-index: 30;
	}
	.flexisnap-lang-switch__menu[hidden] { display: none; }
	.flexisnap-lang-switch__option {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		padding: 0.5rem 0.75rem;
		border-radius: var(--radius-sm);
		color: var(--color-ink);
		font-family: var(--font-body);
		font-weight: var(--fw-semibold);
		font-size: 1rem;
		text-decoration: none;
		transition: background-color var(--duration-fast) var(--ease-out);
	}
	.flexisnap-lang-switch__option.is-active { background: var(--color-surface-alt); }
	.flexisnap-lang-switch__option:hover,
	.flexisnap-lang-switch__option:focus-visible { background: var(--color-border); }
	.flexisnap-lang-switch--floating {
		position: fixed;
		bottom: var(--space-md);
		left: var(--space-md);
		z-index: 40;
	}

	/* ===== Text styles container ===== */
	.text-styles h1,
	.text-styles h2 {
		position: relative;
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--fw-regular);
		font-size: var(--fs-h2);
		line-height: var(--lh-display);
		color: var(--color-ink);
		text-transform: uppercase;
		letter-spacing: 0;
	}
	.text-styles h3 {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--fw-extrabold);
		font-size: var(--fs-h3);
		line-height: var(--lh-normal);
		color: var(--color-text);
		text-transform: none;
	}
	.text-styles h4 {
		margin: 0;
		font-family: var(--font-body);
		font-weight: var(--fw-bold);
		font-size: var(--fs-h4);
		line-height: var(--lh-normal);
		color: var(--color-text);
	}
	.text-styles p {
		margin: 0;
		font-family: var(--font-body);
		font-size: var(--fs-text);
		font-weight: var(--fw-medium);
		line-height: var(--lh-normal);
		color: var(--color-text);
		max-width: 65ch;
	}
	.text-styles .ozdobnik {
		vertical-align: middle;
		margin-left: 0.4em;
		margin-bottom: 0.5em;
	}
	.text-styles p + :is(.btn, :has(> .btn)) {
		margin-top: 2rem;
	}
}