/* =============================================================
   TOM FAULKNER — THREE-PANEL MEGA MENU
   mega-menu.css  v4  (definitive)
   ============================================================= */

/* ── 0. HARD RESETS ─────────────────────────────────────────────
   Every !important targets a specific conflict in style.css.
   See comment beside each one.
   ─────────────────────────────────────────────────────────────── */

/* Kill bullet points / padding from theme ul/li rules */
.tf-mega-menu ul,
.tf-mega-menu li,
.tf-mega-cat-list,
.tf-mega-cat-list li,
.tf-mega-subgroup-list,
.tf-mega-subgroup-list li {
  list-style:       none !important;
  list-style-type:  none !important;
  list-style-image: none !important;
  background-image: none !important;
  padding-left:     0 !important;
  margin:           0 !important;
  padding:          0 !important;
  border:           none !important;
}

/* Reset typography forced by  #header a { font-size:.75em!important; text-transform:uppercase!important }
   and  a { font-size:.8rem; color:#000!important } */
.tf-mega-menu a,
.tf-mega-menu li,
.tf-mega-menu ul,
.tf-mega-menu span {
  font-size:       unset !important;
  text-transform:  unset !important;
  letter-spacing:  unset !important;
  font-family:     unset !important;
  font-weight:     unset !important;
  transition:      color .15s ease, opacity .15s ease !important;
}

.tf-mega-menu,
.tf-mega-menu * {
  box-sizing: border-box;
}

/* ── 1. MEGA MENU CONTAINER ─────────────────────────────────────
   Fights:
   .dropdown-menu.show { position:relative!important; top:0!important; transform:none!important }
   .dropdown > .dropdown-menu { opacity:0; visibility:hidden; margin-left:-15px }
   .mega-menu-parent.dropdown .dropdown-menu { position:absolute!important; transform:translateX(-50%) }
   .dropdown-menu { background:#ececec }
   ─────────────────────────────────────────────────────────────── */

.tf-mega-menu,
.tf-mega-menu.dropdown-menu,
.tf-mega-menu.dropdown-menu.show,
.nav-item.dropdown > .tf-mega-menu,
.nav-item.dropdown > .tf-mega-menu.dropdown-menu,
.mega-menu-parent.dropdown .tf-mega-menu,
.mega-menu-parent.dropdown .tf-mega-menu.dropdown-menu {
  position:      fixed !important;
  top:           var(--tf-header-height, 80px) !important;
  left:          0 !important;
  right:         0 !important;
  width:         100% !important;
  background:    #fff !important;
  transform:     none !important;
  margin:        0 !important;
  float:         none !important;
  border:        none !important;
  border-top:    1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  border-radius: 0 !important;
  padding:       0 !important;
  box-shadow:    0 8px 32px rgba(0,0,0,.08) !important;
  min-width:     0 !important;
  z-index:       1050 !important;
}

/* Default hidden — beats .dropdown:hover > .dropdown-menu { visibility:visible; opacity:1 }
   and .dropdown > .dropdown-menu { display:block; opacity:0; visibility:hidden } */
.tf-mega-menu,
.tf-mega-menu.dropdown-menu {
  display:        none !important;
  opacity:        0;
  pointer-events: none;
  visibility:     visible !important;
}

/* Shown only when JS adds .show */
html body #header .nav-item.dropdown > .tf-mega-menu.show,
html body #header .nav-item.dropdown > .tf-mega-menu.dropdown-menu.show {
  display:        block !important;
  opacity:        1 !important;
  pointer-events: auto !important;
  visibility:     visible !important;
}

/* Ensure CSS-only hover NEVER shows the mega panel (footer.php scopes it,
   but this is a belt-and-braces fallback) */
html body #header .nav-item.dropdown:hover > .tf-mega-menu:not(.show),
html body #header .nav-item.dropdown > .tf-mega-menu:not(.show) {
  display:        none !important;
  opacity:        0 !important;
  pointer-events: none !important;
}

/* ── 2. SUPPRESS STRAY CHILD ITEMS ────────────────────────────── */

/* Direct <li> siblings of the mega panel that the walker may output */
.nav-item.dropdown > .tf-mega-menu ~ ul,
.nav-item.dropdown > .tf-mega-menu ~ li {
  display: none !important;
}

.nav-item.dropdown > li:not(.nav-item) {
  display: none !important;
}

/* Hidden sub-menus that belong inside the panel */
.nav-item.dropdown > .tf-mega-menu .dropdown-menu,
.nav-item.dropdown > .tf-mega-menu .sub-menu {
  display:   none !important;
  position:  static !important;
  transform: none !important;
}

/* ── 3. INNER LAYOUT ────────────────────────────────────────────── */

.tf-mega-inner {
  display:    flex !important;
  align-items: stretch;
  max-width:  1400px;
  margin:     0 auto;
  min-height: 340px;
  width:      100%;
}

/* ── 4. PANEL 1 — CATEGORY LIST (LEFT) ─────────────────────────── */

.tf-mega-panel--categories {
  flex:    0 0 220px;
  border-right: 1px solid #ececec;
  padding: 36px 24px 36px 32px !important;
}

.tf-mega-heading {
  display:         block;
  font-family:     'Futura', sans-serif !important;
  font-size:       .68rem !important;
  font-weight:     600 !important;
  letter-spacing:  .12em !important;
  text-transform:  uppercase !important;
  color:           #999 !important;
  margin-bottom:   18px !important;
  text-decoration: none !important;
  line-height:     1.4;
}

a.tf-mega-heading:hover { color: #000 !important; }

.tf-mega-cat-list {
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
}

.tf-mega-cat-item {
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
}

.tf-mega-cat-link {
  display:         flex !important;
  align-items:     center;
  justify-content: space-between;
  padding:         9px 0 !important;
  font-family:     'Futura', sans-serif !important;
  font-size:       .8rem !important;
  font-weight:     400 !important;
  color:           #1a1a1a !important;
  text-decoration: none !important;
  text-transform:  none !important;
  letter-spacing:  .04em !important;
  white-space:     nowrap;
  line-height:     1.4;
  border:          none !important;
  background:      none !important;
  transition:      color .15s ease !important;
}

.tf-mega-cat-link:hover,
.tf-mega-cat-link:visited { color: #000 !important; text-decoration: none !important; }

.tf-mega-cat-item.is-active > .tf-mega-cat-link {
  color:       #000 !important;
  font-weight: 500 !important;
}

.tf-mega-cat-arrow {
  font-size:   .6rem !important;
  opacity:     0;
  transform:   translateX(-4px);
  flex-shrink: 0;
  margin-left: 8px;
  transition:  opacity .15s ease, transform .15s ease !important;
}

.tf-mega-cat-link--has-sub:hover .tf-mega-cat-arrow,
.tf-mega-cat-item.is-active > .tf-mega-cat-link .tf-mega-cat-arrow {
  opacity:   1;
  transform: translateX(0);
}

/* ── 5. PANEL 2 — SUB-CATEGORY PANELS WITH FADE-RIGHT ──────────── */

.tf-mega-panel--subcats {
  flex:     1 1 auto;
  position: relative;
  padding:  36px 32px !important;
  overflow: hidden;
}

.tf-mega-subpanel {
  position:       absolute !important;
  top:            36px;
  left:           32px;
  right:          32px;
  bottom:         36px;
  display:        flex !important;
  flex-wrap:      wrap;
  align-content:  flex-start;
  gap:            28px 40px;
  opacity:        0;
  transform:      translateX(18px) !important;
  pointer-events: none;
  visibility:     hidden;
  transition:     opacity .25s ease, transform .25s ease !important;
}

.tf-mega-subpanel.is-visible {
  opacity:        1 !important;
  transform:      translateX(0) !important;
  pointer-events: auto;
  visibility:     visible !important;
}

.tf-mega-subpanel.is-leaving {
  opacity:        0 !important;
  transform:      translateX(-12px) !important;
  pointer-events: none;
  visibility:     hidden;
  transition:     opacity .2s ease, transform .2s ease !important;
}

.tf-mega-subgroup      { flex: 0 0 160px; }

.tf-mega-subgroup-title {
  display:         block;
  font-family:     'Futura', sans-serif !important;
  font-size:       .68rem !important;
  font-weight:     600 !important;
  letter-spacing:  .1em !important;
  text-transform:  uppercase !important;
  color:           #1a1a1a !important;
  margin-bottom:   10px !important;
  text-decoration: none !important;
  line-height:     1.4;
  transition:      color .15s ease !important;
}
a.tf-mega-subgroup-title:hover { color: #000 !important; }

.tf-mega-subgroup-list {
  list-style: none !important;
  margin:     0 !important;
  padding:    0 !important;
}
.tf-mega-subgroup-list li {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 !important;
}

.tf-mega-sublink {
  display:         block;
  padding:         5px 0 !important;
  font-family:     'Futura', sans-serif !important;
  font-size:       .8rem !important;
  font-weight:     400 !important;
  color:           #666 !important;
  text-decoration: none !important;
  text-transform:  none !important;
  letter-spacing:  .02em !important;
  white-space:     nowrap;
  line-height:     1.4;
  transition:      color .15s ease !important;
}
.tf-mega-sublink:hover,
.tf-mega-sublink:visited          { color: #000 !important; text-decoration: none !important; }
.tf-mega-subgroup-list--flat .tf-mega-sublink { color: #1a1a1a !important; }

/* ── 6. PANEL 3 — FEATURED IMAGE (RIGHT) ───────────────────────── */

.tf-mega-panel--image {
  flex:     0 0 360px;
  padding:  0 !important;
  overflow: hidden;
  display:  flex;
  align-items: stretch;
}

.tf-mega-image-wrap {
  position: relative;
  width:    100%;
  overflow: hidden;
}

.tf-mega-image {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  display:     block;
  max-width:   none !important; /* beats img { max-width:100% } */
  transition:  transform .4s ease !important;
}

.tf-mega-image-wrap:hover .tf-mega-image { transform: scale(1.02) !important; }

.tf-mega-cta {
  position:        absolute;
  bottom:          22px;
  left:            22px;
  display:         inline-flex !important;
  align-items:     center;
  gap:             6px;
  background:      #fff !important;
  color:           #1a1a1a !important;
  font-family:     'Futura', sans-serif !important;
  font-size:       .72rem !important;
  font-weight:     600 !important;
  letter-spacing:  .1em !important;
  text-transform:  uppercase !important;
  text-decoration: none !important;
  padding:         10px 16px !important;
  line-height:     1;
  transition:      background .15s ease, color .15s ease !important;
}
.tf-mega-cta:hover,
.tf-mega-cta:visited {
  background:      #1a1a1a !important;
  color:           #fff !important;
  text-decoration: none !important;
}
.tf-mega-cta .fa-chevron-right { font-size: .6rem !important; }

/* ── 7. CHEVRON ON PARENT NAV-LINK ──────────────────────────────── */

.nav-link .fa-chevron-down,
.nav-link .far.fa-chevron-down {
  transition:      transform .2s ease !important;
  font-size:       .65rem;
  margin-left:     3px;
  vertical-align:  middle;
}
.nav-item.dropdown.show > .nav-link .fa-chevron-down,
.nav-item.dropdown.show > .nav-link .far.fa-chevron-down {
  transform: rotate(180deg) !important;
}

/* ── 8. HEADER HEIGHT CUSTOM PROPERTY ──────────────────────────── */
/* Updated at runtime by tf-mega-menu.js to the real header bottom  */
:root { --tf-header-height: 80px; }

/* ── 9. HIDE BELOW XL ────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .tf-mega-menu,
  .tf-mega-menu.dropdown-menu,
  .nav-item.dropdown.show > .tf-mega-menu {
    display:        none !important;
    pointer-events: none !important;
  }
}

/* ── 10. HIDE LEAKED NAV CHILDREN ───────────────────────────────
   Belt-and-braces: if the walker outputs child items as bare
   siblings after the mega panel div, hide them via CSS.
   These are the depth-1 items (The Como Edit, Angel, Tables etc.)
   that appear as extra nav-item <li> elements after the .tf-mega-menu div.
   They are valid nav-items but should never show in the top bar.

   Target: any .nav-item that is a sibling AFTER .tf-mega-menu
   inside a parent .nav-item.dropdown                             */

.nav-item.dropdown > .tf-mega-menu ~ .nav-item,
.nav-item.dropdown > .tf-mega-menu ~ li {
  display: none !important;
}

/* Also hide the wrapping <ul> the walker may output at depth 1 */
.nav-item.dropdown > ul.dropdown-menu.sub-menu,
.nav-item.dropdown > ul.sub-menu {
  display: none !important;
}