/* TOGOPEPTIDE — Mobile UX (tap-targets + spacing)
   ------------------------------------------------
   Doel: WCAG 2.5.5 (Target Size AAA = 44×44 CSS-px) op échte tap-targets
   op viewports ≤767px. Geen visuele impact op desktop.

   Scope:
   - Knoppen in <nav>/<header>/<footer> (navigatie- en footer-acties)
   - Knoppen met .btn / .btn--* class (echte action-buttons)
   - Elementen met role="button"
   - Icon-only knoppen (aria-label, geen tekst-child)
   - Form-submit/reset buttons en form-controls (input/select)

   Bewust UITGESLOTEN:
   - Tekst-links binnen <p>, <li>, <article> (geen height-forcering → behoudt tekst-flow)
   - .btn--sm in een tekst-context blijft 36px; alleen mobile-context groeit
   - In-text inline-links

   Cascade: laadt NA togo-mobile-nav.css zodat het later overschrijft.
*/

@media (max-width: 767px) {

  /* ───────────────────────────────────────────────────────
     1. ECHTE TAP-TARGETS → minimaal 44×44px
     ─────────────────────────────────────────────────────── */

  /* Alle .btn varianten (inclusief --sm) krijgen op mobiel 44px hoogte */
  .btn,
  .btn--sm,
  .btn--secondary,
  .btn--ghost,
  .btn--primary {
    min-height: 44px;
    min-width: 44px;
  }

  /* role=button elementen overal — losse interactieve elementen */
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Knoppen binnen nav / header / footer (icon-buttons, hamburger, etc.) */
  nav button,
  nav a[role="button"],
  header button,
  header a.icon-btn,
  header [data-action],
  footer button,
  footer a[role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Icon-only buttons (aria-label aanwezig, vaak korte inhoud) */
  button[aria-label]:not([aria-label=""]),
  a[aria-label][role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  .announcement-bar__close,
  .lang-banner__close,
  .togo-help-btn,
  .acct-bell,
  .acct-search__clear,
  .pdp-heart,
  .togo-wishlist-heart,
  .admin-products-search-help,
  .admin-products-audit-panel__close,
  .admin-home2__pill-top {
    min-width: 44px;
    width: 44px;
  }

  /* Form submit/reset/button-type knoppen */
  button[type="submit"],
  button[type="reset"],
  button[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    min-height: 44px;
  }

  /* Form-inputs: touch-friendly hoogte (12px padding ≈ 44px totaal) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  select,
  textarea {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
    /* iOS Safari: voorkomt auto-zoom bij focus op input <16px */
    font-size: max(16px, 1rem);
  }

  textarea {
    min-height: 88px; /* twee tap-targets hoog */
  }

  /* Custom checkboxes/radios met label — vergroot klik-zone */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* ───────────────────────────────────────────────────────
     2. SPACING — minimaal 8px tussen aangrenzende tap-targets
        (WCAG 2.5.8 Target Size Minimum)
     ─────────────────────────────────────────────────────── */

  .btn-group,
  .btn-group--inline,
  .actions,
  .card-actions,
  .header-actions,
  .nav-actions,
  .nav-cluster,
  .footer-actions,
  .toolbar,
  .action-row,
  .button-row,
  .filter-row,
  .filter-bar,
  .pagination,
  .tag-row {
    gap: 8px;
    row-gap: 8px;
    column-gap: 8px;
  }

  /* Aangrenzende .btn-paren binnen flex-containers (fallback voor onbenoemde groups) */
  .btn + .btn,
  [role="button"] + [role="button"],
  .icon-btn + .icon-btn {
    margin-left: 8px;
  }

  /* Verticaal gestapelde knoppen (op smal scherm vaak block-layout) */
  .btn--block + .btn--block,
  .btn--block + .btn {
    margin-top: 8px;
    margin-left: 0;
  }

  /* List-items met action-buttons (account-orders, wishlist) */
  .order-row .actions > * + *,
  .wishlist-row .actions > * + *,
  li .actions > * + * {
    margin-left: 8px;
  }

  /* ───────────────────────────────────────────────────────
     3. QUANTITY / STEPPER controls — vaak < 40px
     ─────────────────────────────────────────────────────── */

  .qty button,
  .stepper button,
  .quantity-control button,
  [data-qty-inc],
  [data-qty-dec] {
    min-height: 44px;
    min-width: 44px;
  }

  /* ───────────────────────────────────────────────────────
     4. EXPLICIET GEEN forced height — tekst-context blijft puur
     ─────────────────────────────────────────────────────── */

  /* Anti-regel: inline links in tekst-blokken niet vergroten.
     (Komen overeen met audit-uitsluiting: text-links binnen <p>/<li>/<article>.)
     We override hier niets — deze block is bewust leeg, ter documentatie. */
  /* p a, li > a:not([role="button"]), article a:not(.btn) → onaangeraakt */
}

/* Respecteer prefers-reduced-motion — geen extra transitions toevoegen */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .btn,
  [role="button"],
  button {
    transition: none;
  }
}


/* ───────────────────────────────────────────────────────
   EXTREEM SMAL (≤380px = iPhone SE/Mini) — header heeft
   te veel iconen voor deze viewport. Theme-toggle gaat
   weg (nice-to-have, niet essentieel) + andere compact.
   ─────────────────────────────────────────────────────── */
/* Theme-toggle hide en header item sizing zijn nu in shell.css zodat
   álle pages (ook die deze file niet laden) consistent zijn. */
@media (max-width: 380px) {
  /* niets — shell.css regelt dit nu sitewide */
}