/*
Theme Name: Produktorium
Theme URI: https://produktorium.pl
Author: Produktorium
Description: Motyw blokowy dla Produktorium — szkoła produkcji muzycznej i studio nagrań. Zbudowany 1:1 pod projekt z Claude Design.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: produktorium
*/

/* --- Jasny wariant strony (Usługi, Kursy) --- */
.pdk-page-light { background: #EBE9E1; }
.pdk-page-light .pdk-services__heading,
.pdk-page-light .pdk-steps__heading,
.pdk-page-light .pdk-beats__heading { color: #171310; }


/* Wszystkie nasze bloki liczą wysokość razem z paddingiem.
   Bez tego `min-height: 88vh` + `padding: 150px ... 90px` dawało sekcję
   wyższą od ekranu i przyciski w hero wychodziły pod dolną krawędź. */
[class*="pdk-"], [class*="pdk-"] * { box-sizing: border-box; }

/* Kotwice: pasek nawigacji jest stały, więc cel musi mieć zapas od góry,
   inaczej nagłówek chowa się pod paskiem. Przewijanie zostaje płynne także
   przy „ogranicz ruch” — to prośba klienta, a sam ma tę opcję włączoną. */
/* Przyciski w naszych blokach nie maja podkreslenia - projekt go nie ma.
   Celujemy w koncowki klas, zeby nie ruszac zwyklych odnosnikow w tekscie. */
a[class*="pdk-"][class*="__cta"],
a[class*="pdk-"][class*="__btn"],
a[class*="pdk-"][class*="__alt"],
a[class*="pdk-"][class*="__scroll"] { text-decoration: none; }

html { scroll-behavior: smooth; }
:target { scroll-margin-top: 100px; }
[class*="pdk-"][id] { scroll-margin-top: 100px; }
@media (max-width: 780px) {
	:target { scroll-margin-top: 80px; }
	[class*="pdk-"][id] { scroll-margin-top: 80px; }
}

/* strona startowa nie ma nagłówka motywu — splash zajmuje pełny ekran */
.home .wp-site-blocks > header { display: none; }


/* --- Nawigacja: wartości przepisane 1:1 z projektu --- */
.wp-site-blocks > header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.pdk-nav {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 5%;
	font-family: 'Manrope', sans-serif;
}
/* Tlo i rozmycie siedza na warstwie pod spodem, NIE na .pdk-nav.
   backdrop-filter na rodzicu robi z niego blok zawierajacy dla position:fixed,
   przez co pelnoekranowe menu mobilne zwijalo sie do wysokosci paska. */
.pdk-nav::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background: rgba(20, 16, 14, 0.72);
	backdrop-filter: blur(12px);
	pointer-events: none;
}
.pdk-nav__brand, .pdk-nav__right { position: relative; z-index: 1; }
.pdk-nav__brand { display: flex; align-items: center; gap: 10px; }
.pdk-nav__logo { margin: 0; }
.pdk-nav__logo img { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: block; }
.pdk-nav__name { margin: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 0.5px; }
.pdk-nav__name a { color: #EBE9E1; text-decoration: none; }

.pdk-nav__right { display: flex; align-items: center; gap: 34px; }
.pdk-nav__menu .wp-block-navigation__container { gap: 34px; }
.pdk-nav__menu a { color: #EBE9E1; font-size: 15px; font-weight: 500; opacity: .85; text-decoration: none; }
.pdk-nav__menu a:hover { opacity: 1; color: #EBE9E1; }

.pdk-nav__cta { margin: 0; }
.pdk-nav__cta a {
	background: #1B4FE0; color: #EBE9E1;
	padding: 11px 22px; border-radius: 100px;
	font-weight: 700; font-size: 14px; letter-spacing: 0.3px;
	text-decoration: none; display: inline-block; transition: background .2s;
}
.pdk-nav__cta a:hover { background: #3D7CC9; color: #EBE9E1; }


@media (max-width: 900px) { .pdk-nav__right { gap: 18px; } .pdk-nav__menu .wp-block-navigation__container { gap: 18px; } }

/* --- Nawigacja na wezszych ekranach ---
   WordPress przelacza menu na burgera dopiero ponizej 600px, wiec styl
   burgera musi siedziec w tym samym progu, inaczej w pasie 600-700px
   widac naraz burgera i pelne menu. */
@media (max-width: 780px) {
	.pdk-nav { padding: 12px 5%; gap: 10px; }
	.pdk-nav__brand { gap: 8px; min-width: 0; }
	.pdk-nav__logo img { width: 28px; height: 28px; border-radius: 7px; }
	.pdk-nav__name { font-size: 16px; letter-spacing: 0.3px; white-space: nowrap; }
	.pdk-nav__right { gap: 14px; flex-shrink: 0; }
	.pdk-nav__cta a { padding: 9px 16px; font-size: 13px; white-space: nowrap; }
	.pdk-nav__menu .wp-block-navigation__container { gap: 14px; }
	.pdk-nav__menu a { font-size: 14px; }
}
@media (max-width: 599px) {
	.pdk-nav__cta { order: 1; }
	.pdk-nav__menu { order: 2; }
	.pdk-nav__menu .wp-block-navigation__responsive-container-open {
		color: #EBE9E1; padding: 0; display: flex; align-items: center;
	}
	.pdk-nav__menu .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
}

/* --- Pelnoekranowe menu mobilne --- */
.pdk-nav__menu .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	font-family: 'Manrope', sans-serif;
}
.pdk-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 96px 8% 48px;
	align-items: flex-start;
	justify-content: flex-start;
}
.pdk-nav__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 26px;
	align-items: flex-start;
}
.pdk-nav__menu .wp-block-navigation__responsive-container.is-menu-open a {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: #EBE9E1;
	opacity: 1;
	letter-spacing: 0.3px;
}
.pdk-nav__menu .wp-block-navigation__responsive-container.is-menu-open .current-menu-item a { color: #1DC9EF; }
.pdk-nav__menu .wp-block-navigation__responsive-container-close {
	color: #EBE9E1;
	padding: 22px 7% 0 0;
}
.pdk-nav__menu .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }
@media (max-width: 380px) {
	.pdk-nav__name { font-size: 15px; }
	.pdk-nav__cta a { padding: 8px 13px; font-size: 12px; }
	.pdk-nav__right { gap: 9px; }
}

/* WooCommerce: sklep, produkt, koszyk - odsuniecie spod stalej nawigacji. */
body.woocommerce .wp-site-blocks > .wp-block-group,
body.woocommerce-page .wp-site-blocks > .wp-block-group {
	padding: 120px 5% 100px;
}