/*
 * Custom overrides — Happy Plants Studio
 * Ten plik ładuje się PO main.css, więc reguły tutaj nadpisują oryginalne style.
 * Nie edytuj main.css bezpośrednio (jest zminifikowany i generowany z buildu,
 * którego nie mamy na serwerze).
 */

/* === Font: Nohemi ===
 * Motyw steruje fontami przez zmienne CSS (--text-font-family,
 * --headline-font-family, --subheadline-font-family) zdefiniowane w main.css.
 * Nadpisujemy tylko te zmienne — dzięki temu Nohemi trafia wszędzie,
 * a wielkości i wagi (font-size, font-weight) zostają bez zmian.
 */

@font-face {
	font-family: 'Nohemi';
	src: url('../fonts/nohemi/Nohemi-Light.woff2') format('woff2'),
	     url('../fonts/nohemi/Nohemi-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nohemi';
	src: url('../fonts/nohemi/Nohemi-Regular.woff2') format('woff2'),
	     url('../fonts/nohemi/Nohemi-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nohemi';
	src: url('../fonts/nohemi/Nohemi-SemiBold.woff2') format('woff2'),
	     url('../fonts/nohemi/Nohemi-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nohemi';
	src: url('../fonts/nohemi/Nohemi-Bold.woff2') format('woff2'),
	     url('../fonts/nohemi/Nohemi-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nohemi';
	src: url('../fonts/nohemi/Nohemi-Black.woff2') format('woff2'),
	     url('../fonts/nohemi/Nohemi-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--text-font-family: 'Nohemi', sans-serif;
	--headline-font-family: 'Nohemi', sans-serif;
	--subheadline-font-family: 'Nohemi', sans-serif;

	/* Paleta marki — nowe wartości */
	--color-primary-dark: #0a470f;
	--color-primary-light: #fffefa;
	--color-olive: #e4eddf;

	/* Domyślny (fallback) kolor dekoracyjnych kształtów za zdjęciami —
	   używany tylko gdy dany element nie ma własnego koloru ustawionego w ACF */
	--bg-color: #c85332;
	--decor-color: #c85332;
}

/* Pionowa linia-dzielnik w siatce portfolio — kolor wpisany na sztywno, bez zmiennej */
.portfolio__projects:before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), #c85332, rgba(0, 0, 0, 0));
}

/* === Usunięcie cienia z nagłówka === */

.intro .intro__headline {
	text-shadow: none;
}

/* === Usunięcie kursywy (italic) === */

.intro .intro__headline span,
.services__header .subheadline,
.booking__header .subheadline,
.about-page__person-position,
.contact-page .contact__person-department {
	font-style: normal;
}

/* === Usunięcie wszystkich zaokrągleń (łącznie z okrągłymi przyciskami lightboxa) ===
 * !important konieczne — border-radius jest ustawiony na konkretnych klasach
 * w main.css o wyższej specyficzności niż uniwersalny selektor *.
 */

*,
*::before,
*::after {
	border-radius: 0 !important;
}

/* === Mniejszy font i ikony w navbarze === */

.header .nav li a {
	font-size: 1.8rem; /* było 2.4rem */
}

.header .social-links svg {
	width: 2.8rem; /* było 41-42px (~4.1rem) */
	height: 2.8rem;
}

/* === Logo w navbarze: nieco większe i wyrównane do menu ===
 * Motyw miał na desktopie (≥1200px) align-items:flex-start na kontenerze
 * nagłówka — stąd logo "wyżej" niż tekst menu. Wracamy do center.
 */

@media (min-width: 1200px) {
	.header__container {
		align-items: center;
	}
}

.header .logo {
	width: 18rem; /* było 16rem */
}

.footer__logo .logo {
	width: 16rem; /* było 12rem */
}

/* === Mniejszy przycisk "Powrót" w projekcie === */

.project-single__back-link {
	font-size: 1.4rem; /* było 1.6-2.4rem (dziedziczone z .btn) */
	padding: 1rem 1.8rem 0.6rem;
	line-height: 1;
}

.project-single__back-icon {
	width: 1.6rem;
	height: 1.6rem;
}

/* === Mniejsze przyciski wszędzie na stronie ===
 * Nadpisuje bazową klasę .btn (było 1.6rem mobile / 2.4rem desktop,
 * padding 1.3rem 3.2rem) — dotyczy każdego przycisku, który jej używa.
 */

.btn {
	font-size: 1.4rem;
	padding: 1.2rem 2.4rem 0.8rem; /* asymetria góra/dół — Nohemi optycznie "unosi" tekst */
	line-height: 1;
}


/* === Usunięcie mapy z podstrony kontakt === */

.contact__map {
	display: none;
}

.contact__form {
	max-width: 100%; /* było 50% — dzielił rząd z mapą, teraz zajmuje całość */
}

/* === Gradient w hero: zielony → czarny, mniejsze opacity ===
 * Było: linear-gradient(180deg, #143b21, rgba(0,0,0,0))
 * Cel gradientu zostaje (czytelność logo/nawigacji na zdjęciu),
 * tylko kolor i intensywność się zmieniają.
 */

.header:not(.header--subpage) {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

/* === Mniejsza wysokość hero === */
/* Było: min-height: 100vh (pełny ekran). Wideo/zdjęcie w tle (.intro__video)
 * ma height:100%, więc skaluje się razem z .intro automatycznie. */

.intro {
	min-height: 85vh;
}

/* === Przycisk "Sprawdź portfolio" pod opisem w hero ===
 * Klasa .btn--light jest używana wyłącznie na tym przycisku (pole ACF
 * "intro_link" w front-page.php) — bezpiecznie nadpisujemy ją tutaj.
 * Zamiast obrysu (oryginalny styl) — pełne wypełnienie w pomarańczu.
 */

.intro .btn--light {
	background-color: #c85332;
	border-color: #c85332;
	color: #fff;
}

.intro .btn--light:hover {
	background-color: #a8422a;
	border-color: #a8422a;
}

/* === Karty usług pod hero: pasek treści zamiast napisu na zdjęciu ===
 * .service__content jest już osobną warstwą nad zdjęciem (z-index:2) —
 * wystarczy dać jej nieprzezroczyste tło zamiast przezroczystego,
 * wyłączyć ciemny gradient i przefarbować tekst/strzałkę na ciemno.
 */

.services__grid .service__overlay {
	display: none;
}

/* Zdjęcie i pasek treści dzielą realnie przestrzeń karty (flex column),
 * zamiast nakładać się na siebie — inaczej pasek zawsze zasłaniałby
 * górę zdjęcia, bez względu na background-position. */

.services__grid .service__card {
	flex-direction: column;
	align-items: stretch;
}

.services__grid .service__content {
	position: static;
	order: -1;
	background-color: #e5eddf;
	align-items: center;
	flex-shrink: 0;
}

.services__grid .service__bg {
	position: static;
	flex: 1 1 auto;
	width: 100%;
	height: auto;
	min-height: 16rem;
	background-position: top; /* było center — kadrowanie od góry, żeby nie ucinało głów */
}

.services__grid .service__content .headline {
	color: #000;
	font-size: 1.8rem; /* było 3rem (desktop) / 1.8rem (mobile) — teraz jednolicie */
	line-height: 2.2rem;
}

.services__grid .service__arrow svg {
	width: 4.4rem; /* było 88px desktop / 28px mobile */
	height: auto;
}

.services__grid .service__arrow svg path {
	fill: var(--color-primary-dark);
}

/* === Mniejszy font i ikony w stopce === */

.footer__nav .footer-column ul li a {
	font-size: 1.6rem; /* było 2.2rem (desktop) / 1.6rem (mobile) */
	line-height: 2rem;
}

.footer-social-links svg {
	width: 2.8rem; /* było 41-42px (~4.1rem), tak jak w navbarze */
	height: 2.8rem;
}

/* === Sekcja "Umów się" na dole home: sam duży przycisk === */
/* Markup uproszczony w front-page.php — zamiast nagłówka, Calendly
 * i zdjęcia zostaje jeden wyśrodkowany przycisk. */

.booking__container--cta {
	justify-content: center;
	align-items: center;
}

.booking--cta {
	padding-top: 3rem; /* było 10.6rem — mniejszy odstęp od sekcji "O nas" nad nią */
}

.btn--cta {
	font-size: 1.8rem;
	padding: 1.7rem 3.6rem 1.1rem;
	line-height: 1;
	margin-top: 2rem; /* było 6rem */
	border: none;
	background-color: #c85332;
	color: #fff;
}

.btn--cta:hover {
	background-color: #a8422a;
}

/* === Czarny tekst zamiast zielonego === */

.about__description p {
	color: #000;
}

/* === Biały tekst/ikony w navbarze (tylko strona główna — patrz uwaga w rozmowie) === */

.header:not(.header--subpage) .nav li a {
	color: #fff;
}

.header:not(.header--subpage) .social-links svg path {
	fill: #fff;
}

/* === Biały tekst/ikony w stopce (tło ciemnozielone — bezpieczne wszędzie) === */

.footer__nav .footer-column ul li a,
.footer__copyright {
	color: #fff;
}

.footer-social-links svg path {
	fill: #fff;
}

/* === Tło sekcji "Co możemy dla Ciebie zrobić?" — kremowy beż zamiast oliwki === */

.services {
	background-color: var(--color-primary-light);
	padding-bottom: 10rem; /* było 3rem mobile / 6.4rem desktop */
}

@media (min-width: 1200px) {
	.services {
		padding-bottom: 16rem;
	}
}

/* === Sekcja "Pracowaliśmy dla" (loga partnerów): ukryty napis, ciemnozielone tło === */

.partners .headline {
	display: none;
}

.partners {
	background-color: var(--color-primary-dark);
	padding-top: 7.5rem; /* było 0 — po ukryciu nagłówka logo dotykały górnej krawędzi */
}

@media (min-width: 1200px) {
	.partners {
		padding-top: 13rem;
	}
}

/* === Zdjęcie w sekcji "O nas" nie nachodzi na sekcję wyżej ===
 * Oryginał miał margin: -15.5rem 0 — celowe nachodzenie dobrane pod
 * proporcje poprzedniego zdjęcia. Przy nowym zdjęciu efekt wychodził źle.
 */

.about__images {
	margin: 0;
}