/* ==========================================================================
   wnioski24.pl — czytelność wpisów i stron
   --------------------------------------------------------------------------
   INSTALACJA
   1. Wgraj ten plik do:  wp-content/themes/astra-child/assets/css/article.css
   2. W functions.php motywu potomnego dopisz:

      add_action( 'wp_enqueue_scripts', function () {
          if ( is_singular( array( 'post', 'page' ) ) ) {
              wp_enqueue_style(
                  'w24-article',
                  get_stylesheet_directory_uri() . '/assets/css/article.css',
                  array(),
                  filemtime( get_stylesheet_directory() . '/assets/css/article.css' )
              );
          }
      } );

   Warunek is_singular() sprawia, że plik ładuje się tylko tam, gdzie jest
   potrzebny — nie spowalnia sklepu ani strony głównej.

   Zmienne w :root można nadpisać z tokens.css, jeśli już go masz.
   ========================================================================== */

:root {
  --w24-navy: #0D1F35;
  --w24-gold: #C8922A;
  --w24-tekst: #23303D;
  --w24-szary: #5B6672;
  --w24-linia: #E3E7EC;
  --w24-tlo-blok: #FBFAF8;
  --w24-szerokosc: 62rem;   /* kolumna artykulu: naglowek + tresc razem */
  --w24-oddech: 1.25rem;    /* margines boczny na wąskich ekranach */
}

/* --------------------------------------------------------------------------
   1. KOLUMNA TEKSTU
   Główny problem: brak marginesu z lewej. Astra rozciąga treść do krawędzi.

   UWAGA — body:not(.elementor-page) w każdym selektorze poniżej.
   Bez tego ograniczenie szerokości łapie też strony budowane Elementorem
   (strona główna, landingi produktów). Cała sekcja Elementora jest wtedy
   jednym dzieckiem .entry-content i ściska się do 44rem — strona wygląda
   jak wąski słupek na środku ekranu. Elementor ma własny układ i własne
   szerokości; ten arkusz ma poprawiać wpisy pisane w edytorze, nic więcej.
   -------------------------------------------------------------------------- */

body:not(.elementor-page) .ast-separate-container .ast-article-single,
body:not(.elementor-page) .ast-plain-container .ast-article-single,
body:not(.elementor-page).single .entry-content,
body:not(.elementor-page).page .entry-content {
  padding-left: var(--w24-oddech);
  padding-right: var(--w24-oddech);
}

/* Kolumna obejmuje CALY artykul — naglowek razem z trescia.
   Wczesniej ograniczenie szlo na kazde dziecko .entry-content i centrowalo je
   osobno. Tytul lezy poza .entry-content, wiec zostawal przy lewej krawedzi,
   a tekst wisial wysrodkowany obok — wygladalo to na zepsuty uklad.
   Teraz oba siedza w jednym kontenerze i sa wyrownane co do piksela. */
body:not(.elementor-page).single .ast-article-single,
body:not(.elementor-page).page .ast-article-single {
  max-width: min(100%, var(--w24-szerokosc));
  margin-left: auto;
  margin-right: auto;
}

/* Dzieci tresci wypelniaja kolumne — zadnego wlasnego ograniczenia. */
body:not(.elementor-page).single .entry-content > *,
body:not(.elementor-page).page .entry-content > * {
  max-width: none;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAFIA
   -------------------------------------------------------------------------- */

body:not(.elementor-page).single .entry-content,
body:not(.elementor-page).page .entry-content {
  color: var(--w24-tekst);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.single .entry-content p,
.page .entry-content p {
  margin: 0 auto 1.35em;
}

/* Pierwszy akapit wyróżniony — prowadzi wzrok w tekst */
.single .entry-content > p:first-of-type {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--w24-szary);
}

.single .entry-content h2,
.page .entry-content h2 {
  margin: 2.75rem auto 0.9rem;
  padding-top: 0.35rem;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--w24-navy);
  border-top: 2px solid var(--w24-linia);
}

.single .entry-content h3,
.page .entry-content h3 {
  margin: 2rem auto 0.7rem;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--w24-navy);
}

.single .entry-content h4 {
  margin: 1.6rem auto 0.5rem;
  font-size: 1.08rem;
  color: var(--w24-navy);
}

/* --------------------------------------------------------------------------
   3. LINKI
   Domyślny niebieski Astry ginie w tekście. Podkreślenie z odstępem
   czyta się lepiej niż zmiana samego koloru.
   -------------------------------------------------------------------------- */

.single .entry-content a:not(.button):not(.wp-block-button__link),
.page .entry-content a:not(.button):not(.wp-block-button__link) {
  color: var(--w24-navy);
  text-decoration: underline;
  text-decoration-color: var(--w24-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background-color .15s, text-decoration-color .15s;
}

.single .entry-content a:not(.button):hover,
.page .entry-content a:not(.button):hover {
  background-color: rgba(200, 146, 42, .12);
  text-decoration-color: var(--w24-navy);
}

.single .entry-content a:focus-visible,
.page .entry-content a:focus-visible {
  outline: 2px solid var(--w24-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   4. LISTY
   -------------------------------------------------------------------------- */

.single .entry-content ul,
.single .entry-content ol,
.page .entry-content ul,
.page .entry-content ol {
  margin: 0 auto 1.35em;
  padding-left: 1.3em;
}

.single .entry-content li,
.page .entry-content li {
  margin-bottom: .5em;
  padding-left: .2em;
}

.single .entry-content ul li::marker {
  color: var(--w24-gold);
}

.single .entry-content ol li::marker {
  color: var(--w24-gold);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. TABELE — na telefonie przewijają się poziomo, a nie rozpychają strony
   -------------------------------------------------------------------------- */

.single .entry-content .wp-block-table,
.page .entry-content .wp-block-table {
  overflow-x: auto;
  margin: 1.75rem auto;
}

.single .entry-content table,
.page .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.single .entry-content th {
  background: var(--w24-navy);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: .7rem .9rem;
}

.single .entry-content td {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--w24-linia);
}

.single .entry-content tbody tr:nth-child(even) {
  background: var(--w24-tlo-blok);
}

/* --------------------------------------------------------------------------
   6. CYTATY I RAMKI
   -------------------------------------------------------------------------- */

.single .entry-content blockquote,
.page .entry-content blockquote {
  margin: 1.75rem auto;
  padding: 1.1rem 1.35rem;
  border-left: 3px solid var(--w24-gold);
  background: var(--w24-tlo-blok);
  color: var(--w24-szary);
  font-style: normal;
}

.single .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Ramka na podstawę prawną — użyj: <p class="w24-przepis">Art. 144 KC…</p> */
.w24-przepis {
  padding: .9rem 1.15rem;
  border: 1px solid var(--w24-linia);
  border-left: 3px solid var(--w24-navy);
  border-radius: 6px;
  background: #fff;
  font-size: .95rem;
}

/* --------------------------------------------------------------------------
   7. OBRAZY
   -------------------------------------------------------------------------- */

.single .entry-content img,
.page .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.single .entry-content figcaption {
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--w24-szary);
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. NAGŁÓWEK WPISU
   -------------------------------------------------------------------------- */

.single .entry-title {
  line-height: 1.2;
  color: var(--w24-navy);
}

.single .entry-meta,
.single .ast-blog-meta-container {
  font-size: .875rem;
  color: var(--w24-szary);
}

/* --------------------------------------------------------------------------
   9. TELEFON
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
  :root { --w24-oddech: 1rem; }

  .single .entry-content,
  .page .entry-content { font-size: 1rem; line-height: 1.7; }

  .single .entry-content > p:first-of-type { font-size: 1.06rem; }
  .single .entry-content h2 { font-size: 1.38rem; margin-top: 2.25rem; }
  .single .entry-content h3 { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   10. DRUK — ludzie drukują poradniki prawne
   -------------------------------------------------------------------------- */

@media print {
  .single .entry-content a { text-decoration: underline; color: #000; }
  #w24-cta, .ast-single-post-navigation, .comments-area { display: none; }
}


/* --------------------------------------------------------------------------
   11. HUB TEMATYCZNY — bloki wstrzykiwane przez scripts/hub_links.py
        i scripts/hub_page.py

   Bloki niosa wlasne style inline (z var() i fallbackiem), zeby wygladac
   poprawnie takze zanim ten plik trafi do motywu potomnego. Regule ponizej
   nadpisuja je tam, gdzie faktycznie chcemy centralnej kontroli.
   -------------------------------------------------------------------------- */

/* Odnosnik do strony filarowej, na gorze artykulu */
.single .entry-content .w24-hub-odnosnik {
  border-left-color: var(--w24-gold) !important;
  background: var(--w24-tlo-blok) !important;
  color: var(--w24-tekst);
}

/* Blok "Zobacz tez" na dole artykulu */
.single .entry-content .w24-pokrewne {
  background: var(--w24-tlo-blok) !important;
  border-color: var(--w24-linia) !important;
}

.entry-content .w24-pokrewne h2 {
  border: 0;
  padding: 0;
  margin-top: 0;
  color: var(--w24-navy);
}

.entry-content .w24-pokrewne ul { margin-bottom: 0; }

/* Kafelki na stronie filarowej.
   Grid z auto-fit, nie flex: flex z flex-basis rozpychal kontener poza ekran.
   min(15rem,100%) sprawia, ze kolumna nigdy nie jest szersza niz kontener —
   dziala takze na telefonie, bez osobnego media query. */
.entry-content .w24-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}

.entry-content .w24-kafelek {
  background: var(--w24-tlo-blok) !important;
  border-top-color: var(--w24-gold) !important;
}

.entry-content .w24-kafelek h3 {
  margin-top: 0;
  color: var(--w24-navy);
}

.entry-content .w24-kafelek--brak {
  background: #fff !important;
  border-color: var(--w24-linia) !important;
}

/* Siatka kafelkow jest szersza niz kolumna tekstu, ale nie pelnoekranowa. */
body:not(.elementor-page).page .entry-content > .w24-siatka,
body:not(.elementor-page).single .entry-content > .w24-siatka {
  max-width: min(100%, 68rem);
}

@media print {
  .w24-hub-odnosnik,
  .w24-pokrewne { display: none; }
}