/*!
Theme Name: Design Scuole Italia
Author: Dipartimento per la trasformazione digitale - Presidenza del Consiglio dei Ministri
Description: Design Scuole Italia è il tema di WordPress per i siti delle Scuole Italiane. Rispetta le linee guida di design dell’Agenzia per l’Italia digitale rilasciare dal Team per la Trasformazione Digitale. Utilizza Bootstrap Italia. Basato sul precedente lavoro di Marco Buttarini.
Version: 2.5.1
License: AGPL 3.0 or later
Text Domain: design_scuole_italia
*/

/** immagini e allineamenti wp **/
/* =WordPress Core
-------------------------------------------------------------- */
/*

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
...
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
...
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
...
}

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
...
}

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) {
...
}

 */

.pulsanti-group {
  opacity: 1;
  visibility: visible !important;
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}

.pulsanti-group a:hover {
  text-decoration: none;
}

.pulsanti-group > div {
  flex-wrap: wrap;
  gap: 5px;
  filter: drop-shadow(2px 4px 25px black);
}

.beautiful-button {
  display: inline-block;
  flex: 1 1 0;
  min-width: max-content;
  margin-top: 2px;
  background-color: #cc334a;
  color: #ffffff;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5em 0.5em;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.2em;
  transition: background-color 0.3s ease;
}

.beautiful-button:hover,
.beautiful-button:focus {
  background-color: #ad0000;
  color: #ddd;
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

.beautiful-button i {
  margin-right: 8px; /* This adds some space between the icon and the text */
}

.beautiful-button:hover {
  transform: scale(1.03);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

.beautiful-button {
  transition: transform 0.3s ease;
}

/* Bootstrap 4 Carousel */
.title-section .h2 {
  color: rgb(75, 0, 130);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  margin-top: 0;
  text-align: center;
}

.carousel-item {
  padding-bottom: 10px !important;
  padding-top: 10px !important;
  width: 95% !important;
}

.carousel-indicators {
  bottom: -40px !important;
}

.carousel-indicators li {
  background-color: #5f6e82 !important;
}

.card-thumb-rounded {
  left: 10px !important;
}

/* Utility classes */
.bg-menu-bluelectric {
  background-color: var(--menu-bluelectric);
}

.bg-menu-bluelectric:hover,
.bg-menu-bluelectric:focus {
  background-color: var(--menu-bluelectric-hover);
}

.bg-menu-redbrown {
  background-color: var(--menu-redbrown);
}

.bg-menu-redbrown:hover,
.bg-menu-redbrown:focus {
  background-color: var(--menu-redbrown-hover);
}

.bg-menu-purplelight {
  background-color: var(--menu-purplelight);
}

.bg-menu-purplelight:hover,
.bg-menu-purplelight:focus {
  background-color: var(--menu-purplelight-hover);
}

.bg-menu-greendark {
  background-color: var(--menu-greendark);
}

.bg-menu-greendark:hover,
.bg-menu-greendark:focus {
  background-color: var(--menu-greendark-hover);
}

.bg-menu-yellow {
  background-color: var(--menu-yellow);
  color: var(--black);
}

.bg-menu-yellow:hover,
.bg-menu-yellow:focus {
  background-color: var(--menu-yellow-hover);
  color: var(--black);
}

li.flag-it a {
  background-image: url(/wp-content/uploads/assets/images/logos/flag-it-jpg.webp);
  background-repeat: no-repeat;
  background-size: 9%;
  background-position: left;
  padding-left: 24px !important;
  font-weight: 400;
}

.pubbl {
  margin-right: 16px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .absolute-orizontal-position {
    position: absolute !important;
    left: 30% !important;
    transform: translateX(-30%) !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .absolute-orizontal-position {
    position: absolute !important;
    left: 30% !important;
    transform: translateX(-30%) !important;
  }
}

@media (min-width: 1200px) {
  .absolute-orizontal-position {
    position: absolute !important;
    left: 30% !important;
    transform: translateX(-30%) !important;
  }
}

/* Animation styles */
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}
@keyframes fadeIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
  }
  80% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Grid container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
  justify-items: center;
  align-items: center;
}

/* Grid items */
.grid-item {
  text-align: center;
}

.grid-item img {
  max-width: 100%;
  height: auto;
}

.section-footer:before {
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #fff;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  opacity: 0.27;
}
.section.section-footer {
  position: relative;
  margin: 20px 0 0 0;
  margin-right: -6px;
  margin-left: -6px;
  padding: 20px 0 0px 0;
}

/* Remove default list styling */
.footer-text ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* Style each list item */
.footer-text ul li {
  margin: 5px;
  padding: 0;
  text-align: center;
}

/* Optional: Add media query for smaller screens */
@media (max-width: 600px) {
  .footer-text ul {
    flex-direction: column;
  }
}

div.nsl-container.nsl-container-block .nsl-container-buttons {
  display: grid !important;
  grid-template-columns: minmax(145px, auto);
}

.nsl-container-buttons a {
  color: #000;
  background-color: #fff !important;
  border-color: #e6e6e6;

  padding: 12px 24px;
  font-size: 16px;
  white-space: initial;
  display: block;
  width: 100%;
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 1px 1px rgba(0, 0, 0, 0.075);
  font-weight: 600;
  text-align: center;
  background-color: transparent;
  border: 0 solid transparent;
  line-height: 1.5;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.nsl-container-buttons a:hover {
  color: #000;
  background-color: #ececec !important;
  border-color: #e6e6e6;
}


/* Stili Albo Pretorio */
#DatiAtto {
    font-size: 16px;
}


#DatiAtto svg {
	width: 2em !important;
	height: 2em !important;
}

#CybotCookiebotDialog, #CookiebotWidget, #CookiebotWidget * {
	font-family: "Titillium Web",Geneva,Tahoma,sans-serif !important;
}
/*
.tabalbo td {
    font-size: 1.2em !important;
}

div.Visalbo {
	font-size: 1.2em !important;
}

.tabalbo {
    margin-top: 1em !important;

}
*/

/*
#DatiAtto .alert-info {
    background-position: 10px 10px;align-content
}

*/