/*!
 * Industries mega menu — revplies.com
 * Extends the site's existing .navbar/.hnav/.dropdown-menu system rather
 * than introducing a parallel one. Tokens below are pulled straight from
 * styles.css (accent #680eda, hover #F5F0FB, dropdown shadow/radius,
 * Space Grotesk) so this reads as part of the same nav, not a bolt-on.
 *
 * Include after styles.css:
 *   <link rel="stylesheet" href="industries-mega-menu.css">
 */

/* Bootstrap's dropdown-toggle caret already renders on "Industries" the
   same way it does on "Who it's For" — no extra markup needed there. */

   .mega-dropdown-menu {
    display: none;
    padding: 0;
  }
  .mega-dropdown-menu.show {
    display: block;
  }
  
  /* ---------------------------------------------------------------- */
  /* "Who it's For" needs the SAME popup pattern as Industries, not just
     the same colors — i.e. positioned via the position:static + full-
     width transparent wrapper technique, with a centered inner card,
     rather than Bootstrap/Popper anchoring a small box under the toggle.
     That means giving its <li> and <div class="dropdown-menu"> the same
     .mega-dropdown / .mega-dropdown-menu classes Industries uses (see
     industries-mega-menu-nav.html for the exact markup diff), then
     wrapping its 3 items in .imm-simple-card — the same "transparent
     wrapper, visible card nested inside" split .imm-desktop uses, just
     sized to its own short content instead of the full 1180px panel. */
  /* ---------------------------------------------------------------- */
  @media (min-width: 992px) {
    .imm-simple-card {
      width: max-content;
      max-width: 320px;
      margin: 10px auto 0;
      padding: 8px;
      background: #fff;
      border: 1px solid #f0ecf9;
      border-radius: 14px;
      box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }
    .imm-simple-card .dropdown-item {
      border-radius: 9px;
    }
  }
  
  /* Fallback only — covers any OTHER plain dropdown on the site that
     hasn't been converted to the .mega-dropdown/.imm-simple-card pattern
     above, so it at least picks up matching colors even without the
     matching position. Once a dropdown adopts the pattern above, this
     selector no longer matches it (it's excluded via :not(.mega-dropdown))
     and can be deleted for that dropdown without side effects. */
  @media (min-width: 992px) {
    .nav-item.dropdown:not(.mega-dropdown) > .dropdown-menu {
      margin-top: 10px;
      padding: 8px;
      background: #fff;
      border: 1px solid #f0ecf9;
      border-radius: 14px;
      box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    }
    .nav-item.dropdown:not(.mega-dropdown) > .dropdown-menu .dropdown-item {
      border-radius: 9px;
    }
  }
  
  /* ---------------------------------------------------------------- */
  /* Desktop (>=992px): position:static on the <li> makes the dropdown's
     position:absolute resolve against <header class="navbar"> (sticky,
     full width) instead of the toggle itself, so the panel becomes a
     full-width shelf under the header — no manual left/right math per
     viewport width.
  
     Requires data-display="static" on the toggle <a> (see
     industries-mega-menu-nav.html) — Bootstrap 4's dropdown uses Popper.js
     by default, which sets its own inline position/transform on the menu
     and would silently override the CSS below. data-display="static"
     tells Bootstrap to skip Popper for this dropdown and let plain CSS
     positioning apply, same technique Bootstrap's own docs use for
     mega menus. */
  /* ---------------------------------------------------------------- */
  @media (min-width: 992px) {
    .mega-dropdown {
      position: static;
    }
    /* This element only positions the box below the header — it carries
       no background/border/shadow of its own, so there's no full-width
       pale shelf around the (visibly smaller) box sitting inside it.
       All the actual chrome lives on .imm-desktop, which is sized to its
       content instead of stretching edge-to-edge. */
    .mega-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
  
    .imm-mobile-list {
      display: none;
    }
  
    .imm-desktop {
      display: grid;
      grid-template-columns: 278px 1fr;
      gap: 0;
      width: calc(100% - 48px);
      max-width: 1180px;
      margin: 10px auto 0;
      background: #fff;
      border: 1px solid #f0ecf9;
      border-radius: 14px;
      box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
      overflow: hidden;
      min-height: 300px;
    }
  
    .imm-rail {
      background: #faf9f8;
      border-right: 1px solid #f0ecf9;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .imm-rail-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      border: none;
      background: transparent;
      padding: 8px 12px;
      border-radius: 9px;
      text-align: left;
      cursor: pointer;
      /* Same type as .dropdown-item under "Who it's For" at this width:
         16px / 500 / #444 / Space Grotesk (computed off the live site) —
         kept identical at every level below so the whole mega menu reads
         as one menu, not three differently-sized ones. */
      font-family: "Space Grotesk", sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #444;
    }
    .imm-rail-item:hover,
    .imm-rail-item:focus-visible {
      background: #f5f0fb;
      outline: none;
    }
    .imm-rail-item.active {
      background: #f5f0fb;
      color: #680eda;
    }
    .imm-rail-name {
      flex: 1 1 auto;
      min-width: 0;
    }
  
    .imm-panel {
      padding: 22px 28px 24px;
    }
    .imm-panel-head {
      margin-bottom: 16px;
    }
    .imm-panel-head h4 {
      font-family: "Space Grotesk", sans-serif;
      font-weight: 700;
      font-size: 18px;
      margin: 0;
    }
    /* The industry name is the link to its pillar page — no separate
       "View X page →" CTA. */
    .imm-panel-head h4 a {
      color: #1f1f1f;
    }
    .imm-panel-head h4 a:hover {
      color: #680eda;
    }
    .imm-cluster-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px 24px;
    }
    .imm-cluster-grid a {
      display: block;
      /* Same 16px/500/#444 Space Grotesk as .imm-rail-item above and
         .dropdown-item on the live site — the cluster links are a second
         level of the same menu, not a smaller footnote of it. */
      font-family: "Space Grotesk", sans-serif;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #444;
      padding: 6px 0;
      border-bottom: 1px solid #f4f1fa;
    }
    .imm-cluster-grid a:hover {
      color: #680eda;
    }
  }
  
  @media (min-width: 992px) and (max-width: 1181px) {
    .imm-desktop {
      grid-template-columns: 210px 1fr;
    }
    .imm-cluster-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .imm-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  
  /* ---------------------------------------------------------------- */
  /* Mobile (<992px): the "Industries" dropdown already inherits
     .hnav .dropdown-menu { position:static; background:transparent;
     opacity/max-height transition; } from styles.css — the same rule
     that flattens "Who it's For". This block only styles what's new:
     the nested pillar -> cluster accordion. */
  /* ---------------------------------------------------------------- */
  @media (max-width: 991px) {
    .imm-desktop {
      display: none;
    }
  
    .imm-mobile-list {
      display: block;
    }
  
    /* styles.css caps .hnav .dropdown-menu.show at max-height:300px, sized
       for "Who it's For"'s 3 items. Industries has 8 pillar rows before any
       cluster is even expanded, so that cap clips it and the following
       nav rows ("Who it's For", "Pricing"...) render on top of the
       overflow instead of below it. Same specificity + !important so this
       wins regardless of stylesheet order. */
    .hnav .mega-dropdown-menu.show {
      max-height: none !important;
    }
  
    .imm-mob-row {
      display: flex;
      align-items: stretch;
      border-bottom: 1px solid #eee;
    }
    .imm-mob-link {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 8px;
      min-height: 44px;
      /* Same 14px/500/#666 Space Grotesk as .hnav .dropdown-item at this
         width (the "Small Businesses" rows under "Who it's For") — kept
         identical on .imm-mob-sub a below too. */
      font-family: "Space Grotesk", sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #666;
    }
    .imm-mob-link:hover,
    .imm-mob-link:active {
      color: #680eda;
    }
    .imm-mob-caret {
      flex: 0 0 auto;
      width: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      border-left: 1px solid #eee;
      color: #999;
      cursor: pointer;
    }
    .imm-mob-caret svg {
      width: 14px;
      height: 14px;
      transition: transform 0.2s ease;
    }
    .imm-mob-caret.open svg {
      transform: rotate(180deg);
    }
    .imm-mob-caret:hover {
      color: #680eda;
    }
  
    .imm-mob-sub {
      display: none;
      flex-direction: column;
      padding: 4px 8px 10px 34px;
    }
    .imm-mob-sub.open {
      display: flex;
    }
    .imm-mob-sub a {
      font-family: "Space Grotesk", sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: #666;
      padding: 8px 6px;
    }
    .imm-mob-sub a:hover,
    .imm-mob-sub a:active {
      color: #680eda;
    }
  }