/* ==========================================================================
   Propozycje ożywienia strony: łapki, animacje wejścia, tonacja sekcji
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&display=swap");

:root {
	--tone-cream: #faf5ec;
	--tone-mist: #f1f5f4;
	--accent: #8a5813;
	--accent-dark: #6f4610;
	--accent-2: #5f7a63;
	--accent-2-dark: #4a5f4e;
	--ink: #1c2a32;
	--steel: #71797e;
}

/* --------------------------------------------------------------------
   Logo - łapka w stalowej szarości
   -------------------------------------------------------------------- */

#site-nav .brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}

.brand-mark {
	width: 1.6em;
	height: 1.6em;
	flex-shrink: 0;
	fill: var(--steel);
}

/* --------------------------------------------------------------------
   Typografia - czcionka B (Sora + Inter), lżejsza waga, wciąż wyrazista
   -------------------------------------------------------------------- */

body, input, select, textarea {
	font-family: "Inter", Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Sora", Helvetica, sans-serif;
}

h1 {
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(28, 42, 50, 0.12);
}

#main h2 {
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(28, 42, 50, 0.08);
	position: relative;
	padding-bottom: 0.3em;
	text-align: center;
}

#main h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 2.75em;
	height: 0.2em;
	border-radius: 0.2em;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	transform: translateX(-50%);
}

#main header.major {
	text-align: center;
}

#main > section > ul.actions {
	justify-content: center;
}

h3, h4, h5, h6 {
	font-weight: 600;
}

#site-nav .brand {
	font-family: "Sora", Helvetica, sans-serif;
	font-weight: 700;
}

/* --------------------------------------------------------------------
   Hero (nagłówek) - czytelna hierarchia tekstu + przyciemnienie zdjęcia
   -------------------------------------------------------------------- */

#header {
	background-color: var(--ink);
	background-image: linear-gradient(200deg, rgba(28, 42, 50, 0) 0%, rgba(28, 42, 50, 0.22) 70%, rgba(28, 42, 50, 0.08) 100%), url("images/overlay.png"), url("../../images/bg.jpg");
	background-position: top left, top left, top left;
	background-repeat: no-repeat, repeat, no-repeat;
	background-size: cover, auto, 150%;
}

@media screen and (max-width: 980px) {

	#header {
		background-image: linear-gradient(200deg, rgba(28, 42, 50, 0) 0%, rgba(28, 42, 50, 0.22) 70%, rgba(28, 42, 50, 0.08) 100%), url("images/overlay.png"), url("../../images/bg.jpg");
		background-position: top left, top left, center 25%;
		background-repeat: no-repeat, repeat, no-repeat;
		background-size: cover, auto, cover;
		min-height: 65vh;
	}

}

@media screen and (max-width: 736px) {

	#header {
		min-height: 55vh;
	}

}

#header .inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}

#header .hero-kicker {
	color: rgba(255, 255, 255, 0.9);
	font-family: "Sora", Helvetica, sans-serif;
	font-weight: 700;
	font-size: 0.8em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	margin: 0 0 0.75em 0;
}

#header h1 {
	color: #fff;
	font-size: 2.15em;
	line-height: 1.3em;
	font-weight: 700;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 26px rgba(0, 0, 0, 0.5);
	margin: 0 0 0.55em 0;
	max-width: 11em;
}

#header .hero-sub {
	color: rgba(255, 255, 255, 0.92);
	font-size: 1em;
	line-height: 1.65em;
	max-width: 19em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 18px rgba(0, 0, 0, 0.45);
	margin: 0;
}

@media screen and (max-width: 980px) {

	#header .inner {
		align-items: center;
	}

	#header h1,
	#header .hero-sub {
		max-width: none;
	}

}

/* --------------------------------------------------------------------
   Wyróżniki na wstępie ("Tworzymy solidne, stalowe Kojce dla Psa")
   -------------------------------------------------------------------- */

.hero-highlights {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em 2.5em;
	list-style: none;
	margin: 0 0 2.5em 0;
	padding: 1.75em 0;
	border-top: solid 1px #efefef;
	border-bottom: solid 1px #efefef;
}

.hero-highlights li {
	display: flex;
	align-items: center;
	gap: 0.75em;
	font-weight: 600;
	color: var(--ink);
	font-size: 0.95em;
	max-width: 14em;
}

.hero-highlights .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 100%;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #fff;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------
   Tonacja sekcji - naprzemienne, stonowane tła oddzielające tematy
   -------------------------------------------------------------------- */

#main > section {
	position: relative;
	transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

#main > section:not(:first-child) {
	border-top: none;
	border-radius: 1.25em;
}

#main > section:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0.35em;
}

	/* co trzecia sekcja: ciepły, kremowy ton + akcent brązowy */
	#main > section:not(:first-child):nth-child(3n+2) {
		background-color: var(--tone-cream);
		padding: 3em;
		margin-top: 3em;
		box-shadow: 0 0.5em 2em rgba(28, 42, 50, 0.05);
	}

		#main > section:not(:first-child):nth-child(3n+2)::before {
			background-color: var(--accent);
		}

	/* co trzecia sekcja: chłodny, stonowany ton + akcent szałwiowy */
	#main > section:not(:first-child):nth-child(3n) {
		background-color: var(--tone-mist);
		padding: 3em;
		margin-top: 3em;
		box-shadow: 0 0.5em 2em rgba(28, 42, 50, 0.05);
	}

		#main > section:not(:first-child):nth-child(3n)::before {
			background-color: var(--accent-2);
		}

	/* co trzecia sekcja: "oddech" - bez tła, zostaje delikatna linia */
	#main > section:not(:first-child):nth-child(3n+1) {
		border-top: solid 2px #efefef;
		margin-top: 4em;
		padding-top: 4em;
	}

		#main > section:not(:first-child):nth-child(3n+1)::before {
			content: none;
		}

@media screen and (max-width: 736px) {

	#main > section:not(:first-child):nth-child(3n+2),
	#main > section:not(:first-child):nth-child(3n) {
		padding: 2em;
	}

}

/* --------------------------------------------------------------------
   Animacje wejścia przy przewijaniu (scroll reveal)
   -------------------------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------
   Praca / oferta - unoszące się karty przy najechaniu + łapka-plakietka
   -------------------------------------------------------------------- */

/* Uwaga: .work-item to kolumna siatki - ma wbudowany padding na gutter
   (patrz .row > * w main.css). Wygląd karty (tło, cień, promień) NIE
   może siedzieć na tym samym elemencie, bo cień/obramowanie podążałyby
   za całym, szerszym obszarem kolumny (razem z niewidocznym gutterem),
   a nie za faktycznie widoczną treścią - stąd wrażenie "rozjechania".
   Dlatego cała otoczka wizualna karty jest na wewnętrznym .work-item-card. */

.work-item-card {
	position: relative;
	background: #fff;
	border-radius: 0.65em;
	padding: 0 1.5em 1.75em 1.5em;
	box-shadow: 0 0.4em 1.2em rgba(28, 42, 50, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.work-item-card .image,
.work-item-card .image img {
	border-radius: 0.65em 0.65em 0 0;
}

.work-item-card .image {
	display: block;
	width: calc(100% + 3em);
	margin: 0 -1.5em 1.5em -1.5em;
}

.work-item-card h3 {
	margin: 0 0 0.6em 0;
}

.work-item-card p {
	margin: 0;
}

.work-item:hover .work-item-card {
	transform: translateY(-0.3em);
	box-shadow: 0 0.9em 1.75em rgba(28, 42, 50, 0.16);
}

.work-item-card::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f1b0";
	position: absolute;
	top: -0.7em;
	left: 50%;
	width: 2.2em;
	height: 2.2em;
	line-height: 2.2em;
	text-align: center;
	border-radius: 100%;
	background-color: var(--accent);
	color: #fff;
	font-size: 0.85em;
	box-shadow: 0 0.3em 0.6em rgba(28, 42, 50, 0.25);
	opacity: 0;
	transform: translateX(-50%) scale(0.6);
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 3;
	pointer-events: none;
}

.work-item:hover .work-item-card::after {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

/* --------------------------------------------------------------------
   Przyciski - łapka pojawiająca się przy najechaniu
   -------------------------------------------------------------------- */

.button::after,
input[type="submit"]::after,
input[type="button"]::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f1b0";
	display: inline-block;
	margin-left: 0;
	width: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateX(-4px) rotate(-10deg);
	transition: opacity 0.2s ease, transform 0.2s ease, margin-left 0.2s ease, width 0.2s ease;
	vertical-align: middle;
}

.button:hover::after,
input[type="submit"]:hover::after,
input[type="button"]:hover::after {
	opacity: 1;
	width: 1em;
	margin-left: 0.5em;
	transform: translateX(0) rotate(0deg);
}

/* --------------------------------------------------------------------
   Przycisk "do góry" w kształcie łapki
   -------------------------------------------------------------------- */

#pawToTop {
	position: fixed;
	right: 1.75em;
	bottom: 1.75em;
	width: 3.1em;
	height: 3.1em;
	border-radius: 100%;
	background-color: var(--accent);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15em;
	box-shadow: 0 0.5em 1.5em rgba(28, 42, 50, 0.25);
	opacity: 0;
	transform: translateY(0.75em) scale(0.85);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
	z-index: 40;
}

#pawToTop.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

#pawToTop:hover {
	background-color: var(--accent-dark);
}

#pawToTop i {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-style: normal;
}

#pawToTop i::before {
	content: "\f1b0";
}

@media screen and (max-width: 736px) {

	#pawToTop {
		right: 1.25em;
		bottom: 1.25em;
		width: 2.75em;
		height: 2.75em;
		font-size: 1em;
	}

}

/* --------------------------------------------------------------------
   Galeria "Nasza Oferta" - większy, czytelniejszy popup ze zdjęciem
   -------------------------------------------------------------------- */

.poptrox-popup {
	border-radius: 0.75em;
	padding-bottom: 4em;
}

.poptrox-popup .caption {
	background: var(--ink);
	height: 4em;
	line-height: 1.3em;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.5em 1.5em;
	margin: 0;
	color: #fff;
	font-weight: 600;
	font-size: 1.05em;
	white-space: normal;
	box-sizing: border-box;
}

@media screen and (max-width: 736px) {

	.poptrox-popup .caption {
		font-size: 0.95em;
		height: 4.5em;
	}

}

/* --------------------------------------------------------------------
   Checkbox zgody - widoczny niezależnie od tła sekcji
   -------------------------------------------------------------------- */

input[type="checkbox"] + label:before {
	background: #fff;
	border-color: rgba(28, 42, 50, 0.3);
}

input[type="checkbox"]:checked + label:before {
	background: var(--accent);
	border-color: var(--accent);
}

/* --------------------------------------------------------------------
   Dostępność - wyłączenie animacji na życzenie systemu
   -------------------------------------------------------------------- */

@media screen and (prefers-reduced-motion: reduce) {

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.work-item,
	.work-item::after,
	.button::after,
	input[type="submit"]::after,
	input[type="button"]::after,
	#pawToTop {
		transition: none;
	}

}