/* --- TÜRI LASTEAED: Protostari struktuuri ja värvide täppiskoopia --- */

/* 1. Kogu lehe üldine helehall taust (Protostari vaikimisi taust) */
body {
    background-color: #f4f6f7 !important;
    color: #333333;
}
body.site {
    padding-bottom: 240px;
    background-image: url(../images/lasteaed-bottom.png);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: center bottom;
}

/* 2. Koondame KÕIK elemendid ühte kompaktsesse valgesse kasti keset ekraani */
.site-grid {
    background-color: #ffffff;
    max-width: 1170px !important;
    margin: 30px auto !important;
    padding: 20px 10px !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.07) !important;
    border-radius: 6px;
    border: 1px solid #e3e3e3;
}

/* 3. Päise ja menüü piiramine, et nad ei veniks kastist välja */
header.container-header.full-width > .grid-child {
    max-width: 1170px !important;
    margin-left: auto;
    margin-right: auto;
}
.header {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 20px !important;
    display: block !important;
}
.metismenu.mod-menu .mm-toggler,
.container-header .mod-menu>li>a, .container-header .mod-menu>li>span {
    color: #829818;
}
.container-below-top .mod-menu li.nav-item.active>a {
    color: #e8652e;
}
.container-below-top .mod-menu>li.active:after, 
.container-below-top .mod-menu>li:hover:after {
    background: #e8652e;
}
.container-header .metismenu>li>a:hover:after, 
.container-header .metismenu>li.active>a:after {
    background: #829818;
}
.container-header .navbar-toggler {
    color: #333;
    border: 1px solid #333;
}


/* 4. Logo seadistus */
.container-header .navbar-brand {
  padding-left: 18px;
  padding-right: 18px;
}
.navbar-brand img {
    max-height: 90px;
    width: auto;
}
.container-header .navbar-brand a,
.container-header .site-description {
  color: #95B41D;
  text-decoration: none;
}


/* 5. Peamenüü täielik Protostari disain koos toimiva rippmenüüga (Suured ekraanid) */
.container-menu {
    display: block !important;
    width: 100% !important;
    clear: both;
}

@media (min-width: 992px) {
    .mod-menu_nav.metismenu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        padding: 5px 10px !important;
        margin: 15px 0 25px 0 !important;
        list-style: none;
        background-color: #f5f5f5 !important;
        border: 1px solid #e3e3e3 !important;
        border-radius: 4px;
        width: 100% !important;
    }

    .mod-menu_nav.metismenu li {
        display: inline-block !important;
        position: relative !important;
    }

    .mod-menu_nav.metismenu a {
        color: #0088cc !important;
        padding: 8px 15px !important;
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        border-radius: 4px;
        display: block;
    }

    .mod-menu_nav.metismenu a:hover {
        background-color: #e9e9e9 !important;
        color: #005580 !important;
    }

    .mod-menu_nav.metismenu .active > a,
    .mod-menu_nav.metismenu .current > a {
        background-color: #0088cc !important;
        color: #ffffff !important;
    }

    /* --- RIPPMENÜÜ (Dropdown) SUUREL EKRAANIL --- */
    .mod-menu_nav.metismenu ul {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        background-color: #ffffff !important;
        border: 1px solid #cccccc !important;
        border-radius: 4px !important;
        box-shadow: 0 6px 12px rgba(0,0,0,0.175) !important;
        padding: 5px 0 !important;
        min-width: 160px !important;
        z-index: 1000 !important;
        list-style: none !important;
        margin: 0 !important;
    }

    .mod-menu_nav.metismenu li:hover > ul {
        display: block !important;
    }

    .mod-menu_nav.metismenu ul li {
        display: block !important;
        width: 100% !important;
    }

    .mod-menu_nav.metismenu ul a {
        color: #333333 !important;
        padding: 6px 20px !important;
        font-weight: normal !important;
        font-size: 13px !important;
        border-radius: 0 !important;
        text-align: left !important;
    }

    .mod-menu_nav.metismenu ul a:hover {
        background-color: #0088cc !important;
        color: #ffffff !important;
    }
}

/* --- MOBIILI VAATE SEADISTUS (Hamburger-menüü) --- */
@media (max-width: 991.98px) {
    /* Lubame menüü nupul ja sisul õigesti käituda */
    .container-menu .navbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    
    .container-menu .navbar-collapse {
        width: 100% !important;
    }

    /* Muudame menüü nimekirja mobiilis vertikaalseks ja paneme ilusa raami */
    .mod-menu_nav.metismenu {
        display: block !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 10px 0 !important;
        background-color: #f5f5f5 !important;
        border: 1px solid #e3e3e3 !important;
        border-radius: 4px !important;
        width: 100% !important;
    }

    .mod-menu_nav.metismenu li {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #e5e5e5;
    }
    .mod-menu_nav.metismenu li:last-child {
        border-bottom: none;
    }

    .mod-menu_nav.metismenu a {
        color: #0088cc !important;
        padding: 12px 15px !important;
        display: block !important;
        text-decoration: none;
        font-size: 15px !important;
    }

    .mod-menu_nav.metismenu a:hover {
        background-color: #e9e9e9 !important;
    }

    /* Alammenüü punktid mobiilis (nihutame veidi paremale, et oleks selge) */
    .mod-menu_nav.metismenu ul {
        display: block !important; /* Mobiilis näitame neid nimekirjana all */
        list-style: none !important;
        padding-left: 20px !important;
        background-color: #eaeaea !important;
        margin: 0 !important;
    }
    
    .mod-menu_nav.metismenu ul li {
        border-bottom: 1px solid #dcdcdc;
    }
}

/* 6. Külgriba (Sidebar) - Protostari stiilis hallid ümarate nurkadega kastid */
.container-sidebar .card {
    background-color: #f9f9f9 !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05) !important;
    margin-bottom: 20px;
    padding: 15px !important;
}

.container-sidebar .card-title {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 5px;
    margin-bottom: 12px;
    color: #555555;
    font-size: 16px;
    font-weight: bold;
}

/* 7. Globaalsed värviaktsendid ja lingid */
:root {
    --cassiopeia-color-primary: #0088cc;
    --cassiopeia-color-hover: #005580;
    --cassiopeia-color-link: #0088cc;
}

a {
    color: #447a00;
}
a:hover {
    color: #005580;
}
.item-content .item-title a, 
.item-content .page-header a{
    text-decoration: none;
}

/* 9. Bootsrap vanad kujunduselemendid */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.btn-primary-blue {
 background-color: #006dcc;
 }
.btn-facebook {
 color: #fff;
 background-color: #3b5998;
 border-color: rgba(0,0,0,0.2);
}
blockquote p {
  font-style: italic;
  color: #757575;
}
.blog .items-leading .blog-item, 
.blog .blog-items .blog-item {
 margin-bottom: 20px;
 padding-bottom: 10px;
 border-bottom: 1px solid #d9d9d9;
}
body.itemid-130 .blog .page-header h2 > a {
 color: #E8652E;
}

#sidebar-right .well h4.page-header {
    border-bottom: 1px solid #ccc;
    text-align: center;
    margin-bottom: 12px;
}
.well.nav ul.nav > li {
 padding: 0;
 line-height: 1.3;
}
.well.nav ul.nav > li > a {
 padding: 7px 0;
}


/* Kasutaja menüü */
.kasutaja .card-body {
    padding: 0;
}

.kasutaja h4.card-header {
    font-size: 16px;
    padding: 12px 16px;
    background-color: #DB4437;
    color: #fff;
}
.menu-vertical.mod-list {
       background-color: #4285F4 !important;
    }
.menu-vertical.mod-list li.nav-item {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #8CB4F8;
        padding: 0;
    }
.menu-vertical.mod-list li.nav-item:last-child {
        border-bottom: none;
    }
.menu-vertical.mod-list li.nav-item a {
        color: #E6E9FB !important;
        padding: 12px 15px !important;
        display: block !important;
        text-decoration: none;
    }
.menu-vertical.mod-list li.nav-item.active, 
.menu-vertical.mod-list li.nav-item a:hover {
        background-color: #285094 !important;
    }