/* SSA 2026.3.61 — mobiele en browsercompatibiliteit */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:92px}
html,body{width:100%;max-width:100%;overflow-x:hidden}
@supports(overflow:clip){html,body{overflow-x:clip}}
body{min-width:320px}
main,header,footer,section,article,nav,form{min-width:0}
img,svg,video,iframe{max-width:100%}
button,input,select,textarea{max-width:100%;font-family:inherit}
button,a,select,input[type="checkbox"],input[type="radio"]{touch-action:manipulation}

/* Zichtbare toetsenbordfocus in Chrome, Firefox en Safari. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #74b9ff;outline-offset:3px}

/* Safari-prefixes met dezelfde visuele terugval als de standaardregels. */
.site-header.scrolled,.hero-story{-webkit-backdrop-filter:blur(14px)}
.cinema-link{-webkit-backdrop-filter:blur(8px)}
.home-match-feature,.hero-match{-webkit-backdrop-filter:blur(18px)}
.breaking-news-strip,.hero-badge{-webkit-backdrop-filter:blur(16px)}
.team-header{-webkit-backdrop-filter:blur(5px)}
.match-card{-webkit-backdrop-filter:blur(15px)}
.matchday-meta,.matchday-location{-webkit-backdrop-filter:blur(10px)}
.hero-grid,.tiktok-showcase:before,.cinema-grid,.team-hero-grid{-webkit-mask-image:linear-gradient(to right,#000,transparent 80%)}

/* Viewport-terugval voor browsers zonder svh/dvh. */
.team-hero{min-height:100vh;min-height:100svh}
dialog{max-width:calc(100% - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain}
dialog::backdrop{background:rgba(2,10,22,.68)}

@media(max-width:1000px){
  .site-header .main-nav,.news-site-header .desktop-nav{height:calc(100vh - 72px)!important;height:calc(100dvh - 72px)!important;padding-bottom:max(28px,env(safe-area-inset-bottom))!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .site-header,.news-site-header{padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important}
  .hero-content{min-height:100vh;min-height:100svh}
}

@media(max-width:760px){
  /* Voorkomt automatisch inzoomen bij invoer op iPhone en iPad. */
  input,select,textarea{font-size:16px!important}
  button,.button,.nav-cta,.back-home{min-height:44px}
  footer{padding-bottom:max(35px,env(safe-area-inset-bottom))}
  .contact-layout,.partners-main,.join-form-section{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

  /* Teamwissel blijft ook op een telefoon bereikbaar. */
  .team-header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .team-brand{flex:0 0 auto}.team-nav{gap:5px;margin-left:auto}
  .team-nav a,.team-nav a:not(.back-home){display:flex;align-items:center;justify-content:center;min-height:44px;padding:7px 8px;font-size:9px;white-space:nowrap}
  .team-nav .back-home{padding-left:9px;padding-right:9px}
}

@media(max-width:360px){
  .team-brand img,.team-brand-single img{width:42px;height:42px}
  .team-nav{gap:3px}.team-nav a,.team-nav a:not(.back-home){padding-left:5px;padding-right:5px;font-size:8px}
}

@media(hover:none){
  .button:hover,.tiktok-follow:hover{transform:none}
  .club-panel:hover .panel-bg,.player-card:hover img,.news-overview-card:hover .news-overview-image>img{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}