/* COLORI GLOBALI */
:root {
    --maincolor: #C2471F;
    --visitedlinkcolor: #DD723C;
    --unvisitedlinkcolor: #004a66;
    --unvisitedlinkcolorhover:#143e69;
    --textcolor: #290E00;
    --defaultbgcolor: #FFFFFF;
    --sfondocard: #E6E6E6;
    --sfondoTabelle: #F8F8F8;
}

/* GENERALI */
* {
    padding: 0;
    margin: 0; 
    box-sizing: border-box;
}
h1 {
    font-size: 2.5em;
    margin: 0;
}

h2{
    font-size: 2.1em;
    margin-bottom: 0.5em;
}

h3{
    font-size: 1.6em;
}

h4{
    font-size: 1.5em;
    margin-bottom: 0.6em;
}

h5{
    font-size: 1.4em;
    margin-bottom: 0.3em;
}

p{
    font-size: 1.2em;
    line-height: 1.5; 
}

a {
    color: var(--unvisitedlinkcolor);
    font-weight:700
}
a:visited {
    color: var(--visitedlinkcolor)
}

body {
    font-family: "Varela Round", sans-serif;
    color: var(--textcolor);
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    margin-left: auto;
    margin-right: auto;
    max-width: 1800px;
}

/* BOTTONI */
button, .button{
    font-size: 100%;
    padding: 1em;
    border-radius: 1em;
    background-color: var(--unvisitedlinkcolor);
    color: var(--defaultbgcolor);
    font-weight: bold;
    text-align: center;
    border: none;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
    cursor: pointer;
}

/* bottoni per navigazione */
.button.navigazione , .button.navigazione:visited{
    color: var(--defaultbgcolor)
}

/* bottone per download */
a.button.download:visited{
    color: var(--defaultbgcolor);
    background-color:var(--visitedlinkcolor);
}
a.button.download:visited:hover{
    color: var(--defaultbgcolor);
    background-color:var(--maincolor);
}

/* bottoni form modifica recensione*/
.button.danger {
    background-color: var(--maincolor);
    color: var(--defaultbgcolor); 
    margin-left:0.5em;
}
.button.danger:hover {
    background-color: var(--maincolor);
}

/* HEADER */
header {
    display: flex; 
    align-items: center; 
    background-color: var(--maincolor);
    color: var(--defaultbgcolor);
    padding: 1em 2em;
    border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px;
}

.logo { 
    width: 3.5em;  /* 60px;*/
    height: auto; 
    margin-right: 1em;
}
a.logo{
    color: var(--defaultbgcolor);
}
.linkHome{
    z-index: 99;
    color:var(--defaultbgcolor);
}
.VaiAiContenutiPrincipali, .VaiAiContenutiPrincipali:visited{
    color:var(--defaultbgcolor);
}
.VaiAiContenutiPrincipali:not(:focus){
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
}

/* MENU */
#menu {
    margin-top: 0em;
    padding-bottom: 0em;
    border-bottom: var(--maincolor) 4px solid;  
}

#menu ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0 auto;
    padding: 1em;
    align-items: center;
    max-width: 95%;
    font-size: 1.3em;
}

#menu li{
    color:var(--visitedlinkcolor);
}

/* Bottone accedi/registrati */
#menu .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 0.3em 2.6em;
    background-color: var(--unvisitedlinkcolor);
    border-radius: 20px;
    min-width: 10em;
    color: var(--defaultbgcolor);
    text-decoration: none;
}
#menu .action-button:visited{
    background-color: var(--visitedlinkcolor);
}

#menu .action-button .icon-accedi, nav#menu .action-button .icon-logout {
    margin-left: 0.5em;
    width: 1.4em;
    height: 1.4em;
}

#hamburger {
    display: none; 
}

/* BREADCRUMB */
#breadcrumb {
    width: 95%;
    margin: 1em auto; 
    padding: 0.5em 1em; 
    border: 3px solid var(--maincolor); 
    border-radius: 17px;  
    text-align: left;
}

/*PAGINE ERRORI*/
#mainErrore{
    display: flex;
    flex-direction: row;
}

#mainErrore img{

    max-width: 30em;
    border-radius: 0.5em;
}

.testoErrore{
    margin-left:  10em;
}

.testoErrore p{
    margin-top: 2em;
}

#main-homepage, #main-navigatore, #main-profilo, #main-amministratore {
    display: flex;
    flex-direction: column;
    padding: 2em;
}
#main-homepage p {
    margin-bottom: 1.5em;
}

.percorsi-top-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 2em; 
    width: 100%;
    justify-content: center; 
}


/* FORM */
#formcontent {
    text-align: left;
    padding: 2em;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--sfondocard);
    width: 92%;
    margin: 3em auto;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;   
    margin-top: 2em; 
}

#formcontent:hover {
    box-shadow: 0px 2px 15px var(--maincolor);
}

#formcontent fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

#formcontent .styleInput:focus {
    border-color: var(--maincolor);
    outline: none;
}

#formcontent .button:hover {
    background: var(--maincolor);
}
/* Input */
#formcontent .styleInput {
    width: 100%;
    padding: 0.8em;
    margin-bottom: 1em;
    border: 1px solid #cccccc;
    border-radius: 20px;
    box-sizing: border-box;
    font-size: 1em;
}

/* FORM */
#formcontent h2 {
    text-align: center;
    margin: 0.1em 0 1em;
}

#formcontent label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
    font-size:1.3em;
    color: var(--textcolor);
}

.formInput *:not(.ultimoInput):not(option) {
    margin-bottom: 1em;
}

.formInput input[type=submit] {
    display: block;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: auto;
    margin-bottom: 1em; 
}

.recensione label{
    font-size: 1.2em;
    line-height: 1.5; 
    display: block;
}

#formcontent label:after {
    content: ": ";
}

#textArea-errore{
    color: var(--maincolor);
    font-weight: bold;
}

.errorSuggestion {
    color: var(--textcolor);
    font-size: 1em;
    display: block;
     margin-top: -1em; 
}

.valutazione {
    margin-top: 1em;
}

select{
    margin-bottom: 1em;
    min-width: 4em;
    text-align: center;
    border-radius: 5px;
    display: block;
}

.inputRecensione {
    height: 6em;
    width: 100%;
    padding: 0.5em;
    border-radius: 5px;
    border:1px solid;
    font-size: 1.2em;
    resize: none;
    margin-bottom: 1em;
    font-family: inherit;
}

/* Errori del form */
.alert-info { 
    text-align: center;
    color: var(--maincolor); 
    font-size: 1.4em;
}
.contenitore-alert{
    padding-bottom: 1em;
    width: 100%;
}

.hidden{
    display: none;

}

/* Errori dei campi in input*/
#formcontent .suggestionMessage {
    display: block;
    color: var(--unvisitedlinkcolor);
    font-size: 0.9em;
    margin-bottom: 2em;
}

#formcontent .errorMessage {
    display: block;
    color: var(--maincolor);
    font-size: 0.9em;
    margin-bottom: 2em;
}

/* Bottoni form*/
#formcontent .button {
    background:var(--visitedlinkcolor);
    font-size: 1.2em;
    padding: 0.6rem 5em; 
    margin: 1em auto 1em;
    transition: transform 0.3s ease;
}

button#modifica img, button#elimina img{
    height: 1.6em;
    padding:0;
}
button#modifica, button#elimina{
    background-color: transparent;
    padding: 0.5em;
    font-size: 1.4em;
    color:var(--textcolor);
}

/* PAGINA PERCORSO */
#main-percorso {
    display: grid;
    grid-template-columns: 1fr 2fr;  
    gap: 1em;
    padding: 2em;
    margin: 0 auto;
}

/* carosello */
.carosello {
    position: relative;
    max-width: 40em;    
    overflow: hidden;
    border-radius: 20px;
    height: max-content;
}

.carosello img {
    width: 100%;
    display: none;
}

img.slideVisibile{
    display: block;
}

.carosello button{
    position:absolute;
    top: 50%;
    transform:translateY(-50%) ;
    padding: 1em;
    font-size: 2em;
    background-color: rgba(0, 0, 0, 0.60);
    color: var(--defaultbgcolor);
    border: none;
    cursor: pointer;
    border-radius:0;
}
.precedente{
    left: 0;
}
.succesiva{
    right: 0;
}

.nomePercorso {
    grid-column: 1 / -1;
    text-align: left;
    margin-bottom: 0;
}

.descrizionePercorso {
    grid-column: 1 / -1;
    text-align: left;
    margin-bottom: 1em; 
}

/* mappa gpx */
#mappa {
    background-color: var(--sfondocard);
    border-radius: 20px;
    overflow: hidden;
}

#mappa iframe{
    border: none;
    width: 100%;
    height: 100%;
}

.descrizione, .indicazioni, .trascrizioni {
    padding: 1.5em;
    border-radius: 20px;
    background-color: var(--sfondocard); 
    text-align: left;  
}

/* gestione icone in descrizione*/
.abbr-icon {
    height: 1.8em;
    margin: 0 0.2em 0 0.5em;
}

.icon-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 1.4em 0em;
}

abbr[title="Adatto ai bambini"] {
    content: url('../assets/children-solid.svg');
}

abbr[title="Adatto solo ad utenti esperti"] {
    content: url('../assets/person-hiking-solid.svg');
}

abbr[title="Adatto alle persone ipovedenti / cieche"] {
    content: url('../assets/person-walking-with-cane-solid.svg');
}

abbr[title="Adatto alle persone con mobilità ridotta"] {
    content: url('../assets/person-cane-solid.svg');
}

abbr[title="Adatto ai passeggini"] {
    content: url('../assets/baby-carriage-solid.svg');
}

abbr[title="Adatto alle sedie a rotelle"] {
    content: url('../assets/wheelchair-move-solid.svg');
}

abbr[title="Dislivello in salita"] {
    content: url('../assets/arrow-trend-up-solid.svg');
}

abbr[title="Dislivello in discesa"] {
    content: url('../assets/arrow-trend-down-solid.svg');
}

abbr[title="Lunghezza del percorso"] {
    content: url('../assets/route-solid.svg');
}

.gpx-section {
    margin-top: 2em;
}

details {
    margin-top: 1.5em;
}

details p {
    background-color: var(--unvisitedlinkcolor);
    color: var(--defaultbgcolor);
    padding: 0.5em;
    border-radius: 0.5em;
    margin: 0.2em;
    text-align: left;
}

summary {
    color: var(--unvisitedlinkcolor);
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    padding-bottom: 0.5em;
}

/* recensioni */

.recensioni {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    padding: 1em;
    background-color: var(--sfondocard);
    width: 100%;
    align-self: center;
    border-radius: 0.5em;
    margin-bottom: 2em;
}

.recensione {
    padding: 0.7em;
    background-color: var(--defaultbgcolor);
    margin-top: 1em;
    margin-bottom: 1.5em;
    border-radius: 0.5em;
}

/* PERCORSI */
.contenitore-carte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 1.5em; 
    margin-top: 2em;
    width: 100%;
    box-sizing: border-box;
    padding: 0 2em; 
    margin-bottom: 2em;
}

.contenitore-carte h2{
    grid-column: 1 / -1;
}

.link-percorso {
    padding: 0.7em;
    margin-bottom:1.15em;
}

.carta {
    background-color: var(--defaultbgcolor);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2),0 3px 10px 0 rgba(0,0,0,0.19);
    border-radius: 10px;
    overflow: hidden;
}

.carta img {
    width: 100%;
}

/* USARE IL NAVIGATORE */
.area-dispositivo{
    display: grid;
    margin-top: 1.5em;
    grid-template-columns: 1fr 3fr;
    gap: 1em;
    margin: 2em auto;
}
.area-dispositivo video{
    width: 100%;
}
.area-dispositivo p{
    grid-column: 1 / -1;
}  

.trascrizioni p{
    margin-bottom:0;
}
.trascrizioni .trascrizione-screen-reader{
    font-style: italic;
    font-size: 1.1em;
    margin-top:0.5em;
    margin-bottom:0.5em;
}

.link-esterno::after {
    display: inline-block;
    content: url('../assets/arrow-up-right-from-square-solid.svg');
    height: inherit;
    width: 1em;
    margin: 0 0.3em;
    color: var(--textcolor);
}

/* FOOTER */
footer {
    background-color: var(--maincolor);
    border-radius: 20px 20px 0 0;
    margin-top: auto;
    display: flex;
    flex-direction: row-reverse;
} 

footer a
{
    margin: 0.5em 3em 0.5em 0;
}
    
footer p{
    text-align: center;
    margin: auto;
    color: var(--defaultbgcolor);
}

noscript{
    display: block;
    text-align: center;
    align-content: center;
    height: 100%;
    color: var(--maincolor);
    font-weight: bold;
}

.slides noscript{
    height: 60%;
}

.recensione noscript{
    text-align: left;
}

.slides{
    height: 100%;
}

/*Tabella profilo e amministratore*/
table{
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 1em;
}
caption {
    font-size: 1.4em;
    margin-bottom: 0.5em;
}

th, td{
    border: 2px var(--unvisitedlinkcolor) solid;
    padding: 1em;
}
td{
    font-size: 1.2em;
}
th{
    font-size: 1.4em;
}

thead th{
    background-color: var(--sfondoTabelle);
}

.cella-voto {
  text-align: center;
  padding:0;
}

/* Caso in cui il profilo non abbia recensioni*/
td[colspan="3"], td[colspan="5"]{
    text-align: center;
}

td.rimuovi-intestazione-mobile{
    text-align:center;
}

td a.icona-elimina {
    content: url('../assets/trash-solid.svg');
    height: 2em;
    display: inline-block;
}

#risultatoModifiche{
    color: var(--maincolor);
    font-weight: bold;
}

abbr[title="Obbligatorio"]{
    color: var(--maincolor)
}