/**
 * Theme Name: Jade Friseur
 * Template:   twentytwentyfour
 * Stand: 08.09.2024
 */

 :root {


    --cicolor:#366735;
    --cicolor2:#FAE8CA;

    --wp--preset--font-size--medium:1.6rem;
    --wp--preset--font-size--small:1.2rem; /* Footer */

}

.red{
    color:red;
}

@font-face {
    font-family: "cifont-header";
    src:
      local("Italiana"),
      url("/wp-content/themes/jadefriseur/fonts/italiana-regular.ttf") format("truetype");
}

@font-face {
    font-family: "cifont";
    src:
      local("Belleza"),
      url("/wp-content/themes/jadefriseur/fonts/belleza-regular.ttf") format("truetype");
}



h1, h2, h3, h4, h5, h6
{
    font-family: "cifont-header", serif !important;
    font-weight:600 !important; /* Schrift zu dünn */
}
  
.wp-site-blocks
,.has-body-font-family 
,:root :where(.wp-block-navigation)
{
    font-family: "cifont", serif !important;
}



header {
    color: var(--cicolor);


    .has-base-background-color{
        background-color: var(--cicolor2) !important;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
    }

        
    a {
        font-weight:bold;
        text-decoration: none !important;
        transition: color 0.2s ease-in-out;
        &:hover{
            color:black !important;
        }
    }


    .wp-block-site-logo{
        transition: filter 0.2s ease-in-out;
        &:hover{
            filter:brightness(0);
        }
    }
    
}

footer {
    margin-top:5vmax;
    background-color: var(--cicolor2) !important;


    .wp-block-group-is-layout-flex {
        font-size:1.2rem;
    }
}


:where(.wp-site-blocks *:focus){
    outline-color:transparent; /* Kein focus Rahmen */
}


/* Formular */
input[type=text],input[type=email],textarea {
    padding:2vmax;
    font-size:1.1rem;
    width:100%;
}


.wpcf7-acceptance{
    font-size:1rem;
    .wpcf7-list-item{
        margin:0;
    }
}

input[type=submit], .contentbutton {
    color:var(--cicolor);
    font-weight: bold;
    padding:10px;
    background-color:var(--cicolor2);
    font-size:1.2rem;
    border-radius:12px;
    border:0 !important;

    &:disabled {
        opacity: 0.5;
    }

}



/* Burger */
.wp-block-navigation__responsive-container-open{
   svg {
    rect{
        display: none;
       }
      
   }
    &:after {
        content:'';
        background:url('/wp-content/themes/jadefriseur/images/burger.svg');
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 222;
        display: block;
        background-size: contain;
        background-repeat: no-repeat;
    }
}