/*
Theme Name: NBT Project Theme
Theme URI: https://nbtproject.org
Author: Avant 5 Multimedia
Author URI: https://www.avant5.com
Description: 
Version: 2.0
License: (c)2024 nbtproject.org.  All rights reserved
Text Domain: nbt
Tags: black
*/

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

:root {
    --light-grey:#f9f9f9;
    --nbt-blue:#6d999c;
    --home-nav:rgba(138, 192, 236, .4);
    --bp-nav:rgba(65, 98, 126, 0.95);
    --nav-current-page:#b0b8c6;
}

html { font-size:62.5% }
body { font-size:1.6rem; font-family:'Roboto', serif; line-height:1.45; position:relative; overflow-x:hidden; }
h1, h2, h3, #branding a { font-family:'Merriweather',sans-serif; }
h1 { margin:1em 0; }
h2 { margin:.8em 0; }
h3 { margin:.6em 0; font-size:1.8rem; }
h4 { margin:.5em 0; font-weight:900; text-transform:uppercase; font-size:1.3rem; margin-bottom:.4em; }
p { margin:1em 0; }

.list { padding-left:50px; }
li { list-style-type:none; }
.list li { list-style-type:disc; }

section, .section { padding-top:100px; padding-bottom:100px; }
section:first-of-type { padding-top:0; }
.home section:first-of-type { padding-top:100px; }

.no-vpad { padding-top:0; padding-bottom:0; }
.vpad-40 { padding-top:40px; padding-bottom:40px; }
.container { max-width:1280px; margin:0 auto;  row-gap:40px; }
.cpad { padding-left:15px; padding-right:15px; }
.center { text-align:center; }
.light-grey { background-color:var(--light-grey); }
.button { display:inline-block; padding:5px 15px; background-color:antiquewhite; color:black; border:1px solid burlywood; border-radius:8px; text-decoration:none; font-weight:700; }
    .button:hover { background-color:bisque; }
.alert { border:1px solid red; border-width:1px 5px; margin:30px 0; padding:8px; }

#navbar { position:fixed; width:100%; z-index:100; background-color:var(--bp-nav); top:0; left:110%; box-shadow:-3px -3px 7px rgba(0,0,0,.4); transition:all 1s; }
    .menu-open #navbar { left:40px; transition:all .4s; }
#navbar > div { height:100%; }
#navbar a { color:white; text-decoration:none; font-size:1.8rem; }
#navbar .current_page_item a { color:var(--nav-current-page); }
#nav-menu-toggle { position:absolute; top:13px; right:20px; }
#nav-menu-toggle a { font-size:2.4rem; color:var(--nbt-blue); }
#nav-menu-toggle span { display:none; }
#nav-menu-close { position:absolute; top:-20px; right:20px; z-index:101; transition:top 1s, transform .8s;  }
    #nav-menu-close a { color:white; font-size:2.4rem; }
    #nav-menu-close span { display:none; }
    .menu-open #nav-menu-close { top:8px; transform:rotate(90deg); }
#navbar ul.sub-menu { padding-left:20px; }

#titlebar { height:60px; display:grid; align-items:center; }
#branding a { text-decoration:none; font-weight:900; color:var(--nbt-blue); font-size:2.2rem; }
#hero { display:grid; justify-content:center; 
    align-items:center; color:white; background-image:url('timg/homepagehero.jpg'); 
    background-repeat:no-repeat; background-position:bottom center; background-size:cover; 
    height:600px;
    }
#hero > div { text-align:center; }



#guide-grid { display:grid; gap:40px; }
#guide-grid > div { position:relative; color:white; height:240px; display:grid; text-align:center; justify-content:center; align-items:center; background-repeat:no-repeat; background-size:cover; background-position:center center; }
    #guide-grid > div::before { content:' '; display:block; position:absolute; background-color:rgba(0,0,0,.45); height:100%; width:100%; top:0; left:0; z-index:0; }
    #guide-grid > div > div { position:relative; z-index:1; }
#guide-grid > div:last-child { background-image:url('timg/water-tap.jpg'); }
#guide-grid > div:first-child { background-image:url('timg/plumber.jpg'); }

#footer-grid { margin:0 auto; display:grid; }
#footer-meta { margin-top:40px; }

#footer-content-notices li:not(:last-child)::after { content:'-'; display:block; }

footer {
    color:white;
    background-image:url('timg/footer.jpg');
    background-position:bottom center;
    background-repeat:no-repeat;
    background-size:cover;
}

footer a { color:antiquewhite; }


@media screen and (max-width:1139px) {
    #navbar { height:100vh; width:100%; border-left:7px solid white;  }
    #navbar a { display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.3); }

    footer #metalinks a { display:block; border-bottom:1px solid rgba(250, 235, 215, .4); text-decoration:none; padding:12px 0; }
}

@media screen and (min-width:1140px) {

    .cpad { padding-left:60px; padding-right:60px; }
    section:first-of-type { padding-top:100px; }

    #nav-menu-toggle { display:none; }

    #navbar { display:block; background-color:var(--bp-nav); position:absolute; top:60px; left:0; box-shadow:none; transition:none; }
        .home #navbar { background-color:var(--home-nav); }
        #navbar > div { display:grid; align-content:center; }
        #navbar ul { height:100%; display:flex; column-gap:60px; }
        #navbar a { text-transform:uppercase; font-size:1.2rem; }
        #navbar a:hover { text-decoration:underline; }
        #navbar ul li { position:relative; display:block; line-height:34px; }
        #navbar ul.sub-menu { height:auto; display:none; position:absolute; top:34px; background-color:black; background-color:var(--bp-nav); padding:0; }
        .home #navbar ul.sub-menu { background-color:var(--home-nav); }
        #navbar li.menu-item-has-children:after { content:'\f078'; font-family:'FontAwesome'; font-size:1.1rem; color:white; margin-left:3px; vertical-align:middle; }
        #navbar li.menu-item-has-children:hover:after { content:'\f077'; color:#b0b8c6; }
        #navbar li.menu-item-has-children:hover > ul.sub-menu { display:block; }
        #navbar ul.sub-menu > li > a { display:block; min-width:200px; padding:4px 0 4px 15px; border-bottom:1px solid #444; padding:0 15px; }
        #navbar ul.sub-menu > li > a:hover { background-color:var(--nav-current-page); text-decoration:none; transition:all .3s; color:black; }
        
        
    #hero { background-size:100% auto; }

    #guide-grid { grid-template-columns:repeat(2, minmax(0,1fr)) }

    footer { background-size:100% auto; }
    #footer-grid { grid-template-columns:1fr 140px; }

}