/* lyocycle-theme/assets/css/main.css */

/* =========================================================
   Reset i podstawy
========================================================= */
:root{
  /* Logo (responsywne) */
  --logo-size: clamp(86px, 10vw, 100px);
  --logo-size-scrolled: clamp(50px, 8.5vw, 70px);
  /* Header */
  --header-pad: 14px;
  --header-pad-scrolled: 8px;
  --header-height: 72px; 
  --adminbar: 0px;       
  /* Kolory */
  --bg: #0b0f1a;
  --surface: #141a2a;
  --primary: #00b5ff;
  --text: #e6eaf2;
  --muted: #8a93a6;
  --accent: var(--primary);
  /* Dodatkowe */
  --bg-card:#111217;
  --bg-soft:#11111a;
  --accent-glow:#7300ff33;
  --text-soft:#b4b9c4;
  --radius:24px;
  --shadow:0 0 30px rgba(0,229,255,.08);
  --overlay: rgba(9,12,20,.68);
  --card-bg: #0f1220;
  --card-text: #ffffff;
  --card-subtext: rgba(255,255,255,.82);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
}
a{ color:var(--primary); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto }

/* Anchor-scroll fix for sticky header */
section[id], [data-section][id], .wp-block-group[id], .kt-inside-inner-col[id] {
  scroll-margin-top: clamp(64px, 10vh, 120px);
}

/* Kontener */
.container{ max-width:100vw; margin:0 auto; padding:10px; border-radius: 25%; }

/* A11y: ukrycie tekstu dla screen-readerów */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   Header – FIXED + shrink on scroll
========================================================= */
.site-header{
  position: fixed;
  top: var(--adminbar, 0px);
  left: 0; right: 0; width: 100%;
  z-index: 1000;
  will-change: transform;

  padding: var(--header-pad) 0;
  background: rgba(20,26,42,.8);
  backdrop-filter: saturate(180%) blur(10px);
  transition: padding .25s ease, background .25s ease, box-shadow .25s ease, top .1s ease;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-evenly; gap:16px;padding-left: 30px; padding-right: 30px;
}

/* Shrink po przewinięciu (wizualka) */
.site-header.is-scrolled{
  padding: var(--header-pad-scrolled) 0;
  background: rgba(20,26,42,.92);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Alternatywny znacznik scrolled z body */
body.scrolled .site-header{
  padding: var(--header-pad-scrolled) 0;
  background: rgba(20,26,42,.95);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  backdrop-filter: saturate(180%) blur(10px);
}
body.has-fixed-header .site-main{
  padding-top: calc(var(--header-height));
}

/* =========================================================
   Logo – inline SVG
========================================================= */
.site-logo-link{ display:inline-block; line-height:0; }
.site-logo{
  width: var(--logo-size);
  height: auto; max-height: none;
  transform-origin: center;
  transition: transform .25s ease, filter .25s ease, width .25s ease;
}
.site-header.is-scrolled .site-logo{ width: var(--logo-size-scrolled); }

@keyframes logoFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}
.site-logo[data-anim="auto"] { animation: logoFloat 4s ease-in-out infinite; }
.site-logo[data-anim="hover"]:hover {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.site-header.is-scrolled .site-logo[data-anim="auto"] { animation-duration: 3.5s; }

@media (prefers-reduced-motion: reduce){
  .site-logo{ animation: none !important; transition: none !important; }
}

/* =========================================================
   ifreme – ukrycie dla screen-readerów
========================================================= */



/* =========================================================
   Nawigacja – wspólny layout
========================================================= */
.primary-nav{ position:relative; }
.menu{
  list-style:none; display:flex; align-items:center;
  gap: clamp(14px, 2vw, 28px); margin:0; padding:0;
}

/* Linki desktop – bez podkreśleń, czysty hover */
.menu > li > a{
  display:inline-block; padding:10px 2px; text-decoration:none;
  color:var(--text); font-weight:400; line-height:1; position:relative;
  transition: color .18s ease, opacity .18s ease, transform .18s ease;
}
/* .menu > li.current-menu-item > a { color:var(--accent); } */
.menu > li > a:hover{ color: var(--accent); transform: translateY(-1px); }

/* Twardy reset ozdobników (także w sub-menu) */
.primary-nav .menu > li > a,
.primary-nav .menu > li > a:visited,
.primary-nav .menu > li > a:hover,
.primary-nav .menu > li > a:focus,
.primary-nav .menu > li > a:active,
.primary-nav .menu .sub-menu > li > a,
.primary-nav .menu .sub-menu > li > a:hover,
.primary-nav .menu .sub-menu > li > a:focus{
  font-family:'Noto Sans', sans-serif; 
  font-size: 1em;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 0 !important;
  background-image: none !important;
}
.primary-nav .menu,
.primary-nav .menu .sub-menu{ list-style: none !important; }

/* =========================================================
   Dropdown (desktop)
========================================================= */
@media (min-width:1025px){
  .menu > li{ position:relative; }
  .menu > li > .sub-menu{
    list-style:none; margin:0; padding:6px 0;
    position:absolute; left:50%; top:70%;
    transform: translate(-50%, 8px);
    min-width:220px;
    background: rgba(12,16,26,.98);
    border-radius:10px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .menu > li:hover > .sub-menu,
  .menu > li:focus-within > .sub-menu{
    opacity:1; visibility:visible; pointer-events:auto;
    transform: translate(-50%, 4px);
  }
  .sub-menu > li > a{
    display:block; padding:10px 12px; text-decoration:none; color:var(--text);
    border-radius:8px;
    transition: background .16s ease, color .16s ease;
    white-space:nowrap;
  }
  .sub-menu > li > a:hover{ background: rgba(255,255,255,.06); color: var(--accent); }
}



/* =========================================================
   Lang button
========================================================= */

.lang-btn{
  margin-left: 12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  cursor:pointer; transition: .2s ease;
}
.lang-btn:hover{ background: rgba(255,255,255,.10); }
.lang-btn:focus-visible{ outline:2px solid var(--accent,#00e0ff); outline-offset:2px; }

.flag{ width:22px; height:auto; display:block; }
.flag-en{ opacity:.35; transition:.2s; }
.flag-pl{ opacity:1; transition:.2s; }

/* Gdy aktywny EN – zamieniamy akcenty wizualne */
.lang-btn[data-lang="en"] .flag-en{ opacity:1 }
.lang-btn[data-lang="en"] .flag-pl{ opacity:.35 }

/* Na bardzo małych ekranach — tylko ikony, bez tła */
@media (max-width:520px){
  .lang-btn{ padding:6px 8px; background: transparent; border-color: transparent; }
}

/* =========================================================
   Burger + wspólne utility
========================================================= */
.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background: rgba(20,26,42,.5); backdrop-filter: saturate(180%) blur(8px);
  cursor:pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.menu-toggle:active{ transform: scale(.96); }
.menu-toggle .burger{ position:relative; width:22px; height:14px; display:inline-block; }
.menu-toggle .line{
  position:absolute; left:0; right:0; height:2px; background:var(--text);
  border-radius:2px; transition: transform .25s ease, opacity .2s ease, top .2s ease, background .2s ease;
}
.menu-toggle .l1{ top:0; } .menu-toggle .l2{ top:6px; } .menu-toggle .l3{ top:12px; }
body.nav-open .menu-toggle .l1{ top:6px; transform: rotate(45deg); }
body.nav-open .menu-toggle .l2{ opacity:0; }
body.nav-open .menu-toggle .l3{ top:6px; transform: rotate(-45deg); }

/* Backdrop z motywu – przy overlayu niepotrzebny */
.nav-backdrop{ display:none !important; }

/* =========================================================
   MOBILE OVERLAY – pełnoekranowe menu
========================================================= */
@media (max-width:1024px){
  .menu-toggle{ display:inline-flex; position:relative; z-index:1201; }
  body.nav-open .menu-toggle{
    position: fixed;
    top: calc(var(--adminbar, 0px) + 12px);
    right: 16px;
  }

  .menu-panel{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: calc(var(--adminbar, 0px) + 72px) 18px 24px !important;

    background: rgba(12,16,26,.98) !important;
    backdrop-filter: saturate(180%) blur(12px) !important;

    display: block !important;
    overflow: auto !important;
    transition: opacity .24s ease;

    /* zamknięte: panel nie istnieje dla interakcji/observerów */
    opacity: 0; pointer-events: none; visibility: hidden; z-index: -1;
  }
  body.nav-open .menu-panel{
    opacity: 1; pointer-events: auto; visibility: visible; z-index: 1200;
  }

  .menu{
    display: grid !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .menu > li{ width: 100%; }
  .menu > li > a{
    display:block; width:100%;
    padding:16px 12px; border-radius:12px;
    font-size: clamp(18px, 4.6vw, 22px);
    color: var(--text); text-decoration:none; background:transparent;
  }
  .menu > li > a:hover{ background: rgba(255,255,255,.06); }

  /* Submenu jako akordeon */
  .menu .sub-menu{
    list-style:none; margin:0; padding:4px 0 4px 12px;
    max-height:0; overflow:hidden; transition:max-height .22s ease;
  }
  .menu li.open > .sub-menu{ max-height:600px; }
}

/* Desktop – panel nie jest off-canvas */
@media (min-width:1025px){
  .menu-panel{
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center;
    height: auto !important; width: auto !important;
    padding: 0 !important; background: transparent !important; backdrop-filter: none !important;
  }
}

/* =========================================================
   Drobne komponenty
========================================================= */
.primary-nav .menu{ gap:20px; flex-wrap:wrap; max-height:80px; }
.primary-nav .menu a{ padding:8px 12px; border-radius:10px; transition:background .2s ease }


.site-footer{ background:var(--surface); margin-top:60px; padding:32px 0; color:var(--muted) }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap }
.footer-nav .menu{ list-style:none; margin:0; padding:0; display:flex; gap:12px }

.content-area{ padding:40px 0 }
.entry-title a{ color:var(--text) }

.search-form{ display:flex; gap:8px }
.search-field{
  padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.1);
  background:#0f1422; color:var(--text); min-width:200px
}
.search-submit{
  padding:10px 14px; border:0; border-radius:10px; background:var(--primary);
  color:#001826; cursor:pointer; font-weight:600
}

.widget{ background:rgba(20,26,42,.6); padding:16px; border-radius:12px; margin-bottom:20px }
.widget-title{ margin:0 0 12px }

/* Hero – przykładowe style */
.lhero{ padding:100px 0; background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.2)) }
.lhero-inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center }
.lhero h1{ font-size:clamp(32px,6vw,56px); margin:0 0 12px }
.lhero p{ color:var(--muted); font-size:18px }
.lhero .hero-cta{ display:flex; gap:12px; margin-top:20px }
.lhero .button{ display:inline-block; padding:12px 18px; border-radius:12px; background:var(--primary); color:#001826; font-weight:700 }
.lhero-visual{
  min-height:280px; border-radius:16px;
  background:radial-gradient(120% 100% at 0% 0%, rgba(0,181,255,.24) 0%, rgba(0,0,0,0) 60%),
             linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 60px rgba(0,0,0,.35)
}
@media (max-width:900px){ .lhero-inner{ grid-template-columns:1fr } }

/* 404 */
.error-404 .button{
  display:inline-block; padding:10px 14px; border-radius:10px;
  background:var(--primary); color:#001826; font-weight:700
}
/* SAFETY: widoczność panelu sterowana klasą */
#site-menu[hidden]{ display:none !important; }
@media (max-width:1024px){
  .menu-toggle{ display:inline-flex !important; z-index:1201; }
  .menu-panel{ position:fixed !important; inset:0 !important; opacity:0; pointer-events:none; visibility:hidden; z-index:-1; }
  body.nav-open .menu-panel{ opacity:1; pointer-events:auto; visibility:visible; z-index:1200; }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; transition:opacity .24s }
  body.nav-open .nav-backdrop{ opacity:1; }
  .site-header{ z-index:2147483647 !important; }
}

 h2{
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 .5rem;
  color: var(--text);
  position: relative;
  display: inline-block;
}
h2::after {
  content: "";
  display: block;
  height: 3px;
  width: 80px;
  margin: 12px auto 0;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.5s ease;
}
h2:hover h2::after {
  width: 120px;
}
p{
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.7;
  color: var(--muted);
  position: relative;
  animation: fadeInUp 1s ease-out;
}

/* === NAV click-fix: ogranicz hit-box przełącznika języka === */

/* Jeśli masz jakiś wrapper na przełącznik (dopasuj klasy/nazwy):
   wyłącz mu przechwytywanie klików – tylko sam przycisk ma je brać. */
.header-tools, .lang-wrap, .lang-box, .lang-switch { pointer-events: none; }

/* Sam przełącznik ma normalne kliknięcia i niech nie tworzy szerokiej nakładki */
#lang-toggle, [data-lang-toggle]{
  pointer-events: auto;
  display: inline-flex;
  width: auto; height: auto;
  position: relative;
  z-index: 2; /* poniżej linków menu, powyżej tła */
}

/* Linki menu zawsze nad ewentualnymi nakładkami */
.site-header .primary-nav{ position: relative; z-index: 5; }
.site-header .primary-nav .menu > li > a{
  position: relative;
  z-index: 6;       /* wyżej niż #lang-toggle */
  pointer-events: auto;
}

/* profilaktyka: żadne pseudo-ozdobniki przełącznika nie powinny łapać klików */
#lang-toggle::before, #lang-toggle::after{ pointer-events: none; }