/*
 Theme Name:   Happy Detox
 Description:  Motyw potomny Bricks dla Holistycznego Studia Zdrowia Happy Detox.
 Template:     bricks
 Version:      1.0
 Text Domain:  happydetox
*/

@font-face { font-family: "Archivo"; src: url(fonts/archivo-regular-webfont.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-italic-webfont.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-semibold-webfont.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(fonts/archivo-bold-webfont.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fahkwang"; src: url(fonts/fahkwang-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
	--hd-ciemny: #153b18;
	--hd-zielony: #8cba3d;
	--hd-nakladka: rgba(21, 59, 24, .56);
	--hd-przyciemnienie: rgba(34, 34, 34, .45);
	--hd-tytulowa: "Fahkwang", Arial, Helvetica, sans-serif;
	--hd-szerokosc: 1140px;
	--hd-promien: 20px;
}

/* Podstawy */

body {
	background: var(--hd-ciemny);
	color: #fff;
	font: 400 14px/1.45 "Archivo", Arial, Helvetica, sans-serif;
}

body.home::before,
body.home::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -10;
	background: url(img/bg-main.webp) center / cover;
}
body.home::after { z-index: -9; background: var(--hd-przyciemnienie); }

h1, h2, h3, h4 { font-weight: 400; line-height: 1.1; color: #fff; margin: 0 0 .6em; }
h1 { font-size: 48px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
p, ul, ol { margin: 0 0 1em; }
a { color: inherit; }
strong, b { font-weight: 700; }

.brxe-container { width: min(var(--hd-szerokosc), 100%); }

/* Przyciski */

.hd-btn,
.bricks-button.hd-btn {
	display: inline-block;
	padding: 10px 30px;
	border: .5px solid var(--hd-ciemny);
	border-radius: 10px;
	background: var(--hd-ciemny);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
	transition: background .2s, color .2s;
}
.hd-btn:hover { background: #fff; color: var(--hd-ciemny); }
.hd-btn.hd-btn--obrys { background: transparent; border-color: #fff; box-shadow: none; }
.hd-btn.hd-btn--obrys:hover { background: #fff; color: var(--hd-ciemny); }

/* Etykieta nad nagłówkiem, np. „O nas” */

.hd-etykieta {
	display: block;
	font-size: 14px;
	line-height: 21px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: .67px solid var(--hd-ciemny);
	max-width: 240px;
}

/* Nagłówek */

.hd-header { background: var(--hd-ciemny); }
.hd-header .brxe-container { padding: 10px 0 0; }
.hd-header__gora { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; padding: 0 30px; }
.hd-header__dol { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 30px; margin: 30px 0 -5px; }
.hd-adres {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 30px;
	border: .5px solid #fff;
	border-radius: 10px;
	font-weight: 700;
	text-decoration: none;
}
.hd-adres img { width: 14px; height: auto; }
.hd-jezyki { display: flex; gap: 2px; min-height: 24px; }
.hd-jezyki a { display: block; line-height: 0; }
.hd-header .brxe-logo { flex-shrink: 0; position: relative; top: -15px; }
.hd-header .brxe-logo img { width: 260px; height: auto; }

.hd-header .hd-menu { align-self: flex-start; margin-top: 15px; }
.bricks-nav-menu { margin: 0; }
.hd-menu .bricks-nav-menu { gap: 0; white-space: nowrap; }
.hd-menu .bricks-nav-menu > li > a,
.hd-menu .bricks-nav-menu > li > .brx-submenu-toggle > a { position: relative; font-size: 15px; line-height: 100px; padding: 0 5px; }
.hd-menu .bricks-nav-menu > li + li::before { content: "|"; align-self: center; padding: 0 2px; }
.hd-menu .bricks-nav-menu > li { display: flex; margin: 0; }
.hd-menu .bricks-nav-menu .brx-submenu-toggle { position: relative; }
.hd-menu .bricks-nav-menu .brx-submenu-toggle > button { position: absolute; inset: auto 0 0; width: 100%; height: 6px; opacity: 0; }
.hd-menu .bricks-nav-menu .brx-submenu-toggle > button:focus-visible { opacity: 1; }
.hd-menu .current-menu-item > a::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px; background: #fff; }
.hd-menu .sub-menu { background: var(--hd-ciemny); min-width: 260px; }
.hd-menu .sub-menu a { padding: 10px 20px; font-size: 14px; }
.hd-menu .bricks-mobile-menu-wrapper { background: var(--hd-ciemny); }
.hd-menu .bricks-mobile-menu-toggle { color: #fff; }

/* Ikony społecznościowe przy prawej krawędzi */

.hd-social {
	position: fixed;
	right: 9px;
	top: 270px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.hd-social a { display: block; line-height: 0; }
.hd-social img { width: 30px; height: 30px; }

.hd-dogory {
	position: fixed;
	right: 15px;
	bottom: 15px;
	z-index: 50;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.hd-dogory::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 14px;
	border: solid #222;
	border-width: 3px 0 0 3px;
	transform: translate(-50%, -25%) rotate(45deg);
}
.hd-dogory--widoczny { opacity: 1; visibility: visible; }

/* Slider */

.hd-slider .swiper-slide,
.hd-slider .repeater-item { min-height: 0; height: auto; aspect-ratio: 1920 / 900; align-items: flex-end; }
.hd-slider .slider-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(var(--hd-szerokosc), 100%);
	margin: 0 auto;
	padding: 0 15px 150px;
	text-align: center;
}
.hd-slider .content { display: contents; }
.hd-slider .content p { margin: 0; font-size: 14px; line-height: 20px; }
.hd-slider .content .hd-slider__etykieta {
	order: -1;
	align-self: stretch;
	line-height: 21px;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: .67px solid rgba(255, 255, 255, .5);
}
.hd-slider .title,
.hd-slider .content .hd-slider__pod { font: 400 35px/35px var(--hd-tytulowa); margin: 0 0 15px; }
.hd-slider .title { text-transform: uppercase; }
.hd-slider .bricks-button {
	margin-top: 40px;
	padding: 10px 30px;
	border: .67px solid var(--hd-ciemny);
	border-radius: 10px;
	background: var(--hd-ciemny);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
}
.hd-slider .swiper-pagination { bottom: 70px; }
.hd-slider .swiper-pagination-bullet { width: 15px; height: 15px; margin: 0 5px; border: 1px solid #fff; background: transparent; opacity: 1; }
.hd-slider .swiper-pagination-bullet-active { background: var(--hd-ciemny); }
.hd-slider .swiper-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #000;
	transform: translateY(-50%);
}
.hd-slider .bricks-swiper-button-prev { left: 60px; }
.hd-slider .bricks-swiper-button-next { right: 60px; }
.hd-slider .swiper-button svg { width: 28px; height: 24px; }

/* Sekcje strony głównej: przezroczyste na tle strony, rozdzielone 10-pikselowym paskiem */

.hd-sekcja { padding: 100px 15px; }
.hd-sekcja--usp { padding: 85px 15px 84px; }
.hd-sekcja--oferta { padding: 70px 15px; }
.hd-slider,
.hd-sekcja--usp,
.hd-paralaksa,
.hd-sekcja--oferta { border-bottom: 10px solid var(--hd-ciemny); }

.hd-onas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 30px;
	padding: 45px;
	border-radius: var(--hd-promien);
	background: var(--hd-nakladka);
	width: 100%;
}
.hd-onas > :first-child { display: contents; }
.hd-onas .hd-etykieta { grid-column: 1 / -1; }
.hd-onas h1 { font-size: 48px; line-height: 52.8px; margin: 0 0 30px; }
.hd-onas p { margin: 0 0 10px; }
.hd-onas a { text-decoration: underline; }
.hd-karta {
	align-self: start;
	padding: 30px;
	border-radius: var(--hd-promien);
	background: var(--hd-ciemny);
}
.hd-karta h2 { font-size: 20px; line-height: 22px; padding-bottom: 15px; border-bottom: .67px solid #808080; margin-bottom: 15px; }
.hd-karta p { margin-bottom: 20px; }

.hd-usp__tytul.hd-etykieta { width: 360px; max-width: 100%; margin: 0 auto 30px; text-align: center; }
.hd-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; width: 100%; margin-bottom: 20px; }
.hd-usp__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px 40px;
	min-height: 215px;
	border: .67px dashed #fff;
	border-radius: var(--hd-promien);
	text-align: center;
}
.hd-usp__box img { width: 50px; height: 50px; padding: 5px; margin-bottom: 20px; border-radius: 50%; background: var(--hd-ciemny); }
.hd-usp__box h3 { margin: 0; font-size: 20px; line-height: 22px; }

.hd-paralaksa {
	position: relative;
	padding: 70px 15px;
	background: url(img/parallax.webp) 50% 0 no-repeat fixed;
}
.hd-paralaksa::before { content: ""; position: absolute; inset: 0; background: var(--hd-przyciemnienie); }
.hd-paralaksa > * { position: relative; }
.hd-paralaksa__box {
	width: 100%;
	padding: 70px;
	border: .67px solid #fff;
	border-radius: var(--hd-promien);
	text-align: center;
}
.hd-paralaksa__box h2 { max-width: 969px; font-size: 48px; line-height: 52.8px; margin: 0 auto 10px; }
.hd-paralaksa__box p { max-width: 969px; margin: 0 auto 30px; }

.hd-oferta { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; }
.hd-oferta__naglowek { padding: 30px; margin-bottom: -15px; border-radius: var(--hd-promien); background: var(--hd-nakladka); }
.hd-oferta__naglowek + * { grid-column: 1; }
.hd-oferta__naglowek .hd-etykieta { max-width: 233px; }
.hd-oferta__naglowek h2 { font-size: 24px; line-height: 26.4px; margin: 0 0 30px; }
.hd-oferta__box {
	position: relative;
	display: block;
	height: 275px;
	overflow: hidden;
	border-radius: var(--hd-promien);
	text-decoration: none;
}
.hd-oferta__box img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hd-oferta__box:hover img { transform: scale(1.05); }
.hd-oferta__box::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--hd-przyciemnienie); }
.hd-oferta__box::after {
	content: "";
	position: absolute;
	left: 30px;
	top: 25px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hd-ciemny) url(img/arrow-right.webp) center no-repeat;
}
.hd-oferta__box h2 {
	position: absolute;
	left: 35px;
	bottom: 30px;
	z-index: 2;
	margin: 0;
	font-size: 24px;
	line-height: 26.4px;
}

/* Podstrony */

.hd-baner {
	position: relative;
	height: 450px;
	padding: 0 15px 9px;
	background-position: center;
	background-size: cover;
	justify-content: flex-end;
	align-items: flex-start;
}
.hd-baner .brxe-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin-left: max(0px, calc((100% - var(--hd-szerokosc)) / 2));
	padding: 10px;
	border-radius: 10px;
	background: rgba(21, 59, 24, .6);
	font-size: 14px;
	line-height: 21px;
}
.hd-baner .brxe-breadcrumbs a { text-decoration: underline; }
.hd-baner .brxe-breadcrumbs a:first-child {
	width: 17px;
	height: 15px;
	font-size: 0;
	background: url(img/icon-home.webp) center / contain no-repeat;
}
.hd-baner .brxe-breadcrumbs .separator { color: #999; margin: 0 5px; }
.hd-tresc { padding: 70px 15px; }
.hd-tresc h1 { font-size: 48px; line-height: 52.8px; margin-bottom: 30px; }
.hd-tresc .brxe-post-content > :last-child { margin-bottom: 0; }
.hd-box {
	width: calc(100% + 30px);
	margin: 20px -15px 0;
	padding: 50px;
	border-radius: var(--hd-promien);
	background: var(--hd-zielony);
	font-size: 14px;
	line-height: 20px;
	overflow: hidden;
}
.hd-tresc h1 + .hd-box { margin-top: 50px; }
.hd-box h2 { font-size: 24px; line-height: 26.4px; margin: 0 0 30px; }
.hd-box h3 { font-size: 20px; line-height: 22px; margin: 0 0 20px; }
.hd-box :is(h2, h3) :is(strong, b) { color: #397f3f; font-weight: 400; }
.hd-box p { margin: 0 0 10px; }
.hd-box p:empty { display: none; }
.hd-box p:has(> img:only-child) { margin: 0; }
.hd-box ul { padding-left: 0; list-style: none; }
.hd-box li { padding-left: 25px; margin-bottom: 15px; background: url(img/list-bullet.webp) 0 5px no-repeat; }
.hd-box li p { margin: 0; }
.hd-box a { text-decoration: underline; }
.hd-box img { max-width: 100%; height: auto; }
.hd-box .alignright { float: right; margin: 0 0 15px 100px; max-width: 50%; box-shadow: 0 12px 24px rgba(0, 0, 0, .75); }

/* Kafelki z linkami do podstron (np. lista ofert) */

.hd-kafle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; width: 100%; margin-top: 70px; }
.hd-kafle--jeden { grid-template-columns: min(555px, 100%); justify-content: center; }
.hd-kafel { display: block; position: relative; border-radius: var(--hd-promien); text-decoration: none; color: #fff; }
.hd-kafel__obraz { position: relative; padding: 10px 10px 0; }
.hd-kafel__obraz::after { content: ""; position: absolute; inset: 10px 10px 0; border-radius: var(--hd-promien); background: var(--hd-przyciemnienie); transition: background .3s; }
.hd-kafel:hover .hd-kafel__obraz::after { background: transparent; }
.hd-kafel img { display: block; width: 100%; height: auto; aspect-ratio: 768 / 427; object-fit: cover; border-radius: var(--hd-promien); }
.hd-kafel__tytul { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 30px 30px; }
.hd-kafel__tytul::after { content: ""; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--hd-ciemny) url(img/arrow-right.webp) center no-repeat; }
.hd-kafel h2 { margin: 0; font-size: 24px; line-height: 26.4px; }
.hd-box video { width: 100%; height: auto; border-radius: 10px; }
.hd-box table { width: 100%; border-collapse: collapse; }
.hd-box td, .hd-box th { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .4); text-align: left; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; margin: 20px 0 40px; clear: both; }
.galeria br { display: none; }
.galeria a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.galeria a:hover img { transform: scale(1.05); }

/* Kontakt */

.hd-kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; margin-top: 140px; }
.hd-kontakt__dane { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-content: start; }
.hd-kontakt__dane p { margin: 0 0 10px; }
.hd-kontakt__etykieta { display: flex; align-items: center; gap: 9px; }
.hd-kontakt__etykieta img { width: 32px; height: 32px; padding: 5px; border-radius: 50%; background: var(--hd-ciemny); object-fit: contain; }
.hd-kontakt__etykieta strong { font-weight: 700; }
.hd-kontakt__dane .hd-kontakt__nazwa { margin-bottom: 20px; font-size: 20px; line-height: 22px; }
.hd-kontakt__dane .hd-btn { font-weight: 700; }
.hd-kontakt__formularz { width: min(360px, 100%); justify-self: center; }
.hd-kontakt__formularz h2 { margin: 0 0 10px; font-size: 24px; line-height: 26.4px; }
.hd-kontakt__wymagane { margin: 30px 0; padding: 5px 20px; border-radius: 10px; background: var(--hd-ciemny); }
.hd-kontakt__formularz .brxe-form { row-gap: 20px; }
.hd-kontakt__formularz .brxe-form .form-group { padding: 0; }
.hd-kontakt__formularz .brxe-form label { margin-bottom: 10px; color: #fff; font-size: 12px; line-height: 17px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.hd-kontakt__formularz .brxe-form label.required::after { content: " *"; color: #fff; }
.hd-kontakt__formularz .brxe-form input:not([type="checkbox"]),
.hd-kontakt__formularz .brxe-form select,
.hd-kontakt__formularz .brxe-form textarea { padding: 10px; border: .67px solid #fff; border-radius: 5px; background-color: #fff; color: #1a1919; font-size: 14px; line-height: 20px; }
.hd-kontakt__formularz .brxe-form textarea { height: 121px; }
.hd-kontakt__formularz .brxe-form .form-group > .label { display: none; }
.hd-kontakt__formularz .brxe-form .form-group:has(> input[tabindex="-1"][autocomplete="off"]) { position: absolute; left: -9999px; }
.hd-kontakt__formularz .brxe-form .options-wrapper { margin: 0; padding: 0; }
.hd-kontakt__formularz .brxe-form .options-wrapper li { display: flex; align-items: flex-start; gap: 12px; }
.hd-kontakt__formularz .brxe-form .options-wrapper input { flex-shrink: 0; margin-top: 4px; }
.hd-kontakt__formularz .brxe-form .options-wrapper label { margin: 0; padding-top: 4px; line-height: 13.2px; }
.hd-kontakt__formularz .brxe-form .options-wrapper label::after { content: none; }
.hd-kontakt__formularz .bricks-button { margin-top: 20px; padding: 10px 30px; border: .67px solid #fff; border-radius: 10px; background: transparent; color: #fff; font-weight: 700; line-height: 20px; }
.hd-kontakt__formularz .bricks-button:hover { background: #fff; color: var(--hd-ciemny); }
.hd-mapa { width: 100%; }

/* Stopka: ciemny pasek z menu, pod nim wyśrodkowane linki i prawa autorskie */

.hd-footer { padding: 0; }
.hd-footer__menu { width: 100%; background: #1a1919; }
.hd-footer__menu .brxe-container { width: min(1170px, 100%); padding: 0; }
.hd-footer .brxe-nav-menu { width: 100%; }
.hd-footer .bricks-nav-menu { justify-content: space-between; width: 100%; gap: 0; }
.hd-footer .bricks-nav-menu li { margin: 0; }
.hd-footer .bricks-nav-menu a { display: block; font-size: 16px; line-height: 24px; padding: 30px 0; border-bottom: 2.67px solid transparent; }
.hd-footer .bricks-nav-menu .current-menu-item > a { border-bottom-color: #fff; }
.hd-footer__dol { width: 100%; padding: 30px 15px; background: var(--hd-ciemny); text-align: center; }
.hd-footer__dol .brxe-container { align-items: center; }
.hd-footer__dol a { display: block; text-decoration: underline; }
.hd-footer__dol p { margin: 17px 0 0; }
.hd-footer__dol p a { display: inline; }

/* Responsywność */

@media (max-width: 991px) {
	.hd-onas, .hd-kontakt { grid-template-columns: 1fr; }
	.hd-usp { grid-template-columns: 1fr 1fr; }
	.hd-paralaksa__box { padding: 40px 25px; }
	.hd-paralaksa__box h2 { font-size: 28px; }
	.hd-menu .bricks-nav-menu > li + li::before { content: none; }
	.hd-box .alignright { float: none; display: block; margin: 0 auto 25px; max-width: 100%; }
	.hd-slider .swiper-slide,
	.hd-slider .repeater-item { aspect-ratio: auto; min-height: 520px; }
	.hd-slider .slider-content { padding: 40px 80px 110px; }
	.hd-slider .swiper-pagination { bottom: 50px; }
	.hd-footer .bricks-nav-menu { flex-wrap: wrap; justify-content: center; gap: 0 25px; }
	.hd-footer .bricks-nav-menu a { padding: 12px 0; }
}

@media (max-width: 767px) {
	h1, .hd-onas h1, .hd-tresc h1 { font-size: 32px; line-height: 1.1; }
	.hd-oferta, .hd-usp, .hd-kafle { grid-template-columns: 1fr; }
	.hd-baner { height: 260px; }
	.hd-kafel__tytul { padding: 20px 15px; }
	.hd-sekcja { padding: 50px 15px; }
	.hd-box, .hd-onas { padding: 25px; }
	.hd-slider .title,
	.hd-slider .content .hd-slider__pod { font-size: 24px; line-height: 28px; }
	.hd-slider .slider-content { padding: 40px 15px 90px; }
	.hd-slider .swiper-button { display: none; }
	.hd-paralaksa__box h2 { font-size: 26px; line-height: 1.2; }
	.hd-header__gora { padding: 0 15px; }
	.hd-header .brxe-logo img { width: 200px; }
}