/* Shared responsive and accessibility fixes for Sayyida Aisha Center */
html { scroll-padding-top: 6rem; }
body { max-width: 100%; }
img, video, iframe, svg { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
.container, .container-fluid { min-width: 0; }
pre, code { overflow-wrap: anywhere; }

/* Home page navigation, hero and sections */
.navbar { gap: .75rem; }
.logo { min-width: 0; }
.logo img { max-width: 180px; }
.nav-links { min-width: 0; }
.about-image { min-width: 0; width: 100%; }
.about-image img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.carousel-item img { display: block; width: 100%; max-width: 100%; object-fit: cover; }
.carousel-text { max-width: 84%; }
.carousel-text h1 { overflow-wrap: anywhere; }

/* Template-driven public pages */
.public-nav { min-height: 70px; }
.public-nav > a:first-child { flex: 0 0 auto; }
.public-nav img { max-width: min(48vw, 220px); object-fit: contain; }
.public-nav-links { min-width: 0; }
.public-page img, .public-card img { max-width: 100%; height: auto; }
.public-page, .public-hero, .public-footer { overflow-wrap: anywhere; }
.public-card, .adm-panel, .apply-card { min-width: 0; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 2000; padding: .75rem 1rem; background: #fff; color: #3B1A27; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }

/* Login and registration forms */
.login-container { width: 100%; max-width: 100%; padding: 1rem; }
.login-card { width: 100%; max-width: 450px; padding: clamp(1.25rem, 5vw, 2.5rem); margin: 1rem auto; }
.login-card form, .login-card input, .login-card button { width: 100%; }
.login-card input { min-width: 0; }
.registration-page, .form-card { min-width: 0; }
.form-card { width: 100%; }
.steps { gap: .75rem; }
.step { min-width: 0; }

/* Legacy portal navigation and content */
.portal-page { overflow-x: hidden; }
.portal-hero { min-width: 0; }
.portal-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.portal-card, .stat-card, .panel, .course-card { min-width: 0; }
.footer { overflow-wrap: anywhere; }

/* Administrator admissions table scrolls inside its own wrapper rather than the page. */
.adm-table-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
.adm-controls select { min-width: 150px; }

@media (max-width: 992px) {
  .navbar { padding-left: 4%; padding-right: 4%; }
  .nav-links { gap: 1rem; }
  .carousel-text { left: 5%; right: 5%; max-width: 90%; }
  .about { gap: 1.5rem; padding-left: 5%; padding-right: 5%; }
  .login-card { max-width: 440px; }
}
@media (max-width: 760px) {
  .navbar { height: auto; min-height: 72px; flex-wrap: wrap; padding-top: .55rem; padding-bottom: .55rem; }
  .logo img { width: 52px !important; height: 54px !important; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-height: 70vh; overflow-y: auto; padding: 1rem 5%; gap: .3rem; align-items: stretch; background: #fff; box-shadow: 0 12px 20px rgba(0,0,0,.1); }
  .nav-links.active { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: .7rem .25rem; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #e9e3e1; border-radius: 10px; background: #fff; color: #3B1A27; }
  .nav-apply { padding: .6rem .85rem !important; }
  .hero { height: auto; min-height: 0; }
  .carousel-item img { height: min(78vh, 680px); min-height: 420px; }
  .about { flex-direction: column; align-items: stretch; padding: 3rem 5%; }
  .about-image, .about-content { width: 100%; flex: auto; }
  .about-image img { width: 100% !important; height: auto !important; }
  h1 { font-size: clamp(2rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.65rem, 6vw, 2.3rem); padding-bottom: 1rem; }
  .portal-hero { padding: 2.5rem 5%; }
  .portal-hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .portal-section { padding-left: 5%; padding-right: 5%; }
  .topbar { padding: 1rem; gap: .75rem; flex-wrap: wrap; }
  .topbar h1 { font-size: 1.15rem; }
  .topbar-actions { gap: .5rem; flex-wrap: wrap; }
  .page-content { padding: 1rem; }
  .adm-heading { align-items: stretch; }
  .adm-controls { width: 100%; }
  .adm-controls > * { flex: 1 1 auto; }
  .admin-admissions { padding-top: 115px !important; }
}
@media (max-width: 480px) {
  .public-nav { gap: .5rem; }
  .public-nav img { height: 38px; max-width: 45vw; }
  .public-menu-toggle { padding: .5rem .6rem; }
  .nav-apply { display: none !important; }
  .public-hero { padding-top: 7rem; }
  .public-hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .public-hero p { font-size: 1rem; }
  .quote-panel { padding: 1rem; font-size: 1rem; }
  .steps { flex-direction: column; align-items: stretch; }
  .step { display: flex; align-items: center; gap: .75rem; text-align: left; }
  .step span { flex: 0 0 40px; width: 40px; height: 40px; margin: 0; }
  .step p { margin: 0; }
  .welcome-banner { padding: 1.25rem; }
  .welcome-banner i { display: none; }
  .stat-card { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
