/*
 * MegaTech (mega Figma + Webflow template) — page-scoped native styles.
 * Loaded only by WEBSITE/megatech-figma-and-webflow-template/index.php.
 *
 * Replaces the Webflow IX2 / webflow.js layer for this route:
 *   - native button variants (mega / mega-white) extracted from the exported variant rules
 *   - native CSS marquees (hero 3-column vertical, CTA 2-column vertical; horizontal on small screens)
 *   - grid placements that previously lived on generated #w-node ids
 *   - sticky section navbar positioning
 * Scoped under .megatech-page so nothing leaks to other routes.
 */

/* ============================================================
   1. Native button variants (were .btn:where(.w-variant-*))
   ============================================================ */
.megatech-page .btn.btn--mega {
  background-image: linear-gradient(0deg, #166bff, #71a5ff);
  border-color: #3a82ff;
  box-shadow: 0 1px 2px #1f305414, 0 3px 12px #337aff2e;
}

.megatech-page .btn.btn--mega-white {
  background-color: var(--new--neutral--color-100);
  color: #166bff;
  background-image: none;
  border-color: #3a82ff;
}

.megatech-page .btn.btn--mega-white:hover {
  color: #fff;
  background-color: #041127;
}

.megatech-page .btn.btn--mega-white .btn__dot {
  background-color: var(--new--secondary--megatech-accent-color);
}

/* ============================================================
   2. Grid placements (were generated #w-node ids)
   ============================================================ */
.megatech-page .megatech-pages-grid .mt-grid-3-2-4-3 { grid-area: 3 / 2 / 4 / 3; }
.megatech-page .megatech-pages-grid .mt-grid-4-2-5-3 { grid-area: 4 / 2 / 5 / 3; }
.megatech-page .megatech-pages-grid .mt-grid-2-2-3-3 { grid-area: 2 / 2 / 3 / 3; }

/* Template-asset images stretched to fill their card row (was align-self: stretch). */
.megatech-page .mt-asset-img { align-self: stretch; }

@media screen and (max-width: 991px) {
  /* On tablet/mobile, text blocks read before their paired image (was order: -9999). */
  .megatech-page .mt-order-first { order: -9999; }
}

@media screen and (max-width: 767px) {
  /* Generated grid-area placements collapse to natural flow on mobile. */
  .megatech-page .megatech-pages-grid .mt-grid-3-2-4-3,
  .megatech-page .megatech-pages-grid .mt-grid-4-2-5-3,
  .megatech-page .megatech-pages-grid .mt-grid-2-2-3-3 { grid-area: auto; }
}

/* ============================================================
   3. Native marquees (replace Webflow IX2 loops)
   Each column holds 3 identical item sets, so moving exactly
   one third loops seamlessly. Columns alternate direction.
   ============================================================ */
.megatech-page .vertical-marquee-column { will-change: transform; }

/* --- Hero marquee: vertical on desktop/tablet --- */
@media screen and (min-width: 768px) {
  .megatech-page .megatech-vertical-marquee-container .vertical-marquee-column {
    animation: mt-marquee-up 48s linear infinite;
  }
  .megatech-page .megatech-vertical-marquee-container .vertical-marquee-column:nth-child(2) {
    animation-name: mt-marquee-down;
    animation-duration: 56s;
  }
  .megatech-page .megatech-vertical-marquee-container .vertical-marquee-column:nth-child(3) {
    animation-duration: 52s;
  }
}

/* --- Hero marquee: horizontal on mobile (.horizontal-mbl) --- */
@media screen and (max-width: 767px) {
  .megatech-page .megatech-vertical-marquee-container .vertical-marquee-column {
    animation: mt-marquee-left 40s linear infinite;
  }
  .megatech-page .megatech-vertical-marquee-container .vertical-marquee-column:nth-child(2) {
    animation-name: mt-marquee-right;
    animation-duration: 48s;
  }
}

/* --- CTA marquee: faithful to the original. A rotated panel (15deg desktop /
       5deg tablet, owned by the exported CSS) whose two columns scroll
       VERTICALLY on desktop and HORIZONTALLY on tablet/mobile (.horizontal-tablet),
       seamlessly (3 identical sets -> move one third). The container's own
       transform/layout from the exported CSS is left untouched. --- */
/* Keep the panel upright (no tilt) — only remove the rotation, leaving the
   grid layout from the exported CSS untouched so nothing breaks. */
.megatech-page .megatech-cta-right-pages { transform: none; }

@media screen and (min-width: 992px) {
  .megatech-page .megatech-cta-right-pages .vertical-marquee-column {
    animation: mt-marquee-up 50s linear infinite;
  }
  .megatech-page .megatech-cta-right-pages .vertical-marquee-column:nth-child(2) {
    animation-name: mt-marquee-down;
    animation-duration: 60s;
  }
}
@media screen and (max-width: 991px) {
  .megatech-page .megatech-cta-right-pages .vertical-marquee-column {
    animation: mt-marquee-left 44s linear infinite;
  }
  .megatech-page .megatech-cta-right-pages .vertical-marquee-column:nth-child(2) {
    animation-name: mt-marquee-right;
    animation-duration: 52s;
  }
}

@keyframes mt-marquee-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -33.3333%, 0); }
}
@keyframes mt-marquee-down {
  from { transform: translate3d(0, -33.3333%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes mt-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}
@keyframes mt-marquee-right {
  from { transform: translate3d(-33.3333%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .megatech-page .vertical-marquee-column { animation: none !important; }
}

/* ============================================================
   4. Sticky section navbar
   (was an IX2-revealed Webflow w-nav bar)
   ============================================================ */
.megatech-page .megatech-sticky-navbar {
  position: sticky;
  top: 16px;
  z-index: 50;
}

/* Mobile collapsed menu: shown when the hamburger toggles .is-open. */
@media screen and (max-width: 991px) {
  .megatech-page .megatech-navigation-links-container {
    display: none;
  }
  .megatech-page .megatech-navigation-links-container.is-open {
    display: flex;
  }
}

/* ============================================================
   5. "Preview on" secondary dropdown (native open/close)
   The list also carries .w-dropdown-list, so Webflow base CSS
   hides it; these rules make the contract explicit and scoped.
   ============================================================ */
/* Absolutely-positioned list; animated open/close via opacity + slide
   (no layout reflow) so it eases in and out like the original. */
.megatech-page .secondary-btn-dropdown-list {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  pointer-events: none;
}
.megatech-page .secondary-btn-dropdown-list.w--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Keep each option on a single line. */
.megatech-page .secondary-btn-dropdown .dropdown-link-icon-left {
  white-space: nowrap;
}

/* ============================================================
   6. Tabs — make the active pane visible without webflow.js.
   ============================================================ */
.megatech-page .w-tab-pane.w--tab-active {
  display: block;
}

/* ============================================================
   7. Review-feedback fixes
   ============================================================ */

/* (1) Header renders in normal flow (the original page is not an absolute overlay),
   so the hero no longer slides under the header. */
.megatech-page .header-position-absolute { position: static; }

/* (3) "Why you should buy" CTA buttons align left, matching the original. */
.megatech-page .why-buy-our-templates-grid .btn-row { justify-content: flex-start; }

/* (4) Pages-inside thumbnails get a full 16px rounded corner on every side. */
.megatech-page .megatech-pages-grid .megatech-link-image-wrapper {
  border-radius: 16px;
  overflow: hidden;
}
.megatech-page .megatech-pages-grid .megatech-link-image {
  border-radius: 16px;
}

/* (5) No border/outline flash when a Pages tab pill is clicked.
   A transparent base border keeps the box model identical to the active
   state (which adds a 1px border), and the mouse-focus outline is removed
   while keyboard focus-visible is preserved. */
.megatech-page .megatech-tab-link {
  border: 1px solid transparent;
  transition: transform .3s, background-color .3s, color .3s;
}
.megatech-page .megatech-tab-link:focus:not(:focus-visible) { outline: none; }

/* (6) Force the 12 Pages tabs into two balanced rows of six (a flex line-break
   element is injected after the 6th pill in the markup), so "Extra pages"
   joins the second row instead of being orphaned on a third. */
.megatech-page .megatech-tabs-menu-center { max-width: 1000px; }
.megatech-page .mt-tab-break {
  flex-basis: 100%;
  width: 100%;
  height: 0;
  margin: 0;
}

/* (2/10) The "Preview on" card sizes to its (single-line) content so the
   option labels are never clipped. */
.megatech-page .secondary-btn-dropdown .dropdown-link-icon-left { white-space: nowrap; }
.megatech-page .secondary-btn-dropdown .crd {
  width: max-content;
  min-width: 290px;
}

/* On tablet/mobile the dropdown sizes to its content but stays on screen:
   it anchors to the side of its toggle and is capped to the viewport width. */
@media screen and (max-width: 991px) {
  .megatech-page .secondary-btn-dropdown-list {
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 40px);
    transform: none;
  }
  .megatech-page .secondary-btn-dropdown-list:not(.left-mbl) {
    left: auto;
    right: 0;
  }
  .megatech-page .secondary-btn-dropdown-list.left-mbl {
    left: 0;
    right: auto;
  }
  .megatech-page .secondary-btn-dropdown .crd {
    width: 100%;
    min-width: 0;
  }
}

/* (8) Native hover for the "Preview" / "Preview integration" inline links —
   the trailing arrow slides on hover (was an IX2 interaction). */
.megatech-page .megatech-link-blue .link-icon-right {
  display: inline-block;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.megatech-page .megatech-link-blue:hover .link-icon-right {
  transform: translateX(4px);
}