/* ========== Utility Classes ========== */

/* Add padding for consistent spacing */
.padding-sm {
  padding: 0.5rem !important;
}

.padding-md {
  padding: 1rem !important;
}

.padding-lg {
  padding: 2rem !important;
}

/* Add margin for consistent spacing */
.margin-sm {
  margin: 0.5rem !important;
}

.margin-md {
  margin: 1rem !important;
}

.margin-lg {
  margin: 2rem !important;
}

/* Flexbox utility for center alignment */
.flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ========== General Color Styles ========== */

/* Primary Colors */
:root {
  --color-red: #EF476F;
  --color-yellow: #FFD166;
  --color-green: #06D6A0;
  --color-blue: #118AB2;
  --color-navy: #073B4C;
}

/* Background Colors */
.bg-red {
  background-color: var(--color-red) !important;
}

.bg-yellow {
  background-color: var(--color-yellow) !important;
}

.bg-green {
  background-color: var(--color-green) !important;
}

.bg-blue {
  background-color: var(--color-blue) !important;
}

.bg-navy {
  background-color: var(--color-navy) !important;
}

/* Text Colors */
.text-red {
  color: var(--color-red) !important;
}

.text-yellow {
  color: var(--color-yellow) !important;
}

.text-green {
  color: var(--color-green) !important;
}

.text-blue {
  color: var(--color-blue) !important;
}

.text-navy {
  color: var(--color-navy) !important;
}

/* Border Colors */
.border-red {
  border-color: var(--color-red) !important;
}

.border-yellow {
  border-color: var(--color-yellow) !important;
}

.border-green {
  border-color: var(--color-green) !important;
}

.border-blue {
  border-color: var(--color-blue) !important;
}

.border-navy {
  border-color: var(--color-navy) !important;
}

/* Buttons */
.btn-red {
  background-color: var(--color-red) !important;
  color: #ffffff !important;
  border: none;
}

.btn-red:hover {
  background-color: darken(var(--color-red), 10%) !important;
}

.btn-yellow {
  background-color: var(--color-yellow) !important;
  color: #ffffff !important;
  border: none;
}

.btn-yellow:hover {
  background-color: darken(var(--color-yellow), 10%) !important;
}

.btn-green {
  background-color: var(--color-green) !important;
  color: #ffffff !important;
  border: none;
}

.btn-green:hover {
  background-color: darken(var(--color-green), 10%) !important;
}

.btn-blue {
  background-color: var(--color-blue) !important;
  color: #ffffff !important;
  border: none;
}

.btn-blue:hover {
  background-color: darken(var(--color-blue), 10%) !important;
}

.btn-navy {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
  border: none;
}

.btn-navy:hover {
  background-color: darken(var(--color-navy), 10%) !important;
}

/* Alerts */
.alert-red {
  background-color: var(--color-red) !important;
  color: #ffffff !important;
  border-left: 4px solid darken(var(--color-red), 20%);
}

.alert-yellow {
  background-color: var(--color-yellow) !important;
  color: #000000 !important;
  border-left: 4px solid darken(var(--color-yellow), 20%);
}

.alert-green {
  background-color: var(--color-green) !important;
  color: #ffffff !important;
  border-left: 4px solid darken(var(--color-green), 20%);
}

.alert-blue {
  background-color: var(--color-blue) !important;
  color: #ffffff !important;
  border-left: 4px solid darken(var(--color-blue), 20%);
}

.alert-navy {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
  border-left: 4px solid lighten(var(--color-navy), 20%);
}

/* ========== Universal Button Style Adjustments ========== */

/* Universal Button Style */
.btn-custom {
  background-color: var(--color-blue); /* Button background color */
  color: #ffffff;                     /* White text */
  border: 2px solid var(--color-blue); /* Blue border for contrast */
  padding: 0.5rem 1rem;               /* Adjust padding for a compact look */
  font-size: 1rem;                    /* Standard font size */
  font-weight: 600;                   /* Semi-bold text */
  border-radius: 6px;                 /* Slightly rounded corners */
  text-transform: none;               /* Normal text case */
  transition: all 0.3s ease;          /* Smooth hover effects */
  width: auto;                        /* Width adjusts to content */
}

/* Hover State */
.btn-custom:hover {
  background-color: var(--color-green); /* Green background on hover */
  color: #ffffff;                      /* Ensure text stays white */
  border-color: var(--color-green);    /* Match border with hover background */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for effect */
}

/* Disabled State */
.btn-custom:disabled {
  background-color: #e0e0e0; /* Grey background for disabled button */
  color: #9e9e9e;           /* Light grey text */
  border-color: #e0e0e0;    /* Match border with disabled background */
  cursor: not-allowed;      /* Show disabled cursor */
}

/*
==============================================
    MOBILE RESPONSIVENESS
==============================================
*/

/* General body and typography adjustments for smaller screens */
body {
    -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjustments after orientation change */
}

/* --- Medium devices (tablets, less than 992px) --- */
@media (max-width: 991.98px) {
    /* Adjust hero section typography */
    .hero-section h1 {
        font-size: 2.5rem;
    }
    .hero-section p {
        font-size: 1.1rem;
    }

    /* Make columns in sections stack */
    .row > [class^="col-md-"] {
        margin-bottom: 1.5rem;
    }
}


/* --- Small devices (landscape phones, less than 768px) --- */
@media (max-width: 767.98px) {
    /* Reduce padding on main sections for more content space */
    section.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Adjust typography for better readability */
    h1, .display-4 { font-size: 2.2rem; }
    h2, .h2 { font-size: 1.8rem; }
    h3, .h3 { font-size: 1.5rem; }

    /* Make forms and their containers full-width */
    .col-md-7, .col-md-6, .col-md-5 {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Center-align text in columns that were previously aligned left/right on desktop */
    .text-md-start, .text-md-end {
        text-align: center !important;
    }

    /* Ensure buttons in hero/forms are not excessively wide */
    .hero-section .btn, .d-grid .btn {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    /* Stack quiz bank items cleanly */
    .quiz-list-item .row > div {
        text-align: center !important;
        margin-bottom: 1rem;
    }
    .quiz-actions .btn {
      margin-bottom: 0.5rem;
    }
    .quiz-actions form {
      display: block !important;
    }
}


/* --- Extra small devices (portrait phones, less than 576px) --- */
@media (max-width: 575.98px) {
    /* Further reduce header padding */
    header .navbar {
        padding: 0.5rem 1rem;
    }

    /* Make dropdown full-width for easier tapping */
    .dropdown-menu {
        position: static !important; /* Override bootstrap positioning */
        width: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
        float: none;
    }

    /* Stack footer links vertically */
    footer ul {
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }

    /* Adjust hero section for very small screens */
    .hero-section h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    .hero-section p {
        font-size: 1rem;
    }
    .hero-section .btn {
        width: 100%;
    }

    /* Ensure carousel items on landing page show one card at a time */
    #popularQuizCarousel .carousel-inner .carousel-item > div {
      display: none;
    }
    #popularQuizCarousel .carousel-inner .carousel-item.active > div {
      display: flex;
    }
}