/* ===== pasjonatruchu.pl — warstwa responsywna (mobile-first, nie psuje desktopu) ===== */

/* Podstawy */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

/* --- Szerokości i kontenery --- */
#wrapper, #banner_gora, #kolumna_1, #tekst_01 {
  max-width: 100% !important;
  width: 100%;
  box-sizing: border-box;
}

/* Baner na górze skaluje się do szerokości ekranu */
#banner_gora img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Tabela pod banerem (ikonki SM) – nie rozjeżdża layoutu */
#banner_gora table { width: 100% !important; table-layout: fixed; border-collapse: collapse; }
#banner_gora td { padding: 6px 4px; }
#banner_gora img[width], #banner_gora img[height] { height: auto !important; max-width: 100% !important; }

/* Obrazy i tabele w treści */
#content img, #tekst_01 img { max-width: 100%; height: auto !important; }
#content table, #tekst_01 table { width: 100% !important; table-layout: fixed; border-collapse: collapse; }
#content td, #content th, #tekst_01 td, #tekst_01 th { word-break: break-word; }

/* Wyrównanie podstawowych headingów na mniejszych ekranach */
@media (max-width: 768px) {
  h1 { font-size: 26px; line-height: 1.25; }
  h2 { font-size: 22px; line-height: 1.3; }
  h3 { font-size: 18px; line-height: 1.35; }
}

/* --- MENU GŁÓWNE (.menu) --- */
/* Desktop zostaje bez zmian (masz już style w menu_style.css).
   Na mobile przełączamy na flex/wrap i wyłączamy floaty. */
@media (max-width: 900px) {
  .menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    height: auto;      /* zamiast stałych 60px */
    margin: 0;
    padding: 8px;
    background-color: #0099FF; /* zachowujemy Twoje tło */
  }
  .menu li {
    float: none;                 /* wyłączamy float */
    flex: 1 1 48%;               /* 2 kolumny */
    list-style: none;
  }
  .menu li a {
    display: block;
    line-height: 1.4;            /* naturalna wysokość */
    padding: 12px 10px;
    text-align: center;
    background-position: center bottom; /* separator nie zjada tekstu */
  }
  /* Podmenu – pod linkiem, pełna szerokość */
  .menu li ul {
    position: static;
    display: none;               /* ukryte domyślnie */
    width: 100%;
    padding: 4px 0;
    background: #36a1f9;
    z-index: 200;
  }
  .menu li:hover ul { display: block; } /* prosty hover (na mobile tap=hover) */
  .menu li li { width: 100%; background: none; }
  .menu li ul a {
    height: auto;
    padding: 10px 12px;
    font-size: 0.95em;
    text-align: left;
  }
}
/* Małe telefony – 1 kolumna */
@media (max-width: 520px) {
  .menu li { flex: 1 1 100%; }
}

/* --- LIGHTBOX — pełnoekranowy overlay na mobile --- */
#overlay {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background-color: #000;
  opacity: 0.9;
  z-index: 9990;
}
#lightbox {
  position: fixed !important;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  z-index: 10000;
  text-align: center; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
}
#outerImageContainer {
  width: 92vw !important;
  max-width: 760px;
  height: auto !important;
  background: #fff;
}
#imageContainer { padding: 8px; }
#prevLink, #nextLink { height: 100%; }

/* --- Bloki webinarowe (Twoje klasy) – miękkie marginesy na mobile --- */
@media (max-width: 768px) {
  .webinar-blok { margin: 14px 0; padding: 16px; }
  #tekst_01 { padding: 0 12px; }
}


/* === DODATKOWE ŁATKI DLA PODSTRON === */

/* 1) iframy (YouTube, Vimeo, mapy) w 100% szer. + proporcje 16:9 */
iframe, embed, object { max-width: 100% !important; }
iframe[src*="youtube"], iframe[src*="youtu"], iframe[src*="vimeo"] {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  display: block;
}

/* 2) Kolumny/floating na mobile -> jedna pod drugą */
@media (max-width: 900px) {
  #kolumna_1, #kolumna_2,
  .kolumna, .kolumna_lewa, .kolumna_prawa,
  .left, .right, .lewa, .prawa,
  .blok_lewy, .blok_prawy {
    float: none !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    clear: both;
  }
  .box, .panel, .ramka, .tresc, .content, .article {
    max-width: 100% !important;
  }
}

/* 3) Tabele z „twardą” szerokością – niech mieszczą się w ekranie */
table, #content table, #tekst_01 table {
  width: 100% !important;
  table-layout: fixed;
  border-collapse: collapse;
}
table[width], td[width], th[width] { width: auto !important; }
td, th { word-break: break-word; }

/* 4) Obrazy z atrybutami width/height – wymuś elastyczność */
img[width], img[height] { max-width: 100% !important; height: auto !important; }

/* 5) Wewnętrzne „kontenery treści” – bezpieczne marginesy na brzegach */
#content, #tekst_01, .tresc, .content, .article { padding: 0 12px; }

/* 6) Separator w menu nie psuje kafelków na mobile */
@media (max-width: 900px) {
  .menu li a { background-image: none !important; line-height: 1.4; padding: 12px 10px; }
}

/* 7) Ostrożny bezpiecznik na horyzontalny scroll */
html, body { overflow-x: hidden; }

/* === NOWE MENU: poziome (desktop) → pionowe (mobile) === */

/* Reset starych ustawień */
.menu { border:0; margin:0; padding:0; background:transparent; position: relative; }
.menu ul { height:auto !important; background:transparent; }
.menu li { float:none !important; padding:0; background:transparent; }
.menu li a {
  background:none !important;           /* wyłącza hover.gif i separator.gif */
  background-image:none !important;
  line-height:1.2 !important;
  margin:0;
}

/* Pasek poziomy na desktopie */
.menu ul{
  list-style:none;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;               /* wyśrodkowane */
  gap:8px;
  padding:8px 12px;
  border-top:1px solid #e6eef6;
  border-bottom:1px solid #e6eef6;
  background:#ffffff;                   /* jasne tło paska */
}
.menu li a{
  display:block;
  padding:10px 14px;
  font-weight:600;
  color:#0b2239;                        /* ciemny tekst */
  text-decoration:none;
  border-radius:10px;
  transition:background .2s,color .2s;
}
.menu li a:hover{
  background:#f2f7ff;
  color:#0d6efd;                        /* delikatny niebieski na hover */
}

/* Rozwijane podmenu (desktop) */
.menu li ul{
  position:absolute;
  display:none;
  min-width:220px;
  padding:8px;
  margin-top:6px;
  background:#fff;
  border:1px solid #e6eef6;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(2,13,38,.08);
  z-index:200;
}
.menu li:hover > ul{ display:block; }
.menu li li{ width:100%; }
.menu li li a{ padding:8px 10px; font-weight:500; border-radius:8px; }
.menu li li a:hover{ background:#f7fbff; }

/* ——— Widoki mobilne ——— */
@media (max-width: 900px){
  .menu ul{
    flex-direction:column;              /* pionowo */
    align-items:stretch;
    gap:0;
    padding:0;
    border:0;
    background:#ffffff;
  }
  .menu li a{
    border-bottom:1px solid #e9eef5;
    padding:12px 14px;
  }
  .menu li:last-child a{ border-bottom:0; }

  /* Podmenu pod linkiem, bez pozycji absolute */
  .menu li ul{
    position:static;
    display:none;
    box-shadow:none;
    border:0;
    padding:0;
    margin:0;
  }
  .menu li:hover > ul{ display:block; } /* tap=hover na mobile */
  .menu li li a{ padding:10px 14px; }
}

/* Na bardzo małych ekranach trochę mniejsze paddingi */
@media (max-width: 520px){
  .menu li a{ padding:10px 12px; }
}

/* ===== MENU – BRUTALNE NADPISANIE (desktop poziomo, mobile pionowo) ===== */

/* 0) Wyłączamy stare tła, wysokości i obrazki w menu */
.menu,
.menu ul,
.menu li,
.menu li a {
  background: none !important;
  background-image: none !important;
  height: auto !important;
  line-height: normal !important;
  margin: 0;
  padding: 0;
}

/* 1) Pasek na całej szerokości pod banerem */
.menu { width: 100% !important; }

/* 2) TOP UL – układ poziomy na desktopie */
.menu > ul {
  list-style: none;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;           /* wyśrodkowane */
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e6eef6;
  border-bottom: 1px solid #e6eef6;
  background: #ffffff !important;    /* wymuszamy białe tło */
}

/* 3) Linki – wygląd */
.menu > ul > li { float: none !important; }
.menu a {
  display: block !important;
  padding: 10px 14px !important;
  font-weight: 700;
  color: #0b2239 !important;
  text-decoration: none !important;
  border-radius: 10px;
  transition: background .2s, color .2s;
}
.menu a:hover { background: #f2f7ff !important; color: #0d6efd !important; }

/* 4) Podmenu – klasyczne rozwijane na desktopie */
.menu li { position: relative; }
.menu li ul {
  position: absolute !important;
  display: none;
  min-width: 220px;
  padding: 8px;
  margin-top: 6px;
  background: #fff !important;
  border: 1px solid #e6eef6;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(2,13,38,.08);
  z-index: 200;
}
.menu li:hover > ul { display: block; }
.menu li li { width: 100% !important; }
.menu li li a { padding: 8px 10px !important; font-weight: 600; border-radius: 8px; }
.menu li li a:hover { background: #f7fbff !important; }

/* ——— MOBILE ——— */
@media (max-width: 900px){
  /* całość pionowo, pełna szerokość */
  .menu > ul {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
    padding: 0;
    border: 0;
    background: #ffffff !important;   /* kasujemy stare niebieskie tło */
  }
  .menu > ul > li { width: 100%; }

  .menu a {
    border-bottom: 1px solid #e9eef5;
    padding: 12px 14px !important;
  }
  .menu > ul > li:last-child > a { border-bottom: 0; }

  /* Podmenu pod linkiem, bez absolute */
  .menu li ul {
    position: static !important;
    display: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  .menu li:hover > ul { display: block; } /* tap=hover na mobile */
  .menu li li a { padding: 10px 14px !important; }
}

@media (max-width: 520px){
  .menu a { padding: 10px 12px !important; }
}