/* 
   ----------------------------------------------------------------------------------------
   MOBILE OPTIMIZATIONS (Step 528)
   ----------------------------------------------------------------------------------------
*/

/* 1. Hero Text Flow */
.desktop-br {
    display: block;
    content: "";
    margin-top: 5px;
    /* Add slight breather for desktop lines */
}

@media only screen and (max-width: 768px) {
    .desktop-br {
        display: none !important;
        /* Disable forced breaks on mobile */
    }

    .about_me_content h1 {
        min-height: 80px;
        /* Slightly reduce reserved space (80px covers 2 lines @ 40px font-size) */
        margin-bottom: 5px;
        /* Reduce gap below heading to balance with top gap */
    }

    .about_me_content>span {
        line-height: 1.6;
        display: block;
        margin-bottom: 10px;
        white-space: normal;
        /* Force natural wrapping */
    }

    /* Fix Typing Cursor on Mobile */
    .typewrite>.wrap {
        border-right: 2px solid #fff !important;
        /* Ensure visible cursor */
        padding-right: 3px;
        /* Ensure width when empty */
        display: inline-block;
        /* Prevent collapse */
        line-height: 1;
        /* Match text height */
        animation: blink-caret 0.75s step-end infinite;
    }

    @keyframes blink-caret {

        from,
        to {
            border-color: transparent
        }

        50% {
            border-color: #fff
        }
    }
}

/* Fix Hero Slider Image Alignment on Mobile (Step 979 & 1076) */
@media only screen and (max-width: 768px) {

    /* 1. If it's a Background Image (e.g. .home_bg inline style) */
    #home,
    .home_bg,
    .vegas-slide-inner {
        background-position: 70% center !important;
    }

    /* 2. If it's an IMG element (e.g. Backstretch, Flexslider) */
    #home img,
    .home_bg img,
    div.backstretch img,
    .vegas-slide img {
        transform: translateX(-30%) !important;
        object-position: 70% center !important;
    }
}

/* 2. Floating Mobile Theme Toggle */
/* 2. Enable Back To Top on Mobile */
@media only screen and (max-width: 768px) {
    .topcontrol {
        display: block !important;
        bottom: 20px !important;
        right: 20px !important;
        z-index: 99999 !important;
    }
}

/* 3. Mobile Menu Enhancements (Step 723) */
@media only screen and (max-width: 991px) {
    /* Boostrap mobile breakpoint */

    /* Transparent Background */
    .navbar-custom .navbar-collapse {
        background-color: rgba(27, 30, 34, 0.95) !important;
        /* Base dark with transparency */
        backdrop-filter: blur(5px);
        /* Optional blur for better readability */
        padding: 10px;
        border-radius: 0 0 10px 10px;
    }

    /* Adjust for Light Mode: Pure White Background & Black Text */
    [data-theme="light"] .navbar-custom .navbar-collapse {
        background-color: #ffffff !important;
        box-shadow: none !important;
        /* Remove ugly borders/shadows */
        border: none !important;
    }

    /* FIX: Force Entire Header White when Menu is OPEN in Light Mode */
    [data-theme="light"] .navbar-custom:has(.navbar-collapse.show) {
        background-color: #ffffff !important;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        /* Optional subtle shadow */
    }

    /* Black Menu Text in Light Mode */
    [data-theme="light"] .navbar-custom .navbar-nav .nav-link {
        color: #1b2032 !important;
    }

    /* Active Link Red in Light Mode */
    [data-theme="light"] .navbar-custom .navbar-nav .nav-link.active {
        color: #da0046 !important;
    }

    /* Fix Theme Toggle Visibility in Mobile Light Mode */
    [data-theme="light"] .navbar-collapse .theme-toggle-btn {
        color: #1b2032 !important;
    }

    /* Force Logo Text Black on Mobile Light Mode (Always) */
    /* UPDATED LOGIC (Step 758): Default to White, Black only when Open or Sticky */

    /* 1. Default (Closed + Top): White */
    [data-theme="light"] .navbar-brand svg .logo-text {
        fill: #ffffff !important;
    }

    /* 2. Menu OPEN or Sticky: Black */
    [data-theme="light"] .nav-sticky .navbar-brand svg .logo-text,
    [data-theme="light"] .navbar-custom:has(.navbar-collapse.show) .logo-text,
    [data-theme="light"] .container:has(.navbar-toggler[aria-expanded="true"]) .logo-text {
        fill: #1b2032 !important;
    }

    /* Active Menu Icon Color */
    /* When menu is open, Bootstrap setting aria-expanded to true */
    .navbar-toggler[aria-expanded="true"] .mdi-menu {
        color: #da0046 !important;
        transition: color 0.3s ease;
    }

    /* FIX: Scroll-Aware Hamburger Icon (Step 936) */
    /* 1. Default (Top + Closed): White to match Dark Hero */
    [data-theme="light"] .navbar-toggler:not([aria-expanded="true"]) .mdi-menu,
    [data-theme="light"] .navbar-toggler:not([aria-expanded="true"]) .mdi-menu::before {
        color: #ffffff !important;
    }

    /* 2. Scrolled (Sticky + Closed): Black to match White Header */
    [data-theme="light"] .nav-sticky .navbar-toggler:not([aria-expanded="true"]) .mdi-menu,
    [data-theme="light"] .nav-sticky .navbar-toggler:not([aria-expanded="true"]) .mdi-menu::before {
        color: #1b2032 !important;
    }
}

/* 4. Mobile Auto-Hover Effects (Step 800) */
/* These rules ensure the .in-view class added by JS triggers hover effects */

/* Portfolio Items */
.box.in-view img {
    opacity: 0.4;
    transform: scale(1.1) translateX(-4%);
}

.box.in-view .box-content {
    opacity: 1;
    transform: translateX(0%);
}

/* Service Boxes */
/* Service Boxes */
.serviceBox.in-view .service-icon {
    /* Fixed: No background, strictly animation */
    animation: loading 0.3s ease normal forwards;
}

.serviceBox.in-view .service-icon img {
    /* Fixed: No filter */
}

/* Blog Posts */
.single_blog.in-view h2 a {
    color: #da0046;
}