/* ==========================================================================
   BroadbandSwitch.uk  |  nav-v9-additions.css
   Loads AFTER nav-v8.css.  Purely additive: nothing in nav-v8.css is changed,
   so this file can be removed at any time and the site returns to how it was.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.  TOOLS MENU
   nav-v8.css lists each menu by name in its hover rules, so a new menu needs
   its own set.  These mirror the existing "compare" rules exactly.
   -------------------------------------------------------------------------- */
.nav-wrap:has(.mega[data-mega="tools"]:hover) .nav-item[data-menu="tools"] .nav-trigger {
  color: var(--bbs-magenta);
}
.nav-wrap:has(.mega[data-mega="tools"]:hover) .nav-item[data-menu="tools"] .nav-trigger::after {
  transform: scaleX(1);
}
.nav-wrap:has(.nav-item[data-menu="tools"]:hover) .mega[data-mega="tools"],
.nav-wrap:has(.nav-item[data-menu="tools"]:focus-within) .mega[data-mega="tools"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-wrap:has(.nav-item[data-menu="tools"]:hover) .mega[data-mega="tools"] .col {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 50ms + 80ms);
}

/* --------------------------------------------------------------------------
   2.  SPRITE ICONS
   Icons are now inline SVG referencing a sprite, rather than being built at
   runtime by a third-party script.  nav-v8.css already styles `svg`, so this
   only supplies the base size and stops any flash before layout.
   -------------------------------------------------------------------------- */
.ic {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.util-link .ic,
.util-cta .ic       { width: 15px; height: 15px; }
.nav-trigger > .ic  { width: 18px; height: 18px; }
.nav-trigger .chev  { width: 14px; height: 14px; }
.col-head .ic       { width: 16px; height: 16px; }
.col-link .arrow    { width: 14px; height: 14px; }
.mobile-trigger .ic { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   3.  PROMO CALL TO ACTION
   The Tools, Learn and Online Safety panels use a link instead of the
   postcode form, so it needs a button style to match promo-submit.
   -------------------------------------------------------------------------- */
.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--bbs-magenta, #E50571);
  color: #fff;
  font-weight: 800;
  font-size: 14.5px;
  text-decoration: none;
  box-shadow: 0 10px 22px -10px rgba(229, 5, 113, 0.7);
  transition: background 180ms ease, transform 180ms ease;
}
.promo-cta:hover { background: #f42a8a; transform: translateY(-1px); }
.promo-cta .ic   { width: 16px; height: 16px; }

/* The promo panel sits on a dark background and some existing rules set a dark
   link colour.  This wins in every case, so the button can never end up with
   dark text on a dark fill. */
.bbs-site-header-v8 .mega .promo a.promo-cta,
.bbs-site-header-v8 .mega .promo a.promo-cta:link,
.bbs-site-header-v8 .mega .promo a.promo-cta:visited,
.bbs-site-header-v8 .mega .promo a.promo-cta:hover,
.bbs-site-header-v8 .mega .promo a.promo-cta:focus,
.bbs-site-header-v8 .mega .promo a.promo-cta:active {
  color: #ffffff !important;
}
.bbs-site-header-v8 .mega .promo a.promo-cta .ic { stroke: #ffffff !important; }

/* Same guarantee for the postcode button, which is also white on pink. */
.bbs-site-header-v8 .promo-submit,
.bbs-site-header-v8 .promo-submit .ic { color: #ffffff !important; stroke: #ffffff !important; }

/* --------------------------------------------------------------------------
   4.  PERFORMANCE
   Mega panels are skipped by the renderer until they are needed.  This cuts
   the paint and layout cost of eight panels on every page load.
   -------------------------------------------------------------------------- */
.mega {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.nav-wrap:has(.nav-item:hover) .mega,
.nav-wrap:has(.nav-item:focus-within) .mega { content-visibility: visible; }

/* Panels that are closed should not be reachable by keyboard or screen reader. */
.mega:not(:hover):not(:focus-within) { --bbs-mega-closed: 1; }

/* --------------------------------------------------------------------------
   5.  SMOOTHER OPENING
   @starting-style gives the panel a proper entry animation without JavaScript.
   Browsers that do not support it simply use the existing transition.
   -------------------------------------------------------------------------- */
@supports (transition-behavior: allow-discrete) {
  .mega {
    transition-behavior: allow-discrete;
  }
  @starting-style {
    .nav-wrap:has(.nav-item:hover) .mega { opacity: 0; transform: translateY(-6px); }
  }
}

/* --------------------------------------------------------------------------
   6.  ACTIVE PAGE
   The current section is marked with aria-current so people can see where
   they are, which also helps assistive technology.
   -------------------------------------------------------------------------- */
.nav-trigger[aria-current="true"],
.nav-trigger[aria-current="page"] { color: var(--bbs-magenta); }
.nav-trigger[aria-current="true"]::after,
.nav-trigger[aria-current="page"]::after { transform: scaleX(1); }
.col-link[aria-current="page"] {
  color: var(--bbs-magenta);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7.  FITTING EIGHT MENUS ON ONE LINE
   Without this the labels wrap: "Compare Deals", "By Need" and "Online Safety"
   each break onto two lines.  Measured across 1200px to 1920px, everything
   now sits on a single line with room to spare.
   -------------------------------------------------------------------------- */
.nav-items { flex-wrap: nowrap; }
.nav-item  { flex: 0 0 auto; }
.nav-trigger {
  white-space: nowrap;
  padding-inline: 12px;
  gap: 7px;
}
.nav-trigger > .ic { width: 17px; height: 17px; }
.nav-trigger .chev { width: 13px; height: 13px; }

@media (max-width: 1439px) {
  .nav-trigger { padding-inline: 9px; gap: 6px; font-size: 14.6px; }
  .nav-trigger > .ic { width: 16px; height: 16px; }
  .nav-trigger .chev { width: 12px; height: 12px; }
}
@media (max-width: 1180px) {
  .nav-items { display: none; }
  .mobile-trigger { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   8.  MOTION AND CONTRAST
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mega, .mega .col, .promo-cta, .nav-trigger > .ic { transition: none !important; animation: none !important; }
}
@media (prefers-contrast: more) {
  .col-link { text-decoration: underline; }
  .mega { border: 1px solid var(--bbs-ink, #1C1428); }
}
@media print {
  .bbs-site-header-v8 { display: none; }
}