/* =====================================================================
   chrome.css — GLOBALNY nagłówek + stopka CEN (topbar, header, nav, footer,
   a11y, progress, skip). Ładowany na WSZYSTKICH podstronach (poza stroną
   główną, która ma pełny home.css).

   WAŻNE: brak globalnych resetów (* / body / bare h1,a,img) i brak gołego
   .wrap — żeby NIE restylować treści motywu Kadence. Selektory .wrap są
   zawężone do kontenerów chrome (Kadence używa klasy .wrap na #inner-wrap!).
   ===================================================================== */

:root{
  --blue-900:#012a52;--blue-800:#004a94;--blue-700:#0a5aa6;--blue-600:#1e73be;--blue-100:#e7f0fa;--blue-50:#f2f7fc;
  --gold:#f3a712;--gold-soft:#ffd27a;--green:#2f8f4e;--red:#d93a2b;
  --ink:#0f1822;--muted:#586572;--line:#e6ebf2;--bg:#fff;--soft:#f3f7fc;--card:#fff;
  --r-sm:10px;--r-md:16px;--r-lg:24px;--r-pill:999px;
  --shadow:0 1px 2px rgba(8,33,64,.05),0 10px 26px rgba(8,33,64,.08);
  --shadow-hover:0 18px 44px rgba(6,28,58,.16);
  --shadow-lg:0 30px 64px rgba(6,28,58,.22);
  --maxw:1600px;
  --font-display:'Fraunces',Georgia,serif;--font-body:'Plus Jakarta Sans',system-ui,sans-serif;
}

/* box-sizing tylko w obrębie chrome (nie globalnie) */
.topbar,.topbar *,header.site,header.site *,.navbar,.navbar *,footer.site,footer.site *,
.progress,.skip{box-sizing:border-box}

/* .wrap zawężony do kontenerów chrome (NIE dotyka #inner-wrap.wrap Kadence) */
.topbar>.wrap,header.site .wrap,.navbar>.wrap,footer.site .wrap{
  max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(24px,5vw,48px)
}

/* skip link + focus */
.skip{position:absolute;left:-999px;top:0;z-index:400;background:var(--blue-800);color:#fff;padding:14px 22px;border-radius:0 0 var(--r-sm) 0;font-weight:600}
.skip:focus{left:0}
.topbar a:focus-visible,header.site a:focus-visible,header.site button:focus-visible,header.site input:focus-visible,
footer.site a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
/* Markowy pierścień focus dla TREŚCI podstron (WCAG 2.2 — 2.4.7 Focus Visible + 2.4.11
   Focus Appearance). Chrome ma własny wyżej; tu domykamy linki/przyciski/pola/karty w main,
   żeby nie spadały na słaby default przeglądarki. Tylko :focus-visible (klawiatura). */
main a:focus-visible,main button:focus-visible,main input:focus-visible,
main select:focus-visible,main textarea:focus-visible,main [tabindex]:focus-visible,
main .wp-element-button:focus-visible,main summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
/* Karty (linki blokowe) — pierścień dopasowany do zaokrąglenia karty. */
main a.cen-rcard:focus-visible,main a.pcard:focus-visible,main a.cen-card:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:var(--r-md,14px)}

/* wysoki kontrast (toggle) */

/* scroll progress (złoto) */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-soft));z-index:350;transition:width .1s linear}

/* sticky header nie zasłania focusu */
html{scroll-padding-top:150px}
@media(max-width:1100px){html{scroll-padding-top:90px}}

/* TOPBAR */
.topbar{background:var(--blue-900);color:#bcd3ec;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:46px}
.topbar .left{display:flex;gap:20px;align-items:center}
.topbar a{color:#cfe0f2;font-weight:500;text-decoration:none}.topbar a:hover{color:#fff}
.topbar .right{display:flex;gap:14px;align-items:center}
.socials{display:flex;gap:8px}
.socials a{width:30px;height:30px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff}
.socials a:hover{background:var(--gold);color:var(--blue-900);transform:translateY(-2px)}
@media(max-width:820px){.topbar .left a:not(.bip){display:none}}

/* HEADER */
header.site{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
header.site .header-top{display:flex;align-items:center;gap:28px;height:82px}
header.site .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
header.site .brand .logo{width:52px;height:52px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--blue-800),var(--blue-600));display:grid;place-items:center;color:#fff;font-family:var(--font-body);font-weight:800;font-size:18px;box-shadow:var(--shadow);letter-spacing:.02em}
header.site .brand b{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--blue-900);display:block;line-height:1.05}
header.site .brand small{font-size:12.5px;color:var(--muted)}
/* UWAGA: musi być form.search — na stronie wyników WordPress dodaje klasę
   body.search, więc samo „.search" psułoby cały layout (body → flex 300px). */
form.search{margin-left:auto;display:flex;align-items:center;background:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 4px 4px 18px;width:300px;transition:.18s}
form.search:focus-within{border-color:var(--blue-600);background:#fff;box-shadow:0 0 0 4px var(--blue-50)}
form.search input{border:0;background:none;outline:none;flex:1;font:inherit;font-size:14.5px;color:var(--ink)}
form.search button{border:0;cursor:pointer;width:40px;height:40px;border-radius:var(--r-pill);background:var(--blue-800);color:#fff;display:grid;place-items:center;transition:.16s}
form.search button:hover{background:var(--blue-900)}
.cta-head{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:var(--r-sm);font-weight:700;font-size:14.5px;background:var(--gold);color:#3a2600;transition:.16s;white-space:nowrap;text-decoration:none}
.cta-head:hover{background:#ffba2e;transform:translateY(-2px);box-shadow:var(--shadow)}
.burger{display:none;background:none;border:1.5px solid var(--line);border-radius:var(--r-sm);width:50px;height:46px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px}

/* NAV */
.navbar{border-top:1px solid var(--line);background:rgba(255,255,255,.65)}
nav.main{display:flex;gap:2px;align-items:center;height:54px}
.mi{position:relative}
.mi>a,.mi>button{font:inherit;font-weight:600;font-size:14.5px;background:none;border:0;cursor:pointer;color:var(--ink);padding:10px 14px;border-radius:var(--r-sm);display:flex;align-items:center;gap:6px;height:38px;text-decoration:none}
.mi>a:hover,.mi>button:hover,.mi.open>button{background:var(--blue-50);color:var(--blue-800)}
.mi>a::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.mi>a:hover::after{transform:scaleX(1)}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:10px;display:none;z-index:50}
.submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:14px} /* mostek na luce — podmenu nie znika przy przejściu kursora */
.mi.open .submenu{display:block}
.submenu a{display:block;padding:10px 13px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.submenu a:hover{background:var(--blue-50);color:var(--blue-800)}
@media(max-width:1100px){.navbar,form.search,.cta-head{display:none}.burger{display:flex}header.site .header-top{height:74px}}

/* menu mobilne (burger) */
@media(max-width:1100px){
  body.nav-open .navbar{display:block;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:120}
  body.nav-open nav.main{flex-direction:column;align-items:stretch;height:auto;padding:10px;gap:0}
  body.nav-open .mi{width:100%}
  body.nav-open .mi>a,body.nav-open .mi>button{width:100%;justify-content:space-between;height:auto;padding:12px 14px}
  body.nav-open .submenu{position:static;box-shadow:none;border:0;padding:4px 0 8px 14px;min-width:0}
}

/* FOOTER */
footer.site{background:var(--blue-900);color:#bcd3ec}
.partners{border-bottom:1px solid rgba(255,255,255,.12);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.partners .row{display:flex;gap:44px;width:max-content;align-items:center;padding:24px 0;animation:cen-scroll-x 40s linear infinite}
@keyframes cen-scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.partners .row span{color:#9fbada;font-weight:700;font-size:15px;white-space:nowrap;opacity:.85}
footer.site .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;padding-block:64px}
footer.site .fgrid h2{color:#fff;font-size:15px;margin:0 0 16px;position:relative;padding-bottom:10px;font-family:var(--font-body);font-weight:700}
footer.site .fgrid h2::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--gold)}
footer.site .fgrid a{display:block;color:#bcd3ec;font-size:14.5px;padding:6px 0;text-decoration:none}
footer.site .fgrid a:hover{color:#fff;padding-left:4px;transition:.15s}
.fbrand{display:flex;gap:13px;align-items:center;margin-bottom:16px}
.fbrand .logo{width:50px;height:50px;border-radius:var(--r-md);background:linear-gradient(135deg,#fff,#dceaf8);color:var(--blue-900);display:grid;place-items:center;font-weight:800}
.fbrand b{color:#fff;font-family:var(--font-display);font-weight:600;font-size:18px}
.foot-note{font-size:14px;color:#9fbada;line-height:1.8;margin:0}
.foot-note b{color:#dceaf8}
.foot-note a{color:#cfe0f2;text-decoration:underline;text-underline-offset:2px}
.copy{border-top:1px solid rgba(255,255,255,.12);padding-block:22px;font-size:13.5px;text-align:center;color:#9fbada}
@media(max-width:820px){footer.site .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer.site .fgrid{grid-template-columns:1fr}}

/* A11Y fab + panel */

/* tylko dla czytników */
.sr-only,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* === Logo (obraz) w nagłówku + sygnet w stopce === */
.brand-logo{height:46px;width:auto;max-width:min(440px,54vw);display:block}
@media(max-width:1100px){.brand-logo{height:38px}}
@media(max-width:520px){.brand-logo{height:30px}}
.fbrand .logo{overflow:hidden;padding:6px}
.fbrand .logo img{width:100%;height:100%;object-fit:contain;display:block}

/* Wrapper Kadence zawsze pionowo (na niektórych szablonach, np. wyniki wyszukiwania,
   flex potrafił ułożyć header/treść/stopkę poziomo → layout poza ekranem). */
#wrapper.site{ flex-direction:column !important }
/* Fix flex-overflow: elementy flex mogą zwężać się poniżej rozmiaru treści
   (inaczej szeroki element wyniku rozpycha cały layout poza ekran). */
#wrapper.site > *{ min-width:0 }
#inner-wrap{ min-width:0; overflow-x:clip }
/* Marquee partnerów (width:max-content, podwajany JS) rozpychał layout na podstronach
   (na froncie chroni go body{overflow-x:hidden} z home.css). Twardo ograniczamy. */
html,body{ overflow-x:clip }
#wrapper.site,.topbar,header.site,.navbar,footer.site{ max-width:100vw }
footer.site .partners{ overflow:hidden; max-width:100% }

/* Pasek akredytacji — pod nagłówkiem, na wszystkich stronach (edytowalny: site-header → accredText) */
.cen-accred{background:var(--blue-50);border-bottom:1px solid var(--line)}
.cen-accred .wrap{max-width:var(--maxw,1600px);margin-inline:auto;padding:13px clamp(24px,5vw,48px);display:flex;align-items:center;justify-content:center;text-align:center;gap:10px;font-size:14px;color:var(--blue-900);font-weight:500;box-sizing:border-box}
.cen-accred__badge{flex:0 0 auto;color:var(--green,#2f8f4e);display:inline-flex}
@media(max-width:700px){.cen-accred .wrap{font-size:12.5px;align-items:flex-start}}