/* Shared header/footer overrides — loaded AFTER page-specific CSS so these rules
     always win over each page's own (now largely dead) copies of the same selectors. */

  /* ================= SHARED NAVIGATION (header mega menu + mobile) ================= */
  .nav-links a[aria-current="page"]{color:var(--ice-100);}
  .nav-links a[aria-current="page"]::after{width:100%;}
  .nav-item{position:relative; display:flex; align-items:center;}
  .mobile-only-link{display:none;}
  .mega-toggle{display:none;}

  .mega-menu{
    position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
    min-width:600px; margin-top:14px; padding:28px; border-radius:20px;
    background:rgba(8,20,32,.97); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(234,242,248,.12);
    box-shadow:0 24px 60px -12px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
    z-index:150;
  }
  .mega-menu-inner{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:24px;}
  .mega-group h4{font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-400); margin-bottom:12px;}
  .mega-group ul{display:flex; flex-direction:column; gap:9px;}
  .mega-group a{font-size:.88rem; color:var(--slate-400); transition:color .2s ease;}
  .mega-group a:hover, .mega-group a:focus-visible{color:var(--ice-100);}
  .mega-group a[aria-current="page"]{color:var(--teal-300);}
  .mega-view-all{display:block; margin-top:20px; padding-top:16px; border-top:1px solid rgba(234,242,248,.1); font-family:var(--font-mono); font-size:.8rem; color:var(--teal-400);}
  .mega-view-all:hover{text-decoration:underline;}

  @media(min-width:881px){
    .nav-item:hover .mega-menu,
    .nav-item:focus-within .mega-menu,
    .nav-item.mega-open .mega-menu{
      opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
    }
  }

  .nav-links a:focus-visible, .mega-toggle:focus-visible, .burger:focus-visible, .foot-col-toggle:focus-visible{
    outline:2px solid var(--teal-400); outline-offset:3px; border-radius:4px;
  }

  body.nav-open{overflow:hidden;}

  @media(max-width:880px){
    .mobile-only-link{display:block;}
    .nav-cta-desktop-wrap{display:none;}
    /* Fix: page-specific CSS positions .nav-links as position:fixed with no
       height cap, so a long menu (or an open mega-accordion) could grow
       taller than the viewport with no way to reach the rest, since the
       page itself is scroll-locked (body.nav-open) while the menu is open.
       Adding a height cap + its own scroll here (nav-footer.css loads last,
       so this wins without needing to touch each page's own rule).
       top/max-height use --header-h, a CSS var common.js sets to the real,
       per-page, per-viewport header height (measured 74-106px across pages
       — not a fixed value). The per-page hardcoded top:88px (or
       kategorije.css's drifted top:82px) didn't match every page's actual
       header height, letting the header visually clip the top of the open
       menu; the var-based values also self-correct on resize/orientation
       change. Fallback values (104px) keep prior behavior if JS hasn't run
       yet. 100vh is declared before 100dvh as a fallback for browsers
       without dvh support. */
    .nav-links{
      top:var(--header-h, 104px);
      max-height:calc(100vh - var(--header-h, 104px));
      max-height:calc(100dvh - var(--header-h, 104px));
      overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
      padding-bottom:calc(26px + env(safe-area-inset-bottom));
    }
    .nav-item{flex-direction:column; align-items:stretch; width:100%; position:relative;}
    .nav-item .nav-top-link{padding-right:40px;}
    .mega-toggle{
      display:flex; align-items:center; justify-content:center; width:36px; height:36px;
      position:absolute; right:-6px; top:-4px; background:none; border:none; color:var(--ice-100); cursor:pointer;
    }
    .mega-toggle svg{width:18px; height:18px; transition:transform .25s ease;}
    .mega-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
    .mega-menu{
      position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none;
      max-height:0; overflow:hidden; padding:0; margin-top:0; border:none; background:transparent; box-shadow:none; backdrop-filter:none;
      transition:max-height .3s ease;
    }
    .nav-item.mega-open .mega-menu{max-height:800px; padding:14px 0 6px 14px;}
    .mega-menu-inner{grid-template-columns:1fr; gap:18px;}
    .nav-cta-mobile{
      display:block; margin-top:14px; padding:14px 20px; border-radius:100px;
      background:linear-gradient(135deg,var(--teal-500),var(--teal-400)); color:var(--navy-950) !important;
      text-align:center; font-family:var(--font-mono); font-weight:500; font-size:.88rem;
    }
    .nav-cta-mobile::after{display:none;}
  }

  /* ================= SHARED FOOTER ================= */
  .foot-grid{display:grid; grid-template-columns:1.3fr 1.5fr 1fr 1fr 1fr; gap:32px 40px; margin-bottom:60px;}
  .foot-contact{display:flex; flex-direction:column; gap:4px; margin-top:14px;}
  .foot-contact a{color:var(--slate-400); font-size:.88rem; transition:color .2s ease;}
  .foot-contact a:hover{color:var(--teal-400);}
  .foot-cta{display:inline-block; margin-top:20px;}
  .foot-cta .btn-primary{padding:12px 22px; font-size:.82rem;}
  .foot-col-toggle{
    display:block; width:100%; text-align:left; background:none; border:none; cursor:default;
    font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--slate-500);
    margin-bottom:16px; padding:0;
  }
  .foot-sub-cols{columns:2; column-gap:20px;}
  .foot-sub-cols ul{break-inside:avoid; margin-bottom:12px;}
  .foot-col-body a{color:var(--slate-400); transition:color .2s ease;}
  .foot-col-body a:hover{color:var(--teal-400);}
  .foot-col-body a[aria-current="page"]{color:var(--teal-300);}
  .foot-col-body li{margin-bottom:11px; font-size:.9rem;}
  .foot-col-body button#footerCookieSettings{
    background:none; border:none; padding:0; cursor:pointer; color:var(--slate-400); font-size:.9rem; font-family:inherit; transition:color .2s ease;
  }
  .foot-col-body button#footerCookieSettings:hover{color:var(--teal-400);}

  @media(max-width:960px){
    .foot-grid{grid-template-columns:1fr 1fr; gap:36px 24px;}
    .foot-brand{grid-column:1 / -1;}
  }
  @media(max-width:640px){
    .foot-grid{grid-template-columns:1fr; gap:0; margin-bottom:30px;}
    .foot-brand{padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:8px;}
    .foot-col-toggle{
      cursor:pointer; display:flex; align-items:center; justify-content:space-between;
      padding:18px 0; margin-bottom:0; border-bottom:1px solid var(--line); color:var(--ice-100); font-size:.9rem;
    }
    .foot-col-toggle::after{content:'+'; font-family:var(--font-mono); font-size:1.1rem; color:var(--slate-500); transition:transform .25s ease;}
    .foot-col-toggle[aria-expanded="true"]::after{transform:rotate(45deg);}
    .foot-col-body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
    .foot-col-body ul{padding:14px 0 6px;}
    .foot-col.open .foot-col-body{max-height:650px;}
    .foot-sub-cols{columns:1;}
  }

  /* Fix: .form-actions (submit + WhatsApp + email buttons on every quote
     form) is flex-wrap:wrap with no justify-content, so once the 3 buttons
     no longer fit on one line (any viewport under ~700px) they wrap onto
     separate lines but stay left-aligned as a group — since "Pošalji upit"
     is narrower than the two longer ghost buttons below it, its left-aligned
     edge lines up with theirs but it visually reads as offset/shorter,
     not centered under them. justify-content:center centers each wrapped
     line's content, so all three read as a straight, centered stack. */
  .form-actions{justify-content:center;}