/*

Theme Name: Focs Theme
Theme URI: https://www.focs.ai
Description: Focs Theme
Author: Focs Team
Author URI: https://www.focs.ai
Version: 1.0
Text Domain: focstheme

*/

body {
    margin: 0;
    padding: 0;
    background: #fff;
}

#primary {
    padding-top: 80px;
}

body, button, input, select, textarea {
    font-family: 'Roboto', sans-serif;
}


#masthead {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
}

body.web-blocker-active #masthead,
body.web-blocker-active #colophon {
    display: none !important;
}

.site-header {
    position: sticky;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #ccc;
}

.site-logo img {
    max-height: 40px;
    max-width: 40px;
}

.site-title {
    margin: 0;
	padding-top: 0px;
    padding-left: 10px;
}
.site-title{
    text-decoration: none; 
    color: #333; 
    font-size: 25px; 
    font-weight: normal; 
    margin: 0; 
    padding: 0;
	margin-left: 10px;
}

.site-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
}


.site-branding {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 100px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.main-navigation {
    margin-left: auto;
    text-align: right;
    padding-right: 100px;
}


.main-navigation .current-menu-item a {
    color: #46A049;
    font-weight: bold;
}


.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.main-navigation li {
    margin-right: 20px; 
}

.main-navigation li:last-child {
    margin-right: 0; 
}

.main-navigation a {
    text-decoration: none; 
    color: #333; 
    font-size: 18px; 
    padding: 5px; 
}

.main-navigation a:hover {
    color: #00c73c; 
}


.menu-toggle {
    display: none;
}


@media (max-width: 1000px) {
	
	#primary {
    	padding-top: 60px;
	}

    .site-header {
        position: relative; 
        z-index: 1000; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-top: 0px;
        padding-bottom: 0px;
    }

        
    .site-branding {
        display: flex; 
        align-items: center; 
        justify-content: center;
        padding-left: 30px;
    }

    .site-logo img {
        max-height: 30px; 
        max-width: 30px;
    }
	
	.site-logo {
		padding-top: 0px;
	}

    .site-title {
        text-decoration: none; 
        color: #333; 
        font-size: 20px; 
        font-weight: 100; 
        margin: 0; 
        padding: 0;
		margin-left: 10px;
    }

    .menu-toggle {
    display: flex;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    justify-content: flex-end;
    margin-right: 30px;
	}

	.menu-toggle-icon, .menu-close-icon {
		display: none;
		width: 30px;
		height: 30px;
	}

	.menu-toggle-icon {
		display: block;
	}

    .main-navigation {
        position: absolute; 
        z-index: 9999; 
        display: none; 
        top: 60px; 
        width: 100%; 
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
        width: 200px; 
        right: 10px; 
        top: 60px; 
        border: 2px solid #ccc; 
        border-radius: 10px; 
        padding-right: 0px;
        background: #f7f7f7; 
    }

    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block; 
    }

    .main-navigation li {
        padding: 5px; 
        margin: 0; 
    }

    .main-navigation a {
        font-size: 16px; 
        display: block; 
        text-decoration: none; 
        color: #333;
        text-align: left;
		padding: 10px;
    }
	
	a, button, input, select, textarea, [role="button"] {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		outline: none;
	}

	a:active, a:focus, button:active, button:focus, input:active, input:focus, select:active, select:focus, textarea:active, textarea:focus, [role="button"]:active, [role="button"]:focus {
		outline: none;
	}



}