/* ================ VARIABLES ================ */
:root {
	--primary: #F6BE3E;
	--secondary: #926f52;
	--muted-light: #F6BE3E;
	--muted-dark: #7f7b73;
	--white: #ffffff;
	--black: #111111;
	--border-radius: 10px;
	--transition: 0.3s ease-in-out;
}

/* ================ FONTS ================ */

* {
	font-family: poppins, sans-serif;
	font-weight: 300;
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "franklin-gothic-urw-cond", sans-serif !important;
}

/* ================ COLORS ================ */

.text-primary {
	color: var(--primary);
}

.text-secondary {
	color: var(--secondary);
}

.bg-primary {
	background-color: var(--primary);
}

.bg-secondary {
	background-color: var(--secondary);
}

.bg-muted-light {
	background-color: var(--muted-light);
}

.bg-muted-dark {
	background-color: var(--muted-dark);
}

/* ================ BUTTONS ================ */

button.ff-btn {
	text-transform: uppercase;
	width: 100% !important;
	background-color: var(--muted-light) !important;
	padding: 10px 25px 10px 25px;
	color: var(--black) !important;
	transition: var(--transition);
	border: 1px solid var(--muted-dark) !important;
	border-radius: var(--border-radius) !important;
	font-weight: 300 !important;
}

.btn-primary {
	text-transform: uppercase;
	background-color: var(--muted-light);
	padding: 10px 25px 10px 25px;
	color: var(--black) !important;
	transition: var(--transition);
	border: 1px solid var(--muted-dark);
	border-radius: var(--border-radius);
}

.btn-primary:hover {
	opacity: 0.5;
}

.btn-white {
	text-transform: uppercase;
	background-color: var(--white);
	padding: 10px 25px;
	color: var(--primary);
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.btn-white:hover {
	opacity: 0.5;
}

.btn-secondary {
	background-color: var(--secondary);
}

.btn-secondary:hover {
}

/* ================ LINKS ================ */

a {
	transition: var(--transition);
}

a:hover:not(:has(img)) {
	opacity: 0.5;
}

.link-header {
	text-transform: uppercase;
	color: var(--black);
	text-decoration: none;
	background-image: linear-gradient(var(--black), var(--black));
	background-size: 0% 0.1em;
	background-position-y: 100%;
	background-position-x: 100%;
	background-repeat: no-repeat;
	transition: background-size var(--transition);
}

.link-header:hover,
.link-header:focus,
.link-header:active {
	background-size: 100% 0.1em;
	background-position-x: 0%;
}

/* ================ CONTENT ================ */

.content-box p {
	text-align: justify;
}

.content-box h1 {
	font-size: 28px;
	margin-bottom: 15px;
}

.content-box h2 {
	font-size: 24px;
	margin-bottom: 12px;
	margin-top: 15px;
}

.content-box h3 {
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 15px;
}

.content-box h4 {
	font-size: 18px;
	margin-bottom: 8px;
}

.content-box h5 {
	font-size: 16px;
	margin-bottom: 6px;
}

.content-box h6 {
	font-size: 14px;
	margin-bottom: 4px;
}

.content-box ol,
.content-box ul {
	margin-bottom: 15px;
}

.content-box ol {
	list-style-type: decimal;
}

.content-box ul {
	list-style-type: disc;
}

.content-box li {
	margin-left: 20px;
}

.content-box ul ul,
.content-box ol ol,
.content-box ul ol,
.content-box ol ul {
	margin-left: 20px;
}

/* ================ ANIMATION ================ */

.hero-zoom {
	animation: heroZoom 10s ease-in-out infinite;
}

@keyframes heroZoom {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}

/* ================ MARQUEE ================ */

:root {
	--marquee-speed-top: 26s;
	--marquee-speed-bottom: 26s;
	--marquee-gap: 4rem;
}

@keyframes marquee-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@keyframes marquee-right {
	0% {
		transform: translateX(-50%);
	}

	100% {
		transform: translateX(0);
	}
}

.marquee {
	mask-image: linear-gradient(
		90deg,
		transparent,
		black 8%,
		black 92%,
		transparent
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		black 8%,
		black 92%,
		transparent
	);
}

.marquee-track {
	display: flex;
	width: max-content;
	gap: var(--marquee-gap);
	white-space: nowrap;
	will-change: transform;
}

.marquee--top .marquee-track {
	animation: marquee-left var(--marquee-speed-top) linear infinite;
}

.marquee--bottom .marquee-track {
	animation: marquee-right var(--marquee-speed-bottom) linear infinite;
}

/* Stylowanie 3-trybowe */
.style-mix span:nth-child(3n + 1) {
	font-weight: 600;
	text-transform: uppercase;
	font-style: normal;
	letter-spacing: 0.06em;
}

.style-mix span:nth-child(3n + 2) {
	font-weight: 400;
	font-style: italic;
	text-transform: none;
	letter-spacing: normal;
}

.style-mix span:nth-child(3n + 3) {
	font-weight: 600;
	font-style: italic;
	text-transform: none;
	letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
	}
}

/* ================ TEXT MASK ================ */

p.textBackground {
	font-weight: 800;
	line-height: 1em;
	text-transform: uppercase;
	background: url("https://kampinoska.ifil-customers.eu/wp-content/uploads/2025/10/cta.jpeg")
		0 0 / cover no-repeat;
	color: #de466c;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}