/* ------------------------------------------------------------------------- *\
	Personalizzazioni TEMPLATE CASSIOPEIA (e child)
	Aggiornamento: 25 agosto 2025
	- Impostazioni Generiche -
\* ------------------------------------------------------------------------- */

:root {
	--primary-background: #f4f4f4;
	--secondary-background: #00AFB9;
	--cassiopeia-color-primary: #00264D;
	--cassiopeia-color-link: #30638d;
	--cassiopeia-color-hover: #954b56;
	--website-color-1: #009197;
	--body-color: #333;
	--body-bg:#fdfdfd;
	--colore-griggio-chiaro:#f7f7f7;
	--body-line-height: 1.3;
	--cassiopeia-font-family-body: Merriweather, "TitilliumWeb-Regular", "RobotoSerif", Georgia, serif;
	--cassiopeia-font-family-headings: open_sansbold, "Roboto", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html {
	/*font-size: clamp(15px, 14px + 0.25vw, 18px);*/
}

body{
	text-rendering:optimizeLegibility;
}

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 */
    /*color: var(--primary-textColor);*/ /* text 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 1px 0 #004C99;*/
	/*box-shadow: 0 0 2px #3339421a,0 2px 5px #33394214,0 5px 15px #33394214,inset 0 5px 0 #D6E5F9;*/
	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, 0.9rem);*/
	line-height: calc(1ex / 0.3);
}

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


/* --------------------------------------------------------------------------- *\
	FONTS
\* --------------------------------------------------------------------------- */
@font-face {
    font-family: 'TitilliumWeb-Regular';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('../fonts/titillium-web-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/titillium-web-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/titillium-web-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/titillium-web-v15-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
  }
   
@font-face {
    font-family: 'TitilliumWeb-Bold';
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('../fonts/titillium-web-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/titillium-web-v15-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/titillium-web-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/titillium-web-v15-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
  }


@font-face {
    font-family: 'open_sansbold';
    font-weight: normal;
    font-style: normal;
	src: local(''),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype')
}


/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/merriweather-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v28-latin-regular.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* merriweather-italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/merriweather-v28-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v28-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v28-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v28-latin-italic.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* merriweather-700 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/merriweather-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v28-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v28-latin-700.svg#Merriweather') format('svg'); /* Legacy iOS */
}

/* merriweather-700italic - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('../fonts/merriweather-v28-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/merriweather-v28-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/merriweather-v28-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/merriweather-v28-latin-700italic.svg#Merriweather') format('svg'); /* Legacy iOS */
}





/* ------------------------------------------------------------------------- *\
	BREADCRUMB
\* ------------------------------------------------------------------------- */

.breadcrumb{
	font-size: clamp(0.8rem, -1.5rem + 8vw, 0.9rem);
}


/* ------------------------------------------------------------------------- *\
	HEADER
\* ------------------------------------------------------------------------- */
.container-header {
	box-shadow: none;
	background-color: #fff;
	background-image:none;
}

.container-header .container-search {
	margin-top: 0;
}


.homepage .blog-featured .page-header > h1{
	color:red;
}

.mission .page-header > h1,
.articoli .page-header > h1,
.collegamenti .page-header > h1{
	margin-top:25px;
	border-bottom:2px solid #FFC466;
}
	
.container-header .container-nav{
	background-color:#ECF3FC;
	font-family: 'open_sansbold';
}

.container-header .grid-child {
	/*padding: 0 0.5em;*/
	padding: 0;
}

.container-bottom-a, .container-bottom-b, .container-top-a, .container-top-b {
    padding: 1rem 0;
}

.container-header .site-description{
	color:#000;
}

.logo{
	/*border-top: 3px solid #ffc466;
	border-bottom: 3px solid #ec0100;*/
	padding:18px 0;
}

/*
.decorativa::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 20px;
  background: url('../../../../../images/bellezza/curva-doppia.svg') no-repeat center;
  background-size: contain;
}
*/


.motto{
	color:#666;
	text-align:center;
	font-size:1.2em;
	font-family: 'TitilliumWeb-Bold';
}

.ernesta1{
	border-top: 1px solid #D6E5F9;
	/*border-top: 3px solid #C0D7F6;*/
}


/* ------------------------------------------------------------------------- *\
	FOOTER
\* ------------------------------------------------------------------------- */

.footer{
	background-color:#ECF3FC;
	background-image: inherit;
	color:#333;
}

footer div.mod-footer {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.copyright{
	font-size:0.9rem;
}
	
@media (min-width: 768px) {
	footer div.mod-footer {
		flex-direction: row;
	}
}
	
	
	

/* --------------------------------------------------------------------------- *\
	OFFCANVAS (Override by Viviana Menzel)
	https://gist.github.com/drmenzelit/152a1954d73bcbe126194965e43c97f4
	https://www.dr-menzel-it.de/blog/offcanvas-menue-fuer-cassiopeia
	
	NOTA: 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: var(--cassiopeia-color-primary);
}

@media (min-width: 992px) {
    .offcanvas-start {
        width: 100%;
    }
	
	.metismenu.mod-menu .metismenu-item{
		font-size:1rem;
		padding: .5em 1.1em;
		font-family: 'TitilliumWeb-Bold';
	}
	
	.metismenu.mod-menu .metismenu-item:not(:last-child){
		border-right:1px solid #D6E5F9;
	}
	
	.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:red;
	}
	
	.container-header .metismenu > li:hover{
		background-color:#D6E5F9;
	}
	
	 .container-header .metismenu > li > a{
		color:#333;
	 }
	 
	 .metismenu.mod-menu .metismenu-item.divider:not(.parent) {
		border-right: 1px solid #CADDF7;
	}

}

@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;
    }

	li.nav-item.current.active {
		color:#7ed956;
	}
}
.offcanvas-header > *:only-child {
    margin-left: auto;
}

.container-header .navbar-toggler {
	color: #333;
	cursor: pointer;
	border: 1px solid #333;
}


@media (width <= 767.98px) {
	.container-header .container-nav .container-search, .container-header .container-nav nav {
		margin-top: 0.8em;
		margin-bottom: 0.8em;
		margin-left: 1em;
	}
	.motto{
		font-size:1rem;
	}
}

.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before {
	/*background: blue;*/
}

.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before {
	background: red;
}




/* ------------------------------------------------------------------------- *\
	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;
	}
}