@import url("/++theme++barceloneta/css/barceloneta.min.css");

/* ==========================================================
   Tema Grazzano Visconti
   Base: Barceloneta (importata sopra, mai modificata)
   Palette Verde / Pietra / Ottone - derivata da #016333
   ========================================================== */

:root {
  --gz-verde-50:  #F0F9F5;
  --gz-verde-100: #DEF2E8;
  --gz-verde-200: #C0E3D1;
  --gz-verde-300: #8DC4A9;
  --gz-verde-400: #3EA371;
  --gz-verde-500: #188B53;
  --gz-verde-600: #05763E;
  --gz-verde-700: #016333;
  --gz-verde-800: #024A27;
  --gz-verde-900: #01331B;

  --gz-pietra-50:  #FAF8F5;
  --gz-pietra-100: #F1EFE9;
  --gz-pietra-200: #E2DED5;
  --gz-pietra-300: #C5C0B5;
  --gz-pietra-400: #979082;
  --gz-pietra-500: #6E695E;
  --gz-pietra-700: #464239;
  --gz-pietra-900: #28251F;

  --gz-ottone-300: #DCB86A;
  --gz-ottone-500: #B58B30;
  --gz-ottone-700: #84641F;

  --gz-verde-hover: #057F44;

  --gz-rosso-500: #B2242B;
  --gz-rosso-700: #8B181E;
}

/* --- 1. colore primario e testo --- */
:root {
  --bs-primary: #016333;
  --bs-primary-rgb: 1, 99, 51;
  --bs-body-color: #464239;
  --bs-link-color: #016333;
  --bs-link-hover-color: #05763E;
  --bs-link-color-rgb: 1, 99, 51;
  --bs-link-hover-color-rgb: 5, 118, 62;
  --bs-border-color: #E2DED5;
}
a { color: var(--gz-verde-700); }
a:hover, a:focus { color: var(--gz-verde-600); }

.btn-primary {
  --bs-btn-bg: #016333;
  --bs-btn-border-color: #016333;
  --bs-btn-hover-bg: #05763E;
  --bs-btn-hover-border-color: #05763E;
  --bs-btn-active-bg: #024A27;
  --bs-btn-active-border-color: #024A27;
  --bs-btn-disabled-bg: #8DC4A9;
  --bs-btn-disabled-border-color: #8DC4A9;
}
.btn-outline-primary {
  --bs-btn-color: #016333;
  --bs-btn-border-color: #016333;
  --bs-btn-hover-bg: #016333;
  --bs-btn-hover-border-color: #016333;
  --bs-btn-active-bg: #024A27;
  --bs-btn-disabled-color: #016333;
}
.pagination {
  --bs-pagination-color: #016333;
  --bs-pagination-hover-color: #05763E;
  --bs-pagination-hover-bg: #F0F9F5;
  --bs-pagination-active-bg: #016333;
  --bs-pagination-active-border-color: #016333;
}
.nav-pills { --bs-nav-pills-link-active-bg: #016333; }
.dropdown-menu { --bs-dropdown-link-active-bg: #016333; }
.form-check-input:checked { background-color: #016333; border-color: #016333; }
.form-range::-webkit-slider-thumb { background-color: #016333; }
.form-range::-moz-range-thumb { background-color: #016333; }

/* --- 2. barra di navigazione --- */
.navbar-barceloneta {
  --bs-navbar-background: var(--gz-verde-700);
  --bs-navbar-hover-background: var(--gz-verde-hover);
  --bs-navbar-active-background: var(--gz-ottone-300);
}
#portal-globalnav-wrapper { background-color: var(--gz-verde-700); }

/* --- 3. desktop: pannelli color pietra --- */
@media (min-width: 992px) {
  #portal-globalnav > li.inPath > a,
  #portal-globalnav > li.current > a,
  #portal-globalnav > li.active > a,
  #portal-globalnav > li.selected > a {
    background-color: var(--gz-ottone-300);
    color: var(--gz-verde-900);
  }
  #portal-globalnav > li.inPath > label:after,
  #portal-globalnav > li.current > label:after,
  #portal-globalnav > li.active > label:after,
  #portal-globalnav > li.selected > label:after {
    color: var(--gz-verde-900);
  }
  #portal-globalnav ul.dropdown {
    border: 1px solid var(--gz-pietra-200);
    border-top: 3px solid var(--gz-ottone-500);
    box-shadow: 0 12px 28px rgba(40, 37, 31, 0.22);
  }
  #portal-globalnav ul.dropdown li {
    background-color: var(--gz-pietra-50);
    color: var(--gz-pietra-900);
  }
  #portal-globalnav ul.dropdown li > a { color: var(--gz-pietra-900); }
  #portal-globalnav ul.dropdown li > a:hover,
  #portal-globalnav ul.dropdown li > a:focus {
    background-color: var(--gz-pietra-100);
    color: var(--gz-verde-800);
    box-shadow: inset 3px 0 0 var(--gz-ottone-500);
  }
  #portal-globalnav ul.dropdown li.current > a,
  #portal-globalnav ul.dropdown li.inPath > a,
  #portal-globalnav ul.dropdown li.active > a,
  #portal-globalnav ul.dropdown li.selected > a {
    background-color: var(--gz-pietra-50);
    color: var(--gz-rosso-700);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--gz-rosso-700);
  }
  #portal-globalnav ul.dropdown li label:after {
    color: var(--gz-verde-700);
    background: transparent;
  }
}

/* --- 4. mobile: pannello a scomparsa color pietra --- */
@media (max-width: 991.98px) {
  #offcanvasNavbar {
    --bs-offcanvas-bg: var(--gz-pietra-50);
    background-color: var(--gz-pietra-50);
  }
  #offcanvasNavbar .offcanvas-header { background-color: var(--gz-verde-700); }
  #offcanvasNavbar .navbar-nav li {
    background-color: var(--gz-pietra-50);
    color: var(--gz-pietra-900);
  }
  #offcanvasNavbar .navbar-nav li > a { color: var(--gz-pietra-900); }
  #offcanvasNavbar .navbar-nav li > a:hover,
  #offcanvasNavbar .navbar-nav li > a:focus {
    background-color: var(--gz-pietra-100);
    color: var(--gz-verde-800);
  }
  #offcanvasNavbar .navbar-nav li.current > a,
  #offcanvasNavbar .navbar-nav li.inPath > a,
  #offcanvasNavbar .navbar-nav li.active > a,
  #offcanvasNavbar .navbar-nav li.selected > a {
    background-color: var(--gz-pietra-100);
    color: var(--gz-rosso-700);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--gz-rosso-700);
  }
  #offcanvasNavbar .offcanvas-body {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
  }
  #offcanvasNavbar #portal-searchbox {
    order: -1;
    margin-bottom: 1.25rem;
  }
  #offcanvasNavbar .navbar-nav { margin-bottom: 0; }
  #offcanvasNavbar .searchButton.btn-outline-light {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--gz-verde-700);
    --bs-btn-border-color: var(--gz-verde-700);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--gz-verde-hover);
    --bs-btn-hover-border-color: var(--gz-verde-hover);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--gz-verde-800);
    --bs-btn-active-border-color: var(--gz-verde-800);
  }
  #offcanvasNavbar ul.dropdown { border: 0; box-shadow: none; }
  #offcanvasNavbar li label:after {
    color: var(--gz-verde-700);
    background-color: var(--gz-pietra-100);
  }
}

/* --- 5. pie di pagina --- */
#portal-footer-wrapper {
  background-color: var(--gz-verde-900);
  color: var(--gz-verde-200);
}
#portal-footer-wrapper a { color: #fff; }
#portal-footer-wrapper a:hover { color: var(--gz-ottone-300); }

/* --- 6. tocchi di ottone --- */
.documentByLine { color: var(--gz-pietra-500); }
blockquote { border-left: 4px solid var(--gz-ottone-500); }

/* --- 7. pulsante hamburger: verde con trattini bianchi --- */
.navbar-toggler {
  background-color: var(--gz-verde-700);
  border-color: var(--gz-verde-700);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler.border-secondary { border-color: var(--gz-verde-700) !important; }
.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: var(--gz-verde-hover);
  border-color: var(--gz-verde-hover) !important;
}
.navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(1, 99, 51, 0.25); }

/* ==========================================================
   8. Restyling generale contenuti (22/08/2026)
   Titoli serif verdi, breadcrumb, alert, portlet, tabelle
   ========================================================== */

:root {
  --gz-serif: Georgia, "Times New Roman", Times, serif;
  --gz-ottone-50:  #FAF4E3;
  --gz-ottone-200: #EAD9A9;
  --gz-ottone-900: #5A4412;
  --gz-rosso-50:  #FAECED;
  --gz-rosso-200: #EFC5C7;
  --bs-link-hover-color: #B58B30;
  --bs-link-hover-color-rgb: 181, 139, 48;
}

/* --- 8.1 titoli in serif verde, barretta ottone sotto H1 --- */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--gz-serif);
  color: var(--gz-verde-700);
}
h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--gz-serif);
  color: var(--gz-verde-800);
}
h1.documentFirstHeading::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background-color: var(--gz-ottone-500);
  margin-top: 0.6rem;
}
.documentDescription {
  font-family: var(--gz-serif);
  font-style: italic;
  color: var(--gz-pietra-500);
}
#portal-footer-wrapper h1, #portal-footer-wrapper h2,
#portal-footer-wrapper h3, #portal-footer-wrapper h4,
#portal-footer-wrapper h5, #portal-footer-wrapper h6 {
  color: #FFFFFF;
}

/* --- 8.2 link: hover in ottone --- */
a:hover, a:focus { color: var(--gz-ottone-500); }

/* --- 8.3 breadcrumb: tinta verde, separatore ottone --- */
#portal-breadcrumbs {
  background-color: var(--gz-verde-50);
  border-bottom: 1px solid var(--gz-verde-100);
}
#portal-breadcrumbs .breadcrumb {
  --bs-breadcrumb-divider: "\203A";
  --bs-breadcrumb-divider-color: var(--gz-ottone-500);
}
#portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: var(--gz-ottone-500);
}

/* --- 8.4 alert in palette (via l'azzurro Bootstrap) --- */
.alert-info {
  color: var(--gz-verde-900);
  background-color: var(--gz-verde-50);
  border-color: var(--gz-verde-200);
  border-left: 4px solid var(--gz-verde-700);
}
.alert-success {
  color: var(--gz-verde-900);
  background-color: var(--gz-verde-100);
  border-color: var(--gz-verde-300);
  border-left: 4px solid var(--gz-verde-600);
}
.alert-warning {
  color: var(--gz-ottone-900);
  background-color: var(--gz-ottone-50);
  border-color: var(--gz-ottone-200);
  border-left: 4px solid var(--gz-ottone-500);
}
.alert-danger {
  color: var(--gz-rosso-700);
  background-color: var(--gz-rosso-50);
  border-color: var(--gz-rosso-200);
  border-left: 4px solid var(--gz-rosso-500);
}

/* --- 8.5 portlet: testata verde piena, titolo serif --- */
.portlet {
  border: 1px solid var(--gz-pietra-200);
}
.portlet .portletHeader,
.portlet > .card-header {
  background-color: var(--gz-verde-700);
  color: #FFFFFF;
  font-family: var(--gz-serif);
  letter-spacing: 0.02em;
  border-bottom: 0;
}
.portlet .portletHeader a,
.portlet > .card-header a { color: #FFFFFF; }
.portlet .portletHeader a:hover,
.portlet .portletHeader a:focus,
.portlet > .card-header a:hover,
.portlet > .card-header a:focus { color: var(--gz-ottone-300); }

/* --- 8.6 bottone Cerca (desktop): ottone --- */
#portal-searchbox .searchButton {
  color: #FFFFFF;
  background-color: var(--gz-ottone-500);
  border-color: var(--gz-ottone-500);
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--gz-ottone-500);
  --bs-btn-border-color: var(--gz-ottone-500);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--gz-ottone-700);
  --bs-btn-hover-border-color: var(--gz-ottone-700);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--gz-ottone-700);
  --bs-btn-active-border-color: var(--gz-ottone-700);
}

/* --- 8.7 tabelle: testata verde, righe alternate --- */
#content .table thead th,
#content table.listing thead th {
  background-color: var(--gz-verde-700);
  color: #FFFFFF;
  border-color: var(--gz-verde-800);
}
#content .table tbody tr:nth-child(even) > *,
#content table.listing tbody tr:nth-child(even) > * {
  background-color: var(--gz-verde-50);
}

/* --- 8.8 blockquote: corsivo serif su fondo pietra --- */
blockquote {
  background-color: var(--gz-pietra-50);
  padding: 0.75rem 1.25rem;
  font-family: var(--gz-serif);
  font-style: italic;
  color: var(--gz-pietra-700);
}

/* --- 8.9 hr decorativo con diamante ottone --- */
#content hr {
  border: 0;
  height: 1px;
  background-color: var(--gz-pietra-200);
  overflow: visible;
  position: relative;
  opacity: 1;
  margin: 2rem 0;
}
#content hr::after {
  content: "\25C6";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--gz-ottone-500);
  background-color: #FFFFFF;
  padding: 0 0.75rem;
  font-size: 0.7rem;
  line-height: 1;
}

/* --- 8.3-bis breadcrumb compatto: il border-bottom del nav blocca
       il collasso del margine dell'ol (2rem), che va azzerato.
       Lo stacco esterno resta: Barceloneta da' gia' mb 2rem al nav --- */
#portal-breadcrumbs .breadcrumb { margin-bottom: 0; }

/* --- 8.4-bis alert: specificita' doppia per vincere sui bundle --- */
.alert.alert-info {
  color: var(--gz-verde-900);
  background-color: var(--gz-verde-50);
  border: 1px solid var(--gz-verde-200);
  border-left: 4px solid var(--gz-verde-700);
}
.alert.alert-success {
  color: var(--gz-verde-900);
  background-color: var(--gz-verde-100);
  border: 1px solid var(--gz-verde-300);
  border-left: 4px solid var(--gz-verde-600);
}
.alert.alert-warning {
  color: var(--gz-ottone-900);
  background-color: var(--gz-ottone-50);
  border: 1px solid var(--gz-ottone-200);
  border-left: 4px solid var(--gz-ottone-500);
}
.alert.alert-danger {
  color: var(--gz-rosso-700);
  background-color: var(--gz-rosso-50);
  border: 1px solid var(--gz-rosso-200);
  border-left: 4px solid var(--gz-rosso-500);
}