/*
 * Italia dei Diritti — stile del template figlio di Cassiopeia (Joomla 6).
 * Colori ricavati dal logo: blu #3610c2 (sfondo dell'emblema), arancione della data #c0600a.
 * Caratteri: Source Sans 3 ospitato sul server (niente Google Fonts = nessun IP inviato a Google).
 */

/* ---------- Caratteri ---------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* ---------- Colori e variabili ---------- */
:root {
  --idd-blu: #3610c2;
  --idd-blu-scuro: #22097a;
  --idd-arancio: #c0600a;
  --idd-testo: #1f2328;
  --idd-testo-2: #3d4450;
  --idd-grigio: #5b6470;
  --idd-bordo: #e3e7ee;
  --idd-fondo-chiaro: #f3f5f8;

  --cassiopeia-color-primary: var(--idd-blu);
  --cassiopeia-color-link: var(--idd-blu);
  --cassiopeia-color-hover: var(--idd-blu-scuro);
  --cassiopeia-font-family-body: "Source Sans 3", system-ui, sans-serif;
  --cassiopeia-font-family-headings: "Source Sans 3", system-ui, sans-serif;
  --cassiopeia-font-weight-normal: 400;
  --cassiopeia-font-weight-headings: 700;
  --link-color: var(--idd-blu);
  --link-hover-color: var(--idd-blu-scuro);
}

body.idd {
  color: var(--idd-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ---------- Testata ---------- */
.idd .container-header {
  background-color: var(--idd-blu);
  background-image: none;
  box-shadow: none;
}

.idd .idd-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: .75rem;
}

.idd .idd-brand {
  display: flex;
  align-items: center;
  gap: .875rem;
  color: #fff;
  text-decoration: none;
}

.idd .idd-brand:hover,
.idd .idd-brand:focus {
  color: #fff;
}

.idd .idd-brand__emblem {
  width: auto;
  height: 80px;
  display: block;
}

.idd .idd-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  letter-spacing: .04em;
}

.idd .idd-brand__small {
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.idd .idd-brand__name {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.idd .idd-nav {
  margin-inline-start: auto;
}

.idd .container-header .mod-menu > li > a,
.idd .container-header .mod-menu > li > span {
  color: #fff;
  font-weight: 600;
}

.idd .container-header .mod-menu > li.active > a,
.idd .container-header .mod-menu > li.current > a {
  box-shadow: inset 0 -3px 0 #fff;
}

/* Voce di menu "Aderisci": nel menu, campo "Classe CSS del link" = idd-cta */
.idd .container-header .mod-menu > li > a.idd-cta {
  background: var(--idd-arancio);
  color: #fff;
  border-radius: 6px;
  padding: .55rem 1.1rem;
  box-shadow: none;
}

.idd .container-header .mod-menu > li > a.idd-cta:hover,
.idd .container-header .mod-menu > li > a.idd-cta:focus {
  background: #9c4e08;
}

/* Cellulare e tablet: pulsante del menu in alto a destra accanto al logo, voci a tutta larghezza */
@media (max-width: 991.98px) {
  .idd .idd-header-row {
    position: relative;
  }

  .idd .idd-nav {
    flex: 1 1 100%;
    margin: 0;
  }

  /* La barra del menu (Bootstrap .navbar) è "relative": la rendiamo statica, così il pulsante
     si posiziona rispetto alla riga del logo e non alla barra del menu. */
  .idd .idd-nav,
  .idd .idd-nav .navbar {
    position: static;
    padding: 0;
    min-height: 0;
  }

  .idd .idd-header-row {
    row-gap: 0;
  }

  /* Centrato sull'emblema: padding della riga (.75rem) + metà emblema (28px) − metà pulsante (~21px) */
  .idd .idd-nav .navbar-toggler {
    position: absolute;
    top: calc(.75rem + 7px);
    inset-inline-end: 1rem;
    margin: 0;
    border-color: #fff;
    color: #fff;
  }

  .idd .idd-nav .navbar-collapse.show,
  .idd .idd-nav .navbar-collapse.collapsing {
    padding-bottom: .75rem;
  }

  .idd .idd-nav .navbar-collapse .mod-menu {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .idd .idd-brand__emblem { height: 56px; }
  .idd .idd-brand__small { font-size: .6875rem; }
  .idd .idd-brand__name { font-size: 1.25rem; }
}

/* ---------- Fascia "Chi Siamo / Aderisci" (modulo personalizzato in posizione "banner", solo Home) ---------- */
.idd .idd-hero {
  background: var(--idd-fondo-chiaro);
}

.idd .idd-hero__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.idd .idd-hero__claim {
  margin: 0;
  max-width: 40rem;
  font-size: 1.625rem;
  line-height: 1.3;
}

.idd .idd-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.idd .idd-btn {
  display: inline-block;
  padding: .75rem 1.65rem;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.idd .idd-btn:hover,
.idd .idd-btn:focus {
  color: #fff;
}

.idd .idd-btn--blu { background: var(--idd-blu); }
.idd .idd-btn--blu:hover { background: var(--idd-blu-scuro); }
.idd .idd-btn--arancio { background: var(--idd-arancio); }
.idd .idd-btn--arancio:hover { background: #9c4e08; }

/* ---------- Data arancione ---------- */
.idd .idd-date {
  flex: 0 0 64px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .4rem 0;
  border-radius: 4px;
  background: var(--idd-arancio);
  color: #fff;
  line-height: 1.1;
}

.idd .idd-date__day {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
}

.idd .idd-date__month {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Elenco notizie */
.idd .idd-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--idd-bordo);
}

.idd .idd-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.idd .blog-item {
  margin-bottom: 1.5rem;
}

.idd .blog-item .item-title,
.idd .blog-item h2 {
  font-size: 1.5rem;
  line-height: 1.25;
}

.idd .blog-item .item-title a,
.idd .blog-item h2 a {
  color: var(--idd-testo);
  text-decoration: none;
}

.idd .blog-item .item-title a:hover,
.idd .blog-item h2 a:hover {
  color: var(--idd-blu);
}

.idd .items-leading .item-title,
.idd .items-leading h2 {
  font-size: 2.25rem;
  line-height: 1.15;
}

.idd .items-leading .idd-date {
  flex-basis: 76px;
}

.idd .items-leading .idd-date__day {
  font-size: 2.375rem;
}

.idd .blog-item .item-image img {
  width: 100%;
  height: auto;
}

/* Riassunto + miniatura (prima foto dell'articolo): testo a sinistra, foto a destra;
   nella notizia in evidenza la foto è grande e sta sopra. */
.idd .idd-item__body {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-start;
}

.idd .idd-item__body > .item-content {
  flex: 999 1 280px;
  min-width: 0;
  order: 1;
}

.idd .idd-thumb {
  flex: 0 1 200px;
  order: 2;
  display: block;
}

.idd .idd-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.idd .idd-thumb--lead {
  flex-basis: 100%;
  order: 0;
}

.idd .idd-thumb--lead img {
  aspect-ratio: 16 / 9;
  object-position: center 25%;
}

/* Nell'elenco basta il riquadro con la data: niente blocco "Dettagli", e una notizia per riga */
.idd .blog-item .article-info {
  display: none;
}

.idd .com-content-category-blog .blog-items {
  display: block;
  column-count: auto;
}

.idd .com-content-category-blog .blog-items > .blog-item {
  width: auto;
  max-width: none;
}

/* Cellulare: la foto va sopra il titolo, a tutta larghezza */
@media (max-width: 575.98px) {
  .idd .idd-thumb {
    flex-basis: 100%;
    order: 0;
  }

  .idd .idd-thumb img {
    aspect-ratio: 16 / 9;
  }
}

/* Numeri di pagina: vanno a capo invece di uscire dallo schermo */
.idd .pagination {
  flex-wrap: wrap;
}

.idd .idd-excerpt {
  margin: .5rem 0;
  color: var(--idd-testo-2);
}

.idd .items-leading .idd-excerpt {
  font-size: 1.1875rem;
  font-style: italic;
}

.idd .idd-readmore {
  font-weight: 600;
}

/* Articolo */
.idd .idd-article-head {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.idd .idd-article-head .idd-date {
  flex-basis: 76px;
}

.idd .idd-article-head .idd-date__day {
  font-size: 2.375rem;
}

.idd .idd-article-head h1,
.idd .idd-article-head h2 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.12;
}

/* La fascia Chi Siamo / Aderisci si vede solo negli elenchi (home), non dentro gli articoli:
   lì il pulsante "Aderisci" resta comunque nel menu in alto. */
.idd.view-article .idd-hero {
  display: none;
}

/* Pagine fisse (Chi Siamo, Aderisci...): niente riga dei dettagli */
.idd .com-content-article.idd-pagina .article-info,
.idd .com-content-article.idd-pagina .pagenavigation {
  display: none;
}

/* "Dettagli" dell'articolo su una riga sola, in grigio */
.idd .com-content-article .article-info {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: .75rem 0 0;
  color: var(--idd-grigio);
  font-size: .9375rem;
}

.idd .com-content-article .article-info .article-info-term {
  display: none;
}

.idd .com-content-article .article-info dd {
  margin: 0;
}

.idd .com-content-article .article-info [class^="icon-"],
.idd .com-content-article .article-info [class*=" icon-"] {
  display: none;
}

/* Immagini nel testo: hanno width/height (vedi idd_seo.php) ma restano dentro la colonna */
.idd .com-content-article__body img {
  max-width: 100%;
  height: auto;
}

.idd .com-content-article__body {
  font-size: 1.125rem;
  line-height: 1.65;
}

.idd .idd-share {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0;
}

.idd .idd-share a {
  display: inline-block;
  padding: .5rem .9rem;
  border: 1px solid #c9d0db;
  border-radius: 6px;
  color: var(--idd-testo);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}

.idd .idd-share a:hover,
.idd .idd-share a:focus {
  border-color: var(--idd-blu);
  color: var(--idd-blu);
}

@media (max-width: 575.98px) {
  .idd .idd-article-head h1,
  .idd .idd-article-head h2 { font-size: 1.75rem; }
  .idd .items-leading .item-title,
  .idd .items-leading h2 { font-size: 1.625rem; }
  .idd .blog-item .item-title,
  .idd .blog-item h2 { font-size: 1.3125rem; }
}

/* ---------- Colonna laterale ---------- */
.idd .container-sidebar-right .card {
  border: 0;
  background: transparent;
}

.idd .container-sidebar-right .card-header {
  padding: 0 0 .5rem;
  border-bottom: 3px solid var(--idd-blu);
  background: transparent;
  font-size: 1.25rem;
  font-weight: 700;
}

.idd .container-sidebar-right .card-body {
  padding: .75rem 0 0;
}

/* Elenchi di articoli nella colonna (modulo "Articoli" di Joomla 6): titoli piccoli, testo scuro */
.idd .container-sidebar-right .card-body :is(h2, h3, h4, h5, h6) {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.idd .container-sidebar-right .card-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.idd .container-sidebar-right .card-body li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--idd-bordo);
}

.idd .container-sidebar-right .card-body li:last-child {
  border-bottom: 0;
}

.idd .container-sidebar-right .card-body li a {
  color: var(--idd-testo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.idd .container-sidebar-right .card-body li a:hover,
.idd .container-sidebar-right .card-body li a:focus {
  color: var(--idd-blu);
  text-decoration: underline;
}

/* Riquadro Facebook caricato solo su richiesta (vedi js/user.js) */
.idd .idd-embed {
  padding: 1rem;
  border: 1px solid #c9d0db;
  border-radius: 6px;
  background: #fff;
  text-align: center;
}

.idd .idd-embed__note {
  margin: 0 0 .75rem;
  color: var(--idd-grigio);
  font-size: .875rem;
  line-height: 1.4;
}

.idd .idd-embed-load {
  padding: .6rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--idd-blu);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.idd .idd-embed-load:hover,
.idd .idd-embed-load:focus {
  background: var(--idd-blu-scuro);
}

/* Piè di pagina: a sinistra contatti + link legali, a destra il menu su due colonne */
.idd .container-footer .grid-child {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-block: 2rem;
}

/* Joomla avvolge il modulo in un contenitore (.mod-custom): l'ordine va dato a quello */
.idd .container-footer .grid-child > :has(.idd-footer) {
  order: -1;
  flex: 1 1 420px;
}

.idd .idd-footer {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.idd .container-footer .mod-menu {
  flex: 0 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: .35rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.idd .container-footer .mod-menu a {
  text-decoration: none;
}

.idd .container-footer .mod-menu a:hover,
.idd .container-footer .mod-menu a:focus {
  text-decoration: underline;
}

.idd .idd-footer__name {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

.idd .idd-footer p {
  margin: .25rem 0;
}

.idd .idd-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* "Preferenze cookie": pulsante con l'aspetto di un link */
.idd .idd-cookie-prefs-item[hidden] {
  display: none !important;
}

.idd .idd-cookie-prefs {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Modulo con classe "idd-sticky": resta visibile scorrendo (es. banner 300x600) */
.idd .idd-sticky {
  position: sticky;
  top: 1rem;
}

/* ---------- Spazi pubblicitari ----------
 * Lo spazio è riservato in anticipo (min-height) così la pagina non "salta" quando arriva l'annuncio.
 * Il codice dell'annuncio va in un modulo "Personalizzato" dentro <div class="idd-ad idd-ad--...">.
 */
.idd .idd-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}

.idd .idd-ad__label {
  display: block;
  margin-bottom: .25rem;
  color: var(--idd-grigio);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.idd .idd-ad-testata {
  max-width: 1320px;
  margin: 1rem auto 0;
  padding: 0 1.5rem;
}

.idd .idd-ad--testata { min-height: 100px; margin: 0 auto; }
.idd .idd-ad--rect { min-height: 250px; }
.idd .idd-ad--sky { min-height: 600px; }
.idd .idd-ad--infeed { min-height: 120px; }
.idd .idd-ad--articolo { min-height: 280px; }
.idd .idd-ad--fine { min-height: 100px; }

/* Solo desktop / solo cellulare */
.idd .idd-solo-desktop { display: none; }
@media (min-width: 992px) {
  .idd .idd-solo-desktop { display: flex; }
  .idd .idd-solo-mobile { display: none; }
}

/* Riquadri di prova (prima di AdSense): <div class="idd-ad idd-ad--rect idd-ad--prova">Pubblicità 300×250</div> */
.idd .idd-ad--prova {
  border: 2px dashed #9aa3af;
  background: #f6f7f9;
  color: #4b5563;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Piè di pagina ---------- */
.idd .container-footer {
  background-color: var(--idd-blu-scuro);
  background-image: none;
  color: #e8ecf3;
}

.idd .container-footer a {
  color: #e8ecf3;
}

.idd .container-footer a:hover,
.idd .container-footer a:focus {
  color: #fff;
}