/* ==========================================================================
   Opticent | Mobile Stylesheet
   Max-width: 768px targets tablets and mobile devices
========================================================================== 
*/

/* Hide mobile elements on desktop */
.waffle-btn {
    display: none;
}

@media screen and (max-width: 768px) {
    
    /* --- Global & Typography --- */
    body {
        overflow-x: hidden;
    }
    .section-title {
        font-size: 28px !important;
    }
    .hero-h1 {
        font-size: 32px !important;
    }
    .hero-sub {
        font-size: 15px;
    }

    /* HaloM400 swappable-lens image */
    #view-HaloM .image-block.layers-img img {
        max-height: 200px;
    }

    /* Forces the body background to match the Metrology theme when active */
    body:has(.sw.metro) {
        background-color: #310D00;
    }

    /* --- Navigation & Waffle Menu --- */
    nav {
        height: auto;
        padding: 1rem 1.5rem;
        display: flex;
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; 
    }
    
    /* Order properties keep the logo and waffle on top, menu items below */
    .logo-lockup { order: 1; }
    .waffle-btn { order: 2; }
    
    .waffle-btn {
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
    }
    
    .waffle-btn svg {
        width: 24px;
        height: 24px;
        fill: #fff; 
        transition: fill 1.2s ease;
    }
    
    /* Metro mode recolors the waffle icon */
    .sw.metro .waffle-btn svg {
        fill: var(--ba); 
    }

    /* Hide links and pill by default on mobile */
    nav .nav-links,
    nav .switcher-pill {
        display: none;
    }
    
    nav .nav-links {
        padding: 0;
    }

    /* Show them when the 'open' class is toggled via JS */
    nav.open .switcher-pill {
        display: inline-flex;
        width: max-content; /* Prevents uneven stretching */
        margin: 1.5rem auto 0 auto;
        order: 3; /* Puts slider at the top of the dropdown */
    }

    nav.open .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1.5rem 0 1rem 0;
        width: 100%;
        order: 4; /* Puts links under the slider */
    }

    /* --- Hero Sections --- */
    .hero {
        /* Puts the image on top of the text */
        flex-direction: column-reverse; 
        text-align: center;
        padding-top: 0;
    }
    
    /* Added "body" to increase specificity and override the <style> block in products.html */
    body .product-view .hero { 
        min-height: auto !important; 
        max-height: none !important; 
    }
    
    body .hero-visual {
        width: 100% !important;
        padding: 2rem 1.5rem 0rem 1.5rem !important; 
    }

    body .product-hero-visual {
        padding: 2rem 1.5rem 0rem 1.5rem !important; 
        width: 100% !important;
    }
    
    /* Forces the product images to scale down and removes the 600px gap */
    body .product-hero-visual img {
        height: auto !important;
        max-height: 300px !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    
    body .hero-content {
        padding: 1.5rem 1.5rem 3rem 1.5rem !important; 
        align-items: center !important;
        text-align: center;
        width: 100% !important;
    }
    
    .hero-actions {
        justify-content: center;
        width: 100%;
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-actions a, 
    .hero-actions button {
        width: 100%;
        justify-content: center;
    }

    /* --- Layout Features & Grids --- */
    .features {
        padding: 3rem 1.5rem !important;
    }
    .content-block {
        text-align: center;
    }
    
    /* Stacks the 50/50 image and text sections */
    .split-section, 
    .split-section.layers-cluster {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
        text-align: center;
    }
    
    /* Fixes the Right-to-Left hack used for reverse sections on desktop */
    .split-section.reverse {
        direction: ltr !important;
    }
    
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .image-block {
        width: 100% !important;
    }
    .image-block img {
        max-height: 300px;
        width: 100%;
        object-fit: cover;
    }
    .image-block.layers-img img {
        object-position: center !important;
    }

    /* Forces the Aurora comparison image to stay inside the screen */
    .image-block.compare-img img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: contain !important;
    }

    /* --- Specific Component Adjustments --- */
    
    /* Technology Page Vertical Carousel */
    .vert-logo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }
    
    /* Index Page Specifications Sidebar */
    .spec-layout-wrapper {
        flex-direction: column !important;
        gap: 2rem !important;
    }
    .spec-sidebar {
        position: static !important;
        flex: none !important;
        width: 100% !important;
        text-align: center;
    }
    
    /* Products Page Tabs & Tables */
    /* Force horizontal product tabs on mobile */
    .product-tabs {
        padding: 1rem 1.5rem !important; /* Shrinks the wide desktop padding */
    }

    .product-tabs > div {
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Forces them to stay on one line */
        justify-content: center !important;
        gap: 1rem !important; /* Reduces the gap to fit smaller screens */
    }

    .product-tabs a {
        width: max-content !important; /* Hugs the text tightly instead of stretching */
        flex: 0 0 auto !important; /* Prevents flexbox from forcing them wide */
        font-size: 13px !important; /* Slightly smaller text to fit side-by-side */
        white-space: nowrap !important; /* Prevents text inside the link from breaking */
    }
    .specs-grid {
        grid-template-columns: 1fr !important;
    }
    .compare-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 1rem -1.5rem 0 -1.5rem; 
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Allow the Halo comparison table to fit on mobile */
    .compare-table {
        min-width: 100% !important;
    }

    .compare-table th, 
    .compare-table td {
        padding: 0.75rem 0.5rem !important;
        font-size: 12px !important;
    }

    .check-icon {
        font-size: 1rem !important;
    }
    
    /* Contact Page Grid */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        padding: 2rem 1.5rem 4rem 1.5rem !important;
    }
    .contact-info {
        text-align: center;
    }
    .contact-form-card {
        padding: 2rem 1.5rem !important;
    }

    /* Research Page Grid */
    .research-grid {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }
    .research-paper-item {
        padding: 1.5rem !important;
    }
    .paper-title {
        font-size: 18px !important;
    }

    /* --- Footer --- */
    .footer-grid {
        flex-direction: column !important;
        gap: 2.5rem !important;
        text-align: center;
    }
    .foot-main {
        margin: 0 auto;
    }
    .footer-logo-lockup {
        justify-content: center;
    }
    .foot-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    /* Fix for Arbiter carousel dots overflowing */
    .car-dots {
        gap: 6px !important;
    }

    .car-dot {
        width: 25px !important;
    }
}

/* --- Small phones (iPhone SE/mini, most Androids) ---
   Shrinks the header lockup so the waffle stays on the same row as the logo.
   Slot height stays 18px because go() moves the reel by exactly -18px. */
@media screen and (max-width: 400px) {
    nav {
        padding: 1rem 1rem;
    }
    .logo-lockup,
    .logo-text-wrap {
        gap: 8px;
    }
    .logo-img-wrap {
        width: 36px;
        height: 36px;
    }
    .logo-opticent {
        height: 18px;
    }
    .logo-division {
        font-size: 13px;
        padding-left: 8px;
    }
    .waffle-btn {
        padding: 0.25rem;
    }
}