/* ========================================= */
/* FOGLIO DI STILE PERSONALIZZATO CCPROGETTI */
/* ========================================= */

/* Colore della barra principale in alto (Header e Menu) */
.container-header {
    background-color: #ffffff;
    background-image: none;
    /* Rimuove le sfumature di Cassiopeia */
}
/* Bordatura dell'intera area di navigazione */
.container-nav {
  /*border: 2px solid #a4a4a4 !important;*/
  border-top: 2px solid #a4a4a4 !important;
  border-bottom: 2px solid #a4a4a4 !important;

  border-radius: 15px !important;
  /* Angoli arrotondati coerenti con le voci */
  padding: 5px 20px !important;
  /* Spazio interno tra bordo e voci */
  margin-top: 10px !important;
  /* Distacco dal modulo superiore */
  margin-bottom: 10px !important;
  /* Distacco dal contenuto sottostante */
  background-color: rgba(255, 255, 255, 0.05) !important;
  /* Un leggero velo di sfondo */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Un'ombra leggera per profondità */
}

/* 1. STRUTTURA BASE UNIFORME */
.metismenu .metismenu-item a,
.metismenu .metismenu-item button.separator {
  display: flex !important;
  align-items: center !important;
  min-height: 45px !important;
  padding: 0 15px !important;
  color: #4b0202 !important;
  font-size: 16px !important;
  font-weight: 570 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* 3. STATO ATTIVO (Sia per Padre che per Figlio) */
/* Essendo piatti, la classe .active e .current funzioneranno perfettamente */
.metismenu .metismenu-item.current>a,
.metismenu .metismenu-item.current>button.separator,
.metismenu .metismenu-item.active>a,
.metismenu .metismenu-item.active>button.separator {
  background-color: #ac3636 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
/* 1. Stato Base: Separatore neutro */
.metismenu .metismenu-item button.separator {
  background-color: transparent !important;
  color: #4b0202 !important;
}

/* 2. Stato Attivo Persistente: 
   Il separatore diventa rosso se la pagina corrente è un suo "figlio" */
.metismenu .metismenu-item.active>button.separator,
.metismenu .metismenu-item.alias-parent-active>button.separator,
.metismenu .metismenu-item.mm-active>button.separator {
  background-color: #ac3636 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
/* 3. Correzione Freccetta: Assicuriamoci che la freccia non diventi invisibile o nera sul rosso 
.metismenu .metismenu-item.active>button.separator::after,
.metismenu .metismenu-item.mm-active>button.separator::after {
  color: #ffffff !important;
}*/

/* HOVER (Opzionale: dà un feedback al passaggio del mouse) */
.metismenu .metismenu-item a:hover,
.metismenu .metismenu-item button.separator:hover {
  background-color: rgba(172, 54, 54, 0.1) !important;
  border-radius: 8px !important;
}

/* Struttura del Footer */
footer,
.site-footer,
.container-footer,
footer.container-footer {
    background: none !important;
    background-color: #ffffff !important; 
    border: 2px solid #a4a4a4 !important;
    border-radius: 15px !important;
    /* Angoli arrotondati coerenti con le voci */
    padding: 5px 20px !important;
    /* Spazio interno tra bordo e voci */
    margin-top: 10px !important;
    /* Distacco dal modulo superiore */
    margin-bottom: 20px !important;
    /* Distacco dal contenuto sottostante */
    background-color: rgba(255, 255, 255, 0.05) !important;
    /* Un leggero velo di sfondo */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Un'ombra leggera per profondità */
}


.footer a, 
.container-footer a {
    color: #6d1a1a !important;
    text-decoration: none !important;
}

.footer a:hover, 
.container-footer a:hover {
    text-decoration: underline !important;
}
/* 1. Colpisci il contenitore che crea lo spazio interno (Padding) */
.footer .container,
.container-footer .container {
  padding-top: 5px !important;
  /* Riduce lo spazio sopra */
  padding-bottom: 5px !important;
  /* Riduce lo spazio sotto */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 2. Rimuovi i margini di TUTTI gli elementi dentro il footer */
.footer *,
.container-footer * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. Se il footer ha una griglia (grid), riduciamo l'altezza della riga */
.footer .grid-child,
.footer [class*="col-"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 4. Forza l'altezza minima a zero */
footer.footer {
  min-height: 10px !important;
  line-height: 1.2 !important;
}
/* 1. Riduzione spazio per l'area Bottom-A */
.container-bottom-a {
  padding-top: 10px !important;
  /* Spazio sopra ridotto */
  padding-bottom: 10px !important;
  /* Spazio sotto ridotto */
  background-color: transparent;
  /* Opzionale: se vuoi che erediti lo sfondo */
}

/* 2. Stringi il contenitore interno di Bottom-A */
.container-bottom-a>.container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 3. Rimuovi i margini dei moduli dentro Bottom-A */
.container-bottom-a .moduletable,
.container-bottom-a .module,
.container-bottom-a div[class^="mod-"] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Pagina landscape esperienze */
/* CONTENITORE DELLE CARD */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 20px;
}

/* STILE DELLA CARD */
.pub-card {
  background-color: #ffffff;
  border: 2px solid #a4a4a4;
  /* Stesso grigio del tuo header/footer */
  border-radius: 15px;
  /* Stessa curvatura del tuo sito */
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pub-card:hover {
  transform: translateY(-5px);
  /* Effetto sollevamento */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: #ac3636;
  /* Diventa rossa al passaggio del mouse */
}

/* TITOLO E TESTO DENTRO LA CARD */
.pub-card h3 {
  color: #3e3e3e;
  font-size: 1.25rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.pub-card p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* IL BOTTONE DENTRO LA CARD */
.pub-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #7aa284;
  color: #333232 !important;
  text-decoration: none !important;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  transition: background 0.3s ease;
}

.pub-button:hover {
  background-color: #659569;
}

/* Aggiungi questo al tuo user.css */
.pub-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  /* Taglia l'immagine senza deformarla */
  border-radius: 12px 12px 0 0;
  /* Arrotonda solo gli angoli superiori */
  margin-bottom: 15px;
}

/* Restyling Modulo di Registrazione - Cassiopeia */
form.com-users-registration__form {
  background-color: #f8f9fa !important;
  padding: 35px !important;
  border-radius: 12px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08) !important;
  margin-top: 25px !important;
  border: 1px solid #eaeaea !important;
}

/* Arrotondamento morbido per i campi di testo */
form.com-users-registration__form input.form-control {
  border-radius: 8px !important;
  border: 1px solid #ced4da !important;
  padding: 12px !important;
  background-color: #ffffff !important;
}

/* Stile per dare risalto al pulsante Registrati */
form.com-users-registration__form button.btn-primary {
  width: 100% !important;
  padding: 12px !important;
  font-weight: bold !important;
  border-radius: 8px !important;
}