/* stili comuni a tutti i dispositivi */
@font-face {
    font-family: 'Reddit';
    src: url('./fonts/RedditSans-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RedditSemiBold';
    src: url('./fonts/RedditSans-SemiBold.woff2') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'RedditBold';
    src: url('./fonts/RedditSans-Bold.woff2') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'RedditItalic';
    src: url('./fonts/RedditSans-Italic.woff2') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'RedditItalicBold';
    src: url('./fonts/RedditSans-ExtraBoldItalic.woff2') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'RedditItalicSemiBold';
    src: url('./fonts/RedditSans-SemiBoldItalic.woff2') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'RedditLight';
    src: url('./fonts/RedditSans-Light.woff2') format('woff');
    font-weight: light;
    font-style: normal;
}

@font-face {
    font-family: 'RedditLightItalic';
    src: url('./fonts/RedditSans-LightItalic.woff2') format('woff');
    font-weight: light;
    font-style: normal;
}

/* base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --verdone:#48574b;
    --verdechiaro:#b5c7b8;
    --rossointenso:#ad1e4a;
}

html {
    font-size: 23px;
    scroll-behavior: smooth;
}

body {
    font-family: 'RedditLight', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    /*display: block;*/
}

a {
    color: inherit;
    cursor:pointer;
    text-decoration: underline solid var(--rossointenso) 3px;
}

a.bottone
{
    padding: 1px 45px;
    border-radius: 9999px;
    font-size: 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: Reddit;
    text-decoration:none;
}

ul
{
	/*list-style: none;*/
}

button
{
    border: none;
    cursor: pointer;
    background: none;
    font-family: inherit;
}

u
{
    text-decoration: underline solid var(--rossointenso) 3px;
}

/* general styles */
.container
{
    margin: 0 auto;
    padding: 0 20px;
    max-width: 1600px;
    /*outline: 1px dotted red;*/
}

/* header */
.site-header
{
    background: white;
    padding: 20px 0;
    min-height:175px;
    position:relative;
    padding-bottom:0;
    margin-bottom:20px;
    background: url('img/bg_top.svg') no-repeat center top;
}

.site-header nav
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.site-header nav:after
{
    content: "";
    width:284px;
    display: flex-item;
}

#logo
{
	margin-bottom:20px;
}

#logo img
{
    height: 124px;
}

.main-nav > ul
{
    display: flex;
    color: #5b6a5e;
    list-style: none;
    align-items: center;
}

.main-nav > ul > li
{
	flex:1;
	padding:0 25px;
	white-space:nowrap;
	padding-bottom:20px;
}

.main-nav > ul > li > a
{
	top:-2px;
    color: inherit;
    padding:0 15px;
    padding-right:40px;
    font-size: 16px;
	position: relative;
    letter-spacing: 0.5px;
    text-decoration:none;
    text-transform: uppercase;
    font-family: RedditSemiBold;
}

.main-nav #menu > li.btn-on > a,
.main-nav #menu > li:hover > a
{
    color: white;
    border-radius: 20px;
    background: var(--rossointenso);
    padding-top:8px;
    padding-bottom:8px;
}

.main-nav #menu > li.btn-on > a
{
    padding-right:15px;
    padding-left:15px;
}

.main-nav .submenu .btn-on a
{
    padding-right:0;
}

.btn-on > a:after
{
    top:-3px;
    position:relative;
    margin-left: 10px;
    display:inline-block;
    content: url('img/drop.svg');
}

.main-nav ul li .submenu
{
	color:white;
	position:absolute;
}

.main-nav > ul > li > .submenu
{
	left:0;
	right:0;
	top:calc(100% - 1px);
	z-index:1;
	display: none;
	min-height:450px;
    background: var(--rossointenso) url('img/bg_menu.svg') no-repeat center top;
}

.main-nav > ul > li .submenu .submenu
{
	top:20px;
	left:50%;
}

.main-nav > ul > li:hover > .submenu
{
	display: block;
}

.main-nav ul li .submenu .container
{
	font-size:21px;
	padding-top:20px;
	padding-left:455px;
}

.submenutitle
{
    font-weight: normal;
    font-family: RedditBold;
}

.main-nav ul li .submenu ul
{
	list-style:none;
	width:fit-content;
	flex-direction:column;
}

.main-nav ul li .submenu ul a
{
	color: inherit;
	text-transform: none;
}

.main-nav ul li .submenu .btn-on > a:after
{
	top:0;
	transform:rotate(-90deg);
}

/* ====================================
   HERO SECTION
   ==================================== */
.hero-section
{
    padding: 0;
    margin-top:-10px;
    min-height:962px;
    position: relative;
    background: url('img/bg_hero.svg') no-repeat center 60px;
}

.hero-title
{
    color: #5b6a5e;
    font-size: 55px;
    line-height: 1.3;
    text-align: center;
    font-weight: normal;
    padding-bottom: 70px;
    font-family: RedditLightItalic;
}

.hero-title:before
{
    content: "\201C";
}

.hero-title:after
{
    content: "\201D";
}

.hero-title .light-text
{
    color:var(--verdechiaro);
    text-transform: uppercase;
}

.bold-text
{
    font-weight: normal;
    font-family: RedditBold;
}

.italic-text
{
    /*font-family: RedditItalic;*/
}

.hero-title.italic-text .bold-text
{
    font-family: RedditItalicBold;
}

/* swiper */
.swiper-container
{
    position: relative;
    margin-bottom: 40px;
}

.swiper-wrapper
{
    gap: 30px;
    display: flex;
    perspective: 1000px;
    align-items: stretch;
    justify-content: center;
	pointer-events: none;    /*this resolves a bug: click on slide not working if in coverflow*/
}

.carta
{
    flex: 0 0 26.5%;
    background: #fff;
    overflow: hidden;
    aspect-ratio: 9 / 11.5;
    border-radius: 15px;
    height:auto !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    pointer-events: auto;    /*this resolves a bug: click on slide not working if in coverflow*/
    padding:12px;
}

.twocols .carta + .carta
{
	margin-top:30px;
}

.twocols .carta
{
	aspect-ratio:unset;
}

.twocols > :first-child
{
	max-width:33vw;
	flex-basis:33vw;
	flex-shrink:0;
}

.carta.prenota
{
	color:white !important;
	padding:24px;
	border-style:double;
	border-color:#5b6a5e;
	background-color:#5b6a5e;
}

.carta.prenota > div:first-child,
.carta.prenota label
{
	color:white;
	text-transform:uppercase;
}

.carta.prenota > div:first-child,
.carta.prenota h1
{
	font-size:1.2em !important;
	text-align:center;
}

.carta.prenota .cmdbuttons
{
	text-align:right;
}

.carta.prenota .cmdbuttons .btnspacer
{
	display:none;
}

.carta.prenota .cmdbuttons .bottone
{
	font-size:1em;
	color:var(--verdone);
	background-color:white;
	border-radius:100vw;
	text-transform:uppercase;
}

.event-image
{
	width:100%;
	aspect-ratio: 1;
    overflow: hidden;
    position: relative;
    border-radius: 5px;

}

.event-image img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-tags
{
    gap: 8px;
    top: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
}

.tag
{
    color: #D4395C;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.9);
}

.event-content
{
    padding: 10px;
}

.event-title
{
    color: #5b6a5e;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 10px;
    font-family: RedditBold;
    text-transform: uppercase;
}

.event-title a,
.card-title a
{
    text-decoration:none;
}

.event-subtitle
{
    color: #4d4d4d;
    font-size: 16px;
    font-family: RedditLight;
}

.event-subtitle b
{
    font-weight: normal;
    font-family: RedditBold;
}

/* normal sections */
.section-header
{
    text-align: center;
    margin-bottom: 50px;
}

.section-title
{
    min-width:45%;
    color: #5b6a5e;
    font-size: 43px;
    font-weight: normal;
    display: inline-block;
    font-family: RedditBold;
    text-transform: uppercase;
    border-top:1px solid black;
}

.section-subtitle
{
    color: black;
    font-size:21px;
    margin-bottom: 10px;
    font-family: RedditLight;
}

/* news */
.news-section
{
    padding: 0;
    background: #fff;
    margin-top: -50px;
    padding-bottom:190px;
}

.news-item
{
    padding: 30px 0;
    padding-left: 20px;
    border-bottom: 1px solid #989898;
}

.news-content h4
{
    color: black;
    font-size: 22px;
    font-weight:normal;
    margin-bottom: 10px;
    position: relative;
    font-family: RedditBold;
}

.news-content h4:first-letter
{
    text-transform: uppercase;
}

.news-content h4 a
{
    color: inherit;
	text-decoration:none;
}

.news-content h4 a:after
{
	top:0;
	right:0;
    position:absolute;
    content:url("img/greyarrowup.svg")
}

.news-content h4 a:hover
{
    color: #d72444;
}

.news-content h4 a:hover:after
{
    content:url("img/redarrow.svg")
}

.news-content p
{
    color: black;
    font-size:17px;
    font-family: RedditLight;
}

.news-link
{
    flex-shrink: 0;
    margin-left: 20px;
}

.icon-arrow
{
    color: #D4395C;
}

/* program section */
.program-section,
.area-section,
.doc-section
{
    padding: 80px 0;
    background: var(--verdechiaro);
    background: linear-gradient(117deg, #c2d1c5 0%, #d4ded5 33%, white 66%, white 100%);
}

.lightbox .doc-section
{
	color:white;
    background: transparent;
}

.doc-section .twocols
{
	gap:30px;
	display:flex;
	flex-direction:row;
}

.lightbox .doc-section .carta
{
	width:412px;
	color:#38463a;
}

.doc-firma
{
	margin-top:10px;
	text-align:right;
	font-family:script;
}

.events-grid
{
    gap: 38px;
    display: grid;
    margin-bottom: 60px;
    grid-template-columns: repeat(4, 1fr);
}

.program-card
{
    padding:12px;
    overflow: hidden;
    background: #fff;
    border-radius: 15px;
    aspect-ratio:360 / 583;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    display:flex;
    padding-bottom:17px;
    flex-direction: column;
}

.card-image
{
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
    flex-shrink:0;
}

.card-image > img
{
    width: 100%;
    aspect-ratio:1;
    object-fit: cover;
}

.card-hashtags
{
    left: 0;
    gap: 8px;
    width:60%;
    top: 30px;
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
}

.card-badges
{
    right: 0;
    gap: 8px;
    min-width:43%;
    bottom: 15px;
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: flex-start;
}

.badge
{
    width:100%;
    padding: 3px 8px;
    font-size: 17px;
    border-radius: 20px;
    font-weight: normal;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: RedditItalicSemiBold;
}

.card-hashtags .badge
{
    position:relative;
    background-color:white;
    border-radius: 0 9999px 9999px 0;
}

.card-hashtags .badge:before
{
    content:"#";
    color:#989898;
}

.card-hashtags .badge:after
{
    top:10%;
    right:5px;
    content:"";
    height:80%;
    display:block;
    aspect-ratio: 1;
    position:absolute;
    border-radius: 9999px;
    background-color:var(--hashtag-color);
}

.card-badges .badge
{
    gap:15px;
    color:white;
    display: flex;
    font-size:12px;
    font-weight: normal;
    align-items: center;
    font-family: RedditItalicBold;
    background-color:#0000008F;
    border-radius: 9999px 0 0 9999px;
}

.card-badges .badge img
{
    height:32px;
    aspect-ratio: 1;
}

.btn-prenota
{
    left: 50%;
    color: #fff;
    bottom: 50%;
    position: absolute;
    background: var(--rossointenso);
    transform: translate(-50%,50%);
    box-shadow: 0 5px 20px rgba(0,0,0);
}

.card-content
{
    padding: 0;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-title
{
    color: var(--rossointenso);
    font-size: 21px;
    font-weight: normal;
    font-family: RedditBold;
    text-transform: uppercase;
}

.card-subtitle
{
    color: #4d4d4d;
    font-size: 14px;
    font-weight: normal;
    font-family: RedditBold;
}

.card-meta,
.card-description
{
    color: #4d4d4d;
    font-size: 14px;
    font-family: Reddit;
}

.card-description
{
    /*margin-bottom: 50px;*/
}

.meta-date,
.card-description b
{
    font-weight: normal;
    font-family: RedditBold;
}

.card-meta
{
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.meta-item
{
    gap: 8px;
    display: flex;
    align-items: flex-start;
}

.meta-item .icon
{
    flex-shrink: 0;
    color: #5a8a6a;
    margin-top: 2px;
}

/* cta calendar */
.cta-calendar p
{
    color: var(--verdone);
    font-size: 56px;
    text-align: left;
    letter-spacing: 2px;
    font-family: RedditLightItalic;
}

.cta-calendar h2
{
    top:-40px;
    color: var(--verdechiaro);
    font-size: 75px;
    text-align: right;
    letter-spacing: 2px;
    position:relative;
    font-weight:normal;
    font-family: RedditBold;
    text-transform: uppercase;
}

.cta-calendar h2 a
{
    text-decoration:none;
}

.cta-calendar h2 a:hover
{
    color: var(--rossointenso);
}

.cta-title .highlight
{
    color: #D4395C;
}

/* ====================================
   VALUES SECTION
   ==================================== */
.values-section
{
    padding: 80px 0 100px 0;
    --aggetto:-50px;
    background: #fff;
}

.values-section .container
{
    color:black;
    padding:0 15%;
}

.intro-text
{
    font-size: 17px;
    text-align: left;
    margin-left:var(--aggetto);
}

.intro-text strong
{
    font-weight:normal;
    font-family: RedditBold;
}

.intro-text a
{
    text-decoration: underline solid #ad1e4a 3px;
}

.values-grid
{
    font-size:23px;
    margin-bottom: 80px;
}

.values-grid li
{
    margin-bottom:30px;
}

.values-grid li:nth-child(5n+1)
{
    list-style-image: url("img/li1.svg");
}
.values-grid li:nth-child(5n+2)
{
    list-style-image: url("img/li2.svg");
}
.values-grid li:nth-child(5n+3)
{
    list-style-image: url("img/li3.svg");
}
.values-grid li:nth-child(5n+4)
{
    list-style-image: url("img/li4.svg");
}
.values-grid li:nth-child(5n)
{
    list-style-image: url("img/li5.svg");
}

.values-grid h4
{
    font-size:23px;
    margin-left:10px;
    font-weight:normal;
    font-family: RedditBold;
}

.values-grid li p
{
    margin-left:var(--aggetto);
    line-height: 1;
}

.value-icon
{
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
}

.value-item h4
{
    color: #333;
    line-height: 1.4;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.value-item p
{
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* area */
.area-section,
.doc-section
{
	margin-bottom:100px;
}

.area-content
{
	margin-bottom:100px;
}

#docsa
{
	flex-wrap:wrap;
	margin-top:100px;
}

#docsa .carta
{
    aspect-ratio:unset;
}

/* footer */
.site-footer
{
    margin-top:-100px;
}

.site-footer #piedee
{
    color: white;
    background: var(--verdone) url('img/bg_bot2.svg') no-repeat center bottom;
}

.site-footer::before
{
	content:"";
	height:106px;
	display:block;
	position: relative;
    background: white url('img/bg_bot1.svg') no-repeat center top;
}

section:has(#calendbox) + .site-footer::before
{
    background: transparent url('img/bg_bot1.svg') no-repeat center top;
}

.site-footer a.bottone
{
    margin:30px 0;
    font-size:22px;
    color: black;
    background: white;
    display: inline-block;
}

.site-footer #piedec
{
    gap:10%;
    display:flex;
	padding-top: 70px;
	font-size:17px;
    padding-bottom: 150px;
}

.site-footer #piedec > *
{
    flex-basis:20%;
}

.site-footer #piedec > :first-child,
.site-footer #piedec > :last-child
{
    flex-basis:30%;
}

#contsoc ul
{
    display:flex;
    list-style: none;
    align-items: center;
}

#contsoc ul li
{
    flex:1;
}

ul.listadate
{
    list-style: none;
}

ul.listadate li
{
    text-transform:capitalize;
}

.site-footer h5
{
    color:var(--verdechiaro);
    font-size: 32px;
    font-weight: normal;
    font-family: RedditSemiBold;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.site-footer address
{
    font-style: inherit;
}

.site-footer a
{
    text-decoration:none;
}

.site-footer address h6
{
    font-size: inherit;
    font-weight: normal;
    font-family: RedditSemiBold;
    text-transform: uppercase;
}

#copy
{
	gap:10px;
	height:36px;
	display: flex;
	font-size:16px;
	font-family: Reddit;
}

#copy *
{
	flex:0;
	white-space: nowrap;
}

#atip
{
	flex:1;
	font-family: RedditLight;
}

#atip span
{
	color:black;
	text-transform: uppercase;
}

#copy * a
{
	font-family: RedditBold;
}

.nav-toggle-cb, .nav-toggle-lb
{
	display:none;
}

.carta h3,
.carta h3 a
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
	line-height:135%;
    /* Importante: rimuove qualsiasi height/max-height fisso
       che potrebbe impedire al clamp di funzionare */
    height: auto;
    max-height: none;
}