/*
 * At-Tayyib Foundation — Universal Responsive Compatibility
 * Hotfix 19 / 2026-09-23
 * Public website: desktop, tablet, Android, iPhone/iOS Safari.
 */
:root{--atf-safe-top:env(safe-area-inset-top,0px);--atf-safe-right:env(safe-area-inset-right,0px);--atf-safe-bottom:env(safe-area-inset-bottom,0px);--atf-safe-left:env(safe-area-inset-left,0px)}
html{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:hidden;word-break:normal;overflow-wrap:anywhere}
img,svg,video,canvas,iframe{max-width:100%;height:auto}
img{object-fit:contain}
iframe{width:100%}
*{min-width:0}
.container,.container-fluid,.atf-container{max-width:100%}
input,select,textarea,button{max-width:100%}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.modal-dialog{max-width:calc(100vw - 24px);margin-left:auto;margin-right:auto}
.dropdown-menu{max-width:calc(100vw - 24px)}
.atf-header,.atf-navbar-wrap,.atf-navbar{max-width:100vw}

/* Keep desktop visuals unchanged. Tablet/mobile enhancements only. */
@media (max-width:991.98px){
  body{padding-left:var(--atf-safe-left);padding-right:var(--atf-safe-right)}
  .atf-navbar-wrap{padding-top:var(--atf-safe-top)}
  .atf-navbar{min-height:64px;gap:8px;flex-wrap:nowrap!important}
  .atf-brand{flex:1 1 auto;max-width:52%;margin-right:4px!important}
  .atf-brand img{display:block;max-width:100%;height:auto;max-height:52px;object-fit:contain;object-position:left center}
  .atf-mobile-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto;white-space:nowrap}
  .atf-mobile-actions a,.atf-mobile-actions button{min-height:44px;min-width:44px;touch-action:manipulation}
  .atf-mobile-login-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
  #atfMainNav{width:100%;max-height:calc(100dvh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(14px + var(--atf-safe-bottom))}
  .atf-nav-list{align-items:stretch!important;width:100%}
  .atf-nav-list .nav-item,.atf-nav-list .nav-link{width:100%}
  .atf-nav-list .nav-link{min-height:44px;display:flex;align-items:center}
  .atf-network-dropdown{position:static!important;transform:none!important;width:100%;max-width:100%;box-shadow:none!important;margin:4px 0 8px!important}
  .atf-network-dropdown-item{white-space:normal!important;overflow-wrap:anywhere}
  .atf-mobile-account-card{width:100%}

  /* Common public layout grids/cards */
  .row>[class*="col-"]{min-width:0}
  .card,.panel,.atf-card,.activity-card,.news-card,.event-card,.service-card{max-width:100%}
  .section-title,.section-heading,h1,h2,h3{overflow-wrap:anywhere}

  /* Make form actions thumb-friendly */
  .btn,button,input[type="submit"],input[type="button"],input[type="reset"],a.btn{min-height:44px;touch-action:manipulation}
  .form-control,select,textarea,input:not([type="checkbox"]):not([type="radio"]){max-width:100%}

  /* Large tables from CMS pages should never push the viewport */
  table{max-width:100%}
  .table-responsive table{margin-bottom:0}
}

@media (max-width:767.98px){
  .container,.atf-container{width:100%!important;padding-left:14px!important;padding-right:14px!important}
  section{max-width:100vw}
  .row{margin-left:-7px;margin-right:-7px}
  .row>[class*="col-"]{padding-left:7px;padding-right:7px}
  h1{font-size:clamp(26px,8vw,38px)!important;line-height:1.22!important}
  h2{font-size:clamp(22px,6.6vw,31px)!important;line-height:1.28!important}
  h3{font-size:clamp(19px,5.2vw,25px)!important;line-height:1.32!important}
  p,li{line-height:1.65}

  /* iOS Safari: 16px prevents focus zoom */
  input,select,textarea,.form-control,.select2-container .select2-selection--single,.select2-search__field{font-size:16px!important}
  input,select,.form-control{min-height:44px}
  textarea.form-control{min-height:110px}
  .input-group{max-width:100%}

  /* Public forms */
  .form-group,.mb-3,.form-row{max-width:100%}
  .form-row{display:flex;flex-wrap:wrap}
  .form-row>[class*="col-"]{flex:0 0 100%;max-width:100%}

  /* Tables: automatic scrolling even when an old page missed table-responsive */
  .content-area table,.page-content table,.atf-content table,.card-body table,.panel-body table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .content-area table td,.content-area table th,.page-content table td,.page-content table th,.atf-content table td,.atf-content table th{white-space:normal;min-width:110px}

  /* Bootstrap modals/offcanvas-like content */
  .modal{padding-left:0!important;padding-right:0!important}
  .modal-dialog{width:calc(100vw - 20px)!important;margin:10px auto!important}
  .modal-content{border-radius:14px;max-height:calc(100dvh - 20px);overflow:auto;-webkit-overflow-scrolling:touch}
  .modal-footer{display:flex;flex-wrap:wrap;gap:8px}
  .modal-footer .btn{flex:1 1 auto;margin:0!important}

  /* Fixed/sticky elements must respect iPhone safe area */
  .fixed-bottom,.sticky-bottom{padding-bottom:var(--atf-safe-bottom)}
  footer,.atf-footer{padding-bottom:calc(12px + var(--atf-safe-bottom))}
}

@media (max-width:575.98px){
  .atf-brand{max-width:42%}
  .atf-brand img{max-height:44px}
  .atf-mobile-login-btn{padding:7px 9px!important;font-size:12px!important;border-radius:9px!important}
  .atf-mobile-login-btn span{display:inline!important}
  .atf-mini-donate,.navbar-toggler{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}
  .btn-group{display:flex;flex-wrap:wrap;max-width:100%}
  .btn-group>.btn{flex:1 1 auto}
  .pagination{flex-wrap:wrap;gap:3px}
  .breadcrumb{flex-wrap:wrap}
}

@media (max-width:374.98px){
  .atf-mobile-login-btn span{display:none!important}
  .atf-brand{max-width:52%}
  .container,.atf-container{padding-left:10px!important;padding-right:10px!important}
}

/* iPhone landscape / short screens */
@media (orientation:landscape) and (max-height:500px){
  #atfMainNav{max-height:calc(100dvh - 58px)}
  .modal-content{max-height:calc(100dvh - 12px)}
}

@supports (-webkit-touch-callout:none){
  body{-webkit-font-smoothing:antialiased}
  input,textarea,select{font-size:16px!important}
  a,button{-webkit-tap-highlight-color:rgba(11,90,52,.14)}
}