/* ============================================================
   Ubezpieczamy24 Mega Menu — Frontend CSS
   Namespace: .u24-  (no global resets, WP-safe)
============================================================ */

:root {
  --u24-navy:       #0b1a3e;
  --u24-navy-mid:   #132d5e;
  --u24-blue:       #1757B8;
  --u24-blue-light: #e8f0fa;
  --u24-blue-hover: #1264d6;
  --u24-red:        #BF1A2F;
  --u24-red-hover:  #a5162a;
  --u24-green:      #16a34a;
  --u24-green-light:#dcfce7;
  --u24-white:      #ffffff;
  --u24-gray-50:    #f8fafc;
  --u24-gray-100:   #f1f5f9;
  --u24-gray-200:   #e2e8f0;
  --u24-gray-300:   #cbd5e1;
  --u24-gray-400:   #94a3b8;
  --u24-gray-500:   #64748b;
  --u24-gray-600:   #475569;
  --u24-gray-700:   #334155;
  --u24-gray-900:   #0f172a;
  --font-heading:   'Space Grotesk', system-ui, sans-serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --header-h-top:   40px;
  --header-h-nav:   70px;
  --u24-container:  1260px;
  --u24-gap:        24px;
  --ease-out:       cubic-bezier(0.25,0.46,0.45,0.94);
  --u24-duration:   0.2s;
}

/* ── Utility ───────────────────────────────────────── */
.u24-container{max-width:var(--u24-container);margin:0 auto;padding:0 var(--u24-gap)}
.u24-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ── Top Bar ───────────────────────────────────────── */
.u24-topbar{background:var(--u24-blue);color:rgba(255,255,255,.85);font-size:.82rem;height:var(--header-h-top);position:relative;z-index:1001;font-family:var(--font-body)}
.u24-topbar .u24-container{display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px}
.u24-topbar-left{display:flex;align-items:center;gap:24px}
.u24-topbar-contact{display:flex;align-items:center;gap:7px;transition:color var(--u24-duration);color:rgba(255,255,255,.85);text-decoration:none}
.u24-topbar-contact:hover{color:#fff}
.u24-topbar-contact svg{flex-shrink:0;opacity:.6}
.u24-topbar-sep{width:1px;height:16px;background:rgba(255,255,255,.15)}
.u24-topbar-right{display:flex;align-items:center;gap:16px}

/* ── Main Nav Bar ──────────────────────────────────── */
.u24-navbar{background:var(--u24-white);border-bottom:1px solid var(--u24-gray-200);height:var(--header-h-nav);position:sticky;top:0;z-index:1000;box-shadow:0 1px 3px rgba(0,0,0,.04);font-family:var(--font-body)}
.u24-navbar .u24-container{display:flex;align-items:center;justify-content:space-between;height:100%}

/* Logo */
.u24-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;color:var(--u24-navy);font-family:var(--font-heading);font-weight:700;font-size:1.1rem}
.u24-logo-img{height:35px;max-height:35px;width:auto;max-width:220px;object-fit:contain}
.u24-logo-text{font-family:var(--font-heading);font-weight:700;font-size:1.1rem;color:var(--u24-navy)}

/* Nav links */
.u24-nav{display:flex;align-items:center;gap:4px;height:100%;list-style:none;margin:0;padding:0}
.u24-nav-item{position:relative;height:100%;display:flex;align-items:center;list-style:none}
.u24-nav-link{display:flex;align-items:center;gap:5px;padding:0 14px;height:100%;font-size:1.02rem;font-weight:600;color:var(--u24-gray-600);transition:color var(--u24-duration);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
span.u24-nav-link{cursor:pointer}
.u24-nav-link:hover,.u24-nav-item:hover>.u24-nav-link{color:var(--u24-blue);border-bottom-color:var(--u24-blue)}
.u24-nav-link svg{width:14px;height:14px;transition:transform var(--u24-duration);opacity:.5}
.u24-nav-item:hover>.u24-nav-link svg{transform:rotate(180deg);opacity:1}
.u24-nav-link--accent{color:var(--u24-red);font-weight:600}
.u24-nav-link--accent:hover{color:var(--u24-red-hover);border-bottom-color:var(--u24-red)}

/* CTA button in navbar */
.u24-nav-cta{display:inline-flex;align-items:center;gap:6px;background:var(--u24-blue);color:#fff;padding:10px 20px;border-radius:8px;font-size:.85rem;font-weight:600;margin-left:8px;transition:background var(--u24-duration),transform var(--u24-duration),box-shadow var(--u24-duration);box-shadow:0 2px 8px rgba(23,87,184,.25);text-decoration:none}
.u24-nav-cta:hover{background:var(--u24-blue-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(23,87,184,.35);color:#fff}

/* ── Mega Menu — shared ────────────────────────────── */
.u24-mega{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--u24-white);border:1px solid var(--u24-gray-200);border-top:2px solid var(--u24-blue);border-radius:0 0 14px 14px;box-shadow:0 20px 60px rgba(11,26,62,.12),0 4px 12px rgba(0,0,0,.04);padding:32px 36px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:opacity var(--u24-duration) var(--ease-out),visibility var(--u24-duration),transform var(--u24-duration) var(--ease-out);pointer-events:none}
.u24-nav-item:hover>.u24-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* Mega: Jak to działa */
.u24-mega--jak{width:780px;display:flex;flex-direction:column;gap:0}
.u24-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.u24-step{text-align:center;padding:8px 8px 16px;position:relative}
.u24-step-num{width:44px;height:44px;border-radius:50%;background:var(--u24-blue);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:1.1rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.u24-step:nth-child(2) .u24-step-num{background:var(--u24-navy-mid)}
.u24-step:nth-child(3) .u24-step-num{background:var(--u24-green)}
.u24-step-title{font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:var(--u24-gray-900);margin-bottom:6px}
.u24-step-desc{font-size:.8rem;color:var(--u24-gray-500);line-height:1.45}
.u24-step:not(:last-child)::after{content:'';position:absolute;top:28px;right:-14px;width:10px;height:10px;border-top:2px solid var(--u24-gray-300);border-right:2px solid var(--u24-gray-300);transform:rotate(45deg)}

/* Contact bar in Jak to działa */
.u24-jak-contact{display:flex;align-items:center;justify-content:center;gap:24px;padding:18px 0 4px;margin-top:20px;border-top:1px solid var(--u24-gray-200)}
.u24-jak-contact-label{font-size:.7rem;font-weight:600;color:var(--u24-gray-400);text-transform:uppercase;letter-spacing:.08em}
.u24-jak-link{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:8px;font-size:.84rem;font-weight:600;transition:background var(--u24-duration),color var(--u24-duration);text-decoration:none}
.u24-jak-link svg{width:16px;height:16px;flex-shrink:0}
.u24-jak-link--form{background:var(--u24-red);color:#fff}
.u24-jak-link--form:hover{background:var(--u24-red-hover);color:#fff}
.u24-jak-link--phone{background:var(--u24-green-light);color:var(--u24-green);border:1px solid rgba(22,163,74,.2)}
.u24-jak-link--phone:hover{background:#c8f5d5}

/* Mega: Osoby & Firmy — grid */
.u24-mega--osoby{width:920px;display:grid;grid-template-columns:1fr 1fr 240px;gap:0}
.u24-mega--firmy{width:1060px;display:grid;grid-template-columns:1fr 1fr 250px;gap:0}
.u24-mega-col{display:flex;flex-direction:column;gap:4px}
.u24-mega-col+.u24-mega-col{padding-left:24px}

/* Mega menu items */
.u24-mega-item{display:flex;align-items:flex-start;gap:14px;padding:11px 14px;border-radius:10px;transition:background var(--u24-duration);cursor:pointer;text-decoration:none;color:inherit}
.u24-mega-item:hover{background:var(--u24-blue-light)}
.u24-mega-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--u24-gray-100);transition:background var(--u24-duration)}
.u24-mega-item:hover .u24-mega-icon{background:var(--u24-blue)}
.u24-mega-icon svg{width:20px;height:20px;color:var(--u24-blue);transition:color var(--u24-duration)}
.u24-mega-item:hover .u24-mega-icon svg{color:#fff}
.u24-mega-label{font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--u24-gray-900);line-height:1.3;display:block}
.u24-mega-hint{font-size:.78rem;color:var(--u24-gray-400);line-height:1.35;display:block;margin-top:3px}

/* Group labels (Dla firm) */
.u24-mega-group-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:0 12px 8px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.u24-mega-group-label::after{content:'';flex:1;height:1px;background:var(--u24-gray-200)}
.u24-mega-group-label--transport{color:var(--u24-blue)}
.u24-mega-group-label--biznes{color:var(--u24-green)}

/* Icon variants for firms */
.u24-mega-icon--transport{background:var(--u24-blue-light)}
.u24-mega-item:hover .u24-mega-icon--transport{background:var(--u24-blue)}
.u24-mega-icon--transport svg{color:var(--u24-blue)}
.u24-mega-icon--biznes{background:var(--u24-green-light)}
.u24-mega-item:hover .u24-mega-icon--biznes{background:var(--u24-green)}
.u24-mega-icon--biznes svg{color:var(--u24-green)}
.u24-mega-item:hover .u24-mega-icon--transport svg,.u24-mega-item:hover .u24-mega-icon--biznes svg{color:#fff}

/* CTA panel */
.u24-mega-cta-panel{background:var(--u24-gray-50);border-radius:12px;padding:24px 20px;display:flex;flex-direction:column;justify-content:center;gap:16px;margin-left:24px}
.u24-mega-cta-title{font-family:var(--font-heading);font-weight:700;font-size:1rem;color:var(--u24-navy);line-height:1.3}
.u24-mega-cta-desc{font-size:.82rem;color:var(--u24-gray-500);line-height:1.5}
.u24-mega-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--u24-red);color:#fff;font-weight:700;font-size:.85rem;padding:11px 20px;border-radius:8px;transition:background var(--u24-duration),transform var(--u24-duration);text-decoration:none}
.u24-mega-cta-btn:hover{background:var(--u24-red-hover);transform:translateY(-1px);color:#fff}
.u24-mega-cta-stats{display:flex;gap:12px;padding-top:8px;border-top:1px solid var(--u24-gray-200)}
.u24-mega-stat{text-align:center}
.u24-mega-stat-num{font-family:var(--font-heading);font-weight:700;font-size:1.2rem;color:var(--u24-blue);display:block;line-height:1}
.u24-mega-stat-label{font-size:.65rem;color:var(--u24-gray-400);display:block;margin-top:3px}

/* Hub link */
.u24-mega-hub{grid-column:1/-1;margin-top:16px;padding-top:14px;border-top:1px solid var(--u24-gray-200);text-align:center}
.u24-mega-hub a{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--u24-blue);transition:gap var(--u24-duration);text-decoration:none}
.u24-mega-hub a:hover{gap:10px}
.u24-mega-hub a svg{width:14px;height:14px}

/* ── Burger ────────────────────────────────────────── */
.u24-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px;transition:background var(--u24-duration);border:none;background:none;cursor:pointer;padding:0}
.u24-burger:hover{background:var(--u24-gray-100)}
.u24-burger svg{width:22px;height:22px;color:var(--u24-navy)}

/* ── Mobile menu ───────────────────────────────────── */
.u24-mobile-overlay{display:none;position:fixed;inset:0;background:rgba(11,26,62,.45);z-index:9998;opacity:0;transition:opacity .3s}
.u24-mobile-overlay.u24-open{display:block;opacity:1}
.u24-mobile-menu{position:fixed;top:0;right:0;bottom:0;width:min(380px,88vw);background:var(--u24-white);z-index:9999;transform:translateX(100%);transition:transform .3s var(--ease-out);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:-8px 0 40px rgba(0,0,0,.12);font-family:var(--font-body)}
.u24-mobile-menu.u24-open{transform:translateX(0)}

.u24-mob-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--u24-gray-200)}
.u24-mob-header img{height:28px;width:auto}
.u24-mob-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background var(--u24-duration);border:none;background:none;cursor:pointer;padding:0}
.u24-mob-close:hover{background:var(--u24-gray-100)}
.u24-mob-close svg{width:20px;height:20px;color:var(--u24-gray-600)}

.u24-mob-body{padding:8px 0}

/* Accordion */
.u24-mob-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 20px;font-size:.95rem;font-weight:600;color:var(--u24-gray-900) !important;transition:background var(--u24-duration);text-align:left;border:none;background:none;cursor:pointer;font-family:var(--font-body)}
.u24-mob-trigger:hover,.u24-mob-trigger:focus,.u24-mob-trigger:active,.u24-mob-trigger[aria-expanded="true"]{background:var(--u24-gray-50);color:var(--u24-gray-900) !important}
.u24-mob-trigger svg{width:16px;height:16px;color:var(--u24-gray-400);transition:transform .25s;flex-shrink:0}
.u24-mob-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.u24-mob-panel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-out)}
.u24-mob-panel.u24-expanded{max-height:800px}
.u24-mob-panel-inner{padding:4px 12px 12px}

/* Mobile items */
.u24-mob-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;transition:background var(--u24-duration);color:var(--u24-gray-700);text-decoration:none}
.u24-mob-item:hover{background:var(--u24-blue-light)}
.u24-mob-item .u24-mega-icon{width:36px;height:36px}
.u24-mob-item .u24-mega-icon svg{width:18px;height:18px}
.u24-mob-item-label{font-size:.88rem;font-weight:500;color:var(--u24-gray-900)}
.u24-mob-item-hint{font-size:.73rem;color:var(--u24-gray-400);margin-top:1px}
.u24-mob-group{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:12px 14px 6px;color:var(--u24-gray-400)}

/* Mobile steps */
.u24-mob-steps{padding:8px 14px 16px}
.u24-mob-step{display:flex;align-items:flex-start;gap:14px;padding:10px 0;position:relative}
.u24-mob-step:not(:last-child){border-bottom:1px solid var(--u24-gray-100)}
.u24-mob-step-num{width:32px;height:32px;border-radius:50%;background:var(--u24-blue);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.u24-mob-step:nth-child(2) .u24-mob-step-num{background:var(--u24-navy-mid)}
.u24-mob-step:nth-child(3) .u24-mob-step-num{background:var(--u24-green)}
.u24-mob-step-title{font-weight:600;font-size:.88rem;color:var(--u24-gray-900)}
.u24-mob-step-desc{font-size:.78rem;color:var(--u24-gray-500);line-height:1.4;margin-top:2px}

/* Mobile CTA */
.u24-mob-cta-area{padding:8px 20px 16px}
.u24-mob-cta-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border-radius:10px;font-weight:700;font-size:.9rem;color:#fff;background:var(--u24-red);margin-bottom:8px;text-decoration:none}
.u24-mob-cta-btn--green{background:var(--u24-green)}
.u24-mob-hub-link{display:block;text-align:center;font-size:.82rem;font-weight:600;color:var(--u24-blue);padding:10px;text-decoration:none}
.u24-mob-link{display:block;padding:14px 20px;font-size:.95rem;font-weight:500;color:var(--u24-gray-700);transition:background var(--u24-duration);text-decoration:none}
.u24-mob-link:hover{background:var(--u24-gray-50)}
.u24-mob-link--accent{color:var(--u24-red);font-weight:600}

/* Mobile contact */
.u24-mob-contact{padding:16px 20px;margin-top:8px;border-top:1px solid var(--u24-gray-200)}
.u24-mob-contact-row{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:.85rem;color:var(--u24-gray-600);text-decoration:none}
.u24-mob-contact-row svg{width:16px;height:16px;color:var(--u24-blue);flex-shrink:0}
.u24-mob-contact-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:10px;background:var(--u24-blue);color:#fff;font-weight:600;font-size:.88rem;margin-top:10px;text-decoration:none}

/* ── Responsive ────────────────────────────────────── */
@media(max-width:1080px){
  .u24-nav-link{padding:0 10px;font-size:.88rem}
  .u24-mega--osoby{width:800px;grid-template-columns:1fr 1fr 210px}
  .u24-mega--firmy{width:940px;grid-template-columns:1fr 1fr 220px}
}
@media(max-width:900px){
  .u24-topbar-left .u24-topbar-contact:nth-child(n+3){display:none}
  .u24-topbar-sep{display:none}
  .u24-nav,.u24-nav-cta{display:none}
  .u24-burger{display:flex}
}
@media(max-width:600px){
  .u24-topbar{height:auto;padding:8px 0}
  .u24-topbar .u24-container{flex-wrap:wrap;justify-content:center;gap:6px}
  .u24-topbar-left{gap:12px}
  .u24-topbar-right{width:100%;justify-content:center}
  .u24-topbar-contact{font-size:.78rem}
  .u24-logo-img{height:26px}
}
@media(max-width:400px){
  .u24-topbar-left .u24-topbar-contact:nth-child(n+2){display:none}
}

/* ── A11Y ──────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .u24-topbar *,.u24-navbar *,.u24-mobile-menu *,.u24-mobile-overlay{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
.u24-navbar *:focus-visible,.u24-mobile-menu *:focus-visible{outline:2px solid var(--u24-blue);outline-offset:2px}