/* ==========================================================================
   Compendio INAZ - template "cmpnd"
   Ispirato all'edizione cartacea: rosso INAZ solo come accento,
   Rubik per titoli e navigazione, serif per il testo, filetti sottili.
   ========================================================================== */

@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --rosso: #ee2734;
  --rosso-scuro: #c8192c;
  --inchiostro: #1d1d1b;
  --testo: #2b2b2b;
  --grigio: #6f6f6f;
  --grigio-chiaro: #8c8c8c;
  --filetto: #d9d9d9;
  --carta: #ffffff;
  --fondo: #f5f4f2;
  --linguetta: #8a8a8a;

  --font-titoli: "Rubik", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-testo: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;

  --misura: 44rem;          /* larghezza della colonna di testo */
  --pagina: 76rem;
  --gutter: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

a { color: var(--rosso-scuro); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--rosso); }
:focus-visible { outline: 2px solid var(--rosso); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titoli);
  color: var(--inchiostro);
  line-height: 1.25;
  margin: 1.6em 0 .6em;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--inchiostro); color: #fff; padding: .5rem 1rem; z-index: 10;
}
.skip-link:focus { left: var(--gutter); }

.wrap {
  max-width: var(--pagina);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Testata
   -------------------------------------------------------------------------- */
.masthead {
  background: var(--carta);
  border-top: 6px solid var(--rosso);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.masthead__logo {
  flex: none;
  display: block;
  background: var(--rosso-scuro);
  padding: .55rem .8rem;
  line-height: 0;
}
.masthead__logo img { width: 92px; height: auto; }
.masthead__title {
  display: flex;
  flex-direction: column;
  color: var(--inchiostro);
  text-decoration: none;
  font-family: var(--font-titoli);
}
.masthead__title:hover, .masthead__title:focus { color: var(--inchiostro); }
.masthead__name {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.masthead__claim {
  margin-top: .3rem;
  font-size: .9rem;
  color: var(--grigio);
  max-width: 34rem;
}
.masthead__author {
  margin: 0 0 0 auto;
  font-family: var(--font-titoli);
  font-size: .8rem;
  line-height: 1.4;
  color: var(--grigio);
  text-align: right;
}

/* Barra di navigazione */
.navbar { border-top: 1px solid var(--filetto); border-bottom: 1px solid var(--filetto); background: var(--carta); }
.navbar__inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.navbar__menu { flex: 1 1 auto; min-width: 0; }
.navbar__menu ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1.75rem;
}
.navbar__menu a {
  display: block;
  padding: .85rem 0 .7rem;
  border-bottom: 3px solid transparent;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--inchiostro);
  text-decoration: none;
}
.navbar__menu a:hover, .navbar__menu a:focus,
.navbar__menu .active > a, .navbar__menu .current > a {
  color: var(--rosso-scuro);
  border-bottom-color: var(--rosso);
}
.navbar__search { flex: 0 1 16rem; padding: .5rem 0; }

/* --------------------------------------------------------------------------
   Pagina
   -------------------------------------------------------------------------- */
.page {
  background: var(--carta);
  padding-top: 1.25rem;
  padding-bottom: 3rem;
  min-height: 60vh;
}

/* Titolo corrente, come l'intestazione delle pagine del libro */
.running-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: .4rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--inchiostro);
  font-family: var(--font-titoli);
  font-size: .85rem;
}
.running-head__title { font-weight: 700; color: var(--inchiostro); }

.breadcrumb, .mod-breadcrumbs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem;
  color: var(--grigio);
}
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before,
.breadcrumb-item + .breadcrumb-item::before { content: "›"; padding-right: .25rem; color: var(--grigio-chiaro); }
.mod-breadcrumbs__here, .mod-breadcrumbs__divider { display: none; }
.breadcrumb a { color: var(--grigio); text-decoration: none; }
.breadcrumb a:hover { color: var(--rosso-scuro); text-decoration: underline; }

.layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}
.has-sidebar .layout { grid-template-columns: 17rem minmax(0, 1fr); }
.main { min-width: 0; max-width: var(--misura); }
.main:focus { outline: none; }

/* Linguetta grigia laterale con il nome della sezione (LAVORO, PREVIDENZA...) */
.linguetta {
  position: absolute;
  left: calc(-1 * var(--gutter) - 2.4rem);
  top: 0;
  width: 2.4rem;
  height: 11rem;
  background: var(--linguetta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.linguetta span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Barra laterale e moduli
   -------------------------------------------------------------------------- */
.sidebar { font-family: var(--font-titoli); font-size: .9rem; }

.modulo { margin-bottom: 2rem; }
.modulo__titolo, .indice > summary {
  margin: 0 0 .75rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--inchiostro);
  font-family: var(--font-titoli);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inchiostro);
}
.indice { margin-bottom: 2rem; }
.indice > summary { cursor: pointer; list-style: none; }
.indice > summary::-webkit-details-marker { display: none; }
.indice > summary::after { content: " +"; color: var(--rosso); }
.indice[open] > summary::after { content: " –"; }
.indice .modulo__titolo { display: none; }

/* Elenchi di navigazione nello stile del sommario */
.sidebar ul, .modulo ul, .mod-articlescategories, .mod-articles-categories {
  list-style: none; margin: 0; padding: 0;
}
.sidebar li > a, .modulo li > a {
  display: block;
  padding: .45rem 0;
  border-bottom: 1px dotted var(--filetto);
  color: var(--testo);
  text-decoration: none;
  line-height: 1.35;
}
.sidebar li > a:hover, .modulo li > a:hover { color: var(--rosso-scuro); }
.sidebar .current > a, .sidebar .active > a {
  color: var(--rosso-scuro);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--rosso);
  padding-left: .6rem;
}

/* Sottocategorie sopra gli articoli (position-3): sommario del capitolo */
.main .modulo.mod_articles_categories,
.main .modulo.mod_articles_category {
  padding: 1rem 1.25rem;
  background: var(--fondo);
  border-left: 3px solid var(--rosso);
  font-family: var(--font-titoli);
  font-size: .9rem;
}
.main .mod_articles_categories li > a,
.main .mod_articles_category li > a { border-bottom-color: #e6e4e0; }
.main .mod_articles_categories h4,
.main .mod_articles_categories h5 { margin: 0; font-size: inherit; font-weight: 400; }

/* Home: "I più letti" e "Novità" */
.top-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-bottom: 1rem;
  font-family: var(--font-titoli);
  font-size: .9rem;
}
.top-boxes .modulo { margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   Contenuti
   -------------------------------------------------------------------------- */
.page-header h1, .page-header h2, h1.page-header, .item-title, .com-content-article h1 {
  margin-top: 0;
}
.page-header h1, .page-header h2, .com-content-article .page-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--inchiostro);
}
.page-header { margin-bottom: 1rem; }

/* Titoli di categoria come le aperture di capitolo del libro */
.com-content-category-blog > h1,
.com-content-category-blog > h2,
.com-content-category-blog .category-name,
.com-content-category h1, .com-content-category h2 {
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--filetto);
}

.com-content-article__body, .item-content, .blog-item .item-content, .category-desc {
  font-family: var(--font-testo);
  hyphens: auto;
  -webkit-hyphens: auto;
}
.com-content-article__body p, .item-content p { margin: 0 0 .8em; text-align: justify; }
.com-content-article__body h2, .com-content-article__body h3, .com-content-article__body h4,
.item-content h2, .item-content h3, .item-content h4 { font-size: 1.05rem; }
.com-content-article__body strong, .item-content strong { color: var(--inchiostro); }

.com-content-article__body table, .item-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-family: var(--font-titoli);
  font-size: .85rem;
  line-height: 1.4;
  display: block;
  overflow-x: auto;
}
.com-content-article__body th, .com-content-article__body td,
.item-content th, .item-content td {
  border: 1px solid var(--filetto);
  padding: .4rem .55rem;
  vertical-align: top;
  text-align: left;
}
.com-content-article__body thead th, .item-content thead th { background: var(--fondo); }

blockquote {
  margin: 1.25rem 0;
  padding: .25rem 1.25rem;
  border-left: 3px solid var(--filetto);
  color: var(--grigio);
}

/* Blog di categoria: una sola colonna, come la pagina stampata */
.blog-items { display: block !important; }
.blog-items > .blog-item, .blog-item, .items-leading > div {
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--filetto);
  width: auto !important;
}
.blog-item h2, .item-title, .items-leading h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.blog-item h2 a, .item-title a, .items-leading h2 a { color: var(--inchiostro); text-decoration: none; }
.blog-item h2 a:hover, .item-title a:hover { color: var(--rosso-scuro); }

/* Informazioni articolo (data di modifica, ecc.) */
.article-info, dl.article-info {
  margin: 0 0 1rem;
  font-family: var(--font-titoli);
  font-size: .8rem;
  color: var(--grigio);
}
.article-info dt, .article-info-term { display: none; }
.article-info dd { margin: 0; display: inline; }
.article-info [class^="icon-"], .article-info [class*=" icon-"] { display: none; }

.readmore { margin: .5rem 0 0; }
.readmore a, .btn {
  display: inline-block;
  padding: .45rem .95rem;
  border: 1px solid var(--inchiostro);
  border-radius: 0;
  background: transparent;
  color: var(--inchiostro);
  font-family: var(--font-titoli);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.readmore a:hover, .btn:hover, .btn:focus { background: var(--inchiostro); color: #fff; }
.btn-primary { background: var(--rosso-scuro); border-color: var(--rosso-scuro); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--rosso); border-color: var(--rosso); }
.readmore .icon-chevron-right, .readmore [class^="icon-"] { display: none; }

.items-more ol, .com-content-blog__links ol, .com-content-blog__links ul { padding-left: 1.2rem; font-family: var(--font-titoli); font-size: .9rem; }

/* Elenco articoli (vista categoria lista) */
.category, table.category {
  width: 100%; border-collapse: collapse; font-family: var(--font-titoli); font-size: .9rem;
}
.category th, .category td { padding: .55rem .4rem; border-bottom: 1px solid var(--filetto); text-align: left; }

/* Paginazione */
.pagination, .com-content-category-blog__navigation ul, .pagination ul {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; gap: .25rem;
  font-family: var(--font-titoli); font-size: .85rem;
}
.page-link {
  display: block; min-width: 2.2rem; padding: .35rem .6rem;
  border: 1px solid var(--filetto); text-align: center; color: var(--inchiostro); text-decoration: none;
}
.page-item.active .page-link { background: var(--inchiostro); color: #fff; border-color: var(--inchiostro); }
.page-item.disabled .page-link { color: var(--grigio-chiaro); }
.counter { font-family: var(--font-titoli); font-size: .8rem; color: var(--grigio); }

/* Icone (stampa, email): Font Awesome non viene caricato */
.icons, .com-content-article .icons, .btn-group.float-end { display: none; }

/* --------------------------------------------------------------------------
   Moduli (login, ricerca)
   -------------------------------------------------------------------------- */
label, .form-label, .control-label { display: block; font-family: var(--font-titoli); font-size: .8rem; color: var(--grigio); margin-bottom: .2rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="search"], textarea, select, .form-control {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid #bdbdbd;
  border-radius: 0;
  background: #fff;
  color: var(--inchiostro);
  font-family: var(--font-titoli);
  font-size: .9rem;
}
input:focus, textarea:focus, select:focus { border-color: var(--rosso-scuro); outline: none; box-shadow: 0 0 0 2px rgba(238, 39, 52, .15); }
.form-check { display: flex; align-items: center; gap: .4rem; }
.form-check label { margin: 0; }
.mod-login__username, .mod-login__password, .mod-login__remember, .mod-login__submit,
.control-group, .mb-3 { margin-bottom: .75rem; }
.input-group { display: flex; }
.input-group > .form-control { flex: 1; }
.input-group .btn, .input-password-toggle { flex: none; }
.input-group-text { display: none; }
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mod-login__options { font-size: .8rem; }
.mod-login__options a { border: 0; padding: .2rem 0; }
.mod-login-logout__login-greeting { margin-bottom: .75rem; }

/* Ricerca nella barra */
.navbar__search form { display: flex; }
.navbar__search .awesomplete { width: 100%; }
.navbar__search input[type="search"], .navbar__search input[type="text"] { border-color: var(--filetto); background: var(--fondo); }
.navbar__search label { position: absolute; left: -9999px; }
.navbar__search .btn { display: none; }

/* Messaggi di sistema */
joomla-alert, .alert {
  display: block;
  margin: 0 0 1.5rem;
  padding: .85rem 1rem;
  border-left: 4px solid var(--grigio);
  background: var(--fondo);
  font-family: var(--font-titoli);
  font-size: .9rem;
}
joomla-alert[type="danger"], joomla-alert[type="error"], .alert-danger { border-left-color: var(--rosso); }
joomla-alert[type="success"], .alert-success { border-left-color: #2e7d32; }
joomla-alert[type="warning"], .alert-warning { border-left-color: #b26a00; }
joomla-alert .joomla-alert--close, joomla-alert .joomla-alert-button--close {
  float: right; border: 0; background: none; font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.alert-heading { font-size: .8rem; margin: 0 0 .25rem; text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   Piede: colophon come la pagina dei crediti del libro
   -------------------------------------------------------------------------- */
.colophon {
  background: var(--inchiostro);
  color: #c9c9c9;
  font-family: var(--font-titoli);
  font-size: .75rem;
  line-height: 1.6;
}
.colophon__inner { display: flex; gap: 2rem; padding-top: 2rem; padding-bottom: 2.5rem; }
.colophon__mark { flex: none; background: var(--rosso-scuro); padding: .45rem .65rem; align-self: flex-start; line-height: 0; }
.colophon__mark img { width: 64px; }
.colophon a { color: #fff; }
.colophon b, .colophon strong { color: #fff; font-weight: 700; }

/* Pagina di errore */
.error-box { padding-top: 3rem; }

/* --------------------------------------------------------------------------
   Schermi stretti
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  .linguetta { display: none; }
}

@media (max-width: 959px) {
  body { font-size: 1rem; }
  .has-sidebar .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .main { max-width: none; }
  .masthead__author { display: none; }
  .masthead__name { font-size: 1.6rem; }
  .masthead__claim { font-size: .8rem; }
  .indice { border: 1px solid var(--filetto); padding: .6rem .8rem; margin-bottom: 1.25rem; }
  .indice > summary { margin: 0; border: 0; padding: 0; }
  .indice[open] > summary { margin-bottom: .5rem; }
  .sidebar { order: 0; }
  .top-boxes { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .navbar__search { flex-basis: 100%; padding-top: 0; }
  .colophon__inner { flex-direction: column; gap: 1rem; }
}

@media (max-width: 600px) {
  .masthead__inner { gap: .9rem; padding-top: .9rem; padding-bottom: .9rem; }
  .masthead__logo img { width: 64px; }
  .masthead__claim { display: none; }
  .navbar__menu ul { gap: 0 1.1rem; overflow-x: auto; flex-wrap: nowrap; }
  .com-content-article__body p, .item-content p { text-align: left; }
}

/* --------------------------------------------------------------------------
   Stampa
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; font-size: 11pt; }
  .navbar, .sidebar, .colophon, .top-boxes, .skip-link, .linguetta, .readmore, .pagination { display: none !important; }
  .masthead { border-top: 0; }
  .page { padding: 0; }
  .has-sidebar .layout { display: block; }
  .main { max-width: none; }
  a { color: inherit; text-decoration: none; }
}

/* Accesso con passkey (WebAuthn): pulsante compatto */
.plg_system_webauthn_login_button {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin-bottom: .75rem;
  padding: .45rem .7rem;
  border: 1px solid var(--filetto);
  background: #fff;
  font-family: var(--font-titoli);
  font-size: .8rem;
  color: var(--inchiostro);
  cursor: pointer;
}
.plg_system_webauthn_login_button svg, .plg_system_webauthn_login_button img { width: 1.1rem; height: 1.1rem; }
.input-password-toggle { border: 1px solid #bdbdbd; border-left: 0; background: #fff; padding: 0 .6rem; color: var(--grigio); cursor: pointer; }

/* Modifica dal frontend (solo redazione): icona discreta, tooltip solo al passaggio */
.jmoddiv { position: relative; }
.jmodedit {
  position: absolute; top: 0; right: 0; z-index: 5;
  display: none; width: 1.6rem; height: 1.6rem; padding: 0;
  align-items: center; justify-content: center;
  background: var(--inchiostro); color: #fff; border: 0; text-decoration: none; font-size: .75rem;
}
.jmoddiv:hover > .jmodedit, .jmodedit:focus { display: flex; }
.jmoddiv [role="tooltip"], .jmodedit + [role="tooltip"] { display: none !important; }
.jmoddiv:hover { outline: 1px dashed var(--grigio-chiaro); outline-offset: 4px; }