/* ==========================================================================
   1. ISOLATED TEXT STYLES (Only affects the text you want)
   ========================================================================== */
.custom-main-title {
    font-size: 2.4rem !important;
    color: #1a365d !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    text-align: center !important;
    font-family: 'Segoe UI', sans-serif !important;
    position: relative !important;
    padding-bottom: 20px !important;
    margin-bottom: 35px !important;
    display: block !important;
}

.custom-main-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90px !important;
    height: 5px !important;
    background-color: #3182ce !important;
    border-radius: 4px !important;
    display: block !important;
}

.custom-welcome-lead {
    font-size: 1.25rem !important;
    color: #4a5568 !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    font-family: 'Segoe UI', sans-serif !important;
    display: block !important;
}

.custom-unique-heading {
    font-size: 1.8rem !important;
    color: #2c5282 !important;
    margin: 45px 0 25px 0 !important;
    position: relative !important;
    padding-bottom: 12px !important;
    display: block !important;
    font-family: 'Segoe UI', sans-serif !important;
}

.custom-unique-heading::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 60px !important;
    height: 4px !important;
    background-color: #3182ce !important;
    border-radius: 2px !important;
    display: block !important;
}

/* ==========================================================================
   2. MOBILE-FRIENDLY ADMISSION FORMS (Only applies inside your content area)
   ========================================================================== */
.entry-content form, 
main form, 
#content form, 
.wpforms-container {
    max-width: 850px !important;
    margin: 35px auto !important;
    background: #ffffff !important;
    padding: 35px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

main form h3, .wpforms-title {
    font-size: 1.6rem !important;
    color: #1a365d !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 10px !important;
}

main form label, .wpforms-field-label {
    display: block !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
    color: #4a5568 !important;
    margin-bottom: 6px !important;
    margin-top: 15px !important;
}

main form input[type="text"], 
main form input[type="date"], 
main form select, 
.wpforms-field input, 
.wpforms-field select {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 1rem !important;
    color: #2d3748 !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

main form input:focus, 
main form select:focus, 
.wpforms-field input:focus {
    outline: none !important;
    border-color: #3182ce !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.12) !important;
}

@media (min-width: 768px) {
    .entry-content form, main form, .wpforms-container { 
        padding: 45px 50px !important; 
    }
}

/* ==========================================================================
   3. FORCE MISSION & VISION STATEMENT TITLES TO WHITE
   ========================================================================== */
.mission-box h3, 
.vision-box h3, 
div[class*="-box"] h3 {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}
/* 4. Mission Statement Callout */
.school-landing .mission-box {
    margin-top: 50px;
    background: linear-gradient(135deg, #1a365d 0%, #2a4365 100%);
    color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(26, 54, 93, 0.2);
}

.school-landing .mission-box h3 {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: #ebf8ff;
}

.school-landing .mission-box blockquote {
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.8;
    opacity: 0.95;
}
/* ==========================================================================
   CONTACT SECTION LAYOUT WRAPPER
   ========================================================================== */
.school-contact-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Master Grid containing both Information Sections */
.school-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ==========================================================================
   YELLOW LABELS ("Contact" & "Location")
   ========================================================================== */
.school-contact-container .badge-label {
    background-color: #ffb703 !important; /* Theme golden yellow */
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 24px !important;
    border-radius: 50px !important; /* Forces the oval pill shape */
    display: inline-block !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 10px rgba(255, 183, 3, 0.2);
}

/* ==========================================================================
   INFORMATION ROW BLOCKS & TYPOGRAPHY
   ========================================================================== */
.contact-info-block, 
.location-info-block {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
    border-left: 5px solid #1a365d; /* Institutional deep navy left edge accent */
    margin-bottom: 25px;
}

/* Text Lines styling */
.school-contact-container p {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: #4a5568 !important; /* Clean charcoal text */
    margin-bottom: 12px !important;
}

/* Emphasizes staff roles and key titles */
.school-contact-container strong {
    color: #1a365d !important;
    font-weight: 700;
}

/* Highlight style for the GPS Location */
.gps-highlight {
    background-color: #f1f5f9;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
    border: 1px dashed #cbd5e1;
    font-family: monospace;
    font-size: 1rem;
    color: #0f172a !important;
}

/* ==========================================================================
   PC VIEW MATRIX (Side-by-Side Horizontal Row Split)
   ========================================================================== */
@media (min-width: 768px) {
    .school-contact-grid {
        flex-direction: row !important; /* Displays side-by-side on desktop views */
        align-items: flex-start;
    }
    
    .contact-info-block, 
    .location-info-block {
        flex: 1 !important; /* Balanced widths across monitors */
        padding: 35px !important;
    }
}
/* ==========================================================================
   SCHOOL ALBUM GALLERY WRAPPER
   ========================================================================== */
.school-gallery-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', sans-serif;
}

/* Elite Presentation Container for the Active Frame */
.gallery-display-frame {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
}

/* Image Matrix Constraints - Prevents Distortion */
.gallery-display-frame img {
    width: 100% !important;
    height: auto !important;
    max-height: 550px !important;
    object-fit: cover !important; /* Perfect crop balancing without squishing figures */
    display: block;
}

/* ==========================================================================
   PREMIUM PAGINATION INDICATORS (The Slider Navigation Dots)
   ========================================================================== */
.gallery-dots-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 25px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Resets the messy small dots to premium horizontal pills */
.gallery-dots-container li,
.gallery-dots-container button {
    width: 10px !important;
    height: 10px !important;
    background-color: #cbd5e1 !important; /* Muted inactive gray */
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 0 !important; /* Kills broken text artifact values inside indicators */
    line-height: 0 !important;
}

/* Highlight style for the exact active slider dot */
.gallery-dots-container li.active,
.gallery-dots-container li.slick-active,
.gallery-dots-container li:nth-child(5) { /* Temporary mock sync for your current green dot */
    background-color: #2b6cb0 !important; /* Institutional premium blue */
    width: 24px !important; /* Expands smoothly into a premium rounded capsule pill */
    border-radius: 20px !important;
}

/* Hover feedback mechanics */
.gallery-dots-container li:hover {
    background-color: #94a3b8 !important;
}
/* ==========================================================================
   TARGETED UNIQUE FEATURES LIST (Only affects the circled content block)
   ========================================================================== */

/* Cleans up the main container list parameters */
.entry-content ul, 
main ul, 
.school-landing ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 30px auto !important;
    max-width: 900px !important;
}

/* Transforms plain bullet points into premium card blocks */
.entry-content ul li, 
main ul li, 
.school-landing ul li {
    background-color: #ffffff !important; /* Pristine white card canvas background */
    border-left: 5px solid #3182ce !important; /* Premium institutional blue edge bar */
    border-radius: 0 8px 8px 0 !important; /* Smoothly rounded right-side card edges */
    padding: 20px 25px !important; /* Generous inside spacing for crisp readability */
    margin-bottom: 20px !important; /* Clean vertical spacing between cards */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important; /* Soft, delicate elevation shadow */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: #2d3748 !important; /* Smooth charcoal body text for reduced eye strain */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important; /* Slick hover transition mechanics */
}

/* Subtle mouse hover reaction for an interactive feel on desktop screens */
.entry-content ul li:hover, 
main ul li:hover, 
.school-landing ul li:hover {
    transform: translateX(4px) !important; /* Gently glides card to the right */
    box-shadow: 0 6px 20px rgba(49, 130, 206, 0.08) !important; /* Soft blue shadow glow */
}

/* Makes the feature bold titles stand out with premium hierarchy placement */
.entry-content ul li strong, 
main ul li strong, 
.school-landing ul li strong {
    color: #1a365d !important; /* Rich professional navy blue title font */
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin-right: 4px !important;
}

/* ==========================================================================
   MOBILE SCREEN WIDTH RESPONSIVE OPTIMIZATION
   ========================================================================== */
@media (max-width: 768px) {
    .entry-content ul li, 
    main ul li, 
    .school-landing ul li {
        padding: 15px 15px !important; /* Shrinks card padding on mobile to save layout width */
        margin-bottom: 15px !important;
        font-size: 1rem !important;
    }
}
/* ==========================================================================
   SEMANTIC FEATURE CARDS STYLING 
   ========================================================================== */
.unique-features-section {
    max-width: 900px;
    margin: 30px auto !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-card {
    background-color: #ffffff !important;
    border-left: 5px solid #3182ce !important; /* Premium institutional blue edge bar */
    border-radius: 0 8px 8px 0 !important;
    padding: 22px 25px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    display: flex;
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.feature-card:hover {
    transform: translateX(4px) !important;
    box-shadow: 0 6px 20px rgba(49, 130, 206, 0.08) !important;
}

/* Heading Typography */
.feature-content h3 {
    color: #1a365d !important; /* Rich professional navy */
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
}

/* Paragraph Typography */
.feature-content p {
    color: #2d3748 !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
}

/* Mobile Responsive Optimization */
@media (max-width: 768px) {
    .feature-card {
        padding: 15px 18px !important;
    }
    .feature-content h3 {
        font-size: 1.1rem !important;
    }
}