/* ---- Mega image menu panel (Kochi / Trivandrum project dropdowns) ---- */
.mega-image-menu {
  position: absolute;
  top: 110%;
  left: -220px;
  width: max-content; /* shrinks to the project list + image */
  max-width: 90vw;
  background: #F7F4EC; /* light cream instead of white */
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 20px;
  display: flex;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s;
  z-index: 50;
}

/* Driven by mega-menu.js's hover-intent timers (a "mega-open" class), not
   a raw ":hover" - Kochi and Trivandrum sit right next to each other, and
   this panel is much wider than either trigger, so reaching it requires
   moving the mouse diagonally across the neighboring item. A raw :hover
   would instantly flip to that neighbor's panel mid-transit; the delay
   lets a quick pass-through not count. */
.main-menu ul li.mega-open .mega-image-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The visibility/opacity override for the list below MUST stay scoped to
   ".mega-open" - CSS lets a descendant's explicit "visibility: visible"
   override an ancestor's "visibility: hidden" (unlike display/opacity,
   which can't be escaped that way). An unconditional override here made
   the CLOSED item's list invisible-but-still-hoverable, silently
   overlapping and stealing hover from whichever panel was actually open. */
.main-menu ul li.mega-open .mega-image-list {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Projects > Trivandrum / Cochin: the city sits inside the "Projects" dropdown, so its
   image panel flies out to the RIGHT of the dropdown instead of dropping down under
   a top-level item. The panel follows the dropdown's visibility (hidden until the
   Projects item is hovered) and opens with the same hover-intent "mega-open" class. */
.main-menu ul ul li.mega-flyout > .mega-image-menu {
  top: -5px;
  left: 100%;
  margin-left: 0; /* no gap, so the mouse never leaves the menu on its way to the panel */
  transform: translateX(10px);
}

.main-menu ul ul li.mega-open.mega-flyout > .mega-image-menu {
  transform: translateX(0);
}

/* left project list */
/* Antila's own ".main-menu ul ul" dropdown rule also matches this nested
   <ul> and forces it into its own dropdown layout (absolute position,
   fixed width, accent background, etc.) - reset the non-visibility parts
   of that unconditionally, they're harmless either way. */
.mega-image-menu .mega-image-list {
  position: static !important;
  background: transparent !important;
  left: auto !important;
  top: auto !important;
  flex: 0 0 auto;
  width: max-content !important; /* as wide as the longest project name (beats the theme's 235px first-submenu width)... */
  max-width: 280px;  /* ...up to this, then names wrap */
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mega-image-list li {
  display: block !important;
  width: 100%;
  margin: 0 !important;
  text-align: left !important;
  list-style: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mega-image-list li:last-child {
  border-bottom: none;
}

.mega-image-menu .mega-image-list li a {
  display: block;
  width: 100%;
  padding: 16px 20px !important;
  position: relative;
  text-align: left !important;
  color: var(--primary-color) !important;
  text-transform: none;
  font-size: 13px;
}

/* hovering a project name keeps its height (the general dropdown hover rule would change the padding) */
.main-menu .mega-image-menu .mega-image-list li a:hover,
.main-menu .mega-image-menu .mega-image-list li a:focus {
  padding: 16px 20px !important;
}

/* desktop menu: project names in capitals */
.main-menu .mega-image-menu .mega-image-list li a {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.mega-image-list li a span {
  display: inline-block;
  position: relative;
}

.mega-image-list li a span::before {
  position: absolute;
  content: "";
  background-color: var(--accent-color);
  width: 0;
  height: 1.5px;
  border-radius: 10px;
  bottom: -4px;
  left: auto;
  right: 0;
  transition: 0.3s;
}

.mega-image-list li:hover > a span::before,
.mega-image-list li.active > a span::before {
  width: 100%;
  left: 0;
  right: auto;
}

.mega-image-list .txt-grey {
  color: #8f9aa5;
}

/* right image preview: 220px wide; at least 300px tall, and as tall as the project list beside it
   (the panel is a flex row, so the preview stretches to the list height - which itself stops at
   the list max-height, 460px, and scrolls) */
.mega-image-preview {
  flex: 0 0 220px;
  width: 220px;
  min-height: 300px;
  align-self: stretch;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-color);
  position: relative;
}

.mega-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mega-image-preview img.is-active {
  opacity: 1;
}

/* project status (New Launch / Ongoing / ...) as a tab hanging from the top centre of the preview
   image: flat top against the edge, rounded bottom corners, each word capitalised */
.mega-preview-status {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 8px 20px;
  border-radius: 0 0 10px 10px;
  text-transform: uppercase;
  text-align: center;
  width: max-content; /* as wide as the text; a long status (e.g. "OC Obtained - Ongoing") wraps */
  background: rgba(0, 0, 0, 0.55); /* see-through black, same as the location strip */
  color: var(--white-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2em;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.mega-preview-status.is-active {
  opacity: 1;
}

/* project location along the bottom of the preview image, on a see-through black strip */
.mega-preview-location {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white-color);
  font-size: 13px;
  line-height: 1.35em;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.mega-preview-location i {
  flex-shrink: 0;
  margin-top: 2px;
  color: #ceba82;
  font-size: 12px;
}

.mega-preview-location.is-active {
  opacity: 1;
}

@media (max-width: 1400px) {
  .mega-image-menu {
    left: -180px;
  }
}

@media (max-width: 1199px) {
  .mega-image-menu {
    left: -150px;
    gap: 15px;
  }

  .mega-image-list {
    flex: 0 0 auto;
  }
}

@media (max-width: 991px) {
  .mega-image-menu {
    width: 560px;
    left: -120px;
  }

  .mega-image-list {
    flex: 0 0 210px;
    max-height: 360px;
  }

  .mega-image-list li a {
    padding: 10px 18px !important;
    font-size: 15px;
  }
}

/* Matches the breakpoint where the desktop menu (.main-menu, a Bootstrap
   .navbar-collapse) hides and the slicknav hamburger clone takes over -
   see custom.css's own "@media (max-width: 991px)" header rules. */
@media (max-width: 991px) {
  .mega-image-menu {
    position: static;
    width: 100%;
    max-width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .mega-image-preview {
    display: none;
  }

  .mega-image-list {
    flex: 100%;
    max-height: none;
    width: 100% !important;
    max-width: 100%;
  }

  .mega-image-list li a {
    padding: 12px 18px !important;
  }

  /* Slicknav only auto-detects a <ul> that's a *direct* child of the <li>
     as a collapsible submenu - it can't see our div-wrapped mega menu, so
     it dumps it open and unmanaged inline. mega-menu.js adds its own
     toggle (the .mega-toggle-arrow + "mega-open" class below) to the
     slicknav clone to fix that. The desktop copy (inside .main-menu) is
     never visible at this width anyway, since Bootstrap hides the whole
     .navbar-collapse - so scoping this to .responsive-menu is enough. */
  .responsive-menu .mega-image-menu {
    display: none;
  }

  .responsive-menu li.mega-open > .mega-image-menu {
    display: block;
  }

  /* the arrow is positioned absolute against this li - without this, it
     falls back to the nearest positioned ancestor up the tree (slicknav
     sets none on its own <li>), so every item's arrow stacks in the same
     spot instead of sitting next to its own row */
  .responsive-menu li:has(> .mega-toggle-arrow) {
    position: relative;
  }

  .responsive-menu .mega-toggle-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: var(--primary-color);
    transition: transform 0.3s ease-in-out;
  }

  .responsive-menu li.mega-open .mega-toggle-arrow {
    transform: rotate(180deg);
  }
}