/*
Theme Name: Ilex
Author: DoTe
Theme URI: https://dotecsa.altervista.org/thema-ilex
Author URI: https://dotecsa.altervista.org/
Description: Minimal theme created for a secular ilex wood website, it can be adapted to different use.
Two-column theme, with primary menu (two level), social menu and footer, 
full-width template, sidebar right, align-wide support for full-width template, excerpt support,
mobile version, sub-menu mobile scrollabile, translation-ready, color customization, localized in Italian.
Version: 2.3.4
Requires at least: 5.5
Tested up to: 6.9
Requires PHP: 5.6
Tested up to: PHP 8.5
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: ilex
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready

All files, unless otherwise stated, are released under the GNU General Public
License version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

/* ! css-reset */
body,
html {font-size: 16px; box-sizing: border-box; margin: 0;padding: 0;}
body {-ms-word-wrap: break-word;word-wrap: break-word;}
*,
*:before,
*:after {box-sizing: border-box;}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul { margin: 0;padding: 0;}
h1,
h2,
.site-title {font-family: system-ui, 'Helvetica Neue', Arial, sans-serif;}
ol,
ul {list-style-type: none}
img {height: auto;width: 100%}

/* ! essential */

/* Screen Reader Text ------------------------ */
.screen-reader-text {border: 0;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%); clip-path: inset(50%);height: 1px; margin: -1px;overflow: hidden;padding: 0;position: absolute !important;width: 1px;word-wrap: normal !important;word-break: normal;}
.screen-reader-text:focus {background-color: #f1f1f1;border-radius: 3px;box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);clip: auto !important;-webkit-clip-path: none;clip-path: none;
    color: #21759b;display: block;font-size: 0.875rem;font-weight: 700;height: auto;right: 5px;line-height: normal;padding: 15px 23px 14px;text-decoration: none;top: 5px;width: auto;z-index: 100000;}

/* Skip Link --------------------------------- */
.skip-link {position: absolute;left: -9999rem;top: 2.5rem;z-index: 999999999;text-decoration: underline; background: #fefefe}
.skip-link:focus {display: block;left: 6px;top: 7px;font-size: 14px;font-weight: 600;text-decoration: none;line-height: normal;padding: 15px 23px 14px;z-index: 100000;right: auto;}

/* sticky --------------------------------- */
.sticky .post-sticky {color: inherit;}

/* figcaption --------------------------------- */
figcaption,
.wp-caption-text {color: #6d6d6d;display: block;font-size: .9rem;font-weight: 500;line-height: 1.2;font-style: italic;}
figcaption a,
.wp-caption-text a {color: inherit;}
figure {max-width: 100%;}


/* GALLERIES */
.gallery {display: flex;flex-wrap: wrap;margin: 3em 0 3em -0.8em;width: calc(100% + 1.6em);}
.gallery-item {margin: 0.8em 0; padding: 0 0.8em;width: 100%;}
.gallery-caption {display: block;margin-top: 0.8em;}

/* author */
.bypostauthor .comment-footer-meta .by-post-author {display: block;}

/* # Alignments */
.alignleft {display: inline;text-align: left;}
.alignright {display: inline;text-align: right;}
.aligncenter {clear: both; display: block;margin-left: auto;margin-right: auto;text-align: center;}

/* ! base */
:root {--ilex_header_color: #ffffff;--ilex_title_color: #a94100;--ilex_primary_color: #000;--ilex_link_color: #ad541c;--ilex_link_color_hover: #d50000;}
body {font-family: "Open Sans", Helvetica, sans-serif;color: #444;}
h1,
h2,
h3,
h4,
h5,
h6 {color: #333; margin-bottom: 20px}
h1 {font-size: clamp(40px, 8vw, 64px);line-height: 1;font-weight: 600;}
h2 {font-size: clamp(25px, 4vw, 30px);line-height: 1;font-weight: 600;}
h3 {font-size: clamp(20px, 4vw, 24px);line-height: 1;font-weight: 600;}
h4 {font-size: 20px;line-height: 1;font-weight: 600;}
p {line-height: 1.5;font-size: .95rem;}
.mb-1 {margin-bottom: 20px}
.mb-2 {margin-bottom: 40px}
.mb-3 {margin-bottom: 60px}
.mt-1 {margin-top: 20px}
.mt-2 {margin-top: 40px;}
.mxy-1 {margin: 10px}
.pxy-1 {padding: 10px}
a {text-decoration: none;color: var(--ilex_link_color);}
a:hover {color: var(--ilex_link_color_hover)}

/* ! layout */
.container {margin: 0px;padding: 0px;max-width: 1250px; margin: 0 auto;}
.animate {-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.grid-center {display: flex;align-items: center;justify-content: space-between;}
.grid-top {display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: space-between;}
.grid-between {display: flex; flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.header-image {width: 100%;height: 400px}
.col-70 {width: 73%;}
.page .col-70,
.single .col-70 {width: 73%;border: 0px solid green;}
.page .col-70 article,
.single .col-70 article{max-width: 800px;margin: 0 auto; border: 0px solid green;}
.post-template-template-full-width,
.post-template-template-full-width-no-header-footer {.col-70 {margin: 0 auto; }}
.col-33 {width: 33.33%;padding: 10px;padding-bottom: 30px}
.col-100 {width: 100%;}
.spacer {height: 30px;}
body>.grid-between.container,
body>.grid-top.container {margin: 80px auto; min-height: calc(100vh - 300px);height: auto !important;border: 0px solid red;}
iframe {max-width: 100%;}
hr {border: 0;border-bottom: 1px solid #ccc;}
html {scroll-behavior: smooth;}
:target {
    margin-top: -100px;
    padding-top: 100px;
}

/* ! .header */
#site-header {margin: 0 auto;z-index: 99;background: var(--ilex_header_color); position: fixed;width: 100%; top:0;}
body.is-scrolled #site-header { box-shadow: 0 5px 20px rgb(0 0 0 / 5%);}
.header {display: flex;justify-content: space-between;flex-wrap: nowrap;align-items: center; position: relative;border: 0px solid red;min-height:60px;transition:all .5s ease-in-out;}
.container {padding: 10px;}
body.is-scrolled .header.container {padding: 5px 10px;transition: all .5s cubic-bezier(.215, .61, .355, 1);}

.header input.search-submit {  display: none}
#site-header input.search-field { width: 120px;background: #ddd url(/wp-content/themes/ilex/img/search_bg.png) no-repeat 0px 50%;background-size: contain;padding: 5px 5px 5px 40px;}
body.is-scrolled form.search-form {padding-top: 0;}

img.custom-logo {max-width: 250px; max-height: 80px;aspect-ratio: auto;height: auto;width: auto;transition: all .5s cubic-bezier(.215, .61, .355, 1);}
a.custom-logo-link {max-height: 80px;display: block; transition: all .5s cubic-bezier(.215, .61, .355, 1);}
body.is-scrolled img.custom-logo{max-height:50px; transition: all .5s cubic-bezier(.215, .61, .355, 1);} 
body.is-scrolled a.custom-logo-link {max-height: 50px;}
body.admin-bar #site-header, body.is-scrolled.admin-bar #site-header {top: 32px}

.header-title {width: auto;}
.entry-content {max-width: 800px;margin: 0 auto}
.entry-content-bottom {clear: both;padding-top: 20px;font-size: .9em;}
.site-title {font-size: 26px;font-weight: 700;padding: 0 7px;margin-top: -8px;color: var(--ilex_title_color);}
.site-description {padding: 0 10px;line-height: 1.2;margin-bottom: 0;color: var(--ilex_title_color);}
p.site-title, p.site-description{margin-bottom:0;}

/* ! aside */
aside.col-20 {font-size: 14px;border: 0px solid green;width: 23%;padding: 10px;padding-top:70px!important;animation-name: example;animation-duration: .5s;animation-timing-function: ease-in-out;}

/* ! article */
article {margin: 0px;padding: 0}
article h3 {font-weight: normal;margin-bottom: 5px}
.blog h1.mb-3.mt-2,
div.search h1.mb-3.mt-2,
.archive h1.mb-3.mt-2,
.category h1.mb-3.mt-2,
h1.error.mb-3.mt-2 {width: 100%;text-align: center;}
.blog article,
.archive article,
.category article,
div.search article { width: 100%; margin-bottom: 20px}
.blog .img-res,
.archive .img-res,
.category .img-res,
div.search .img-res {max-height: 150px;height: 150px;width: 100%;object-fit: cover;}
.content-blog p {margin-bottom: 0;}
figure.wp-block-media-text__media img { width: 100%;}
pre {white-space: pre-wrap;word-wrap: break-word;}
.entry-content ul {margin: 10px 0;margin-left: 20px;}
.entry-content ul li {list-style-type: disc;list-style-position: inside;font-size: 17px;line-height: 1.5;}
.entry-content p {font-size: 1rem;line-height: 1.6;}
.img-res {width: 100%;height: auto;}
.entry-content a,
.entry-content a:hover { text-decoration: underline;}

p.post-nav-links {padding-bottom: 10px;}
.small { font-size: 12px; font-style: italic;}
p.small.aligncenter {margin-top: -55px;margin-bottom: 60px;}

/* ! comment */
ol.comment-list {list-style: decimal;list-style-position: outside;margin-left: 15px;}
ol.children {padding-left: 30px;border-left: 3px solid #ddd;margin-top: 20px;}
textarea#comment {width: 100%;}
.comment-form-author,
.comment-form-email,
.comment-form-url {width: 50%}
input#author,
input#email,
input#url {width: 100%}
footer.comment-meta img {width: auto;}
.comment-content {padding: 10px 0;}
ol.comment-list li {padding-bottom: 20px;}
ol.wp-block-latest-comments li {line-height: 1.2;margin-bottom: 5px;}
.comment-metadata {padding-top: 10px;}

/* ! pagination*/
.pagination.clearfix {padding-top: 20px;font-size: 15px; font-style: italic;}

/* ! post navigation */
.nav-links {display: flex;justify-content: space-between;}
.nav-next {padding-right: 20px;text-align: right;}
.nav-previous {padding-left: 20px;text-align: left;}
.nav-previous,
.nav-next {position: relative;overflow: hidden;}
.nav-next span.nav-title svg {position: absolute;transform: rotate(-90deg);width: 25px;right: 0;top: -4px;}
.nav-previous span.nav-title svg {position: absolute; transform: rotate(90deg); width: 25px;left: 0; top: -4px;}

/* ! widget*/
.widget-title {margin-bottom: 10px}
.widget article {margin-bottom: 0;}
.widget ul li {padding-bottom: 5px;}
.widget input.search-field,
.error404 input.search-field {width: auto;}
.widget h2 {font-style: italic;font-weight: 600; margin-bottom: 0px; font-size: 22px;}
.widget {margin-bottom: 30px}
.widget_search {padding: 20px 0;}

/* ! footer */
ul#footer-menu {display: flex;justify-content: flex-end;}
ul#footer-menu li a {padding: 0 5px;font-weight: 500;font-size: 14px}
ul#social-menu li a:hover {padding: 0;background: none;display: flex;}
ul#footer-menu .sub-menu {display: block;width: auto;box-shadow: none}
ul#footer-menu .sub-menu li a {padding: 0;padding-left: 10px;overflow-x: auto;white-space: nowrap;box-shadow: 0 0 0}
ul#social-menu {display: flex;justify-content: center;}
ul#social-menu li {margin: 0 5px;}
ul#social-menu li:hover { opacity: .8;}

.footer p,
.footer ol,
.footer ul {margin-bottom: 0px;}
.footer .col-33 {padding: 20px 0}
.footer p.site-description {color: inherit!important}
.footer img.custom-logo {    max-width: 150px !important; max-height: 50px !important;height: auto;width: auto;margin: 0 auto;}
.footer .col-33.alignleft {display: flex;align-items: center;}

.alignfull {margin-left: calc(50% - 50vw);margin-right: calc(50% - 50vw);width: auto;max-width: 1000%;}
.alignwide {margin-left: calc(25% - 25vw);margin-right: calc(25% - 25vw); width: auto;max-width: 1000%;}
.alignwide img,
.alignfull img { display: block; margin: 0 auto;}

/* ! sprite social*/
.twitter {width: 24px; display: block;height: 25px;background: url(img/social-sprite1.png) 0px 0;}
.facebook {width: 25px;display: block;height: 25px;background: #fff url(img/social-sprite1.png) -24px 0;}
.instagram {width: 25px;display: block;height: 25px;background: url(img/social-sprite1.png) -49px 0;}
.youtube {width: 34px;display: block;height: 25px;background: url(img/social-sprite1.png) -73px 0;}
.linkedin {width: 25px;display: block;height: 25px;background: url(img/social-sprite1.png) -106px 0;}
.pinterest {width: 21px;display: block;height: 25px;background: url(img/social-sprite1.png) -131px 0;}
.whatsapp {width: 25px;display: block;height: 25px;background: url(img/social-sprite1.png) -152px 0;}
.email {width: 25px;display: block;height: 25px;background: url(img/social-sprite1.png) -177px 0;}
.telephone {width: 25px;display: block;height: 25px;background: url(img/social-sprite1.png) -202px 0;}

/* Navigation
--------------------------------------------- */

@keyframes example {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/*navigation comuni*/
nav .menu,
nav .menu ul {margin: 0;}
nav .menu li {display: inline-block;position: relative;}
nav .menu li a {display: block;padding: 16px 14px;font-size: 14px;font-weight: 600;text-transform: uppercase;color: var(--ilex_primary_color);}
nav .sub-menu li a {padding: 10px 16px;padding-left: 1em;font-size: 13px;text-transform: lowercase;}
nav .menu>li>ul {display: none;min-width: 220px;position: absolute;left: 0;padding: 10px;border-radius: 0 0 5px 5px;height: auto;height: 0%;border: 1px solid #ddd;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);animation-name: example;animation-duration: .5s;animation-timing-function: ease-out;background: var(--ilex_header_color);}
button.menu-toggle {display: none;}
nav .menu li.open>ul{visibility: visible;height: auto;}
.sub-menu {padding-left: 1em;}
nav .sub-menu li a {padding-left: 1em;padding: 8px 5px;font-weight: 400;}
nav .menu>li:hover>ul{visibility: visible;display: block;height: auto;}
nav .menu li:focus-within ul {visibility: visible;display: block;height: auto;}
nav .menu li ul li {clear: both;width: 100%;}
nav .menu li:hover {background: #ededed;transition: all .8s cubic-bezier(.215, .61, .355, 1);}
nav .menu li span.icon,
nav .menu li.open span.icon {width: 15px;height: 15px;right: 0px;background-size: 15px 15px;border: 0px solid #ccc;position: absolute;top: 18px;color: var (--ilex_primary_color);}
nav .sub-menu li span.icon {display: none}
nav .menu li:hover a,
nav .sub-menu li a {color: #ad541c!important;}
/*nav .menu li:hover	span.icon path {fill: #ad541c!important;}*/

/*contact*/
#responsive-form {max-width: 600px;margin: 0 auto;width: 100%;}
.form-row {width: 100%;display: flex;}
.column-half,
.column-full {padding: 0.65rem;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.clearfix:after {content: ""; display: table;clear: both;}
.wpcf7 form.invalid .wpcf7-response-output {clear: both;text-align: center;color: red;border-color: red;font-size: .8rem;}
.screen-reader-response {display: none}
span.wpcf7-not-valid-tip {color: red;font-size: 1rem;font-style: italic;}
form p {margin-bottom: 0}
.wpcf7 input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
div.search-field,
inputdiv.search-submit {border: 1px solid rgba(0, 0, 0, .2);padding: 0.6em;background: #f9f9f9;max-width: 100%;border-radius: 5px;}
textarea { width: 100%;}
.wpcf7-list-item { display: inline-block;margin: 0;width: 100%;}
.wpcf7 label,
span.wpcf7-not-valid-tip { font-size: .8rem;}
.column-half {width: 50%;}
.wp-block-contact-form-7-contact-form-selector {z-index: -1;position: relative;}

/*block_styles*/
.is-style-ilex-1 {background: #efefef;cursor: pointer;border: 2px solid #ccc;border-radius: 10px;transform: scale(1);text-transform: uppercase;transition: all .5s cubic-bezier(.215, .61, .355, 1);padding: calc(.667em + 2px) calc(1.333em + 2px);}
.is-style-ilex-1:hover {background: #000;color: #fff; transform: scale(.98); transition: all .5s cubic-bezier(.215, .61, .355, 1);}
.wp-block-search__input,
.wp-block-search__button {border-radius: 3px;border: 2px solid #000;}

/*button contact*/
button.contact,
.submit,
.wpcf7-submit,
.wp-block-search__button { border: 0;padding: 0.6em 1em;border-radius: 3px;background: #d30000;font-size: 14px;text-transform: uppercase;color: #fff;}
button.contact a,
.submit a,
.wpcf7-submit a {color: #fff;}
button.contact:hover,
.submit:hover,
.wpcf7-submit:hover,
.wp-block-search__button:hover {background: #bc0000;transition: all 0.25s ease-in-out;cursor: pointer;}

/* search */
div.search{text-align:right}
.branding, div.search { min-width: 120px;}
.page div.search {text-align: right;}
form .wp-block-search__inside-wrapper {max-width: 250px;width: 100%;}

/* allinea immagine e link del logo */
a.custom-logo-link .custom-logo {display: flex;align-items:center ;}
	


/* ! mobile */
@media (max-width: 1200px) {
    button.menu-toggle {background: transparent;border: 0;color: var(--ilex_link_color);display: block;width: 40px;padding:0;min-height:40px;margin:0 auto;}	
    .icon-hamburger {height: 15px;}
    .icon-hamburger span{width: 30px;margin: 0 auto;position: relative;display: block;margin-top:10px;height: 2px;border-radius: 2px;}
    .primary-open .icon-hamburger span:nth-child(1) {transform: translateY(2px) rotate(45deg);transition: all .5s cubic-bezier(.215, .61, .355, 1);}
    .primary-open .icon-hamburger span:nth-child(2){transform: translateY(0px) rotate(-45deg);margin-top: 0px;transition: all .5s cubic-bezier(.215, .61, .355, 1);} 
    
    nav .menu {position: absolute;top: 100%;min-width: 100%;overflow: hidden;background: #fff;height: 100vh;height: 0vh;left:0;transition: all .5s cubic-bezier(.215, .61, .355, 1);z-index:-1}
	.primary-open nav .menu {padding-top:40px;}
	.primary-open nav .menu{height:100vh;transition: all .5s cubic-bezier(.215, .61, .355, 1);}
	nav .menu li{width: 96%;margin: 0 2%; border-bottom: 1px solid #ccc;position:relative;}
	nav .menu ul li{border-bottom: 0px solid #ccc;}
	nav .menu > li > ul{position:relative}
	nav .menu, nav .menu ul{margin: 0;display:block;}
	.primary-open nav .menu li.open>ul{position: relative;height:auto;padding:0 5px;display:block;overflow:hidden}
	.primary-open nav .menu li.open>ul ul{position: relative;height:auto;padding:0 5px;display:block;}
	.primary-open nav .menu li.open>ul ul li{margin-top:-6px}
	.primary-open nav .menu li span.icon {	width: 39px;height: 39px;display: block;	right: 0.5em;background-size: 40px 40px;	border: 2px solid #ad541c;border-radius: 3px;	position: absolute;	top: 4px;transition:all .5s cubic-bezier(.215, .61, .355, 1);}
	.primary-open nav .menu li.open span.icon {transform: rotate(180deg);}
	.primary-open nav .menu ul li span.icon {display: none;}
	#site-header {box-shadow: none!important;}
	.header{max-height:100%;}
	ul#footer-menu {display: block;text-align:right}
	nav .menu > li:hover > ul, nav .menu > li > ul:hover { display: none; }
	/* focus-within */

	nav .menu:focus-within{display:block;overflow:visible; height:100vh}
	nav .menu li:focus-within ul{position:relative; }

   /* .container {width: 100%;}*/
    .branding, div.search {min-width: 40%;}
	
/* fixed nel caso di logo più alto */
		body.primary-open {position: fixed}
		body.primary-open nav .menu {position: absolute;}
		body.is-scrolled.primary-open {position: absolute;overflow:hidden}

}

@media (max-width: 1024px) {
    ul#footer-menu,
    .footer .col-33.alignleft {display: block;margin-right: 10px }
    #site-content .col-33 {width: 50%}
    aside.col-20{padding:0;}
}

@media (max-width: 768px) {
	.col-33 { width: 50%; padding: 10px;padding-bottom: 30px;}
    .footer .grid-center {display: block;text-align: center;}
    .grid-center .col-33.alignleft,
    .grid-center .col-33.aligncenter,
    .grid-center .col-33.alignright {display: block;width: 100%;text-align: center;}
    .column-half {width: 75%;}
    .form-row {width: 100%;display: block;}
    .mxy-1 {margin: 0px; }

    /* ! .header scrolled*/
    body.admin-bar #site-header, 
    body.is-scrolled.admin-bar #site-header {top: 46px}

	.nav-links { display: block;	}
	ul#footer-menu {display: block; text-align: center }	
    #site-content .col-33 {width: 100%; padding: 0 10%}
}

@media (max-width: 600px) {
	body.primary-open {position: static}
}

@media (max-width: 500px) {
    .header div.search {position: relative;top: 0%;right: 0px;}
    button.contact, .submit, .wpcf7-submit, .wp-block-search__button {padding: 0.6em; font-size: 12px;}
    button.contact {margin: 10px;}
	body.is-scrolled.admin-bar #site-header {top: 0;}
    #site-content .col-33 {width: 100% }
    .col-20 {width: 100%;}
    .col-70 {width: 100%;padding-right: 0;}
    .single .col-70,
    .page .col-70 {width: 100%;}
    body.is-scrolled #site-header .menu.grid-center {padding: 0; }
    p.small.aligncenter {margin-top: -20px; margin-bottom: 20px;}

    /*base*/
    .mb-3.mt-2 { margin-top: 20px;margin-bottom: 20px}
    main#site-content {min-height: 50px; }

    /* ! layout */
    .grid-top,
    .grid-center,
    .grid-between { display: block; }

    .col-70,
    .col-20,
    .col-33 {width: 100% }
    .col-33 {padding: 0 }
    .header {flex-wrap: wrap;}
    div.search{width:100%;display: flex;justify-content: center;}
    .header.container {max-height: 150px;}
    .header-title.grid-center {display: flex;justify-content: flex-start; flex-wrap: wrap }
    body>.grid-between.container,
    body>.grid-top.container { min-height: calc(100vh - 450px);margin: 180px 0 80px 0 }
    nav .menu {top: 150px;}
    body.is-scrolled nav .menu {top: 60px;}

    /* ! aside */
    aside.col-20 {margin-top: 30px;width: 100%;padding-left: 0;}


    /*article*/
    .blog article,
    .archive article,
    .category article,
    div.search article,
    article {width: 100%;margin-bottom: 20px}
    .wp-block-media-text__media img {width: auto;height: auto }
    .grid-top {display: block;}
    .mxy-1 {margin: 0px}
    .pxy-1 {padding: 0px}
    .branding {max-width:100%;width:88%;}
    body.is-scrolled div.search{display: none;}
}
/* focus-within */	
nav .menu li:focus-within nav .menu{height: 100vh;}
nav .menu li:focus-within ul li ul {position:static!important}
nav .menu > li:hover > ul, nav .menu > li > ul:hover {padding-left: 10px;}
.primary-open nav .menu li:focus-within ul li ul { padding: 20px 5px!important;  }