/* ==================================================
   BluePrint Forge – FINAL CSS (Updated Dec 2025)
   Mobile Collaborations: 2 logos per row + larger + lower placement
   ================================================== */
@import url('https://fonts.googleapis.com/css2?family=Droid+Serif:wght@400;700&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    height: 100%;
    overflow-y: scroll;
}

body {
    margin: 0;
    padding-top: 80px;
    font-family: 'Droid Serif', serif;
    line-height: 1.6;
    color: #fff;
    background: #155193 fixed;
    background-image:
        linear-gradient(to bottom, rgba(100,150,200,.15) 1px, transparent 1px),
        linear-gradient(to right, rgba(100,150,200,.15) 1px, transparent 1px),
        linear-gradient(to bottom, transparent 99px, rgba(200,220,255,.6) 1px, transparent 1px),
        linear-gradient(to right, transparent 99px, rgba(200,220,255,.6) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 200px 200px, 200px 200px;
    background-position: center, center, 100px 100px, 100px 100px;
    min-height: 100vh;
}

/* EVERY SECTION = EXACTLY ONE FULL SCREEN */
section {
    height: 100vh;
    min-height: 100vh;
    padding: 4rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .8s ease;
}
.fade-in-section.appeared { opacity: 1; transform: none; }

/* ==================== NAVIGATION ==================== */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: rgba(21,81,147,.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-container {
    max-width: 1200px;
    width: 100%;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

.nav-menu,
.dropdown-menu {
    list-style: none;
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    padding: .5rem 1rem;
    border-radius: 4px;
    transition: all .3s ease;
}
.nav-link:hover,
.nav-link.active {
    background: #fff;
    color: #155193;
}

.dropdown { position: relative; }
.dropdown-toggle { cursor: pointer; }
.caret { font-size: .7em; margin-left: 4px; transition: transform .2s; }
.dropdown:hover .caret { transform: rotate(180deg); }

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(21,81,147,.98);
    min-width: 160px;
    border-radius: 6px;
    padding: .5rem 0;
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
    z-index: 1000;
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu .nav-link { display: block; padding: .6rem 1.2rem; white-space: nowrap; }

.nav-toggle { display: none; flex-direction: column; cursor: pointer; }
.bar { width: 25px; height: 3px; background: #fff; margin: 3px 0; transition: .3s; }

/* ==================== HERO ==================== */
#hero .container { max-width: 100%; padding: 0 2rem; flex-direction: column; text-align: center; }
#hero h1 { font-size: 3.5rem; margin-bottom: .5rem; }
#hero .tagline { font-size: 1.6rem; font-style: italic; margin-top: 1rem; }
#hero .icon img { width: 320px; height: auto; margin: 2rem 0; }

/* ==================== CONTENT SECTIONS ==================== */
section:not(#hero):not(#process) .container { max-width: 70vw; flex-wrap: nowrap; gap: 4rem; }
section:not(#hero):not(#process) .icon { flex: 0 0 600px; display: flex; justify-content: center; }
section:not(#hero):not(#process) .icon img { max-width: 100%; height: auto; object-fit: contain; }
section:not(#hero):not(#process) .text { flex: 1; min-width: 300px; text-align: center; }
section:not(#hero):not(#process) p { font-size: 1.6rem; font-style: italic; margin-bottom: 1rem; }
section:not(#hero):not(#process) .highlight { font-size: 1.8rem; font-weight: 700; font-style: normal; }

/* ==================== PROCESS SECTION ==================== */
#process .container { flex-direction: column; text-align: center; gap: 2rem; max-width: 70vw; }
#process .process-icons {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    padding: 3rem 0;
}
#process .process-icons img {
    width: clamp(140px, 18vw, 200px);
    height: clamp(140px, 18vw, 200px);
    object-fit: contain;
    flex-shrink: 0;
}
#process p { font-size: 1.7rem; font-style: italic; }
#process .highlight { font-size: 1.8rem; font-weight: 700; font-style: normal; }

/* ==================== COLLABORATIONS (Desktop – unchanged) ==================== */
#collaborations .collaborations-logos {
    position: relative;
    width: 600px;
    height: 560px;
    max-width: 100%;
}

#collaborations .logo-float {
    position: absolute;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 2rem;
}

#collaborations .logo-link {
    display: block;
    cursor: pointer;
    transition: transform 0.4s ease;
}

#collaborations .logo-link img {
    width: 140px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
    opacity: 0.92;
    transition: all 0.4s ease;
    animation: float 14s infinite ease-in-out;
    pointer-events: none;
}

#collaborations .logo-link:hover img {
    transform: translateY(-18px) scale(1.1);
    filter: drop-shadow(0 25px 50px rgba(0,0,0,0.45));
    opacity: 1;
}

/* Staggered delays */
#collaborations .logo-link:nth-child(1) img { animation-delay: 0s; }
#collaborations .logo-link:nth-child(2) img { animation-delay: 1.8s; }
#collaborations .logo-link:nth-child(3) img { animation-delay: 3.5s; }
#collaborations .logo-link:nth-child(4) img { animation-delay: 5.2s; }
#collaborations .logo-link:nth-child(5) img { animation-delay: 7s; }
#collaborations .logo-link:nth-child(6) img { animation-delay: 8.8s; }
#collaborations .logo-link:nth-child(7) img { animation-delay: 10.5s; }
#collaborations .logo-link:nth-child(8) img { animation-delay: 12s; }

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-32px) rotate(4deg); }
}

/* ==================== MOBILE ONLY FIXES ==================== */
@media (max-width: 768px) {
    .nav-toggle { display: flex; }

    .nav-menu {
        position: absolute;
        top: 80px; left: 0; right: 0;
        background: #155193;
        flex-direction: column;
        padding: 1rem 0;
        transform: translateY(-150%);
        transition: transform .4s ease;
    }
    .nav-menu.active { transform: translateY(0); }

    .nav-toggle.is-active .bar:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .nav-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .nav-toggle.is-active .bar:nth-child(3) { transform: rotate(-45deg) translate(7px,-6px); }

    .dropdown-menu { position: static; transform: none; background: rgba(0,0,0,.3); box-shadow: none; }
    .dropdown:hover .dropdown-menu { display: none; }
    .dropdown.active .dropdown-menu { display: block; }

    section:not(#hero) {
        height: calc(100vh - 80px) !important;
        min-height: calc(100vh - 80px) !important;
        padding: 4rem 2rem !important;
    }

    #hero {
        height: 100vh;
        min-height: 100vh;
        padding: 8rem 1.5rem 4rem;
    }

    .container, #hero .container, #process .container {
        max-width: 100vw !important;
        padding: 0 1.5rem !important;
    }

    #process .process-icons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 3rem;
        padding: 4rem 2rem;
        max-width: 90vw;
        margin: 0 auto;
        justify-items: center;
    }

    section:not(#hero):not(#process) .container {
        flex-direction: column !important;
        gap: 2rem !important;
        align-items: center;
    }
    section:not(#hero):not(#process) .icon {
        flex: none !important;
        margin-bottom: 1.5rem;
    }
    section:not(#hero):not(#process) .icon img {
        width: 280px;
        height: auto;
    }
    section:not(#hero):not(#process) .text {
        padding: 0 1rem;
        text-align: center;
    }

    section img { max-width: 100% !important; height: auto !important; }
    .text { width: 100% !important; }

    section:not(#hero) p,
    section:not(#hero) .highlight {
        font-size: 75% !important;
    }

    /* Mobile: Remove tap highlight */
    .nav-link:hover,
    .nav-link.active,
    .nav-link:active,
    .nav-link:focus,
    .nav-toggle,
    .nav-toggle:active,
    .nav-toggle:focus {
        background: transparent !important;
        color: #fff !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* ==================== MOBILE: COLLABORATIONS – 2 PER ROW, LARGER, LOWER ==================== */
    #collaborations .container {
        flex-direction: column !important;
        justify-content: center;
        padding-top: 6rem !important;   /* pushes everything down nicely */
        gap: 5rem;
    }

    #collaborations .collaborations-logos {
        margin-top: 4rem;               /* extra push for logos only */
        padding: 2rem 0;
    }

    #collaborations .logo-float {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;   /* ← 2 logos per row */
        gap: 4rem 3rem;
        justify-items: center;
        padding: 2rem 1rem;
    }

    #collaborations .logo-link img {
        width: 140px;                    /* much bigger */
        max-width: 160px;
        animation: none;
    }

    #collaborations .logo-link:hover img {
        transform: scale(1.15);
    }

    /* Extra polish on very small phones */
    @media (max-width: 480px) {
        #collaborations .container { padding-top: 4rem !important; }
        #collaborations .logo-link img { width: 125px; }
        #collaborations .logo-float { gap: 3.5rem 2.5rem; }
    }
}