/* === Complete Modern CSS for Al-Quran Online Class === */

/* --- Color Palette --- */
:root {
  --bg-color: #ffffff; /* White background */
  --subtle-bg: #f8f9fa; /* Very light grey for subtle backgrounds */
  --border-color: #dee2e6; /* Standard border color */
  --card-border-color: #e9ecef; /* Slightly lighter border for cards */
  --list-item-border: #f1f3f5; /* Very light border for list items */
  --light-blue: #A0D2DB; 
  --light-green: #C1E1C1; 
  --gold-accent: #D4AF37; 
  --dark-text: #495057;  
  --heading-text: #212529; /* Darker heading text */
  /* Updated primary color */
  --primary-blue: #00647C; 
  --primary-blue-darker: #004b5f; /* Darker shade for hover */
  --primary-blue-darkest: #004252; /* Even darker shade for hover border */
  --white-text: #ffffff;
  --dark-bg: #212529; 
  --whatsapp-green: #25D366;
  --whatsapp-green-dark: #1DA851;
  --light-grey-bg: #f8f9fa; /* Bootstrap light grey */
}

/* --- General Body & Typography --- */
body {
  background-color: var(--bg-color); 
  color: var(--dark-text);
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .nav-link {
    font-family: 'Poppins', sans-serif;
    color: var(--heading-text);
}

h1, h2, h3 {
    font-weight: 600; 
}
h4, h5, h6 {
    font-weight: 500; 
}

.page-title-minimal, .section-title-minimal, .section-title {
    color: var(--heading-text);
    font-weight: 600;
    margin-bottom: 2.5rem !important; 
}
.page-title-minimal { margin-bottom: 0.5rem !important; }
.section-title { margin-bottom: 3rem !important; } /* Keep original spacing for index page sections */


.lead {
    font-weight: 400; 
    font-size: 1.1rem; 
}

strong {
    font-weight: 600;
    color: var(--heading-text); 
}

/* --- Navbar Styling --- */
.navbar { /* Applies to all pages now */
    background-color: var(--bg-color) !important; 
    padding-top: 1rem; 
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color); 
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Re-add subtle shadow */
}
.navbar .navbar-nav .nav-link {
    color: var(--dark-text); 
    font-weight: 500; 
    font-size: 1rem; 
    margin-left: 0.75rem; 
    margin-right: 0.75rem;
    transition: color 0.2s ease;
}
.navbar .navbar-nav .nav-link.active {
    color: var(--primary-blue) !important; 
    font-weight: 600;
}
.navbar .navbar-brand {
    color: var(--heading-text); 
    font-weight: 600; 
    font-size: 1.3rem; 
}
.navbar .navbar-nav .nav-link:hover {
    color: var(--primary-blue); 
}
/* Collapsed menu background */
@media (max-width: 991.98px) { 
  .navbar-collapse {
    background-color: var(--bg-color); 
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 0.375rem; 
    border: 1px solid var(--border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05); 
  }
   .navbar .navbar-nav .nav-link {
     margin-left: 0; 
     margin-right: 0;
     padding-top: 0.5rem; 
     padding-bottom: 0.5rem;
     text-align: center;
  }
   .navbar .whatsapp-btn {
       display: block; 
       width: 80%; 
       margin-left: auto !important; 
       margin-right: auto !important;
       margin-top: 1rem !important; 
   }
}

/* --- Hero Section Styling (Homepage) --- */
.hero-section {
    background: url('../images/hero-image.jpg') no-repeat center center; 
    background-size: cover;
    position: relative;
    color: var(--white-text); 
    padding-top: 4rem; 
    padding-bottom: 4rem;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.60); 
    z-index: 1;
}
.hero-section .container {
    position: relative;
    z-index: 2;
}
.hero-section h1 {
    color: var(--white-text);
    font-weight: 700;
    font-size: 2.2rem; 
}
.hero-section .lead {
    color: rgba(255, 255, 255, 0.9); 
    font-size: 1.1rem; 
    margin-bottom: 2.5rem !important; 
}
.hero-section .whatsapp-btn {
    padding: 0.6rem 1.2rem; 
    font-size: 1rem; 
}

/* --- Shared Card/Item Styles --- */
.course-item, .course-card { /* Combined styles */
    background-color: var(--bg-color);
    padding: 1.5rem; 
    border: 1px solid var(--card-border-color);
    border-radius: 0.5rem; 
    transition: box-shadow 0.2s ease-in-out;
    height: 100%; 
    display: flex; 
    flex-direction: column; 
}
.course-item:hover, .course-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.06) !important; 
}
.course-item .card-body, .course-card .card-body { /* Adapt card-body if needed */
    padding: 0; 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}
.course-item h5, .course-card h5, .course-header .course-title { /* Style for titles */
  font-weight: 600;
  color: var(--heading-text);
  margin-bottom: 0.75rem; 
  font-size: 1.15rem; 
}
.course-header .course-title { /* Specific for How It Works page */
    font-size: 1.4rem; 
}

.course-item p, .course-card p, .course-details p {
    margin-bottom: 0.75rem; 
    font-size: 0.95rem; 
    color: var(--dark-text);
}
.course-item strong, .course-card strong, .course-details strong { 
    color: var(--primary-blue); 
    font-weight: 600;
}
/* Specific Icon Colors */
.course-icon {
    width: 35px; 
    text-align: center;
}
.icon-qaida { color: var(--light-blue); }
.icon-nazirah { color: var(--light-green); }
.icon-tajweed { color: var(--primary-blue); } 
.icon-hifz { color: var(--gold-accent); } 

/* --- Simple Steps List --- */
.steps-list .list-group-item {
    border: none; 
    background-color: transparent; 
    border-bottom: 1px solid var(--list-item-border); 
    padding: 1rem 0.75rem; 
}
.steps-list .list-group-item:last-child {
    border-bottom: none; 
}
.steps-list .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--primary-blue);
    color: var(--white-text);
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0; 
}

/* --- Course Overview List Styling (Courses Page) --- */
.course-overview-list-section h2 {
    font-weight: 600;
    color: var(--heading-text);
}
.overview-list-group {
    border: 1px solid var(--card-border-color);
    border-radius: 0.5rem;
    overflow: hidden; 
    background-color: var(--bg-color); 
}
.overview-list-item {
    background-color: transparent; 
    padding: 1rem 1.5rem; 
    border-bottom: 1px solid var(--list-item-border); 
    transition: background-color 0.2s ease-in-out;
}
.overview-list-item:last-child {
    border-bottom: none; 
}
.overview-list-item:hover {
    background-color: var(--subtle-bg); 
}
.overview-list-item .overview-title {
    font-weight: 600;
    color: var(--heading-text);
    font-size: 1.1rem;
}
.overview-list-item .overview-details {
    font-size: 0.9rem;
    color: var(--dark-text);
    margin-bottom: 0.25rem !important;
}
.overview-list-item .text-muted { 
    font-size: 0.85rem;
}
.overview-list-item .overview-button {
    font-weight: 500;
    padding: 0.5rem 1rem; 
    font-size: 1rem; 
    border-color: var(--card-border-color); 
    color: var(--primary-blue);
    align-self: center; 
    margin-top: 0.5rem; 
}
@media (min-width: 576px) { 
    .overview-list-item .overview-button {
        margin-top: 0;
    }
}
.overview-list-item .overview-button:hover {
    background-color: var(--primary-blue);
    color: var(--white-text);
}

/* --- How It Works Page Specific Styles --- */
.section-decorative-icon {
    font-size: 6rem; /* Default large size */
    color: var(--primary-blue); /* Default color */
    opacity: 0.8;
}

/* --- CTA Section Styling --- */
.cta-section-minimal, .cta-section-home { 
  border: 1px solid var(--card-border-color);
  padding: 2rem !important; 
}
.cta-section-minimal h2, .cta-section-home h2 {
  color: var(--heading-text);
  font-weight: 600;
  font-size: 1.6rem; 
}
.cta-section-minimal p, .cta-section-home p {
  color: var(--dark-text);
  font-size: 1.05rem; 
}
.cta-section-minimal .whatsapp-btn, .cta-section-home .whatsapp-btn {
    background-color: var(--whatsapp-green);
    border-color: var(--whatsapp-green);
    color: white;
    padding: 0.6rem 1.2rem; 
    font-size: 1rem; 
    font-weight: 600;
    transition: background-color 0.2s ease;
}
.cta-section-minimal .whatsapp-btn:hover, .cta-section-home .whatsapp-btn:hover {
    background-color: var(--whatsapp-green-dark);
    border-color: var(--whatsapp-green-dark);
}
.cta-section-home {
   background: linear-gradient(135deg, var(--light-green-bg), var(--light-blue-bg)); 
}
.cta-section-minimal { 
  background-color: var(--subtle-bg); 
}


/* --- Buttons --- */
/* WhatsApp Button Styling (General) */
.whatsapp-btn {
    background-color: var(--whatsapp-green);
    border-color: var(--whatsapp-green);
    color: white;
    font-weight: 500; 
    transition: background-color 0.2s ease;
}
.whatsapp-btn:hover {
    background-color: var(--whatsapp-green-dark);
    border-color: var(--whatsapp-green-dark);
    color: white;
}
/* Updated .btn-primary rules */
.btn-primary {
    background-color: var(--primary-blue); 
    border-color: var(--primary-blue); 
    color: var(--white-text); 
}
.btn-primary:hover {
    background-color: var(--primary-blue-darker); 
    border-color: var(--primary-blue-darkest); 
    color: var(--white-text); 
}
/* Explore Courses Button (Reversed Hover) */
.btn-explore {
    background-color: transparent;
    border: 1px solid var(--primary-blue); 
    color: var(--primary-blue);
    padding: 0.375rem 0.75rem; 
    font-size: 1rem; 
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    text-decoration: none; 
    display: inline-block; 
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border-radius: 0.375rem; 
    font-weight: 500; 
}
.btn-explore:hover {
    background-color: var(--primary-blue); 
    border-color: var(--primary-blue); 
    color: var(--white-text);
}
/* Custom Extra Large Button */
.btn-xl-custom {
  padding: 0.8rem 1.8rem; 
  font-size: 1.25rem; 
}

/* --- Footer --- */
footer {
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem;
    background-color: var(--dark-bg);
    color: rgba(255, 255, 255, 0.7); 
}
footer p {
    margin-bottom: 0.25rem; 
    font-size: 0.9rem; 
}

/* Optional: Footer Social Icon Hover Effect */
.social-icon-link {
    transition: color 0.2s ease-in-out;
    opacity: 0.7; /* Make icons slightly less prominent */
}
.social-icon-link:hover {
    color: var(--white-text) !important; /* Brighter white on hover */
    opacity: 1;
}

/* Subtle background for specific sections on white background */
.bg-light-subtle {
    background-color: var(--light-grey-bg) !important; 
}

/* Force custom primary color for Bootstrap's text-primary class */
.minimalist-page .text-primary, 
body .text-primary { 
  color: var(--primary-blue) !important; 
}

/* --- Additional Mobile Adjustments --- */
@media (max-width: 991.98px) { /* Target medium screens and below */
     .section-decorative-icon {
        font-size: 5rem; /* Reduce size on medium screens */
    }
}

@media (max-width: 767.98px) { /* Target small screens and below */
    h1, .display-4 {
        font-size: 1.8rem; /* Smaller H1 on mobile */
    }
    h2, .section-title, .section-title-minimal, .course-header .course-title {
        font-size: 1.4rem; /* Smaller H2 on mobile */
    }
    .hero-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
        min-height: auto; 
    }
    .course-item, .course-card {
        padding: 1rem; 
    }
    .cta-section-minimal, .cta-section-home {
        padding: 1.5rem !important; 
    }
    .cta-section-minimal p, .cta-section-home p {
        font-size: 1rem; 
    }
     /* How It Works Page Mobile Icon Size */
    .section-decorative-icon {
        font-size: 4rem; /* Further reduce size on small screens */
        margin-bottom: 1.5rem; /* Add space below icon when stacked */
    }
     /* Ensure How It Works list icons align properly */
    .how-it-works-page .list-unstyled i {
        margin-top: 0.25rem; /* Adjust icon alignment if needed */
    }
}