/* =========================================================
   Ookla Packaging - Main Front-End Styles
   Keep render-critical/layout CSS here. This file is loaded
   normally in <head> (never delayed by the theme).
   ========================================================= */

:root {
    --ookla-font: 'Montserrat', Arial, sans-serif;
    --ookla-text: #111111;
    --ookla-bg: #ffffff;
    --ookla-container: 1320px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--ookla-bg);
    color: var(--ookla-text);
    font-family: var(--ookla-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ookla-font);
    font-weight: 700;
    line-height: 1.2;
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    text-decoration: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.site {
    width: 100%;
    min-height: 100vh;
}

.ookla-container {
    width: min(var(--ookla-container), calc(100% - 40px));
    margin-inline: auto;
}

/* Temporary starter screen. It can be deleted once the real header/homepage is built. */
.theme-starter {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 40px 20px;
    text-align: center;
}

.theme-starter__inner {
    max-width: 720px;
}

.theme-starter h1 {
    margin-bottom: 12px;
    font-size: clamp(32px, 5vw, 64px);
}

.theme-starter p {
    margin-bottom: 0;
    font-size: 18px;
}

@media (max-width: 767px) {
    .ookla-container {
        width: min(var(--ookla-container), calc(100% - 28px));
    }
}


/* OOKLA HEADER */


:root{

--top-bg:#111710;

--main-bg:#D7A869;

--container:1240px;

}


.ookla-container{

max-width:var(--container);

margin:auto;

padding:0 20px;

}


/* TOP BAR */


.ookla-topbar{

background:#111710;

color:white;

height:56px;

display:flex;

align-items:center;

font-family:'Montserrat',sans-serif;

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

}


.ookla-topbar .ookla-container{

display:flex;

justify-content:space-between;

align-items:center;

}


.top-left,
.top-right{

display:flex;

align-items:center;

gap:25px;

}


.flags{

display:flex;

align-items:center;

}

.top-left span{
    font-size:18px;
    font-weight:500;
    line-height:30px;
}

.flags img{

width:125px;

height:36px;

margin-left:-8px;

border:2px solid #111710;

}


/* NAVBAR */


.ookla-navbar{

background:#D7A869;

height:64px;

font-family:'Montserrat',sans-serif;

}


.nav-inner{

height:100%;

display:flex;

align-items:center;

justify-content:space-between;

}


.logo img{

width:105px;

}


.main-navigation{

flex:1;

margin-left:35px;

}


.ookla-menu{

display:flex;

align-items:center;

gap:30px;

list-style:none;

margin:0;

padding:0;

}


.ookla-menu li a{

color:#fff;

font-size:18px;

text-decoration:none;

font-weight:500;

}


.ookla-menu li.current-menu-item a{

color:#111710;

border-bottom:3px solid #111710;

padding-bottom:8px;

}


/* SEARCH */


.search-box form{

display:flex;

height:38px;

background:white;

border-radius:30px;

overflow:hidden;
border: 3px solid #ffffff;

}


.search-box input{

border:0;

outline:none;

padding:0 18px;

width:150px;

font-family:'Montserrat';

}


.search-box button{

background:#D7A869;

border:0;

padding:0 25px;

border-radius:30px;

font-family:'Montserrat';

cursor:pointer;

}


.mobile-menu{

display:none;

font-size:25px;

}


/* RESPONSIVE */


@media(max-width:991px){


.ookla-topbar{

height:auto;

padding:12px 0;

}


.ookla-topbar .ookla-container{

flex-direction:column;

gap:10px;

}


.ookla-navbar{

height:auto;

padding:15px 0;

}
.flags img


.main-navigation{

display:none;

}


.search-box{

display:none;

}


.mobile-menu{

display:block;

}


}


@media(max-width:600px){


.logo img{

width:90px;

}


.top-left,
.top-right{

font-size:12px;

gap:10px;

}


.flags img{

width:28px;

height:28px;

}


}
/* FIX SEARCH POPUP DEFAULT */

.mobile-search-popup{
    display:none;
}


/* MOBILE HEADER */

@media(max-width:991px){

    .ookla-topbar .ookla-container{
        flex-direction:row;
        justify-content:center;
    }


    .top-left{
        display:none;
    }


    .top-right{
        width:auto;
        flex-direction:row;
        justify-content:center;
        gap:15px;
    }


    .top-right span{
        font-size:12px;
    }


    .ookla-navbar{
        height:70px;
        padding:0;
    }


    .nav-inner{
        height:70px;
        display:flex;
        align-items:center;
    }


    .main-navigation,
    .search-box{
        display:none;
    }


    .logo img{
        width:100px;
    }


    .mobile-search-icon,
    .mobile-menu{
        display:block;
        padding: 0;
        background: transparent;
        border: unset;
        font-size: 35px;
    }


}


/* MOBILE SEARCH POPUP */

.mobile-search-popup.active{
    display:block;
}


.mobile-search-popup{
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:#fff;
    padding:15px;
    z-index:999;
}


.mobile-search-popup form{
    display:flex;
}


.mobile-search-popup input{
    flex:1;
    height:40px;
    border:1px solid #ddd;
    padding:0 15px;
}


.mobile-search-popup button{
    background:#D7A869;
    border:0;
    padding:0 20px;
}


@media(max-width:600px){

    .top-right span{
        font-size:12px;
    }


    .logo img{
        width:90px;
    }

}
.mobile-actions{
    display:none;
}


@media(max-width:991px){

.mobile-actions{
    display:flex;
    align-items:center;
    gap:15px;
}


.mobile-search-icon,
.mobile-menu{
    display:block;
}


}
/* ===========================
   MOBILE MENU
=========================== */


@media(max-width:991px){


.main-navigation{

position:absolute;

top:160px;

right:0;

width:100%;

background:#D7A869;

padding:20px;

display:none;

z-index:999;


}


.main-navigation.active{

display:block;

}


.ookla-menu{

flex-direction:column;

align-items:flex-start;

gap:20px;

}


.ookla-menu li a{

font-size:16px;

}


.mobile-search-popup{

display:none;

}


.mobile-search-popup.active{

display:block;

position:absolute;

top:160px;

left:0;

width:100%;

background:#fff;

padding:15px;

z-index:999;

}


.mobile-search-popup form{

display:flex;

}


.mobile-search-popup input{

flex:1;

height:40px;

padding:0 15px;

border:1px solid #ddd;

}


.mobile-search-popup button{

background:#D7A869;

border:0;

padding:0 20px;

}


}