/* mobile.css - mobile-specific styles for index.html only
   Responsive mobile design with breakpoints at 700px, 500px and 400px.
   All units use rem, em, %, vw, vh or clamp() where applicable.
   Glassmorphism, fluid typography, stacking and spacing optimized for small screens.
*/

@media (max-width: 700px) {

    /* === global mobile base styles === */
    html,
    body {
        width: 100%;
        overflow-x: hidden;
        font-size: 1rem;
        /* base font for rem scaling */
        -webkit-text-size-adjust: 100%;
    }

    /* make all containers use full width by default */
    .container,
    .max-w-7xl,
    .mx-auto {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* typography scaling */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    span,
    li {
        line-height: 1.4;
        margin: 0;
        padding: 0;
    }

    h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }

    h2 {
        font-size: clamp(1.5rem, 5.5vw, 2rem);
    }

    h3 {
        font-size: clamp(1.25rem, 4.5vw, 1.75rem);
    }

    p,
    li,
    a {
        font-size: clamp(1rem, 4vw, 1.25rem);
    }

    /* glass-button default for mobile */
    .glass-button {
        background: #38bdf8;
        backdrop-filter: blur(8px);
        border: 1px double #1e293b;
        border-radius: 9999px;
        color: #020408;
        text-align: center;
        transition: background 0.3s, transform 0.2s;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
    }

    .glass-button:hover{
        background: #020408;
        color: #ccd6f6;
        transform: translateY(-0.1rem);
    }

    /* glass-panel base */
    .glass-panel {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 1.25rem;
        color: inherit;
    }

    /* watermark styling (mobile) */
    .watermark {
        position: absolute;
        font-family: inherit;
        font-weight: 900;
        /* more prominent size but still responsive */
        font-size: clamp(5rem, 25vw, 10rem);
        opacity: 0.08;
        z-index: 1;
        pointer-events: none;
        user-select: none;
        /* default center transform; overridden where necessary */
        transform: translate(-50%, -50%);
    }

    /* sections container spacing */
    section {
        padding: 6rem 0 6rem 0;
    }

    /* navigation for mobile */
    #navbar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 60;
        /* elevated to ensure menu items sit above other layers */
        background: rgba(1, 2, 4, 0.75);
        backdrop-filter: blur(10px);
        overflow: visible;
        /* allow menu to extend outside */
    }

    #nav-logo a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem;
    }

    #mobile-nav-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        /* background: rgba(255, 255, 255, 0.1); */
        backdrop-filter: blur(8px);
        /* border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 9999px; */
        transition: background 0.3s;
    }

    #mobile-menu {
        display: none;
        position: fixed;
        top: 4.5rem;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 1rem;
        box-sizing: border-box;
        z-index: 65;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        pointer-events: none;
        backdrop-filter: blur(10px);
        background: rgba(1, 2, 4, 0.403);
    }
    
    #mobile-menu.show {
        display: flex;
        flex-direction: column;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    #mobile-menu>div {
        width: 100%;
    }

    #mobile-menu a {
        /* display: block; */
        /* padding: 1rem 0; */
        width: 100%;
        text-align: center;
        /* background: rgba(255, 255, 255, 0.05); */
        backdrop-filter: blur(6px);
        /* border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.15); */
        margin-bottom: 0.5rem;
        transition: background 0.3s;
        z-index: 66;
        /* ensure links themselves are above any overlay */
    }

    /* hero section adjustments */
    /* fill full viewport minus navigation height, animation contained */
    #hero-track {
        /* height: auto !important; */
        height: 100vh;
        position: relative;
        overflow: visible;
    }

    /* ensure navbar stays within top and doesn't expand into hero area */
    #navbar-wrapper {
        height: auto;
        max-height: 4.5rem;
    }

    #hero-text-container {
        padding: 2rem 0;
        margin-top: -2rem;
    }

    #hero-name {
        text-align: center;
    }

    #hero-content{
        height: 100%;
    }

    #hero-motto-wrapper {
        max-width: 90%;
        margin: 0 auto;
    }

    #scroll-indicator {
        position: fixed;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
    }

    /* content spacing */
    .reveal {
        opacity: 0;
        transform: translateY(1rem);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* contacts, services, sections will remain full width and stack */
    /* refine services layout for fluidity */
    #services .grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    #services .glass-panel {
        height: auto;
        padding: 2rem 1.5rem;
    }

    #services .glass-panel ul {
        justify-content: flex-start;
    }

    #services .glass-panel .watermark {
        display: none;
        /* Hide confusing watermarks on small screens if they overlap */
    }

    /* center contact section contents horizontally */
    #contact {
        display: flex;
        justify-content: center;
    }

    #contact .max-w-7xl {
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    #contact .grid {
        justify-items: center;
    }

    /* footer mobile adjustments */
    footer {
        padding-top: 6rem;
        padding-bottom: 3rem;
        text-align: center;
        font-size: 0.75rem;
    }

    footer .grid {
        grid-template-columns: 1fr;
    }

    footer .map,
    footer .hq {
        margin-top: 2rem;
    }

    /* form and grid elements within contact - stack on mobile */
    #contact form,
    #contact .grid {
        grid-template-columns: 1fr !important;
    }

    /* base watermark for each section - reposition per breakpoint later */
    .watermark.bottom-0 {
        top: auto;
        bottom: 0;
        left: 10%;
        /* move downwards so text sits inside section rather than half-out */
        transform: translateX(-50%) translateY(50%);
    }

    .watermark.top-0 {
        top: 0;
        left: auto;
        right: 10%;
        transform: translateX(-50%) translateY(-50%);
    }

    /* specifically align Vision watermark to bottom like others */
    .watermark.vision {
        top: auto;
        bottom: 0;
        left: 10%;
        transform: translateX(-50%) translateY(50%);
    }


    /* === media query: 700px and below === */
    @media (max-width: 700px) {
        .container {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        h2 {
            font-size: clamp(1.5rem, 6vw, 1.75rem);
        }

        h3 {
            font-size: clamp(1.25rem, 5vw, 1.5rem);
        }

        .glass-button {
            padding: 0.5rem 1rem;
        }

        #navbar-wrapper {
            padding: 0.25rem 0;
        }

        #nav-logo a {
            gap: 0.5rem;
        }

        #mobile-menu a {
            padding: 0.75rem 0;
        }

        .watermark {
            font-size: clamp(4rem, 20vw, 8rem);
        }
    }

    /* === media query: 500px and below === */
    @media (max-width: 500px) {
        h1 {
            font-size: clamp(1.5rem, 8vw, 2rem);
        }

        h2 {
            font-size: clamp(1.25rem, 7vw, 1.5rem);
        }

        p,
        li,
        a {
            font-size: clamp(0.9rem, 4.5vw, 1.1rem);
        }

        .glass-button {
            padding: 0.5rem 0.75rem;
            font-size: 0.95rem;
        }

        #mobile-nav-pill {
            width: 2.75rem;
            height: 2.75rem;
        }

        #navbar-wrapper {
            padding: 0.2rem 0;
        }

        .watermark {
            font-size: clamp(3rem, 22vw, 7rem);
        }
    }
    /* === hero section adjustments for 500px and below === */
    @media (max-width: 500px) {
        #hero-track {
            height: 100vh;
            padding-top: 4.5rem;
        }

        #hero-text-container {
            padding: 1rem 0;
            margin-top: 0;
            align-items: center;
        }

        #hero-name {
            font-size: clamp(3rem, 15vw, 3.5rem);
            margin-bottom: 1rem;
            text-align: center;
        }

        #hero-motto-wrapper {
            width: 95%;
            padding: 0 0.5rem;
            margin: 0 auto;
        }

        #hero-motto-wrapper h2 {
            font-size: clamp(2rem, 10vw, 2.5rem);
            text-align: center;
        }

        #hero-motto-wrapper p {
            font-size: clamp(0.85rem, 4vw, 1rem);
            text-align: center;
        }

        #hero-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 95vh;
            padding: 2rem 0;
        }

        #scroll-indicator {
            bottom: 1.5rem;
            font-size: 0.9rem;
        }
    }
    /* === media query: 400px and below === */
    @media (max-width: 400px) {
        h1 {
            font-size: clamp(1.25rem, 10vw, 1.75rem);
        }

        .glass-button {
            padding: 0.4rem 0.6rem;
        }

        #nav-logo a {
            padding: 0.25rem;
        }

        #mobile-menu a {
            font-size: 0.9rem;
        }

        .watermark {
            font-size: clamp(2.5rem, 24vw, 6rem);
        }
    }
    /* === hero section adjustments for 400px and below === */
    @media (max-width: 400px) {
        #hero-track {
            height: 100vh;
            padding-top: 4.5rem;
        }

        #hero-text-container {
            padding: 1rem 0;
            margin-top: 0;
        }

        #hero-name {
            font-size: clamp(2.5rem, 18vw, 3rem);
            margin-bottom: 1rem;
            text-align: center;
        }

        #hero-motto-wrapper {
            width: 90%;
            padding: 0 0.5rem;
            font-size: clamp(0.75rem, 5vw, 1rem);
        }

        #hero-motto-wrapper h2 {
            font-size: clamp(1.25rem, 6vw, 1.5rem);
            text-align: justify;
            
        }

        #hero-motto-wrapper p {
            font-size: 0.9rem;
            text-align: center;
        }

        #hero-text-container{
            height: 90%;
        }

        #hero-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 80vh;
            padding: 1.5rem 0;
        }

        #scroll-indicator {
            bottom: 1rem;
            font-size: 0.8rem;
        }
    }

}