/* OTSS – paleta z grafiki klientki. Zmienne bazowe motywu + akcenty słoneczne. */
:root {
  --otss-indygo: #283b90;
  --otss-granat: #0f1a50;
  --otss-niebieski: #084ba9;
  --otss-blekit: #549dec;
  --otss-blekit-jasny: #b2dbfb;
  --otss-tlo: #eef4fe;
  --otss-zolty: #fbdb37;
  --otss-bursztyn: #f7ba38;
  --otss-pomarancz: #ee7b03;
  --otss-akcent: #fdbd2f; /* akcent od klientki (30.10) – małe elementy */

  --body-bg: var(--otss-tlo);
  --headings-color: var(--otss-granat);
  --text-color: #4a5677;
}

/* Zmienne motywu, które w style-main.css miały brązy/zielenie. */
:root {
  --body-font-bold-color: var(--otss-granat);
  --link-color: var(--otss-niebieski);
  --link-hover-color: var(--otss-blekit);
  --section-title-color: var(--otss-granat);
  --section-title-subtitle-color: var(--otss-indygo);
  --default-header-menu-color: var(--otss-granat);
  --mobile-menu-item-link-text-color-hover: var(--otss-niebieski);
  --form_control_common_bg: rgba(238, 244, 254, 0.7);
  --form_control_common_border: rgba(178, 219, 251, 0.6);
}

/* Kwadracik przed podtytułem sekcji (uploads/2026/05/icon.png, złoty 8×8) → akcent #FDBD2F. */
img.title-icon[src$="/2026/05/icon.png"] {
  content: url(kwadrat.png);
}

/* Hover kart cennika (mascot-core pricing-skin-style1 ma #00142b na sztywno). */
body .pricing-plan-skin-style1 .pricing-plan-inner-wrapper .price-block .inner-block:before {
  background: linear-gradient(0deg, var(--otss-indygo) 0%, var(--otss-indygo) 44.32%);
}

/* Strona główna – ciemne sekcje w indygo (Kontakt b4d0eaf, „Features” 954ff24):
   akcent motywu przełączony na #FDBD2F, żeby ikony i linki nie znikały na tle. */
.elementor-element-b4d0eaf,
.elementor-element-954ff24 {
  --theme-color1: var(--otss-akcent);
  --theme-color1-rgb: 253, 189, 47;
  --theme-color1-text-color: var(--otss-granat);
  --hover-theme-color: var(--otss-akcent);
  --link-color: var(--otss-akcent);
  --link-hover-color: #fff;
}
.elementor-element-954ff24 a:not(.btn):not(.arrow-icon) { color: var(--otss-akcent); }
.elementor-element-954ff24 a:not(.btn):not(.arrow-icon):hover { color: #fff; }
.elementor-element-954ff24 .features-block-style4 .icon-box i { color: var(--otss-akcent); }

/* Hero (szablon 2672): kursywa „Szkolenia” w akcencie #FDBD2F. */
.elementor-2672 .elementor-element.elementor-element-9161a94 .tm-text-editor h4 { color: var(--otss-akcent); }

/* Akcent #FDBD2F w drobnych elementach (tylko dekoracja – tekst na jasnym tle zostaje niebieski/granatowy,
   bo żółty na białym ma ~1.7:1). */
.m16-filtr__panel { border-left-color: var(--otss-akcent); }
body .pricing-block-style1 .inner-box.active .arrow-icon,
body .pricing-block-style1 .inner-box:hover .arrow-icon { background-color: var(--otss-akcent); }
body .pricing-block-style1 .inner-box.active .arrow-icon svg,
body .pricing-block-style1 .inner-box:hover .arrow-icon svg { filter: brightness(0); }
.btn-view-details .btn-plain-text,
.m16-terminy__wiecej { text-decoration-color: var(--otss-akcent); }
.menuzord-menu > li > a::after,
.elementor-nav-menu--main .elementor-item::after { background-color: var(--otss-akcent); }
.tm-footer .widget-title,
.footer-widget-area .widget-title { color: var(--otss-akcent); }
::selection { background: var(--otss-akcent); color: var(--otss-granat); }

/* Hero, napis obrócony przy karcie (el. 827e7d7 na stronie 3699, np. „Black Friday”):
   zawsze jedna linia, #FDBD2F, wielkość dopasowana do wysokości karty; obrót wokół lewego dolnego rogu,
   więc tekst biegnie od dołu karty w górę, tuż przy jej lewej krawędzi (na zdjęciu – żółty na białym byłby nieczytelny).
   W CSS, bo ustawienia widgetu w Elementorze nadpisywałyby się przy edycji strony. */
body:not(.rtl) .elementor-3699 .elementor-element.elementor-element-827e7d7.elementor-absolute {
  width: max-content;
  max-width: none;
  left: -14px;
  bottom: 28px;
  top: auto;
  --e-transform-origin-x: left;
  --e-transform-origin-y: bottom;
}
body .elementor-3699 .elementor-element.elementor-element-827e7d7 > .elementor-widget-container {
  transform-origin: left bottom;
}
body .elementor-3699 .elementor-element.elementor-element-827e7d7 .tm-text-editor,
body .elementor-3699 .elementor-element.elementor-element-827e7d7 .tm-text-editor * {
  white-space: nowrap;
  color: var(--otss-akcent);
  font-size: clamp(44px, 4.6vw, 72px);
  line-height: 1;
}