/* Corrections layered over the Webflow stylesheet -- responsive and contrast.
 *
 * Loaded AFTER vistas-v2.webflow.shared.*.css so these win on equal specificity.
 * Kept in a separate same-origin file on purpose: the Webflow CSS is served from
 * Supabase with a Subresource Integrity hash, so editing it in place means
 * recomputing that hash or the browser blocks the file and the site renders
 * completely unstyled. Nothing here needs an integrity attribute.
 *
 * Injected into every page by ../scripts/add_responsive_fixes.py (idempotent).
 */

/* ---------------------------------------------------------------------------
 * 1. Who We Are: the "Our Foundation" cards overflow the page at load.
 *
 * Webflow parks the three cards at translate3d(+/-100%, 0, 0) as the initial
 * state of a slide-in reveal, and only clears it once the section scrolls into
 * view. Until then -- i.e. from page load until the visitor reaches that
 * section -- card 1 sits one full card-width to the RIGHT of the layout.
 *
 * Measured on www.vistasglobal.com at 375px wide, scrollY 0, straight after
 * load: document scrollWidth 702px against a 375px viewport, i.e. 327px of
 * horizontal overflow.
 *
 * The header and the cookie banner are both position:fixed, so they size
 * against that overflowed containing block rather than the viewport:
 *   - .nav_wrap.mobile stretched to 702px, putting the hamburger at x=650-698,
 *     completely off-screen -- no way to open the menu on this page at all.
 *   - the consent banner stretched to 670px with its Accept button at x=356-667,
 *     also entirely outside the viewport, so the banner could not be dismissed.
 *
 * Below 992px the cards stack in a single column anyway, so a horizontal
 * slide-in has nothing to travel across; dropping it removes the overflow.
 * Desktop keeps the animation untouched.
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .solution-wrap-about .solution-card {
    transform: none !important;
  }
}

/* Who We Are's two body-copy blocks stay at opacity:0 after their reveal should
 * have run, leaving the page's main narrative invisible ("Our journey began
 * with the establishment of Momenta..." and "Vistas Global's End to End
 * Delivery solution..."). Seen on the live site and locally; the other reveals
 * on the page do complete, so this is specific to these two.
 *
 * NOTE: verified in a browser that runs backgrounded, where requestAnimationFrame
 * is throttled -- so this one is worth a second look on a real device before
 * being treated as settled. Cost of being wrong is only that these two blocks
 * appear immediately instead of fading in. */
.heading-four.about[style*="opacity:0"],
.heading-four.about[style*="opacity: 0"] {
  opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
 * 2. Footer grid never collapsed on mobile -- 18px of overflow on every page.
 *
 * .footer-top-2._3-col keeps `grid-template-columns: .75fr 1fr 1fr` at every
 * breakpoint. Grid items default to `min-width: auto`, so the columns cannot
 * shrink below their content: they measured 188 + 77 + 56 plus two 20px gaps
 * = 361px inside a 311px content box. The link column was squeezed to 77px,
 * wrapping "Infrastructure Solutions" down several lines.
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .footer-top-2,
  .footer-top-2._3-col {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
 * 3. "About Us" pill was white-on-near-white at <=479px.
 *
 * The <=479px block paints .breadcrumbs white, which suits a dark hero, but the
 * Who We Are hero is #f5f5f5 -- 1.09:1 against white text, i.e. invisible.
 * about.html is the only page using the bare class (index.html uses
 * .black-border.black-text, which already forces #000), so this is scoped to
 * that hero rather than changing the shared component.
 * ------------------------------------------------------------------------- */
@media screen and (max-width: 479px) {
  .about-hero .breadcrumbs {
    color: var(--dark--100);
    border-color: #01010126;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Service headings were near-illegible light grey.
 *
 * Every .service-title carries a hardcoded inline `color:rgb(200,200,200)`
 * (= #c8c8c8, the same value as the stylesheet's own --gray--300). Against the
 * white section behind them that is 1.67:1 -- WCAG AA wants 4.5:1 for normal
 * text and 3:1 for large. These are the service names themselves, at 28px on
 * mobile and 52px on desktop, so they are the most prominent copy in the
 * section and were the hardest to read.
 *
 * Set to --dark--100 (#010101, 21:1), which is what every other heading on the
 * site already uses (.heading-four, .author-name). Deliberately NOT --gray--100
 * (#4a4a4a): that is the colour of the .service-info tags directly beneath each
 * title, so reusing it would flatten the hierarchy between the two.
 *
 * !important is required to beat the inline attribute. Checked all 78 instances
 * across the 13 pages that use them: every one sits on a white background, so
 * there is no dark-section case where this would invert the problem.
 * ------------------------------------------------------------------------- */
.service-title {
  color: var(--dark--100) !important;
}

/* ---------------------------------------------------------------------------
 * 5. Home page footer -- mostly fixed in JS, one rule needed here.
 *
 * index.html runs two footer slides and shows one, chosen by width; see
 * ../scripts/fix_home_footer_slide.py for why that cannot be done in CSS (the
 * slider allocates a slot per entry in its `slides` array, so hiding a slide
 * without removing it leaves a blank viewport after the footer).
 *
 * That script adds Terms of Use / Privacy Policy links to the phone footer's
 * copyright row. Bare <a>s there fall back to the browser default link blue,
 * which is 2.23:1 against the footer's black -- so inherit the row's own white
 * instead, keeping the underline so they still read as links.
 * ------------------------------------------------------------------------- */
.footer-copyright-2 a {
  color: inherit;
  text-decoration: underline;
}