/* =========================================================
   WEB COLF - Personalizzazione Cassiopeia
   Joomla / Template Cassiopeia

   Colori:
   Blu principale:  #00478c
   Verde accento:   #82A100
   Header chiaro:   #EEEEEE

   Header:
   Altezza circa 80px
   Logo ridotto
   ========================================================= */


/* ---------------------------------------------------------
   Variabili colore
   --------------------------------------------------------- */

:root {
  --cassiopeia-color-primary: #00478c;
  --cassiopeia-color-link: #00478c;
  --cassiopeia-color-hover: #82A100;

  --webcolf-blue: #00478c;
  --webcolf-blue-dark: #00386f;
  --webcolf-blue-light: #eaf2fb;

  --webcolf-green: #82A100;
  --webcolf-green-dark: #627a00;
  --webcolf-green-light: #f2f7dc;

  --webcolf-header: #EEEEEE;
}


/* ---------------------------------------------------------
   Header principale
   --------------------------------------------------------- */

.container-header {
  background-color: #EEEEEE;
  background-image: none;
  color: #00478c;
  min-height: 80px;
}


/* Contenitori interni dell'header */

.container-header .grid-child,
.container-header .container-nav {
  min-height: 80px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}


/* Se Cassiopeia usa una zona separata per logo/brand */

.container-header .container-brand {
  padding-top: 0;
  padding-bottom: 0;
}


/* ---------------------------------------------------------
   Logo / nome sito
   --------------------------------------------------------- */

.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .brand-logo,
.container-header .brand-logo a,
.container-header .site-description {
  color: #00478c;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  line-height: 1.1;
}


/* Logo immagine più piccolo */

.container-header .navbar-brand img,
.container-header .brand-logo img {
  max-height: 46px;
  width: auto;
}


/* Descrizione sito, se presente sotto al logo */

.container-header .site-description {
  font-size: 0.9rem;
  margin-top: 2px;
  color: #00478c;
}


/* ---------------------------------------------------------
   Menu principale
   --------------------------------------------------------- */

.container-header .mod-menu,
.container-header .metismenu.mod-menu {
  margin-top: 0;
  margin-bottom: 0;
  align-items: center;
}


/* Voci menu */

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  color: #00478c;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.2;
  font-weight: 500;
  text-decoration: none;
}


/* Hover menu */

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > span:hover,
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > button:hover {
  color: #82A100;
}


/* Voce menu attiva */

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li.current > span,
.container-header .metismenu > li.active > a,
.container-header .metismenu > li.current > a,
.container-header .metismenu > li.active > button,
.container-header .metismenu > li.current > button {
  color: #82A100;
}


/* ---------------------------------------------------------
   Dropdown menu
   --------------------------------------------------------- */

.container-header .metismenu.mod-menu .mm-collapse {
  background-color: #ffffff;
  border-top: 3px solid #82A100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}


/* Link dropdown */

.container-header .metismenu.mod-menu .mm-collapse a {
  color: #00478c;
  text-decoration: none;
}


/* Hover dropdown */

.container-header .metismenu.mod-menu .mm-collapse a:hover,
.container-header .metismenu.mod-menu .mm-collapse a:focus {
  color: #82A100;
  background-color: #f2f7dc;
}


/* ---------------------------------------------------------
   Pulsante menu mobile
   --------------------------------------------------------- */

.container-header .navbar-toggler {
  border-color: #00478c;
  color: #00478c;
  padding: 6px 10px;
}


/* Icona hamburger blu */

.container-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 71, 140, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ---------------------------------------------------------
   Link generali del sito
   --------------------------------------------------------- */

a {
  color: #00478c;
}

a:hover,
a:focus {
  color: #82A100;
}


/* ---------------------------------------------------------
   Pulsanti principali
   --------------------------------------------------------- */

.btn-primary {
  background-color: #00478c;
  border-color: #00478c;
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #00386f;
  border-color: #00386f;
  color: #ffffff;
}


/* Pulsanti verdi opzionali */

.btn-success,
.btn.webcolf-green {
  background-color: #82A100;
  border-color: #82A100;
  color: #ffffff;
}

.btn-success:hover,
.btn-success:focus,
.btn.webcolf-green:hover,
.btn.webcolf-green:focus {
  background-color: #627a00;
  border-color: #627a00;
  color: #ffffff;
}


/* ---------------------------------------------------------
   Titoli
   --------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  color: #00478c;
}


/* Riga verde sotto il titolo pagina */

.page-header h1,
.com-content-article h1 {
  border-bottom: 3px solid #82A100;
  padding-bottom: 0.35rem;
}


/* ---------------------------------------------------------
   Card / moduli
   --------------------------------------------------------- */

.card {
  border-color: #d7e2ee;
}

.card-header {
  background-color: #eaf2fb;
  color: #00478c;
  border-bottom: 2px solid #82A100;
}


/* Moduli laterali */

.sidebar-left .card,
.sidebar-right .card {
  border-top: 4px solid #82A100;
}


/* ---------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------- */

.breadcrumb {
  background-color: #eaf2fb;
}

.breadcrumb a {
  color: #00478c;
}

.breadcrumb a:hover {
  color: #82A100;
}


/* ---------------------------------------------------------
   Tabelle
   --------------------------------------------------------- */

.table thead th {
  background-color: #00478c;
  color: #ffffff;
}

.table-hover tbody tr:hover {
  background-color: #f2f7dc;
}


/* ---------------------------------------------------------
   Form
   --------------------------------------------------------- */

.form-control:focus,
.form-select:focus {
  border-color: #82A100;
  box-shadow: 0 0 0 0.2rem rgba(130, 161, 0, 0.25);
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.footer {
  background-color: #00478c;
  background-image: none;
  color: #ffffff;
}

.footer a {
  color: #ffffff;
}

.footer a:hover,
.footer a:focus {
  color: #82A100;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767.98px) {
  .container-header {
    min-height: 72px;
  }

  .container-header .grid-child,
  .container-header .container-nav {
    min-height: 72px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .container-header .navbar-brand img,
  .container-header .brand-logo img {
    max-height: 38px;
    width: auto;
  }

  .container-header .navbar-brand,
  .container-header .brand-logo {
    font-size: 1rem;
  }

  .container-header .site-description {
    font-size: 0.8rem;
  }

  .container-header .mod-menu,
  .container-header .metismenu.mod-menu {
    background-color: #EEEEEE;
  }

  .container-header .mod-menu > li,
  .container-header .metismenu.mod-menu > li {
    border-bottom: 1px solid #d6d6d6;
  }

  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .metismenu > li > a,
  .container-header .metismenu > li > button {
    color: #00478c;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .container-header .mod-menu > li > a:hover,
  .container-header .mod-menu > li.active > a,
  .container-header .mod-menu > li.current > a,
  .container-header .metismenu > li > a:hover,
  .container-header .metismenu > li.active > a,
  .container-header .metismenu > li.current > a {
    color: #82A100;
  }

  h1 {
    font-size: 1.65rem;
  }

  h2 {
    font-size: 1.35rem;
  }

  .btn {
    min-height: 42px;
  }
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991.98px) {
  .container-header {
    min-height: 76px;
  }

  .container-header .grid-child,
  .container-header .container-nav {
    min-height: 76px;
  }

  .container-header .navbar-brand img,
  .container-header .brand-logo img {
    max-height: 42px;
    width: auto;
  }
}