/* =============================================
   Webapp Vision — Responsive System
   Breakpoints: 1200 / 1024 / 900 / 768 / 576 / 390
   ============================================= */

/* ===== NAV LOGO (basis — desktop) ===== */
.nav-logo {
  height: 120px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* ===== NAV HOOGTE (basis — desktop) ===== */
.nav-inner-height {
  height: 108px;
}

/* ===== TAALSCHAKELAAR STRIP ===== */
.lang-strip {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: visible;
  white-space: nowrap;
  flex-shrink: 0;
}
.lang-strip a,
.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}

/* ===== STATISTIEKEN: 4 kolommen op desktop ===== */
@media (min-width: 768px) {
  .stats-home-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ===== LAPTOP (≤ 1200px) ===== */
@media (max-width: 1200px) {
  .nav-inner-height { height: 96px !important; }
  .nav-logo { height: 100px !important; }
  .lang-pill { font-size: .72rem !important; padding: 4px 9px !important; }
}

/* ===== TABLET LANDSCAPE (≤ 1024px) ===== */
@media (max-width: 1024px) {
  .nav-inner-height { height: 84px !important; }
  .nav-logo { height: 76px !important; }
  .lang-strip,
  .nav-start-cta { display: none !important; }
  .nav-actions { gap: .5rem !important; }
}

/* ===== GROTE TABLET / TELEFOON LIGGEND (≤ 900px) ===== */
@media (max-width: 900px) {
  .nav-inner-height { height: 78px !important; }
  .nav-logo        { height: 68px !important; }
}

/* ===== TABLET STAAND (≤ 768px) ===== */
@media (max-width: 768px) {

  /* — Nav — */
  .nav-inner-height { height: 72px !important; }
  .nav-logo         { height: 60px !important; }
  .nav-actions      { gap: .4rem !important; }
  #dark-toggle      { width: 34px !important; height: 34px !important; font-size: .9rem !important; }

  /* — Paginakoppen (services / about / contact / portfolio) — */
  .page-header {
    padding-top:    96px  !important;
    padding-bottom: 40px  !important;
  }

  /* — Hero inner content — */
  .hero-section-inner {
    padding-top:    24px !important;
    padding-bottom: 48px !important;
  }

  /* — Services: 2-koloms detail grids → 1 kolom — */
  .svc-detail-grid {
    grid-template-columns: 1fr  !important;
    gap:                   32px !important;
  }
  /* Herstel volgorde zodat DOM-volgorde geldt op mobiel */
  .svc-detail-grid > * { order: 0 !important; }

  /* — About expertise grid: 2 koloms → 1 kolom — */
  .about-expertise-grid {
    grid-template-columns: 1fr  !important;
    gap:                   24px !important;
  }

  /* — Contact hoofdgrid: 2 koloms → 1 kolom — */
  .contact-main-grid {
    grid-template-columns: 1fr  !important;
    gap:                   32px !important;
  }

  /* — Typografie — */
  .hero-h1    { font-size: 2.4rem; }
  .section-h2 { font-size: 1.9rem; }
  .stat-num   { font-size: 2rem;   }
  .price-val  { font-size: 2rem;   }
}

/* ===== TELEFOON (≤ 576px) ===== */
@media (max-width: 576px) {

  /* — Nav — */
  .nav-inner-height { height: 64px !important; }
  .nav-logo         { height: 50px !important; }

  /* Verberg taalschakelaar bovenaan — mobiel menu heeft het al */
  .lang-strip { display: none !important; }

  /* — Paginakoppen — */
  .page-header {
    padding-top:    80px !important;
    padding-bottom: 32px !important;
    padding-left:   16px !important;
    padding-right:  16px !important;
  }

  /* — Hero — */
  .hero-section-inner {
    padding: 12px 16px 40px !important;
  }

  /* — Feature grids: 2 koloms → 1 kolom — */
  .svc-feat-grid { grid-template-columns: 1fr !important; }

  /* — Homepage services & portfolio auto-fit grids — */
  .services-home-grid { grid-template-columns: 1fr !important; }
  #portfolio-grid     { grid-template-columns: 1fr !important; }

  /* — Prijzen grid — */
  .pricing-cards-grid { grid-template-columns: 1fr !important; }

  /* — Contact formulier: email+telefoon naast elkaar → gestapeld — */
  .form-2col        { grid-template-columns: 1fr !important; }
  .contact-form-box { padding: 24px 18px !important; }

  /* — About statistieken: 3 koloms → 1 kolom — */
  .about-stats-grid {
    grid-template-columns: 1fr  !important;
    gap:                   10px !important;
  }

  /* — CTA secties padding — */
  .cta-section { padding: 80px 0 !important; }
  #cta-main    { padding: 80px 0 !important; }

  /* — Typografie — */
  .hero-h1    { font-size: 2rem   !important; }
  .section-h2 { font-size: 1.75rem !important; }

  /* — Flash-bericht — */
  .flash-message {
    left:      12px    !important;
    right:     12px    !important;
    max-width: none    !important;
    top:       74px    !important;
  }

  /* — Terug-naar-boven knop — */
  #back-to-top {
    bottom: 16px !important;
    right:  12px !important;
  }
}

/* ===== KLEINE TELEFOON (≤ 390px) ===== */
@media (max-width: 390px) {
  .nav-logo         { height: 42px !important; }
  .nav-inner-height { height: 58px !important; }
  .hero-h1          { font-size: 1.75rem !important; }
  .section-h2       { font-size: 1.6rem  !important; }
  #dark-toggle {
    width:     30px         !important;
    height:    30px         !important;
    font-size: .875rem      !important;
  }
}

/* ===== MOBILE DROPDOWN MENU STRUCTUUR ===== */
.mobile-dropdown {
  position: fixed;
  top: 64px; /* wordt per breakpoint overschreven zodat hij onder nav valt */
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0 12px;
  z-index: 9997;
  display: block;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  pointer-events: auto !important;
  box-sizing: border-box;
  contain: layout paint;
  will-change: auto;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.mobile-dropdown,
.mobile-dropdown * {
  max-width: 100% !important;
}
.mobile-dropdown[hidden] {
  display: none !important;
}
.mobile-dropdown.active {
  display: block !important;
}
.mobile-dropdown-inner {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(0,113,227,.12);
  border-radius: 18px;
  box-shadow: none !important;
  padding: 10px;
  display: grid;
  gap: 8px;
  transform: none !important;
  translate: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.mobile-nav-link {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  line-height: 1.2;
  background: rgba(0,113,227,.045) !important;
  border: 1px solid rgba(0,113,227,.07);
  transition: none !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: rgba(0,113,227,.045) !important;
  color: var(--text) !important;
}
.mobile-menu-lang {
  padding: 10px;
  border-top: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  transition: none !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
}
.mobile-menu-lang a,
.mobile-menu-lang a:hover,
.mobile-menu-lang a:active {
  background: #fff;
  transition: none !important;
  animation: none !important;
  transform: none !important;
  translate: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Plaats dropdown exact onder navbar per breakpoint */
@media (max-width: 1024px) {
  .mobile-dropdown { top: 92px; }
}
@media (max-width: 900px) {
  .mobile-dropdown { top: 86px; }
}
@media (max-width: 768px) {
  .mobile-dropdown { top: 80px; }
}
@media (max-width: 576px) {
  .mobile-dropdown { top: 70px; left: 0 !important; right: auto !important; width: 100% !important; }
  .mobile-nav-link { font-size: .98rem; padding: 11px 13px; }
  .mobile-menu-lang a { font-size: .8rem !important; padding: 6px 10px !important; }
}
@media (max-width: 390px) {
  .mobile-dropdown { top: 62px; left: 0 !important; right: auto !important; width: 100% !important; }
  .mobile-nav-link { font-size: .92rem; }
}
@media (min-width: 1025px) {
  .mobile-dropdown { display: none !important; }
}
[data-theme="dark"] .mobile-dropdown-inner {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  border-color: rgba(58,158,255,.18);
  box-shadow: none !important;
}
[data-theme="dark"] .mobile-nav-link {
  color: var(--text);
  background: rgba(58,158,255,.09) !important;
  border-color: rgba(58,158,255,.12);
}
[data-theme="dark"] .mobile-nav-link:hover,
[data-theme="dark"] .mobile-nav-link:active {
  background: rgba(58,158,255,.09) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .mobile-menu-lang {
  border-top-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .mobile-menu-lang a,
[data-theme="dark"] .mobile-menu-lang a:hover,
[data-theme="dark"] .mobile-menu-lang a:active {
  background: rgba(255,255,255,.04);
}

/* ===== NAVBAR EFFECTEN UIT OP KLEINE SCHERMEN ===== */
@media (max-width: 1024px) {
  #main-nav,
  #main-nav *,
  #mobile-menu,
  #mobile-menu * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    translate: none !important;
  }

  #main-nav,
  #main-nav.scrolled,
  [data-theme="dark"] #main-nav,
  [data-theme="dark"] #main-nav.scrolled {
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-theme="dark"] #main-nav,
  [data-theme="dark"] #main-nav.scrolled {
    background: var(--bg) !important;
  }

  #mobile-menu-btn,
  #mobile-menu-btn:hover,
  #mobile-menu-btn:active,
  #dark-toggle,
  #dark-toggle:hover,
  #dark-toggle:active {
    box-shadow: none !important;
    filter: none !important;
  }

  .mobile-dropdown-inner,
  [data-theme="dark"] .mobile-dropdown-inner {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:active {
    background: rgba(0,113,227,.045) !important;
    color: var(--text) !important;
  }

  [data-theme="dark"] .mobile-nav-link:hover,
  [data-theme="dark"] .mobile-nav-link:active {
    background: rgba(58,158,255,.09) !important;
    color: var(--text) !important;
  }
}

/* =============================================
   MOBIEL TOETSENBORD (iOS/Android stijl)
   ============================================= */

/* Standaard verborgen op desktop */
.fx-mobile-keyboard {
  display: none;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 8px 18px;
  background: linear-gradient(180deg, #1e1e30 0%, #0d0d1c 100%);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 28px 72px rgba(0,0,0,.75), 0 0 48px rgba(0,113,227,.08);
  flex-direction: column;
  gap: 9px;
  -webkit-user-select: none;
  user-select: none;
}

.fx-mob-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: stretch;
}

/* Tweede rij iets ingesprongen (iOS stijl) */
.fx-mob-row-indent {
  padding: 0 20px;
}

/* Gewone letter-toets */
.fx-mob-key {
  flex: 1;
  min-height: 48px;
  max-width: 42px;
  padding: 0;
  border-radius: 10px;
  background: linear-gradient(175deg, #3c3c5e 0%, #25253f 100%);
  border: 1px solid rgba(255,255,255,.13);
  border-bottom: 2px solid rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  font-size: .95rem;
  font-weight: 600;
  font-family: -apple-system, 'Inter', BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  transition: background .1s, box-shadow .1s, transform .08s, color .1s;
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Gloeien + indrukken bij tik/klik */
.fx-mob-key:active,
.fx-mob-key.fx-mob-pressed {
  background: linear-gradient(135deg, #0060c7, #6a30d0) !important;
  border-color: rgba(120,170,255,.35) !important;
  border-bottom-color: rgba(0,0,0,.65) !important;
  box-shadow:
    0 0 20px rgba(0,113,227,.7),
    0 0 40px rgba(0,113,227,.25),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transform: translateY(1px) scale(0.94);
  color: #fff;
}

/* Actie-toetsen: shift, delete, enter, 123 */
.fx-mob-action {
  max-width: 56px;
  background: linear-gradient(175deg, #22223c 0%, #14142a 100%) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.6);
  font-size: .8rem;
}

/* Spatiebalk */
.fx-mob-space {
  flex: 5 !important;
  max-width: none !important;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  background: linear-gradient(175deg, #2c2c48 0%, #1c1c30 100%) !important;
}

/* .?123 knop */
.fx-mob-nums {
  max-width: 58px;
  font-size: .7rem;
}

/* Enter-toets (↵) */
.fx-mob-enter {
  max-width: 56px;
  font-size: 1.1rem;
}

/* ── Zichtbaar / Verborgen per breekpunt ── */
@media (max-width: 576px) {
  /* Verberg het 3D desktop-toetsenbord */
  .fx-keyboard-wrap    { display: none !important; }
  .keyboard-hint-text  { display: none !important; }
  /* Toon mobiel toetsenbord + hint */
  .fx-mobile-keyboard  { display: flex !important; }
  .keyboard-mob-hint   { display: block !important; }
}

/* Kleine telefoon (≤ 400px) */
@media (max-width: 400px) {
  .fx-mob-key         { min-height: 42px; max-width: 36px; font-size: .85rem; }
  .fx-mob-action      { max-width: 46px; }
  .fx-mob-nums        { max-width: 50px; }
  .fx-mob-enter       { max-width: 46px; }
  .fx-mob-row         { gap: 5px; }
  .fx-mob-row-indent  { padding: 0 14px; }
  .fx-mobile-keyboard { gap: 7px; padding: 8px 6px 14px; }
}

/* ===== RTL (Arabisch) — responsive aanpassingen ===== */
@media (max-width: 768px) {
  [dir="rtl"] .contact-main-grid { direction: rtl; }
  [dir="rtl"] .svc-detail-grid   { direction: rtl; }
}