/* VARIABILI CSS GLOBALI */
:root {
  /* Layout */
  --header-height: 10.5rem;      
  --mobile-header-height: 3.5rem;
  --header-padding: 1.25rem;
  --gap-menu: 2.5rem;           
  
  /* Colori */
  --color-bg: #000;
  --color-text: #cecece;
  --color-accent: #adff2f;
  --color-accent-secondary: #aacf72;
  
  /* Font */
  --font-base: "Special Gothic Expanded One", Arial, sans-serif;
  
  /* Breakpoint */
  --breakpoint-mobile: 991.99px;
  
  /* Layout */
  --sidebar-width: 35%;
  --content-width: 65%;

  /* Margine sinistro sidebar */
  --sidebar-margin: 3.125rem; 
}

/* reset e stili di base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%; /* altezza viewport */
  background-color: var(--color-bg); 
  color: var(--color-text);
  font-family: var(--font-base) !important;
}

body {
  display: flex; /* container flex verticale */
  flex-direction: column; /* ordina i figli in colonna */
}

/* Header desktop */
.header-sticky {
  position: fixed; /* fisso in alto */
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-bg);
  padding: var(--header-padding);
  z-index: 1000;
  box-shadow: 0 1px 0 0 var(--color-text); /* linea sottile bordo inferiore */
}

.header-sticky h1 {
  font-family: var(--font-base) !important;
  color: var(--color-text);
  font-size: 4rem;
  margin: 0 0 10px 20px;
  text-decoration: none;
}


.header-sticky h2 {
  font-family: var(--font-base) !important;
  color: var(--color-accent);
  font-size: 2.5rem;
  margin-left: 1.25rem;
}

/* LAYOUT PRINCIPALE */
.site-wrapper {
  flex: 1;
  padding-top: var(--header-height);
}

.main-container {
  width: 100%;
  min-height: calc(100vh - var(--header-height));
}

/* SIDEBAR SINISTRA (MENU DESKTOP */
.colonna-sinistra {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 2rem;        
  z-index: 50;
  margin-left: var(--sidebar-margin);
}

/* Menu */
.colonna-sinistra ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-menu);
  padding: 16px 0;       
}

/* elenco */
.colonna-sinistra li {
  font-size: 1.25rem;           
  margin-bottom: 0;
}

/* link */
.colonna-sinistra a {
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 0;            /* 0.5rem = 8px */
  transition: color 0.2s ease-in-out;
}

/* effetti link */
.colonna-sinistra a:hover {
  color: var(--color-accent);
}

/* animazione */
@keyframes pulse-border {
  0%, 100% { 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  50% { 
    border-bottom: 2px solid rgba(255, 255, 255, 1);
  }
}

.colonna-sinistra .line {
  border-bottom: none;
  transition: all 0.2s ease;
}

.colonna-sinistra .line:hover {
  animation: pulse-border 1s ease-in-out infinite;
}

/* Contenuti - destra */
.colonna-destra {
  position: relative;
  margin-left: var(--sidebar-width);
  width: var(--content-width);
  min-height: calc(100vh - var(--header-height));
  background-color: var(--color-bg);
  padding: 1rem 4rem;        
  overflow-y: auto;
  margin-right: var(--sidebar-margin);
}

/* fascia con logo che si ripete */
.colonna-destra .logo-strip {
  background-image: url(../img/ep_logo.png);
  background-repeat: repeat-x;
  background-position: top center;
  height: 150px;
  background-size: auto 125px;
  margin-bottom: -12.5rem; /* spazio vuoto tra header e contenuto */
  margin-top: 3rem; 
  position: relative;
}


section {
  padding-top: 13.5rem; /* padding per evitare che nello scroll i contenuti vadano sotto l'header */
}


/* Titoli e sottotitoli */
.colonna-destra h3 {
  font-size: 1.5rem;           
  color: var(--color-accent);
  margin-bottom: 1rem;       
}

.colonna-destra h4 {
  font-size: 1.3rem;           
  color: var(--color-accent);
  margin-bottom: 0.5rem;        
}

.colonna-destra h5 {
  font-size: 1rem;           
  color: var(--color-text);
  margin: 0.5rem 0;             
}

/* Box contenuti */
.colonna-destra .box {
  margin-bottom: 2rem;       
  padding: 1.5rem;             
  color: var(--color-text);
  border: 1px solid transparent; 
  border-radius: 10px;
  transition: border 0.3s ease-in-out; /* transizione al passaggio del mouse */
}

.colonna-destra .box:hover {
  border: 1px solid var(--color-text); /* bordo al passaggio del mouse */
}

/* Testo e paragrafi */
.colonna-destra p {
  font-size: 1rem;               
  line-height: 1.8;
  font-family: var(--font-base) !important;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap; /* I bottoni vanno a capo su schermi molto piccoli */
}

/* Pulsanti */
.btn {
  font-size: 1rem; 
  background-color: var(--color-accent); 
  color: var(--color-bg) !important; 
  border-color: var(--color-accent); 
  position: relative; 
  text-decoration: none; 
  display: inline-block;
  margin-bottom: 2rem;
}

/* cambiamento di colore al passaggio del mouse */
.btn:hover {
  background-color: var(--color-text) !important;
  border-color: var(--color-accent) !important;
}

/* date */
.colonna-destra .date {
  font-size: 1rem;           
  margin: 0.75rem 0;            
  color: var(--color-accent-secondary);
  font-family: var(--font-base) !important;
}

/* Badge */
.colonna-destra .badge_container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;                 
  margin-top: 0.75rem;          
}

.colonna-destra .badge {
  background-color: var(--color-accent-secondary);
  border-radius: 20px;
  font-size: 0.75rem;          
  color: var(--color-bg);
  padding: 0.5rem 0.75rem;         
  white-space: nowrap;
}

/* Immagini */
.colonna-destra .project-img {
  width: 100%;
  height: auto;
  margin: 1rem 0;            
}

/* Link */
.colonna-destra a {
  color: var(--color-text);
  text-decoration: none;
}

/* effetto sui link */
.colonna-destra a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}


.description p {
  font-size: 0.8rem;                
  line-height: 1.6;
  font-family: var(--font-base) !important;
}

/* SOCIAL LINKS */
.colonna-destra .social {
  margin-top: 8rem;      
  margin-bottom: 4rem;   
  display: flex;
  gap: 5rem;                 
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.colonna-destra .social a {
  color: var(--color-accent);
  font-size: 1.7rem;           
  transition: color 0.2s ease-in-out;
  align-items: center;
  padding: 0.5rem;              
  border-radius: 0.25rem;        
}

/* variazione colore al passaggio del mouse */
.colonna-destra .social a:hover {
  color: var(--color-text);
}

/* HEADER MOBILE */
.mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--mobile-header-height);
  padding: 0;
  z-index: 101;
  background-color: var(--color-bg) !important;
  box-shadow: 0 1px 0 0 var(--color-text) !important;
}

.mobile-header .container-fluid {
  padding-left: 0.5rem;         
  padding-right: 0.5rem;        
}

.mobile-header .navbar-brand img {
  width: 2.5rem;               
  height: auto;
}

.mobile-header .navbar-toggler {
  border: none;
}

.mobile-header .nav-link {
  color: var(--color-text);
  padding: 0.5rem 1rem;   
  font-size: 0.75rem;
  margin-top: 10px;
}

.mobile-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* MAPPA  */
#map { 
  height: 25rem; 
  width: 100%;
  z-index: 1 !important;
  position: relative;
  margin-top: 1rem;
}

#map span {
  color: black !important;
}

/* FOOTER */
.main-footer {
  margin-top: auto;
  text-align: center;
  border-top: 1px solid var(--color-text);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 0.625rem;
  padding: 1.25rem 0;
  margin-left: var(--sidebar-width);
}

.main-footer p {
  font-size: 0.75rem;           
  line-height: 1.8;
  font-family: var(--font-base) !important;
}

#social {
  display: none;
}

/* RESPONSIVE */

/* MOBILE (>= 992px) */
@media (max-width: 991.99px) {
  /* Nasconde elementi desktop */
  .header-sticky {
    display: none !important;
  }
  
  .colonna-sinistra {
    display: none !important;
  }
  
  /* Adatta layout per mobile */
  .site-wrapper {
    padding-top: var(--mobile-header-height);
  }
  
  .colonna-destra {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1rem !important;
  }

  section {
    padding-top: 5.625rem; 
  }

  .button-container {
    flex-direction: column; /* Bottoni in colonna su schermi molto piccoli */
    gap: 0.5rem;
  }
  
  .button-container .btn {
    width: 100%;
    max-width: 250px;
  }

  /* Social links mobile */
  .colonna-destra .social {
    display: flex;
    gap: 2rem;
    margin-top: 1.25rem;
    padding: 0 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .colonna-destra .social a {
    font-size: 1.125rem;
    padding: 0.5rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Footer mobile */
  .main-footer {
    padding: 1rem 0;
    font-size: 0.7rem;
    margin: 0;
  }
  
  #social {
    display: none;
  }
  /* Logo strip mobile */
  .colonna-destra .logo-strip {
    background-image: url(../img/ep_logo.png);
      background-repeat: repeat-x;
      background-position: top center;
      height: 9.375rem;
      background-size: auto 7.5rem;
      margin-bottom: -5.625rem;
      margin-top: 1.25rem;
  }
}