/*
Theme Name: HowToMakeRecipes
Theme URI: https://howtomakerecipes.com/
Author: the HowToMakeRecipes team
Author URI: https://howtomakerecipes.com/
Description: Our theme is designed to howtomakerecipes.com website
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, block-styles, wide-blocks, accessibility-ready
Version: 0.2
Requires at least: 5.6
Tested up to: 6.1.1
Requires PHP: 8.0
Text Domain: howtomakerecipes
*/

/* noto-serif-regular - latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/noto-serif/noto-serif-v21-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/noto-serif/noto-serif-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/noto-serif/noto-serif-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/noto-serif/noto-serif-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('./fonts/noto-serif/noto-serif-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/noto-serif/noto-serif-v21-latin-regular.svg#NotoSerif') format('svg'); /* Legacy iOS */
}
/* noto-serif-italic - latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/noto-serif/noto-serif-v21-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/noto-serif/noto-serif-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/noto-serif/noto-serif-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/noto-serif/noto-serif-v21-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('./fonts/noto-serif/noto-serif-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/noto-serif/noto-serif-v21-latin-italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
}
/* noto-serif-700 - latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/noto-serif/noto-serif-v21-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/noto-serif/noto-serif-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/noto-serif/noto-serif-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/noto-serif/noto-serif-v21-latin-700.woff') format('woff'), /* Modern Browsers */
    url('./fonts/noto-serif/noto-serif-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/noto-serif/noto-serif-v21-latin-700.svg#NotoSerif') format('svg'); /* Legacy iOS */
}
/* noto-serif-700italic - latin */
@font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/noto-serif/noto-serif-v21-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/noto-serif/noto-serif-v21-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/noto-serif/noto-serif-v21-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/noto-serif/noto-serif-v21-latin-700italic.woff') format('woff'), /* Modern Browsers */
    url('./fonts/noto-serif/noto-serif-v21-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/noto-serif/noto-serif-v21-latin-700italic.svg#NotoSerif') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/roboto/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/roboto/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/roboto/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/roboto/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/roboto/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/roboto/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/roboto/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/roboto/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/roboto/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/roboto/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/roboto/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/roboto/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('./fonts/roboto/roboto-v30-latin-500italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/roboto/roboto-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/roboto/roboto-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/roboto/roboto-v30-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/roboto/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/roboto/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/roboto/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/roboto/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/roboto/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('./fonts/roboto/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/roboto/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
    url('./fonts/roboto/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/roboto/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}

body{background-color: #fbfbfb; color: #333; font-size: 1.2rem; line-height: 1.5; font-family: Roboto, serif;}

a{color: #db2309}
a:hover{color: #f05002; text-decoration: none}

h1,h2,h3,h4,h5,h6{color: #333; font-family: "Noto Serif", sans-serif}

.navbar-light{font-size: 1.2rem; font-family: "Noto Serif", sans-serif}
.navbar-light .navbar-nav .nav-link {color: rgba(0,0,0,.7);}

.page-title{margin: 0 0 2rem; font-size: 1.9rem;  font-family: "Noto Serif", sans-serif;}

h3.post-title a{
    padding-bottom: 5px;
    background-repeat: no-repeat; background-position: left 87%;
    background: linear-gradient(to right, rgb(251, 54, 26) 0%, rgb(146, 19, 1) 100%) left 87% / 0 4px no-repeat;
}
h3.post-title a:hover {color: #222; background-size: 100% 4px;}

.social-links{display: flex; justify-content: center; align-items: center;}
.social-links a{margin: 0 0.5rem; font-size: 1.2rem;}

.site-header{margin-bottom: 1rem; border-bottom: 1px solid #f2f2f3;}
.site-header .container-xl{position: relative; min-height: 100px; display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.site-header .head-logo{text-align: center;}
.site-header .logo{max-height: 100px;}
.site-header .head-mix{min-height: 90px; display: flex; flex-direction: column; justify-content: space-between; align-items: end;}
.site-header .head-search{display: flex; align-items: center; justify-content: flex-end;}
.site-header .head-search i{cursor: pointer;}
.site-header .social{display: flex; align-items: center;}
.site-header .social-links a{margin: 0 0 0 1rem;}
.site-header .navbar{padding:0}
.site-header a{display: inline-block; color: #000;}
.site-header a:hover i{color: #F0718F}

@media (max-width: 575px) {
    #navbar-menu.navbar-collapse{
        position: absolute; top: 50px; width: 250px; padding: 0.5rem 1rem; z-index: 100; background-color: #fff;
        box-shadow: 1px 1px 4px #F0718F;
    }
    .site-header .head-menu{flex: 1 33%;}
    .site-header .head-logo{flex: 1 33%;}
    .site-header .head-mix{flex: 1 33%;}
}
@media (min-width: 576px) {
    .site-header .container-xl{padding-left: 130px; flex-direction: column; align-items: stretch;}
    .site-header .head-menu{order: 3;}
    .site-header .head-logo{position: absolute; top: 0; left: 15px; width: 100px;}
    .site-header .head-mix{display: flex; flex-direction: row; flex: 1; min-height: auto; justify-content: end; align-items: start}
    .site-header .head-search{margin-right: 100px; order: 1;}
    .site-header .head-social{order: 2}
}

.site-footer {margin-top: 1rem; padding-top: 1rem; background-color: #000; color: #fff;}
.site-footer .logo{display: inline-block}
.site-footer h1, .site-footer h2{color: #F0718F;}
.site-footer h2, .site-footer h3{color: #a3a3a3}
.site-footer #block-2 h2{font-size: 24px;}
.site-footer .about{color: #c8c8c8;}
.site-footer .about img{height: 100px; max-height: 100px;}
.site-footer .copyright{padding: 0.5rem 1.5rem; border-top: 1px solid rgba(255,255,255,.2);}
.site-footer a{color: #F0718F}
.site-footer .social-links{margin-bottom: 1rem;}
.site-footer .social-links a{width: 2.5rem; height: 2.5rem;  border-radius: 2.5rem; background-color: #F0718F; color: #fff; display: flex; justify-content: center; align-items: center;}
.site-footer .social-links a:hover{background-color: #f05002;}
.site-footer ul{list-style: none; padding: 0 5px 0 10px;}
.site-footer li a{display: inline-block; padding: 0.5rem 0;}

#primary{padding-top: 1rem; padding-bottom: 1rem;}
#sidebar-primary{padding-top: 1rem; padding-bottom: 1rem;}

.widget .widget-title{margin-bottom: 1rem; font-size: 1.5rem;}
.widget-term-list{margin-bottom: 2rem;}
.widget-term-list ul{list-style:none; margin: 0; padding: 0;}
.widget-term-list li{width: 33%; display: inline-block; text-align: center;}
.widget-term-list a{display: inline-block; position: relative; margin: 0 1rem 1rem 0; padding: 0.1rem 0.4rem; background-color: #db2309; color: #fff; font-size: 0.9rem; border-radius: 5px;}
.widget-term-list a:hover{background-color: #cb3e5c;}
.widget-term-list a span{position: absolute; right: -10px; top: -10px; width: 20px; height: 20px; font-size: 10px; line-height: 20px; font-weight: bold; background-color: #455; color: #fff; border-radius: 20px; text-align: center;}

.recipe-tax-items{display: inline;}
.recipe-tax-items a{display: inline-block; margin: 0 1rem 0.5rem 0; padding: 0.2rem 0.5rem; font-size: 1.1rem; font-weight: 700; color: #cd3e53; border: 1px solid #f3f3f3; border-radius: 10px;}
.recipe-tax-items a:hover{background-color: #F0718F; color: #fff; border-color: #fff;}

#sidebar-primary .widget .widget-title{margin-bottom: 1.1rem; padding-bottom: 0.2rem; color: #db2309; border-bottom: 1px solid #db2309;}

.block-title{margin-bottom: 1.1rem; padding-bottom: 0.2rem; color: #db2309; border-bottom: 1px solid #db2309;}

/* Post styles */
.post-header{margin-bottom: 1.5rem;}
.post-header h1{margin-bottom: 1rem;}
.post-title{margin: 0 0 0.5rem;}
.post-meta{font-size: 0.9rem;}
.post-meta .post-date{display: inline-block;}
.post-meta span{margin-right: 1rem;}
.post-meta span.post-print{margin-right: 0; cursor: pointer;}
.post-thumbnail{display: inline-block;}
.post-thumbnail img{border-radius: 30px;}
.post-date{font-size: 0.9rem;}
.post-image{margin-bottom: 1.5rem;}
.post-author img{width: 30px; height: 30px; margin-right: 0.3rem; border-radius: 30px;}
.post-description{margin-bottom: 1rem;}

/* Normal post styles */
.post-item{margin-bottom: 2rem;}
.post-item .post-title{margin-bottom: 0.2rem;}
.post-item .post-date{margin-bottom: 0.7rem;}

/* Blog post styles */
.category-blog .post-item .post-title{font-size: 1.5rem;}
.blog-post-item{margin-bottom: 2.5rem;}
.blog-post-item img{margin-bottom: 0.5rem}
.blog-post-item .post-title{font-size: 1.4rem;}

/* Recipe post styles */
.recipe-post-item{flex: 1; display: flex; flex-direction: column; width: 100%; margin: 0 auto 2rem; background-color: #fff;}
.recipe-post-item .post-thumbnail{flex: 1; margin-bottom: 0.2rem; overflow: hidden; position: relative;}
.recipe-post-item .post-thumbnail a{display: inline-block;}
.recipe-post-item .post-thumbnail img:hover{opacity: 1}
.recipe-post-item .post-thumbnail .video{position: absolute; bottom: 0; right: 0; padding: 0.5rem 0.6rem; font-weight: bold; background-color: #000; opacity: 0.9;}
.recipe-post-item .post-title{height: 3.6rem; max-height: 3.6rem; margin-bottom: 0.2rem; padding: 0 0.2rem 0; line-height: 1.8rem; font-size: 1.1rem; overflow: hidden;}
.recipe-post-item .post-title a{color: #333;}
.recipe-post-item .post-title a:hover{color: #333;}
.recipe-post-item .post-item-meta{padding: 0 0.5rem 0.2rem; font-size: 0.9rem;}
.recipe-post-item .post-item-meta i{color: #f15641}
.recipe-post-item .time_total{float: left; display: inline-block;}
.recipe-post-item .difficulty{float: right; display: inline-block; text-transform: capitalize; color: #444; font-style: italic;}

@media (min-width: 768px) {
    /*.recipe-post-item{max-width: 300px;}*/
}

.recipe-list-title{text-align: center;}
.category-item{margin-bottom: 2rem; padding-bottom: 0.2rem;}
.category-item-header{margin-bottom: 1rem; border-bottom: 1px solid #F0718F;}
.category-item-header .view-all{display: inline-block; padding: 0.2rem 0.5rem; font-size: 1.2rem; float: right; border: 1px solid #f5f5f5; border-radius: 15px;}

.recipeCategoryLatest{margin-bottom: 2rem;}
.recipeCategoryLatest h2{text-align: center; color: #db2309;}

/* Recipe single post styles */
.recipe-single{margin-bottom: 2rem;}
.recipe-header{margin-bottom: 1rem;}
.recipe-header h1{margin-bottom: 1rem; font-size: 25px; line-height: 36px; text-align: center;}
@media (min-width: 768px) {
    .recipe-header h1{margin-bottom: 1rem; font-size: 35px; line-height: 50px;}
}
.recipe-header .post-meta{margin-bottom: 1rem;}
.recipe-header .recipe-meta{font-size: 0.9rem;}
.recipe-header .recipe-meta .post-date{display: inline-block;}
.recipe-header .recipe-meta span{margin-right: 2rem;}
.recipe-header .recipe-meta span.post-print{cursor: pointer;}
.recipe-single .post-image{position: relative;}
.recipe-single .post-image a{position: absolute; bottom: -15px; padding: 7px 11px; background-color: #db2309; color: #fff; font-size: 16px; font-weight: bold;}
.recipe-single .jump-to-video{ left: 10px;}
.recipe-single .jump-to-recipe{ right: 10px;}

.recipe-terms{margin-bottom: 0.2rem;}
.recipe-terms a{display: inline-block; margin: 0 0.6rem 0.5rem 0; padding: 0.2rem 0.5rem; font-size: 0.9rem; font-weight: 600; background-color: #db2309; color: #fff; border-radius: 5px;}
.recipe-terms a:hover{background-color: #cd3e53; color: #fff;}


.post-social{min-height: 41px; text-align: center;}
.post-social>div{margin: 0 auto; display: inline-block;}
.post-social a{}

.recipe-subtitle{margin-bottom: 1rem; font-style: italic; font-weight: bold;}

.recipe-video{margin: 1rem 0; padding: 0.5rem 0 0.1rem; background-color: #db2309;text-align: center; overflow: hidden;}
.recipe-video h2{text-align: center; color: #fff; font-size: 1.4rem;}
.recipe-video iframe{margin: 0 auto; max-width: 100%;}

.recipe-card{position: relative; background-color: #fff8ed; margin: 1rem 0; border-top: 1px solid #e1e1e1;}
.recipe-card-item{margin-bottom: 1.5rem; padding: 1rem; border-bottom: 1px solid #e1e1e1;}
.recipe-card-item img{min-width: 100px; max-width: 100%; height: auto;}
.recipe-card .itemInfo{text-transform: capitalize;}
.recipe-description{line-height: 1.7;}
.recipe-content figure, .recipe-description figure{max-width: 100%;}

.recipe-ingredients ul{margin: 0 0 2rem; padding: 0; list-style: none;}
.recipe-ingredients li{display: flex; margin-bottom: 0.5rem;}
.recipe-ingredients label{padding-left: 2rem; display: flex;}
.recipe-ingredients label div{margin-right: 0.3rem;}
.recipe-ingredients .ingredient_checked{text-decoration: line-through; color: #ccc;}
.recipe-ingredients input{margin: 5px 10px 0 0;}
.recipe-ingredients .quantity{font-style: italic;}
.recipe-ingredients .ingredient{font-weight: 500;}
.recipe-ingredients .ingredient p{margin: 0;}
.recipe-ingredients .note{color: #5C5C5C;}

.recipe-instructions{}
.recipe-instructions .item{margin-bottom: 2.5rem;}
.recipe-instructions ol{margin: 0 0 1rem 0.5rem; padding: 0; list-style: none; counter-reset: li}
.recipe-instructions ol>li{margin-bottom: 2.5rem; padding-left: 1.5rem; line-height: 1.6; counter-increment: inst;}
.recipe-instructions ol>li::before{
    content: counter(inst); display: inline-block; position: absolute; width: 1.5rem; height: 1.5rem; line-height: 1.5rem;
    margin: 0.2rem 0 0 -2rem; text-align: center; background-color: #102a38; border-radius: 100%; color: #fff; font-size: 0.9rem;
}
.recipe-instructions .i_title{font-weight: bold;}
.recipe-instructions .i_img{float: left; margin: 0 1rem 0.3rem 0;}
.recipe-instructions .i_text{margin-bottom: 1rem;}
.recipe-instructions .i_note{display: inline-block; margin-bottom: 1rem; padding: 0.2rem 0.5rem 0.1rem; background-color: #fff; border: 1px solid #f1f1f1;}
.recipe-instructions .i_video{text-align: center; overflow: hidden;}
.recipe-instructions iframe{margin: 0 auto; max-width: 100%;}
.recipe-instructions ul{list-style: disc; display: inline-block;}

.search-form{margin-bottom: 3rem;}
.search-form .col-form-label{font-weight: bold;}


.gs-pagination{display: flex; justify-content: center; align-items: center;}
.gs-pagination .page-numbers{display: inline-block; padding: 0.2rem 0.5rem;}

/** Print styles start */
@media print {
    .no-print, .no-print *{display: none !important;}
}
.showOnPrintPreview{display: none;}
.pagePrint .showOnPrintPreview{display: block}
.pagePrint #sidebar-primary, .pagePrint .d-print-none{display: none}

.pagePrint #primary{width: 100%; max-width: 100%; flex: 0 0 100%;}
.pagePrint .page-title{text-align: center}
.pagePrint .post-image{float: left; max-height: 200px; margin: 1rem;}
.pagePrint .post-image img{max-height: 200px; width: auto;}
.pagePrint .recipe-card{background-color: #fff;}
/** Print styles end */