/* ------------------------------------------------------------------------- *\
	- Impostazioni Generiche -
\* ------------------------------------------------------------------------- */

html {
	font-size: clamp(18px, 17px + 0.25vw, 20px);
}

body{
	text-rendering:optimizeLegibility;
}

a{
	color:#7e2811;
}

a:hover{
	color:#9a3324;
}

a:link{
	cursor:pointer;
	will-change:opacity;
	transition: opacity 250ms ease-in-out;
    transition-property: opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

.btn.btn-primary {
    background-color: #3973AC; /* background of your primary buttons */
    border-color: var(--primary-background); /* border color of your primary buttons */
}

.item-title a{
	text-decoration:none;
}

.item-title a:hover{
	text-decoration:underline;
}

.boxed .blog-item {
	box-shadow: 0 0 2px #3339421a,0 2px 5px #33394214,0 5px 15px #33394214,inset 0 5px 0 #ffc466;	
}


/* ------------------------------------------------------------------------- *\
	Tecniche CSS moderne per migliorare la leggibilità
	https://www.smashingmagazine.com/2020/07/css-techniques-legibility/
\* ------------------------------------------------------------------------- */

@supports (font-size-adjust: 1;) {    
	font-size-adjust: 0.5;
}

/* CLAMP Generator */
/* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
h1, .h1 {
	/* font-size: clamp(18px, 5vw, 28px);*/
	/* font-size: clamp(1.4rem, 0.3438rem + 2.5vw, 1.8rem);*/
	line-height: calc(1ex / 0.42);
}

/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
h2, .h2 {
	/*font-size: clamp(16px, 5vw, 26px);*/
	font-size: clamp(1.3rem, 0.7rem + 1.6vw, 1.7rem);
	line-height: calc(1ex / 0.42);
	margin: calc(1ex / 0.9) 0;
}

/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
h3, .h3 {
	/*font-size: clamp(14px, 5vw, 24px);*/
	font-size: clamp(1.2rem, 0.375rem + 2vw, 1.5rem);
	line-height: calc(1ex / 0.42);
	/*margin: calc(1ex / 0.9) 0;*/
}

/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
h4, .h4 {
	font-size: clamp(12px, 5vw, 22px);
}

p{
	/*font-size: clamp(0.7rem, -1.5rem + 8vw, 1.1rem);*/
	line-height: calc(1ex / 0.3);
}

dl.article-info dd{
	font-size:0.9rem;
}




/* --------------------------------------------------------------------------- *\
	LOGO + MENU -> sulla stessa riga
\* --------------------------------------------------------------------------- */
/*
.container-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top below" 
                         "logo logo" 
                         "nav nav";
}
.container-header .container-topbar {
    padding: .5em;
}
.container-header .container-topbar {
    grid-area: top;
}
.container-header .container-below-top {
    grid-area: below;
    justify-content: flex-end;
}
.container-header .grid-child:has(.navbar-brand) {
    grid-area: logo;
}
.container-header .container-nav {
    grid-area: nav;
}
@media (width >= 991.98px) {
    .container-header {
        grid-template-columns: 
            [full-start] minmax(0,1fr) 
            [main-start] repeat(4,minmax(0,19.875rem))
            [main-end] minmax(0,1fr)[full-end];
        grid-template-areas: ". logo nav nav nav .";
        gap: 0 1rem;
    }
    .container-header:has(.container-below-top, .container-topbar) {
        grid-template-areas: ". top top below below ." 
                             ". logo nav nav nav .";
    }
}
*/


/* --------------------------------------------------------------------------- *\
	HEADER + Navigazione
\* --------------------------------------------------------------------------- */
.container-banner {
	margin: 0;
}

.container-header{
	background-image:none;
	background-color:#fff;
	/*background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 90%,#d3c6a2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */	
}

.navbar-brand{
	text-align:center;
	width:100%;
}

.navbar-brand .site-description{
	color:#666;
	font-family: var(--cassiopeia-font-family-headings);
}

.metismenu.mod-menu .metismenu-item{
	padding:0 0.5em;
	font-size: 1.1rem;
}

.head1 .card-header{
	background-color:#009197;
	color:#eee;
	margin-top:0;
}

.metismenu.mod-menu li.metismenu-item:not(:first-child){
	margin-right:5px;
}

.container-header .mod-menu {
	color: #333;
}

.container-banner .banner-overlay .overlay {
	background-color: #00000020;
}




/* ------------------------------------------------------------------------- *\
	SLIDESHOW
\* ------------------------------------------------------------------------- */
.carousel-caption{
	background-color: #ffffff60;
	color:#4E3300;
	/*color:#fff;*/
	text-shadow:1px 1px 5px #fff;
    bottom: 25%;
}



/* ------------------------------------------------------------------------- *\
	BREADCRUMB
\* ------------------------------------------------------------------------- */
.breadcrumb{
	font-size: clamp(0.8rem, -1.5rem + 8vw, 1rem);
}





/* --------------------------------------------------------------------------- *\
	OFFCANVAS (Override by Viviana Menzel)
	https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4
	https://www.dr-menzel-it.de/blog/offcanvas-menue-fuer-cassiopeia
	
	Qui puoi anche apportare modifiche, ad esempio altri colori di sfondo per l'area Offcanvas. 
	Se si sceglie uno sfondo più leggero, è necessario rimuovere la classe 'btn-close-white' dal file php.
\* --------------------------------------------------------------------------- */

.offcanvas.show {
	background-color:#856A35;
}

@media (min-width: 992px) {
    .offcanvas-start {
        width: 100%;
    }
	
	.metismenu.mod-menu .metismenu-item{
		padding: .5em 0.5em;
	}
/*	
	.metismenu.mod-menu .metismenu-item:not(:last-child){
		border-right:1px solid #D6E5F9;
	}
*/	

.metismenu.mod-menu .metismenu-item:not(:last-child) {
    border-right: none; /* rimuovi il vecchio border se c'è */
    background-image: linear-gradient(#D6E5F9, #D6E5F9);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1px 25px; /* larghezza x altezza (px). Usa % o em se preferisci */
    /*padding-right: 0.3rem;*/ /* spazio tra testo e linea */
  }


.container-header nav {
		margin-top: 0;
	}
	
	.container-header .metismenu > li.level-1.active > a,
	.container-header .metismenu > li.level-1.active > button,
	.container-header .metismenu > li.level-1 > button:hover {
		color:#333;
	}
	
	.container-header .metismenu > li.level-1 > a:hover{
		color:#960;
	}
	
	.container-header .metismenu > li:hover{
		background-color:#F1ECE7;
	}
	
	 .container-header .metismenu > li > a{
		color:#666;
	 }
	 
	 .metismenu.mod-menu .metismenu-item.divider:not(.parent) {
		border-right: 1px solid #856A35;
	}
}


@media (max-width: 991.98px) {
    .offcanvas .metismenu.mod-menu .metismenu-item > ul {
        position: relative;
        width: 100%;
        margin-top: 1rem;
    }
    .offcanvas .metismenu.mod-menu .mm-collapse {
        background-color: transparent;
    }
    .offcanvas .metismenu.mod-menu .metismenu-item > a {
        color: #fff;
    }
	
	.container-search{
		margin-left:10px;
	}
}


.offcanvas-header > *:only-child {
    margin-left: auto;
}

.container-header .navbar-toggler {
	color: #96793C;
	cursor: pointer;
	/*border: 2px solid #B8964D;*/
	font-size:1.6rem;
}


/* --------------------------------------------------------------------------- *\
	FOOTER
\* --------------------------------------------------------------------------- */
.footer{
	background-color: #369;
	background-image:none;
}

@media (max-width: 768px) {
	.footer p{
		font-size:0.9rem;
	}
	
	.footer .grid-child {
		padding: 1rem;
	}
}



/* ------------------------------------------------------------------------- *\
	Issue with navigation menu and breakpoints between medium and large screens.
	https://github.com/joomla/joomla-cms/issues/37926
\* ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {
	.navbar-expand-md .navbar-collapse:not(.show) {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.navbar-expand-md .navbar-toggler {
		display: block !important;
	}
	.site-grid {
		grid-gap: 0 0.7em!important;
	}
}




/* --------------------------------------------------------------------------- *\
	FONTS
\* --------------------------------------------------------------------------- */

 @font-face {
    font-family: 'Alice Regular';
    font-style: normal;
    font-weight: normal;
		src: local('Alice Regular'), 
			url('../fonts/alice/Alice-Regular.woff') format('woff'),
			url('../fonts/alice/Alice-Regular.ttf') format('truetype');
    }
	
.alice{
	font-family: 'Alice Regular';
}





/* --------------------------------------------------------------------------- *\
	MEDIA QUERY generiche
\* --------------------------------------------------------------------------- */

@media (width <= 767.98px) {
  .container-header .container-nav .container-search, .container-header .container-nav nav {
    margin-top: 0;
  }
  .container-header .mod-menu {
      color: #fff;
  }

  .metismenu.mod-menu .metismenu-item {
      padding: 0.2em 0.5em;
  }
}

@media (width >= 992px) {
  .image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 1 0 30%;
  }
  
  .image-left .blog-item .item-content, .image-right .blog-item .item-content {
    flex: 1 0 70%;
	
  }
}