/* ============================================================= */
/* SGT MOBILE RESPONSIVE OVERRIDES                               */
/* Load AFTER sgt-home.css, sgt-admin.css, sgt-student.css       */
/* ============================================================= */

/* ---------- HAMBURGER MENU (public site) ---------- */
.sgt-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    z-index: 1100;
    background: none;
    border: none;
    padding: 0;
}

    .sgt-hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: #ffffff;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .sgt-hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .sgt-hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .sgt-hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }

/* ---------- MOBILE NAV OVERLAY (public site) ---------- */
.sgt-mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 13, 13, 0.98);
    z-index: 1050;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

    .sgt-mobile-nav.open {
        display: flex;
    }

    .sgt-mobile-nav a {
        font-family: 'Open Sans', sans-serif;
        font-size: 24px;
        font-weight: 700;
        color: #ffffff;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 3px;
        transition: color 0.3s ease;
    }

        .sgt-mobile-nav a:hover {
            color: #FF00FF;
        }

    .sgt-mobile-nav .sgt-nav-btn {
        margin-top: 10px;
    }

/* ---------- SIDEBAR OVERLAY (admin/student) ---------- */
.sgt-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1140;
}

.sgt-layout-shell.sidebar-visible .sgt-sidebar-overlay {
    display: block;
}


/* ============================================================= */
/* TABLET: 1024px and below                                       */
/* ============================================================= */
@media (max-width: 1024px) {

    /* -- Public Header -- */
    .sgt-public-header {
        padding: 10px 20px;
    }

    .sgt-header-nav-center {
        gap: 30px;
    }

    .sgt-nav-link {
        font-size: 18px;
    }

    .sgt-nav-btn {
        padding: 10px 25px;
        font-size: 14px;
    }

    /* -- Neon Hero -- */
    .sgt-neon-hero-columns {
        flex-direction: column;
        text-align: center;
    }

    .sgt-neon-hero-left {
        text-align: center;
    }

    .sgt-neon-hero-right {
        flex: none;
        order: -1;
    }

    .sgt-neon-logo {
        max-width: 250px;
    }

    .sgt-neon-heading {
        font-size: 48px;
    }

    .sgt-neon-description {
        font-size: 24px;
    }

    .sgt-neon-cta {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* -- Intro -- */
    .sgt-intro-content {
        flex-direction: column;
        text-align: center;
    }

    .sgt-intro-logo-side {
        flex: none;
        order: -1;
    }

    .sgt-intro-logo {
        max-width: 250px;
    }

    .sgt-intro-title,
    .sgt-intro-title-pink {
        font-size: 48px;
    }

    .sgt-intro-text {
        font-size: 24px;
    }

    /* -- Pillars -- */
    .sgt-pillar-content {
        width: 60%;
        padding: 60px 30px;
    }

    .sgt-pillar-heading,
    .sgt-pillar-heading-accent {
        font-size: 48px;
    }

    .sgt-pillar-text {
        font-size: 24px;
    }

    .sgt-pillar-subheading {
        font-size: 36px;
    }

    .sgt-pillar-list li {
        font-size: 22px;
        padding: 18px 14px;
    }

    /* -- Parents -- */
    .sgt-parents-content {
        flex-direction: column;
        text-align: center;
    }

    .sgt-parents-guitars {
        flex: none;
        order: -1;
    }

    .sgt-guitars-svg {
        max-width: 250px;
    }

    .sgt-parents-title {
        font-size: 48px;
    }

    .sgt-parents-text {
        font-size: 24px;
    }

    .sgt-parents-disclaimer {
        font-size: 18px;
    }

    /* -- Admin/Student Tablet -- */
    .sgt-admin-tabs {
        gap: 5px;
    }

    .sgt-admin-tab {
        font-size: 11px;
        padding: 8px 12px;
    }

    .sgt-admin-user {
        font-size: 11px;
    }

    .sgt-admin-sidebar,
    .sgt-student-sidebar {
        width: 200px;
    }

    .sgt-admin-side-btn {
        font-size: 12px;
        padding: 10px 12px;
    }
}


/* ============================================================= */
/* MOBILE: 768px and below                                        */
/* ============================================================= */
@media (max-width: 768px) {

    /* --------------------------------------------------------- */
    /* PUBLIC SITE                                                */
    /* --------------------------------------------------------- */

    /* -- Show hamburger, hide desktop nav -- */
    .sgt-hamburger {
        display: flex;
    }

    .sgt-header-nav-center {
        display: none;
    }

    .sgt-header-right .sgt-nav-btn {
        display: none;
    }

    .sgt-public-header {
        padding: 10px 15px;
    }

    .sgt-public-main {
        padding-top: 70px;
    }

    .sgt-logo-img {
        height: 40px !important;
    }

    /* -- Hero -- */
    .sgt-hero {
        min-height: auto;
        padding: 40px 15px 50px;
    }

    .sgt-hero-content {
        padding: 20px 10px;
    }

    .sgt-opening-badge {
        max-width: 260px;
    }

    .sgt-hero-card {
        padding: 25px 20px;
        border-radius: 16px;
        max-width: 100%;
    }

    .sgt-hero-location {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .sgt-hero-date {
        font-size: 22px;
    }

    .sgt-hero-subtext {
        font-size: 14px;
    }

    .sgt-btn {
        padding: 14px 30px;
        font-size: 13px;
    }

    /* -- Neon Hero -- */
    .sgt-neon-hero {
        min-height: auto;
    }

    .sgt-neon-hero-content {
        padding: 40px 15px;
    }

    .sgt-neon-title {
        font-size: 1.6rem;
        letter-spacing: 2px;
        white-space: normal;
        margin-bottom: 25px;
    }

    .sgt-neon-hero-columns {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .sgt-neon-hero-left {
        text-align: center;
    }

    .sgt-neon-hero-right {
        flex: none;
        order: -1;
    }

    .sgt-neon-logo {
        max-width: 180px;
    }

    .sgt-neon-heading {
        font-size: 28px;
        line-height: 1.2;
    }

    .sgt-neon-description {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .sgt-neon-tagline {
        font-size: 13px;
        margin-bottom: 25px;
    }

    .sgt-neon-cta {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .sgt-neon-btn-primary,
    .sgt-neon-btn-secondary {
        padding: 12px 30px;
        font-size: 13px;
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .sgt-neon-welcome {
        padding: 10px 20px;
    }

    .sgt-neon-welcome-text {
        font-size: 14px;
    }

    /* -- Pillars -- */
    .sgt-pillar {
        min-height: auto;
    }

    .sgt-pillar-content {
        width: 100% !important;
        padding: 50px 20px;
        text-align: center;
    }

    .sgt-pillar-heading {
        font-size: 22px;
    }

    .sgt-pillar-heading-accent {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .sgt-pillar-text-card {
        padding: 20px;
        border-radius: 12px;
    }

    .sgt-pillar-text {
        font-size: 15px;
    }

    .sgt-pillar-subheading {
        font-size: 24px;
    }

    .sgt-pillar-list {
        flex-direction: column;
        gap: 10px;
    }

        .sgt-pillar-list li {
            font-size: 16px;
            padding: 14px 12px;
        }

    .sgt-pillar-list-grid {
        flex-direction: column;
    }

        .sgt-pillar-list-grid li {
            flex: none;
            min-width: auto;
        }

    .sgt-pillar-fun .sgt-pillar-list {
        grid-template-columns: 1fr;
    }

    .sgt-pillar-teamwork {
        clip-path: none;
        margin-bottom: 0;
    }

    .sgt-pillar-education {
        clip-path: none;
        margin-bottom: 0;
        justify-content: flex-start;
    }

    .sgt-pillar-fun {
        clip-path: none;
    }

    .sgt-pillar-education .sgt-pillar-content {
        text-align: center;
    }

    .sgt-pillar-education .sgt-pillar-list {
        text-align: center;
    }

    /* -- Parents -- */
    .sgt-parents {
        padding: 60px 20px;
    }

    .sgt-parents-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .sgt-parents-guitars {
        flex: none;
        order: -1;
    }

    .sgt-guitars-svg {
        max-width: 180px;
    }

    .sgt-parents-title {
        font-size: 28px;
    }

    .sgt-parents-text {
        font-size: 18px;
    }

    .sgt-parents-disclaimer {
        font-size: 14px;
    }

    /* -- Notification Form -- */
    .sgt-notification {
        padding: 60px 15px;
    }

    .sgt-notification-content {
        max-width: 100%;
    }

    .sgt-notification-title {
        font-size: 28px;
    }

    .sgt-notification-text {
        font-size: 16px;
    }

    .sgt-form-label {
        font-size: 18px;
    }

    .sgt-form-row {
        flex-direction: column;
        gap: 15px;
    }

    .sgt-input {
        padding: 12px 14px;
        font-size: 16px;
    }

    .sgt-btn-submit {
        width: 100%;
        text-align: center;
    }

    /* -- Footer -- */
    .sgt-footer {
        padding: 50px 15px 40px;
    }

    .sgt-footer-links {
        flex-direction: column;
        gap: 15px;
    }

    .sgt-footer-logo {
        max-width: 140px;
    }

    .sgt-footer-address {
        font-size: 13px;
    }


    /* --------------------------------------------------------- */
    /* ADMIN & STUDENT LAYOUTS                                    */
    /* --------------------------------------------------------- */

    /* -- Top Nav: hide tabs and username -- */
    .sgt-admin-tabs {
        display: none !important;
    }

    .sgt-admin-user {
        display: none !important;
    }

    .sgt-admin-top {
        padding: 8px 10px !important;
        z-index: 1200 !important;
        height: auto !important;
    }

    .sgt-admin-logo {
        height: 35px !important;
    }

    .sgt-admin-logout-btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .sgt-admin-right {
        gap: 8px !important;
        position: static !important;
    }

    /* -- THE BIG FIX: Layout shell scrolling -- */
    .sgt-layout-shell {
        display: block !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    /* -- Main content: full width, natural scroll -- */
    .sgt-admin-main {
        margin-left: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    .sgt-admin-main-inner {
        padding: 15px 10px !important;
    }

    /* -- Sidebar: off-screen by default, slides in as overlay -- */
    .sgt-admin-sidebar,
    .sgt-student-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -280px !important;
        width: 260px !important;
        height: 100vh !important;
        z-index: 1150 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        padding-top: 70px !important;
        border-right: 2px solid #333 !important;
        border-bottom: none !important;
        flex-direction: column !important;
    }

    .sgt-layout-shell.sidebar-visible .sgt-admin-sidebar,
    .sgt-layout-shell.sidebar-visible .sgt-student-sidebar {
        left: 0 !important;
    }

    /* -- Sidebar links: vertical, full width -- */
    .sgt-admin-side-links {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .sgt-admin-side-btn {
        flex: none !important;
        min-width: auto !important;
        width: 100% !important;
        font-size: 13px !important;
        padding: 10px 15px !important;
        margin-bottom: 4px !important;
    }

    .sgt-admin-side-sublink {
        font-size: 12px !important;
        padding: 8px 15px 8px 25px !important;
    }

    /* -- Profile card -- */
    .sgt-admin-profile-card {
        padding: 10px !important;
    }

    .sgt-admin-profile-name {
        font-size: 12px !important;
    }

    .sgt-admin-profile-role {
        font-size: 11px !important;
    }

    /* -- Dashboard grids -- */
    .sgt-four-column-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .sgt-dashboard h1,
    .sgt-page-title {
        font-size: 24px !important;
    }

    /* -- Student dashboard inline style grids -- */
    .sgt-crud-container > div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .sgt-crud-container > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* -- Tables: horizontal scroll -- */
    .sgt-table-wrapper {
        overflow-x: auto !important;
    }

    .sgt-table {
        min-width: 600px !important;
    }

    /* -- Forms -- */
    .sgt-form-row {
        grid-template-columns: 1fr !important;
    }

    .sgt-form-section {
        padding: 15px !important;
    }

    .sgt-crud-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .sgt-crud-title {
        font-size: 24px !important;
    }

    /* -- Details pages -- */
    .sgt-details-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================= */
/* SMALL MOBILE: 480px and below                                  */
/* ============================================================= */
@media (max-width: 480px) {

    .sgt-neon-title {
        font-size: 1.3rem;
    }

    .sgt-neon-heading {
        font-size: 24px;
    }

    .sgt-neon-description {
        font-size: 15px;
    }

    .sgt-hero-date {
        font-size: 20px;
    }

    .sgt-hero-location {
        font-size: 14px;
    }

    .sgt-pillar-heading {
        font-size: 20px;
    }

    .sgt-pillar-heading-accent {
        font-size: 28px;
    }

    .sgt-pillar-text {
        font-size: 14px;
    }

    .sgt-parents-title {
        font-size: 24px;
    }

    .sgt-parents-text {
        font-size: 16px;
    }

    .sgt-notification-title {
        font-size: 24px;
    }
}