/* =======================================================
   Chessington Buzz – Menu (v1.4.5)
   Desktop: hover; Mobile (≤991.98px): in-flow accordion

   CHANGE LOG (v1.4.5)
   - Mobile: Hover over a mega section *or its caret* now wraps the caret with
     equal edge (like the Guide row).
   - Mobile: Reduced vertical spacing between section rows.
   - Keeps earlier fixes: desktop title padding, hide images on mobile, etc.
   ======================================================= */

.navbar{
  background:#176942;
  border-bottom:1px solid rgba(0,0,0,.3);
  z-index:1030;
  position:relative;
}
.navbar .container{ position:relative; }

/* Brand */
.navbar .navbar-brand{
  color:#fff;
  text-transform:none !important;
  letter-spacing:normal !important;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus{ color:#e9e9e9; }

/* Top-level items */
.navbar .navbar-nav{ align-items:center; margin:0; padding:0; list-style:none; }
.navbar .navbar-nav > li.nav-item{ position:relative; }
.navbar .navbar-nav > li.nav-item + li.nav-item{ margin-left:0.5rem; }

.navbar .navbar-nav > li.nav-item > a.nav-link{
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0.65rem 1rem;
    border-radius: .5rem;
    color: #fff;
    background: transparent;
    text-decoration: none;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2;
    font-size: 115%;
}
.navbar .navbar-nav > li.nav-item > a.nav-link:hover,
.navbar .navbar-nav > li.nav-item > a.nav-link:focus{
  background:rgba(0,0,0,.15); color:#fff;
}
.navbar .navbar-nav > li.nav-item.active > a.nav-link,
.navbar .navbar-nav > li.current-menu-item > a.nav-link,
.navbar .navbar-nav > li.current-menu-parent > a.nav-link,
.navbar .navbar-nav > li.current-menu-ancestor > a.nav-link{
  background:rgba(0,0,0,.15); color:#fff;
}

/* Desktop caret on top links */
.navbar .navbar-nav > li.dropdown > a.nav-link::after{
  content:""; display:inline-block; margin-left:.4rem;
  width:.45rem; height:.45rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease;
}
.navbar .navbar-nav > li.dropdown.show > a.nav-link::after{ transform:rotate(-135deg); }

/* Desktop dropdown panel */
.navbar .navbar-nav > li.nav-item.dropdown{ display:flex; align-items:center; }
.navbar .navbar-nav > li.nav-item.dropdown::before{
  content:""; position:absolute; left:0; right:0; top:100%; height:10px; z-index:1;
}
.navbar .navbar-nav > li.nav-item .dropdown-menu{
  position:absolute; top:100%; left:0; z-index:1000;
  display:block; visibility:hidden; opacity:0;
  margin:0; padding:.25rem;
  background:#d02316 !important; border:1px solid #ab0f03 !important;
  border-radius:.35rem; box-shadow:0 10px 20px rgba(0,0,0,.15);
  transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.navbar .navbar-nav > li.nav-item .dropdown-menu.show{
  visibility:visible; opacity:1; transform:translateY(6px); transition-delay:0s;
}

/* Desktop hover rules */
@media (hover:hover) and (pointer:fine){
  .navbar .navbar-nav > li.nav-item.dropdown:hover > .dropdown-menu,
  .navbar .navbar-nav > li.nav-item.dropdown:focus-within > .dropdown-menu{
    visibility:visible; opacity:1; transform:translateY(6px); transition-delay:0s;
  }
  .navbar .navbar-nav > li.nav-item.dropdown:hover > a.nav-link,
  .navbar .navbar-nav > li.nav-item.dropdown:focus-within > a.nav-link{
    background:rgba(0,0,0,.15); color:#fff;
  }
}

/* Items */
.navbar .navbar-nav > li.nav-item .dropdown-menu .dropdown-item{
  color:#fff !important; background:transparent !important;
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .6rem; border-radius:.3rem;
  text-transform:none !important; letter-spacing:normal !important;
}
.navbar .navbar-nav > li.nav-item .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav > li.nav-item .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav > li.nav-item .dropdown-menu .dropdown-item.active{
  background:#ab0f03 !important; color:#fff !important;
}
.navbar .navbar-nav > li.nav-item .dropdown-menu .dropdown-divider{
  border-top-color:#ab0f03 !important;
}

/* Mega (desktop, full container) */
.navbar .navbar-nav > li.nav-item.dropdown.cb-mega{ position:static; }
.navbar .dropdown-menu.cb-mega{
  position:absolute; top:100%; left:0; right:0;
  width:100%; min-width:100%; margin:0; padding:1rem !important;
  background:#d02316 !important; border:1px solid #ab0f03 !important;
  border-radius:.35rem; box-shadow:0 10px 20px rgba(0,0,0,.15);
  display:block; visibility:hidden; opacity:0;
  transform:translateY(6px);
  transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
@media (hover:hover) and (pointer:fine){
  .navbar .navbar-nav > li.nav-item.dropdown.cb-mega:hover > .dropdown-menu.cb-mega,
  .navbar .navbar-nav > li.nav-item.dropdown.cb-mega:focus-within > .dropdown-menu.cb-mega{
    visibility:visible; opacity:1; transform:translateY(6px); transition-delay:0s;
  }
}

/* Mega internals */
.cb-mega .cb-mega-row{ display:flex; flex-wrap:wrap; margin:-.75rem; }
.cb-mega .cb-mega-col{ padding:.75rem; }
.cb-mega .cb-mega-box{ border-radius:.35rem; padding:.25rem; background:transparent; }
.cb-mega .cb-mega-head{ display:flex; flex-direction:column; gap:.5rem; margin:0 0 .5rem 0; background:transparent; }

/* Image hover dimming only when the IMAGE LINK is hovered */
.cb-mega .cb-mega-img-wrap{ position:relative; overflow:hidden; border-radius:.35rem; }
.cb-mega .cb-mega-img-link:hover .cb-mega-img-wrap img{ opacity:.7; transition:opacity .15s ease; }
.cb-mega .cb-mega-img-wrap img{ display:block; width:100%; height:auto; object-fit:cover; }

/* Section title (depth-1) */
.cb-mega .cb-mega-title{ font-weight:700; color:#fff; margin:0; line-height:1.2; }

/* Desktop – give title links padding/radius so hover isn't skinny */
.cb-mega a.cb-mega-title-link{
  color:#fff; text-decoration:none; background:transparent !important;
  display:inline-block;                 /* ensures padding affects hover area */
  padding:.45rem .6rem;
  border-radius:.35rem;
}

.cb-mega .cb-mega-links{ list-style:none; margin:0; padding:0; }
.cb-mega .cb-mega-head + .cb-mega-links{ border-top:1px solid rgba(255,255,255,.25); margin-top:.35rem; padding-top:.35rem; }
.cb-mega .cb-mega-links a{ display:block; color:#fff !important; background:transparent !important; padding:.45rem .6rem; border-radius:.3rem; }

/* Responsive columns for 4x layout on desktop */
.cb-col-3{ flex:0 0 100%; max-width:100%; }
@media (min-width:576px){ .cb-col-3{ flex:0 0 50%; max-width:50%; } }
@media (min-width:768px){ .cb-col-3{ flex:0 0 25%; max-width:25%; } }

/* =======================================================
   MOBILE (≤ 991.98px): in-flow accordion
   ======================================================= */
@media (max-width:991.98px){

  .navbar .navbar-nav{
    display:block; width:100%; align-items:stretch;
  }
  .navbar .navbar-nav > li.nav-item{
    display:block; width:100%; margin:.25rem 0 0 0;
  }
  .navbar .navbar-nav > li.nav-item + li.nav-item{ margin-left:0; }

  /* Top-level pill wraps caret equally (Guide) */
  .navbar .navbar-nav > li.nav-item > a.nav-link{
    width:100%; justify-content:flex-start;
    border-radius:.55rem;
    min-height:48px;                           /* ~6px gap above/below the 36px caret */
    padding-right:calc(36px + 0.75rem + 0.5rem);/* space for caret + side gaps */
  }

  /* remove desktop pseudo-carets on links */
  .navbar .navbar-nav > li.dropdown > a.nav-link::after{ content:none !important; }

  /* top row behaves like accordion header */
  .navbar .navbar-nav > li.nav-item.dropdown{ display:block; width:100%; }
  .navbar .navbar-nav > li.nav-item.dropdown.cb-mega{ position:relative; }

  /* Keep caret beside Guide (fixed, equal gaps) */
  .navbar .navbar-nav > li.nav-item.dropdown.cb-mega > .cb-dropdown-caret{
    position:absolute;
    right:.375rem;                               /* ~6px */
    top:6px;                                     /* (48px - 36px) / 2 */
    transform:none;
    z-index:2000;
    width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.25) !important; color:#fff !important;
    border:none !important; box-shadow:none !important; outline:0;
    -webkit-appearance:none !important; appearance:none !important;
    cursor:pointer; border-radius:.55rem;
  }
  .navbar .navbar-nav > li.nav-item.dropdown.cb-mega > .cb-dropdown-caret .chev{
    width:.62rem; height:.62rem;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .22s ease; display:inline-block;
  }
  .navbar .navbar-nav > li.nav-item.dropdown.cb-mega.show > .cb-dropdown-caret .chev{
    transform:rotate(-135deg);
  }
  .navbar .navbar-nav > li.nav-item.dropdown.cb-mega > .cb-dropdown-caret:hover,
  .navbar .navbar-nav > li.nav-item.dropdown.cb-mega > .cb-dropdown-caret:active{
    background:rgba(0,0,0,.35) !important;
  }

  /* In-flow accordion visibility */
  .navbar .dropdown-menu{
    position:static !important;
    inset:auto !important;
    float:none !important;
    transform:none !important;
    width:100% !important;
    max-width:none !important;
    box-shadow:none !important;
    margin:.35rem 0 0 0 !important;
    padding:.6rem !important;
    border:1px solid #ab0f03 !important;
    border-radius:.35rem;
    background:#d02316 !important;

    display:none !important;
    visibility:hidden !important;
    opacity:1 !important;
  }
  .navbar .show > .dropdown-menu{
    display:block !important;
    visibility:visible !important;
  }

  /* mega sections stack */
  .cb-mega .cb-mega-row{ display:block; margin:0; }

  /* v1.4.5: tighten vertical spacing between section rows */
  .cb-mega .cb-mega-col{ width:100% !important; max-width:none !important; padding:0 0 .25rem 0; } /* was .6rem */
  .cb-mega .cb-mega-box{ padding:.15rem; } /* slightly tighter */
  .cb-mega .cb-mega-head{ margin:0 0 .25rem 0; } /* was .5rem */

  /* Hide images on mobile */
  .cb-mega .cb-mega-img-wrap{ display:none !important; }

  /* Mega section title row looks/behaves like Guide */
  .cb-mega .cb-mega-head{ position:relative; background:transparent; }
  .cb-mega a.cb-mega-title-link,
  .cb-mega .cb-mega-title{
    display:block;
    border-radius:.55rem;
    min-height:48px;
    line-height:48px;                 /* centers text vertically within the 48px row */
    padding:0 .6rem;
    padding-right:calc(36px + 0.75rem + 0.5rem); /* space for section caret */
    background:transparent !important; color:#fff; text-decoration:none !important;
  }

  /* Section caret — visually inside the title row */
  .cb-mega .cb-section-caret{
    position:absolute; right:.35rem; top:6px;
    z-index:2000; width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.25) !important; color:#fff !important;
    border:none !important; box-shadow:none !important; outline:0;
    -webkit-appearance:none !important; appearance:none !important;
    cursor:pointer; border-radius:.55rem;
  }
  .cb-mega .cb-section-caret .chev{
    width:.58rem; height:.58rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .22s ease; display:inline-block;
  }
  .cb-mega .cb-mega-box.cb-open > .cb-mega-head .cb-section-caret .chev{
    transform:rotate(-135deg);
  }

  /* Section links list */
  .cb-mega .cb-mega-links{ display:none; padding-top:.25rem; } /* tighter */
  .cb-mega .cb-mega-box.cb-open .cb-mega-links{ display:block; }
  .cb-mega .cb-mega-head + .cb-mega-links{ border-top:0; margin-top:0; padding-top:.2rem; } /* tighter */

  /* Sub-accordion (depth-2 -> depth-3) */
  .cb-mega .cb-mega-link-item.has-children{ position:relative; }
  .cb-mega .cb-sub-caret{
    position:absolute; right:.15rem; top:.2rem;
    width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.25) !important; color:#fff !important;
    border:0 !important; border-radius:.55rem; cursor:pointer;
  }
  .cb-mega .cb-sub-caret .chev{
    width:.52rem; height:.52rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); transition:transform .22s ease; display:inline-block;
  }
  .cb-mega .cb-mega-link-item.cb-sub-open > .cb-sub-caret .chev{ transform:rotate(-135deg); }
  .cb-mega .cb-mega-sublinks{ display:none; padding:.2rem 0 .15rem .75rem; list-style:none; margin:0; } /* tighter top padding */
  .cb-mega .cb-mega-link-item.cb-sub-open > .cb-mega-sublinks{ display:block; }

  /* v1.4.5: when hovering the *row* or caret, wrap the caret with the same hover pill */
  .cb-mega .cb-mega-head:hover .cb-mega-title-link,
  .cb-mega .cb-mega-head:focus-within .cb-mega-title-link{
    background:#ab0f03 !important;
    color:#fff !important;
  }
  .cb-mega a.cb-mega-title-link:hover ~ .cb-section-caret,
  .cb-mega a.cb-mega-title-link:focus ~ .cb-section-caret,
  .cb-mega .cb-mega-head:hover .cb-section-caret{
    background:rgba(0,0,0,.35) !important; /* caret darkens, but remains inside the pill */
  }
}

/* =======================================================
   Unified hover/focus styles (DESKTOP + MOBILE) and NO underline
   ======================================================= */
.navbar .dropdown-menu a.dropdown-item:hover,
.navbar .dropdown-menu a.dropdown-item:focus,
.cb-mega .cb-mega-links a:hover,
.cb-mega .cb-mega-links a:focus,
.cb-mega .cb-mega-sublinks a:hover,
.cb-mega .cb-mega-sublinks a:focus,
.cb-mega a.cb-mega-title-link:hover,
.cb-mega a.cb-mega-title-link:focus{
  background:#ab0f03 !important;
  color:#fff !important;
  border-radius:.35rem;
  text-decoration:none !important; /* remove underline */
}

/* Ensure default link states inside mega also avoid underlines */
.cb-mega .cb-mega-links a,
.cb-mega .cb-mega-sublinks a,
.cb-mega a.cb-mega-title-link{
  text-decoration:none !important;
}

/* Focus rings for keyboard users */
.navbar a:focus,
.cb-dropdown-caret:focus,
.cb-section-caret:focus{
  outline:2px solid rgba(255,255,255,.7); outline-offset:2px;
}

/* Hide caret buttons on desktop (desktop is hover-only) */
@media (min-width:992px){
  .cb-dropdown-caret,
  .cb-section-caret{ display:none !important; }
  .cb-sub-caret{ display:none !important; }
}
/* ===== cb-menu.css – v1.4.6 overrides (append to end) ===== */

/* MOBILE: Make section title hover look exactly like the Guide row */
@media (max-width: 991.98px) {
  /* Use the same hover color as the Guide top row (subtle dark overlay) */
  .cb-mega .cb-mega-head:hover .cb-mega-title-link,
  .cb-mega .cb-mega-head:focus-within .cb-mega-title-link,
  .cb-mega a.cb-mega-title-link:hover,
  .cb-mega a.cb-mega-title-link:focus {
    background: rgba(0,0,0,.15) !important; /* match Guide hover */
    color: #fff !important;
  }

  /* Keep the caret’s darker chip inside that pill, same as Guide */
  .cb-mega .cb-mega-head:hover .cb-section-caret,
  .cb-mega .cb-mega-head:focus-within .cb-section-caret,
  .cb-mega a.cb-mega-title-link:hover ~ .cb-section-caret,
  .cb-mega a.cb-mega-title-link:focus ~ .cb-section-caret {
    background: rgba(0,0,0,.35) !important; /* same caret hover as Guide */
  }

  /* Tighter vertical rhythm for section rows */
  .cb-mega .cb-mega-col { padding: 0 0 .15rem 0 !important; }   /* was .25/.6 earlier */
  .cb-mega .cb-mega-box { padding: .1rem !important; }
  .cb-mega .cb-mega-head { margin: 0 0 .15rem 0 !important; }
  .cb-mega .cb-mega-links { padding-top: .15rem !important; }
  .cb-mega .cb-mega-head + .cb-mega-links { padding-top: .15rem !important; }
}