/* ==============================
   CSS Variables
============================== */
:root {
  --brand-900: #082546;
  --brand-700: #1a3566;   /* nav INFOSEC / footer – gra z logo */
  --brand-650: #14264d;   /* utility bar – ciemniejszy od navu */
  --brand-600: #1F56A3;   /* przyciski */
  --brand-300: #6C8CC4;
  --accent-600: #60A5FA;  /* hover / link */
  --text-900:  #0B1220;
  --text-100:  #E5E7EB;
  --surface:   #FFFFFF;
  --border:    #E5E7EB;
  --util-h:    44px;
  --nav-h:     100px;
}

/* ==============================
   Base & Reset
============================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  height: 100%;
  overflow-y: scroll;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
    sans-serif;
  color: var(--text-900);
  background: #fff;
  line-height: 1.6;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; }

label { display: block; margin: 10px 0 6px; }
form  { margin: 12px 0; }

/* ==============================
   Layout helpers
============================== */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

main, .main-content { flex: 1 0 auto; }

.main-content .container { padding: 24px 16px; }

/* ==============================
   Site header (sticky wrapper)
============================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #fff;
}

/* ==============================
   Utility bar
============================== */
.utility-bar {
  background-color: var(--brand-650);
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff;
  min-height: var(--util-h);
  font-size: 14px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--util-h);
  gap: 16px;
}

.utility-left,
.utility-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.util-list {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.util-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  opacity: .95;
}
.util-link:hover { opacity: 1; text-decoration: underline; }

.util-sep { width: 1px; height: 18px; background: rgba(255,255,255,.35); }

.util-social { display: flex; align-items: center; gap: 10px; }

.util-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
}
.util-icon:hover { background: rgba(255,255,255,.22); }

/* ==============================
   Navigation
============================== */
header,
.header,
.nav { background: linear-gradient(135deg, #162d5e 0%, #1e3d78 50%, #162d5e 100%); color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.3); position: relative; z-index: 100; }

.header { padding: 12px 0; }

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: var(--nav-h);
}

.nav .logo-img,
.logo-img {
  flex: 0 0 auto;
  height: 80px;
  width: auto;
  display: block;
  margin-right: 12px;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

.nav ul {
  display: flex;
  list-style: none;
  gap: 24px;
  padding: 12px 0;
  margin: 0;
}
.nav li { margin: 0; }

.nav a { color: #fff; text-decoration: none; font-weight: 500; }
.nav a:hover,
.nav a:focus { text-decoration: none; }

.nav a.highlight {
  background: #0e6bb8;
  color: #fff !important;
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 600;
}
.nav a.highlight:hover { background: #0b5893; }

/* #navMenu – desktop */
#navMenu {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
#navMenu li.push-right { margin-left: auto; }

/* ==============================
   Submenu (desktop)
============================== */
.nav ul li { position: relative; }

.nav ul li .submenu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--brand-700);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 180px;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
  z-index: 1000;
  transition:
    opacity .22s cubic-bezier(.4,0,.2,1),
    transform .22s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .22s;
}
.nav ul li .submenu > li { display: block; }

.nav ul li .submenu li a {
  display: block;
  padding: 10px 14px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.nav ul li .submenu li a:hover { background: var(--accent-600); }

.nav ul li:hover > .submenu,
.nav ul li:focus-within > .submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Chevron arrow (desktop) */
.nav ul li.has-submenu > a {
  position: relative;
  padding-right: 18px;
}
.nav ul li.has-submenu > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  transition: transform .2s ease;
}
.nav ul li.has-submenu:hover > a::after {
  transform: translateY(-40%) rotate(225deg);
}

/* ==============================
   Nav overlay (mobile)
============================== */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1200;
}
.nav-overlay.show { display: block; }

/* ==============================
   Footer
============================== */
.footer {
  background: var(--brand-700);
  border-top: 2px solid rgba(74,127,212,.25);
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  color: #fff;
  margin-top: 0;
}
.footer .container { padding: 16px; font-size: 14px; text-align: center; }
.footer a,
.footer a:visited { color: #cfe2ff; text-decoration: none; }
.footer a:hover,
.footer a:focus   { color: #fff; text-decoration: underline; }
.footer .container p a { margin-left: .35rem; }

/* ==============================
   Content elements
============================== */
.logo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 30px auto 10px;
}

.publikacja {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.publikacja h2 { margin: 0 0 8px; font-size: 20px; }

.publikacja img { max-width: 100%; height: auto; border-radius: 6px; margin-top: 10px; }

.publikacja .cover {
  max-width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

.publikacja .content img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

/* Buttons */
.button, button, .btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  border: 0;
  background: var(--brand-600);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}
.button:hover, button:hover, .btn:hover { background: var(--accent-600); }

.btn--ghost { background: transparent; color: #0e6bb8; border: 1px solid #0e6bb8; }
.btn--ghost:hover { background: #0e6bb8; color: #fff; }

/* Forms */
input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font: inherit;
  background: #fff;
}

/* ==============================
   Topbar (alternative header style)
============================== */
.topbar { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #e5e7eb; }
.topbar-inner { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { height: 80px; width: auto; display: block; }
.primary-nav { margin-left: auto; }
.primary-nav #navMenu { display: flex; gap: 18px; align-items: center; margin: 0; padding: 0; list-style: none; }
.primary-nav #navMenu a { display: block; padding: 10px 6px; text-decoration: none; color: #111827; font-weight: 600; }
.primary-nav #navMenu a:hover { color: #0e6bb8; }

/* ==============================
   Admin dashboard
============================== */
.dashboard { max-width: 900px; margin: 40px auto; padding: 0 16px; }
.dashboard h1 { margin-top: 0; }
.dashboard .publikacja { display: block; }

.tile-group { display: flex; flex-direction: column; gap: 14px; }

/* ==============================
   Sortable helpers
============================== */
.sort-item       { cursor: grab; user-select: none; }
.sortable-ghost  { opacity: .35; }
.sortable-chosen { box-shadow: 0 0 0 2px #7aa2ff; }
.sortable-drag   { opacity: .7; transform: scale(.98); }

/* ==============================
   Image wrappers
============================== */
.img-wrap { display: block; margin: 1rem auto; max-width: min(100%, 980px); }
.img-wrap img { width: 100%; height: auto; object-fit: contain; border-radius: 8px; }
.img-wrap.landscape { max-width: min(100%, 1000px); }
.img-wrap.portrait  { max-width: min(100%, 620px); }
.img-wrap.square    { max-width: min(100%, 720px); }

/* ==============================
   Pub grid
============================== */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pub-card { display: block; text-decoration: none; }
.pub-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; }
.pub-card .title { margin-top: 6px; font-size: .95rem; line-height: 1.3; color: #222; }

/* ==============================
   Pub row
============================== */
.pub-row { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; margin-top: 8px; }
.pub-row .cover { width: 260px; height: auto; max-height: 380px; object-fit: contain; border-radius: 12px; display: block; }

/* ==============================
   Pub thumb
============================== */
.publikacja .pub-thumb { display: inline-block; margin: .7rem 0; background: #f3f4f6; padding: 6px; border-radius: 12px; }

.publikacja .pub-thumb img {
  width: 300px;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  box-shadow: 0 0 0 8px #eef2f7;
}
.publikacja .pub-thumb img.landscape { width: 560px; aspect-ratio: auto; height: auto; object-fit: contain; }
.publikacja .pub-thumb img.square    { width: 320px; aspect-ratio: 1/1; object-fit: cover; }

/* ==============================
   Row (thumb + text)
============================== */
.row { display: block; }
.row.has-thumb { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start; }
.thumb { width: 160px; height: 120px; object-fit: cover; border-radius: 10px; display: block; }

/* ==============================
   Conf grid & thumbs (final)
============================== */
.conf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.conf-thumb { background: transparent; padding: 0; border-radius: 0; display: block; }

.conf-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
}
.conf-thumb img:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.conf-thumb img.landscape,
.conf-thumb img.portrait,
.conf-thumb img.square { aspect-ratio: auto !important; object-fit: contain !important; }

.conf-grid.conf-grid--single { grid-template-columns: 1fr; }
.conf-grid.conf-grid--single .conf-thumb img { aspect-ratio: auto; object-fit: contain; }

.conf-grid:has(> .conf-thumb:only-child) { grid-template-columns: 1fr; }
.conf-grid:has(> .conf-thumb:only-child) .conf-thumb img { aspect-ratio: auto; object-fit: contain; }

/* ==============================
   Publikacja.conf (conference card)
============================== */
.publikacja.conf { border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

.publikacja.conf .conf-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 12px;
}

.publikacja.conf .conf-thumb { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }

.publikacja.conf .conf-thumb img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  aspect-ratio: auto;
  object-fit: contain !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 8px #eef2f7 !important;
  background: transparent !important;
}

.publikacja.conf .conf-thumb img.landscape,
.publikacja.conf .conf-thumb img.portrait,
.publikacja.conf .conf-thumb img.square {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: 0 0 0 8px #eef2f7 !important;
}

.publikacja.conf .conf-thumb img:hover { box-shadow: 0 0 0 8px #e5ecf7, 0 6px 18px rgba(0,0,0,.06); }

.publikacja.conf .conf-grid:has(> .conf-thumb:only-child) .conf-thumb img { max-height: none !important; }

.publikacja.conf .content img {
  max-width: 980px !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 8px #eef2f7 !important;
}

/* ==============================
   Home news
============================== */
.home-news { margin: 32px 0; }
.home-news__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.home-news__head h2 { margin: 0; }

.home-news__card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
}
.home-news__thumb img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; display: block; }
.home-news__body h3 { margin: 0 0 6px; }
.home-news .meta { color: #64748b; margin-bottom: 8px; }

.home-news__card:has(.home-news__body):not(:has(.home-news__thumb)) { display: block; text-align: left; padding: 24px 32px; }
.home-news__card:has(.home-news__body):not(:has(.home-news__thumb)) .home-news__body { max-width: 800px; margin: 0 auto; }

/* ==============================
   Forum banner
============================== */
.forum-banner { display: block; text-decoration: none; color: inherit; background: linear-gradient(135deg, #155E9C, #0A4F8A); }
.forum-banner:hover { background: linear-gradient(135deg, #1180d8, #0c4f86); }
.forum-banner:hover .forum-banner__cta { text-decoration: underline; }
.forum-banner:hover .forum-banner__logo {
  transform: translateX(-50%) translateX(-440px) scale(1.03);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}

.forum-banner__inner { position: relative; min-height: 140px; display: flex; align-items: center; justify-content: center; }

.forum-banner__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateX(-440px);
  height: 130px;
  width: auto;
  transition: transform .25s ease, filter .25s ease;
}

.forum-banner__text { position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }

.forum-banner__eyebrow { display: inline-block; margin-bottom: 6px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #cfe6ff; }

.forum-banner h2 { margin: 0; font-size: clamp(22px, 3vw, 32px); line-height: 1.25; color: #fff; }

.forum-banner__cta { display: inline-block; margin-top: 12px; font-weight: 600; color: #e6f2ff; opacity: .9; }

/* ==============================
   Forum tabs (horizontal bar)
============================== */
.forum-tabs {
  background: linear-gradient(135deg, #1a3566, #0f2040);
  border-bottom: 2px solid rgba(255,255,255,.25);
  animation: forumIn .35s ease-out both;
}

@keyframes forumIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.forum-tabs__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.forum-tab { position: relative; }
.forum-tab > a { display: block; padding: 14px; font-size: 14px; color: #e6f0fa; text-decoration: none; white-space: nowrap; }
.forum-tab > a:hover { color: #fff; }
.forum-tab > a i { margin-left: 6px; font-size: 11px; opacity: .8; }

.forum-tab.has-sub > a i { transition: transform .2s ease; }
.forum-tab.has-sub:hover > a i { transform: rotate(180deg); }

.forum-tab--cta { display: flex; align-items: center; }
.forum-tab--cta > a {
  background: #ffffff;
  color: #0e5fa8;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 18px;
  margin-top: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.forum-tab--cta > a:hover { background: #e6f0fa; color: #0a3f6e; }

/* ==============================
   Forum submenu (horizontal)
============================== */
.forum-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #ffffff;
  min-width: 260px;
  list-style: none;
  padding: 8px 0;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.2);
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .22s cubic-bezier(.4,0,.2,1),
    transform .22s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .22s;
}

.forum-tab.has-sub:hover > .forum-sub,
.forum-tab.has-sub:focus-within > .forum-sub {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.forum-sub li a { display: block; padding: 10px 16px; font-size: 13px; color: #0a3f6e; text-decoration: none; }
.forum-sub li a:hover { background: #f1f5f9; }

/* ==============================
   Forum layout
============================== */
/* ==============================
   Forum – poziomy pasek nawigacji z ikonami
============================== */
.forum-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* chowamy stary sidebar – zastąpiony paskiem */
.forum-sidebar { display: none; }

.forum-topbar {
  background: linear-gradient(90deg, #1b3872 0%, #254d96 50%, #1b3872 100%);
  border-bottom: 3px solid rgba(255,255,255,.15);
  padding: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.forum-topbar::-webkit-scrollbar { display: none; }

.forum-topbar__inner {
  display: flex;
  align-items: stretch;
  min-width: max-content;
  margin: 0 auto;
  max-width: 1400px;
}

.ftab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 18px;
  text-decoration: none;
  color: #b8d4f0;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: background .18s, color .18s;
  min-width: 90px;
  position: relative;
}
.ftab:last-child { border-right: none; }
.ftab:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.ftab.active {
  background: rgba(74,127,212,.3);
  color: #fff;
}
.ftab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #4a7fd4;
  border-radius: 3px 3px 0 0;
}

.ftab__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background .18s, transform .18s;
}
.ftab:hover .ftab__icon {
  background: rgba(255,255,255,.2);
  transform: translateY(-2px);
}
.ftab.active .ftab__icon {
  background: rgba(91,184,255,.25);
  color: #5bb8ff;
}

/* CTA – Rejestracja */
.ftab--cta {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.ftab--cta .ftab__icon {
  background: #fff;
  color: #0e5fa8;
}
.ftab--cta:hover {
  background: rgba(255,255,255,.18);
}
.ftab--cta:hover .ftab__icon {
  background: #fff;
  color: #0e3f7a;
}

@media (max-width: 767.98px) {
  .forum-topbar { padding: 0; }
  .ftab { padding: 10px 12px; min-width: 70px; font-size: 10px; }
  .ftab__icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
}

/* ==============================
   Forum Sidebar (strona główna – floating)
============================== */
/* animacja wejścia */
@keyframes fs-enter {
  0%   { transform: translateY(-50%) translateX(100%); opacity: 0; }
  65%  { transform: translateY(-50%) translateX(-12px); opacity: 1; }
  82%  { transform: translateY(-50%) translateX(5px); }
  100% { transform: translateY(-50%) translateX(0); opacity: 1; }
}
/* animacja chowania */
@keyframes fs-hide {
  0%   { transform: translateY(-50%) translateX(0); opacity: 1; }
  100% { transform: translateY(-50%) translateX(100%); opacity: 0; }
}
/* animacja przycisku otwórz */
@keyframes fs-btn-enter {
  0%   { opacity: 0; transform: translateY(-50%) translateX(40px); }
  60%  { transform: translateY(-50%) translateX(-6px); opacity: 1; }
  80%  { transform: translateY(-50%) translateX(3px); }
  100% { transform: translateY(-50%) translateX(0); opacity: 1; }
}

.fs-sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(100%);
  z-index: 1500;
  background: linear-gradient(160deg, #254d96, #1b3872);
  border-radius: 14px 0 0 14px;
  box-shadow: -4px 0 24px rgba(0,0,0,.28);
  width: 320px;
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  pointer-events: auto;
  transition: background .15s;
}
.fs-sidebar.fs-ready {
  animation: fs-enter .7s cubic-bezier(.22,.68,0,1.2) forwards;
}
.fs-sidebar--closed {
  animation: none !important;
  transform: translateY(-50%) translateX(100%) !important;
  opacity: 0 !important;
  transition: transform .35s ease, opacity .25s ease;
  pointer-events: none;
}

/* przycisk zamknij */
.fs-toggle--close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.fs-toggle--close:hover { background: rgba(255,255,255,.3); }

/* klikalna treść */
.fs-content {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  text-decoration: none; color: #fff;
  margin-top: 10px; width: 100%;
}
.fs-content:hover .fs-cta { text-decoration: underline; }

.fs-logo {
  width: 160px; height: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
  transition: transform .2s;
}
.fs-content:hover .fs-logo { transform: scale(1.05); }

.fs-text {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; text-align: center;
}
.fs-label {
  font-size: 17px; font-weight: 700;
  line-height: 1.4; color: #fff;
}
.fs-cta {
  font-size: 14px; color: #cfe6ff; font-weight: 600;
}

/* przycisk otwórz */
.fs-toggle--open {
  position: fixed;
  top: 50%; right: 0;
  transform: translateY(-50%) translateX(100%);
  z-index: 1500;
  background: linear-gradient(160deg, #254d96, #1b3872);
  border: 0;
  border-radius: 14px 0 0 14px;
  color: #fff;
  padding: 22px 14px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  font-size: 24px;
  box-shadow: -4px 0 18px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: background .15s;
}
.fs-toggle--open:hover { background: linear-gradient(160deg, #1a7ad4, #0d4f8a); }
.fs-toggle--open.fs-toggle--visible {
  pointer-events: auto;
  animation: fs-btn-enter .5s cubic-bezier(.22,.68,0,1.2) forwards;
}
.fs-open-label {
  font-size: 13px; font-weight: 700;
  letter-spacing: .06em;
  writing-mode: vertical-rl; text-orientation: mixed;
}

@media (max-width: 767.98px) {
  .fs-sidebar { width: 240px; padding: 20px 16px 24px; }
  .fs-logo { width: 110px; }
  .fs-label { font-size: 15px; }
}

/* ==============================
   Nav – tryb Forum (zakładki z ikonami zamiast linków INFOSEC)
============================== */

/* Nav w trybie forum – ciemniejsze tło żeby odróżnić od navu INFOSEC */
.nav:has(#navMenu.nav-forum-mode) {
  background: linear-gradient(90deg, #1b3872, #254d96, #1b3872);
}

/* Lista zakładek forum w navie */
#navMenu.nav-forum-mode {
  gap: 0;
  padding: 0;
}

/* Przycisk powrót do INFOSEC */
.nav-forum-back > a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  color: #90b8e0 !important;
  border-right: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
  text-decoration: none;
}
.nav-forum-back > a:hover { color: #fff !important; background: rgba(255,255,255,.08); }
.nav-forum-back > a i { font-size: 16px; }

/* Zakładka forum w navie */
.ftab-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  color: #deeeff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.15);
  transition: background .15s, color .15s;
  line-height: 1.2;
}
.ftab-nav:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}
.ftab-nav.active {
  background: rgba(74,127,212,.3) !important;
  color: #fff !important;
  box-shadow: inset 0 -3px 0 #4a7fd4;
}

/* Ikona zakładki */
.ftab-nav__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  transition: background .15s, transform .18s;
}
.ftab-nav:hover .ftab-nav__icon {
  background: rgba(255,255,255,.2);
  transform: translateY(-2px);
}

/* CTA Rejestracja */
.ftab-nav--cta {
  color: #fff !important;
}
.ftab-nav--cta .ftab-nav__icon {
  background: rgba(255,255,255,.25) !important;
}
.ftab-nav--cta:hover .ftab-nav__icon {
  background: rgba(255,255,255,.4) !important;
}

/* Ukryj strzałkę submenu w trybie forum */
#navMenu.nav-forum-mode .has-submenu > a::after { display: none; }

/* Mobile – w trybie forum pokaż jako lista pionowa z ikonami */
@media (max-width: 767.98px) {
  #navMenu.nav-forum-mode { flex-direction: column; }
  .ftab-nav { flex-direction: row !important; justify-content: flex-start !important; padding: 10px 16px !important; border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13px !important; }
  .ftab-nav__icon { width: 28px; height: 28px; font-size: 13px; flex-shrink: 0; }
  .nav-forum-back > a { flex-direction: row !important; font-size: 13px !important; }
}

/* ==============================
   Mobile-only elements
============================== */
.mobile-only { display: none; }

/* ==============================
   Accessibility
============================== */
:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* ==============================
   Responsive – tablet (max 1023px)
============================== */
@media (max-width: 1023.98px) {
  .header .page-title { font-size: 24px; }
}

/* ==============================
   Responsive – medium (768–1200px)
============================== */
@media (min-width: 768px) and (max-width: 1200px) {
  #navMenu   { gap: 14px; }
  #navMenu a { font-size: 15px; }
  .logo-img  { height: 72px; margin-right: 10px; }
}

/* ==============================
   Responsive – large (min 1200px)
============================== */
@media (min-width: 1200px) {
  .conf-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  .publikacja.conf .conf-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important; }
}

/* ==============================
   Responsive – forum desktop only (min 901px)
============================== */
@media (min-width: 901px) {
  .forum-tabs:not(.forum-tabs--vertical) { display: none !important; }
}

/* ==============================
   Responsive – forum tablet (max 900px)
============================== */
@media (max-width: 900px) {
  .forum-tabs { display: none; }

  .forum-tabs__inner { justify-content: flex-start; overflow-x: auto; }

  .forum-sub { position: static; transform: none; box-shadow: none; background: rgba(255,255,255,.08); }
  .forum-sub li a { color: #e6f0fa; }
}

/* ==============================
   Responsive – mobile (max 768px)
============================== */
@media (max-width: 768px) {
  .pub-row  { grid-template-columns: 1fr; }
  .pub-row .cover { width: 100%; max-height: 420px; }

  .row.has-thumb { grid-template-columns: 1fr; }
  .thumb         { width: 100%; height: auto; }

  .home-news__card      { grid-template-columns: 1fr; }
  .home-news__thumb img { height: auto; }

  .forum-banner__inner { padding: 24px 16px; }
  .forum-banner__row   { flex-direction: column; text-align: center; }
  .forum-banner__logo  { height: 60px; }

  /* forum layout: topbar stays, full width content */
  .forum-layout  { display: flex; flex-direction: column; }
  .forum-sidebar { display: none; }
  .main-content  { width: 100%; margin-left: 0; }

  /* forum home image */
  .forum-home-image { display: flex; justify-content: center; align-items: center; padding: 40px 0 50px; }
  .forum-home-image img { max-width: 300px; width: 80%; height: auto; }

  /* Forum mobile hamburger section header */
  #navMenu .menu-section.mobile-only {
    background: linear-gradient(135deg, #1a3566, #0f2040);
    color: #e6f2ff;
    font-weight: 700;
    padding: 14px 16px;
    margin-top: 16px;
    border-top: none;
    letter-spacing: .08em;
  }

  #navMenu li.mobile-only.has-submenu > a {
    background: linear-gradient(135deg, #1a3566, #0f2040);
    color: #fff !important;
    font-weight: 600;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    padding-right: 36px;
  }

  #navMenu li.mobile-only.has-submenu > a::after {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
  }

  #navMenu li.mobile-only.expanded > a::after { transform: translateY(-50%) rotate(90deg); }

  #navMenu li.mobile-only.has-submenu .submenu { background: linear-gradient(135deg, #1a3566, #0f2040); padding-bottom: 6px; }
  #navMenu li.mobile-only.has-submenu .submenu a       { color: #e6f0fa !important; font-weight: 500; }
  #navMenu li.mobile-only.has-submenu .submenu a:hover { background: rgba(255,255,255,.15); }
}

#navMenu li.mobile-only.has-submenu > a i { margin-right: 8px; opacity: .9; }

/* ==============================
   Responsive – mobile (max 767.98px)
============================== */
@media (max-width: 767.98px) {
  /* Header */
  .header .page-title { padding: 16px 0; font-size: 22px; }

  /* Nav toolbar */
  .nav .container { justify-content: space-between; padding: 8px 16px; }
  .nav-toggle     { display: inline-block; }
  /* smaller logo on mobile so nav height is predictable */
  .nav .logo-img,
  .logo-img { height: 52px; }
  .nav ul         { background: var(--brand-700); top: calc(var(--util-h) + var(--nav-h)); }
  .nav ul li a    { display: block; padding: 8px 4px; font-size: 18px; }

  /* Utility */
  .utility-inner { padding: 0 12px; font-size: 13px; }
  .util-sep      { display: none; }

  /* Mobile-only items */
  .mobile-only { display: block; }

  #navMenu .menu-section {
    padding: 14px 16px 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.6);
    border-top: 1px solid rgba(255,255,255,.25);
    margin-top: 12px;
  }

  /* Mobile drawer – top = utility-bar(44px) + nav(68px with 52px logo) */
  :root { --nav-h: 68px; }
  #navMenu {
    position: fixed;
    top: calc(var(--util-h, 44px) + var(--nav-h, 68px));
    left: 0;
    width: 280px;
    height: calc(100vh - var(--util-h, 44px) - var(--nav-h, 68px));
    overflow-y: auto;
    background: var(--brand-700);
    padding: 12px 0;
    margin: 0;
    display: block !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 2001;
  }
  #navMenu.open { transform: translateX(0); }

  #navMenu > li { width: 100%; }
  #navMenu a    { display: block; padding: 10px 16px; color: #fff; text-decoration: none; line-height: 1.35; }

  /* Mobile submenu */
  #navMenu li .submenu {
    display: none !important;
    position: static !important;
    visibility: visible;
    opacity: 1;
    transform: none;
    width: 100%;
    margin: 4px 0 8px;
    padding: 0;
    background: var(--brand-700);
    box-shadow: none;
  }
  #navMenu li.expanded > .submenu  { display: block !important; }
  #navMenu li .submenu li a        { padding: 10px 16px 10px 28px; color: #fff !important; }
  #navMenu li .submenu li + li a   { border-top: 1px solid rgba(255,255,255,.12); }

  /* Arrow – mobile accordion (overrides desktop chevron) */
  .nav ul li.has-submenu > a::after {
    border: none;
    width: auto;
    height: auto;
    content: "▸";
    font-size: 14px;
    opacity: .85;
    margin-left: 8px;
    position: static;
    transform: none;
  }
  .nav ul li.expanded > a::after { transform: rotate(90deg); }

  #navMenu li.has-submenu > a { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
  #navMenu li.has-submenu > a::after { content: "▸"; font-size: .9em; margin-left: 6px; opacity: .9; transition: transform .2s ease; }
  #navMenu li.expanded > a::after { transform: rotate(90deg); }

  /* z-index stack */
  .nav-overlay { z-index: 1200; }
  .nav          { z-index: 1100; }

  /* Content */
  .main-content .container { padding: 16px; }
  .publikacja img           { max-width: 100%; }
}