/*
 * Dekaro – połączenie projektu z Elementorem.
 * Wygląd elementów jest w dekaro.css; tu są: kolory/czcionki globalne, kontenery i siatki (Container / Grid)
 * oraz dodatki dla WordPressa. Wartości ustawione w panelu Elementora zawsze wygrywają z tymi domyślnymi
 * (selektory z :where() mają niską ważność).
 */

/* 1. Kolory i czcionki z Elementor → Ustawienia witryny (pozycje „Dekaro …”). Bez nich – kolory z projektu. */
body.dekaro {
  --dk-red: var(--e-global-color-dkred, #AD2323);
  --dk-red-deep: var(--e-global-color-dkreddeep, #8C1B1B);
  --dk-graphite: var(--e-global-color-dkgraphite, #303030);
  --dk-ink: var(--e-global-color-dkink, #1F1F1F);
  --dk-paper: var(--e-global-color-dkpaper, #EDEDED);
  --dk-stone: var(--e-global-color-dkstone, #F6F6F6);
  --dk-line: var(--e-global-color-dkline, #D6D6D6);
  --dk-muted: var(--e-global-color-dkmuted, #5C5C5C);
  --dk-font: var(--e-global-typography-dktext-font-family, "Albert Sans"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 2. Kontenery z jednym widżetem-sekcją (hero, oferta, formularze…) – pełna szerokość, bez odstępów. */
.dekaro .e-con.dk-wrap,
.dekaro .elementor-section.dk-wrap {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --margin-top: 0px; --margin-bottom: 0px;
  --content-width: 100%; --container-max-width: 100%;
  padding: 0; margin: 0;
}
.dekaro .e-con.dk-wrap > .e-con-inner { max-width: none; padding: 0; gap: 0; }
.dekaro .elementor-section.dk-wrap > .elementor-container { max-width: none; }
.dekaro .elementor-section.dk-wrap .elementor-column > .elementor-widget-wrap { padding: 0; }
.dekaro .elementor-widget[class*="elementor-widget-dk-"] { width: 100%; max-width: 100%; margin: 0; }
.dekaro .elementor-widget[class*="elementor-widget-dk-"] > .elementor-widget-container { margin: 0; padding: 0; }

/*
 * 3. Sekcje zbudowane z kontenerów: kontener „dk-section” (pełna szerokość tła, treść w szerokości projektu)
 *    → elementy i siatki w środku. Odstępy sekcji: klasy dk-section--tight / --flush-top / --flush-bottom
 *    albo pola „Dopełnienie” w zakładce Zaawansowane kontenera.
 */
:where(.dekaro) .e-con.dk-section {
  --padding-top: var(--dk-pad); --padding-bottom: var(--dk-pad);
  --padding-left: var(--dk-gutter); --padding-right: var(--dk-gutter);
  --container-max-width: var(--dk-max);
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
}
:where(.dekaro) .e-con.dk-section--tight { --padding-top: clamp(56px, 7vw, 96px); --padding-bottom: clamp(56px, 7vw, 96px); }
:where(.dekaro) .e-con.dk-section--flush-top { --padding-top: 0px; }
:where(.dekaro) .e-con.dk-section--flush-bottom { --padding-bottom: 0px; }

/* Siatki i kontenery w sekcji – bez własnych odstępów (odstępy między elementami ustawia „Przerwy” siatki). */
:where(.dekaro) .e-con.dk-grid,
:where(.dekaro) .e-con.dk-box { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; }
:where(.dekaro) .e-con.dk-box { --gap: 0px; --row-gap: 0px; --column-gap: 0px; }
.dekaro .e-con.e-grid > .elementor-element { min-width: 0; }
/* Kafelki w siatce mają równą wysokość w rzędzie (element wypełnia komórkę siatki). */
.dekaro .e-con.e-grid > .elementor-widget[class*="elementor-widget-dk-"],
.dekaro .e-con.e-grid > .elementor-widget[class*="elementor-widget-dk-"] > .elementor-widget-container { display: flex; flex-direction: column; }
.dekaro .e-con.e-grid > .elementor-widget[class*="elementor-widget-dk-"] > .elementor-widget-container { flex: 1 1 auto; }
.dekaro .e-con.e-grid > .elementor-widget > :is(.dk-card, .dk-benefit, .dk-stat, .dk-step, .dk-tile, .dk-media--tall),
.dekaro .e-con.e-grid > .elementor-widget > .elementor-widget-container > :is(.dk-card, .dk-benefit, .dk-stat, .dk-step, .dk-tile, .dk-media--tall) { flex: 1 1 auto; }

/* Przyklejone kolumny (proces, nagłówek obok kroków) – element w kontenerze trzyma się ekranu podczas przewijania. */
.dekaro .e-con.dk-process__aside { position: sticky; top: calc(var(--dk-header) + 40px); align-self: start; }
@media (max-width: 1024px) { .dekaro .e-con.dk-process__aside { position: static; } }

/* Zwykłe widżety Elementora wstawione między sekcje Dekaro – w kontenerze o szerokości projektu. */
.dekaro .e-con:not(.dk-wrap) { --container-max-width: var(--dk-max); }

/* 4. Pasek administratora nie zasłania nagłówka. */
.dekaro.admin-bar .dk-header { top: 32px; }
@media (max-width: 782px) { .dekaro.admin-bar .dk-header { top: 46px; } }
@media (max-width: 600px) { .dekaro.admin-bar .dk-header { top: 0; } }

/* 5. Edycja szablonów nagłówka i stopki w Elementorze – nagłówek w normalnym przepływie, żeby łatwo go zaznaczyć. */
.single-elementor_library.dekaro .dk-header { position: relative; transform: none !important; }
.single-elementor_library.dekaro .dk-mbar { position: relative; display: flex; transform: none; left: auto; right: auto; bottom: auto; margin: 12px; max-width: 520px; }
.single-elementor_library.dekaro .dk-totop { display: none; }
.elementor-editor-active.dekaro .dk-header.is-hidden { transform: none; }
.elementor-editor-active.dekaro .dk-totop,
.elementor-editor-active.dekaro .dk-mbar { display: none; }
/* W edytorze karty oferty nie są przyklejone – łatwiej je zaznaczać. */
.elementor-editor-active.dekaro .dk-stack__card { position: relative; top: auto; transform: none; }

/* 6. Strony bez Elementora (wpisy, archiwa) – treść w typografii Dekaro. */
.dekaro .dk-main > .dk-article .dk-prose img { border-radius: 18px; height: auto; }
.dekaro .dk-prose .wp-block-image figcaption { font-size: 14px; color: var(--dk-muted); margin-top: 8px; }
.dekaro .dk-article__media img { height: auto; }