/* ============================================================
   menu.css — styles for the shared <site-nav> header (see menu.js)
   util bar · header · brand · nav links · 2nd-level dropdown · burger
   Requires base.css (design tokens). Loaded on every page.
   ============================================================ */

  /* ---- top utility bar ---- */
  .util{background:var(--steel-dark);color:#aec4ba;font-family:var(--mono);font-size:11px;letter-spacing:.08em}
  .util .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
  .util-left{display:flex;gap:22px;align-items:center}
  .util-dot{width:6px;height:6px;border-radius:50%;background:#4fae6b;box-shadow:0 0 0 3px rgba(79,174,107,.18)}
  .util-right{display:flex;gap:26px}
  .util a:hover{color:#fff}
  @media(max-width:760px){.util-right{display:none}}

  /* ---- header bar ---- */
  header{position:sticky;top:0;z-index:60;background:rgba(238,241,237,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
  header.scrolled{box-shadow:0 1px 24px rgba(22,30,34,.10)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .brand{display:flex;align-items:center;gap:14px}
  .brand-logo{height:46px;width:auto;display:block;flex:none}
  .mark{width:42px;height:42px;position:relative;flex:none;background:var(--steel);display:grid;place-items:center;overflow:hidden}
  .mark svg{width:26px;height:26px;stroke:#fff}
  .mark::before,.mark::after{content:"";position:absolute;background:rgba(255,255,255,.55)}
  .mark::before{left:50%;top:4px;bottom:4px;width:1px;transform:translateX(-50%)}
  .mark::after{top:50%;left:4px;right:4px;height:1px;transform:translateY(-50%)}
  .brand-txt{font-weight:800;font-size:13px;letter-spacing:.14em;line-height:1.28;color:var(--ink);text-transform:uppercase}

  /* ---- nav links (hover = grow 20%, no layout shift) ---- */
  nav.links{display:flex;gap:34px;align-items:center}
  nav.links a{
    font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);
    position:relative;padding:6px 0;display:inline-block;transform-origin:center;
    transition:transform .2s,color .2s;
  }
  nav.links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--steel);transition:width .25s}
  nav.links a:hover{color:var(--ink);transform:scale(1.2)}
  nav.links a.active::after{width:100%}
  nav.links a.active{color:var(--ink)}

  /* ---- 2nd-level dropdown (Access & Training) ---- */
  .has-sub{position:relative}
  .submenu{
    position:absolute;top:100%;left:0;min-width:220px;
    display:flex;flex-direction:column;
    background:#fff;border:1px solid var(--line);
    box-shadow:0 14px 34px rgba(22,30,34,.12);
    padding:0;margin-top:14px;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .2s,transform .2s,visibility .2s;z-index:50;
  }
  .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px} /* hover bridge */
  .has-sub:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
  nav.links .submenu a{padding:14px 30px;white-space:nowrap}
  nav.links .submenu a::after{display:none}
  nav.links .submenu a:hover{color:var(--steel);background:var(--steel-pale);transform:none}

  /* ---- header CTA button (optional) ---- */
  .nav-cta{
    background:var(--steel);color:#fff;padding:11px 20px;font-size:12px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;
    transition:background .2s,transform .2s;
  }
  .nav-cta:hover{background:var(--steel-deep);transform:translateY(-1px)}
  .nav-cta svg{width:14px;height:14px;stroke:#fff}

  /* ---- mobile burger ---- */
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
  .burger span{width:24px;height:2px;background:var(--ink)}
  @media(max-width:1040px){nav.links{display:none}.burger{display:flex}}