/*
APC College Theme Responsive Styles
(Order: Largest viewport MAX-WIDTH first → smallest, per CSS cascade convention)
*/

/* ================================================================
    1. Large Tablets / Small Desktops (max-width: 1199px)
================================================================ */
@media only screen and (max-width: 1199px) {

    /* Header navigation */
    .header-left .nav-link {
        padding: 8px 14px !important;
        font-size: 14px;
    }

    .contact-link {
        font-size: 14px;
        padding: 8px 12px;
    }

    .btn-cta {
        padding: 10px 22px;
        font-size: 13px;
    }

    /* Branding size */
    .site-branding .custom-logo {
        height: 36px;
    }

    .brand-text .site-title {
        font-size: 18px;
    }
}

/* ================================================================
    2. Tablet Pro / Large Tablet (max-width: 1024px)
    → ALL widget/section wrappers: 60px top/bottom padding
    → EXCLUDE: Header, Hero areas, Footer, Breadcrumb
    → Also: Section title scales to 30px
================================================================ */
@media only screen and (max-width: 1024px) {

    /* -------- Section titles -------- */
    .section-title h2 {
        font-size: 30px;
    }

    /* -------- User-explicit typography rules (1024px only) -------- */

    /* Hero heading scale */
    .schoolrhub-hero-heading {
        font-size: 45px;
    }

    /* About heading scale */
    h2.schoolrhub-about-heading {
        font-size: 30px;
    }

    /* Generic widget section heading */
    h2.schoolrhub-heading.fw-bold.mb-4 {
        font-size: 30px;
    }

    /* What We Stand For — item titles */
    .schoolrhub-standfor-instance-66282d7 .schoolrhub-standfor-item-title,
    [class*="schoolrhub-standfor-instance-"] .schoolrhub-standfor-item-title {
        font-size: 17px;
    }

    /* Our Teachers — card names */
    h5.schoolrhub-teacher-name.fw-bold.mb-2 {
        font-size: 18px !important;
    }

    /* Latest News — title scale */
    h5.schoolrhub-news-title.mb-4 {
        font-size: 18px !important;
    }

    /* Latest News meta row → stacked (block, not inline-flex) */
    .schoolrhub-news-meta.d-flex.align-items-center.gap-3.mb-3 {
        display: block !important;
    }

    /* -------- Our Teachers widget: 3 cards per row (instead of 4) --------
       Native markup uses `col-md-6 col-lg-3` (25% → 4 cols).
       At 1024px we override to 33.333% (1/3 → 3 per row), scoped only to this widget. */
    .schoolrhub-meet-our-teachers .row > .col-lg-3 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    /* -------- 2A. Schoolrhub Plugin Elementor Widgets (12 classes) -------- */
    .schoolrhub-about-area,
    .schoolrhub-best-subjects,
    .schoolrhub-meet-our-teachers,
    .schoolrhub-our-notice,
    .schoolrhub-our-gallery,
    .schoolrhub-latest-news,
    .schoolrhub-contact,
    .schoolrhub-standfor-section,
    .srh-legal-wrap,
    .schoolrhub-latest-notices-widget,
    .schoolrhub-upcoming-events-widget {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* -------- 2B. Theme Built-in Section & Content Areas -------- */
    /* Blog */
    .apc-blog-content,
    .apc-post-content,
    .apc-comments-area,

    /* Theme CPT content wrappers (non-hero) */
    .apc-teacher-content,
    .apc-single-subject-content,
    .apc-single-class-content,
    .apc-single-parent-content,
    .apc-single-student-content,
    .apc-single-exam-content,
    .apc-single-result-content,
    .apc-single-notice-content,
    .apc-single-event-content,
    .apc-single-gallery-content,
    .apc-gallery-area,
    .apc-gallery-wrap,
    .apc-gallery-search-wrap,

    /* Theme archive/search content wrappers */
    .apc-cpt-archive,
    .apc-cpt-search,
    .apc-cpt-content,
    .apc-archive-content,
    .apc-search-content,

    /* Theme homepage template parts */
    .departments-section,

    /* Entry / Page content */
    .entry-content,
    .page-content,
    .site-content,
    .content-area,

    /* 404 / No Results */
    .no-results.not-found {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* -------- 2C. Wildcard Safety Net — ANY section-level wrapper --------
       Uses attribute contains selector to catch any edge-case class missed above.
       Hero / Header / Footer / Breadcrumb EXCLUDED via :not() chains on ALL patterns. */
    section[class*="schoolrhub-"]:not([class*="hero"]):not([class*="breadcrumb"]),
    section[class*="apc-"]:not([class*="hero"]):not([class*="header"]):not([class*="footer"]):not([class*="breadcrumb"]),
    section[class*="-area"]:not([class*="hero"]):not([class*="header"]):not([class*="footer"]):not([class*="breadcrumb"]),
    section[class*="-content"]:not([class*="hero"]):not([class*="header"]):not([class*="footer"]):not([class*="breadcrumb"]),
    section[class*="-section"]:not([class*="hero"]):not([class*="header"]):not([class*="footer"]):not([class*="breadcrumb"]),
    section[class*="-wrap"]:not([class*="hero"]):not([class*="header"]):not([class*="footer"]):not([class*="breadcrumb"]) {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* -------- 2D. Explicit EXCLUDES (safety) — NEVER apply padding here -------- */
    .site-header,
    header.site-header,
    .site-footer,
    footer.site-footer,
    .schoolrhub-hero-area,
    .hero-section,
    section[class*="-hero"],
    div[class*="-hero"],
    .schoolrhub-breadcrumb-area,
    section[class*="breadcrumb"] {
        /* Intentionally blank: respect hero / header / footer / breadcrumb original spacing */
    }
}

/* ================================================================
    3. Tablets / Below lg (max-width: 991px)
    → Hide desktop nav + CTAs, reveal mobile header; Footer 60px; Scroll-top sizing
    → Hero Info Cards: 2 per row (instead of stacked 1 or full 4)
================================================================ */
@media only screen and (max-width: 991px) {

    /* -------- Hero Overlap Info Cards → 2 cards per row (user requested) --------
       Native markup uses col-lg-4 / col-lg-6 which collapses below 992px.
       At 991px we lock to exactly 50% width = 2 cards / row. */
    .srh-infocards-row > [class*="col-lg-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* -------- About Area → 2-column grid (50% each) instead of stacking to 1 --------
       Native markup uses col-lg-6 (image wrapper + schoolrhub-about-content text wrapper).
       Below 992px Bootstrap collapses both to 100% width stacked; we lock to 50% = 2 cols. */
    .schoolrhub-about-area .row > [class*="col-lg-6"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* -------- Our Teachers widget → 2 cards per row at ≤991px --------
       Native markup uses col-md-6 col-lg-3 (stacks 1-col below 768px).
       At this breakpoint we lock ALL teacher columns to 50% width → 2 cards / row,
       also overriding the 3-col rule from the earlier 1024px block. */
    .schoolrhub-meet-our-teachers .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* -------- Header Mobile → 3-column flex layout (menu toggle | CENTER LOGO | search icon) --------
       Root bug fixes:
       • main.css #L474 absolute positioned .site-branding had NO parent relative anchor → logo was mis-positioned.
         → RESET to static position + undo all left/transform on branding.
       • responsive.css earlier set wrapper display:block (broke flex layout)
         → NOW set to display:flex + justify + align center.
       • flex items at ends MUST NOT shrink (flex-shrink:0) to preserve icon size. */

    /* Outer mobile header row (3 children → L: menu, C: logo, R: search) */
    .header-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px;
    }

    /* Prevent menu toggle / search icon from shrinking (squishing) */
    .header-mobile .mobile-menu-toggle,
    .header-mobile .search-trigger {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Logo wrapper → takes remaining middle space, centers site-branding perfectly BOTH ways */
    .header-center-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto;            /* grow to fill middle space between menu toggle + search icon */
        min-width: 0;              /* prevent flex overflow with long text logos */
        padding: 0 4px;
    }

    /* THE CRUCIAL FIX: undo absolutely-positioned fly-away bug from main.css #L474-478 */
    .header-center-mobile .site-branding {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Scale logo a bit nicer within the fixed header-mobile row */
    .header-center-mobile .custom-logo {
        max-height: 34px;
        height: 34px !important;
        width: auto;
    }

    .header-center-mobile .brand-text .site-title {
        font-size: 16px !important;
        line-height: 1.2;
        margin: 0;
    }

    /* -------- Hide desktop-only nav elements (they are replaced by the 3-column mobile header above) -------- */
    .header-left,
    .header-right,
    .header-center {
        display: none !important;
    }

    /* Top bar removal — hide if any legacy elements remain */
    .topbar {
        display: none !important;
    }

    /* -------- Footer: compress padding -------- */
    .apc-footer {
        padding: 60px 0 25px;
    }

    .apc-footer-widget-title {
        margin-bottom: 20px;
    }

    /* -------- Scroll To Top Button: shrink + move closer to edge -------- */
    .apc-scroll-top {
        width: 46px;
        height: 46px;
        right: 18px;
        bottom: 18px;
        font-size: 24px;
    }
    h2.schoolrhub-heading.fw-bold.mb-4 {
        font-size: 26px !important;
    }
    .schoolrhub-about-heading {
        font-size: 28px !important;
    }
    .schoolrhub-standfor-instance-66282d7 .schoolrhub-standfor-item-title {
        font-size: 18px !important;
    }
    .schoolrhub-standfor-instance-66282d7 .schoolrhub-standfor-item-desc { 
        font-size: 16px !important; 
    }
    .col-lg-6.mb-5.mb-lg-0.srh-hero-left {
        text-align: center !important;
    }

    .srh-cta-row {
        justify-content: center;
    }
    section.apc-exam-hero.position-relative.overflow-hidden {
        padding-top: 60px !important;
        padding-bottom: 130px !important;
    }
    form.search-form input#s {
        width: 100% !important;
    }
    h1.mb-5 {
        margin-bottom: 10px !important;
    }


}

/* ================================================================
    4. Admin Bar Mobile (max-width: 782px)
    → WP admin bar changes height 32px → 46px below this width
================================================================ */
@media only screen and (max-width: 782px) {
    .admin-bar .site-header.is-sticky {
        top: 46px;
    }
}

/* ================================================================
    5. Small Tablets (max-width: 767px)
    → Offcanvas full width, nav/button sizes, search overlay
================================================================ */
@media only screen and (max-width: 767px) {

    /* Section titles */
    .section-title h2 {
        font-size: 28px;
    }

    /* -------- Mobile Offcanvas full width -------- */
    .apc-mobile-menu {
        width: 100% !important;
    }

    .apc-mobile-menu .offcanvas-header {
        padding: 16px 20px;
    }

    .apc-mobile-menu .offcanvas-body {
        padding: 16px 12px;
    }

    .mobile-nav-list .nav-link {
        font-size: 15px;
        padding: 12px 14px !important;
    }

    .offcanvas-footer {
        padding: 16px 20px 24px;
    }

    .offcanvas-footer .btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* -------- Search overlay adjustments -------- */
    .search-overlay-form input {
        font-size: 28px;
    }

    .search-overlay-close {
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    /* -------- Footer padding compress -------- */
    .apc-footer {
        padding: 50px 0 20px;
    }

    .apc-footer-divider {
        margin: 40px 0 25px;
    }
}

/* ================================================================
    6. Mobile (max-width: 575px)
    → Inner header padding, menu toggle / search trigger sizes
================================================================ */
@media only screen and (max-width: 575px) {

    /* -------- Header inner / mobile controls -------- */
    .header-inner {
        padding: 10px 0;
    }

    .mobile-menu-toggle {
        font-size: 26px;
    }

    .header-center-mobile .custom-logo {
        height: 28px;
    }

    .header-center-mobile .brand-text .site-title {
        font-size: 16px;
    }

    .search-trigger {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    /* -------- Section title & global btn -------- */
    .section-title h2 {
        font-size: 26px;
    }

    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    /* -------- Scroll To Top: smaller + squircle -------- */
    .apc-scroll-top {
        width: 42px;
        height: 42px;
        right: 14px;
        bottom: 14px;
        font-size: 22px;
        border-radius: 8px;
    }
    h2.fw-bold.mb-4, h3.fw-bold.mb-2 {
        font-size: 24px !important;
    } 

}

/* ================================================================
    7. Mobile Medium (max-width: 485px)
    → Hero Info Cards, About Area, Our Teachers: 1 card per row (stacked)
================================================================ */
@media only screen and (max-width: 485px) {

    /* Hero Info Cards → 1 card per row (full width stacked) */
    .srh-infocards-row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* About Area → 1 column (image wrapper + text wrapper stacked full width) */
    section.schoolrhub-about-area .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Our Teachers widget → 1 teacher card per row (full width stacked) */
    .schoolrhub-meet-our-teachers .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .col-lg-6.schoolrhub-about-content {
        text-align: center;
    }

    p.schoolrhub-subheading.fw-bold.text-uppercase.mb-3 {
        text-align: center;
    }
    h2.schoolrhub-heading.fw-bold.mb-4 {
        text-align: center;
    }

    h3.schoolrhub-form-heading.fw-bold.mb-2 {
        text-align: center;
    }
    p.schoolrhub-standfor-eyebrow.schoolrhub-subheading.fw-bold.text-uppercase.mb-3 {
        text-align: center;
        width: 100%;
        display: block;
        margin: 0 !important;
    }

    .schoolrhub-standfor-eyebrow-wrap {
        margin-bottom: 10px !important;
    }

    section.schoolrhub-our-notice h2.mb-2 {
        font-size: 24px !important;
    }

    section.schoolrhub-our-notice a.schoolrhub-view-all-btn {
        margin: 0 auto !important;
    }

}

/* ================================================================
    8. Small Mobile (max-width: 480px)
    → Mobile nav items tighter min-height
================================================================ */
@media only screen and (max-width: 480px) {

    .section-title h2 {
        font-size: 24px;
    }

    .mobile-nav-list .nav-link {
        font-size: 14px;
        padding: 11px 12px !important;
        min-height: 44px;
    }

    .mobile-nav-list .dropdown-menu .nav-link {
        font-size: 14px;
        padding: 9px 14px !important;
    }

    .apc-mobile-menu .offcanvas-header .custom-logo {
        height: 26px;
    }

    .apc-mobile-menu .offcanvas-header .offcanvas-title {
        font-size: 16px;
    }
}

/* ================================================================
    9. Extra Small (max-width: 375px)
    → Final scaling for smallest phones
================================================================ */
@media only screen and (max-width: 375px) {

    .section-title h2 {
        font-size: 22px;
    }

    .hero-title {
        font-size: 25px;
    }

    /* Scroll To Top tiniest size */
    .apc-scroll-top {
        width: 40px;
        height: 40px;
        right: 12px;
        bottom: 12px;
        font-size: 20px;
    }
}