/**
 * Leer-Avontuur — Globale responsive helpers
 * Wordt geladen in alle pagina's voor consistente mobiele/tablet ervaring.
 */

/* === Touch targets minimaal 44px (Apple HIG) === */
button, a.btn, .top-btn, .filter-btn, input[type="checkbox"] + span {
  min-height: 36px;
}

/* === Container globaal: side padding op klein scherm === */
@media (max-width: 640px) {
  .container {
    padding: 14px !important;
  }
}

/* === Top-actions: hamburger op mobiel === */
.top-actions-wrap {
  position: relative;
}
.hamburger-btn {
  display: none;
  background: white;
  border: 2px solid var(--dark, #2D3047);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--dark, #2D3047);
  font-family: inherit;
  color: var(--dark, #2D3047);
}
.hamburger-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border: 3px solid var(--dark, #2D3047);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 4px 4px 0 var(--dark, #2D3047);
  z-index: 1000;
  min-width: 200px;
  flex-direction: column;
  gap: 4px;
}
.hamburger-menu.open {
  display: flex !important;
}
/* Forceer items in het menu zichtbaar - wint van .top-actions display:none */
.hamburger-menu > .ham-item,
.hamburger-menu > a,
.hamburger-menu > button {
  display: block !important;
  width: 100%;
  text-align: left;
  background: var(--cream, #FFF8E7);
  margin: 0 !important;
  border: 2px solid var(--dark, #2D3047) !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--dark, #2D3047) !important;
  box-shadow: none !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
}
.hamburger-menu > .ham-item:hover,
.hamburger-menu > a:hover,
.hamburger-menu > button:hover {
  background: white;
  transform: none !important;
}
.hamburger-menu > .ham-item.danger,
.hamburger-menu > a.danger,
.hamburger-menu > button.danger {
  background: var(--red, #FF6B6B) !important;
  color: white !important;
}

@media (max-width: 640px) {
  /* Verberg de inline knoppen, toon hamburger */
  .top-actions > .top-btn:not(.always-show),
  .top-actions > a.top-btn:not(.always-show),
  .top-actions > button.top-btn:not(.always-show) {
    display: none !important;
  }
  .hamburger-btn {
    display: inline-block !important;
  }
}

/* === Modals: full-screen op mobiel === */
@media (max-width: 640px) {
  .modal-bg, .prizes-modal-bg {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  .modal, .prizes-modal {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    padding: 16px !important;
  }
  /* Form rows split → onder elkaar */
  .form-row.split,
  .form-section .split-fields,
  .form-row .split {
    grid-template-columns: 1fr !important;
  }
}

/* === Headings smaller op mobiel === */
@media (max-width: 640px) {
  .header h1 {
    font-size: 2.4rem !important;
  }
  .section-title {
    font-size: 1.6rem !important;
  }
  .feature-name {
    font-size: 1.6rem !important;
  }
  .stat-num {
    font-size: 2.4rem !important;
  }
}

/* === Kid cards: 1 kolom mobiel, 2 tablet === */
@media (max-width: 640px) {
  .kids-grid,
  .rewards-grid,
  .portals,
  .tabs-grid,
  .kids-list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .kids-grid,
  .rewards-grid,
  .portals {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* === Reward card op mobiel: alles netjes onder elkaar === */
@media (max-width: 640px) {
  .reward-card {
    padding: 10px !important;
  }
  .reward-icon-box {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.8rem !important;
  }
  .reward-title {
    font-size: 1.3rem !important;
  }
  .reward-stars .num {
    font-size: 1rem !important;
  }
}

/* === Welkom-card: stack op mobiel === */
@media (max-width: 640px) {
  .welcome-card {
    flex-direction: column !important;
    text-align: center;
    gap: 12px !important;
  }
  .welcome-stats {
    justify-content: center;
  }
}

/* === Agenda formulier: hele dag/meerdere dagen onder titel === */
@media (max-width: 480px) {
  .form-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .form-section-head .inline-check {
    margin-left: 0;
  }
}

/* === Categorie pillen: kleiner padding op mobiel === */
@media (max-width: 640px) {
  .cat-pill, .type-pill {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
  }
}

/* === Top-bar agenda: knop onder titel op mobiel === */
@media (max-width: 480px) {
  .top-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .top-bar .actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* === Parent kids row: stack op mobiel === */
@media (max-width: 640px) {
  .kid-row {
    padding: 14px !important;
  }
  .kid-row-head {
    flex-wrap: wrap !important;
  }
  .actions-row .btn {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem !important;
  }
}

/* === Mededelingen: wat krapper op mobiel === */
@media (max-width: 640px) {
  .announcement {
    padding: 12px 14px !important;
  }
  .announcement-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.6rem !important;
  }
}

/* === Input-tijden niet te smal === */
@media (max-width: 480px) {
  input[type="date"],
  input[type="time"],
  select {
    font-size: 16px !important;  /* iOS zoom prevention */
  }
}

/* === Parent feat (op landing page) op mobiel kompakter === */
@media (max-width: 640px) {
  .parent-feat {
    padding: 12px !important;
    gap: 10px !important;
  }
  .parent-feat-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.5rem !important;
  }
  .parent-feat-title {
    font-size: 1.2rem !important;
  }
  .parent-feat-desc {
    font-size: 0.82rem !important;
  }
}

/* === Stats compacter op mobiel === */
@media (max-width: 480px) {
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* === Login form op mobiel === */
@media (max-width: 480px) {
  .login-card,
  .login-box {
    padding: 18px !important;
    border-radius: 18px !important;
  }
}

/* === Hide overflow problems === */
body, html {
  overflow-x: hidden;
}

/* === Dialog buttons stack op mobiel === */
@media (max-width: 480px) {
  .btn-row {
    flex-direction: column-reverse !important;
  }
  .btn-row .btn {
    width: 100%;
  }
  .btn-row > div[style*="flex:1"] {
    display: none;
  }
}