/* ============================================================
   ISNM Design Polish v1.0
   Targeted overrides for a cleaner, more professional public site
   ============================================================ */

/* --- 3D Glassmorphic Nav Desktop refinement --- */
@media (min-width: 992px) {
  .isnm-navbar {
    min-height: 64px;
  }
  .isnm-navbar .navbar-collapse {
    height: 64px;
  }
  .isnm-navbar .navbar-nav {
    gap: 4px;
  }
  .isnm-navbar .navbar-brand {
    height: 64px;
  }
  .isnm-navbar .dropdown-menu {
    left: 0;
  }
}

/* --- School Title: let JS ticker handle scrolling, disable CSS animation --- */
.ticker-track {
  animation: none !important;
}

.school-title {
  animation: none !important;
  color: var(--isnm-yellow) !important;
  text-shadow:
    0px 1px 0px rgba(0,0,0,0.8),
    0px 2px 0px rgba(0,0,0,0.6),
    0px 3px 0px rgba(0,0,0,0.4),
    0px 4px 0px rgba(0,0,0,0.2) !important;
}

/* --- Fixed Hero Overlay (only hidden on hero-header pages) --- */
.hero-header .hero-overlay {
  display: none;
}

/* --- Remove conflicting generic navbar styles from responsive.css (desktop only) --- */
@media (min-width: 992px) {
  .navbar.navbar-expand-lg {
    background: transparent !important;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: inherit;
    padding: inherit;
    border-radius: inherit;
  }
}

/* --- Card refinements --- */
.program-card,
.facility-card,
.news-card,
.stat-card,
.vm-card,
.donation-card,
.contact-card,
.opportunity-card,
.benefit-card,
.achievement-card,
.announcement-card,
.action-card,
.stats-card,
.requirements-card,
.interview-card,
.form-container,
.content-section,
.section-card,
.donation-card,
.hours-card,
.member-card,
.welcome-card,
.quick-action-card,
.upload-card {
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}

.program-card:hover,
.facility-card:hover,
.news-card:hover,
.stat-card:hover,
.vm-card:hover,
.donation-card:hover,
.contact-card:hover,
.opportunity-card:hover,
.benefit-card:hover,
.achievement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 12px 24px rgba(0,0,0,0.04);
}

/* --- Section spacing polish --- */
section.py-5 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

/* --- Cinematic hero — keep background visible --- */
.hero-section .hero-overlay {
  display: block;
}

/* --- Consistent page header heights (skip bg-image headers) --- */
.page-header:not(.page-header-bg),
.hero-header:not(.hero-header-bg) {
  padding: 3rem 0 !important;
}
.page-header-bg,
.hero-header-bg {
  padding: 5rem 0 4rem !important;
}

/* --- Mobile nav collapse: ensure hamburger shows only < 992px --- */
.isnm-navbar .navbar-toggler {
  display: block;
}
@media (min-width: 992px) {
  .isnm-navbar .navbar-toggler {
    display: none;
  }
}

/* --- Responsive tweaks for 360-575px --- */
@media (max-width: 575px) {
  .header-row-main {
    padding: 3px 8px;
    gap: 6px;
  }
  .logo-img {
    height: 42px;
    width: 42px;
  }
  .school-title {
    font-size: 0.95rem !important;
    letter-spacing: 1.5px;
  }
  .school-motto {
    font-size: 0.58rem;
  }
  .hero-section {
    min-height: 90dvh;
  }
  .cinematic-title {
    font-size: 1.5rem !important;
  }
  .hero-stats {
    gap: 8px;
  }
  .stat-item {
    padding: 10px 8px;
    min-width: 70px;
  }
  .stat-number {
    font-size: 1.3rem;
  }
  .stat-label {
    font-size: 0.7rem;
  }
  .btn-cinematic {
    padding: 10px 18px;
    font-size: 0.8rem;
    min-width: 160px;
  }
  .page-title {
    font-size: 1.5rem !important;
  }
  .section-title {
    font-size: 1.4rem !important;
  }
  .program-card,
  .facility-card,
  .news-card,
  .vm-card {
    padding: 1rem;
  }
  .program-header {
    padding: 1rem;
  }
  .program-content {
    padding: 1rem;
  }
  .news-card-img,
  .news-card-img-placeholder {
    height: 140px;
  }
  .vmv-card {
    padding: 1.5rem;
  }
  .footer-links ul {
    columns: 1;
  }
}

/* --- 576-767px (small tablet) --- */
@media (min-width: 576px) and (max-width: 767px) {
  .hero-section {
    min-height: 85dvh;
  }
  .cinematic-title {
    font-size: 2rem !important;
  }
  .stat-item {
    padding: 14px 12px;
    min-width: 90px;
  }
}

/* --- 768-991px (tablet) --- */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-section {
    min-height: 80dvh;
  }
  .cinematic-title {
    font-size: 2.4rem !important;
  }
  .stat-item {
    padding: 18px 16px;
    min-width: 110px;
  }
}

/* --- Fix hero content on mobile not overlapping properly --- */
@media (max-width: 991px) {
  .hero-content {
    padding: 1.5rem 1rem;
  }
}

/* --- Program cards: equal height fix --- */
@media (min-width: 768px) {
  .programs-overview .row.g-4 > [class*="col-"] {
    display: flex;
  }
  .programs-overview .program-card {
    height: 100%;
  }
}

/* --- Gallery grid consistency --- */
.row.g-4 > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.row.g-4 > [class*="col-"] > * {
  flex: 1;
}

/* --- Contact grid compact --- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.contact-card {
  height: 100%;
  padding: 1.5rem !important;
  text-align: center;
}
.contact-icon {
  width: 60px !important;
  height: 60px !important;
  margin-bottom: 1rem !important;
}
.contact-icon i {
  font-size: 1.8rem !important;
}
.contact-card h4 {
  font-size: 1.1rem !important;
  margin-bottom: 0.8rem !important;
}
.contact-card p {
  font-size: 0.85rem !important;
  margin-bottom: 0.3rem !important;
  line-height: 1.5 !important;
}
.contact-card p i {
  width: 16px;
  text-align: center;
  margin-right: 6px;
  color: #1A237E;
}
.contact-info-section {
  padding: 2rem 0 !important;
}
.contact-info-section .section-header {
  margin-bottom: 1.5rem;
}
.contact-info-section .section-title {
  font-size: 1.3rem;
}

/* --- Smooth page transitions --- */
main {
  min-height: 60vh;
}

/* --- Fix overlapping elements on small screens --- */
@media (max-width: 575px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .values-grid {
    grid-template-columns: 1fr 1fr;
  }
  .key-highlights {
    grid-template-columns: 1fr;
  }
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  .board-members {
    grid-template-columns: 1fr;
  }
  .contact-form-container {
    padding: 1.5rem;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .contact-card {
    padding: 1.2rem !important;
  }
  .contact-icon {
    width: 50px !important;
    height: 50px !important;
  }
  .contact-icon i {
    font-size: 1.5rem !important;
  }
  .contact-card h4 {
    font-size: 1rem !important;
    margin-bottom: 0.6rem !important;
  }
  .contact-card p {
    font-size: 0.78rem !important;
  }
  .contact-info-section {
    padding: 1.5rem 0 !important;
  }
  .btn {
    padding: 10px 18px;
    font-size: 0.85rem;
  }

  /* ── About Section Mobile ── */
  .about-section .row.align-items-center {
    gap: 1.5rem;
  }
  .about-content {
    padding-right: 0 !important;
  }
  .about-content .tag {
    font-size: 0.68rem !important;
  }
  .about-section .section-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.5rem;
  }
  .about-section .section-divider {
    margin-bottom: 0.8rem;
  }
  .about-text {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
  }
  .about-content .row.g-3 {
    gap: 0.6rem !important;
  }
  .about-content .row.g-3 > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .vm-card {
    padding: 0.9rem !important;
    text-align: left;
  }
  .vm-card-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  .vm-card h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.3rem !important;
  }
  .vm-card p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }
  .about-content .d-flex.gap-3 {
    gap: 0.6rem !important;
  }
  .about-content .btn-3d {
    font-size: 0.78rem !important;
    padding: 8px 14px !important;
    flex: 1;
    justify-content: center;
    min-width: 0;
    white-space: nowrap;
  }
  .about-image img {
    min-height: 180px !important;
    max-height: 250px !important;
    object-fit: cover;
  }

  /* ── Why Choose Section Mobile ── */
  .why-choose-section .section-title {
    font-size: 1.1rem !important;
  }
  .why-choose-section .section-subtitle {
    font-size: 0.78rem !important;
  }
  .feature-card {
    padding: 1.2rem !important;
  }
  .feature-card h4 {
    font-size: 0.95rem !important;
  }
  .feature-card p {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
  }
  .feature-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.2rem !important;
    margin-bottom: 0.8rem !important;
  }
  .feature-card .btn-3d {
    font-size: 0.75rem !important;
    padding: 7px 12px !important;
  }
}

/* --- Print-friendly --- */
@media print {
  .isnm-navbar,
  .isnm-header,
  .hero-section {
    display: none;
  }
}