/* --- FUNDAMENTY --- */
body {
    background-color: #333333;
    margin: 0;
    /* strona ma startować od samej góry przeglądarki */
    padding: 0;
    font-family: Arial, sans-serif;
}



/* =========================================================
   CENTRUM STEROWANIA ODSTĘPAMI (JEDNO MIEJSCE)
   ========================================================= */
:root{
  /* ===== SZEROKOŚĆ (LEWO / PRAWO) ===== */
  --topbar-x: 15px;       /* górna belka */
  --titlebar-x: 15px;     /* titlebar */
  --content-x: 20px;      /* treść (większe = węższa) */

  /* ===== WYSOKOŚĆ (GÓRA / DÓŁ) ===== */
  --topbar-top: 10px;      /* odstęp NAD belką */
  --topbar-bottom: 10px;   /* odstęp POD belką */
  --content-top: 0px;     /* odstęp NAD treścią */
  --content-bottom: 0px; /* odstęp POD treścią */
  --titlebar-top: 5px;/* odstęp NAD titlebar */
  --titlebar-bottom: 10px;/* odstęp POD titlebar */
 
}

#kontener {
    width: 1000px;
    margin: 0 auto;
    /* lekko "złamana" biel jak na filipmichno.pl */
    background-color: #eef2f7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}

#logo {
    width: 1000px;
    height: 335px;
    background: url('css/tlo.png') no-repeat center top; 
    background-size: 100% auto;
}

/* --- MENU --- */
#pasek_glowny {
    /* nowoczesne tło paska menu (animowany gradient) */
    position: relative;
    overflow: hidden;
    padding: 0;

    /* płynniejsze przejścia (mniej "pompowania" jasności) */
    background: linear-gradient(90deg,
        #007bff 0%,
        #006ad1 35%,
        #0056b3 50%,
        #006ad1 65%,
        #007bff 100%
    );

    background-size: 300% 100%;
    /* szybciej, ale równo (bez przygaszania) */
    animation: fmTopbarGradient 16s linear infinite;
}
/* delikatny "połysk" przesuwający się po pasku */
#pasek_glowny::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* delikatny połysk */
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.00) 0%,
        rgba(255,255,255,0.10) 40%,
        rgba(255,255,255,0.00) 80%
    );

    transform: translateX(-60%);
    /* szybszy połysk, ale bez "szarpania" */
    animation: fmTopbarShine 6s linear infinite;
}
/* treść paska ma być nad połyskiem */
#pasek_menu_kontener{
    position: relative;
    z-index: 1;
}

@keyframes fmTopbarGradient{
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fmTopbarShine{
    0%   { transform: translateX(-70%); opacity: 0.0; }
    15%  { opacity: 0.22; }
    50%  { transform: translateX(35%);  opacity: 0.18; }
    100% { transform: translateX(80%);  opacity: 0.0; }
}

/* preferencje systemu: mniej ruchu */
@media (prefers-reduced-motion: reduce){
    #pasek_glowny{ animation: none !important; }
    #pasek_glowny::before{ animation: none !important; opacity: 0.12; transform: none; }
}

#pasek_menu_kontener {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 6px;
}

#menu_linki {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

/* elementy menu jako "kafelki" + pionowe separatory jak na screenie */
#menu_linki > a,
#menu_linki > button{
    display:block;
    box-sizing:border-box;
}



#pasek_menu_kontener a {
    /* TRYB KLASYCZNY: menu ma być białe (bez obrysu) */
    color: #ffffff;
    text-decoration: none;
    padding: 15px 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.7px; /* delikatnie większy odstęp w menu */
    white-space: nowrap;
    text-shadow: none;
}

#pasek_menu_kontener a:hover { background-color: #0056b3; }
#pasek_menu_kontener a.aktywny { background-color: #004494; }

#contrast-toggle {
    background: #333;
    /* TRYB KLASYCZNY: bez żółtego i bez obrysu */
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    border-radius: 4px;
    letter-spacing: 0.7px;
    text-shadow: none;
    margin-left: auto; /* przyklej do prawej strony */
}

/* --- TREŚĆ --- */
#tytul_sekcja {
    padding: var(--topbar-top) var(--topbar-x) var(--topbar-bottom) var(--topbar-x);
    text-align: left;
}

#tytul_belka {
    /* nowocześniejszy "premium" gradient bez zmiany kolorystyki */
    background: linear-gradient(to bottom, #1683e6, #005fb8);
    color: #ffffff;
    font-size: 16px; 
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #005fb8;

    /* delikatny połysk + głębia */
    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.35),
        0 3px 8px rgba(0,0,0,0.18);
}

/* ================================
   Pasek tytułu strony (Title Bar)
   ================================ */

.titlebar {
    /* spójny, nowoczesny gradient jak belka */
    background: linear-gradient(to bottom, #3aa0ff, #1e78d0);
    color: #ffffff;
    font-size: 16px; 
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #005fb8;

    /* delikatny połysk + głębia */
    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.35),
        0 3px 8px rgba(0,0,0,0.18);

    margin: 0 0 var(--titlebar-bottom) 0;
}
/* Linki w treści strony
   - bez podkreślenia
   - kolor jak zwykły tekst (w normalnym trybie czarny, w kontraście żółty)
*/
#komunikat a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

#komunikat a:hover,
#komunikat a:focus,
#komunikat a:active {
    color: inherit;
    text-decoration: none;
}

#komunikat {
    padding: var(--content-top) var(--content-x) var(--content-bottom) var(--content-x);
    font-size: 19px;
    line-height: 1.2;
    flex-grow: 1;
}

/* FIX: jeżeli w treści są obrazki z float (align=left/right),
   to bez "clearfix" stopka potrafi wchodzić w treść i robić duże niebieskie pole. */
#komunikat::after{
  content: "";
  display: block;
  clear: both;
}



/* Titlebar w treści: wyrównaj do własnego odstępu od boków */
#komunikat .titlebar{
  margin-left: calc(-1 * (var(--content-x) - var(--titlebar-x)));
  margin-right: calc(-1 * (var(--content-x) - var(--titlebar-x)));
}


/* Usuwanie "ukrytych" odstępów (marginesy akapitów) na początku sekcji */
#komunikat p:first-child{ margin-top: 0; }
#komunikat .titlebar + p{ margin-top: 0; }

/* --- AUDIO BLOG (CIEMNIEJSZY NIEBIESKI, MINIMALNE MARGINESY) --- */
.audio-card {
    /* mniej "odznaczające" się, spójne z resztą UI (jasny niebieski panel) */
    background-color: #0076e6;
    border: 1px solid #005fb8;
    border-radius: 5px;
    padding: 5px 10px; /* Minimalne marginesy wewnątrz ramki */
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.audio-title {
    font-weight: bold;
    color: #ffffff !important;
    /* tytuł nagrania: +2 oczka */
    font-size: 18px;
    margin-bottom: 3px;
    text-transform: uppercase;
    /* w odtwarzaczu lekko rozszerzone litery */
    letter-spacing: 0.9px;
}

/* --- CUSTOM ODTWARZACZ (spójny w Opera/Chrome/Firefox) --- */
.audio-el { display: none; }

.audio-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(0,0,0,0.12);
}

.audio-controls button {
    appearance: none;
    border: 1px solid rgba(0,0,0,0.18);
    background: rgba(255,255,255,0.22);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    /* ikony/znaki: białe z czarną obwódką (czytelne jak w Firefox) */
    color: #ffffff;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.ac-play,
.ac-mute {
    font-size: 18px;
}

.audio-controls button:focus {
    outline: 2px solid rgba(255,255,255,0.55);
    outline-offset: 2px;
}

.ac-time {
    /* czas min. jak tytuł (czytelniej) */
    font-size: 16px;
    font-weight: bold;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.8px;
    white-space: nowrap;
}

/* suwaki */
.audio-controls input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 0;
    line-height: 0;
}

.ac-seek { flex: 1; min-width: 140px; }
.ac-volume{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.ac-vol  { width: 140px; }

/* thumb WebKit */
.audio-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.35);
    /* wycentrowanie kropki na środku paska */
    margin-top: -3px;
}

/* track WebKit */
.audio-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
}

/* thumb Firefox */
.audio-controls input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.35);
    /* Firefox: delikatnie podnieś thumb (bezpiecznie) */
    position: relative;
    top: -1px;
}

.audio-controls input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.35);
}

/* --- FORMULARZ (CIEMNIEJSZE POLA WPISYWANIA) --- */
.kontakt-form {
    /* ODSUNIĘCIE OD BELKI TYTUŁU: zapobiega „nachodzeniu” formularza na pasek/sekcję */
    margin-top: 15px;

    /* TŁO FORMULARZA: jasny niebieski panel, spójny z resztą strony */
    background-color: #e1efff;

    /* ODSTĘPY WEWNĘTRZNE: żeby pola nie „kleiły się” do ramki */
    padding: 25px;

    /* ZAOKRĄGLENIE ROGÓW RAMKI FORMULARZA */
    border-radius: 8px;

    /* RAMKA: ciemniejszy niebieski (nie czarny) */
    border: 2px solid #0056b3; /* ciemniejsza ramka, ale nie czarna */

    /* CIEŃ: delikatnie odcina formularz od tła */
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);

    /* UKŁAD: elementy formularza ustawione pionowo, z równymi odstępami */
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* KOLOR I GRUBOŚĆ NAPISÓW (label) */
    color: #004494;
    font-weight: bold;
}

/* Etykiety (napisy nad polami) – blokowo, żeby zawsze były nad inputem */
.kontakt-form label{
    display: block;
    margin-bottom: 6px;
}

.kontakt-form input, 
.kontakt-form textarea {
    /* SZEROKOŚĆ 100%: pola wypełniają całą szerokość formularza */
    width: 100%;

    /* WYSOKOŚĆ/ODDECH: wygodne klikanie i czytanie */
    padding: 12px;

    /* KOLOR TŁA PÓL: ciemniejszy niż tło formularza, żeby było widać granice */
    background-color: #d0e6ff; /* odcina się od tła formularza */

    /* RAMKA PÓL: czytelna, nie za jasna */
    border: 2px solid #3f79b8; /* ciemniejsze obwódki pól */
    border-radius: 4px;

    /* box-sizing: padding NIE powiększa pola ponad 100% szerokości */
    box-sizing: border-box;
    font-size: 16px;

    /* KOLOR TEKSTU WPISYWANEGO */
    color: #003366;
}

.kontakt-form input:focus, 
.kontakt-form textarea:focus {
    background-color: #ffffff; /* Pole rozjaśnia się po kliknięciu */
    border-color: #007bff;
    outline: none;
}

.kontakt-form button {
    /* TŁO PRZYCISKU: dopasowane do paska menu */
    background: #007bff;
    /* TRYB KLASYCZNY: biały napis, bez obrysu */
    color: #ffffff;
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    text-shadow: none;
}

.kontakt-form button:hover {
    background: #0056b3;
}

/* =========================
   KOMUNIKATY POD FORMULARZEM
   ========================= */

/* Wspólne ustawienia dla wszystkich komunikatów (sukces/błąd) */
.form-message{
    /* Odstęp od elementów nad komunikatem */
    margin-top: 15px;

    /* Wewnętrzne odstępy (żeby tekst miał „oddech”) */
    padding: 15px;

    /* Zaokrąglenie i lekki cień – spójne z resztą UI */
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);

    /* Wyśrodkowanie treści */
    text-align: center;
    font-weight: bold;
}

/* Sukces (wysłano wiadomość) – niebieski jak menu */
.form-success{
    background: #007bff;
    color: #ffffff;
}

/* Błąd (nie wypełniono / błąd serwera) – czerwony */
.form-error{
    background: #d93025;
    color: #ffffff;
}

.success-box-small {
    background: #28a745; /* Zielony dla sukcesu */
    color: white;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* --- STOPKA --- */
#stopka_kontener {
    text-align: center;
    padding: 12px 0;
    background-color: #007bff;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    clear: both;
    width: 100%;
    flex-shrink: 0;
}

#stopka_kontener p { margin: 0; }

/* --- KONTRAST --- */
/* tło "wokół strony" zostaje szarawe (jak w trybie normalnym) */
body.high-contrast { background-color: #333333 !important; }

/* sama strona robi się czarna */
body.high-contrast #kontener {
    background-color: #000 !important;
    color: #ffff00 !important;
}

body.high-contrast #pasek_glowny,
body.high-contrast #stopka_kontener {
    background-color: #002a5c !important;
}

body.high-contrast #pasek_glowny{
    /* w kontraście: brak animacji i brak połysku */
    animation: none !important;
    background: #002a5c !important;
}
body.high-contrast #pasek_glowny::before{ display:none !important; }


body.high-contrast #pasek_menu_kontener a,
body.high-contrast #contrast-toggle,
body.high-contrast .kontakt-form button {
    /* w kontraście: tło przycisków ma być granatowe (nie czarne), lekko jaśniejsze i odznaczające się od czerni */
    background-color: #104d9a !important;
    border: 1px solid #3b73d2 !important;

    color: #ffff00 !important;
    /* żółte napisy z czarnym obrysem */
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

body.high-contrast #pasek_menu_kontener a:hover,
body.high-contrast #pasek_menu_kontener a.aktywny {
    /* hover w kontraście ma się wyraźnie odznaczać */
    background-color: #1b67c8 !important;
    border-color: #6a9bf0 !important;
}

body.high-contrast #contrast-toggle:hover,
body.high-contrast .kontakt-form button:hover {
    background-color: #1b67c8 !important;
    border-color: #6a9bf0 !important;
}

body.high-contrast #pasek_menu_kontener a { border-radius: 4px; }

body.high-contrast #tytul_belka {
    background-color: #111 !important;
    border-color: #ffff00 !important;
}



body.high-contrast .titlebar{
    /* Titlebar ma zachowywać się jak belka w trybie wysokiego kontrastu */
    background: #111 !important;          /* usuwa gradient */
    background-color: #111 !important;
    border-color: #ffff00 !important;
    color: #ffff00 !important;
    box-shadow: none !important;
}

body.high-contrast .audio-card {
    background-color: #111 !important;
    border: 1px solid #ffff00 !important;
}
body.high-contrast .audio-title { color: #ffff00 !important; }

body.high-contrast .kontakt-form {
    background-color: #111 !important;
    border-color: #ffff00 !important;
    color: #ffff00 !important;
}

body.high-contrast .kontakt-form input,
body.high-contrast .kontakt-form textarea {
    background-color: #000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
}

/* --- AUDIO: wyrównanie wyglądu w Chrome/Opera (Blink) --- */
@supports (-webkit-appearance: none) {
    /* Chrome/Opera (Blink): jasne tło odtwarzacza, ale ciemniejsze elementy nawigacji (ikony + pasek postępu) */
    audio {
        background-color: #cfe7ff;
        filter: none;
    }
    audio::-webkit-media-controls-panel {
        background-color: #cfe7ff;
    }

    /* ikony (play, głośność) przyciemniamy, żeby nie zlewały się z jasnym panelem */
    audio::-webkit-media-controls-play-button,
    audio::-webkit-media-controls-mute-button {
        filter: brightness(0) saturate(100%);
    }

    /* timeline/volume: podbijamy kontrast, żeby pasek postępu był widoczny */
    audio::-webkit-media-controls-timeline,
    audio::-webkit-media-controls-volume-slider {
        filter: contrast(240%) brightness(0.55);
    }

    audio::-webkit-media-controls-current-time-display,
    audio::-webkit-media-controls-time-remaining-display {
        filter: brightness(0.2);
    }
}

/* Firefox: zbliżamy wygląd do Chrome/Opera (jasny panel, czytelne, "ciemniejsze" kontrolki) */
@-moz-document url-prefix() {
    audio {
        background-color: #cfe7ff;
        /* Firefox ma inne, mniej podatne na stylowanie kontrolki – lekkie przyciemnienie dla czytelności */
        filter: contrast(1.25) brightness(0.90);
    }
}



/* --- DOPIESZCZENIA (2026-01-14) --- */
/* PLAY/PAUZA: stała, zwarta szerokość + biała obwódka ZAWSZE (bez "skakania") */
.ac-play{
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;                 /* bez dużych marginesów wewnątrz */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;  /* biała obwódka na stałe */
    border-radius: 6px;
    box-sizing: border-box;
    background: rgba(255,255,255,0.10);
}

/* nie dokładaj dodatkowej ramki focus tylko dla play/pauza (żeby nie wyglądało jak "po kliknięciu") */
.ac-play:focus{
    outline: none;
}


/* --- FIX: brak "grubej" obwódki po kliknięciu (focus ring) --- */
.audio-controls .ac-play:focus,
.audio-controls .ac-play:focus-visible,
.audio-controls .ac-play:active{
    outline: none !important;
    box-shadow: none !important;
}

/* upewnij się, że nie dokłada się dodatkowy outline dla wszystkich buttonów */
.audio-controls button:focus{
    outline: 2px solid rgba(255,255,255,0.55);
    outline-offset: 2px;
}
/* ale dla play/pauza wyłączamy to całkowicie */
.audio-controls button.ac-play:focus{
    outline: none !important;
    outline-offset: 0 !important;
}


/* --- FIX2 (2026-01-14): stałe ramki i brak przesuwania dla PLAY + GŁOŚNOŚĆ --- */
/* Ujednolicone ustawienia dla przycisków panelu (play/pauza i głośność) */
.audio-controls button.ac-play,
.audio-controls button.ac-mute{
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;                 /* brak "pustego pola" */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;  /* cienka biała ramka ZAWSZE wokół pola przycisku */
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,0.10) !important;
}

/* Ikony w środku (strzałka/pauza oraz głośniczek) — białe z czarnym konturem */
.audio-controls button.ac-play,
.audio-controls button.ac-mute{
    color: #ffffff !important;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

/* Usuń "grubą" ramkę focus/active, która wychodzi poza przycisk (dla play i głośności) */
.audio-controls button.ac-play:focus,
.audio-controls button.ac-play:focus-visible,
.audio-controls button.ac-play:active,
.audio-controls button.ac-mute:focus,
.audio-controls button.ac-mute:focus-visible,
.audio-controls button.ac-mute:active{
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Hover: delikatne podbicie, ale bez zmiany rozmiaru */
.audio-controls button.ac-play:hover,
.audio-controls button.ac-mute:hover{
    background: rgba(255,255,255,0.16) !important;
}


/* --- FM_EDITOR_PATCH_BEGIN ---
   Dodatkowe poprawki generowane przez FM Editor:
   - zawijanie bardzo długich linii/ciągów znaków
   - stabilny layout (stały scrollbar)
   - opływanie obrazków w tekście (align=left/right)
--- */

html{overflow-y:scroll;}

/* zawijanie tekstu w treści */
body,main,section,article,div,p,span,td,th,a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* obrazki zawsze mieszczą się w kontenerze */
img{max-width:100%;height:auto;}

/* opływanie obrazka w środku tekstu */
img[align="left"], .fm-img-left{float:left;margin:0 14px 14px 0;}
img[align="right"], .fm-img-right{float:right;margin:0 0 14px 14px;}

/* żeby po obrazku układ wracał do normy, jeśli ktoś doda clear */
.clear, .fm-clear{clear:both;}

/* --- FM_EDITOR_PATCH_END --- */
body.high-contrast.dark-mode #kontener{
    background-color: #000 !important;
    color: #ffff00 !important;
}
body.high-contrast.dark-mode #komunikat a{
    color: #ffff00 !important;
}


/* =========================================================
   FIX: KONTRAST MA ZAWSZE PIERWSZEŃSTWO
   ========================================================= */
body.high-contrast #pasek_glowny{
    background: #002a5c !important;
    animation: none !important;
    filter: none !important;
}
body.high-contrast #pasek_glowny::before{
    display: none !important;
}

body.high-contrast #tytul_belka,
body.high-contrast .titlebar{
    background: #111 !important;
    background-image: none !important;
    filter: none !important;
    border-color: #ffff00 !important;
    color: #ffff00 !important;
    box-shadow: none !important;
}

body.high-contrast #stopka_kontener{
    background: #002a5c !important;
    filter: none !important;
}

body.high-contrast *{
    animation: none !important;
    transition: none !important;
}


/* =========================================================
   UI: przycisk 🌙 (Tryb nocny) — większy, nie „miniaturowy”
   ========================================================= */
#dark-toggle{
    font-size: 20px;           /* większy symbol księżyca */
    line-height: 1;
    padding: 10px 14px;
    min-width: 48px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* w trybie wysokiego kontrastu: 🌙 ma zachowywać się jak KONTRAST (spójnie) */
body.high-contrast #dark-toggle{
    background-color: #104d9a !important;
    border: 1px solid #3b73d2 !important;
    color: #ffff00 !important;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}
body.high-contrast #dark-toggle:hover{
    background-color: #1b67c8 !important;
    border-color: #6a9bf0 !important;
}


/* =========================================================
   PRZYCISK 🌙 (skró t do KONTRASTU) — duży, spójny z menu
   ========================================================= */
#dark-toggle{
    background: #333;
    color: #ffffff;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;           /* większy symbol */
    line-height: 1;
    border-radius: 4px;
    letter-spacing: 0.7px;
    text-shadow: none;
    min-width: 48px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#dark-toggle:hover{ background: #444; }

/* w kontraście: 🌙 ma zachowywać się jak reszta przycisków */
body.high-contrast #dark-toggle{
    background-color: #104d9a !important;
    border: 1px solid #3b73d2 !important;
    color: #ffff00 !important;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}
body.high-contrast #dark-toggle:hover{
    background-color: #1b67c8 !important;
    border-color: #6a9bf0 !important;
}

/* =========================================================
   LICZNIK ODWIEDZIN
   ========================================================= */

#stopka_kontener .stopka-inner{ line-height:1; min-height:24px; }
#stopka_kontener .stopka-inner > span{ display:flex; align-items:center; }
#stopka_kontener .stopka-center{ justify-content:center; }
#stopka_kontener .stopka-right{ justify-content:flex-end; }
/* =========================================================
   RESPONSYWNOŚĆ: TELEFONY + TABLETY
   - logo mniejsze i całe widoczne
   - menu bez monstrualnych odstępów, 2+ rzędy
   - przycisk KONTR. w poziomie (pierwszy rząd)
   ========================================================= */

@media (max-width: 900px){
  /* brak „paska” po prawej */
  html, body{ width:100%; overflow-x:hidden; }

  /* kontener na 100% */
  #kontener{
    width:100%;
    max-width:100%;
    margin:0;
    box-shadow:none;
  }

  /* logo jako tło: ma się zmieścić w całości */
  #logo{
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio: 1000 / 335;
    background-size: contain;
    background-position: center top;
  }

  /* treść ciaśniej */
  #tytul_sekcja{ padding-left:12px; padding-right:12px; }
  #komunikat{ padding-left:12px; padding-right:12px; }

  /* MENU: 4 przyciski w rzędzie (ostatni to KONTR.), potem kolejne rzędy */
  #pasek_menu_kontener{
    display:block;
    padding:6px;
  }

  #menu_linki{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    align-items:stretch;
  }

  /* Linki + przycisk kontrastu mają wyglądać i układać się tak samo */
  #menu_linki a,
  #menu_linki #contrast-toggle{
    margin:0 !important;
    padding:10px 8px;
    font-size:14px;
    letter-spacing:0.4px;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;

    /* 4 w rzędzie (2+ rzędy jeśli trzeba) */
    flex: 0 0 25%;
    max-width: 25%;

    /* pionowe separatory jak na screenie */
    
  }

  /* pierwszy kafelek w rzędzie bez lewego separatora */
  #menu_linki > :nth-child(4n+1){
    border-left: none;
  }

  /* KONTRAST przyklejony do prawej strony także w mobilce */
  #menu_linki #contrast-toggle{
    margin-left: auto !important;
  }

  /* bardzo wąskie telefony: 3 w rzędzie */
  @media (max-width: 420px){
    #menu_linki a,
    #menu_linki #contrast-toggle{
      flex: 0 0 33.3333%;
      max-width: 33.3333%;
    }

    #menu_linki > :nth-child(3n+1){ border-left:none; }
  }

  /* ekstremalnie wąskie: 2 w rzędzie */
  @media (max-width: 340px){
    #menu_linki a,
    #menu_linki #contrast-toggle{
      flex: 0 0 50%;
      max-width: 50%;
    }

    #menu_linki > :nth-child(2n+1){ border-left:none; }
  }

  /* multimedia (YouTube/iframe) zawsze w szerokości ekranu */
  iframe{ width:100% !important; max-width:100% !important; }
  img{ max-width:100%; height:auto; }

  /* na telefonie: nie opływaj tekstem obrazków (czytelność) */
  img[align="left"], .fm-img-left,
  img[align="right"], .fm-img-right{
    float:none !important;
    margin:0 0 12px 0 !important;
    display:block;
  }
}


/* ===== PIONOWE SEPARATORY ===== */
.menu {
    gap: 0 !important;
}

.menu a {
    position: relative;
    margin: 0 !important;
}

.menu a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255,255,255,0.35);
}

/* ===== MOBILE POPRAWKI ===== */
@media (max-width: 768px) {
    .menu a {
        padding: 7px 5px !important;
        font-size: 13px !important;
    }
}


/* =========================================================
   GOTOWIEC: MOBILNE MENU – CZYSTE I CZYTELNE (FIX "BAM BAM")
   - 2 przyciski w rzędzie + równe kafelki
   - pionowy separator między kolumnami
   - poziomy separator między rzędami
   - KONTRAST na dole na całą szerokość
   ========================================================= */
@media (max-width: 900px){

  #menu_linki{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 w rzędzie */
    gap: 0 !important;
    align-items: stretch !important;
  }

  #menu_linki a,
  #menu_linki #contrast-toggle{
    margin: 0 !important;
    padding: 12px 8px !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;   /* pozwól zawijać tekst */
    flex: initial !important;         /* wyłącz stare flex: 25% */
    max-width: none !important;

    border-left: none !important;     /* wyłącz stare separatory */
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important; /* poziome linie */
  }

  /* pionowa linia między kolumnami (lewa kolumna dostaje prawą kreskę) */
  #menu_linki > :nth-child(odd){
    border-right: 1px solid rgba(255,255,255,0.25) !important;
  }

  /* KONTRAST na dole na całą szerokość */
  #menu_linki #contrast-toggle{
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
    justify-self: stretch !important;
  }
}




/* ===== SUBTELNY CIEMNY SEPARATOR #87B9FA (DESKTOP + MOBILE) ===== */

#menu_linki > *{
  position: relative;
}

#menu_linki > *:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 0;
  width: 2px;

  background: linear-gradient(
    to bottom,
    rgba(135,185,250,0) 0%,
    rgba(135,185,250,0.6) 30%,
    #87B9FA 50%,
    rgba(135,185,250,0.6) 70%,
    rgba(135,185,250,0) 100%
  );
}


/* ===== WYŚRODKOWANIE TEKSTU W KAFELKACH ===== */
#menu_linki a,
#menu_linki #contrast-toggle{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* --- FIX: elementy z float (np. QR w zakładce 'Jak możesz pomóc') --- */
.fm-text::after{
    content:"";
    display:block;
    clear:both;
}