/*
 * Podstrona „O nas” — submenu sekcji i wygląd treści blokowej na pełną szerokość.
 *
 * Wyłącznie wartości przez var(--token) z tokens.css.
 */

/* ——— Submenu sekcji ——— */

.section-nav {
  margin-bottom: var(--space-md);
}

.section-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-nav__link {
  /* Blokowy pseudoelement niżej potrzebuje kontenera — w czystym inline by go nie było. */
  display: inline-block;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

/*
 * Kopia tytułu w pogrubieniu, schowana na zerowej wysokości, rezerwuje szerokość
 * pozycji. Bez niej pogrubienie aktywnej pozycji przesuwałoby sąsiednie linki.
 */
.section-nav__link::after {
  content: attr(data-title);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 700;
  visibility: hidden;
}

/* Wskazanie kursorem samo w sobie nic nie oznacza — wystarczy ciemniejszy tekst. */
.section-nav__link:hover {
  color: var(--color-text);
}

/*
 * Kliknięcie kotwicy zostawia focus na linku, więc :focus wystarcza za wskazanie
 * bieżącej sekcji i działa dla każdej pozycji, nie tylko dla wymienionych niżej.
 */
.section-nav__link:focus {
  color: var(--color-text);
  font-weight: 700;
}

/*
 * Wyróżnienie zostaje też po odejściu focusu — dopasowanie linku do sekcji wskazanej
 * w adresie wymaga wymienienia kotwic, bo CSS nie porówna href z :target sam z siebie.
 * Zmiana nagłówka w edytorze wyłącza tę regułę, ale :focus wyżej zostaje.
 */
body:has(#nasza-spoldzielnia:target) .section-nav__link[href="#nasza-spoldzielnia"],
body:has(#struktury:target) .section-nav__link[href="#struktury"],
body:has(#biblioteczka-spoldzielcza:target) .section-nav__link[href="#biblioteczka-spoldzielcza"],
body:has(#boleslaw-prus:target) .section-nav__link[href="#boleslaw-prus"] {
  color: var(--color-text);
  font-weight: 700;
}

/* ——— Treść ——— */

/* Sekcje idą na całą szerokość kontenera, nie w wąskiej kolumnie tekstu wpisu. */
.page-about .entry-content {
  max-width: none;
  font-size: var(--font-size-sm);
}

/* Kotwica nie może wypaść tuż przy krawędzi okna — inaczej nagłówek dotyka górnej ramki. */
.page-about .entry-content [id] {
  scroll-margin-top: var(--space-md);
}

/* ——— Nagłówki sekcji ——— */

/*
 * Znacznik leży poza tokiem tekstu — przy układzie flex nagłówek rozpadłby się na
 * osobne elementy i wyróżniony fragment dostałby przerwy z obu stron.
 *
 * Przesunięcie pionowe centruje znacznik w pierwszej linii: połowa różnicy między
 * wysokością wiersza a wysokością znacznika, liczona z tokenów, więc trzyma się
 * także przy zmienionej skali czcionki.
 */
.page-about .entry-content :is(h2, h3) {
  position: relative;
}

.page-about .entry-content :is(h2, h3)::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0.75rem;
  height: 1rem;
  background-color: var(--color-accent);
}

.page-about .entry-content h2 {
  padding-left: calc(0.75rem + var(--space-sm));
  font-size: var(--font-size-xl);
}

.page-about .entry-content h2::before {
  top: calc((var(--font-size-xl) * var(--line-height) - 1rem) / 2);
  mask: url("../img/section-marker.svg") no-repeat center / contain;
}

/* Podnagłówek działu — mniejszy i bez pogrubienia, z pustym wariantem znacznika. */
.page-about .entry-content h3 {
  padding-left: calc(0.75rem + var(--space-xs));
  font-weight: 400;
  font-size: var(--font-size-h4);
}

.page-about .entry-content h3::before {
  top: calc((var(--font-size-h4) * var(--line-height) - 1rem) / 2);
  mask: url("../img/heading-marker.svg") no-repeat center / contain;
}

/* ——— Układ sekcji ——— */

/* Kreska rozdzielająca sekcje potrzebuje więcej powietrza niż zwykły odstęp treści. */
.page-about .entry-content .wp-block-separator {
  margin-block: var(--space-lg);
}

/*
 * Szerokości kolumn nie sumują się do stu procent — wolne miejsce staje się przerwą
 * między nimi. Tak wyglądają szerokie odstępy z projektu, bez dokładania własnych
 * marginesów. Kolumny bez zadeklarowanej szerokości rozkładają się równo i reguła
 * ich nie dotyczy.
 */
.page-about .entry-content .wp-block-columns {
  justify-content: space-between;
}

/*
 * Na wąskim ekranie WordPress układa kolumny jedna pod drugą w kolejności z edytora,
 * a w sekcji o Bolesławie Prusie zdjęcie stoi jako pierwsze. Portret zajmowałby wtedy
 * cały pierwszy ekran, więc kolumna z nim schodzi pod tekst. Punkt łamania 781 px jest
 * ten sam, przy którym kolumny przestają stać obok siebie.
 */
@media (max-width: 781px) {
  .page-about .entry-content #boleslaw-prus > .wp-block-column:first-child {
    order: 1;
  }
}

/*
 * Kolejne akapity w kolumnie stoją bliżej niż zwykłe bloki treści — tak wygląda skład
 * organów w projekcie. Warunek na sam akapit, bo para nagłówek + akapit w sekcjach ze
 * zdjęciem ma zachować pełny odstęp.
 */
.page-about .entry-content .wp-block-column > p + p {
  margin-block-start: var(--space-sm);
}