/* =====================================================================
   Mobile foundation — Phase B (week 1-2)
   ---------------------------------------------------------------------
   Drie pijlers, geen ingrijpende layout-wijzigingen:
     1. Touch-targets ≥44×44px op alles wat klikbaar is (WCAG/iOS-spec)
     2. Sticky-bottom-bar component (zie template-parts/mobile-sticky-bar.php)
     3. Performance: lazy-load defaults + safe-area + smooth-scroll + tap-highlight

   Wordt LAATST geladen zodat overrides werken zonder !important te misbruiken.
   ===================================================================== */

/* Universele tap-feedback — vervangt browser-default grijze flash */
* { -webkit-tap-highlight-color: rgba(47, 107, 255, 0.18); }

/* iOS safe-area: respecteer notch + home-indicator */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* iOS zoom-bij-input fix: alle text-inputs minimum 16px font-size */
@media (max-width: 767px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="search"], input[type="password"],
  textarea, select {
    font-size: 16px !important;
  }
}

/* =====================================================================
   1. TOUCH-TARGETS — minimum 44×44px op mobile
   ===================================================================== */
@media (max-width: 767px) {
  /* Primary buttons */
  .btn {
    padding: 11px 18px;
    font-size: 13px;
    min-height: 44px;
    border-radius: 8px;
  }
  .btn--sm {
    padding: 9px 14px;
    font-size: 12px;
    min-height: 40px;
  }
  .btn--lg {
    padding: 13px 24px;
    font-size: 15px;
    min-height: 48px;
  }

  /* Nav-links + dropdowns + footer-links */
  .nav__link,
  .nav__mobile-toggle,
  .nav__mobile-menu a,
  .footer-grid a,
  .filter-tabs a,
  .filter-pill,
  .lang-bar__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
  }
  .lang-bar__btn { padding: 11px 14px; font-size: 13px; }

  /* Pagination + sorting buttons */
  .pagination a, .pagination span,
  .sort-btn, .filter-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Card-links: hele kaart klikbaar maken op mobiel (extra surface) */
  .biz-card a, .story a, .event-card a {
    display: block;
  }

  /* Star-rating widget tappable */
  .stars { font-size: 18px; line-height: 1.4; }

  /* Accordion/details summaries */
  details > summary {
    padding: 14px 12px;
    min-height: 44px;
    cursor: pointer;
  }
}

/* =====================================================================
   2. STICKY-BOTTOM-BAR — primary actions altijd zichtbaar onderaan
   ---------------------------------------------------------------------
   Gebruik via <?php get_template_part('template-parts/mobile-sticky-bar'); ?>
   op single-business templates. Verbergt op desktop.
   ===================================================================== */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--border, #e5e5e5);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
.mobile-sticky-bar__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
.mobile-sticky-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 4px;
  border-radius: 10px;
  background: var(--bg, #f5f5f5);
  color: var(--text, #1a1a1a);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  transition: background 0.15s;
}
.mobile-sticky-bar__btn:active { background: var(--border, #e5e5e5); transform: scale(0.97); }
.mobile-sticky-bar__btn--primary {
  background: var(--accent, #2f6bff);
  color: #fff;
}
.mobile-sticky-bar__btn--primary:active { background: var(--accent-dark, #1f4cd8); }
.mobile-sticky-bar__icon { font-size: 18px; line-height: 1; }

@media (max-width: 767px) {
  .mobile-sticky-bar { display: block; }
  /* Reserveer ruimte zodat content niet onder de bar verdwijnt */
  body.has-mobile-sticky-bar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   3. PERFORMANCE — lazy-load defaults + aspect-ratio + content-visibility
   ===================================================================== */

/* Lazy-loaded images krijgen een aspect-ratio placeholder om CLS te voorkomen */
img[loading="lazy"] {
  background: linear-gradient(135deg, #f5f5f5 0%, #ececec 100%);
}

/* Off-screen content rendering uitstellen — saves ~30-50% rendering-cost
   op lange pagina's (bedrijven-archive, agenda, halte-list).
   Browsers met support (Chrome 85+, Edge, Safari 18+) renderen alleen near-viewport. */
.r010-vis-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* Smooth scroll voor anchor-links (ToC, sectie-jumps) */
html { scroll-behavior: smooth; }

/* Wider scroll-padding op mobile zodat sticky-bottom-bar niet over content slaat */
@media (max-width: 767px) {
  html { scroll-padding-bottom: 80px; }
}

/* Beperk overflow-X netwerk-breed (vaak vergeten op mobile, geeft horizontale scroll-bug) */
body, html { overflow-x: hidden; max-width: 100vw; }

/* Card-images op mobiel: max 100% breedte + auto height, geen vaste pixels */
@media (max-width: 767px) {
  .biz-hero__img,
  .story__thumb--hero,
  .event-card__img {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: cover;
  }
}

/* Hover-states op touch-devices uitschakelen (voorkomt sticky-hover na tap) */
@media (hover: none) {
  .btn:hover, a:hover { background-color: inherit; }
}