/* =====================================================
   MFANGANO ISLAND
   SCHOOL INDEX PAGE
   FILE: school-template.css
   PURPOSE:
   - Original background image remains unchanged
   - Navigation floats over the image
   - Dropdowns use readable semi-transparent background
   - English language only
   - Responsive for desktop, laptop, tablet and mobile
===================================================== */


/* =====================================================
   RESET / BASE
===================================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}


/* =====================================================
   HERO BACKGROUND
===================================================== */

.school-hero{
    position:relative;
    width:100%;
    min-height:100vh;

    background-image:url('/backgrounds/background-school.png');
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
}


/* =====================================================
   HEADER
===================================================== */

.school-header{
    position:absolute;
    top:24px;
    left:0;
    right:0;

    z-index:9999;

    display:flex;
    justify-content:flex-end;
    align-items:flex-start;

    padding:0 42px;
}


/* =====================================================
   MAIN NAVIGATION
===================================================== */

.school-nav{
    flex:1;

    display:flex;
    justify-content:center;

    padding-left:330px;
}

.school-main-menu{
    list-style:none;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    gap:70px;

    margin:0;
    padding:0;
}

.school-main-menu li{
    list-style:none;
}

.school-menu-item{
    position:relative;
    padding-bottom:42px;
}

.school-menu-link{
    display:block;

    color:#000000;
    text-decoration:none;

    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:22px;
    font-weight:900;

    letter-spacing:.2px;
    white-space:nowrap;

    text-shadow:
        0 1px 2px rgba(255,255,255,1),
        0 0 6px rgba(255,255,255,.95);
}

.school-menu-link span{
    color:#000000;
    margin-left:7px;
    font-size:15px;
}

.school-menu-link:hover{
    color:#0b4f1f;
}


/* =====================================================
   FLOATING DROPDOWN
===================================================== */

.school-dropdown{
    position:absolute;

    top:40px;
    left:-8px;

    display:none;

    min-width:310px;

    margin:0;
    padding:16px 18px;

    list-style:none;

    background:rgba(5,15,25,.74);

    border:1px solid rgba(255,255,255,.18);
    border-radius:12px;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.school-menu-item:hover > .school-dropdown,
.school-menu-item:focus-within > .school-dropdown{
    display:block;
}

.school-dropdown li{
    display:block;
    margin:0 0 10px 0;
    padding:0;
}

.school-dropdown li:last-child{
    margin-bottom:0;
}

.school-dropdown a{
    display:block;

    color:#ffffff;
    text-decoration:none;

    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:700;

    line-height:1.45;
    white-space:nowrap;

    transition:.2s ease;
}

.school-dropdown a:hover,
.school-dropdown a:focus{
    color:#d8b04c;
    padding-left:8px;
}


/* =====================================================
   LANGUAGE + SEARCH
===================================================== */

.school-tools{
    display:flex;
    align-items:center;
    gap:24px;

    padding-top:0;
}

.school-language{
    color:#000000;

    font-size:18px;
    font-weight:900;

    white-space:nowrap;

    text-shadow:
        0 1px 2px rgba(255,255,255,1),
        0 0 6px rgba(255,255,255,.95);
}

.school-language a{
    color:#000000;
    text-decoration:none;
}

.school-language a:first-child{
    color:#0b4f1f;
}

.school-language span{
    color:#000000;
    margin:0 8px;
}

.school-search{
    display:flex;
    align-items:center;

    height:44px;
}

.school-search input{
    width:180px;
    height:44px;

    padding:0 14px;

    border:2px solid rgba(0,0,0,.65);
    border-right:none;

    background:rgba(255,255,255,.18);
    color:#000000;

    font-size:16px;
    font-weight:800;

    outline:none;
}

.school-search input::placeholder{
    color:#000000;
}

.school-search button{
    width:46px;
    height:44px;

    border:2px solid rgba(0,0,0,.65);

    background:rgba(255,255,255,.18);
    color:#000000;

    cursor:pointer;

    font-size:16px;
}


/* =====================================================
   LAPTOP
===================================================== */

@media(max-width:1500px){

    .school-header{
        padding:0 30px;
    }

    .school-nav{
        padding-left:285px;
    }

    .school-main-menu{
        gap:46px;
    }

    .school-menu-link{
        font-size:18px;
    }

    .school-dropdown{
        min-width:290px;
    }

    .school-dropdown a{
        font-size:15px;
    }

    .school-search input{
        width:145px;
    }
}


/* =====================================================
   SMALL LAPTOP / TABLET
===================================================== */

@media(max-width:1150px){

    .school-hero{
        min-height:100vh;
        background-position:center top;
    }

    .school-header{
        flex-direction:column;
        align-items:flex-start;
        gap:22px;

        padding:24px 28px;
    }

    .school-nav{
        width:100%;
        padding-left:0;

        justify-content:flex-start;
    }

    .school-main-menu{
        width:100%;

        flex-direction:column;
        gap:20px;
    }

    .school-menu-item{
        padding-bottom:0;
    }

    .school-menu-link{
        font-size:22px;
    }

    .school-dropdown{
        position:relative;
        top:10px;
        left:0;

        min-width:auto;
        width:auto;

        margin-bottom:12px;
    }

    .school-dropdown a{
        font-size:17px;
        white-space:normal;
    }

    .school-tools{
        padding-top:0;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

    .school-hero{
        min-height:100vh;
        background-size:cover;
        background-position:center top;
    }

    .school-header{
        padding:20px;
        gap:20px;
    }

    .school-menu-link{
        font-size:19px;
    }

    .school-dropdown{
        padding:14px 16px;
    }

    .school-dropdown a{
        font-size:16px;
    }

    .school-tools{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }

    .school-search input{
        width:190px;
    }
}