/* =====================================================
   FUOCONERO - CSS PULITO
   ===================================================== */


/* =====================================================
   SFONDO GENERALE
   ===================================================== */

body {
  background-color: #050000;
  background-image:
    linear-gradient(rgba(5,0,0,0.72), rgba(5,0,0,0.72)),
    url("https://fuoconero.com/wp-content/uploads/2026/07/ChatGPT-Image-2-lug-2026-21_32_40.png");
  background-repeat: no-repeat;
  background-position: center 180px;
  background-size: 1600px auto;
  background-attachment: fixed;
  color: #e8e8e8 !important;
}

body,
.site,
.site-content,
.entry-content,
.entry-content p,
.entry-content li {
  color: #e8e8e8 !important;
}

html,
body,
.site,
.site-header,
.site-content {
  overflow-x: hidden !important;
}


/* =====================================================
   HEADER
   ===================================================== */

.site-header {
  padding-top: 25px !important;
  padding-bottom: 25px !important;
}

.custom-header img,
.header-image img,
.site-header img,
.site-branding img {
  max-height: 320px !important;
  max-width: 980px !important;
  width: auto !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}


/* =====================================================
   MENU DESKTOP
   ===================================================== */

.main-navigation,
.site-navigation,
.nav-menu,
.menu-primary {
  background: rgba(8, 0, 0, 0.92) !important;
  border-top: 1px solid #6b120d;
  border-bottom: 1px solid #6b120d;
  max-width: 1120px;
  margin: 0 auto;
}

.main-navigation ul,
.site-navigation ul,
.nav-menu {
  display: flex;
  justify-content: center;
}

.main-navigation a,
.site-navigation a,
.nav-menu a {
  color: #f4e8dc !important;
  padding: 18px 24px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.main-navigation a:hover,
.site-navigation a:hover,
.nav-menu a:hover {
  background: rgba(120, 10, 10, 0.55) !important;
  color: #ffffff !important;
}

.search-toggle,
.search-submit {
  color: #f4e8dc !important;
  border-color: #6b120d !important;
}


/* =====================================================
   SOTTOMENU
   ===================================================== */

.main-navigation ul ul,
.site-navigation ul ul,
.nav-menu ul ul,
.main-navigation .sub-menu,
.main-navigation .children,
.primary-menu .sub-menu,
.primary-menu .children,
.menu .sub-menu,
.menu .children {
  background-color: #080000 !important;
  border: 1px solid #7a120d !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;
}

.main-navigation ul ul li,
.main-navigation .sub-menu li,
.main-navigation .children li,
.primary-menu .sub-menu li,
.primary-menu .children li,
.menu .sub-menu li,
.menu .children li {
  background-color: #080000 !important;
}

.main-navigation ul ul a,
.site-navigation ul ul a,
.nav-menu ul ul a,
.main-navigation .sub-menu a,
.main-navigation .children a,
.primary-menu .sub-menu a,
.primary-menu .children a,
.menu .sub-menu a,
.menu .children a {
  background-color: #080000 !important;
  color: #f4e8dc !important;
  padding: 14px 22px !important;
}

.main-navigation ul ul a:hover,
.site-navigation ul ul a:hover,
.nav-menu ul ul a:hover,
.main-navigation .sub-menu a:hover,
.main-navigation .children a:hover,
.primary-menu .sub-menu a:hover,
.primary-menu .children a:hover,
.menu .sub-menu a:hover,
.menu .children a:hover {
  background-color: #5a0907 !important;
  color: #ffffff !important;
}


/* =====================================================
   TITOLI, TESTI E LINK
   ===================================================== */

.entry-title,
.entry-title a,
.entry-header .entry-title,
.entry-header .entry-title a,
.site-main .entry-title,
.site-main .entry-title a,
.featured-content .entry-title,
.featured-content .entry-title a,
.featured-post .entry-title,
.featured-post .entry-title a,
.post .entry-title,
.post .entry-title a {
  color: #e8dfcf !important;
  text-shadow: 1px 1px 4px #000000 !important;
}

.entry-title a:hover,
.entry-header .entry-title a:hover,
.site-main .entry-title a:hover,
.featured-content .entry-title a:hover,
.featured-post .entry-title a:hover,
.post .entry-title a:hover {
  color: #d6b36a !important;
}

.entry-content,
.entry-summary,
.entry-meta,
.entry-meta a {
  color: #e8ded6 !important;
}

.entry-content a,
.entry-summary a,
.more-link {
  color: #ff2a1f !important;
  font-weight: 700;
}

.entry-content .wp-block-separator,
hr {
  border-color: #e8e8e8 !important;
  background-color: #e8e8e8 !important;
}


/* =====================================================
   SIDEBAR GENERALE
   ===================================================== */

.widget-area,
.sidebar,
#secondary {
  background: rgba(5, 0, 0, 0.72) !important;
  padding: 28px !important;
  border-left: 1px solid rgba(180, 25, 18, 0.55);
}

.widget {
  background: rgba(0, 0, 0, 0.42) !important;
  border: 1px solid rgba(150, 20, 15, 0.45);
  padding: 24px !important;
  margin-bottom: 28px !important;
}

.widget-title,
.widget h2,
.widget h3 {
  color: #f4e8dc !important;
  font-size: 1.35rem !important;
  text-shadow: 0 0 8px rgba(255, 40, 20, 0.45);
}

.widget,
.widget p,
.widget li {
  color: #d8c7bc !important;
}

.widget a {
  color: #ff2a1f !important;
  font-weight: 700;
}

.widget a:hover {
  color: #ffffff !important;
}


/* =====================================================
   HOME - TOGLIE SPAZIO MORTO E ARTICOLI AUTOMATICI
   ===================================================== */

/* Nasconde il contenuto automatico del blog in home */
body.home #primary,
body.home #secondary,
body.home .content-area,
body.home .site-main,
body.home .widget-area {
  display: none !important;
}

/* Toglie navigazione tipo "Articoli meno recenti" */
body.home .posts-navigation,
body.home .post-navigation,
body.home .paging-navigation,
body.home .navigation,
body.home .nav-links,
body.home .nav-previous,
body.home .nav-next,
body.home #infinite-handle,
body.home .infinite-loader {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Riduce i margini sotto il blocco articoli in evidenza */
body.home .featured-content,
body.home .featured-area,
body.home .featured-posts,
body.home .home-top-layout {
  margin-bottom: 24px !important;
}

/* Evita il buco prima dei riquadri inferiori */
body.home .site-content,
body.home #content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

/* Pulizia float */
.site-content::after,
#content::after,
.site-main::after {
  content: "";
  display: block;
  clear: both;
}


/* =====================================================
   TILE DIARIO
   ===================================================== */

.diario-tile {
  max-width: 420px;
  margin: 35px auto 20px auto;
}

.diario-tile a {
  display: block;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid #7a0c0c;
  padding: 22px;
  color: #ffffff !important;
  text-align: left;
  transition: all 0.25s ease;
}

.diario-tile a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(140, 20, 20, 0.35);
  border-color: #b22222;
}

.diario-tile h3 {
  margin: 0 0 10px 0;
  font-size: 24px;
  color: #ffb347;
}

.diario-tile p {
  margin: 0 0 12px 0;
  line-height: 1.5;
  color: #dddddd;
}

.diario-tile span {
  font-weight: bold;
  color: #d94b3d;
}


/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {
  clear: both !important;
  float: none !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2;
  margin-top: 0 !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media screen and (max-width: 768px) {

  .site-header {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .custom-header img,
  .header-image img,
  .site-header img,
  .site-branding img {
    max-width: 92vw !important;
    max-height: 220px !important;
  }

  .main-navigation,
  .main-navigation.toggled,
  #site-navigation,
  .site-navigation,
  .primary-navigation {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .main-navigation ul,
  .main-navigation .menu,
  .main-navigation .nav-menu,
  .main-navigation div > ul,
  #site-navigation ul,
  .site-navigation ul,
  .primary-navigation ul {
    width: calc(100vw - 42px) !important;
    max-width: 620px !important;
    margin: 14px auto !important;
    padding: 10px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: rgba(10, 0, 0, 0.88) !important;
    border: 1px solid rgba(160, 20, 20, 0.85) !important;
    box-shadow: 0 0 22px rgba(120, 0, 0, 0.35) !important;
    position: static !important;
    transform: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .main-navigation li,
  #site-navigation li,
  .site-navigation li,
  .primary-navigation li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    text-align: center !important;
  }

  .main-navigation a,
  #site-navigation a,
  .site-navigation a,
  .primary-navigation a {
    display: block !important;
    width: 100% !important;
    padding: 15px 52px 15px 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 18px !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
    color: #f4ede5 !important;
    text-shadow: 0 0 8px rgba(0,0,0,0.8) !important;
  }

  .main-navigation a:hover,
  .main-navigation a:focus,
  #site-navigation a:hover,
  #site-navigation a:focus {
    background: rgba(120, 0, 0, 0.32) !important;
    color: #ffffff !important;
  }

  .main-navigation ul ul,
  .main-navigation .sub-menu,
  .main-navigation .children,
  #site-navigation ul ul,
  .site-navigation ul ul,
  .primary-navigation ul ul {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .main-navigation ul ul a,
  .main-navigation .sub-menu a,
  .main-navigation .children a,
  #site-navigation ul ul a {
    font-size: 16px !important;
    letter-spacing: 0.7px !important;
    padding: 13px 46px 13px 28px !important;
    color: #e9ded4 !important;
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid rgba(255,255,255,0.13) !important;
  }

  .dropdown-toggle,
  .menu-item-has-children > button,
  .page_item_has_children > button {
    position: absolute !important;
    right: 8px !important;
    top: 0 !important;
    width: 44px !important;
    height: 52px !important;
    border: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    color: #9b0000 !important;
    border-radius: 50% !important;
    transform: scale(0.78) !important;
    z-index: 20 !important;
  }
}
/* =====================================================
   FIX HOME/BLOG - NASCONDE ARTICOLI AUTOMATICI SOTTO
   ===================================================== */

/* Nasconde gli articoli automatici sotto la griglia */
body.blog .site-main > article,
body.blog .site-main > .hentry,
body.blog .site-main .post,
body.home .site-main > article,
body.home .site-main > .hentry,
body.home .site-main .post {
    display: none !important;
}

/* Nasconde navigazione "Articoli meno recenti" */
body.blog .posts-navigation,
body.blog .post-navigation,
body.blog .paging-navigation,
body.blog .navigation,
body.blog .nav-links,
body.blog .nav-previous,
body.blog .nav-next,
body.home .posts-navigation,
body.home .post-navigation,
body.home .paging-navigation,
body.home .navigation,
body.home .nav-links,
body.home .nav-previous,
body.home .nav-next {
    display: none !important;
}

/* Riduce lo spazio morto sotto la griglia */
body.blog .site-main,
body.home .site-main {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* Avvicina i riquadri sotto */
body.blog .site-content,
body.home .site-content,
body.blog #content,
body.home #content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* =====================================================
   TOGLIE DEFINITIVAMENTE "ARTICOLI MENO RECENTI"
   dentro l'area contenuto, senza toccare il menu
   ===================================================== */

#content .posts-navigation,
#content .post-navigation,
#content .paging-navigation,
#content .navigation,
#content .nav-links,
#content .nav-previous,
#content .nav-next,
#content #infinite-handle,
#content .infinite-loader,
.site-content .posts-navigation,
.site-content .post-navigation,
.site-content .paging-navigation,
.site-content .navigation,
.site-content .nav-links,
.site-content .nav-previous,
.site-content .nav-next,
.site-content #infinite-handle,
.site-content .infinite-loader {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
/* Riduce il blocco vuoto tra griglia articoli e tile sotto */
#content,
.site-content,
.content-area,
.site-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* =====================================================
   FIX MENU SOPRA I TILE
   ===================================================== */

/* Tiene header e menu sopra tutto */
.site-header,
#masthead,
.main-navigation,
#site-navigation,
.site-navigation,
.primary-navigation {
    position: relative !important;
    z-index: 99999 !important;
    overflow: visible !important;
}

/* Fa uscire correttamente i sottomenu */
.main-navigation ul,
#site-navigation ul,
.site-navigation ul,
.primary-navigation ul {
    overflow: visible !important;
}

/* Dropdown sopra i contenuti */
.main-navigation ul ul,
.main-navigation .sub-menu,
.main-navigation .children,
#site-navigation ul ul,
#site-navigation .sub-menu,
.site-navigation ul ul,
.primary-navigation ul ul {
    position: absolute !important;
    z-index: 100000 !important;
}

/* Abbassa i tile/articoli sotto */
.featured-content,
.featured-area,
.featured-posts,
.home-top-layout,
.site-content,
#content {
    position: relative !important;
    z-index: 1 !important;
}
/* =====================================================
   FOOTER TILE - 4 COLONNE RESPONSIVE
   ===================================================== */

.site-footer .widget-area,
.footer-widgets,
.footer-widget-area {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;

    display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: start !important;
}

/* Ogni tile/widget del footer */
.site-footer .widget,
.footer-widgets .widget,
.footer-widget-area .widget {
    width: auto !important;
    margin: 0 !important;
    min-height: 220px;
    box-sizing: border-box !important;
}

/* Tablet: 2 per riga */
@media screen and (max-width: 900px) {
    .site-footer .widget-area,
    .footer-widgets,
    .footer-widget-area {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Telefono: 1 per riga */
@media screen and (max-width: 600px) {
    .site-footer .widget-area,
    .footer-widgets,
    .footer-widget-area {
        grid-template-columns: 1fr !important;
        padding: 30px 18px !important;
    }
}
/* =====================================================
   HEADER FUOCONERO - LARGO E CINEMATOGRAFICO
   ===================================================== */

.site-header {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}

/* Immagine header più larga */
.custom-header img,
.header-image img,
.site-header img,
.site-branding img {
    width: 92vw !important;
    max-width: 1200px !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Su schermi molto grandi resta elegante */
@media screen and (min-width: 1400px) {
    .custom-header img,
    .header-image img,
    .site-header img,
    .site-branding img {
        max-width: 1250px !important;
    }
}

/* Mobile: non diventa gigante */
@media screen and (max-width: 768px) {
    .site-header {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    .custom-header img,
    .header-image img,
    .site-header img,
    .site-branding img {
        width: 94vw !important;
        max-width: 94vw !important;
        max-height: 190px !important;
    }
/* =====================================================
   GRIGLIA SOTTO HEADER - PIÙ COMPATTA
   ===================================================== */

.featured-content,
.featured-area,
.featured-posts,
.home-top-layout {
    max-width: 930px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Riduce leggermente lo spazio interno tra i tile */
.featured-content,
.featured-posts,
.home-top-layout {
    gap: 18px !important;
}

/* Rende le immagini un po' più compatte senza deformarle */
.featured-content img,
.featured-area img,
.featured-posts img,
.home-top-layout img {
    object-fit: cover !important;
}

/* Tile principale meno enorme */
.featured-content .hentry:first-child,
.featured-posts .hentry:first-child,
.home-top-layout .hentry:first-child {
    max-height: 330px !important;
    overflow: hidden !important;
}

/* Tile laterali/sotto più contenuti */
.featured-content .hentry:not(:first-child),
.featured-posts .hentry:not(:first-child),
.home-top-layout .hentry:not(:first-child) {
    max-height: 190px !important;
    overflow: hidden !important;
}
	/* =====================================================
   MENU MOBILE A CERCHIO - FUOCONERO
   ===================================================== */

@media screen and (max-width: 768px) {

  /* contenitore menu mobile */
  .main-navigation,
  #site-navigation,
  .site-navigation,
  .primary-navigation {
    background: transparent !important;
    border: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    padding: 10px 0 !important;
  }

  /* pulsante tondo del menu */
  .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    border-radius: 50% !important;
    border: 1px solid rgba(180, 25, 18, 0.95) !important;
    background: rgba(8, 0, 0, 0.94) !important;
    color: transparent !important;

    box-shadow: 0 0 18px rgba(150, 0, 0, 0.45) !important;
    position: relative !important;
    z-index: 100001 !important;
  }

  /* icona hamburger dentro il cerchio */
  .menu-toggle::before {
    content: "☰";
    color: #f4e8dc !important;
    font-size: 28px !important;
    line-height: 1 !important;
    text-shadow: 0 0 8px rgba(255, 40, 20, 0.55);
  }

  /* quando il menu è chiuso, nasconde le voci */
  .main-navigation:not(.toggled) ul,
  #site-navigation:not(.toggled) ul,
  .site-navigation:not(.toggled) ul,
  .primary-navigation:not(.toggled) ul {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* quando il menu è aperto */
  .main-navigation.toggled ul,
  #site-navigation.toggled ul,
  .site-navigation.toggled ul,
  .primary-navigation.toggled ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: calc(100vw - 42px) !important;
    max-width: 620px !important;

    margin: 14px auto 0 auto !important;
    padding: 10px 0 !important;

    background: rgba(10, 0, 0, 0.94) !important;
    border: 1px solid rgba(160, 20, 20, 0.85) !important;
    box-shadow: 0 0 22px rgba(120, 0, 0, 0.35) !important;

    position: relative !important;
    z-index: 100000 !important;
    box-sizing: border-box !important;
  }

  /* voci menu mobile */
  .main-navigation.toggled li,
  #site-navigation.toggled li,
  .site-navigation.toggled li,
  .primary-navigation.toggled li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    position: relative !important;
  }

  .main-navigation.toggled a,
  #site-navigation.toggled a,
  .site-navigation.toggled a,
  .primary-navigation.toggled a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    padding: 15px 52px 15px 20px !important;

    color: #f4ede5 !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 17px !important;
    letter-spacing: 1px !important;
    line-height: 1.25 !important;
    border-bottom: 1px solid rgba(255,255,255,0.16) !important;
  }

  .main-navigation.toggled a:hover,
  #site-navigation.toggled a:hover {
    background: rgba(120, 0, 0, 0.35) !important;
    color: #ffffff !important;
  }

  /* sottomenu: non sempre aperti, ma gestiti dal tema */
  .main-navigation.toggled ul ul,
  #site-navigation.toggled ul ul,
  .site-navigation.toggled ul ul,
  .primary-navigation.toggled ul ul {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.38) !important;
    border: 0 !important;
  }

  /* freccette sottomenù */
  .dropdown-toggle,
  .menu-item-has-children > button,
  .page_item_has_children > button {
    position: absolute !important;
    right: 8px !important;
    top: 0 !important;

    width: 44px !important;
    height: 52px !important;

    border: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    color: #9b0000 !important;
    border-radius: 50% !important;

    transform: scale(0.78) !important;
    z-index: 100002 !important;
  }
}
	/* =====================================================
   FIX DROPDOWN DESKTOP - MENU COMPATTO
   ===================================================== */

@media screen and (min-width: 769px) {

  .main-navigation ul ul,
  #site-navigation ul ul,
  .site-navigation ul ul,
  .primary-navigation ul ul,
  .nav-menu ul ul,
  .menu .sub-menu,
  .menu .children {
      display: block !important;

      width: 220px !important;
      min-width: 220px !important;
      max-width: 240px !important;

      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;

      padding: 8px 0 !important;
      margin: 0 !important;

      background: rgba(8, 0, 0, 0.97) !important;
      border: 1px solid #7a120d !important;
      box-shadow: 0 10px 30px rgba(0,0,0,0.85) !important;

      overflow: visible !important;
      z-index: 100000 !important;
  }

  .main-navigation ul ul li,
  #site-navigation ul ul li,
  .site-navigation ul ul li,
  .primary-navigation ul ul li,
  .nav-menu ul ul li,
  .menu .sub-menu li,
  .menu .children li {
      display: block !important;
      float: none !important;

      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;

      margin: 0 !important;
      padding: 0 !important;

      background: transparent !important;
      text-align: left !important;
  }

  .main-navigation ul ul a,
  #site-navigation ul ul a,
  .site-navigation ul ul a,
  .primary-navigation ul ul a,
  .nav-menu ul ul a,
  .menu .sub-menu a,
  .menu .children a {
      display: block !important;

      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;

      padding: 12px 18px !important;
      margin: 0 !important;

      background: transparent !important;
      color: #f4e8dc !important;

      font-size: 13px !important;
      line-height: 1.25 !important;
      text-align: left !important;
      white-space: normal !important;
      box-sizing: border-box !important;
  }

  .main-navigation ul ul a:hover,
  #site-navigation ul ul a:hover,
  .site-navigation ul ul a:hover,
  .primary-navigation ul ul a:hover,
  .nav-menu ul ul a:hover,
  .menu .sub-menu a:hover,
  .menu .children a:hover {
      background: rgba(120, 10, 10, 0.75) !important;
      color: #ffffff !important;
  }
}
	/* =====================================================
   FIX MENU POESIE - NASCONDE IMMAGINI NEI DROPDOWN
   ===================================================== */

@media screen and (min-width: 769px) {

  .main-navigation ul ul img,
  #site-navigation ul ul img,
  .site-navigation ul ul img,
  .primary-navigation ul ul img,
  .nav-menu ul ul img,
  .menu .sub-menu img,
  .menu .children img,
  .main-navigation ul ul figure,
  #site-navigation ul ul figure,
  .site-navigation ul ul figure,
  .primary-navigation ul ul figure,
  .nav-menu ul ul figure,
  .menu .sub-menu figure,
  .menu .children figure,
  .main-navigation ul ul picture,
  #site-navigation ul ul picture,
  .site-navigation ul ul picture,
  .primary-navigation ul ul picture,
  .nav-menu ul ul picture,
  .menu .sub-menu picture,
  .menu .children picture {
      display: none !important;
      visibility: hidden !important;
      width: 0 !important;
      height: 0 !important;
      max-width: 0 !important;
      max-height: 0 !important;
      overflow: hidden !important;
  }

  /* Rende il dropdown alto solo quanto le voci */
  .main-navigation ul ul,
  #site-navigation ul ul,
  .site-navigation ul ul,
  .primary-navigation ul ul,
  .nav-menu ul ul,
  .menu .sub-menu,
  .menu .children {
      width: 210px !important;
      min-width: 210px !important;
      max-width: 230px !important;

      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;

      padding: 6px 0 !important;
      margin: 0 !important;

      background: rgba(8, 0, 0, 0.97) !important;
      border: 1px solid #7a120d !important;
      overflow: visible !important;
  }

  .main-navigation ul ul li,
  #site-navigation ul ul li,
  .site-navigation ul ul li,
  .primary-navigation ul ul li,
  .nav-menu ul ul li,
  .menu .sub-menu li,
  .menu .children li {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
  }

  .main-navigation ul ul a,
  #site-navigation ul ul a,
  .site-navigation ul ul a,
  .primary-navigation ul ul a,
  .nav-menu ul ul a,
  .menu .sub-menu a,
  .menu .children a {
      padding: 11px 16px !important;
      height: auto !important;
      min-height: 0 !important;
      line-height: 1.25 !important;
      font-size: 13px !important;
      background: transparent !important;
      color: #f4e8dc !important;
      text-align: left !important;
  }
}
	/* =====================================================
   PAGINA "IL MIO PERCORSO..."
   ===================================================== */


/* HERO INTRO */

.percorso-hero {
    max-width: 1080px;
    margin: 34px auto 36px auto;
    padding: 42px 34px;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(150, 20, 15, 0.75);
    text-align: center;
    box-shadow: 0 0 26px rgba(120, 0, 0, 0.25);
}

.percorso-hero h1 {
    margin: 0 0 14px 0 !important;
    color: #f4e8dc !important;
    font-size: 3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 40, 20, 0.35);
}

.percorso-hero p {
    max-width: 780px;
    margin: 0 auto !important;
    color: #e8ded6 !important;
    font-size: 1.1rem;
    line-height: 1.6;
}


/* LAYOUT GENERALE DELLA PAGINA */

.percorso-hero + .wp-block-columns,
.wp-block-columns:has(.percorso-side-tiles) {
    max-width: 1120px;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 34px !important;
    align-items: flex-start !important;
}


/* ARTICOLI NELLA COLONNA SINISTRA */

.wp-block-query .wp-block-post {
    background: rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(150, 20, 15, 0.55);
    padding: 22px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-title a {
    color: #e8dfcf !important;
    text-shadow: 1px 1px 4px #000000;
}

.wp-block-query .wp-block-post-title a:hover {
    color: #d6b36a !important;
}

.wp-block-query .wp-block-post-excerpt,
.wp-block-query .wp-block-post-date,
.wp-block-query .wp-block-post-terms {
    color: #e8ded6 !important;
}

.wp-block-query .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    border: 1px solid rgba(150, 20, 15, 0.45);
}


/* BARRA LATERALE */

.percorso-side-tiles {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.percorso-side-tile {
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(150, 20, 15, 0.75);
    padding: 24px 22px;
    box-sizing: border-box;
    box-shadow: 0 0 18px rgba(80, 0, 0, 0.22);
}

.percorso-side-tile h3 {
    margin: 0 0 14px 0 !important;
    color: #f4e8dc !important;
    font-size: 1.25rem;
    line-height: 1.25;
    text-shadow: 0 0 8px rgba(255, 40, 20, 0.45);
}

.percorso-side-tile p,
.percorso-side-tile li {
    color: #e8ded6 !important;
    line-height: 1.5;
}

.percorso-side-tile ul {
    margin: 14px 0 0 18px;
    padding: 0;
}

.percorso-side-tile li {
    margin-bottom: 6px;
}

.percorso-side-tile a {
    color: #ff2a1f !important;
    font-weight: 700;
    text-decoration: none;
}

.percorso-side-tile a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 40, 20, 0.75);
}


/* MOBILE */

@media screen and (max-width: 768px) {

    .percorso-hero {
        margin: 24px 16px 28px 16px;
        padding: 30px 22px;
    }

    .percorso-hero h1 {
        font-size: 2.1rem;
    }

    .percorso-hero p {
        font-size: 1rem;
    }

    .percorso-hero + .wp-block-columns,
    .wp-block-columns:has(.percorso-side-tiles) {
        display: block !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .percorso-side-tiles {
        margin-top: 30px;
    }

    .percorso-side-tile {
        padding: 22px 20px;
    }
}
	/* =====================================================
   PAGINA "IL MIO PERCORSO..."
   ===================================================== */

/* Hero */
.percorso-hero {
    max-width: 1080px;
    margin: 36px auto 36px auto;
    padding: 42px 34px;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(150, 20, 15, 0.75);
    text-align: center;
    box-shadow: 0 0 26px rgba(120, 0, 0, 0.25);
}

.percorso-hero h1 {
    margin: 0 0 14px 0 !important;
    color: #f4e8dc !important;
    font-size: 3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 40, 20, 0.35);
}

.percorso-hero p {
    max-width: 780px;
    margin: 0 auto !important;
    color: #e8ded6 !important;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Layout principale */
.percorso-layout {
    max-width: 1120px;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 34px !important;
    align-items: flex-start !important;
}

/* Colonna articoli */
.percorso-layout .wp-block-query .wp-block-post {
    background: rgba(0, 0, 0, 0.48);
    border: 1px solid rgba(150, 20, 15, 0.55);
    padding: 22px;
    margin-bottom: 24px;
    box-sizing: border-box;
}

.percorso-layout .wp-block-post-title,
.percorso-layout .wp-block-post-title a {
    color: #e8dfcf !important;
    text-shadow: 1px 1px 4px #000000;
}

.percorso-layout .wp-block-post-title a:hover {
    color: #d6b36a !important;
}

.percorso-layout .wp-block-post-excerpt,
.percorso-layout .wp-block-post-date,
.percorso-layout .wp-block-post-terms {
    color: #e8ded6 !important;
}

.percorso-layout .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    border: 1px solid rgba(150, 20, 15, 0.45);
}

/* Sidebar */
.percorso-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.percorso-tile {
    background: rgba(0, 0, 0, 0.58);
    border: 1px solid rgba(150, 20, 15, 0.75);
    padding: 24px 22px;
    box-sizing: border-box;
    box-shadow: 0 0 18px rgba(80, 0, 0, 0.22);
}

.percorso-tile h3 {
    margin: 0 0 14px 0 !important;
    color: #f4e8dc !important;
    font-size: 1.25rem;
    line-height: 1.25;
    text-shadow: 0 0 8px rgba(255, 40, 20, 0.45);
}

.percorso-tile p,
.percorso-tile li {
    color: #e8ded6 !important;
    line-height: 1.5;
}

.percorso-tile ul {
    margin: 14px 0 0 18px;
    padding: 0;
}

.percorso-tile li {
    margin-bottom: 6px;
}

.percorso-tile a {
    color: #ff2a1f !important;
    font-weight: 700;
    text-decoration: none;
}

.percorso-tile a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 40, 20, 0.75);
}

/* Mobile */
@media screen and (max-width: 768px) {
    .percorso-hero {
        margin: 24px 16px 28px 16px;
        padding: 30px 22px;
    }

    .percorso-hero h1 {
        font-size: 2.1rem;
    }

    .percorso-hero p {
        font-size: 1rem;
    }

    .percorso-layout {
        display: block !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .percorso-sidebar {
        margin-top: 30px;
    }

    .percorso-tile {
        padding: 22px 20px;
    }
}
/* =====================================================
   IL MIO PERCORSO - IMMAGINI ARTICOLI PICCOLE E PULITE
   ===================================================== */

.wp-block-latest-posts li {
    list-style: none !important;
    background: rgba(0, 0, 0, 0.58) !important;
    border: 1px solid rgba(150, 20, 15, 0.65) !important;
    padding: 18px !important;
    margin-bottom: 22px !important;
    overflow: hidden !important;
}

/* Miniatura piccola, senza esplodere */
.wp-block-latest-posts__featured-image {
    float: left !important;
    width: 120px !important;
    max-width: 120px !important;
    margin: 0 16px 10px 0 !important;
}

.wp-block-latest-posts__featured-image img {
    width: 120px !important;
    height: auto !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: cover !important;
    display: block !important;
    border: 1px solid rgba(150, 20, 15, 0.55) !important;
}

/* Titoli articoli */
.wp-block-latest-posts a {
    color: #ff2a1f !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.wp-block-latest-posts a:hover {
    color: #ffffff !important;
}

/* Estratto */
.wp-block-latest-posts__post-excerpt {
    color: #e8ded6 !important;
    line-height: 1.5 !important;
}

/* Pulizia dopo ogni articolo */
.wp-block-latest-posts li::after {
    content: "";
    display: block;
    clear: both;
}

/* Mobile: immagine sopra, ma non enorme */
@media screen and (max-width: 768px) {
    .wp-block-latest-posts__featured-image {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px 0 !important;
    }

    .wp-block-latest-posts__featured-image img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 220px !important;
    }
}
/* =====================================================
   HEADER FUOCONERO - VERSIONE DEFINITIVA SENZA TAGLI
   ===================================================== */

.site-header,
#masthead,
.custom-header,
.header-image,
.site-branding {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.site-header {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
}

.custom-header img,
.header-image img,
.site-header img,
.site-branding img {
    width: 92vw !important;
    max-width: 1200px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .custom-header img,
    .header-image img,
    .site-header img,
    .site-branding img {
        width: 94vw !important;
        max-width: 94vw !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }
}
	/* =====================================================
   TOGLIE DOPPIA RIGA SOPRA I TILE DEL FOOTER
   ===================================================== */

body.home .site-content,
body.home #content,
body.home .content-area,
body.home .site-main,
body.home .site-footer,
body.home .site-footer .widget-area,
body.home .footer-widgets,
body.home .footer-widget-area {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Se resta una sola riga generata dal tema */
body.home .site-footer::before,
body.home .site-footer::after,
body.home #content::before,
body.home #content::after,
body.home .site-content::before,
body.home .site-content::after {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
	/* =====================================================
   TOGLIE LA RIGA SOPRA I TILE DEL FOOTER - DEFINITIVO
   ===================================================== */

body.home #colophon,
body.home .site-footer,
body.home #supplementary,
body.home .footer-widget-area,
body.home .footer-widgets,
body.home .site-footer .widget-area,
body.home .site-footer .widgets,
body.home .site-content,
body.home #content,
body.home .content-area,
body.home #primary,
body.home .site-main {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Spegne eventuali righe create con pseudo-elementi */
body.home #colophon::before,
body.home #colophon::after,
body.home .site-footer::before,
body.home .site-footer::after,
body.home #supplementary::before,
body.home #supplementary::after,
body.home .footer-widget-area::before,
body.home .footer-widget-area::after,
body.home .footer-widgets::before,
body.home .footer-widgets::after,
body.home .site-content::before,
body.home .site-content::after,
body.home #content::before,
body.home #content::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
	/* =====================================================
   RIGA ROSSA SOTTO I WIDGET DEL FOOTER
   ===================================================== */

body.home .site-footer .widget-area,
body.home .footer-widgets,
body.home .footer-widget-area,
body.home #supplementary {
    border-bottom: 1px solid rgba(160, 20, 15, 0.85) !important;
    padding-bottom: 38px !important;
    margin-bottom: 24px !important;
}

/* Leggero bagliore sotto la riga */
body.home .site-footer .widget-area::after,
body.home .footer-widgets::after,
body.home .footer-widget-area::after,
body.home #supplementary::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 36px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(180, 25, 18, 0.85),
        transparent
    );
}
	/* Calendario Fuoconero su una riga propria */
#colophon .widget:has(.fuoconero-eventi),
.footer-widget-area .widget:has(.fuoconero-eventi),
.widget-area .widget:has(.fuoconero-eventi) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  grid-column: 1 / -1 !important;
  clear: both !important;
  float: none !important;
  box-sizing: border-box !important;
  margin: 28px 0 0 !important;
}

/* Riquadro centrato e più largo */
.fuoconero-eventi {
  display: block;
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

.fuoconero-eventi iframe {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 360px !important;
}
	/* Widget calendario Fuoconero molto largo */
.widget:has(.fuoconero-eventi) {
  width: calc(66.666% - 30px) !important;
  max-width: calc(66.666% - 30px) !important;
  flex: 0 0 calc(66.666% - 30px) !important;
  box-sizing: border-box !important;
}

/* Contenitore */
.fuoconero-eventi {
  display: block;
  width: 100%;
  padding: 14px;
  box-sizing: border-box;
  background: #050000;
  border: 1px solid #d97800;
}

/* Titolo */
.fuoconero-eventi-titolo {
  margin: 0 0 12px;
  color: #ff9800;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
}

/* Calendario */
.fuoconero-eventi iframe {
  display: block;
  width: 100% !important;
  height: 460px !important;
  border: 0;
  background: #ffffff;
}

/* Tablet */
@media (max-width: 1100px) {
  .widget:has(.fuoconero-eventi) {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    flex: 0 0 calc(100% - 30px) !important;
  }
}

/* Smartphone */
@media (max-width: 600px) {
  .widget:has(.fuoconero-eventi) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .fuoconero-eventi {
    padding: 8px;
  }

  .fuoconero-eventi iframe {
    height: 420px !important;
  }

  .fuoconero-eventi-titolo {
    font-size: 18px;
  }
}

} /* CHIUDE LA VECCHIA MEDIA QUERY RIMASTA APERTA.
     Va lasciata esattamente qui, alla fine del vecchio CSS. */


/* =====================================================
   SOLO FIX CALENDARIO FUOCONERO — DESKTOP E MOBILE
   Non modifica header, articoli, menu o gli altri tile.
   ===================================================== */

/* Il widget del calendario scende sotto gli altri e prende tutta la riga */
#colophon .widget:has(.fuoconero-eventi),
#supplementary .widget:has(.fuoconero-eventi),
.site-footer .widget:has(.fuoconero-eventi),
.footer-widget-area .widget:has(.fuoconero-eventi),
.footer-widgets .widget:has(.fuoconero-eventi) {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  margin: 30px auto 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 0 !important;
}

/* Riquadro interno */
.fuoconero-eventi {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  background: rgba(5, 0, 0, 0.96) !important;
  border: 1px solid #d97800 !important;
}

/* Titolo */
.fuoconero-eventi-titolo {
  margin: 0 0 14px !important;
  color: #ff9800 !important;
  font-family: Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* Calendario */
.fuoconero-eventi iframe {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 440px !important;
  margin: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
}

/* Smartphone */
@media screen and (max-width: 600px) {
  #colophon .widget:has(.fuoconero-eventi),
  #supplementary .widget:has(.fuoconero-eventi),
  .site-footer .widget:has(.fuoconero-eventi),
  .footer-widget-area .widget:has(.fuoconero-eventi),
  .footer-widgets .widget:has(.fuoconero-eventi) {
    width: 100% !important;
    margin-top: 24px !important;
  }

  .fuoconero-eventi {
    padding: 9px !important;
  }

  .fuoconero-eventi-titolo {
    font-size: 18px !important;
  }

  .fuoconero-eventi iframe {
    height: 420px !important;
  }
}
/* =====================================================
   CANARD: 3 RIQUADRI SOPRA + CALENDARIO LARGO SOTTO
   ===================================================== */

@media screen and (min-width: 901px) {

  /* Vero contenitore dei widget del footer */
  .footer-widget-inner {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 38px !important;
    row-gap: 30px !important;
    align-items: start !important;
    max-width: 1160px !important;
    margin: 0 auto !important;
  }

  /* Disattiva il clearfix del tema, che interferisce con la griglia */
  .footer-widget-inner::before,
  .footer-widget-inner::after {
    content: none !important;
    display: none !important;
  }

  /* Tutti i riquadri */
  .footer-widget-inner > .widget {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Il quarto riquadro, cioè il calendario, va sotto */
  .footer-widget-inner > .widget:nth-child(4),
  .footer-widget-inner > .widget:last-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Contenitore interno del calendario */
  .footer-widget-inner > .widget:nth-child(4) .fuoconero-eventi,
  .footer-widget-inner > .widget:last-child .fuoconero-eventi {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Calendario vero e proprio */
  .footer-widget-inner > .widget:nth-child(4) iframe,
  .footer-widget-inner > .widget:last-child iframe {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 320px !important;
    margin: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
  }
}
@media screen and (max-width: 600px) {
  .footer-widget-inner iframe {
    height: 280px !important;
  }
}