/* ODIN shared portal header skin. Applied after page-local CSS on both portal home and training pages. */
:root{--surface-soft:rgba(255,255,255,.045)}
:root[data-theme="light"]{--surface-soft:rgba(10,55,63,.055)}
.topbar.wrap{min-height:72px;display:grid;grid-template-columns:minmax(210px,auto) 1fr auto;align-items:center;gap:24px;position:fixed;top:48px;left:50%;transform:translateX(-50%);z-index:250;min-width:0;margin-top:0;padding:8px 14px 8px 18px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:18px;background:linear-gradient(155deg,var(--surface),var(--surface-soft));backdrop-filter:blur(20px);box-shadow:0 12px 34px rgba(0,0,0,.20),0 0 18px color-mix(in srgb,var(--glow) 28%,transparent);overflow:visible;transition:border-radius .18s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease}
.topbar.wrap:before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 34%),radial-gradient(circle at 88% 0%,rgba(255,255,255,.08),transparent 28%);opacity:.9}
.topbar.wrap>*{position:relative;z-index:1;min-width:0}
:root[data-theme="light"] .topbar.wrap{background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(245,251,252,.9));border-color:color-mix(in srgb,var(--accent) 22%,var(--line));box-shadow:0 14px 34px rgba(38,90,96,.10),0 0 22px rgba(19,177,164,.10)}
.topbar.wrap.is-stuck{top:34px;left:0;transform:none;width:100vw;max-width:none;margin:0;border-radius:0;border-top:0;border-left:0;border-right:0;padding-left:max(18px,calc((100vw - var(--wrap))/2 + 18px));padding-right:max(18px,calc((100vw - var(--wrap))/2 + 18px));box-shadow:0 16px 42px rgba(0,0,0,.22),0 0 30px color-mix(in srgb,var(--glow) 42%,transparent)}
.topbar-logo{display:flex;align-items:center;justify-content:flex-start;min-width:230px;width:230px;height:42px;position:relative;overflow:visible;z-index:260}
.topbar-logo img{position:absolute;left:0;top:40%;display:block;width:auto;height:155px;max-width:230px;object-fit:contain;object-position:left center;transform:translateY(-50%);transform-origin:left center;filter:drop-shadow(0 6px 16px rgba(230,0,126,.12));z-index:261}
.is-mermaid .topbar-logo img{top:5%}
:root[data-theme="light"] .topbar-logo img{filter:drop-shadow(0 7px 18px rgba(137,35,103,.10))}
.topbar .nav{margin:0;display:flex;gap:6px;align-items:center;justify-content:center;min-width:0;font-family:"Manrope",Inter,ui-sans-serif,system-ui,sans-serif;font-size:13px}
.topbar .nav a,.topbar .nav-training-trigger{padding:10px 13px;border-radius:999px;color:var(--muted);font-size:13px;font-weight:650;white-space:nowrap}
.topbar .nav-training-trigger{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;font-family:inherit;cursor:pointer}
.topbar .nav-training-trigger:hover,.topbar .nav-training-trigger[aria-expanded="true"]{color:var(--text);background:var(--surface-soft)}
.topbar .actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.topbar .header-search,.topbar .theme-toggle{width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text);display:inline-grid;place-items:center;cursor:pointer}
.topbar .header-search:hover,.topbar .theme-toggle:hover{color:var(--accent)}
.topbar .header-search svg,.topbar .theme-toggle svg{width:20px;height:20px}
.topbar-spacer{height:132px}
@media(max-width:980px){.topbar.wrap{top:40px;width:calc(100% - 16px);min-height:64px;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:8px 8px 8px 12px}.topbar.wrap.is-stuck{top:34px;width:100vw;padding-left:14px;padding-right:14px}.topbar .nav{display:none}.topbar-logo{width:210px;min-width:0;height:42px}.topbar-spacer{height:112px}}
@media(max-width:640px){.topbar.wrap{gap:10px}.topbar-logo{width:207px;min-width:0}.topbar-logo img{height:127px;max-width:207px;top:50%}.topbar .actions{gap:6px}.topbar .header-search,.topbar .theme-toggle{width:40px;min-width:40px;height:40px}}

/* Match the portal homepage mobile logo and the information strip. */
@media(max-width:980px){.topbar-logo img{height:155px;max-width:210px;top:40%}.is-mermaid .topbar-logo img{top:5%}}
@media(max-width:640px){.topbar.wrap.is-stuck{top:32px;min-height:62px;padding:7px 8px 7px 12px}.topbar-logo img{height:127px;max-width:207px;top:50%}.is-mermaid .topbar-logo img{top:5%}.topbar .mobile-menu-toggle{width:50px;min-width:50px;height:50px}}

/* Training subpages use the homepage brand palette in navigation, not the
   legacy course-page pink/mint palette. Scoped to header surfaces only. */
body.training-public .topbar,
body.training-public .utilitybar,
body.training-public .training-mega{
  --surface:rgba(13,29,39,.76);--surface-soft:rgba(255,255,255,.045);
  --surface-strong:rgba(8,22,30,.93);--text:#f6fbfc;
  --muted:#9eb3bd;--line:rgba(255,255,255,.115);
  --accent:#01ddf9;--glow:rgba(1,221,249,.30);
  --accent-soft:rgba(1,221,249,.14);--wrap:1440px;
}
body.training-public.is-mermaid .topbar,
body.training-public.is-mermaid .utilitybar,
body.training-public.is-mermaid .training-mega{
  --accent:#00e1f0;--glow:rgba(0,225,240,.30);
  --accent-soft:rgba(0,225,240,.14);
}
:root[data-theme="light"] body.training-public .topbar,
:root[data-theme="light"] body.training-public .utilitybar,
:root[data-theme="light"] body.training-public .training-mega{
  --surface:rgba(255,255,255,.84);--surface-soft:rgba(10,59,82,.045);
  --surface-strong:rgba(255,255,255,.97);--text:#10272d;
  --muted:#5f7880;--line:rgba(18,73,82,.14);
  --accent:#007f91;--glow:rgba(0,127,145,.12);
  --accent-soft:rgba(0,127,145,.10);
}
:root[data-theme="light"] body.training-public.is-mermaid .topbar,
:root[data-theme="light"] body.training-public.is-mermaid .utilitybar,
:root[data-theme="light"] body.training-public.is-mermaid .training-mega{
  --accent:#008995;--glow:rgba(0,137,149,.12);
  --accent-soft:rgba(0,137,149,.10);
}

/* Logo must paint above topbar overlay, navigation and utilitybar. The direct-child
   selector beats .topbar.wrap>* which otherwise resets the logo stacking order. */
.topbar.wrap{isolation:auto;overflow:visible}
.topbar.wrap:before{z-index:0}
.topbar.wrap > .topbar-logo{position:relative;z-index:300;overflow:visible}
.topbar.wrap > .topbar-logo img{z-index:301}
.topbar.wrap > .nav,.topbar.wrap > .actions,.topbar.wrap > .mobile-menu-panel{z-index:1}

/* The training page historically used a 1380px container whereas the portal
   homepage uses 1440px. Resolve the width on the header itself. */
.topbar.wrap{--wrap:1440px;width:min(1440px,calc(100% - 40px))}
.topbar.wrap.is-stuck{width:100vw}
@media(max-width:980px){.topbar.wrap{width:calc(100% - 16px)}.topbar.wrap.is-stuck{width:100vw}}
/* Explicitly raise the logo's entire containing layer, not only its image. */
body.training-public .topbar.wrap{z-index:250;overflow:visible}
body.training-public .topbar.wrap > .topbar-logo{z-index:500;isolation:isolate}
body.training-public .topbar.wrap > .topbar-logo img{z-index:501}
body.training-public .utilitybar{z-index:230}

/* Training templates declare display:none for the hamburger after their old
   mobile breakpoint. Restore the actual homepage responsive behavior. */
@media(max-width:980px){
  .topbar.wrap .mobile-menu-toggle{display:grid;place-items:center;visibility:visible;opacity:1;flex:none;position:relative;z-index:5}
  .topbar.wrap .mobile-menu-toggle svg{display:block;width:25px;height:25px;stroke:currentColor}
  .topbar.wrap.is-menu-open .mobile-menu-panel{display:grid;gap:6px}
}
@media(min-width:981px){
  .topbar.wrap .mobile-menu-toggle{display:none}
}

/* Mobile training navigation stays inside the viewport. Long federation lists
   scroll inside the dropdown rather than stretching the page or header. */
@media(max-width:980px){
  .topbar.wrap{box-sizing:border-box;max-width:calc(100vw - 16px)}
  .topbar.wrap.is-stuck{max-width:none}
  .topbar.wrap .mobile-menu-panel{
    box-sizing:border-box;position:absolute;top:100%;left:0;right:0;
    width:auto;min-width:0;max-width:100%;max-height:calc(100dvh - 125px);
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    padding:10px;border:1px solid var(--line);border-top:0;
    border-radius:0 0 18px 18px;background:var(--surface-strong,var(--surface));
    box-shadow:0 18px 38px rgba(0,0,0,.22);
    -webkit-overflow-scrolling:touch;
  }
  .topbar.wrap.is-stuck .mobile-menu-panel{left:0;right:0}
  .topbar.wrap .mobile-menu-panel > *,
  .topbar.wrap .mobile-programs,
  .topbar.wrap .mobile-programs a{min-width:0;max-width:100%}
  .topbar.wrap .mobile-programs{display:block;overflow:visible}
  .topbar.wrap .mobile-programs a{display:block;overflow-wrap:anywhere;white-space:normal}
  .topbar.wrap .mobile-programs summary{cursor:pointer;overflow-wrap:anywhere}
  .topbar.wrap .mobile-menu-panel a{white-space:normal;overflow-wrap:anywhere}
  .topbar.wrap .mobile-menu-panel[hidden]{display:none!important}
}
@media(max-width:640px){
  .topbar.wrap .mobile-menu-panel{max-height:calc(100dvh - 110px)}
}

/* Horizontal finger scrolling for the narrow informational strip. */
@media(max-width:980px){
  .utilitybar{height:32px;overflow:hidden}
  .utilitybar .utilitybar-inner{
    box-sizing:border-box;width:100%;max-width:100%;height:100%;
    margin:0;padding:0 8px;display:flex;flex-wrap:nowrap;
    align-items:center;justify-content:flex-start;gap:4px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;touch-action:pan-x;
    overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .utilitybar .utilitybar-inner::-webkit-scrollbar{display:none}
  .utilitybar .utilitybar-inner > a{flex:0 0 auto;white-space:nowrap;height:24px;padding:0 9px;font-size:9px}
}

/* Align 'Programy szkoleniowe' to the left edge of the navigation column. */
@media(min-width:981px){.topbar.wrap > .nav{justify-content:flex-start;text-align:left}}