/* Plakietka „ARIA w Forbes" na stronie glownej (operator 23.10: zamiast paska przez cala szerokosc pod menu —
   wjezdza z prawej tuz nad przyciskami „Podstawowy / Zaawansowany", po chwili zwija sie do samego „ARIA W Forbes").
   Dziala tylko na desktopie (≥ 782 px) i tylko gdy JS przeniosl pasek do hero (klasa .fb-hero); telefon = oryginal (pasek na dole). */
@media (min-width: 782px) {
  .aria-forbes-bar.fb-hero {
    position: absolute !important; top: auto !important; bottom: 128px !important;   /* zdjecie siega ~100 px pod formularz: przyciski sa 100 px nad dolem cover */ left: auto !important; right: 18px !important;
    z-index: 4; color: #111827 !important; width: auto !important; max-width: none !important; min-height: 50px !important; margin: 0 !important;
    padding: 8px 10px 8px 18px !important; gap: 14px !important; overflow: hidden; white-space: nowrap;
    transform: translateX(calc(100% + 60px)); opacity: 0;
    transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, padding .45s ease, gap .45s ease;
  }
  .aria-forbes-bar.fb-hero.fb-wjazd { transform: translateX(0); opacity: 1; }
  .aria-forbes-bar.fb-hero.fb-nisko { bottom: 28px !important; }
  .aria-forbes-bar.fb-hero .aria-forbes-bar__copy { margin: 0; font-size: 14px; max-width: 520px; color: #111827 !important; text-shadow: none; }   /* w hero tekst dziedziczy bialy — nadpisujemy */
  .aria-forbes-bar.fb-hero .aria-forbes-bar__copy,
  .aria-forbes-bar.fb-hero .aria-forbes-bar__link,
  .aria-forbes-bar.fb-hero .aria-forbes-bar__close {
    transition: max-width .45s ease, opacity .3s ease, margin .45s ease, padding .45s ease; max-width: 600px; overflow: hidden; opacity: 1;
  }
  /* zwiniecie: zostaje tylko „ARIA W Forbes"; calosc jest linkiem (klik = artykul), po najechaniu rozwija sie z powrotem */
  .aria-forbes-bar.fb-hero.fb-zwiniety:not(:hover):not(:focus-within) { padding-right: 18px !important; gap: 0 !important; cursor: pointer; }
  .aria-forbes-bar.fb-hero.fb-zwiniety:not(:hover):not(:focus-within) .aria-forbes-bar__copy,
  .aria-forbes-bar.fb-hero.fb-zwiniety:not(:hover):not(:focus-within) .aria-forbes-bar__link,
  .aria-forbes-bar.fb-hero.fb-zwiniety:not(:hover):not(:focus-within) .aria-forbes-bar__close {
    max-width: 0; opacity: 0; margin: 0; padding-left: 0; padding-right: 0; pointer-events: none;
  }
  .aria-forbes-bar.fb-hero.fb-zwiniety:hover { box-shadow: 0 18px 44px rgba(46, 112, 164, .28); }
}
@media (prefers-reduced-motion: reduce) {
  .aria-forbes-bar.fb-hero, .aria-forbes-bar.fb-hero * { transition: none !important; }
}

/* jak w pogoda.css: regula motywu dla span w .baner-page .wp-block-cover malowala szare tlo pod napisami plakietki */
.baner-page .wp-block-cover .aria-forbes-bar span { background-color: transparent !important; }

/* Bez przeskoku: na desktopie pasek motywu (pozycja fixed u gory) jest niewidoczny, dopoki forbes.js nie przeniesie go do hero (.fb-hero)
   albo nie zostawi u gory na stronie bez hero (.fb-top). Wczesniej pokazywal sie u gory do czasu zaladowania strony (operator 23.10). */
@media (min-width: 782px) { .aria-forbes-bar:not(.fb-hero):not(.fb-top) { display: none !important; } }

/* Telefon (< 782 px): zamiast paska na dole ekranu — znaczek w prawym gornym rogu zdjecia hero (forbes.js dodaje .fb-mobile). */
@media (max-width: 781px) {
  .aria-forbes-bar.fb-mobile { position: absolute !important; top: auto !important; right: 12px !important; left: auto !important; bottom: 12px !important;   /* prawy DOLNY rog: u gory nachodzil na pogode */
    width: auto !important; max-width: none !important; margin: 0 !important; padding: 6px 11px !important; border-radius: 999px !important;
    background: rgba(255, 255, 255, .94) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .22) !important; display: flex !important; align-items: center;
    gap: 6px; z-index: 5; transform: none !important; opacity: 1 !important; cursor: pointer; border: 0 !important;
    min-height: 0 !important; height: auto !important; line-height: 1 !important; }
  .aria-forbes-bar.fb-mobile::before, .aria-forbes-bar.fb-mobile::after { display: none !important; content: none !important; }
  .aria-forbes-bar.fb-mobile .aria-forbes-bar__copy, .aria-forbes-bar.fb-mobile .aria-forbes-bar__close, .aria-forbes-bar.fb-mobile .aria-forbes-bar__link { display: none !important; }
  .aria-forbes-bar.fb-mobile .aria-forbes-bar__eyebrow { display: inline-flex; align-items: baseline; gap: 5px; margin: 0; font-size: 10px; color: #111827; }
  .aria-forbes-bar.fb-mobile .aria-forbes-bar__logo { font-size: 14px; }
  .aria-forbes-bar.fb-mobile .aria-forbes-bar__eyebrow::after { content: "→"; font-size: 13px; margin-left: 2px; color: #1e3a8a; }
}