/* =============================================================================
   PASEK GŁÓWNY NA PODSTRONACH (09.10.2026)
   Ten sam pasek co na stronie głównej (logo, wyszukiwarka, aA, motyw,
   „Wspieram”, menu). Używają go wszystkie podstrony:
   statut, standardy-ochrony, darczyncy, partnerzy, rodzina-zastepcza,
   wesprzyj-nas, kalendarium. Plik ładowany PO <style> podstrony, a reguły
   zaczynają się od header.lj-bar, żeby wygrywały ze starymi stylami nagłówka.
   Wygląd skopiowany ze strony głównej (index.html, sekcja NAV) - zmiana
   paska = zmiana w index.html ORAZ tutaj.
   ============================================================================= */
:root{
  --nav-hover-bg:#FFFFFF;
  --nav-hover-shadow:0 4px 12px rgba(20,26,61,0.13), 0 1px 2px rgba(20,26,61,0.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --nav-hover-bg:#262E52;
    --nav-hover-shadow:0 4px 14px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  }
}
:root[data-theme="dark"]{
  --nav-hover-bg:#262E52;
  --nav-hover-shadow:0 4px 14px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
}

header.lj-bar{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, border-color .25s ease;
}
header.lj-bar.is-compact{box-shadow:0 4px 16px rgba(20,26,61,0.08);border-bottom-color:transparent;}
header.lj-bar .navrow{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:32px;
  padding:10px 32px;max-width:1180px;margin:0 auto;
  transition:padding .28s ease;
}
header.lj-bar.is-compact .navrow{padding-top:7px;padding-bottom:7px;}
header.lj-bar .wordmark{display:flex;align-items:center;text-decoration:none;color:var(--ink);flex:0 0 auto;}
header.lj-bar .logo-img{height:58px;width:auto;display:block;transition:height .28s ease;}
header.lj-bar.is-compact .logo-img{height:34px;}

header.lj-bar .nav-stack{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
header.lj-bar .nav-row-top{
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding-bottom:11px;transition:padding .28s ease;
}
header.lj-bar.is-compact .nav-row-top{padding-bottom:6px;}
header.lj-bar .nav-divider{border:none;border-top:1px solid var(--line);margin:0;transition:opacity .2s ease;}
header.lj-bar.is-compact:not(.menu-open) .nav-divider{display:none;}
header.lj-bar .nav-row-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:11px;overflow:hidden;max-height:200px;
  transition:padding .28s ease, max-height .32s ease, opacity .25s ease;
}
header.lj-bar.is-compact .nav-row-bottom{padding-top:6px;}
header.lj-bar.is-compact:not(.menu-open) .nav-row-bottom{max-height:0 !important;opacity:0;padding-top:0 !important;}
header.lj-bar.is-compact.menu-open .nav-row-bottom{max-height:600px;opacity:1;}
@media (hover:hover) and (pointer:fine){
  header.lj-bar.is-compact:hover .navrow{padding-top:10px !important;padding-bottom:10px !important;}
  header.lj-bar.is-compact:hover .logo-img{height:58px !important;}
  header.lj-bar.is-compact:hover .nav-row-top{padding-bottom:11px !important;}
  header.lj-bar.is-compact:hover .nav-divider{display:block !important;}
  header.lj-bar.is-compact:hover .nav-row-bottom{max-height:200px !important;opacity:1 !important;padding-top:11px !important;}
  header.lj-bar.is-compact:hover .menutoggle-mobile{display:none !important;}
}
@media (min-width:920px){header.lj-bar:not(.is-compact) .nav-row-bottom{overflow:visible;}}
@media (min-width:920px) and (hover:hover) and (pointer:fine){header.lj-bar.is-compact:hover .nav-row-bottom{overflow:visible;}}

/* menu */
header.lj-bar nav.links{display:flex;gap:26px;align-items:center;flex-wrap:wrap;white-space:nowrap;margin:0;}
header.lj-bar nav.links a{
  text-decoration:none;font-size:15px;color:var(--ink);opacity:0.82;
  position:relative;border-radius:999px;padding:6px 12px;margin:-6px -12px;
  transition:opacity .15s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (min-width:920px) and (max-width:1180px){header.lj-bar nav.links{gap:16px;}header.lj-bar nav.links a{font-size:14.5px;}}
@media (min-width:920px) and (max-width:1040px){header.lj-bar nav.links{gap:11px;}header.lj-bar nav.links a{font-size:14px;}}
header.lj-bar nav.links a:hover{opacity:1;}
header.lj-bar nav.links a.is-current{opacity:1;}
header.lj-bar nav.links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;
  border-radius:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:center;transition:transform .25s ease;
}
header.lj-bar nav.links a.is-current::after{transform:scaleX(1);}
@media (max-width:919px){header.lj-bar nav.links a::after{right:auto;width:28px;transform-origin:left;}}
@media (hover:hover) and (pointer:fine){
  header.lj-bar nav.links a:hover{background-color:var(--nav-hover-bg);box-shadow:var(--nav-hover-shadow);transform:translateY(-1px);}
}
@media (prefers-reduced-motion: reduce){
  header.lj-bar nav.links a, header.lj-bar nav.links a::after{transition:none;}
  header.lj-bar nav.links a:hover{transform:none !important;}
}

/* przycisk „Wspieram” */
header.lj-bar .btn.navcta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:0 0 auto;white-space:nowrap;border-radius:999px;
  height:38px;padding:0 20px;margin:0;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:500;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  background:var(--gold);color:var(--forest-deep);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
header.lj-bar .btn.navcta:hover{background:var(--gold-deep);color:var(--forest-deep);}

/* wyszukiwarka - na podstronach otwiera wyszukiwanie na stronie głównej */
header.lj-bar .search-trigger{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  border-radius:999px;cursor:pointer;text-decoration:none;
  border:1px solid var(--line);background:var(--paper-soft);
  flex:0 0 auto;height:38px;padding:0 16px 0 13px;width:220px;box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
header.lj-bar .search-trigger:hover{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(240,162,61,0.18);}
header.lj-bar .search-trigger-icon{width:17px;height:17px;color:var(--ink);opacity:0.6;flex:0 0 auto;pointer-events:none;}
header.lj-bar .search-trigger-text{color:var(--ink);opacity:0.55;font-family:'Inter',sans-serif;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:640px){
  header.lj-bar .search-trigger{width:42px;padding:9px;justify-content:center;}
  header.lj-bar .search-trigger-text{display:none;}
}

/* aA i słońce/księżyc - jak na stronie głównej */
header.lj-bar .theme-toggle{width:42px;height:42px;}
header.lj-bar .font-toggle{height:42px;min-width:42px;}

/* menu mobilne (burger) */
header.lj-bar .menutoggle-mobile{
  display:none;align-items:center;gap:7px;
  background:none;border:none;color:var(--ink);cursor:pointer;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  padding:6px 2px;flex:0 0 auto;
}
header.lj-bar .menutoggle-mobile .mm-icon-close{display:none;}
header.lj-bar.menu-open .menutoggle-mobile .mm-icon-burger{display:none;}
header.lj-bar.menu-open .menutoggle-mobile .mm-icon-close{display:inline-flex;}
@media (max-width:919px){
  header.lj-bar .menutoggle-mobile{display:inline-flex;}
  header.lj-bar .nav-row-bottom{
    flex-direction:column;align-items:flex-start;gap:16px;
    max-height:0;opacity:0;overflow:hidden;padding-top:0 !important;
    transition:max-height .35s ease, opacity .3s ease, padding-top .35s ease;
  }
  header.lj-bar .nav-row-bottom nav.links{flex-direction:column;align-items:flex-start;gap:14px;width:100%;}
  header.lj-bar.menu-open .nav-row-bottom{max-height:600px;opacity:1;padding-top:16px !important;}
}
@media (max-width:480px){
  header.lj-bar .btn.navcta{padding:0 14px;font-size:13.5px;}
  header.lj-bar .menutoggle-mobile .mm-label{display:none;}
}
@media (max-width:560px){header.lj-bar .theme-toggle{width:38px;height:38px;}header.lj-bar .theme-toggle svg{width:18px;height:18px;}header.lj-bar .font-toggle{height:38px;min-width:38px;padding:0 7px 10px;}}
@media (max-width:440px){header.lj-bar .nav-row-top{gap:8px;}header.lj-bar .theme-toggle,header.lj-bar .search-trigger{width:36px;height:36px;padding:0;}header.lj-bar .font-toggle{height:36px;min-width:36px;padding:0 6px 9px;}header.lj-bar .btn.navcta{padding:0 12px;}header.lj-bar .logo-img{height:48px;}}
@media (max-width:400px){header.lj-bar .nav-row-top{gap:6px;}header.lj-bar .logo-img{height:42px;}header.lj-bar .btn.navcta{padding:0 11px;font-size:13px;}}
@media (max-width:350px){header.lj-bar .nav-row-top{gap:5px;}header.lj-bar .theme-toggle,header.lj-bar .search-trigger,header.lj-bar .font-toggle{width:30px;min-width:30px;height:30px;}header.lj-bar .btn.navcta{padding:0 9px;font-size:12px;}header.lj-bar .logo-img{height:34px;}}

/* Facebook w pasku głównym (09.10.2026) - okrągły przycisk jak słońce/księżyc */
header.lj-bar .fb-link{flex:0 0 auto;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s ease,border-color .15s ease,color .15s ease;}
header.lj-bar .fb-link svg{width:20px;height:20px;}
header.lj-bar .fb-link:hover{background:#1877F2;border-color:#1877F2;color:#fff;}
header.lj-bar .fb-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (max-width:560px){header.lj-bar .fb-link{width:38px;height:38px;}header.lj-bar .fb-link svg{width:18px;height:18px;}}
@media (max-width:440px){header.lj-bar .fb-link{width:36px;height:36px;}}
@media (max-width:350px){header.lj-bar .fb-link{width:30px;height:30px;}header.lj-bar .fb-link svg{width:16px;height:16px;}}
@media (max-width:350px){header.lj-bar .navrow{padding-left:16px;padding-right:16px;gap:12px;}}
/* na telefonie (do 640 px) Facebook w menu zamiast ikony */
@media (max-width:640px){header.lj-bar .fb-link{display:none !important;}}
header.lj-bar .fb-menu{display:none !important;}
@media (max-width:640px){header.lj-bar .fb-menu{display:inline-block !important;}}
@media print{header.lj-bar{display:none !important;}}
