/* WideBundle marketing site — interactive layer (dropdowns, mobile menu).
   The design itself is inline-styled; this only adds hover/open behaviour that
   the stripped SPA runtime used to provide. */

/* Header dropdowns: hidden by default, open on hover (desktop) or .is-open (JS/mobile) */

/* Invisible hover bridge across the 8px gap between the trigger and the menu.
   As a child of .wb-dd it keeps .wb-dd:hover alive while the cursor travels down,
   so the menu no longer vanishes before you can click a link. */
.wb-dd::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  max-width: 60vw;
  height: 12px;
}

.wb-dd-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  pointer-events: none;
}
.wb-dd:hover .wb-dd-menu,
.wb-dd-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.wb-dd-link:hover { background: #faf3f8; color: #d50067 !important; }

/* keep the caret from wrapping and give the trigger a hover cue */
.wb-dd [data-dropdown-trigger]:hover { color: #d50067; }

/* ============================================================
   Responsive layer. The design ships desktop-only inline styles,
   so mobile overrides use !important to win over inline styles.
   ============================================================ */

/* --- Mobile header menu --- */
.wb-burger { display: none; }
.wb-mnav { display: none; }
.wb-mnav.is-open { display: block; }
.wb-mnav-link {
  display: block;
  padding: 12px 6px;
  font-size: 16px;
  font-weight: 600;
  color: #3b3445;
  border-bottom: 1px solid #f4edf5;
}
.wb-mnav-link:last-of-type { border-bottom: none; }

@media (min-width: 921px) {
  /* never show the mobile panel on desktop, even if left toggled */
  .wb-mnav { display: none !important; }
}

@media (max-width: 920px) {
  .wb-nav-links, .wb-nav-cta { display: none !important; }
  .wb-burger { display: flex !important; }
}

/* --- Mobile body layout --- */
@media (max-width: 768px) {
  /* collapse every inline multi-column grid / CSS-columns block to one column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="columns: 3"], [style*="columns:3"],
  [style*="columns: 2"], [style*="columns:2"] { columns: 1 !important; }

  /* tame the oversized display type so it fits narrow screens */
  h1[style] { font-size: 34px !important; line-height: 1.12 !important; }
  h2[style] { font-size: 26px !important; line-height: 1.2 !important; }
  h3[style] { font-size: 19px !important; }

  /* Heroes: the 84px (72px on legal pages) desktop top padding leaves a big
     hole under the sticky header on a phone. Hero-only pattern on every page. */
  [style*="padding: 84px 32px"], [style*="padding:84px 32px"],
  [style*="padding: 72px 32px"], [style*="padding:72px 32px"] { padding-top: 28px !important; }

  /* One consistent 16px gutter: the section provides it… */
  section[style] { padding-left: 16px !important; padding-right: 16px !important; }
  nav[style] { padding-left: 16px !important; padding-right: 16px !important; }

  /* …and the big inner containers (padding: 90-100px 32px) stop adding a
     second 32px on top of it. Every one sits inside a styled section. */
  [style*="padding: 100px 32px"], [style*="padding: 96px 32px"],
  [style*="padding: 90px 32px"] { padding-left: 0 !important; padding-right: 0 !important; }

  /* Cards (reviews, feature grids, pricing panels…): slim the 26-44px side
     padding so the content gets the width. Vertical rhythm is kept. */
  [style*="padding: 26px"], [style*="padding: 30px"], [style*="padding:30px"],
  [style*="padding:32px"], [style*="padding: 34px"], [style*="padding: 40px"],
  [style*="padding:40px"], [style*="padding:44px"] { padding-left: 18px !important; padding-right: 18px !important; }

  /* FAQ: the question keeps its tap size and the answer drops its 66px
     desktop indent (it aligns under the question text — wasted on a phone). */
  button[data-faq] { padding: 18px 16px !important; }
  [data-faq-panel] > div[style] { padding: 4px 16px 22px !important; }
}