/* ==========================================================================
   RAMKI TEKSTOWE — shortcode [ramka]
   Kolory każdego rodzaju ramki to cztery zmienne CSS (tło, akcent, tekst,
   obrys). Cień i wygląd odmian (akcent z lewej / krawędź u góry) są wspólne
   dla wszystkich rodzajów, więc nowy rodzaj to jeden mały blok zmiennych.
   ========================================================================== */

.ramka {
    /* domyślnie: Notatka */
    --ramki-tlo: #f6f4f0;
    --ramki-akcent: #9a8f7c;
    --ramki-tekst: #4a4338;
    --ramki-obrys: #e3ded3;
    --ramki-cien: 0 2px 10px rgba(0, 0, 0, 0.08);
    --ramki-naglowek: #7b705e;
    --ramki-rog: 3px;

    clear: both;
    box-sizing: border-box;
    margin: 30px 0;
    padding: 14px 18px;
    background: var(--ramki-tlo);
    color: var(--ramki-tekst);
    border-radius: var(--ramki-rog);
    box-shadow: var(--ramki-cien);
    overflow-wrap: break-word;
}

/* --- Rodzaje (kolory) --- */
.ramka--info {
    --ramki-tlo: #eef5fa;
    --ramki-akcent: #5b8db8;
    --ramki-tekst: #1f3d55;
    --ramki-obrys: #cfe0ee;
    --ramki-naglowek: #3f77a5;
}
.ramka--sukces {
    --ramki-tlo: #eef6ee;
    --ramki-akcent: #5f9a62;
    --ramki-tekst: #274a29;
    --ramki-obrys: #cfe3d0;
    --ramki-naglowek: #357a39;
}
.ramka--ostrzezenie {
    --ramki-tlo: #fbf5e6;
    --ramki-akcent: #c9a043;
    --ramki-tekst: #5e4710;
    --ramki-obrys: #efe0b8;
    --ramki-naglowek: #8f6610;
}
.ramka--blad {
    --ramki-tlo: #faeded;
    --ramki-akcent: #bf5b5b;
    --ramki-tekst: #661f1f;
    --ramki-obrys: #efcfcf;
    --ramki-naglowek: #b84444;
}
.ramka--notatka {
    --ramki-tlo: #f6f4f0;
    --ramki-akcent: #9a8f7c;
    --ramki-tekst: #4a4338;
    --ramki-obrys: #e3ded3;
    --ramki-naglowek: #7b705e;
}
/* Cień: neutralna, biała ramka z wyraźniejszym cieniem */
.ramka--cien {
    --ramki-tlo: #ffffff;
    --ramki-akcent: #800000;
    --ramki-tekst: #333333;
    --ramki-obrys: #e6e6e6;
    --ramki-cien: 0 6px 18px rgba(0, 0, 0, 0.14);
    --ramki-naglowek: #800000;
}

/* --- Odmiany wyglądu --- */
.ramka--akcent {
    border-left: 4px solid var(--ramki-akcent);
}
.ramka--gora {
    border: 1px solid var(--ramki-obrys);
    border-top: 3px solid var(--ramki-akcent);
}

/* Kolorowy nagłówek: biała ramka z obrysem w kolorze rodzaju, a tytuł na
   pełnym kolorowym pasku u góry (negatywne marginesy rozciągają pasek na całą
   szerokość ramki). Pasek pojawia się, gdy tytuł jest pierwszym elementem;
   bez tytułu to zwykła biała ramka z kolorowym obrysem. */
.ramka--naglowek {
    --ramki-tlo: #ffffff;
    border: 2px solid var(--ramki-naglowek);
    overflow: hidden;
}
.ramka--naglowek > .ramka__tytul:first-child {
    margin: -14px -18px 14px;
    padding: 12px 18px;
    background: var(--ramki-naglowek);
    color: #ffffff;
}

/* --- Zaokrąglenie rogów (zaokraglenie="...") — "male" to wartość domyślna --- */
.ramka--rog-brak    { --ramki-rog: 0; }
.ramka--rog-srednie { --ramki-rog: 10px; }
.ramka--rog-duze    { --ramki-rog: 16px; }

/* --- Wyrównanie ramki węższej od tekstu (szerokosc="...") ---
   Sama szerokość ustawiana jest w PHP jako max-width, więc ramka nigdy nie
   wyjdzie poza kolumnę tekstu — na wąskim ekranie po prostu się zmniejsza. */
.ramka--lewo {
    margin-left: 0;
    margin-right: auto;
}
.ramka--srodek {
    margin-left: auto;
    margin-right: auto;
}
.ramka--prawo {
    margin-left: auto;
    margin-right: 0;
}

/* --- Wyrównanie tekstu wewnątrz ramki (wyrownanie_tekstu="...") ---
   Reguły dotyczą też akapitów i nagłówków wprost, bo motywy często ustawiają
   text-align na samych <p> (np. justowanie) i samo dziedziczenie nie wystarczy.
   Bez atrybutu żadna z tych reguł nie działa — tekst wygląda jak w reszcie strony. */
.ramka--tekst-lewo,
.ramka--tekst-lewo p, .ramka--tekst-lewo li,
.ramka--tekst-lewo h2, .ramka--tekst-lewo h3, .ramka--tekst-lewo h4,
.ramka--tekst-lewo .ramka__tytul { text-align: left; }

.ramka--tekst-srodek,
.ramka--tekst-srodek p, .ramka--tekst-srodek li,
.ramka--tekst-srodek h2, .ramka--tekst-srodek h3, .ramka--tekst-srodek h4,
.ramka--tekst-srodek .ramka__tytul { text-align: center; }

.ramka--tekst-prawo,
.ramka--tekst-prawo p, .ramka--tekst-prawo li,
.ramka--tekst-prawo h2, .ramka--tekst-prawo h3, .ramka--tekst-prawo h4,
.ramka--tekst-prawo .ramka__tytul { text-align: right; }

.ramka--tekst-wyjustowany,
.ramka--tekst-wyjustowany p, .ramka--tekst-wyjustowany li,
.ramka--tekst-wyjustowany h2, .ramka--tekst-wyjustowany h3, .ramka--tekst-wyjustowany h4 { text-align: justify; }
/* Tytuł jest zwykle jedną linią, więc przy wyjustowaniu zostaje do lewej. */
.ramka--tekst-wyjustowany .ramka__tytul { text-align: left; }

/* --- Zawartość --- */
.ramka__tytul {
    display: block;
    margin: 0 0 6px;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.3;
}
/* W trybie tekstowym edytora po tytule bywa doklejony <br> — bez niego odstęp robi sam margines. */
.ramka__tytul + br {
    display: none;
}
.ramka p,
.ramka ul,
.ramka ol {
    margin: 0 0 0.7em;
    color: inherit;
}
.ramka ul,
.ramka ol {
    padding-left: 1.3em;
}
.ramka h2,
.ramka h3,
.ramka h4 {
    margin: 0 0 0.5em;
    color: inherit;
}
.ramka a {
    color: inherit;
    text-decoration: underline;
}
.ramka > :first-child {
    margin-top: 0;
}
.ramka > :last-child {
    margin-bottom: 0;
}