/* Sico Nav Mega Menu Styles */
.sicosp-desktop-only { display: none; }
@media (min-width: 981px) { /* Divi desktop breakpoint */
  .sicosp-desktop-only { display: block; }
}

.sicosp-mega-wrap {
  position: relative;
  width: 100%;
}

.sicosp-menu-wrap {
  position: relative;
  z-index: 9999;
}

/* Base horizontal styling for the internal WP menu */
.mw-siconav-menu ul.sicosp-main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  align-items: center;
}
.mw-siconav-menu ul.sicosp-main-menu > li {
  list-style: none;
  position: relative; /* needed for the arrow indicator */
  z-index: 20; /* keep above panel so arrow is visible */
}
.mw-siconav-menu ul.sicosp-main-menu > li > a {
  display: block;
  text-decoration: none;
  padding: 24px 16px 22px;
}

/* Red triangle indicator under hovered/active mega menu item */
.mw-siconav-menu ul.sicosp-main-menu > li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px; /* start slightly lower so it can slide up into place */
  width: 0;
  height: 0;
  /* Flip triangle vertically: point DOWN by using border-bottom instead of border-top */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #d21027; /* red triangle pointing down */
  opacity: 0;
  /* Start slightly lower and slide UP on show */
  transform: translateX(-50%) translateY(7px);
  transition: opacity 300ms ease, transform 200ms ease;
  pointer-events: none;
}

/* Show on hover */
.mw-siconav-menu ul.sicosp-main-menu > li:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Show while mega is open on the active trigger item */
.sicosp-mega-wrap.is-open .mw-siconav-menu ul.sicosp-main-menu > li.is-mega-active::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.sicosp-mega-panel {
  /* Use transitions for slide down/up */
  display: flex; /* keep layout so transition works */
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #111;
  color: #fff;
  z-index: 10;
  padding: 0; /* removed padding as requested */
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-100px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 100ms ease, transform 200ms ease, visibility 0s linear 200ms;
  border-top: solid 2px #D21028;
}
/* When open, only the active panel becomes visible */
.sicosp-mega-wrap.is-open .sicosp-mega-panel.is-active {
  opacity: 0.98; /* slight translucency when open */
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
  /* Blur content behind the panel while keeping the panel content sharp */
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* Keep non-active panels hidden even while wrapper is open */
.sicosp-mega-wrap.is-open .sicosp-mega-panel:not(.is-active) {
  opacity: 0;
  transform: translateY(-100px);
  visibility: hidden;
  pointer-events: none;
}

.sicosp-mega-col {
  box-sizing: border-box;
}
.sicosp-mega-col--cats { flex: 1 1 33%; }
.sicosp-mega-col--image { flex: 1 1 34%; min-height: 280px; position: relative; }

.sicosp-cat-list { list-style: none; margin: 0; padding: 0 !important; }
.sicosp-cat-list .sicosp-cat { margin: 0; }
/* ensure no bullets on LI explicitly */
.sicosp-cat-list li.sicosp-cat { list-style: none; }
.sicosp-cat-list .sicosp-cat a {
  color: inherit;
  text-decoration: none;
  display: block; /* fill the column width */
  width: 100%;
  box-sizing: border-box;
  padding: 15px 24px; /* padding around the text */
  transition: background-color 150ms ease, color 150ms ease; /* quick in/out */
  font-family: 'bayon';
  letter-spacing: 2px;
}
.sicosp-cat-list .sicosp-cat a:hover {
  background-color: #2a2a2a; /* dark gray hover */
}

.sicosp-bg-stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
/* Base placeholder layer (lowest z) */
img.sicosp-bg-base {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  z-index: 1;
}
/* When a term is active, hide the base placeholder so it never peeks through during crossfades */
.sicosp-mega-wrap.is-term-active img.sicosp-bg-base { opacity: 0; }
/* Crossfade images container (middle z) */
.sicosp-bg-images { position: absolute; inset: 0; z-index: 2; }
img.sicosp-bg-img {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill/cover the column */
  max-width: none;
  opacity: 1;
}

/* Ken Burns effect controlled by CSS variables set via JS */
img.sicosp-bg-img.sicosp-kb {
  animation: sicosp-kenburns var(--kb-dur, 6s) ease-in-out forwards;
}
@keyframes sicosp-kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(var(--kb-scale, 1.08)); }
}

/* Gradient overlay (above images, below logo) */
.sicosp-gradient-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Low-opacity white glow from logo corner (bottom-right) fading to top-left */
  background: linear-gradient(315deg, rgba(255,255,255,0.75) 0%, rgba(0, 0, 0, 0.2) 65%);
}

.sicosp-logo-overlay {
  position: absolute;
  right: 12px; bottom: 12px;
  max-width: 20%;
  pointer-events: none;
  z-index: 4;
}
.sicosp-logo-overlay svg { width: 100%; height: auto; display: block; }

/* Allow Divi design tab to control typical styles; keep minimal defaults */
.sicosp-mega-panel {
  border-radius: var(--et-border-radius, 0);
}
.sicosp-mega-panel { box-shadow: var(--et-box-shadow, none); }




.sicosp-menu-wrap.mw-siconav-menu {
  background: #000000;
}

.sicosp-menu-wrap.mw-siconav-menu ul#menu-main-menu {
  padding: 0 40px !important;
  justify-content: space-around;
}


.sicosp-menu-wrap.mw-siconav-menu ul#menu-main-menu a{
  color: white;
}

.sicosp-cat-list li.sicosp-cat:first-child > a {
  /* add a little extra space at the very top of each column */
  padding-top: 20px; /* base 10px + 5px as requested */
}