/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
*{
  box-sizing: border-box;
}

/* Add your custom styles here */
#categorie-carousel,
#continenti-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: auto;
}
#categorie-carousel .carousel-track,
#continenti-carousel .carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease;
}
#categorie-carousel .categoria-tab,
#continenti-carousel .continente-tab {
  flex: 0 0 31%; /* 3 items per view default */
  box-sizing: border-box;
  padding: 1rem;
  text-align: center;
  background: #f9f9f9;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  padding-bottom: 20px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  z-index: 0; /* imposta base */
}
#categorie-carousel .categoria-tab::before,
#continenti-carousel .continente-tab::before {
  content: '';
  position: absolute;
  inset: 0; /* top, right, bottom, left: 0 */
  background: rgba(0, 0, 0, 0.2); /* patina scura semi-trasparente */
  z-index: 1; /* sopra il bottone ma sotto lo span */
  pointer-events: none; /* lascia cliccabile il bottone */
}
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper:hover,
#categorie-carousel .categoria-tab:hover,
#continenti-carousel .continente-tab:hover,
.content-Paesi-box .paesi-list .paese-item a:hover,
#continenti-carousel .continente-tab.active,
#categorie-carousel .categoria-tab.active{
  border: 10px solid #E60060!important;
}
.content-articoli-box #articoli-container .articoli-list .articolo-item.articolo-extra span,
#categorie-carousel .categoria-tab span,
#continenti-carousel .continente-tab span{
  font-size: xx-large;
  text-transform: uppercase;
  font-weight: 600;
  color: white;
  position: relative;
  z-index: 2;
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
}
#categorie-carousel .carousel-buttons,
#continenti-carousel .carousel-buttons {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
#categorie-carousel .carousel-buttons button,
#continenti-carousel .carousel-buttons button {
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  cursor: pointer;
}

/*contenitore Paesi*/
.content-articoli-box,
.content-Paesi-box{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 2rem;
  width: 100%;
  padding-top: 2rem;
  border-top: 2px solid #f9f9f9;
}
.content-articoli-box #articoli-titolo,
.content-Paesi-box #mostra-se-ce {
  display: none;
  font-size: 30px;
  font-weight: 600;
  color: #E60060;
  margin: 0;
  text-transform: uppercase;
}
.content-articoli-box #articoli-container .articoli-list,
.content-Paesi-box .paesi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.content-articoli-box #articoli-container .articoli-list .articolo-item.articolo-extra,
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper,
.content-Paesi-box .paesi-list .paese-item {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 0;
  height: 300px;
  width: 31%;
  box-sizing: border-box;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.content-Paesi-box .paesi-list .paese-item a {
  display: flex;
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  align-items: end;
  padding-bottom: 20px;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 20px;
}
#categorie-carousel .categoria-tab .continente-img,
#continenti-carousel .continente-tab img,
.content-Paesi-box .paesi-list .paese-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 10px;
}

/* Patina sopra immagine */
.content-Paesi-box .paesi-list .paese-item a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
  pointer-events: none;
  border-radius: 10px;
}

/* Testo sopra tutto */
.content-Paesi-box .paesi-list .paese-item h3 {
  position: relative;
  text-align: center;
  padding: 0;
  margin: 0;
  font-size: xx-large;
  text-transform: uppercase;
  font-weight: 800;
  color: white;
  position: relative;
  z-index: 2;
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;  
}


/*card articoli*/
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  padding: 20px;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border: 2px solid #ccc;
  position: relative;
}


/*card contenuto*/
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper .tag-item{
  width: 80px;
  height: 80px;
  border-radius: 50px;
  margin-bottom: 15px;
}
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper .tag-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper .tag-title {
  font-family: var(--e-global-typography-primary-font-family);
  font-size: medium;
  text-transform: uppercase;
  font-weight: 600;
  color: #E60060;
}
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper .tag-title:hover{
  color: #E60060;
}
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper h3{
  font-size: larger;
  color: black;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  text-align: center;
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
}

/*area condivisa*/
.share-buttons-box {
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    width: 100%;
    position: relative;
}
.share-buttons-box span{
  font-size: larger;
  color: #E60060;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
}
.share-buttons-box svg {
    width: 32px;
    cursor: pointer;
    height: 32px;
}
.share-buttons-box button{
    border: 0;
    padding: 0;
}
.share-buttons-box button:focus,
.share-buttons-box button:hover{
  background: transparent;
}
.share-buttons-box .copy-toast {
  position: absolute;
  top: 20px;
  right: -20px;
  background: #4caf50;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 9999;
  font-size: small;
  text-transform: uppercase;
  opacity: 0;
  font-weight: 500;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;  
}

.share-buttons-box .copy-toast.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/*scheda finale*/
.content-articoli-box #articoli-container .articoli-list .articolo-item.articolo-extra,
#categorie-carousel .categoria-tab.extra-tab{
  background-color: #E60060;
  justify-content: center;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.content-articoli-box #articoli-container .articoli-list .articolo-item.articolo-extra.articolo-extra::before,
#categorie-carousel .categoria-tab.extra-tab::before{
  background: unset
}
.content-articoli-box #articoli-container .articoli-list .articolo-item.articolo-extra.articolo-extra:hover,
#categorie-carousel .categoria-tab.extra-tab:hover{
  border: unset;
}
.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper,
.content-articoli-box #articoli-container .articoli-list .articolo-item.articolo-extra{
  height: 400px;
}

.content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper .link-visualizza{
  padding: 10px 0;
  width: 100%;
  display: flex;
  border-radius: 20px;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: large;
  font-weight: 600;
  text-transform: uppercase;
  color: white;
  background-color: #E60060;
  font-family: var(--e-global-typography-secondary-font-family), Sans-serif;  
}


@media (max-width: 768px) {
  .content-Paesi-box .paesi-list .paese-item,
  .content-articoli-box #articoli-container .articoli-list .articolo-item.articolo-extra, #categorie-carousel .categoria-tab.extra-tab,
  .paese-item, .categoria-tab {
      width: 100%!important;
      height: 180px;
  }
  .content-articoli-box #articoli-container .articoli-list .articolo-item-wrapper{
    width: 100%;
  }
  #categorie-carousel .carousel-track,
  #continenti-carousel .carousel-track {
      gap: 20px;
  }
  #categorie-carousel .categoria-tab,
  #continenti-carousel .continente-tab {
    flex: 0 0 50%; /* 2 items per view on tablets */
    height: 180px;
  }
}

@media (max-width: 480px) {
  #categorie-carousel .categoria-tab,
  #continenti-carousel .continente-tab {
    flex: 0 0 100%; /* 1 item per view on mobile */
  }
}