/* =============================================
   DAWAT-E-ISLAMI EUROPE - MAIN STYLESHEET
   Module 1: Base Setup & CSS Framework

   This file imports all CSS modules in the correct order.
   ============================================= */

/* 1. CSS Custom Properties (Variables) */
@import url('variables.css');

/* 2. CSS Reset / Normalize */
@import url('reset.css');

/* 3. Base Element Styles */
@import url('base.css');

/* 4. Layout System (Grid, Flexbox, Sections) */
@import url('layout.css');

/* 5. Reusable Components */
@import url('components.css');

/* 6. Utility Classes */
@import url('utilities.css');

/* =============================================
   COMPONENT MODULES
   ============================================= */

/* 7. Header & Navigation (Module 2) */
@import url('components/header.css');

/* 8. Footer (Module 3) */
@import url('components/footer.css');

/* 9. Hero Section (Module 4) */
@import url('components/hero.css');

/* 10. About Section (Module 5) */
@import url('components/about.css');

/* 11. Centers Section (Module 6) */
@import url('components/centers.css');

/* 12. Activities Section (Module 7) */
@import url('components/activities.css');

/* 13. Education Section (Module 8) */
@import url('components/education.css');

/* 14. Welfare Section (Module 9) */
@import url('components/welfare.css');

/* 15. Daily Content Section (Module 10) */
@import url('components/daily-content.css');

/* 16. Contact Section (Module 11) */
@import url('components/contact.css');

/* 17. Language Switcher (Module 12) */
@import url('components/language-switcher.css');

/* 18. Homepage Assembly (Module 13) */
@import url('components/homepage.css');

/* 19. Inner Pages (Module 14) */
@import url('components/inner-pages.css');

/* =============================================
   GLOBAL CUSTOM STYLES
   Add any global overrides or custom styles below
   ============================================= */

/* Page wrapper for sticky footer */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-wrapper main {
  flex: 1;
}

/* Smooth anchor scroll offset for fixed header */
html {
  scroll-padding-top: 120px;
}

/* Custom selection color */
::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

/* Focus visible styles */
:focus-visible {
  outline: 2px solid var(--color-accent-purple);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Loading state */
.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Overlay backdrop */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Prevent body scroll when modal is open */
body.no-scroll {
  overflow: hidden;
}

/* =============================================
   CRITICAL OVERRIDES FOR SECTIONS
   These rules ensure text visibility
   ============================================= */

/* Daily Content Section - Light green theme */
.daily-content-section .section-badge {
  background: var(--color-primary-100) !important;
  color: var(--color-primary-700) !important;
}

.daily-content-section .section-title,
.daily-content-section h2 {
  color: var(--color-primary-800) !important;
}

.daily-content-section .section-subtitle,
.daily-content-section .section-header p {
  color: var(--color-gray-600) !important;
}

/* =============================================
   PRINT STYLES
   ============================================= */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 2cm;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  .header,
  .footer,
  .nav,
  .btn,
  .no-print {
    display: none !important;
  }
}