/* =========================================================
   CCK Mega Menu (Blocksy) — CLEAN FINAL (de-duplicated)
   - 4-column mega menu
   - no ghost gap / no arrows
   - promo banner as full-width footer inside the same card
   - consistent WHITE links area height
   - promo height consistent on desktop
   - CTA column(s) supported (cck-mega-cta-column)
========================================================= */

/* Make the mega dropdown behave like a full-width panel */
header [data-id="menu"] .menu > li.menu-item-has-children{
  position: static !important;
}

/* Main dropdown panel */
header [data-id="menu"] .menu > li > .sub-menu{
  left: 0 !important;
  right: 0 !important;
  width: min(1400px, calc(100vw - 64px)) !important;
  margin: 0 auto !important;

  padding: 26px 34px 0 !important; /* bottom padding removed so promo is true bottom */
  background: #fff !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 14px 42px rgba(0,0,0,.14),
    0 0 0 1px rgba(0,0,0,.08) inset !important;

  border-radius: 0 0 12px 12px !important;
  overflow: hidden !important;
  z-index: 99999 !important;

  display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 26px 48px !important;

  /* WHITE links area consistency (row 1), promo row (row 2) */
 --cck-mega-links-min: 0px;
grid-template-rows: auto auto !important;
}
/* Make the WHITE links area (row 1) a consistent height */
header [data-id="menu"] .menu > li > .sub-menu{
  --cck-mega-links-min: 320px;          /* tweak this */

  align-content: start;
}
/* Remove Blocksy "ghost" items that create the top gap */
header [data-id="menu"] li.dropdown-desktop-ghost,
header [data-id="menu"] button.ct-toggle-dropdown-desktop-ghost{
  display: none !important;
}
header [data-id="menu"] .menu > li > .sub-menu{
  --cck-mega-links-min: 220px; /* tweak */
  grid-template-rows: minmax(var(--cck-mega-links-min), auto) auto !important;
  align-content: start;
}
/* Each 2nd-level item is a column wrapper */
header [data-id="menu"] .menu > li > .sub-menu > li{
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

/* Column heading */
header [data-id="menu"] .menu > li > .sub-menu > li > a{
  display: block !important;
  width: 100% !important;
  margin: 0 0 0px 0 !important;
  padding: 0 !important;

  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #111 !important;

  white-space: normal !important;
}

/* Kill the right/orange arrows/icons on headings */
header [data-id="menu"] .menu > li > .sub-menu > li.menu-item-has-children > a::after,
header [data-id="menu"] .menu > li > .sub-menu > li.menu-item-has-children > a .ct-icon,
header [data-id="menu"] .menu > li > .sub-menu > li.menu-item-has-children > a svg{
  display: none !important;
  content: none !important;
}

/* 3rd level list under heading */
header [data-id="menu"] .menu > li > .sub-menu > li > .sub-menu{
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;

  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Third-level links */
header [data-id="menu"] .menu > li > .sub-menu > li > .sub-menu > li > a{
  display: block !important;
  padding: 0 !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #444 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

header [data-id="menu"] .menu > li > .sub-menu a:hover{
  text-decoration: underline !important;
}

/* =========================
   Promo banner footer
========================= */

/* Promo item spans full grid width and always sits on row 2 */
header [data-id="menu"] .sub-menu > li.cck-mega-promo{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin: 14px -34px -26px !important; /* pull to edges + bottom, slightly tighter top */
  padding: 0 !important;
}

/* Remove default spacing on the promo link */
header [data-id="menu"] .sub-menu > li.cck-mega-promo > a{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Banner itself */
header [data-id="menu"] .sub-menu > li.cck-mega-promo > a.cck-mega-promo__inner{
  position: relative;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 18px;

  width: 100% !important;
  padding: 34px 34px !important;
  border-radius: 0 !important;
  overflow: hidden !important;

  background-image: var(--cck-promo-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none !important;

  /* Desktop: lock height so all promos feel identical */
  height: 300px !important;
}

/* Overlay */
header [data-id="menu"] .sub-menu > li.cck-mega-promo > a.cck-mega-promo__inner::before{
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.55) .5,
    rgba(0,0,0,.25) 55%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
}

/* Promo text + button layering */
.cck-mega-promo__text,
.cck-mega-promo__btn{
  position: relative;
  z-index: 1;
}

.cck-mega-promo__headline{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 6px 0;
}

.cck-mega-promo__subhead{
  color: rgba(255,255,255,.85);
  font-size: 14px;
  line-height: 1.35;
  margin: 20px 0 0 0;
  max-width: 60ch;
  font-weight: normal !important;
}

.cck-mega-promo__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 20px;
  padding: 10px 14px;
  border-radius: 5px;
  background: #fff;
  color: #111;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
margin-bottom:20px;
}

.cck-mega-promo__icon{
  margin-bottom: 10px;
}
.cck-mega-promo__icon img{
  display: block;
  width: 200px;
  height: auto;
}

/* Keep promo CTA button consistently placed */
header [data-id="menu"] .sub-menu > li.cck-mega-promo > a.cck-mega-promo__inner{
  justify-content: flex-start !important;
}
header [data-id="menu"] .sub-menu > li.cck-mega-promo .cck-mega-promo__btn{
  margin-top: auto !important;
}

/* =========================
   CTA column(s)
========================= */

/* The CTA column is still a normal column on row 1 */
header [data-id="menu"] .menu > li > .sub-menu > li.cck-mega-cta-column{
  grid-row: 1 !important;
  align-self: start !important;
}

/* Hide the default heading link for CTA columns (we render a custom card) */
header [data-id="menu"] .menu > li > .sub-menu > li.cck-mega-cta-column > a{
  display: none !important;
}

/* The card */
header [data-id="menu"] .cck-mega-cta__card{
  width: 100%;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
  padding: 16px;
}

/* Text */
header [data-id="menu"] .cck-mega-cta__kicker{
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #d35400;
  margin: 0 0 6px 0;
}

header [data-id="menu"] .cck-mega-cta__headline{
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  color: #111;
  margin: 0 0 6px 0;
}

header [data-id="menu"] .cck-mega-cta__subhead{
  font-size: 13px;
  line-height: 1.35;
  color: #444;
  margin: 0 0 12px 0;
}

/* Buttons */
header [data-id="menu"] .cck-mega-cta__btns{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

header [data-id="menu"] .cck-mega-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: #111;
  color: #fff !important;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none !important;
  text-align: center;
}



/* Responsive columns + sizing */
@media (max-width: 1100px){
  header [data-id="menu"] .menu > li > .sub-menu{
    grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
    --cck-mega-links-min: 200px;
  }
}

@media (max-width: 820px){
  header [data-id="menu"] .menu > li > .sub-menu{
    grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
    width: calc(100vw - 24px) !important;
    padding: 18px 16px 0 !important;
    --cck-mega-links-min: 0px;
  }

  header [data-id="menu"] .sub-menu > li.cck-mega-promo{
    margin: 14px -16px -18px !important;
  }

  header [data-id="menu"] .sub-menu > li.cck-mega-promo > a.cck-mega-promo__inner{
    height: auto !important;
    min-height: 200px !important;
    padding: 22px 16px !important;
  }
}

header [data-id="menu"] .sub-menu > li.cck-mega-promo{
  grid-column: 1 / -1 !important;
  grid-row: auto !important;      /* important */
  margin: 14px -34px -26px !important;
  padding: 0 !important;
}
/* Force CTA column to be the LAST column (desktop) */
@media (min-width: 821px){
  header [data-id="menu"] .menu > li > .sub-menu > li.cck-mega-cta-column{
    grid-column: -2 / -1 !important;  /* last column */
  }
}
.cck-mega-cta__subhead{
  font-size:13px;
  color:#666;
  margin-bottom:14px;
}
header [data-id="menu"] .cck-mega-cta__btn:hover{
  text-decoration: none !important;
  filter: brightness(1.06);
  color:#fff !important;
}