/* Responsive & Media Queries */

/* Tablet & Mobile Adjustments */
@media (max-width: 991px) {

    /* Restore Fixed Hero for Parallax "Rising Up" Effect */
    /* Restore Fixed Hero for Parallax "Rising Up" Effect */
    /* Restore Fixed Hero for Parallax "Rising Up" Effect */
    html body:not(.light-mode) .bg-dark-hero {
        position: fixed !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding-top: 80px !important;
        /* Restore padding to push content down (matches Light Mode) */
        padding-bottom: 2rem !important;
        z-index: 0 !important;

        /* Dark Mode / Default Mobile Background - Using shorthand to override Everything */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 70%, rgba(10, 10, 10, 0.95) 100%), url('../images/backgronud picture.jpg') no-repeat center center / cover !important;
        background-color: #0a0a0a !important;
    }

    /* Hide Videos on Mobile */
    #hero-video-dark,
    #hero-video-light {
        display: none !important;
    }

    /* Force Background in Light Mode - High Specificity Mobile Override */
    html body.light-mode .bg-dark-hero {
        /* Using background shorthand to override any color/image specific rules */
        background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), url('../images/background-white.jpg') no-repeat center center / cover !important;
        border: none !important;
        box-shadow: none !important;
    }

    .main-content {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        /* Glass effect */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        background: rgba(10, 10, 10, 0.85) !important;
        /* Darker tint to prevent white text bleed-through */
        margin-top: 85vh !important;
        /* Push content down so Hero is visible first */
        position: relative;
        z-index: 2;
        /* Add border and shadow for consistency with light mode */
        border: none !important;
        border-radius: 0 !important;
        /* border: 1px solid rgba(255, 255, 255, 0.1) !important; REMOVED for full width */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    }

    /* Cards in Dark Mode on Mobile - High Specificity to override components.css */
    body:not(.light-mode) .spa-section .col-md-6,
    body:not(.light-mode) .spa-section .col-6,
    body:not(.light-mode) #skills .col-md-6,
    body:not(.light-mode) #education .col-md-6 {
        background: #111111 !important;
        /* Solid Dark Background */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    /* Projects & Experience: Add Border on Mobile in Dark Mode */
    body:not(.light-mode) #projects .col-md-6,
    body:not(.light-mode) #experience .col-md-6 {
        background: #111111 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    body:not(.light-mode) .spa-section h5,
    body:not(.light-mode) .spa-section p,
    body:not(.light-mode) .spa-section li,
    body:not(.light-mode) .spa-section span {
        color: #ffffff !important;
        /* Force All inner text white */
    }

    /* Cards in Light Mode on Mobile */
    /* Cards in Light Mode on Mobile */
    body.light-mode .spa-section .col-md-6,
    body.light-mode .spa-section .col-6 {
        background: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    /* Projects & Experience: Add Border on Light Mode Mobile */
    body.light-mode #projects .col-md-6,
    body.light-mode #experience .col-md-6 {
        background: #ffffff !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    /* Skills: White Background with Border on Light Mode Mobile */
    body.light-mode #skills .col-md-6 {
        background: #ffffff !important;
        /* Force White Override */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    /* Optimize Code Window for Mobile Performance */
    .code-window {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
        /* Reduced from 32px blur */
    }

    .hero-section {
        flex-direction: column !important;
        text-align: center !important;
        padding: 6rem 1rem 2rem 1rem !important;
        /* Increased top padding to clear navbar */
        min-height: 100vh !important;
        height: 100vh !important;
        justify-content: flex-end !important;
        /* Push text to bottom/center */
        background: transparent !important;
        /* No background on section itself */
    }

    body.light-mode .hero-section {
        background: transparent !important;
        background-image: none !important;
    }

    /* Ensure Text is White in Light Mode on Mobile Hero due to dark background */
    /* Ensure Text is White in Light Mode on Mobile Hero due to dark background */
    html body.light-mode .hero-section h1,
    html body.light-mode .hero-section h2,
    html body.light-mode .hero-section h3,
    html body.light-mode .hero-section h4,
    html body.light-mode .hero-section h5,
    html body.light-mode .hero-section h6,
    html body.light-mode .hero-section .text-white,
    html body.light-mode .hero-section span,
    html body.light-mode .hero-section p,
    html body.light-mode .hero-section div {
        color: #ffffff !important;
    }

    /* Reset order/margin overrides if needed later, but focus on hero first */
    .hero-img {
        display: none !important;
        /* Hide profile image in favor of background */
    }

    /* Ensure Scroll Spy lands correctly */
    section {
        scroll-margin-top: 100px !important;
    }

    /* Mobile Header Customization (Pills) */
    .navbar {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border: none !important;
    }

    .navbar .container-fluid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        background: transparent !important;
        /* Ensure no background here either */
        box-shadow: none !important;
    }

    .navbar-brand,
    #themeToggle {
        background: rgba(20, 20, 20, 0.85) !important;
        /* Dark background for pop */
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 50px !important;
        padding: 0.5rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease;
        z-index: 1002;
        position: relative;
    }

    .navbar-toggler {
        background: rgba(20, 20, 20, 0.85) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease;
        z-index: 1002;
        position: relative;
    }

    /* Force Brand Center */
    .navbar-brand {
        order: 2;
        /* Center on Mobile */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
        white-space: nowrap;
        opacity: 1 !important;
        visibility: visible !important;
        font-size: 1.1rem !important;
        /* Slightly smaller for mobile by default */
        padding: 0.5rem 0.8rem !important;
    }

    /* Small Phone Overlap Fix (< 400px) */
    @media (max-width: 400px) {
        .navbar-brand {
            font-size: 1.05rem !important;
            padding: 0.45rem 0.8rem !important;
            max-width: 210px !important;
            /* Increased to fit "Abdallah J Khader" fully on iPhone X (375px) */
            overflow: visible !important;
            text-overflow: clip !important;
        }

        #themeToggle,
        .navbar-toggler {
            width: 42px !important;
            height: 42px !important;
        }
    }

    /* Extra Small Phone Fix (< 340px) */
    @media (max-width: 340px) {
        .navbar-brand {
            font-size: 0.92rem !important;
            padding: 0.4rem 0.6rem !important;
            max-width: 175px !important;
        }

        #themeToggle,
        .navbar-toggler {
            width: 38px !important;
            height: 38px !important;
        }
    }

    #themeToggle {
        order: 1 !important;
        /* Left on Mobile */
        width: 45px;
        height: 45px;
        padding: 0;
        margin-right: auto !important;
        /* Force to left */
        margin-left: 0 !important;
    }

    .navbar-toggler {
        order: 3 !important;
        /* Right on Mobile */
        width: 45px;
        height: 45px;
        padding: 0;
        margin-left: auto !important;
        /* Force to right */
        margin-right: 0 !important;
    }

    /* Mobile Menu Absolute Positioning */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        padding: 1.5rem;
        border-radius: 1.5rem;
        margin-top: 1rem;
        z-index: 1000;
    }

    /* Ensure Footer Connects Seamlessly on Mobile */
    footer {
        margin-top: 0 !important;
        /* Remove desktop gap */
        padding-top: 2rem !important;
        /* Ensure inner spacing */
        z-index: 2 !important;
        /* Ensure it sits above or with content layer */
    }
}

/* Desktop Navbar Ordering */
@media (min-width: 992px) {
    .navbar .container-fluid {
        justify-content: flex-start !important;
    }

    /* Natural Order is now: Brand, Toggle, Toggler(Hidden), Collapse */

    .navbar-brand {
        margin-right: 1rem !important;
        position: static !important;
        transform: none !important;
        order: 0 !important;
        /* Ensure first */
    }

    #themeToggle {
        margin-right: auto !important;
        /* Push Nav items to right */
        margin-left: 0 !important;
        order: 1 !important;
        /* Ensure second */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 50px !important;
    }

    .navbar-collapse {
        flex-grow: 0 !important;
        margin-left: auto !important;
        order: 2 !important;
        /* Ensure last */
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 2rem 0 !important;
        /* Remove side padding for full width */
    }

    /* Remove inner padding that was causing gaps */
    .main-content main.col-12 {
        padding: 0 !important;
    }

    .spa-section {
        padding: 2rem 1.5rem;
    }

    .spa-section {
        padding: 2rem 1.5rem;
    }

    /* Allow aspect-ratio to control height but restrict width */
    .modern-card-img-wrapper {
        height: auto !important;
        max-width: 220px !important;
        /* drastically reduce size on mobile */
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 575px) {
    .hero-profile-img {
        width: 200px !important;
        /* Increased from 150px */
        height: 200px !important;
        margin: 0 auto 1.5rem auto;
    }

    /* Reduce Title Size and Force Center on Mobile */
    .hero-text h2,
    #typewriter {
        font-size: 2rem !important;
        /* Reduced from 2.5rem */
        text-align: center !important;
        margin: 0 auto 0.5rem auto !important;
        width: 100% !important;
    }

    /* Force EVERYTHING in hero-text to be centered */
    .hero-text,
    .hero-text>div,
    .hero-text .d-flex {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    #netdev {
        font-size: 1rem !important;
        /* Reduced from 1.2rem */
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .spa-section h3 {
        font-size: 1.5rem;
    }

    #projects .col-md-6,
    #experience .col-md-6 {
        padding: 0 !important;
    }

    /* Extreme Width Fix: Remove section padding and pull row outwards */
    #projects.spa-section,
    #experience.spa-section,
    #skills.spa-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Restore Padding for Titles in Full-Width Sections */
    #projects.spa-section h3,
    #experience.spa-section h3,
    #skills.spa-section h3 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }



    .contact-info-panel h3 {
        font-size: 1.25rem !important;
    }

    /* Restore Padding for About Text since Container Padding is Gone */
    #about.spa-section {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Skills Section: Horizontal Scroll on Mobile */
    #skills .cv-section-card {
        overflow: visible !important;
        padding: 0 !important;
    }

    #skills .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0 !important;
        gap: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        touch-action: pan-y pan-x !important;
    }

    #skills .col-md-6 {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        scroll-snap-align: center !important;
        min-height: 250px !important;
    }

    /* Hide scrollbar but keep functionality */
    #skills .row::-webkit-scrollbar {
        display: none;
    }

    #skills .row {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Projects Section: Horizontal Scroll on Mobile */
    #projects .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0.5rem !important;
        gap: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        touch-action: pan-y pan-x !important;
        align-items: flex-start !important;
        /* Prevent stretching */
    }

    #projects .col-md-6 {
        flex: 0 0 90% !important;
        /* Widen to reduce height */
        max-width: 90% !important;
        scroll-snap-align: center !important;
        min-height: auto !important;
        /* Let content dictate height */
    }

    #projects .row::-webkit-scrollbar {
        display: none;
    }

    #projects .row {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Experience Section: Horizontal Scroll on Mobile */
    #experience .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0.5rem !important;
        gap: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        touch-action: pan-y pan-x !important;
        align-items: flex-start !important;
    }

    #experience .col-md-6 {
        flex: 0 0 90% !important;
        max-width: 90% !important;
        scroll-snap-align: center !important;
        min-height: auto !important;
    }

    #experience .row::-webkit-scrollbar {
        display: none;
    }

    #experience .row {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Reduce Project Card Sizes on Mobile */
    #projects .modern-card {
        padding: 1rem !important;
    }

    #projects .modern-card-img-wrapper {
        max-width: 120px !important;
        margin-bottom: 0.75rem !important;
    }

    #projects .modern-card-body {
        padding: 1rem !important;
    }

    #projects .card-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    #projects .card-text {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    #projects .card-tag {
        font-size: 0.75rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    #projects .card-actions a {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.8rem !important;
    }

    /* Skills Section: Smaller Description Text */
    #skills .col-md-6 p,
    #skills .col-md-6 li {
        font-size: 0.85rem !important;
    }

}


/* Desktop Sidebar Layout Logic */
@media (min-width: 992px) {
    body:not(.light-mode) .main-content {
        background: #000000 !important;
        border-radius: 2rem 2rem 0 0 !important;
        border-bottom: none !important;
        padding: 2rem !important;
    }

    .main-content {
        border-radius: 1rem 1rem 0 0 !important;
        border-bottom: none !important;
    }

    /* Hide profile image on desktop by default */
    .hero-img {
        display: none !important;
    }

    /* Borders Removed per User Request */
    #projects .col-md-6,
    #experience .col-md-6 {
        border: none !important;
        margin-bottom: 2rem !important;
        /* Keep the spacing though */
    }

    body.light-mode #projects .col-md-6,
    body.light-mode #experience .col-md-6 {
        border: none !important;
    }
}