/* =========================================
   Bombelo.pl – CSS zwarstwiony i odchudzony
   ========================================= */

/* -------------------
   WARSTWA: Reset
------------------- */
@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
}

/* -------------------
   Zmienne & motywy
------------------- */
:root{
  --header-h:60px;

  /* Kolory dnia */
  --c-accent:#e60000;
  --c-header-bg:#e60000;
  --c-header-fg:#fff;

  --c-text:#333;
  --c-bg:#fff;

  /* Szarości UI */
  --c-ui-100:#f7f7f7;
  --c-ui-200:#f3f3f3;
  --c-ui-300:#eee;
  --c-ui-400:#ddd;
  --c-ui-500:#ccc;

  --radius-md:12px;
  --shadow-1:0 1px 3px rgba(0,0,0,.08);
  --shadow-2:0 2px 8px rgba(0,0,0,.08);
}
body.dark-mode{
  --c-header-bg:#333;
  --c-header-fg:#fff;

  --c-text:#eee;
  --c-bg:#121212;

  --c-ui-100:#1a1a1a;
  --c-ui-200:#1a1a1a;
  --c-ui-300:#2a2a2a;
  --c-ui-400:#4b4b4b;
  --c-ui-500:#575757;
  --shadow-2:0 2px 10px rgba(0,0,0,.45);
}

/* -------------------
   WARSTWA: Base
------------------- */
@layer base {
  body{
    font-family:'Roboto',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    background:var(--c-bg);
    color:var(--c-text);
  }

  /* Header/pasek */
  header{
    position:sticky;top:0;z-index:1100;min-height:var(--header-h);
    display:flex;align-items:center;padding:1rem;
    background:var(--c-header-bg);color:var(--c-header-fg);
  }
  header>nav{display:flex;align-items:center;gap:1rem;width:100%}
  header h1, header h1 a{margin:0;color:inherit;text-decoration:none}

  /* Przełącznik trybu obok logo */
  #theme-toggle{
    margin:0 .75rem 0 .5rem;font-size:1.2rem;color:var(--c-header-fg);
    background:none;border:0;cursor:pointer;transition:transform .3s ease
  }
  #theme-toggle:hover{transform:rotate(20deg) scale(1.2)}

  /* Linki/tekst */
  a{color:inherit}
}

/* -------------------
   WARSTWA: Components
------------------- */
@layer components {
  /* ==== Desktop: menu „Dowcipy” (hover) ==== */
  .menu{position:relative}
  .menu-btn{
    background:none;border:0;color:var(--c-header-fg);
    font-size:.9rem;display:inline-flex;align-items:center;gap:.25rem;cursor:pointer
  }
  .dropdown{
    display:none;position:absolute;top:100%;left:0;min-width:180px;max-width:90vw;
    background:#f0f0f0;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:10
  }
  .menu:hover .dropdown{display:block}
  .dropdown a{
    display:block;padding:12px 16px;white-space:nowrap;text-decoration:none;color:#333;
    transition:transform .2s ease,background-color .2s
  }
  .dropdown a:hover{background:#ddd;transform:translateX(5px)}
  body.dark-mode .dropdown{background:#222;color:#eee}
  body.dark-mode .dropdown a{color:#f0f0f0}
  body.dark-mode .dropdown a:hover{background:#333;color:#fff}

  /* ==== Ikona burgera ==== */
  .burger{display:none;margin-left:auto;background:transparent;border:0;color:inherit;cursor:pointer;padding:.5rem}
  .burger-bar{width:24px;height:2px;background:currentColor;display:block;margin:5px 0}

  /* ==== Panel burgera (jedna ramka z dwiema kolumnami) ==== */
  .menu-panel{
    position:fixed;left:0;right:0;top:var(--header-h);
    height:calc(100dvh - var(--header-h));
    transform:translateY(-120%);transition:transform .25s ease;
    background:#fff;color:#000;overflow:auto;z-index:1200
  }
  .menu-panel.open{transform:translateY(0)}
  body.dark-mode .menu-panel{background:#000;color:#fff}

  .menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1190}
  .menu-overlay[hidden]{display:none}

  /* Jedna wspólna ramka */
  .menu-panel .panel-inner{
    display:flex;flex-direction:column;gap:12px;
    background:var(--c-ui-200);
    border:1px solid var(--c-ui-400);
    border-radius:var(--radius-md);
    padding:12px;margin:12px;
  }
  body.dark-mode .menu-panel .panel-inner{background:var(--c-ui-100)}

  .menu-panel .col{flex:1 1 0;background:transparent;border:0;padding:0}
  .menu-panel .panel-title{
    text-align:center;margin:6px 0 8px;font-size:.95rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.02em;opacity:.85
  }

  /* Listy linków */
  .menu-panel .list{display:block}
  .menu-panel .list a{
    display:flex;align-items:center;gap:.6rem;padding:.55rem .5rem;border-radius:8px;
    text-decoration:none;transition:transform .15s ease, background-color .15s ease
  }
  .menu-panel .list a:hover{background:#e9e9e9;transform:translateX(4px)}
  .menu-panel .list a:active{transform:translateX(6px) scale(.98)}
  body.dark-mode .menu-panel .list a:hover{background:#2a2a2a}

  /* Pionowy separator między kolumnami na szerszych ekranach */
  @media (min-width:600px){
    .menu-panel .panel-inner{flex-direction:row;gap:20px}
    .menu-panel .col + .col{
      border-left:1px solid color-mix(in srgb, #000 8%, transparent);
      margin-left:10px;padding-left:10px
    }
    body.dark-mode .menu-panel .col + .col{
      border-left-color:color-mix(in srgb, #fff 15%, transparent)
    }
  }
  /* Bardzo wąskie – kolumny jedna pod drugą (separator poziomy) */
  .menu-panel .col + .col{
    border-top:1px solid color-mix(in srgb, #000 8%, transparent);
    margin-top:10px;padding-top:10px
  }
  @media (min-width:600px){
    .menu-panel .col + .col{border-top:0;margin-top:0;padding-top:0}
  }
  body.dark-mode .menu-panel .col + .col{
    border-top-color:color-mix(in srgb, #fff 12%, transparent)
  }

  /* ==== Karty dowcipów ==== */
  #jokes-container{display:flex;flex-direction:column;align-items:center;gap:20px;padding:0 1rem}
  .joke-card{
    width:100%;max-width:700px;padding:12px;border-radius:8px;
    background:#f5f5f5;border:1px solid #ddd;box-shadow:var(--shadow-1)
  }
  .joke-card:hover{transform:scale(1.02);box-shadow:0 4px 10px rgba(0,0,0,.2)}
  body.dark-mode .joke-card{background:#1e1e1e;border-color:#444}

  .joke-actions{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem}
  .like-btn{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:.5rem}
  .like-btn .emoji{font-size:22px;line-height:1;transition:transform .2s}
  .like-btn:hover .emoji{transform:scale(1.2) rotate(-10deg)}
  .like-btn .like-count{font-size:13px;line-height:1;position:relative;top:2px;transition:transform .15s ease}
  .like-btn .like-count.animate{animation:likePop .35s ease}
  @keyframes likePop{0%{transform:scale(.9)}50%{transform:scale(1.6)}100%{transform:scale(1)}}

  .joke-actions .permalink,
  .joke-actions .permalink:hover,
  .joke-actions .permalink:focus{ text-decoration:none }

  /* Share */
  .share-icons{margin-left:auto;display:flex;align-items:center;gap:4px}
  .share-label{font-size:13px;color:#555;position:relative;top:2px;margin-right:2px}
  .share-icons a{
    width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;transition:transform .2s, filter .2s
  }
  .share-icons a:hover{transform:scale(1.1);filter:brightness(1.2)}
  .share-icons a i{font-size:14px;color:#fff}
  .share-icons a.whatsapp{background:#25D366}
  .share-icons a.msgr{background:#0084FF}

  /* Przyciski / narzędzia */
  #loadMore{
    display:block;margin:2rem auto;padding:.75rem 1.5rem;background:var(--c-accent);color:#fff;
    border:0;border-radius:5px;cursor:pointer;transition:background .2s
  }
  #loadMore:hover{background:#b80000}

  /* Scroll top */
  #scrollTopBtn{
    display:none;position:fixed;right:40px;bottom:40px;z-index:99;
    border:0;outline:0;border-radius:50%;padding:14px 16px;font-size:20px;cursor:pointer;
    background:var(--c-accent);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);
    transition:background-color .3s, transform .3s, box-shadow .3s
  }
  #scrollTopBtn:hover{background:#b80000;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.3)}

  /* Breadcrumbs, stopka – bez zmian funkcjonalnych */
  .breadcrumbs{font-size:.9rem;margin-bottom:.5rem}
  .breadcrumbs a{text-decoration:none}
  .breadcrumbs a:hover{text-decoration:underline}
  .footer-centered{text-align:center;padding:1.5rem 1rem;font-size:.9rem;color:#333}
  body.dark-mode .footer-centered{color:#bbb}

  /* ==== SEO intro: jedna definicja ==== */
  .seo-intro-wrapper{
    max-width:840px;margin:20px auto;padding:16px 18px;
    background:var(--c-ui-200);border:1px solid var(--c-ui-400);border-radius:var(--radius-md);
    box-shadow:var(--shadow-2);text-align:center
  }
  .seo-intro-wrapper h1{margin:0 0 10px;font-size:2rem;color:#111}
  body.dark-mode .seo-intro-wrapper h1{color:#fff}
  .seo-intro-wrapper p{margin:0 0 1.5rem;font-size:1.08rem;line-height:1.7;color:#444}
  body.dark-mode .seo-intro-wrapper p{color:#ccc}
  .seo-intro-wrapper .seo-hero{display:block;max-width:100%;height:auto;border-radius:10px;margin:1rem auto 0}
}

/* -------------------
   WARSTWA: Utilities
------------------- */
@layer utilities {
  main{max-width:100%;padding:0}
  body.no-scroll{overflow:hidden}

  /* Mobile rules */
  @media (max-width:900px){
    .burger{display:block}
    /* chowamy desktopowe linki w pasku */
    header>nav>.menu, header>nav>a.menu-btn{display:none}
  }
  @media (max-width:600px){
    .joke-card{max-width:95%;margin:0 auto;padding:.75rem}
    .seo-intro-wrapper{margin:15px 12px;padding:15px}
  }

  /* Wyrównania H1 w treści (nie w logo) – opcjonalnie */
  main h1, #content h1, .main-centered h1, h1#category-title{
    text-align:center;margin:16px auto 20px;
  }
}

/* ==== PATCH: burger = jedna szara ramka z dwiema sekcjami ==== */

/* 1) Jedna wspólna ramka wewnątrz panelu (bez ruszania reszty) */
.menu-panel .panel-inner{
  display:flex;
  flex-direction: column;       /* na wąskich: jedna pod drugą */
  gap:12px;
  background:#f0f0f0;           /* szare tło jak na desktopie */
  border:1px solid #e0e0e0;
  border-radius:12px;
  padding:12px;
  margin:12px;
}

/* 2) Kolumny bez własnych ramek (żeby wyglądało jak jedna sekcja) */
.menu-panel .col{
  flex:1 1 0;
  background:transparent;
  border:0;
  padding:0;
}

/* 3) Delikatny separator między „Dowcipy” i „Sekcje” (pion/poziom zależnie od szerokości) */
.menu-panel .col + .col{
  border-top:1px solid rgba(0,0,0,.08);
  margin-top:10px;
  padding-top:10px;
}

/* 4) Tytuły sekcji wyśrodkowane */
.menu-panel .panel-title{
  text-align:center;
  margin:6px 0 8px;
  font-weight:800;
  text-transform:uppercase;
  opacity:.9;
}

/* 5) Linki w pionie + efekt hover/tap */
.menu-panel .list{ display:block; }
.menu-panel .list a{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .5rem;
  border-radius:8px;
  text-decoration:none;
  transition:transform .15s ease, background-color .15s ease;
}
.menu-panel .list a:hover{ background:#e9e9e9; transform:translateX(4px); }
.menu-panel .list a:active{ transform:translateX(6px) scale(.98); }

/* 6) Od ~600px kolumny obok siebie + separator PIONOWY zamiast poziomego */
@media (min-width: 600px){
  .menu-panel .panel-inner{ flex-direction:row; gap:20px; }
  .menu-panel .col + .col{
    border-top:0;
    margin-top:0; padding-top:0;
    border-left:1px solid rgba(0,0,0,.08);
    margin-left:10px; padding-left:10px;
  }
}

/* 7) Dark mode tylko dla burgera (reszty nie dotykamy) */
body.dark-mode .menu-panel .panel-inner{
  background:#1e1e1e;
  border-color:#333;
}
body.dark-mode .menu-panel .list a:hover{ background:#2a2a2a; }
body.dark-mode .menu-panel .col + .col{
  border-top-color:rgba(255,255,255,.12);
}
@media (min-width: 600px){
  body.dark-mode .menu-panel .col + .col{
    border-left-color:rgba(255,255,255,.15);
  }
}

/* === PATCH: burger – na mobile dwie kolumny obok siebie === */

/* Domyślnie (także na mobile) – dwie kolumny side-by-side */
.menu-panel .panel-inner{
  display: flex;
  flex-direction: row;         /* obok siebie */
  gap: 12px;
}

/* Każda kolumna zajmuje ~połowę szerokości */
.menu-panel .col{
  flex: 1 1 50%;
  min-width: 0;                /* pozwala zawijać treść w wąskich kolumnach */
}

/* Separator między kolumnami – pionowy (na drugiej kolumnie) */
.menu-panel .col + .col{
  border-left: 1px solid rgba(0,0,0,.08);
  margin-left: 10px;
  padding-left: 10px;

  /* usuń ewentualny separator poziomy z poprzednich stylów */
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* Linki w pionie (żeby się nie układały w poziomie) */
.menu-panel .list{ display:block; }
.menu-panel .list a{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .4rem;
  white-space: normal;         /* zawijanie nazw */
}

/* Dark mode – kolor pionowego separatora */
body.dark-mode .menu-panel .col + .col{
  border-left-color: rgba(255,255,255,.15);
}

/* Desktop: linki w pasku menu bez podkreślenia */
@media (min-width: 901px){
  header > nav > a.menu-btn {
    text-decoration: none !important;
  }
  header > nav > a.menu-btn:hover,
  header > nav > a.menu-btn:focus {
    text-decoration: none !important;
    opacity: .9;           /* delikatny hover zamiast underline */
  }
}

/* Link z ołówkiem też jest .menu-btn, więc również bez underline */
header > nav > a.menu-btn i { pointer-events: none; }

/* Karty dowcipów – powrót do wcześniejszej szerokości */
.joke-card {
  max-width: 600px !important;
  padding: 16px !important;   /* było ~1rem; ustawiamy 16px dla czytelności */
}

/* Kontener – delikatne boczne marginesy, żeby nie „przyklejało” na wąskich ekranach */
#jokes-container,
#static-jokes {
  padding-left: 12px;
  padding-right: 12px;
}

/* Na bardzo małych ekranach zostaw lekko wężej, ale nie na całą szerokość */
@media (max-width: 600px){
  .joke-card {
    max-width: 560px !important;  /* zachowuje „oddech” */
    width: 100%;
  }
}
/* Loader: pozwól JS-owi nadpisać display */
.loader { display: none; justify-content: center; align-items: center; gap: .5rem; }

/* Gdy JS ustawi inline "display: flex" – wymuś pokazanie */
#loader[style*="display: flex"], .loader[style*="display: flex"] { 
  display: flex !important; 
}

/* === LOADER (naprawa widoczności) === */
.loader{
  display: none;                 /* domyślnie schowany */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin: 2rem auto;
  min-height: 24px;              /* rezerwuje miejsce żeby nic nie „skakało” */
}
.loader.show{                    /* klasa aktywująca */
  display: flex;
}
.loader .dot{
  width: 12px;
  height: 12px;
  background-color: #e60000;     /* czerwony jak brand */
  border-radius: 50%;
  animation: loader-bounce .6s infinite alternate;
}
.loader .dot:nth-child(2){ animation-delay: .2s; }
.loader .dot:nth-child(3){ animation-delay: .4s; }

@keyframes loader-bounce{
  to{ transform: translateY(-10px); opacity: .5; }
}

/* Dark mode: jasne kropki dla kontrastu */
body.dark-mode .loader .dot{ background-color: #fff; }

/* Ten sam wygląd i szerokość kart wszędzie */
#jokes-container .joke-card,
#static-jokes .joke-card,
.main-centered .joke-card {
  max-width: 600px;   /* jak na HOME */
  width: 100%;
  margin: 0 auto;
}

/* === SINGLE: porządek układu na stronie pojedynczego dowcipu === */

/* kontener strony dowcipu – centrum i szerokość */
.main-centered{
  width:100%;
  max-width:800px;              /* bezpieczna szerokość treści */
  margin:0 auto;
  padding:1rem;
  display:flex;
  flex-direction:column;
  align-items:center;           /* wszystko domyślnie na środek */
}

/* okruszki mają iść do lewej krawędzi treści */
.main-centered .breadcrumbs{
  align-self:flex-start;        /* wyłam z centrowania */
  margin:0 0 .75rem 0;
}

/* nagłówek dowcipu – czytelny margines */
.main-centered .joke-heading{
  text-align:center;            /* jeśli wolisz z lewej: left */
  margin: 1rem 0 1rem;
}

/* karta dowcipu – ta sama szerokość co na liście */
.main-centered .joke-card{
  max-width:600px;
  width:100%;
  margin: 0 auto;
}

/* czerwony przycisk „Wszystkie dowcipy” – przywrócenie wyglądu */
.btn-back-to-top,
.btn-back-to-top:link,
.btn-back-to-top:visited{
  display:inline-block;
  margin: 1.5rem auto 0;
  padding: .75rem 1.5rem;
  background:#e60000;
  color:#fff !important;
  text-decoration:none !important;
  border-radius:6px;
  font-weight:700;
  transition: background .2s ease, transform .15s ease;
}
.btn-back-to-top:hover{ background:#b80000; transform: translateY(-1px); }

/* w ciemnym trybie zostaje czerwony */
body.dark-mode .btn-back-to-top{ color:#fff !important; }

/* na wszelki wypadek – linki w top-nawie bez podkreśleń */
header > nav a,
header > nav .menu-btn{
  text-decoration:none;
}
header > nav a:hover,
header > nav .menu-btn:hover{
  text-decoration:none;
}
/* breadcrumb w dowcip.php na środek */
.main-centered .breadcrumbs{
  text-align:center;
  margin: .5rem auto 1rem;
}
.main-centered .breadcrumbs a{
  text-decoration:none; /* bez podkreślenia */
}

/* Pasek jak w indexie */
header {background:#e60000; color:#fff; padding:1rem; position:sticky; top:0; z-index:1100;}
header > nav {display:flex; align-items:center; gap:1rem; width:100%;}
header h1, header h1 a {margin:0; text-align:left; color:#fff; text-decoration:none;}
#theme-toggle {margin:0 .75rem 0 .25rem; font-size:1.2rem; cursor:pointer;}

/* Linki w pasku (bez podkreślenia) */
header > nav a.menu-btn,
header > nav .menu-btn,
header > nav .dropdown a {
  text-decoration: none;
}

/* Wyśrodkowane breadcrumbs na stronie dowcipu */
.breadcrumbs { text-align:center; margin:10px 0 16px; }
.breadcrumbs a { text-decoration:none; }

/* Spójna szerokość jak na indexie */
.main-centered { max-width: 750px; margin: 0 auto; padding: 1rem; }
.joke-card { max-width: 600px; margin: 0 auto; }  /* jak w indexie */

/* Dark mode paska (jak w indexie) */
body.dark-mode header { background:#333; color:#fff; }
/* Breadcrumb w jednej linii, wyśrodkowany i pogrubiony */
.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* w razie braku miejsca może się łamać */
  gap: 6px; /* odstęp między elementami */
  font-weight: bold;
}

.breadcrumb a {
  text-decoration: none;
  color: inherit;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 4px;
}
body.dark-mode header { background:#333; color:#fff; }
body.dark-mode .dropdown { background:#222; color:#eee; }
body.dark-mode .dropdown a:hover { background:#333; color:#fff; }
#theme-toggle { color:#fff; cursor:pointer; }       /* w jasnym */
body.dark-mode #theme-toggle { color:#fff; }        /* w ciemnym */

/* Breadcrumb w jednej linii, wyśrodkowany, z pogrubieniem */
.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* pozwala złamać na bardzo małych ekranach */
  gap: 6px;
  font-weight: bold;
  margin: 10px 0;
}

.breadcrumb a {
  text-decoration: none;
  color: inherit;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 4px;
}

/* Dark mode – jaśniejszy tekst dowcipu */
body.dark-mode .joke-text {
  color: #e0e0e0 !important; /* jasnoszary, czytelny */
}

.btn-back-to-top {
  display: inline-block;
  margin: 20px auto;
}

.btn-back-to-top-container {
  text-align: center;
}

/* 1) Karta dowcipu na zmiennych – działa w dark mode bez dodatkowych reguł */
.joke-card{
  background: var(--c-ui-200) !important;
  border: 1px solid var(--c-ui-400) !important;
  /* reszta Twoich właściwości może zostać jak jest */
}

/* 2) Tekst i drobne elementy w karcie w dark mode (czytelność) */
body.dark-mode .joke-text{ color:#e6e6e6 !important; }
body.dark-mode .share-label{ color:#bbb !important; }

/* 3) Wyśrodkuj czerwony przycisk bez zmiany HTML */
.btn-back-to-top{
  display:block;            /* zamiast inline-block */
  width: fit-content;       /* zawęża do szerokości napisu */
  margin: 20px auto;        /* teraz zadziała centrowanie */
}
/* === FIX DARK MODE – twarde powiązanie z zmiennymi, nadpisuje stare reguły === */

/* (Masz je wyżej, ale tu jeszcze raz dla pewności, nic nie psuje) */
:root{
  --header-bg:#e60000; --header-fg:#fff;
  --bg:#fff; --text:#333;
  --ui-100:#f7f7f7; --ui-200:#f3f3f3; --ui-300:#eee; --ui-400:#ddd; --ui-500:#ccc;
}
body.dark-mode{
  --header-bg:#333; --header-fg:#fff;
  --bg:#121212; --text:#eee;
  --ui-100:#1a1a1a; --ui-200:#1a1a1a; --ui-300:#2a2a2a; --ui-400:#4b4b4b; --ui-500:#575757;
}

/* Tło/tekst całej strony */
body{ background:var(--bg) !important; color:var(--text) !important; }

/* Pasek na górze + linki w nim */
header{ background:var(--header-bg) !important; color:var(--header-fg) !important; }
header a,
header .menu-btn,
#theme-toggle{ color:var(--header-fg) !important; }

/* Dropdown „Dowcipy” */
.dropdown{ background:var(--ui-100) !important; color:var(--text) !important; }
.dropdown a{ color:inherit !important; }
.dropdown a:hover{ background:var(--ui-300) !important; }

/* Karta dowcipu i ramki SEO */
.joke-card{ background:var(--ui-200) !important; border:1px solid var(--ui-400) !important; }
.seo-intro-wrapper{ background:var(--ui-200) !important; border:1px solid var(--ui-400) !important; }

/* Drobne: opis/etykiety, żeby nie były zbyt ciemne w dark */
body.dark-mode .joke-text{ color:#e6e6e6 !important; }
body.dark-mode .share-label{ color:#bbb !important; }

/* Przycisk „Wszystkie dowcipy” na środek (jeśli jeszcze nie wjechał) */
.btn-back-to-top{ display:block !important; width:fit-content; margin:20px auto !important; }

/* === MOBILE BURGER: czarny tekst w Dowcipy i Sekcje === */
@media (max-width: 900px){
  /* cały panel burgera */
  .menu-panel {
    color: #000 !important;
  }

  /* tytuły kolumn */
  .menu-panel .panel-title {
    color: #000 !important;
  }

  /* linki w liście */
  .menu-panel .list a {
    color: #000 !important;
  }

  /* link po najechaniu */
  .menu-panel .list a:hover {
    color: #000 !important;
  }
}

 /* === HARD FIX: burger na wierzchu na mobile (pojedynczy dowcip) === */
@media (max-width: 900px){
  /* panel + overlay ponad wszystko */
  #menu-panel{
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: var(--header-h) !important;   /* spójnie z Twoją zmienną */
    bottom: 0 !important;
    z-index: 9999 !important;
    transform: translateY(-120%) !important; /* stan zamknięty */
    transition: transform .25s ease !important;
  }
  #menu-panel.open{
    transform: translateY(0) !important;    /* stan otwarty */
  }
  #menu-overlay{
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
  }

  /* burger na pewno widoczny */
  header .burger{ display: block !important; }
  /* blokada scrolla tła przy otwartym */
  body.menu-open{ overflow: hidden !important; }
}

/* overlay ma zniknąć całkiem, gdy ma [hidden] */
#menu-overlay[hidden]{ display: none !important; }

/* === SEAM FIX: usuń „włos” pod nagłówkiem na mobile === */
@media (max-width: 900px){
  #menu-panel{
    /* panel zaczyna pod paskiem, ale zachodzi o 1px do góry */
    top: var(--header-h) !important;
    margin-top: -1px !important;

    /* całkowicie usuwa linię, aby „włos” nie był widoczny */
    border-top: none !important;
  }
}

/* === DARK MODE: burger menu – białe litery w nocy === */
body.dark-mode .menu-panel {
  color: #fff !important; /* domyślny kolor tekstu w panelu */
}

body.dark-mode .menu-panel .panel-title {
  color: #fff !important; /* tytuły kolumn Dowcipy / Sekcje */
}

body.dark-mode .menu-panel .list a {
  color: #fff !important; /* linki w kolumnach */
}

body.dark-mode .menu-panel .list a:hover {
  background: #2a2a2a !important; /* ciemniejsze tło przy hover */
  color: #fff !important;         /* białe litery przy hover */
}

/* === MOBILE BURGER: usuń czarną „ramkę” wokół białego tła === */
@media (max-width: 900px){
  /* panel – zero obramowań/cieni/obrysu */
  #menu-panel{
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    /* jeżeli dodałeś wcześniej „seam fix” – zostawiamy overlap */
    top: var(--header-h) !important;
    margin-top: -1px !important;
  }
  #menu-panel:focus{ outline: 0 !important; }

  /* wewnętrzna „ramka” – wyłącz */
  .menu-panel .panel-inner{
    border: 0 !important;
    box-shadow: none !important;
  }

  /* separatory między kolumnami – wyłącz */
  .menu-panel .col + .col{
    border-left: 0 !important;
    border-top: 0 !important;
  }
}
/* Karta i badge kategorii (działa i dla statycznych i dynamicznych) */
.joke-card, article.card { position: relative; }

.joke-category-badge{
  position:absolute; top:10px; left:14px;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; line-height:1.6;
  background:#eef3ff; border:1px solid #d9e2ff; color:#1a3b8b;
  border-radius:9999px; padding:2px 10px; z-index:2;
}
.joke-category-badge a{ color:inherit; text-decoration:none; }
.joke-category-badge a:hover{ text-decoration:underline; }

/* odsunięcie treści, gdy karta ma badge */
.joke-card .joke-text, article.card .content { margin-top: 2.2rem; }

/* CIEMNY MOTYW – delikatniejsze tło */
body.dark-mode .joke-category-badge{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: #dbe7ff;
}

/* Bardzo wąskie ekrany – mniejszy badge */
@media (max-width: 380px){
  .joke-category-badge{ font-size: .78rem; padding: 1px 8px; }
}

/* Bardzo wąskie ekrany – mniejszy badge */
@media (max-width: 380px){
  .joke-category-badge{ font-size: .78rem; padding: 1px 8px; }
}

/* MOBILE: pionowy separator między kolumnami w burgerze */
@media (max-width: 900px){
  .menu-panel .panel-inner{
    position: relative; /* potrzebne dla pseudo-elementu */
  }
  .menu-panel .panel-inner::before{
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
    background: var(--c-ui-400); /* szara linia */
    pointer-events: none;
  }
  body.dark-mode .menu-panel .panel-inner::before{
    background: rgba(255,255,255,.15);
  }
}

/* Tagline – mobile only */
.burger-tagline { display: none; }

@media (max-width: 900px){
  .burger-tagline{
    display:block;
    text-align:center;
    color:#777;              /* kolor drugiego zdania */
    font-size:14px;
    line-height:1.4;
    padding:16px 12px 24px;
  }

  .burger-tagline .tagline-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:6px;
  }
  .burger-tagline .tagline-logo{
    width:28px; height:auto;
  }
  .burger-tagline .tagline-highlight{ font-size:16px; font-weight:800; margin:0; }
  .burger-tagline .brand-red{ color:#e60000; }
  .burger-tagline .tagline-black{ color:#000; }

  .burger-tagline .tagline-desc{
    margin:0;               /* reset domyślnego marginesu <p> */
  }

  /* Dark mode */
  body.dark-mode .burger-tagline{ color:#bbb; }
  body.dark-mode .brand-red{ color:#ff4d4d; }
  body.dark-mode .tagline-black{ color:#fff; }

  /* === Animacje wejścia po otwarciu menu (.open na #menu-panel) === */
  .menu-panel .burger-tagline{ opacity:0; transform: translateY(6px); }
  .menu-panel.open .burger-tagline{
    animation: tagline-fade-up .40s ease-out .00s both;
  }
  .menu-panel.open .burger-tagline .tagline-top{
    animation: tagline-fade-up .35s ease-out .20s both;
  }
  .menu-panel.open .burger-tagline .tagline-logo{
    animation: tagline-pop-in .35s ease-out .40s both;
  }
  .menu-panel.open .burger-tagline .tagline-highlight{
    animation: tagline-fade-up .35s ease-out .60s both;
  }
  /* DRUGIE ZDANIE: fade-in z prawej */
  .menu-panel.open .burger-tagline .tagline-desc{
    animation: tagline-slide-in-right .45s ease-out 1.2s both;
  }
}

/* Keyframes */
@keyframes tagline-fade-up{
  from{ opacity:0; transform: translateY(8px); }
  to{   opacity:1; transform: translateY(0); }
}
@keyframes tagline-pop-in{
  0%  { opacity:0; transform: scale(.92) translateY(8px); }
  60% { opacity:1; transform: scale(1.05) translateY(0); }
  100%{ opacity:1; transform: scale(1); }
}
@keyframes tagline-slide-in-right{
  from{ opacity:0; transform: translateX(22px); }
  to  { opacity:1; transform: translateX(0); }
}

/* ===================
   FOOTER ANIMACJE
=================== */

/* Keyframes */
@keyframes tagline-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tagline-pop-in {
  0%   { opacity: 0; transform: scale(.92) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.05) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ===================
   FOOTER + ANIMACJE
=================== */

/* Kolory (light) */
:root {
  --footer-fg: #777;   /* domyślny szary */
  --footer-hover: #000;/* hover czarny */
  --footer-underline: #000;
}

/* Kolory (dark) — automatycznie, jeśli system ma dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --footer-fg: #d7d7d7;
    --footer-hover: #fff;
    --footer-underline: #fff;
  }
}

/* Kolory (dark) — wymuszone przez atrybut/klasę motywu */
[data-theme="dark"], .theme-dark {
  --footer-fg: #d7d7d7;
  --footer-hover: #fff;
  --footer-underline: #fff;
}

/* Keyframes */
@keyframes tagline-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tagline-pop-in {
  0%   { opacity: 0; transform: scale(.92) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.05) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* === FOOTER — finalny patch (wklej na koniec) === */

/* Dzień: nic nie zmieniamy wizualnie, tylko zmniejszamy footer */
.site-footer{
  text-align:center;
  margin:1rem 0;         /* mniejszy */
  font-size:12px;        /* mniejszy */
  color:#777;
}
.footer-links{ margin-bottom:4px; }
.footer-links a{
  display:inline-block;
  color:#777;
  text-decoration:none;
  margin:0 8px;
  position:relative;
  transition:color .3s ease;
  font-size:12px;
}
.footer-links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:#000;
  transition:width .3s ease;
}
.footer-links a:hover{ color:#000; }
.footer-links a:hover::after{ width:100%; }

/* Jeśli przeglądarka ma systemowy dark mode, ale strona NIE ma body.dark-mode,
   to trzymaj kolory dzienne (fix nadpisywania). */
@media (prefers-color-scheme: dark){
  body:not(.dark-mode) .site-footer{ color:#777 !important; }
  body:not(.dark-mode) .footer-links a{ color:#777 !important; }
  body:not(.dark-mode) .footer-links a::after{ background:#000 !important; }
  body:not(.dark-mode) .footer-links a:hover{ color:#000 !important; }
}

/* Noc: tylko gdy masz klasę body.dark-mode */
body.dark-mode .site-footer{ color:#ccc !important; }
body.dark-mode .footer-links a{ color:#ccc !important; }
body.dark-mode .footer-links a:hover{ color:#fff !important; }
body.dark-mode .footer-links a::after{ background:#fff !important; }

/* === MOBILE FOOTER FIX: wyrównaj rozmiary linii na telefonach === */
.site-footer,
.site-footer * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Wymuś identyczny rozmiar dla obu linii */
.site-footer { font-size: 12px; }
.site-footer .footer-links a { font-size: 12px; }
.site-footer .footer-copy { font-size: 12px; line-height: 1.4; }

/* Dodatkowo: na bardzo wąskich ekranach niech się ładnie łamie, bez boosta */
@media (max-width: 600px){
  .site-footer { word-break: break-word; }
}

/* === FINAL FIX: dropdown „Dowcipy” – nad treścią, przewijalny, bez pasków === */
header,
.site-header,
.nav-wrap,
.nav-bar {
  overflow: visible !important; /* nic nie ucina menu */
}

.menu { 
  position: relative; 
  isolation: isolate; 
}

.dropdown{
  position: absolute;
  top: 100%;
  left: -35px;
  min-width: 180px;
  max-width: 90vw;

  z-index: 2000 !important;

  /* przewijanie tylko w pionie */
  max-height: calc(100dvh - var(--header-h) - 12px);
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* ukrycie pasków */
  scrollbar-width: none !important;       /* Firefox */
  -ms-overflow-style: none !important;    /* IE/Edge legacy */
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px 6px 0;                 /* oddech od prawej */
  background: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.dropdown::-webkit-scrollbar { width: 0; height: 0; }

.dropdown a{
  white-space: nowrap;
}

/* Desktop-only: chowamy burgera */
@media (min-width: 901px){
  .menu-panel, .menu-overlay { display: none !important; }
}

/* Ręczna szyna 300x600 po prawej, tuż pod nagłówkiem */
@media (min-width:1200px){
  header{ position:sticky; top:0; z-index:2000; } /* pasek nad reklamą */
  #ad-rail{
    position: fixed;
    right: 10px;
    top: calc(var(--header-h, 96px) + 8px); /* dostosuj jeśli nagłówek wyższy */
    width: 300px; height: 600px;
    z-index: 1500;
    transform: none;
    display: block;
  }
}
@media (max-width:1199px){
  #ad-rail{ display:none !important; }
}

/* Nie styluj globalnie Auto-adsów */
ins.adsbygoogle{ margin-top:0 !important; }

/* Kontener listy kategorii: rynna + wsparcie dla notcha (iPhone) */
.page-wrap, .category-list, .jokes-list {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  box-sizing: border-box;
}

/* Karta dowcipu */
.joke-card, .joke, .dowcip {
  border-radius: 12px;
  overflow: hidden;           /* świadomie przycinamy do promienia */
  box-sizing: border-box;
}

/* Zawartość nie wyjdzie poza kartę */
.joke-card *, .joke *, .dowcip * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Wrapper reklamy w karcie */
.ad-inpost {
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
  padding: 8px 10px;          /* boczny oddech */
  line-height: 0;             /* usuwa białą szczelinę pod iframe */
  overflow: hidden;           /* obetnij ewentualne wycieki */
  border-radius: 10px;        /* miło komponuje się z kartą */
}

/* Sam blok AdSense porusza się tylko w poziomie wrappera */
.ad-inpost > ins.adsbygoogle {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* IFRAME – szerokość na 100%; wysokość zostawiamy Google */
.ad-inpost iframe {
  display: block;
  justify-content:center;
  align-items:center;
  width: 100% !important;
  max-width: 100% !important;
  /* UWAGA: bez height !important – nie nadpisujemy wysokości AdSense */
}

/* Mobile: minimalna rezerwa na reklamę, zmniejsza CLS */
@media (max-width: 600px) {
  .ad-inpost { min-height: 260px; }
}

/* Asekuracja: brak poziomego scrolla */
html, body { overflow-x: hidden; }

/* Desktop/laptop: reklama dosunięta do prawej krawędzi karty */
@media (min-width: 601px){
  .ad-inpost{
    display:flex !important;
    justify-content:flex-end !important; /* dosuń do prawej */
    padding-right:0 !important;          /* zero luzu po prawej */
    padding-left:0 !important;
    margin:12px 0 !important;
  }

/* === Like counter (Bombelo) — final === */
.like-count{
  opacity: 1;
  transition: color .15s ease, opacity .15s ease, text-shadow .15s ease;
}

/* Dzień (light) */
body:not(.dark-mode) .like-count{
  color: #111827 !important;
  text-shadow: none;
}

/* Noc (dark) */
body.dark-mode .like-count{
  color: #e8edf7 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* (opcjonalnie) Ikony obok licznika dopasowane do trybu */
body.dark-mode .joke-actions svg,
body.dark-mode .joke-reactions svg{
  color:#e8edf7; fill:currentColor; stroke:currentColor;
}
body:not(.dark-mode) .joke-actions svg,
body:not(.dark-mode) .joke-reactions svg{
  color:#111827; fill:currentColor; stroke:currentColor;
}

.bombelo-ad-under { margin: 12px 0 24px; }
.bombelo-ad-under .adsbygoogle { display:block; min-height: 280px; }
.bombelo-ad-under.loading::after{
  content:"Ładuję reklamę…";
  display:block; font-size:12px; opacity:.6; text-align:center; padding:8px 0;
}