/**
 * pysiecmenu_footer - kolumny stopki (Sklep / Pysiec / Pomoc + blok marki).
 * Renderuje się wewnątrz .footer.footer__main (natywnie już ciemne tło -
 * patrz assets/css/custom.css, sekcja stopki, gdzie dostrajamy je do dokładnego
 * odcienia espresso z makiety). Kolory dobrane pod ciemne tło, 1:1 z makietą.
 */

.pysiec-menufooter__brand .pysiec-menufooter__logo {
  font-family: var(--pysiec-font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
}

.pysiec-menufooter__logo-dot {
  color: var(--pysiec-brand);
}

.pysiec-menufooter__tagline {
  margin: 0.625rem 0 0;
  max-width: 30ch;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(250, 248, 243, 0.8);
}

/* .pysiec-menufooter__col-title jest teraz <summary> (details/summary,
   akordeon na mobile - patrz menufooter.js) - domyślny trójkąt/marker
   przeglądarki ukryty na WSZYSTKICH szerokościach, na desktopie ma wyglądać
   dokładnie jak dawny goły <span>. */
.pysiec-menufooter__col-title {
  display: block;
  margin-bottom: 0.5625rem;
  font-family: var(--pysiec-font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  cursor: default;
  list-style: none;
}

.pysiec-menufooter__col-title::-webkit-details-marker {
  display: none;
}

.pysiec-menufooter__col-title::marker {
  content: '';
}

.pysiec-menufooter__col-list {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.pysiec-menufooter__col-list a {
  color: rgba(250, 248, 243, 0.82);
  text-decoration: none;
}

.pysiec-menufooter__col-list a:hover,
.pysiec-menufooter__col-list a:focus-visible {
  color: var(--pysiec-brand);
}

/**
 * ps_emailsubscription (natywny) jako 5. kolumna - jego domyślne .pysiec-newsletter__*
 * kolory z custom.css są dobrane pod jasne tło (gdzie widget wisi na displayFooterBefore),
 * tu trzeba przebić na ciemny wariant 1:1 z makiety (linie 2836-2843): tytuł/tekst biały,
 * input przezroczysty na ciemnym tle (nie kremowy jak w jasnym wariancie).
 */
.pysiec-menufooter__newsletter .pysiec-newsletter {
  max-width: none;
}

.pysiec-menufooter__newsletter .pysiec-newsletter__title {
  font-family: var(--pysiec-font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  margin: 0 0 0.5rem;
}

.pysiec-menufooter__newsletter .pysiec-newsletter__subtitle {
  font-size: 0.8125rem;
  color: rgba(250, 248, 243, 0.8);
  margin: 0 0 0.75rem;
}

.pysiec-menufooter__newsletter .pysiec-newsletter__input {
  height: 2.75rem;
  background: rgba(250, 248, 243, 0.08);
  border: 1px solid rgba(250, 248, 243, 0.3);
  color: #faf8f3;
}

.pysiec-menufooter__newsletter .pysiec-newsletter__input::placeholder {
  color: rgba(250, 248, 243, 0.55);
}

.pysiec-menufooter__newsletter .pysiec-newsletter__input:focus {
  background: rgba(250, 248, 243, 0.14);
  border-color: var(--pysiec-brand);
}

.pysiec-menufooter__newsletter .pysiec-newsletter__submit {
  height: 2.75rem;
}

.pysiec-menufooter__newsletter .pysiec-newsletter__conditions {
  color: rgba(250, 248, 243, 0.6);
}

/**
 * Akordeon na mobile - kolumny domyślnie zwinięte (menufooter.js zdejmuje
 * "open" przy starcie poniżej 767.98px), tytuł dostaje strzałkę i staje się
 * klikalny, dywider między kolumnami zamiast samego odstępu (mniej gubi się
 * bez otwartej listy pod spodem). Użytkownik: stopka "taka sama duża" na
 * telefonie mimo skróconego tabbara. Sesja 2026-09-20.
 */
@media (max-width: 767.98px) {
  .pysiec-menufooter__col {
    border-top: 1px solid rgba(250, 248, 243, 0.16);
    padding-top: 0.75rem;
  }

  .pysiec-menufooter__col-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding-bottom: 0.75rem;
  }

  .pysiec-menufooter__col-title::after {
    content: '+';
    font-size: 1.125rem;
    font-weight: 400;
    color: rgba(250, 248, 243, 0.6);
  }

  .pysiec-menufooter__col[open] .pysiec-menufooter__col-title::after {
    content: '−';
  }

  .pysiec-menufooter__col-list {
    padding-bottom: 0.75rem;
  }

  /* Grid stopki wymuszony na 1 kolumnę na mobile (custom.css) - brand/newsletter
     nie mają własnego border-top jak .pysiec-menufooter__col (nie są akordeonem),
     więc dostają go tu osobno, żeby całość dalej wyglądała jak spójna, zwarta
     lista sekcji zamiast przypadkowo sklejonych bloków. */
  .pysiec-menufooter__brand {
    padding-bottom: 0.75rem;
  }

  .pysiec-menufooter__newsletter {
    border-top: 1px solid rgba(250, 248, 243, 0.16);
    padding-top: 0.75rem;
  }
}

/* Dane firmy pod hasłem w stopce - male, dyskretne (konfiguracja w BO). Sesja 2026-10-09. */
.pysiec-menufooter__company {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 0;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}

.pysiec-menufooter__company strong {
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
}