/*
 * kulap-redesign.css
 *
 * Redesign-specific style overrides for the KULAP landing page.
 * This file is intentionally kept separate from the Webflow-managed
 * stylesheets (webflow.css, kulap.webflow.css, normalize.css) so that
 * re-exporting the project from Webflow never overwrites these changes.
 *
 * Loaded after kulap.webflow.css so rules here take precedence via
 * normal CSS cascade / source order.
 *
 * Existing classes are reused wherever possible (.promote-button,
 * .swap-button, .nav-link.menu-bt, .title-heading, .property-title /
 * .property-detail, .license-heading / .license-detail, .w-col-6).
 * The rules below cover only structures that have no existing
 * equivalent in kulap.webflow.css (Requirement 11.2, 11.3).
 */

/* -----------------------------------------------------------------
 * CTA button system: primary (.swap-button, filled gold) and
 * secondary (.nav-link.menu-bt, outline/ghost) redesigned as one
 * matched pair sharing an identical box model everywhere they appear
 * (nav, hero, product sections, comparison cards).
 *
 * Root causes fixed here:
 * 1. Neither button had an explicit font-size. On the scroll-nav
 *    variant this let `.nav-link.nav-scroll` (kulap.webflow.css)
 *    silently shrink the secondary button's text to 13px while the
 *    primary button inherited a different ambient size, so the pair
 *    never matched.
 * 2. `.swap-button.nav-scroll` gets margin-top:5px in kulap.webflow.css,
 *    but `.nav-link.menu-bt.plus.nav-scroll` never matches that rule
 *    (it only has the class `nav-scroll`, not `scroll`), so it kept
 *    the base margin-top:10px — a real 5px vertical offset between
 *    the two CTAs on the dark hero/scroll nav. Fixed below by scoping
 *    both buttons to the same margin-top inside `.nav-menu`.
 * 3. The two buttons had different padding (12px/28px vs 11px/20px)
 *    and only the primary had a min-width, so same-length labels
 *    rendered as visibly different-sized pills. Fixed by giving both
 *    an identical height/padding/min-width/border-radius, with a
 *    transparent border reserved on the primary button so the 2px
 *    outline border on the secondary button never changes its box
 *    size relative to the filled one.
 * 4. `.nav-link.menu-bt` inherited `.nav-link`'s hyperlink styling
 *    (underline-prone, blue hover). Neutralized with an explicit,
 *    !important text-decoration reset and this file's own color/hover
 *    rules instead of relying on the shared .nav-link cascade.
 * ----------------------------------------------------------------- */
.swap-button,
.nav-link.menu-bt {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 44px;
  min-width: 150px;
  padding: 0 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3px;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
}

.swap-button:hover,
.swap-button:focus,
.nav-link.menu-bt:hover,
.nav-link.menu-bt:focus {
  text-decoration: none !important;
}

.swap-button .swap-text,
.nav-link.menu-bt .swap-text {
  line-height: 1;
  text-decoration: none;
}

/* Primary CTA: filled gold pill with dark text. The 2px transparent
   border above reserves the same box-model space the secondary
   button's visible border uses, so both pills stay exactly the same
   size at any shared width/height. */
.swap-button {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--black-2);
}

.swap-button:hover,
.swap-button:focus-visible {
  filter: brightness(0.94);
}

/* Secondary CTA: ghost/outline variant of the same pill, gold on dark
   backgrounds (nav, hero, Kulap Swap section) by default. Colors are
   declared explicitly here rather than left to `.nav-link.menu-bt`'s
   defaults in kulap.webflow.css, so this file is the single source of
   truth for the button's appearance. */
.nav-link.menu-bt {
  background-color: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.nav-link.menu-bt:hover,
.nav-link.menu-bt:focus-visible {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--black-2);
}

/* Keep both CTAs vertically aligned to the same baseline inside the
   horizontal desktop navbar regardless of which nav-variant/scroll
   modifier classes are present (see root cause 2 above). Scoping to
   `.nav-menu` gives this rule the specificity to win over both
   `.swap-button.nav-scroll` and the base `.nav-link.menu-bt`
   margin-top in kulap.webflow.css. Scoped to >=992px because below
   that the nav collapses into a stacked dropdown (kulap.webflow.css
   `data-collapse="medium"`), where the original margin-top values
   provide intentional spacing between stacked menu items rather than
   causing side-by-side misalignment. */
@media screen and (min-width: 992px) {
  .nav-menu .swap-button,
  .nav-menu .nav-link.menu-bt {
    vertical-align: middle;
    margin-top: 0;
  }
}

/* -----------------------------------------------------------------
 * Hero CTA row
 * Lays the two hero CTA buttons (.swap-button / .nav-link.menu-bt.plus)
 * side by side with spacing, wrapping to a stacked layout on narrow
 * viewports. Requirements: 2.1, 2.2, 2.3, 6.1, 8.1, 8.2
 * ----------------------------------------------------------------- */
.hero-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

/* The base .swap-button / .nav-link.menu-bt rules carry nav-specific
   left/top margins (designed for sitting inline in the navbar). Reset
   those margins here so the buttons align cleanly inside the flex row
   instead of inheriting nav positioning. */
.hero-cta-row .swap-button,
.hero-cta-row .nav-link.menu-bt {
  margin-top: 0;
  margin-left: 0;
}

@media screen and (max-width: 479px) {
  .hero-cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -----------------------------------------------------------------
 * Kulap+ nav CTA spacing modifier
 * `.nav-link.menu-bt` already provides the gold outline pill style;
 * `.plus` only tightens the spacing so it pairs visually next to the
 * filled `.swap-button` CTA in the nav. Requirements: 1.1, 6.3
 * ----------------------------------------------------------------- */
.nav-link.menu-bt.plus {
  margin-left: 15px;
}

.nav-link.menu-bt.plus.nav-scroll {
  margin-left: 10px;
}

/* -----------------------------------------------------------------
 * Product sections (Kulap Swap / Kulap+)
 * Two-column product pitch blocks with alternating backgrounds so the
 * sections read as distinct, separated blocks (Requirement 3.4, 4.5)
 * while sharing identical spacing/typography (Requirement 6.5).
 * ----------------------------------------------------------------- */
.product-section {
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
}

.product-section .w-row {
  align-items: center;
}

/* Kulap Swap: dark Blue_Gradient_Theme panel (gradient-on-photo,
   consistent with .section-home / .section-roadmap treatment). */
.product-section.swap {
  background-image: linear-gradient(131deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)), url('../images/background-home.svg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  background-color: var(--medium-blue);
  color: var(--white);
}

/* Kulap+: complementary light panel, giving an obvious visual
   boundary against the Swap section above it without a heavy border. */
.product-section.plus {
  background-color: var(--white-2);
}

.product-benefit-list {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  font-family: Roboto, sans-serif;
}

.product-benefit-list li {
  margin-bottom: 10px;
  line-height: 25px;
}

/* Reset the nav-oriented left margin on CTAs reused inside a product
   section column so they sit flush with the paragraph copy above. */
.product-section .swap-button,
.product-section .nav-link.menu-bt {
  margin-top: 25px;
  margin-left: 0;
}

/* -----------------------------------------------------------------
 * Differentiation / comparison section
 * Side-by-side comparison cards built on the existing .w-col-6 grid,
 * which already stacks to full width below 991px. Requirements: 5.1,
 * 5.2, 5.3, 5.4, 5.5
 * ----------------------------------------------------------------- */
.section-compare {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: var(--white-2);
}

.compare-row {
  margin-top: 50px;
}

.compare-col {
  background-color: var(--white);
  border-radius: 10px;
  padding: 40px 8%;
  text-align: center;
}

/* Center the reused CTA buttons within each comparison card instead of
   the nav-oriented left margin they carry by default. `.compare-col`
   is already `text-align: center`, and the shared button rule above
   is `inline-flex` (shrink-to-fit), so centering falls out of that
   without forcing `display: block` — which would otherwise stretch
   the pill to the card's full width and break the matched-pair sizing
   required everywhere else these buttons appear. */
.compare-col .swap-button,
.compare-col .nav-link.menu-bt {
  margin-top: 20px;
  margin-left: 0;
  float: none;
}

/* -----------------------------------------------------------------
 * Contrast fix: gold outline buttons on light backgrounds
 * The base .nav-link.menu-bt uses gold (#FFCF00) text/border, which
 * has insufficient contrast (< 3:1) against --white-2 / --white
 * backgrounds. On light sections, switch to --medium-blue for the
 * border/text to maintain brand identity while meeting contrast
 * requirements. The hover state keeps the gold fill + white text
 * (sufficient contrast). Requirements: 6.3, 9.4
 * ----------------------------------------------------------------- */
.product-section.plus .nav-link.menu-bt,
.section-compare .nav-link.menu-bt {
  border-color: var(--medium-blue);
  color: var(--medium-blue);
}

.product-section.plus .nav-link.menu-bt:hover,
.product-section.plus .nav-link.menu-bt:focus-visible,
.section-compare .nav-link.menu-bt:hover,
.section-compare .nav-link.menu-bt:focus-visible {
  background-color: var(--medium-blue);
  border-color: var(--medium-blue);
  color: var(--white);
}

/* -----------------------------------------------------------------
 * Responsive: no horizontal scroll (Requirement 8.1)
 * Prevent any content overflow from producing a horizontal scrollbar
 * at any viewport width from 375px to 1440px. The page is laid out
 * with relative/percentage widths and constrained containers, but a
 * single wide element (e.g. a decoration or animation transform) could
 * still produce overflow. This safety rule clips at the body level.
 * ----------------------------------------------------------------- */
body {
  overflow-x: hidden;
}

/* -----------------------------------------------------------------
 * Responsive: mobile touch targets & stacking
 * On mobile viewports (≤767px), CTA buttons must maintain a minimum
 * 44x44px tap target per WCAG 2.5.5 / Requirement 8.3. The shared
 * button rule above already sets height:44px, so this media query
 * only needs to reset the nav-specific left margin so buttons don't
 * shift when the mobile nav menu stacks them.
 *
 * Column stacking (Requirement 8.2) is already handled by webflow.css
 * which sets .w-col { width: 100% } below 767px, so .product-section
 * image/text columns and .compare-col pairs stack automatically.
 * ----------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .nav-link.menu-bt.plus {
    margin-left: 0;
  }

  /* Product section columns: ensure they stack cleanly with spacing */
  .product-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .product-section .w-col {
    padding-bottom: 20px;
  }

  /* Comparison columns: add vertical spacing when stacked */
  .compare-col {
    margin-bottom: 30px;
  }
}

/* -----------------------------------------------------------------
 * Focus states: visible keyboard focus indicators
 * Neither kulap.webflow.css nor webflow.css define :focus styles for
 * links/buttons (only for form inputs and sliders). Add a visible
 * focus ring for all interactive CTAs so keyboard users can track
 * their position. Uses :focus-visible to avoid showing the ring on
 * mouse clicks while ensuring keyboard navigation remains visible.
 * Requirement 9.3
 * ----------------------------------------------------------------- */
.swap-button:focus-visible,
.nav-link.menu-bt:focus-visible,
.promote-button:focus-visible,
.nav-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Fallback for browsers that don't support :focus-visible */
@supports not selector(:focus-visible) {
  .swap-button:focus,
  .nav-link.menu-bt:focus,
  .promote-button:focus,
  .nav-link:focus {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
  }
}