/*
 * elementor-overrides.css
 * ------------------------------------------------------------------
 * Treść strony jest teraz surowym kodem HTML zgodnym 1:1 z klasami
 * oryginalnego arkusza style.css (h1/h2/h3, .eyebrow, .lead, .script,
 * .card, .quote, .problem itd.) – dlatego większość reguł nie wymaga
 * już żadnych "obejść". Ten plik dopina tylko elementy, których
 * oryginalny projekt NIE przewidywał w tej formie: menu WordPress
 * (<ul><li>), widgety w nagłówku/stopce i formularz Contact Form 7.
 * ------------------------------------------------------------------
 */

/* ===== NAGŁÓWEK / MENU – wzmocnienie oryginalnego wyglądu (te same
   wartości co w style.css, tylko zabezpieczone !important, żeby żaden
   inny arkusz stylów – Elementora, wtyczki – nie mógł ich nadpisać).
   Układ (flex, kolejność, odstępy) pozostaje DOKŁADNIE taki sam jak
   w oryginalnym projekcie – nic tu nie zmienia struktury strony. ===== */
.site-header{
	position:sticky !important;
	top:0 !important;
	z-index:50 !important;
	background:rgba(255,252,246,.90) !important;
	backdrop-filter:blur(16px) !important;
	border-bottom:1px solid rgba(180,167,140,.35) !important;
}
.site-header .nav{
	min-height:78px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	gap:24px !important;
	flex-wrap:nowrap !important;
}
.site-header .brand{
	display:flex !important;
	align-items:center !important;
	gap:12px !important;
	min-width:max-content !important;
	text-decoration:none !important;
}
.site-header .brand-mark{
	width:44px !important;
	aspect-ratio:1 !important;
	border-radius:50% !important;
	position:relative !important;
	background:
		radial-gradient(circle at center,#493c24 0 16%,#8a6521 17% 25%,transparent 26%),
		repeating-conic-gradient(#e9b92f 0 12deg,#d79a13 12deg 24deg) !important;
	box-shadow:inset 0 0 0 5px rgba(255,255,255,.5) !important;
	flex-shrink:0 !important;
}
.site-header .brand-text strong{
	display:block !important;
	font-family:"Playfair Display",serif !important;
	font-size:1.22rem !important;
	color:var(--text,#2f311f) !important;
}
.site-header .brand-text span{
	display:block !important;
	font-size:.68rem !important;
	letter-spacing:.18em !important;
	text-transform:uppercase !important;
	color:#6e6a5e !important;
}
.site-header .menu{
	display:flex !important;
	align-items:center !important;
	gap:28px !important;
	font-size:.95rem !important;
	font-family:"DM Sans",sans-serif !important;
}
.site-header .menu a{
	position:relative !important;
	color:#2f311f !important;
	text-decoration:none !important;
}
.site-header .menu a::after{
	content:"" !important;
	position:absolute !important;
	left:0 !important;
	bottom:-8px !important;
	width:0 !important;
	height:2px !important;
	background:#d7a128 !important;
	transition:.2s ease !important;
}
.site-header .menu a:hover::after{ width:100% !important; }
.site-header .nav-actions{
	display:flex !important;
	align-items:center !important;
	gap:14px !important;
}
.site-header .phone{
	font-weight:600 !important;
	white-space:nowrap !important;
	color:#2f311f !important;
	text-decoration:none !important;
	font-family:"DM Sans",sans-serif !important;
}
.site-header .hamburger{
	display:none;
	border:0 !important;
	background:transparent !important;
	width:44px !important;
	height:44px !important;
	cursor:pointer !important;
	border-radius:10px !important;
	flex-shrink:0 !important;
}
.site-header .hamburger span{
	width:24px !important;
	height:2px !important;
	display:block !important;
	margin:5px auto !important;
	background:#2f311f !important;
}
.site-header .mobile-menu{ display:none; }

.site-header .btn{
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	gap:10px !important;
	min-height:50px !important;
	padding:0 24px !important;
	border-radius:999px !important;
	border:1px solid transparent !important;
	font-weight:700 !important;
	font-family:"DM Sans",sans-serif !important;
	transition:.25s ease !important;
	cursor:pointer !important;
	text-decoration:none !important;
	white-space:nowrap !important;
}
.site-header .btn-primary{
	background:#59603a !important;
	color:#fff !important;
	box-shadow:0 10px 30px rgba(73,82,48,.18) !important;
}
.site-header .btn-primary:hover{
	background:#404728 !important;
}

/* Punkt przełamania – identyczny jak w oryginale (1050px). */
@media (max-width:820px){
	.site-header .menu{ display:none !important; }
	.site-header .nav-actions .phone{ display:none !important; }
	.site-header .hamburger{ display:block !important; }

	.site-header .mobile-menu.open{
		display:block !important;
		position:absolute !important;
		left:0 !important;
		right:0 !important;
		top:78px !important;
		padding:20px !important;
		background:#fffaf3 !important;
		border-bottom:1px solid #ded5c4 !important;
		box-shadow:0 18px 30px rgba(50,45,30,.08) !important;
	}
	.site-header .mobile-menu a{
		display:block !important;
		padding:12px 6px !important;
		border-bottom:1px solid #eee4d5 !important;
		color:#2f311f !important;
		text-decoration:none !important;
		font-family:"DM Sans",sans-serif !important;
	}
}

@media (max-width:720px){
	.site-header .nav-actions .btn{ display:none !important; }
}

/* ===== MENU WORDPRESS – usunięcie domyślnych stylów <ul><li> ===== */
.menu,
.mobile-menu ul{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
}
.menu li,
.mobile-menu li{
	list-style:none !important;
	margin:0 !important;
}

/* ===== WIDGETY W NAGŁÓWKU (telefon + przycisk) =====
   Domyślnie WordPress owija każdy widget w <div class="widget ...">.
   "display:contents" sprawia, że ten wrapper znika z układu, a link
   w środku staje się bezpośrednim elementem flex .nav-actions –
   dokładnie tak jak w oryginalnym projekcie. */
.nav-actions .widget{
	display:contents;
}

/* ===== WIDGETY W STOPCE ===== */
.footer-col .widget{
	margin:0;
}
.footer-col .widget:not(:last-child){
	margin-bottom:0;
}

/* ===== FORMULARZ CONTACT FORM 7 =====
   Same pola (input/textarea) są już stylowane przez oryginalne reguły
   ".field input, .field textarea" z style.css (CF7 tylko dokłada
   dodatkowy <span> wokół pola, co nie przeszkadza selektorom
   potomnym). Tu dopinamy tylko elementy specyficzne dla CF7. */
.contact-box .wpcf7-response-output{
	border-radius:10px;
	padding:10px 14px;
	margin-top:14px;
	font-size:14px;
	border-width:1px;
}
.contact-box .wpcf7-not-valid-tip{
	color:#c0392b;
	font-size:13px;
	margin-top:4px;
	display:block;
}
.contact-box form.wpcf7-form{
	display:grid;
	gap:16px;
}
.contact-box .wpcf7-spinner{
	margin-left:10px;
}

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width:767px){
	.contact-box .form-row{ grid-template-columns:1fr !important; }
}

/* =========================================================================
 *  NATYWNE WIDGETY TREŚCI (Heading / Text Editor / Icon List / Button /
 *  Image) – reguły !important gwarantujące wygląd zgodny z oryginałem,
 *  niezależnie od domyślnych ustawień Global Kit Elementora (który,
 *  jeśli nie jest jawnie nadpisany, potrafi narzucić własne kolory i
 *  fonty na widgety Heading/Text Editor).
 * ========================================================================= */

/* ----- Nagłówki (h1–h6) ----- */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6{
	font-family:"Playfair Display", serif !important;
	color:#2f311f !important;
	font-weight:600 !important;
	line-height:1.15 !important;
	margin:0 0 10px !important;
}
.elementor-widget-heading h1{ font-size:clamp(2.2rem,5vw,3.6rem) !important; }
.elementor-widget-heading h2{ font-size:clamp(1.6rem,3.2vw,2.4rem) !important; }
.elementor-widget-heading h3{ font-size:1.5rem !important; }
.elementor-widget-heading h4{ font-size:1.2rem !important; }

/* Nagłówki na ciemnym tle (sekcja "Dla kogo?") są białe. */
.for-whom .elementor-widget-heading .elementor-heading-title{
	color:#ffffff !important;
}

/* ----- Domyślny tekst (dowolny Text Editor bez specjalnej klasy) -----
   Musi być PRZED regułami .eyebrow/.script/.lead poniżej, żeby te
   bardziej specyficzne warianty mogły ją nadpisać (przy równej
   specyficzności wygrywa reguła późniejsza w pliku). */
.elementor-widget-text-editor .elementor-text-editor,
.elementor-widget-text-editor p{
	font-family:"DM Sans", sans-serif !important;
	color:#2f311f !important;
	margin:0 0 10px !important;
}

/* ----- Eyebrow ----- */
.eyebrow .elementor-text-editor,
.eyebrow p{
	text-transform:uppercase !important;
	letter-spacing:.16em !important;
	font-weight:700 !important;
	font-size:14px !important;
	color:#8d742a !important;
	display:inline-flex !important;
	align-items:center !important;
	gap:10px !important;
}
.for-whom .eyebrow p{
	color:#f2d477 !important;
}
.eyebrow .elementor-text-editor::before,
.eyebrow p::before{
	content:"" !important;
	width:28px !important;
	height:1px !important;
	background:#d7a128 !important;
	display:inline-block !important;
}

/* ----- Script (duży, elegancki akcent) ----- */
.script .elementor-text-editor,
.script p{
	font-family:"Playfair Display", serif !important;
	color:#b77d13 !important;
	font-size:clamp(2rem,4vw,3.2rem) !important;
	line-height:1.1 !important;
}

/* ----- Lead (akapit wprowadzający) ----- */
.lead .elementor-text-editor,
.lead p{
	color:#6e6a5e !important;
	font-size:1.05rem !important;
	line-height:1.6 !important;
}

/* ----- Przyciski (widget Button użyty w treści strony, np. hero, warsztaty) ----- */
.elementor-widget-button .elementor-button{
	border-radius:999px !important;
	padding:14px 26px !important;
	font-weight:700 !important;
	font-family:"DM Sans", sans-serif !important;
	transition:.2s ease !important;
}
.btn-primary .elementor-button{
	background-color:#59603a !important;
	color:#ffffff !important;
	box-shadow:0 10px 30px rgba(73,82,48,.18) !important;
}
.btn-primary .elementor-button:hover{ background-color:#404728 !important; }
.btn-outline .elementor-button{
	background-color:rgba(255,255,255,.35) !important;
	color:#2f311f !important;
	border:1px solid #88856e !important;
}
.btn-outline .elementor-button:hover{
	background-color:#ffffff !important;
	border-color:#59603a !important;
}

/* ----- Karty zaufania (Bezpieczna przestrzeń itd.) ----- */
.trust-item{ text-align:left !important; }
.trust-item .icon-circle .elementor-text-editor,
.trust-item .icon-circle p{
	width:50px !important;
	height:50px !important;
	border:1px solid #ddb555 !important;
	border-radius:50% !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	color:#b77d13 !important;
	font-size:1.35rem !important;
	margin:0 0 12px !important;
}
.trust-item .elementor-widget-heading h4{
	font-size:1rem !important;
	margin:0 0 4px !important;
}
.trust-item .elementor-widget-text-editor .elementor-text-editor{
	color:#6e6a5e !important;
	font-size:.92rem !important;
}

/* ----- Karty oferty ----- */
.card{
	background-color:#fffdf9 !important;
	border:1px solid #ded5c4 !important;
	border-radius:24px !important;
	box-shadow:0 10px 30px rgba(62,53,34,.04) !important;
}
.card .card-number .elementor-text-editor,
.card .card-number p{
	font-family:"Playfair Display", serif !important;
	font-size:3rem !important;
	color:rgba(177,140,50,.30) !important;
	line-height:1 !important;
	margin:0 !important;
}
.card .elementor-widget-heading h3{
	font-size:1.3rem !important;
	margin:10px 0 !important;
}
.card .elementor-widget-text-editor .elementor-text-editor{
	color:#6e6a5e !important;
}

/* ----- Opinie ----- */
.quote{
	background-color:#f8f3ea !important;
	border:1px solid #ded5c4 !important;
	border-radius:22px !important;
	text-align:center !important;
}
.quote .elementor-widget-text-editor:first-child .elementor-text-editor{
	font-family:Georgia, serif !important;
	font-size:4rem !important;
	line-height:.6 !important;
	color:#d7a128 !important;
	margin:0 0 10px !important;
}
.quote .elementor-widget-text-editor p{
	color:#6e6a5e !important;
}
.quote .elementor-widget-text-editor strong{
	font-size:.92rem !important;
	color:#2f311f !important;
}

/* ----- Listy z ikonami (checkmarki) ----- */
.elementor-icon-list-item{ margin-bottom:10px !important; }
.elementor-icon-list-icon i,
.elementor-icon-list-icon svg{
	color:#d7a128 !important;
	fill:#d7a128 !important;
}
.elementor-icon-list-text{
	font-family:"DM Sans", sans-serif !important;
	color:#2f311f !important;
	font-size:.95rem !important;
	line-height:1.5 !important;
}

/* Lista na ciemnym tle (sekcja "Dla kogo?") – jasny tekst. */
.for-whom-list .elementor-icon-list-text{ color:#ffffff !important; }
.for-whom-list .elementor-icon-list-icon i,
.for-whom-list .elementor-icon-list-icon svg{ color:#f2d477 !important; fill:#f2d477 !important; }

/* ----- Portret w sekcji "O mnie" ----- */
.portrait-wrap .elementor-widget-image img{
	border-radius:24px !important;
	box-shadow:0 20px 60px rgba(79,67,38,.10) !important;
}

/* =========================================================================
 *  WYMUSZENIE SZEROKOŚCI KOLUMN (naprawa)
 *  Ustawienie szerokości kolumny przez pole Elementora ("_column_size")
 *  okazało się niewystarczające w tej instalacji – kolumny zapadały się
 *  do wąskiej szerokości niezależnie od zadanej proporcji. Poniższe
 *  reguły wymuszają właściwe proporcje bezpośrednio przez CSS na
 *  podstawie klas przypiętych do każdej kolumny – gwarantowane
 *  działanie niezależne od wewnętrznego mechanizmu Elementora.
 *  Na szerokościach poniżej 1050px kolumny wracają do jednej pod drugą
 *  (tak jak w oryginalnym projekcie).
 * ========================================================================= */
.hero-copy,
.hero-visual-col,
.trust-item,
.portrait-wrap,
.about-copy,
.card,
.for-whom-copy,
.for-whom-list-col,
.workshop-copy-col,
.workshop-visual-col,
.quote,
.contact-copy,
.contact-form-col{
	box-sizing:border-box !important;
}

@media (min-width:1051px){
	.hero-copy{ width:50% !important; flex:0 0 50% !important; max-width:50% !important; }
	.hero-visual-col{ width:50% !important; flex:0 0 50% !important; max-width:50% !important; }

	.trust-item{ width:25% !important; flex:0 0 25% !important; max-width:25% !important; }

	.portrait-wrap{ width:40% !important; flex:0 0 40% !important; max-width:40% !important; }
	.about-copy{ width:60% !important; flex:0 0 60% !important; max-width:60% !important; }

	.card{ width:33.3333% !important; flex:0 0 33.3333% !important; max-width:33.3333% !important; }

	.for-whom-copy{ width:45% !important; flex:0 0 45% !important; max-width:45% !important; }
	.for-whom-list-col{ width:55% !important; flex:0 0 55% !important; max-width:55% !important; }

	.workshop-copy-col{ width:55% !important; flex:0 0 55% !important; max-width:55% !important; }
	.workshop-visual-col{ width:45% !important; flex:0 0 45% !important; max-width:45% !important; }

	.quote{ width:33.3333% !important; flex:0 0 33.3333% !important; max-width:33.3333% !important; }

	.contact-copy{ width:45% !important; flex:0 0 45% !important; max-width:45% !important; }
	.contact-form-col{ width:55% !important; flex:0 0 55% !important; max-width:55% !important; }
}

/* Poniżej 1050px – wszystko jedna kolumna pod drugą (jak w oryginale). */
@media (max-width:1050px){
	.hero-copy,
	.hero-visual-col,
	.portrait-wrap,
	.about-copy,
	.for-whom-copy,
	.for-whom-list-col,
	.workshop-copy-col,
	.workshop-visual-col,
	.contact-copy,
	.contact-form-col{
		width:100% !important;
		flex:0 0 100% !important;
		max-width:100% !important;
	}
	.trust-item{ width:50% !important; flex:0 0 50% !important; max-width:50% !important; }
	.card,
	.quote{ width:50% !important; flex:0 0 50% !important; max-width:50% !important; }
}
@media (max-width:720px){
	.trust-item,
	.card,
	.quote{ width:100% !important; flex:0 0 100% !important; max-width:100% !important; }
}

/* Wiersz Elementora musi pozwalać kolumnom zawijać się na wąskich ekranach. */
@media (max-width:1050px){
	.elementor-section.elementor-section-boxed > .elementor-container{
		flex-wrap:wrap !important;
	}
}