/* Global mobile + dark mode safety layer */
:root{
  --wg-bg:#f3f5f3;
  --wg-surface:#ffffff;
  --wg-surface-soft:#f6f8f6;
  --wg-text:#203127;
  --wg-muted:#5b6f62;
  --wg-border:#d6dfd8;
  --wg-brand:#1f5b3f;
}

html{
  color-scheme:light;
}

body{
  background:var(--wg-bg);
  color:var(--wg-text);
}

img,
video,
svg,
iframe{
  max-width:100%;
  height:auto;
}

@media (max-width:980px){
  html,
  body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  body{
    background-attachment:scroll !important;
  }

  body.no-scroll{
    overflow-y:auto !important;
  }

  .site-header,
  .site-footer,
  .hero,
  .contact-hero,
  .overons-hero,
  .registratie-hero,
  .voorwaarden-hero,
  .nieuwsbrief-hero,
  .site-alert,
  .maintenance-alert{
    position:static !important;
    top:auto !important;
    bottom:auto !important;
  }

  .container{
    width:min(100% - 1.5rem,1200px);
  }

  main{
    overflow-x:hidden;
  }

  .hero{
    height:auto;
    min-height:unset;
    max-height:none;
    padding:3rem 1rem 2rem;
  }

  .hero h1{
    font-size:clamp(1.75rem,7.5vw,2.3rem);
    line-height:1.2;
  }

  .hero p{
    font-size:1rem;
    line-height:1.5;
  }

  table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

@media (prefers-color-scheme:dark){
  :root{
    --wg-bg:#0f1713;
    --wg-surface:#16221c;
    --wg-surface-soft:#1b2a22;
    --wg-text:#dce9e2;
    --wg-muted:#a7bcb1;
    --wg-border:#2a3b32;
    --wg-brand:#86c6a5;
  }

  html{
    color-scheme:dark;
  }

  body,
  main,
  .site-header,
  .topbar,
  .site-footer{
    background:var(--wg-bg) !important;
    color:var(--wg-text) !important;
  }

  main,
  .site-footer,
  .site-footer *{
    color:var(--wg-text);
  }

  main :is(h1,h2,h3,h4,h5,h6,p,li,small,label,span,strong,td,th){
    color:var(--wg-text);
  }

  main a,
  .footer-links a,
  .footer-header a{
    color:var(--wg-brand) !important;
  }

  .site-header,
  .topbar{
    border-color:var(--wg-border);
  }

  .site-nav a,
  .topbar .contact-info a{
    color:var(--wg-text);
  }

  .site-nav .nav-sub > .sub,
  .site-nav,
  .lang-switch-menu,
  .mini-cart{
    background:var(--wg-surface) !important;
    border-color:var(--wg-border) !important;
    color:var(--wg-text) !important;
  }

  .lang-switch-trigger,
  .lang-switch-item{
    background:var(--wg-surface) !important;
    color:var(--wg-text) !important;
    border-color:var(--wg-border) !important;
  }

  main :is(
    .card,.panel,.box,.table-wrapper,.checkout-wrap,fieldset,.summary,.dashboard-card,
    .contact-panel,.info-card,.mini,.mini-card,.status-card,.overons-slot,.overons-foto-card,.kern-card,.tl-content,
    .track-card,.track-side,.path-card,.step-card,.faq-item,.visual-card,.p2-wrap,.login-card,.login-hero-panel,
    .product-card,.card-footer,.note-card,.info-item,.contact-mini,.orderview,.orders-page table
  ){
    background:var(--wg-surface) !important;
    border-color:var(--wg-border) !important;
    box-shadow:none;
  }

  main :is(
    .section-sub,
    .panel-sub,
    .brand-note,
    .muted,
    .mini p,
    .contact-mini p,
    .overons-lead,
    .tl-content p
  ){
    color:var(--wg-muted) !important;
  }

  main :is(
    .btn.ghost,
    .btn-outline,
    .btn-light,
    .mini-btn.mini-ghost
  ){
    background:var(--wg-surface-soft) !important;
    border-color:var(--wg-border) !important;
    color:var(--wg-text) !important;
  }

  input,
  textarea,
  select{
    background:var(--wg-surface-soft) !important;
    color:var(--wg-text) !important;
    border-color:var(--wg-border) !important;
  }

  input::placeholder,
  textarea::placeholder{
    color:var(--wg-muted) !important;
  }

  table th,
  table td{
    border-color:var(--wg-border) !important;
    color:var(--wg-text) !important;
  }

  .footer-header{
    background:#111c17 !important;
    border-color:var(--wg-border) !important;
  }

  .footer-main{
    background:#0d1612 !important;
  }

  .login-page{
    background:
      linear-gradient(180deg, rgba(4,13,11,.72), rgba(4,13,11,.72)),
      url('/img/uitvaartachtergrond.jpg') center/cover no-repeat !important;
  }

  .login-hero-panel::after{
    background:linear-gradient(125deg, rgba(11,11,11,.78), rgba(11,11,11,.38)) !important;
  }

  .login-card{
    background:#16221c !important;
    border:1px solid var(--wg-border) !important;
  }

  .login-card h2,
  .login-card p,
  .login-card .links a{
    color:var(--wg-text) !important;
  }
}