/*
Theme Name: Privilegios en Compras — el blog
Theme URI: 
Description: A child theme for WL Vanilla, the default Webloyalty blog theme.
Author: Webloyalty
Author URI: https://webloyalty.ch/
Template: wl_vanilla_2.0
Version: 1.2
*/

/* DEPRECATED: @import url("../wl_vanilla/style.css");
   Used enqueue style in function.php instead. */

/*=====FONT=====*/

html{
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 15px;
}

body{
    font-size: 1rem;
}

/*=====COLORS=====*/

    /*---Backgrounds---*/
    #upper-header,
    h1,
    .diapositive,
    #colophon{
        background-color: #f99138; /* main color */
    }
    
    .slick-dots li.slick-active button:before,
    .vignette:hover .entry-title,
    .vignette:hover .posted-on:before,
    .vignette:hover .posted-in:before,
    .vignette.size-L .entry-title{
        background-color: #13b0e1; /* secondary color */
    }

    /*---Color---*/
    a,
    a:visited,
    .vignette:hover .posted-on,
    .vignette:hover .posted-in,
    .vignette:hover .posted-on a,
    .vignette:hover .posted-in a,
    .vignette:hover .entry-meta,
    #colophon a:hover{
        color: #13b0e1; /* secondary color */
    }

    /*Prevent overrides caused by cascading import*/
    .posted-on, .posted-in, .posted-on a, .posted-in a,
    a:hover, a:focus, a:active{
        color: #808080;
        cursor: pointer; /* not working??? */
    }
    .main-navigation a,
    .main-navigation .current-menu-item a{
        color: white;
    }

    /*---Borders---*/
    .current-menu-item{
        border-bottom: none;
    }

/*================*/



/*=====HEADER=====*/
/*LOGO*/
img.custom-logo{
    width: 292px;
}

/*MENU*/
.main-navigation a{
    font-weight: bold;
    padding: 2px 9px;
}

.main-navigation a:hover,
.main-navigation .current-menu-item a{
    background-color: #13b0e1; /* secondary color */
    color: white;
}

.main-navigation .current-menu-item a:hover{
    background-color: #1094BD; /* dark secondary color */
    color: white;
}

.menu-toggle{
    background-image: url(images/menumobile-open.svg);
}

.menu-toggle[aria-expanded=true]{
    background-image: url(images/menumobile-close.svg);
}
/*================*/




/*=====HIGHLIGHTED=PINNED=POSTS=====*/


/* HIGHLIGHT */
article.sticky{
    background-color: #13b0e1; /* secondary color */
    color:white;
    padding:1rem;
    margin: -1rem -1rem 1rem !important;
}

article.sticky .entry-title.wrap{
    background-color: #13b0e1; /* secondary color */
}

article.sticky h2{
    color: white;
}

article.sticky.vignette.size-M .entry-title.wrap{
    background-color: #f99138; /* main color */
}

article.sticky .posted-on,
article.sticky .posted-in,
article.sticky .posted-on a,
article.sticky .posted-in a{
    color: white;
}

article.sticky .posted-on:before,
article.sticky .posted-in:before{
    background-color: white;
}

/*correction zone sensible survol*/
article.sticky .vignette-lien{
    top:0;
    left:0;
}


/* HOVER */

article.sticky:hover .entry-title.wrap{
    background-color: #f99138; /* main color */
}

article.sticky.vignette.size-M:hover h2,
article.sticky.vignette.size-M:hover .entry-excerpt,

article.sticky.vignette.size-M:hover .posted-on,
article.sticky.vignette.size-M:hover .posted-in,
article.sticky.vignette.size-M:hover .posted-on a,
article.sticky.vignette.size-M:hover .posted-in a,

article.sticky:hover .posted-on,
article.sticky:hover .posted-in,
article.sticky:hover .posted-on a,
article.sticky:hover .posted-in a{
    color: white;
}

article.sticky.vignette.size-M:hover .posted-on:before,
article.sticky.vignette.size-M:hover .posted-in:before,

article.sticky:hover .posted-on:before,
article.sticky:hover .posted-in:before{
    background-color: white;
}

/*==================================*/



/*=====ROUNDED=CORNERS=====*/

article.sticky:first-of-type{
    border-radius:4px 4px 0 0;
}

.main-navigation a,
#content,
.entry-title.wrap,
.nav-next a,
.nav-previous a,
article.sticky:only-of-type /*not working???*/
{
    border-radius:4px;
}

/*=========================*/



@media screen and (min-width: 640px){
    
    /*=====HIGHLIGHTED=FIRST=POST=====*/
    
    .vignette.size-M .entry-title{
        background-color: #13b0e1; /* secondary color */
    }
    
    /*=====================================*/
}

@media screen and (max-width: 640px){
    #masthead header.wrap{
        flex-direction: column;
    }
    
    .contact-sticker{
        position: static;
        top: auto;
        right: auto;
        max-width: 100%;
        margin: -1rem auto 0;
    }
    
    .site-branding{
        margin: 1rem auto;
    }
        .site-branding .custom-logo{
            width: 440px; /* if unset, won't display on older android systems */
            max-width:100%;
            height:auto;
        }
    
    .main-navigation{
        margin: auto;
    }
}