/* Concept Quantum - paleta "Naturalna terapia" - dopelnienie do _style-default.css */
/* Glowne zmienne kolorow i fontow siedza w :root w _style-default.css */

@media all {

	/* Tlo strony - cieply off-white zamiast standardowego white var */
	body {
		background-color: #faf7f2;
		color: #2a2a2a;
		font-family: var(--font-family-text);
		font-size: 1.05rem;
		line-height: 1.7;
	}

	/* H1, H2 - elegancki serif Cormorant Garamond (z var) */
	h1, .h1 { font-weight: 700; letter-spacing: -0.5px; color: #2a2a2a; }
	h2, .h2 { font-weight: 600; letter-spacing: -0.3px; color: #2a2a2a; }

	/* H3, H4, H5, H6 - sans-serif Inter (override globalnego --font-family-header) */
	h3, .h3,
	h4, .h4,
	h5, .h5,
	h6, .h6 {
		font-family: var(--font-family-text);
		font-weight: 600;
		letter-spacing: 0;
		color: #2a2a2a;
	}

	/* Sekcje bg-grey-lighter - bezowy krem zamiast szarego */
	.bg-grey-lighter { background-color: #efe9de !important; }

	/* Linki w tresci - terakota z subtelnym podkresleniem */
	main a:not(.button):not(.button-outline):not(.no-underline),
	article a:not(.button):not(.button-outline):not(.no-underline),
	.section_container p a,
	.section_container li a {
		color: #b85a4a;
		text-decoration: underline;
		text-decoration-color: #d6cfc1;
		text-decoration-thickness: 1px;
		text-underline-offset: 3px;
		transition: all .2s ease;
	}
	main a:not(.button):not(.button-outline):not(.no-underline):hover,
	article a:not(.button):not(.button-outline):not(.no-underline):hover,
	.section_container p a:hover,
	.section_container li a:hover {
		color: #9c4a3c;
		text-decoration-color: #b85a4a;
	}

	/* Buttony - solid terakota (juz dziedziczy var(--mark)) + delikatny shadow + przejscie */
	a.button, .button {
		background: #b85a4a;
		color: #faf7f2 !important;
		border-radius: 1rem;
		font-family: var(--font-family-text);
		font-weight: 600;
		letter-spacing: 0.5px;
		text-decoration: none;
		box-shadow: 0 2px 8px rgba(184, 90, 74, 0.18);
		transition: all .25s ease;
	}
	a.button:hover, .button:hover {
		background: #9c4a3c;
		box-shadow: 0 4px 12px rgba(184, 90, 74, 0.28);
		transform: translateY(-1px);
	}

	/* Button outline - zarys terakota */
	a.button-outline, .button-outline {
		background: transparent;
		color: #b85a4a;
		border: 1.5px solid #b85a4a;
		border-radius: 1rem;
		padding: .65em 1em;
		font-family: var(--font-family-text);
		font-weight: 600;
		letter-spacing: 0.5px;
		text-decoration: none;
		display: inline-block;
		margin: 0 .2em;
		transition: all .25s ease;
	}
	a.button-outline:hover, .button-outline:hover {
		background: #b85a4a;
		color: #faf7f2;
	}

	/* Karty / boxy - soft shadow zamiast twardych ramek */
	.shadow, .card, .pages_contact > div, .testimonials_block, .galeria > div {
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
	}

	/* Material Symbols ikony - kolor terakota */
	.material-symbols-outlined.color-mark,
	.color-mark .material-symbols-outlined,
	.color-mark > span.material-symbols-outlined {
		color: #b85a4a;
	}

	/* Border / hr - jasny bez */
	hr, .border-grey-light { border-color: #d6cfc1 !important; }

	/* Tekst pomocniczy */
	.color-grey, small, .text-small { color: #6b6b6b; }

	/* Footer - utrzymanie ciemniejszego tla na ciemnym mchu */
	footer.footer_wrapper { background-color: #2e4530; color: #efe9de; }
	footer.footer_wrapper a { color: #efe9de; }
	footer.footer_wrapper a:hover { color: #c97565; }

}

@media (max-width: 1200px) {

}
@media (max-width: 1000px) {

}
@media (max-width: 700px) {
	body { font-size: 1rem; line-height: 1.65; }
}

/* === [BLOCK: feature-cards] START === */
/* Karty feature — duże ikony emoji w kółku, biały kafelek z subtelną ramką */
.feature-card {
	background:#fff; border:1px solid #E5E9F2; border-radius:16px;
	padding:1.5rem !important;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	height:100%;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -16px rgba(15,23,42,.18); border-color:#D1D5DB; }
.feature-card .feat-ico {
	display:inline-flex; align-items:center; justify-content:center;
	width:52px; height:52px; border-radius:12px; font-size:1.6rem;
	background:linear-gradient(135deg, rgba(14,190,127,.12), rgba(110,92,255,.12));
	margin-bottom:1rem;
}
.feature-card h3 { font-size:1.1rem !important; margin:.25rem 0 .5rem !important; color:#0F172A; line-height:1.3; }
.feature-card p { font-size:.92rem; color:#475569; line-height:1.55; margin:0; }

/* Wariant karty z plakietką „Gratis" / „W cenie" */
.feature-card .feat-tag {
	display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
	background:rgba(14,190,127,.12); color:var(--mark-dark);
	padding:.3rem .55rem; border-radius:6px; margin-bottom:.7rem;
}
/* === [BLOCK: feature-cards] END === */

/* === [BLOCK: section-eyebrow] START === */
/* Mała etykieta nad H2 z paskiem — np. "Co to jest", "Porównanie", "FAQ" */
.eyebrow {
	display:inline-flex; align-items:center; gap:.55rem;
	font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:var(--mark-dark); margin-bottom:.6rem;
}
.eyebrow::before {
	content:""; width:28px; height:2px; background:var(--mark); display:inline-block; border-radius:2px;
}
.bg-ok-ink .eyebrow, .bg-ok-ink-2 .eyebrow { color:var(--ok-cta); }
.bg-ok-ink .eyebrow::before, .bg-ok-ink-2 .eyebrow::before { background:var(--ok-cta); }
/* === [BLOCK: section-eyebrow] END === */

/* === [BLOCK: faq-pretty] START === */
/* Lifting domyślnego .faq z core — większy padding, ładny accordion z plus/minus */
.faq { max-width:860px; margin:0 auto; }
.faq .f {
	background:#fff !important; border:1px solid #E5E9F2 !important;
	border-radius:14px !important; padding:0 !important; margin-bottom:.7rem !important;
	overflow:hidden; transition: border-color .2s, box-shadow .2s;
}
.faq .f.active { border-color:rgba(14,190,127,.4) !important; box-shadow:0 8px 28px -10px rgba(14,190,127,.2); }
.faq .f h3 {
	padding:1.1rem 1.3rem !important; margin:0 !important;
	font-size:1.02rem !important; font-weight:600 !important; color:#0F172A;
	display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq .f h3 span.faq_arrow {
	float:none !important; flex-shrink:0;
	width:28px; height:28px; border-radius:50%;
	background:rgba(14,190,127,.12); color:var(--mark-dark);
	display:inline-flex !important; align-items:center; justify-content:center;
	font-size:1.1rem !important; transition: transform .2s, background .2s;
}
.faq .f.active h3 span.faq_arrow { background:var(--mark); color:#fff; transform:rotate(45deg); }
.faq .f .t { padding:0 1.3rem 1.2rem !important; color:#475569; line-height:1.6; font-size:.95rem; }
/* === [BLOCK: faq-pretty] END === */

/* === [BLOCK: section-spacing] START === */
/* Większy oddech w hero/features — ładniej niż domyślne 4rem.
   UWAGA: sekcja dnt_creator JEST kontenerem, nie ma dziecka .container.
   Dlatego selector na sekcji bezpośrednio. Inline style padding="" wygra
   z tym CSS — ale gdy padding jest pusty, klasa zadziała. */
section.section-tight { padding-top:1.5rem !important; padding-bottom:1.5rem !important; }
section.section-roomy { padding-top:5rem !important; padding-bottom:5rem !important; }
@media (max-width:700px){
	section.section-roomy { padding-top:3rem !important; padding-bottom:3rem !important; }
}
/* === [BLOCK: section-spacing] END === */

/* === [BLOCK: hero-light-warm] START === */
section.hero-light-warm {
  background: linear-gradient(135deg, #faf7f2 0%, #efe9de 100%);
}
.hero-banner {
  display: inline-block;
  background: rgba(184, 90, 74, .1);
  color: #b85a4a;
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: .02em;
}
section.hero-light-warm h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.15;
  margin: 0 0 1.5rem 0;
  font-family: var(--font-family-header), 'Cormorant Garamond', serif;
}
section.hero-light-warm h1 em {
  color: #b85a4a;
  font-style: normal;
  font-weight: inherit;
}
nav.neon { margin-top: 2rem; }
nav.neon a {
  display: inline-block;
  background: #b85a4a;
  color: #faf7f2;
  padding: 1rem 2rem;
  border-radius: .75rem;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(184, 90, 74, .3);
  transition: transform .25s, box-shadow .25s, background .25s;
}
nav.neon a:hover {
  background: #9c4a3d;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(184, 90, 74, .4);
}
/* === [BLOCK: hero-light-warm] END === */

/* === [BLOCK: cq-extras] START === */
/* Male CTA w feature-card - inline-block, terakota, link "Zobacz oferte ->" */
.feature-card .feat-cta {
    display: inline-block;
    color: #b85a4a;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
    font-size: .92rem;
    transition: color .2s, transform .2s;
}
.feature-card .feat-cta:hover {
    color: #9c4a3d;
    transform: translateX(2px);
}
/* feature-card-link - cala karta jako link, hover boost */
a.feature-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.feature-card-link:hover .feature-card {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px -16px rgba(184, 90, 74, .22);
    border-color: #d6cfc1;
}
/* === [BLOCK: cq-extras] END === */