/*
 * custom-fixes.css
 * Persistent overrides applied on top of Webflow-generated CSS.
 * This file is injected by the seo-inject pipeline and survives re-scrapes.
 * Do NOT add anything here that Webflow's CSS already handles correctly.
 */

/* ─── Footer language dropdown — open downward, no trigger overlay ─────────
 * The language switcher sits at the bottom of the footer. We need it to open
 * downward (default) and NOT overlap the trigger button. The default Webflow
 * inset (top: -0.5rem) causes the list to overlap the trigger slightly; use
 * top: 100% instead so the list starts strictly below it.
 * ─────────────────────────────────────────────────────────────────────────── */
.footer-block-2 .wg-dropdown-header {
  position: relative;
}

.footer-block-2 .wg-dd-2-list {
  top: 100% !important;
  bottom: auto !important;
  inset: 100% auto auto 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* ─── Newsletter signup — mobile responsive ────────────────────────────────
 * The HubSpot form is embedded with inline <style> that hardcodes width:460px
 * for the email input and checkbox label, breaking layout on narrow screens.
 * We override those here with higher specificity + !important where needed.
 * ─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Section: restore bottom padding so the language dropdown has room to open
   * downward: 5 languages × ~32px each ≈ 160px, plus ~100px breathing room */
  .footer-dark-2 {
    padding: 40px 20px 280px !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Container: stack title + form vertically, add bottom breathing room */
  .container-43.w-container {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 40px !important;
  }

  .div-block-88 {
    width: 100% !important;
    margin-bottom: 16px;
  }

  .div-block-87 {
    width: 100% !important;
  }

  /* Reduce HubSpot form's default 40px inner padding */
  .hsfc-Step__Content {
    padding: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Tighten row spacing between form fields */
  [data-hsfc-id="Renderer"] {
    --hsf-default-row__vertical-spacing: 8px !important;
    --hsf-default-module__vertical-spacing: 6px !important;
  }

  /* Email input: full width, normal padding */
  .hs-form-html input[type="email"] {
    width: 100% !important;
    padding: 12px 20px !important;
    box-sizing: border-box;
  }

  /* Submit button: full width, stacked below input, no gap */
  .hs-form-html button[type="submit"] {
    position: static !important;
    width: 100% !important;
    margin-top: 8px;
    padding: 12px 18px !important;
  }

  /* Checkbox label: full width, auto height, undo the -28px overlap hack */
  [data-hsfc-id="Renderer"] .hsfc-CheckboxField label {
    width: 100% !important;
    height: auto !important;
    margin-top: 8px !important;
  }
}

/* ─── Newsletter — heading alignment on desktop ────────────────────────────
 * .container-43 uses align-items:center which vertically centres the short
 * heading against the taller HubSpot form, making the heading appear below
 * the input. Switch to flex-start so both align to the top edge.
 * ─────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 768px) {
  .container-43 {
    align-items: flex-start;
  }
}

/* ─── Our Solutions — mobile responsive (business page) ───────────────────
 * Several layout issues on narrow viewports:
 * 1. .div-block-84 inherits a left margin pushing cards off-screen.
 * 2. .div-block-20 card rows have a fixed max-width exceeding viewport.
 * 3. .div-block-83 text container has a hard max-width clipping long
 *    strings like "WHITE LABEL" and "Escrow API Integration".
 * 4. .div-block-86 button row contains two 285px-wide buttons (591px total)
 *    that overflow any phone viewport; they must stack vertically.
 * 5. .container-23 uses align-items:center without constraining child
 *    widths, allowing content to escape the viewport.
 * ─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* Constrain the section container to viewport width */
  .container-23.w-container {
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
  }

  /* Card list: full width, no left offset */
  .div-block-84 {
    width: 100%;
    margin-left: 0 !important;
    box-sizing: border-box;
  }

  /* Each card row: fill available width */
  .div-block-20 {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Text block inside card: fill remaining flex space, wrap long words */
  .div-block-83 {
    flex: 1;
    min-width: 0;
    max-width: none !important;
  }

  /* Product icon: don't shrink when row is narrow */
  .image-34 {
    flex-shrink: 0;
  }

  /* CTA buttons: stack vertically, full width */
  .div-block-86 {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .div-block-86 .button-30 {
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
  }

  /* Intro text and footer text: fill container width */
  .div-block-82 {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .text-block-63 {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* ─── FAQ accordion — fix text indentation on mobile ──────────────────────
 * At ≤991px, Webflow sets white-space: break-spaces on .text-block-37.
 * This preserves the HTML source indentation (leading newline + spaces
 * before <strong>) as visible rendered whitespace, making question text
 * appear indented on the first wrapped line but not on subsequent lines.
 * Reset to normal to collapse the whitespace while still allowing wrapping.
 * ─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .text-block-37 {
    white-space: normal !important;
  }
}

/* ─── Fix deprecated overflow:visible on media elements ──────────────────
 * Chrome 108+ flags overflow:visible on img/video/canvas as deprecated.
 * Third-party scripts (HubSpot, Cookiebot) may inject such rules.
 * Override to use clip instead of visible to suppress the warning.
 * ─────────────────────────────────────────────────────────────────────────── */
img, video, canvas {
  overflow: clip !important;
}

/* ─── Dark-nav pages: fix language selector and Sign-in link colors ──────
 * On pages with a light background (e.g. FAQ) nav links carry .darknav for
 * dark text, but the language-selector label (.text-block-43) and the
 * Sign-in link (.nav-link-3 without .darknav) keep the default white color
 * — making them invisible against a light background.
 *
 * Additionally the globe icon: by default the white globe (wg-flag-ico) is
 * shown and the dark globe (image-48 without .ontop) is hidden.  On light
 * backgrounds we need to swap them.
 *
 * Uses :has() which is baseline-supported in all evergreen browsers.
 * ─────────────────────────────────────────────────────────────────────────── */
/* Dark text colour for language label */
.nav-menu-two-2:has(.nav-link-3.darknav) .text-block-43 {
  color: #1c3964bf;
}

/* Dark text colour for Sign-in (and any other .nav-link-3 not already dark) */
.nav-menu-two-2:has(.nav-link-3.darknav) .nav-link-3:not(.darknav):not(.business) {
  color: #1c3964bf;
}

/* Dark text colour for dropdown language items */
.nav-menu-two-2:has(.nav-link-3.darknav) .wg-dropdown-2-link,
.nav-menu-two-2:has(.nav-link-3.darknav) .text-block-44 {
  color: #1c3964bf;
}

/* Show dark globe, hide white globe on dark-nav pages */
.nav-menu-two-2:has(.nav-link-3.darknav) .wg-flag-ico {
  opacity: 0;
}
.nav-menu-two-2:has(.nav-link-3.darknav) .image-48 {
  opacity: 1;
}

/* Show dark globe in dropdown items (image-49 hidden by default, wg-flag-ico shown) */
.nav-menu-two-2:has(.nav-link-3.darknav) .image-49 {
  opacity: 1;
}
.nav-menu-two-2:has(.nav-link-3.darknav) .wg-dropdown-2-link .wg-flag-ico {
  opacity: 0;
}

/* ─── Scroll-header language dropdown: fix white text on white background ─
 * The scroll header (.container-9-on-scroll) has a white background, but the
 * language dropdown item labels (.text-block-44) default to white text.
 * Override to use the dark .onscroll colour so items remain readable.
 * ─────────────────────────────────────────────────────────────────────────── */
.container-9-on-scroll .text-block-44 {
  color: #1c3964b3;
}
.container-9-on-scroll .text-block-44:hover {
  color: var(--dark-blue);
}

/* ─── Globe icon alignment: anchor icons to their .wg-flag container ──────
 * .wg-flag-ico (white globe) and .image-48 (dark globe) are position:absolute
 * with top:auto;left:auto. Their containing block is .wg-dd-2-togle because
 * Webflow's base CSS gives .w-dropdown-toggle position:relative. The browser
 * calculates a "static position" for these abs-positioned flex children, but
 * that calculation can differ from how in-flow .image-49 renders on dark-nav
 * pages, causing a subtle vertical offset on the home page vs subpages.
 *
 * Fix: make .wg-flag itself position:relative so it becomes the containing
 * block, then pin both icons to top:0;left:0 — matching the in-flow (top of
 * .wg-flag) position that .image-49 naturally occupies on dark-nav pages.
 * ─────────────────────────────────────────────────────────────────────────── */
.wg-flag {
  position: relative;
}
.wg-flag .image-48,
.wg-flag .wg-flag-ico {
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
}

/* ─── LCP performance: Ensure hero is immediately visible ────────────────
 * Webflow IX2 animations temporarily set opacity:0 on elements before
 * playing entrance animations. On throttled mobile CPUs, this delays LCP.
 * Override to ensure the above-fold hero section paints immediately.
 * The visual animation still plays fine (Webflow JS restores opacity via
 * inline !important styles or CSS transitions).
 * ─────────────────────────────────────────────────────────────────────────── */
.with-confidence {
  opacity: 1 !important;
  visibility: visible !important;
}


/* ─── A11y: increase gold link contrast on light background ──────────────
 * #9c7010 on #faf3ed = 4.03:1 (FAIL). Use #8a6200 = 4.99:1 (WCAG AA). */
.text-block-fsa.gold {
  color: #8a6200;
}

/* ─── Fix image-42 aspect ratio (actual image is 146x36, not 146x34) ─── */
/* ─── Also suppress deprecated overflow:visible on img elements ──────── */
.image-42 {
  height: 36px !important;
  overflow: hidden !important;
}
.div-block-43 {
  height: 36px !important;
}

/* ─── Desktop nav: slightly smaller font to fit longer translations ──────
 * Languages like Spanish have long nav labels (e.g. "Preguntas frecuentes",
 * "Acerca de nosotros") that wrap at the default 18px.  Reduce to 15px so
 * all items stay on a single line across all supported languages.
 * ─────────────────────────────────────────────────────────────────────────── */
.nav-menu-two-2 .nav-link-3,
.nav-menu-two-2 .link-9,
.nav-menu-two-2 .text-block-43,
.nav-menu-two-2 .text-block-44 {
  font-size: 14px;
  line-height: 18px;
}

.nav-menu-two-2 {
  gap: 20px;
}

/* ─── Mobile menu: fix language selector text color & compact layout ─────
 * The mobile hamburger menu (.w-nav-button) renders the language dropdown
 * with white text (.text-block-44 / .text-block-43) on a white background.
 * Override to dark blue for readability.  Also tighten spacing and reduce
 * font size so the full language list fits on smaller screens.
 * ─────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  /* Dark text for language selector toggle label and dropdown items */
  .language-selector .text-block-44,
  .language-selector .text-block-43 {
    color: #1c3964b3 !important;
  }

  /* Tighter gap between nav items (was 15px) */
  .nav-menu-two-2 {
    gap: 6px !important;
  }

  /* Smaller font for nav links and language selector (was 18px / line-height 20px) */
  .nav-menu-two-2 .link-9,
  .nav-menu-two-2 .nav-link-3,
  .nav-menu-two-2 .text-block-43,
  .nav-menu-two-2 .text-block-44 {
    font-size: 15px !important;
    line-height: 18px !important;
  }

  /* Reduce logo-to-first-link gap (was 90px / 16px) */
  .nav-menu-two-2 .list-item-16 {
    margin-bottom: 20px !important;
  }
  .nav-menu-two-2 .list-item-9 {
    margin-bottom: 8px !important;
  }

  /* Less top padding on the nav list itself (was 16px) */
  .nav-menu-two-2 {
    padding-top: 8px !important;
  }
}