/*
 * responsive-fixes.css
 * Loaded AFTER Webflow CSS on all pages.
 * Fixes readability gaps and adds screen-size optimizations
 * without modifying the original Webflow export.
 *
 * Breakpoint strategy (matching Webflow):
 *   Desktop:  base styles
 *   Large:    min-width: 1920px (already in Webflow)
 *   Tablet:   max-width: 991px  (already in Webflow)
 *   Mobile:   max-width: 767px  (already in Webflow)
 *   Small:    max-width: 479px  (already in Webflow)
 *
 * This file fills the gaps Webflow missed.
 */

/* =============================================
   1. FIX: vw fonts unreadable between 480-767px
   At 500px viewport:
     1.5vw = 7.5px (too small)
     2vw   = 10px  (borderline)
     2.5vw = 12.5px (OK)
   We add a 767px override with min-sizes.
   ============================================= */

@media screen and (max-width: 767px) {
  /* Benefits section bullets — was 2.5vw (= 8px at 320px) */
  .he-bulltet {
    font-size: max(2.5vw, 13px);
  }

  /* Benefit subheading — was 2.5vw */
  .h2-benefit-1 {
    font-size: max(2.5vw, 13px);
  }

  /* CTA body copy — was 2.5vw */
  .body-copy-cta {
    font-size: max(2.5vw, 13px);
  }

  /* Step1 headline small text — was 4vw at 767px */
  .h2-headline-step1-3 {
    font-size: max(4vw, 14px);
  }

  /* CTA learn more button text — was 2.5vw */
  .text-wrapper-cta {
    font-size: max(2.5vw, 12px);
  }

  /* Body copy general — ensure readable */
  .body-copy {
    font-size: max(2.5vw, 12px);
  }

  .body-copy.title {
    font-size: max(2.5vw, 11px);
  }

  /* Footer text */
  .body-footer.fade,
  .body-footer.right {
    font-size: max(2.5vw, 11px);
  }

  .footer-social-link {
    font-size: max(2.5vw, 11px);
  }

  /* Heading on hero */
  .heading {
    font-size: max(3.5vw, 14px);
  }
}

/* Between 480-767px — extra fixes for the "dead zone" */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .he-bulltet {
    font-size: 2.8vw;
  }

  .h2-benefit-1 {
    font-size: 2.8vw;
  }

  .body-copy-cta {
    font-size: 2.8vw;
  }

  .body-copy {
    font-size: 2.8vw;
  }

  .text-wrapper-cta {
    font-size: 2.8vw;
  }

  /* Nav name slightly bigger */
  .nav-name-jm {
    font-size: 3.2vw;
  }

  /* CTA heading more balanced */
  .heading-cta {
    font-size: 7vw;
  }

  .heading-cta.main {
    font-size: 7vw;
  }
}


/* =============================================
   2. FIX: Ultrawide screens (2560px+)
   Cap enormous vw headings.
   ============================================= */

@media screen and (min-width: 2560px) {
  .click-scroll-text {
    font-size: 200px;
  }

  .service-headline {
    font-size: 218px;
  }

  .h2-headline-step1-1,
  .h2-headline-step1-2 {
    font-size: 360px;
  }

  .h2-benefit-2 {
    font-size: 180px;
  }

  .heading-cta {
    font-size: 154px;
  }

  .heading-cta.main {
    font-size: 154px;
  }

  .text-headline-about,
  .text-headline-work {
    font-size: 180px;
  }

  .headline-news {
    font-size: 100px;
  }

  .headline-bio {
    font-size: 64px;
  }

  .work-big-text {
    font-size: 1100px;
  }

  /* Body text caps */
  .body-copy {
    font-size: 1.2rem;
  }

  .body-copy-cta {
    font-size: 1.6rem;
  }

  .he-bulltet,
  .h2-benefit-1 {
    font-size: 1.4rem;
  }
}


/* =============================================
   3. GENERAL: Prevent 100vw overflow from scrollbar
   Replace width: 100vw with 100% where safe.
   Only for elements where 100% works the same.
   ============================================= */

.navbar,
.main-cta-wrapper,
.main-wrapper-services {
  width: 100%;
}


/* =============================================
   4. GENERAL: Smooth tap targets for mobile
   ============================================= */

@media (hover: none) and (pointer: coarse) {
  /* Bigger tap targets */
  .nav-link-mobile {
    min-height: 44px;
    min-width: 44px;
  }

  .cta-button-wrapper {
    min-height: 48px;
  }

  /* Remove hover-only effects on touch */
  .news-card:hover {
    transform: none;
    box-shadow: none;
  }

  .news-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .news-card::before {
    display: none;
  }

  /* Disable cursor follow on touch devices */
  .jm-cursor {
    display: none !important;
  }
}


/* =============================================
   5. GENERAL: Improved text rendering
   ============================================= */

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* =============================================
   6. FIX: iOS Safari 100vh bug
   Safari's 100vh includes the address bar, making
   fullscreen sections taller than visible area.
   100dvh is the "dynamic viewport height" fix.
   ============================================= */

@supports (height: 100dvh) {
  .section.footer {
    height: 100dvh;
  }

  .wrapper-hero,
  .wrapper-hero-home {
    height: 100dvh;
  }
}


/* =============================================
   7. FIX: Landscape phone mode
   ============================================= */

@media screen and (max-height: 500px) and (orientation: landscape) {
  .section.footer {
    height: auto;
    min-height: 100dvh;
    min-height: 100vh; /* fallback */
  }

  .bg-benefits-wrapper {
    height: auto;
    min-height: 100dvh;
    min-height: 100vh;
  }

  .wrapper-hero,
  .wrapper-hero-home {
    height: auto;
    min-height: 100dvh;
    min-height: 100vh;
  }
}


/* =============================================
   8. FIX: iOS video autoplay needs playsinline
   Ensure video containers don't overflow on mobile
   ============================================= */

@media screen and (max-width: 767px) {
  .section.footer, .video-cont-footer, .video-cont-footer.footer {
    height: 100svh !important;
  }

  .video-cont-footer {
    width: 100vw;
    overflow: hidden;
  }

  .video-embed {
    width: 100vw !important;
    height: 100svh !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Fix admin modal on mobile */
  .admin-panel {
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* =============================================
   9. FIX: Smooth scrolling performance
   Reduce paint complexity on mobile
   ============================================= */

@media (hover: none) and (pointer: coarse) {
  /* Remove expensive backdrop-filter on low-end mobile */
  .blur {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  /* Reduce parallax canvas resolution on mobile for perf */
  #parallax-canvas {
    image-rendering: auto;
  }
}


/* =============================================
   10. FIX: Tablet portrait (768-991px)
   Better spacing for elements in the "gap zone"
   ============================================= */

@media screen and (min-width: 768px) and (max-width: 991px) {
  .content-cta-wrapper {
    border-radius: 3vw;
  }

  .cta-text-wrapper {
    padding: 6vw 4vw;
  }

  .heading-cta,
  .heading-cta.main {
    font-size: 7vw;
  }

  .body-copy-cta {
    font-size: 1.8vw;
  }

  .he-bulltet {
    font-size: 1.8vw;
  }

  .h2-benefit-1 {
    font-size: 1.8vw;
  }

  .body-copy {
    font-size: 1.6vw;
  }
}


/* =============================================
   11. FIX: Mobile — hide orange snake line,
   force scroll-section 3D shapes visible
   ============================================= */

@media (max-width: 767px) {
  /* Orange scroll snake line — off on mobile */
  #scroll-line-svg {
    display: none !important;
  }

  /* Reveal the "scroll" word — the overlay .scroll div is display:none on
     mobile, so show the h1's own #scroll-target span (orange via .text-span) */
  html body .click-scroll-text #scroll-target,
  html body .click-scroll-text span.text-span {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 3D shape images — Webflow keeps them visibility:hidden until IX2 scroll
     animations run, which don't fire reliably on mobile. Force visible with
     specificity high enough to beat Webflow's html.w-mod-js !important rule. */
  html.w-mod-js:not(.w-mod-ix3) body .wrapper-icons img,
  html.w-mod-ix3 body .wrapper-icons img,
  html.w-mod-js body .wrapper-icons .pill-scroll,
  html.w-mod-js body .wrapper-icons .circle-left-scroll,
  html.w-mod-js body .wrapper-icons .circle-center-scroll,
  html.w-mod-js body .wrapper-icons .circle-plus-scroll,
  html.w-mod-js body .wrapper-icons .square-scroll,
  html.w-mod-js body .wrapper-icons .hex-scroll,
  html.w-mod-js body .wrapper-icons .blue-circle,
  html.w-mod-js body .wrapper-icons .blue-pill,
  html.w-mod-js body .wrapper-icons .blue-hex,
  html.w-mod-js:not(.w-mod-ix3) body .click-scroll-text,
  html.w-mod-ix3 body .click-scroll-text {
    visibility: visible !important;
    opacity: 1 !important;
  }
}