/* ==========================================================================
   Site navigation + footer, round 2 (Services mega menu, Licensing label,
   "We Specialise" footer column). Loaded on every page after main-v2.css.
   Separate file because main-v2.css is cached for a year with no version hash.
   ========================================================================== */

/* Licensing is a label, not a link: no href, opens its dropdown on hover/focus/tap */
.nav-label { cursor: pointer; user-select: none; }
.nav-label:focus-visible { outline: 2px solid var(--ember-red); outline-offset: 4px; }

/* Services mega dropdown, anchored to the nav bar so it can't run off-screen */
@media (min-width: 981px) {
  .site-header .nav { position: relative; }
  .nav-links > li.has-mega { position: static; }
  .dropdown--mega {
    left: 50%; width: min(860px, 100%);
    display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 6px 18px;
    padding: 20px; margin-top: 0;
  }
  /* Invisible bridge across the gap between the link and the panel, so the
     hover isn't lost while the pointer travels down to it. */
  .dropdown--mega::before { content: ''; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
  .dropdown--mega a { padding: 8px 12px; font-size: 14px; }
}
.mega-col { display: flex; flex-direction: column; }
.mega-title {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bone-white-70); padding: 4px 12px 10px; border-bottom: 1px solid var(--bone-white-12); margin-bottom: 6px;
}
.dropdown a.mega-all { color: var(--bone-white); font-weight: 600; }
@media (max-width: 980px) {
  .mega-col + .mega-col { margin-top: 10px; }
  .mega-title { padding-left: 0; }
  .dropdown--mega a { padding: 10px 0; }
}

/* Footer: five columns now (brand + Explore + We Specialise + Get Involved + Legal) */
.footer-top { grid-template-columns: 1.2fr repeat(4, 1fr); }
@media (max-width: 1100px) { .footer-top { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }