/* ============================================================
   PERFORMANCE & CROSS-PLATFORM CSS
   Fixes: Android rendering, content overflow, touch targets
   ============================================================ */

/* ── GLOBAL RESETS (Android / cross-platform) ── */
*,*::before,*::after{
  box-sizing:border-box;
  /* Fix Android font rendering */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Prevent text size inflation on rotation */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

html{
  /* Smooth scroll without JS */
  scroll-behavior:smooth;
  /* Fix Android overscroll */
  overscroll-behavior-y:none;
}

body{
  overflow-x:hidden;
  /* Fix Android tap highlight */
  -webkit-tap-highlight-color:transparent;
  /* Prevent content wider than viewport */
  max-width:100vw;
}

/* ── IMAGES ── */
img{
  max-width:100%;
  height:auto;
  display:block;
  /* GPU-accelerated decoding */
  content-visibility:auto;
}

/* ── TYPOGRAPHY — prevent overflow on small screens ── */
h1,h2,h3,h4,h5,h6,p,li,a,span,div{
  word-break:break-word;
  overflow-wrap:break-word;
}

/* ── TOUCH TARGETS — minimum 44x44px (iOS HIG + Android Material) ── */
a,button,input,select,textarea,[role="button"]{
  min-height:44px;
  min-width:44px;
}
nav a, .footer-links a, .breadcrumb a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}

/* ── NAV — fix Android overflow ── */
nav{
  width:100%;
  max-width:100vw;
}
.nav-links{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none}

/* ── HERO — Android viewport fix ── */
#hero, .cafe-hero, .page-hero, .mem-hero{
  /* Use dvh for Android Chrome address bar */
  min-height:100dvh;
  min-height:-webkit-fill-available;
}

/* ── GRID / FLEX — prevent Android blowout ── */
.hero-wrap,
.about-grid,
.seasoning-layout,
.community-grid,
.contact-grid,
.services-grid,
.story-inner,
.cafe-about-inner,
.cafe-visit-inner{
  min-width:0;
}
.hero-wrap > *,
.about-grid > *,
.seasoning-layout > *{
  min-width:0;
  overflow:hidden;
}

/* ── FONT SIZES — no text smaller than 16px on mobile (prevents iOS zoom) ── */
@media(max-width:768px){
  input,select,textarea{
    font-size:16px!important; /* Prevents iOS auto-zoom on focus */
  }
  /* Reduce hero headline on small Android screens */
  h1.hero-headline,
  .mem-hero-title,
  .ph-title,
  .cafe-hero-title{
    font-size:clamp(2rem,10vw,3.5rem)!important;
  }
  .section-title{
    font-size:clamp(1.5rem,6vw,2.25rem)!important;
  }
  /* Product price — don't blow out on small screens */
  .prod-price{
    font-size:clamp(1.5rem,8vw,2.5rem)!important;
  }
  /* Bundle grid — single column on small Android */
  .bundles-grid{
    grid-template-columns:1fr!important;
  }
  /* Sauce grid — 3 cols max on mobile */
  .bundles-section [style*="repeat(5,1fr)"]{
    grid-template-columns:repeat(3,1fr)!important;
  }
  /* Blog grid */
  .blog-grid{
    grid-template-columns:1fr!important;
    padding:2rem 1rem!important;
  }
  /* Credential bar */
  .credential-bar{
    grid-template-columns:1fr 1fr!important;
  }
  /* Menu cards */
  .cafe-menu-grid{
    grid-template-columns:1fr!important;
  }
  /* Catering photo grid */
  [style*="repeat(4,1fr)"]{
    grid-template-columns:1fr 1fr!important;
  }
  /* Corporate photo grid */
  [style*="grid-template-columns:2fr 1fr 1fr"]{
    grid-template-columns:1fr!important;
  }
  /* Trust row */
  .trust-row{
    grid-template-columns:repeat(3,1fr)!important;
  }
  /* Qty row */
  .qty-row{
    flex-direction:column!important;
  }
  .btn-atc{
    width:100%!important;
  }
  /* Hero cred strip */
  .hero-cred,.hero-cred-strip{
    gap:1.25rem!important;
  }
  /* Popup width */
  #nl-popup{
    margin:.75rem!important;
    width:calc(100vw - 1.5rem)!important;
    max-width:100%!important;
  }
  /* Cafe hero */
  .cafe-hero-left{
    padding:3rem 1.25rem 2.5rem!important;
  }
  .cafe-info-strip{
    grid-template-columns:1fr 1fr!important;
    display:grid!important;
  }
}

/* ── ABOVE-THE-FOLD CRITICAL CONTENT ── */
/* Ensure hero images are not lazy-loaded */
.hero-photo-grid img:first-child,
.cafe-hero-right img:first-child,
.post-lead-img img{
  loading:eager!important;
  fetchpriority:high;
}

/* ── SCROLLBAR — consistent cross-platform ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-gray);border-radius:2px}

/* ── FOCUS STYLES — accessibility + Android ── */
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* ── BUTTON ACTIVE STATES — Android feedback ── */
.btn-cyan:active,
.btn-warm:active,
.btn-atc:active,
.btn-buy-full:active{
  transform:scale(0.97)!important;
  opacity:.9;
}

/* ── PREVENT HORIZONTAL SCROLL on Android ── */
.container,
.footer-inner,
.blog-grid,
.product-hero,
.how-section,
.reviews-section,
.bundles-section,
.bundles-inner{
  max-width:100%;
  overflow-x:hidden;
}