/* ==========================================================================
   MEDEMIT — Foglio di stile del tema

   Due livelli di riferimento:
   1. Tavola mockup 1648 x 928 px  -> misure e proporzioni di layout.
   2. Design token                 -> colori, tipografia, separatori, ombre.

   Tutte le misure sono normalizzate in variabili CSS, definite in :root qui
   sotto e allineate a theme.json. La struttura principale usa CSS Grid.

   Le regole richieste dal core di WordPress sono raccolte in fondo al file,
   nella sezione "Compatibilità WordPress".
   ========================================================================== */

:root {
  /* ======================================================================
     1. COLORI
     Valori iniziali forniti: da verificare con il campionamento del mockup.
     ====================================================================== */
  --medemit-color-primary: #0875C9;      /* blu principale */
  --medemit-color-logo: #2D82C9;         /* blu del logo, da campionare */
  --medemit-color-dark: #062C49;         /* blu scuro footer */
  --medemit-color-text: #172B3A;         /* testo principale */
  --medemit-color-text-muted: #607487;   /* testo secondario */
  --medemit-color-bg: #FFFFFF;           /* sfondo pagina */
  --medemit-color-panel: #F4F7FA;        /* fondo pannelli */
  --medemit-color-border: #DCE5EC;       /* bordi e separatori */
  --medemit-color-accent: #F0444E;       /* rosso sottolineatura */

  /* Tipografia editoriale dell'articolo singolo: capolettera e linea del
     titolo. Sono variabili dedicate perché i due elementi devono restare
     fedeli ai valori della specifica anche se i token generali cambiano. */
  --medemit-dropcap-color: #0875C9;
  --medemit-title-underline: #F0444E;

  /* Derivati: tinte calcolate dai token, non nuovi colori arbitrari */
  --medemit-color-primary-tint: rgba(8, 117, 201, 0.08);
  --medemit-color-border-on-dark: rgba(255, 255, 255, 0.12);

  /* ======================================================================
     2. TIPOGRAFIA
     ====================================================================== */
  /* Font di sistema: nessuna richiesta esterna, quindi nessun dato dei lettori
     inviato a terze parti. La famiglia è la stessa dichiarata in theme.json. */
  --medemit-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Nome del sito: carattere condensato, più stretto del resto, così
     «MEDICINA d'URGENZA» resta compatto anche a corpo maggiore. Sono famiglie
     presenti nei sistemi: nessuna richiesta a servizi esterni. */
  --medemit-font-condensed: "Arial Narrow", "Helvetica Neue Condensed",
    "Liberation Sans Narrow", "Roboto Condensed", var(--medemit-font-sans);

  --medemit-fs-brand: 2.25rem;       /* 36 px — nome del sito in testata (32-42) */
  --medemit-fs-brand-light: 1.25rem; /* 20 px — parte leggera dell'intestazione */
  --medemit-fs-hero: 1.6rem;         /* 25,6 px — titolo articolo principale (24-29) */
  --medemit-fs-section: 1.15rem;     /* 18,4 px — titoli di sezione (17-20) */
  --medemit-fs-card: 0.9rem;         /* 14,4 px — titoli articoli secondari (12-15) */
  --medemit-fs-body: 0.8rem;         /* 12,8 px — corpo descrizioni (12-14) */
  --medemit-fs-meta: 0.6875rem;      /* 11 px — metadati (10-11) */
  --medemit-fs-micro: 0.75rem;       /* 12 px — footer e microtesti (10-12) */

  --medemit-lh-tight: 1.15;          /* titoli: compatto */
  --medemit-lh-body: 1.55;           /* testi descrittivi: aperto */

  /* Capolettera dell'articolo. Il testo dell'articolo ha corpo 16 px e
     interlinea 1.7, quindi una riga misura 27,2 px: il corpo della lettera è
     tarato perché l'inchiostro di Times New Roman (alto circa 0,66 volte il
     corpo) copra almeno cinque righe, cioè 136 px. Le media query più sotto
     lo riducono dove la colonna di testo si restringe. */
  --medemit-dropcap-size: 208px;

  /* ======================================================================
     3. LAYOUT (tavola 1648 x 928)
     ====================================================================== */
  --medemit-shell-max: 1456px;       /* margine laterale 5-6% su tavola 1648 */
  --medemit-gutter: 48px;
  --medemit-col-gap: 24px;           /* spazio tra colonne 20-24 px */

  --medemit-header-top-h: 180px;     /* header superiore */
  --medemit-nav-h: 40px;             /* barra menu */
  --medemit-ticker-h: 34px;          /* barra notizie/social */
  --medemit-footer-min-h: 110px;     /* footer 94-110 px */

  /* Griglia principale: 5/12 + 4/12 + 3/12 */
  --medemit-grid-main: 5fr;
  --medemit-grid-center: 4fr;
  --medemit-grid-side: 3fr;

  --medemit-hero-ratio: 488 / 295;   /* card in evidenza 488 x 295 */
  --medemit-thumb-w: 120px;          /* miniatura card secondaria 360 x 90 */

  --medemit-content-w: 760px;        /* larghezza di lettura, come contentSize di theme.json */
  --medemit-sidebar-w: 352px;        /* colonna destra: 3/12 della griglia principale */

  /* Scala di spaziatura: 8 px e multipli */
  --medemit-space-1: 8px;
  --medemit-space-2: 16px;
  --medemit-space-3: 24px;
  --medemit-space-4: 32px;
  --medemit-space-5: 40px;

  /* ======================================================================
     4. SEPARATORI E OMBRE
     Linee da 1 px, ombre molto leggere riservate alle card in evidenza.
     ====================================================================== */
  --medemit-line: 1px solid var(--medemit-color-border);
  --medemit-radius: 4px;
  --medemit-shadow-card: 0 1px 3px rgba(23, 43, 58, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--medemit-font-sans);
  font-size: 1rem;
  line-height: var(--medemit-lh-body);
  color: var(--medemit-color-text);
  background-color: var(--medemit-color-bg);
}

h1,
h2,
h3,
h4 {
  line-height: var(--medemit-lh-tight);
  color: var(--medemit-color-text);
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

img {
  max-width: 100%;
  display: block;
}

/* --------------------------------------------------------------------------
   Contenitore: larghezza fluida con tetto massimo, mai oltre il viewport
   -------------------------------------------------------------------------- */
.medemit-shell {
  width: calc(100% - var(--medemit-gutter));
  max-width: var(--medemit-shell-max);
  margin-inline: auto;
}

.medemit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--medemit-space-1);
  padding: var(--medemit-space-1) var(--medemit-space-2);
  border-radius: var(--medemit-radius);
  font-family: inherit;
  font-size: var(--medemit-fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}

.medemit-btn--newsletter {
  background: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
}

.medemit-btn--newsletter:hover {
  background: var(--medemit-color-dark);
}

.medemit-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
  padding: var(--medemit-space-2);
  z-index: 9999;
}

.medemit-skip-link:focus {
  top: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.medemit-header {
  background: var(--medemit-color-bg);
}

/* --- Header superiore: altezza 180 px --- */
.medemit-header__top-area {
  min-height: var(--medemit-header-top-h);
  display: flex;
  align-items: center;
  padding: var(--medemit-space-1) 0;
  background-image:
    linear-gradient(90deg, rgba(6, 44, 73, 0.4) 0%, rgba(6, 44, 73, 0.2) 50%, rgba(6, 44, 73, 0) 100%),
    var(--medemit-custom-hero-bg);
  background-size: cover;
  background-position: center;
}

.medemit-header__top-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--medemit-space-3);
}

.medemit-brand {
  display: flex;
  align-items: center;
  gap: var(--medemit-space-2);
  min-width: 0;
}

/* Il logo è un <img> fornito dal supporto nativo custom-logo di WordPress
   (Personalizzatore → Identità del sito → Logo): mostrato intero, senza ritaglio. */
.medemit-logo {
  display: block;
  flex-shrink: 0;
}

.medemit-logo img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* Il logotipo testuale riproduce il lettering del logo: usa il blu del logo.
   Nel tema definitivo è sostituito dall'immagine caricata dall'utente. */
.medemit-brand__title {
  display: flex;
  flex-direction: column;
  line-height: var(--medemit-lh-tight);
}

.medemit-brand__title .light {
  font-size: var(--medemit-fs-brand-light);
  font-weight: 300;
  color: var(--medemit-color-bg); /* Bianco */
  text-transform: none;
}

/* Nome del sito: condensato e più grande della riga leggera. Il «d'» resta
   minuscolo, mentre «URGENZA» porta la sottolineatura rossa. Le due parole sono
   unità che non si spezzano: quando lo spazio non basta, «d'URGENZA» scende
   sotto «MEDICINA» invece di dividersi a metà. */
.medemit-brand__title .bold {
  font-family: var(--medemit-font-condensed);
  font-stretch: condensed;
  font-size: var(--medemit-fs-brand);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--medemit-color-bg); /* Bianco */
  text-transform: uppercase;
}

/* «d'URGENZA»: resta attaccato, non si divide mai fra due righe. */
.medemit-brand__word {
  display: inline-block;
  white-space: nowrap;
}

/* Il prefisso davanti all'apostrofo resta minuscolo anche dentro un blocco
   in maiuscolo. */
.medemit-brand__lower {
  text-transform: lowercase;
}

.underline-accent {
  position: relative;
  display: inline-block;
}

.underline-accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background-color: var(--medemit-color-accent);
}

.medemit-header__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--medemit-space-1);
  flex-shrink: 0;
}

.medemit-search__form {
  display: flex;
  background: var(--medemit-color-bg);
  border: var(--medemit-line);
  border-radius: var(--medemit-radius);
  overflow: hidden;
  width: min(280px, 40vw);
}

.medemit-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: var(--medemit-space-1) var(--medemit-space-2);
  font-family: inherit;
  font-size: var(--medemit-fs-body);
  color: var(--medemit-color-text);
  outline: none;
}

.medemit-search__input::placeholder {
  color: var(--medemit-color-text-muted);
}

.medemit-search__submit {
  background: none;
  border: none;
  padding: 0 var(--medemit-space-1);
  cursor: pointer;
  color: var(--medemit-color-text-muted);
}

.medemit-search__submit:hover {
  color: var(--medemit-color-primary);
}

/* --- Barra menu: altezza 40 px, a tutta larghezza --- */
.medemit-nav-row {
  background: var(--medemit-color-primary);
  width: 100%;
}

.medemit-nav__list {
  display: flex;
  align-items: center;
  min-height: var(--medemit-nav-h);
  list-style: none;
}

.medemit-nav__list li a {
  display: flex;
  align-items: center;
  gap: var(--medemit-space-1);
  height: var(--medemit-nav-h);
  padding: 0 var(--medemit-space-2);
  color: var(--medemit-color-bg);
  font-size: var(--medemit-fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: background 0.2s;
}

.medemit-nav__list li a:hover,
.medemit-nav__list li a[aria-current="page"] {
  background: rgba(0, 0, 0, 0.12);
}

/* --- Barra notizie/social: altezza di riferimento 34 px --- */
.medemit-ticker-bar {
  background: var(--medemit-color-bg);
  border-bottom: var(--medemit-line);
}

.medemit-ticker-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--medemit-space-3);
  min-height: var(--medemit-ticker-h);
}

.medemit-ticker {
  display: flex;
  align-items: center;
  gap: var(--medemit-space-2);
  min-width: 0;
}

.medemit-ticker__label {
  display: flex;
  align-items: center;
  gap: var(--medemit-space-1);
  flex-shrink: 0;
  font-size: var(--medemit-fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--medemit-color-accent);
}

.medemit-ticker__content {
  display: flex;
  gap: var(--medemit-space-2);
  font-size: var(--medemit-fs-micro);
  color: var(--medemit-color-text-muted);
  overflow: hidden;
  white-space: nowrap;
}

.medemit-ticker__content a:hover {
  color: var(--medemit-color-primary);
}

.medemit-header-social {
  display: flex;
  gap: var(--medemit-space-2);
  flex-shrink: 0;
  color: var(--medemit-color-text-muted);
}

.medemit-header-social a:hover {
  color: var(--medemit-color-primary);
}

/* ==========================================================================
   Hero: griglia 5/12 + 4/12 + 3/12
   ========================================================================== */

.medemit-hero-section {
  padding: var(--medemit-space-4) 0;
  margin-bottom: var(--medemit-space-4);
  border-bottom: var(--medemit-line);
}

.medemit-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--medemit-grid-main)) minmax(0, var(--medemit-grid-center)) minmax(0, var(--medemit-grid-side));
  gap: var(--medemit-col-gap);
  align-items: stretch;
}

.medemit-hero-grid > * {
  min-width: 0;
  min-height: 0;
}

/* Colonna 5/12 — UNICA fonte dell'altezza della riga hero.
   Il rapporto 488:295 della card in evidenza (tavola mockup) definisce
   l'altezza della colonna; le altre due colonne si adattano per stretch.
   L'immagine dentro la card è posizionata in assoluto: non partecipa al
   calcolo dell'altezza e quindi non può sfondare il riquadro. */
.medemit-hero-grid__main {
  display: grid;
  aspect-ratio: var(--medemit-hero-ratio);
  min-width: 0;
  min-height: 0;
}

/* Colonna 4/12: tre card secondarie che si dividono l'altezza della riga.
   minmax(0, 1fr) consente alle righe di restringersi: è ciò che impedisce
   l'overflow quando il testo è più lungo del previsto. */
.medemit-hero-grid__secondary {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--medemit-space-2);
  min-width: 0;
  min-height: 0;
}

/* Colonna 3/12 */
.medemit-hero-grid__sidebar {
  display: grid;
  min-width: 0;
  min-height: 0;
}

/* --- Card in evidenza --- */
.medemit-card--hero-large {
  position: relative;
  height: 100%;
  border-radius: var(--medemit-radius);
  overflow: hidden;
  box-shadow: var(--medemit-shadow-card);
}

.medemit-card__link {
  display: block;
  height: 100%;
}

.medemit-card__image-wrapper {
  width: 100%;
  height: 100%;
}

.medemit-card__image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.medemit-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--medemit-space-3);
  background: linear-gradient(transparent, rgba(6, 44, 73, 0.92));
  color: var(--medemit-color-bg);
  z-index: 2;
}

.medemit-card__badge {
  display: inline-block;
  background: var(--medemit-color-primary);
  padding: 2px var(--medemit-space-1);
  font-size: var(--medemit-fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--medemit-radius);
  margin-bottom: var(--medemit-space-1);
}

.medemit-card__title {
  font-size: var(--medemit-fs-hero);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--medemit-space-1);
  /* Il titolo sta sopra la fotografia: il bianco va dichiarato qui, perché la
     regola dei titoli h1-h4 lo riporterebbe al colore di testo scuro. */
  color: var(--medemit-color-bg);
}

.medemit-card__excerpt {
  font-size: var(--medemit-fs-body);
  line-height: var(--medemit-lh-body);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--medemit-space-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.medemit-card__meta {
  display: flex;
  align-items: center;
  gap: var(--medemit-space-1);
  font-size: var(--medemit-fs-meta);
  color: rgba(255, 255, 255, 0.75);
}

/* --- Card secondaria --- */
.medemit-news-item--small {
  display: grid;
  grid-template-columns: var(--medemit-thumb-w) minmax(0, 1fr);
  gap: var(--medemit-space-2);
  align-items: stretch;
  height: 100%;
  background: var(--medemit-color-bg);
  border: var(--medemit-line);
  border-radius: var(--medemit-radius);
  overflow: hidden;
}

.medemit-news-item--small .medemit-news-item__image {
  height: 100%;
  min-height: 0;
}

.medemit-news-item--small .medemit-news-item__body {
  align-self: center;
  min-height: 0;
  padding-right: var(--medemit-space-2);
}

.medemit-news-item--small .medemit-news-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.medemit-news-item__body {
  min-width: 0;
}

.medemit-news-item__category {
  display: inline-block;
  background: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
  padding: 2px 8px;
  font-size: var(--medemit-fs-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: var(--medemit-radius);
  margin-bottom: var(--medemit-space-1);
  text-transform: uppercase;
}

.medemit-news-item--small .medemit-news-item__title {
  font-size: var(--medemit-fs-card);
  font-weight: 700;
  margin-bottom: var(--medemit-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word; /* Forza il break per evitare overflow testuale */
}

.medemit-news-item__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--medemit-fs-meta);
  color: var(--medemit-color-text-muted);
}

/* --- Widget Rubriche nella hero --- */
.medemit-widget--hero-sidebar {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
  padding: var(--medemit-space-2);
  background: var(--medemit-color-panel);
  border-radius: var(--medemit-radius);
}

.medemit-widget__title {
  font-size: var(--medemit-fs-section);
  font-weight: 700;
  color: var(--medemit-color-dark);
  padding-bottom: var(--medemit-space-1);
  margin-bottom: var(--medemit-space-1);
  border-bottom: 2px solid var(--medemit-color-primary);
}

.medemit-widget-list {
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}

.medemit-widget-list li + li {
  border-top: var(--medemit-line);
}

.medemit-widget-list li a {
  display: grid;
  grid-template-columns: 28px 1fr 14px;
  align-items: center;
  gap: var(--medemit-space-1);
  padding: 6px 0;
}

.medemit-widget-list .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--medemit-radius);
  background: var(--medemit-color-primary-tint);
  color: var(--medemit-color-primary);
}

.medemit-widget-list .title-small {
  display: block;
  font-size: var(--medemit-fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--medemit-color-dark);
}

.medemit-widget-list .desc-small {
  display: block;
  font-size: var(--medemit-fs-meta);
  line-height: var(--medemit-lh-body);
  color: var(--medemit-color-text-muted);
}

.medemit-widget-list .arrow {
  color: var(--medemit-color-text-muted);
}

/* ==========================================================================
   Layout principale: griglia 5/12 + 4/12 + 3/12
   ========================================================================== */

.medemit-main {
  padding-top: var(--medemit-space-4);
  padding-bottom: var(--medemit-space-5);
}

.medemit-layout {
  display: grid;
  grid-template-columns: var(--medemit-grid-main) var(--medemit-grid-center) var(--medemit-grid-side);
  gap: var(--medemit-col-gap);
  align-items: start;
}

.medemit-layout > * {
  min-width: 0;
}

/* Variante a due colonne (articolo singolo, pagina, ricerca): il testo resta
   entro la larghezza di lettura, la colonna destra conserva la larghezza della
   pagina iniziale. Lo spazio libero finisce tra le due colonne. */
.medemit-layout--two-col {
  grid-template-columns: minmax(0, var(--medemit-content-w)) minmax(0, var(--medemit-sidebar-w));
  justify-content: space-between;
}

/* Separatore verticale 1 px coerente con la griglia */
.medemit-layout__left,
.medemit-layout__center {
  border-right: var(--medemit-line);
  padding-right: var(--medemit-col-gap);
}

.medemit-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--medemit-space-2);
  padding-bottom: var(--medemit-space-1);
  margin-bottom: var(--medemit-space-2);
  border-bottom: var(--medemit-line);
}

.medemit-section__title {
  font-size: var(--medemit-fs-section);
  font-weight: 700;
  color: var(--medemit-color-dark);
}

.medemit-section__more {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--medemit-fs-meta);
  font-weight: 600;
  color: var(--medemit-color-primary);
  white-space: nowrap;
}

/* --- Ultime notizie: miniatura a sinistra, testo a destra --- */
.medemit-news-list {
  display: grid;
  gap: var(--medemit-space-2);
}

.medemit-news-list .medemit-news-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--medemit-space-2);
  align-items: start;
  padding-bottom: var(--medemit-space-2);
  border-bottom: var(--medemit-line);
}

.medemit-news-list .medemit-news-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.medemit-news-list .medemit-news-item__image {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.medemit-news-list .medemit-news-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--medemit-radius);
}

.medemit-news-list .medemit-news-item__title {
  font-size: var(--medemit-fs-card);
  font-weight: 700;
  margin-bottom: var(--medemit-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.medemit-news-item__excerpt {
  font-size: var(--medemit-fs-body);
  line-height: var(--medemit-lh-body);
  color: var(--medemit-color-text-muted);
  margin-bottom: var(--medemit-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --- Le nostre rubriche: box con testo sovrapposto (grid stacking) --- */
.medemit-rubriche-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--medemit-space-2);
}

.medemit-rubrica-box {
  display: grid;
  aspect-ratio: 16 / 9;
  border-radius: var(--medemit-radius);
  overflow: hidden;
  box-shadow: var(--medemit-shadow-card);
}

.medemit-rubrica-box img,
.medemit-rubrica-box__content {
  grid-area: 1 / 1;
}

.medemit-rubrica-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Testo sovrapposto all'immagine: pannello blu compatto centrato nel riquadro,
   con la stessa forma dell'etichetta di categoria delle notizie (spigoli
   arrotondati, blu pieno, testo bianco). Si adatta al contenuto invece di
   occupare un rettangolo fisso e ha lo stesso scarto interno dell'etichetta;
   l'unica differenza è il corpo del testo, più grande che nelle altre sezioni. */
.medemit-rubrica-box__content {
  place-self: center;
  justify-items: center;
  display: grid;
  gap: 2px;
  max-width: 90%;
  padding: 2px var(--medemit-space-1);
  background: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
  border-radius: var(--medemit-radius);
  text-align: center;
}

.medemit-rubrica-box .title {
  font-size: var(--medemit-fs-card);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.medemit-rubrica-box .subtitle {
  font-size: var(--medemit-fs-micro);
  line-height: var(--medemit-lh-body);
  color: rgba(255, 255, 255, 0.85);
}

/* --- Widget della colonna destra: pannelli, non riquadri bordati --- */
.medemit-layout__sidebar {
  display: grid;
  gap: var(--medemit-space-3);
}

.medemit-widget {
  padding: var(--medemit-space-2);
  background: var(--medemit-color-panel);
  border-radius: var(--medemit-radius);
}

.medemit-tabs {
  display: flex;
  gap: var(--medemit-space-3);
  margin-bottom: var(--medemit-space-2);
  border-bottom: var(--medemit-line);
}

.medemit-tabs__btn {
  background: none;
  border: none;
  padding: var(--medemit-space-1) 0;
  font-family: inherit;
  font-size: var(--medemit-fs-micro);
  font-weight: 600;
  color: var(--medemit-color-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.medemit-tabs__btn.active {
  color: var(--medemit-color-primary);
  border-bottom-color: var(--medemit-color-primary);
}

.medemit-tabs-content {
  list-style: none;
  display: grid;
}

.medemit-tabs-content li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--medemit-space-1);
  align-items: start;
  padding: var(--medemit-space-1) 0;
}

.medemit-tabs-content li + li {
  border-top: var(--medemit-line);
}

.medemit-tabs-content .num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
  font-size: var(--medemit-fs-meta);
  font-weight: 700;
}

.medemit-tabs-content a {
  font-size: var(--medemit-fs-body);
  font-weight: 600;
  color: var(--medemit-color-text);
}

.medemit-tabs-content a:hover {
  color: var(--medemit-color-primary);
}

.medemit-tabs-content .views {
  display: block;
  font-size: var(--medemit-fs-meta);
  font-weight: 400;
  color: var(--medemit-color-text-muted);
}

.medemit-newsletter-box {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--medemit-space-1);
  margin-bottom: var(--medemit-space-2);
  color: var(--medemit-color-primary);
}

.medemit-newsletter-box h4 {
  font-size: var(--medemit-fs-section);
  color: var(--medemit-color-dark);
  margin-bottom: 4px;
}

.medemit-newsletter-box p {
  font-size: var(--medemit-fs-body);
  line-height: var(--medemit-lh-body);
  color: var(--medemit-color-text-muted);
}

.medemit-newsletter-form {
  display: grid;
  gap: var(--medemit-space-1);
}

.medemit-newsletter-form input {
  padding: var(--medemit-space-1) var(--medemit-space-2);
  border: var(--medemit-line);
  border-radius: var(--medemit-radius);
  font-family: inherit;
  font-size: var(--medemit-fs-body);
  color: var(--medemit-color-text);
}

.medemit-newsletter-form button {
  padding: var(--medemit-space-1);
  border: none;
  border-radius: var(--medemit-radius);
  background: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
  font-family: inherit;
  font-size: var(--medemit-fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.medemit-footer {
  min-height: var(--medemit-footer-min-h);
  padding: var(--medemit-space-5) 0 var(--medemit-space-3);
  background: var(--medemit-color-dark);
  color: var(--medemit-color-bg);
}

.medemit-footer__main {
  display: grid;
  grid-template-columns: 2fr 5fr 3fr;
  gap: var(--medemit-space-4);
  align-items: start;
}

.medemit-footer__branding {
  display: grid;
  gap: var(--medemit-space-2);
}

.medemit-footer__logo img {
  width: 64px;
  height: 64px;
}

/* Il blocco identificativo del piè di pagina riprende le due righe della
   testata, nello stesso ordine — descrizione in chiaro sopra, nome in grassetto
   sotto — ma in scala ridotta, perché la colonna è stretta. */
.medemit-footer .medemit-brand__title .light {
  font-size: var(--medemit-fs-micro);
  color: rgba(255, 255, 255, 0.7);
}

.medemit-footer .medemit-brand__title .bold {
  font-size: 1.05rem;
}

/* Sottolineatura proporzionata al corpo ridotto del piè di pagina. */
.medemit-footer .underline-accent::after {
  bottom: -3px;
  height: 2px;
}

.medemit-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--medemit-space-3);
}

/* Separatori verticali del footer: 1 px con trasparenza */
.medemit-footer__col + .medemit-footer__col {
  border-left: 1px solid var(--medemit-color-border-on-dark);
  padding-left: var(--medemit-space-3);
}

.medemit-footer__col h4 {
  font-size: var(--medemit-fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--medemit-space-2);
}

.medemit-footer__col ul {
  list-style: none;
  display: grid;
  gap: var(--medemit-space-1);
}

.medemit-footer__col a {
  font-size: var(--medemit-fs-micro);
  color: rgba(255, 255, 255, 0.8);
}

.medemit-footer__col a:hover {
  color: var(--medemit-color-bg);
}

.medemit-footer__social-copyright {
  display: grid;
  justify-items: end;
  gap: var(--medemit-space-3);
}

.medemit-footer__social {
  display: flex;
  gap: var(--medemit-space-2);
}

.medemit-footer__copyright {
  font-size: var(--medemit-fs-micro);
  line-height: var(--medemit-lh-body);
  text-align: right;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Responsive — i margini si riducono, le griglie si ricompongono
   ========================================================================== */

@media (max-width: 1280px) {
  .medemit-ticker__content {
    white-space: normal;
  }
}

@media (max-width: 1024px) {
  :root {
    --medemit-gutter: 32px;
    /* Articolo e colonna destra affiancati: la colonna di testo si stringe
       molto (a 769 px misura circa 330 px), quindi la capolettera si riduce
       per non comprimere le righe. */
    --medemit-dropcap-size: 124px;
  }

  .medemit-hero-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* La colonna principale resta l'unica fonte dell'altezza della riga:
     il rapporto 488:295 va mantenuto anche a due colonne, altrimenti la card
     (con immagine in assoluto) collasserebbe a zero. */

  .medemit-hero-grid__sidebar {
    grid-column: 1 / -1;
  }

  .medemit-layout {
    grid-template-columns: 1fr 1fr;
  }

  .medemit-layout__center {
    border-right: none;
    padding-right: 0;
  }

  .medemit-layout__right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  :root {
    --medemit-gutter: 32px;
    /* Sotto questa soglia la colonna destra scende sotto l'articolo e il
       testo torna largo quasi quanto la pagina: la capolettera può risalire. */
    --medemit-dropcap-size: 150px;
  }

  .medemit-header__top-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--medemit-space-2);
  }

  .medemit-header__actions {
    align-items: stretch;
    width: 100%;
  }

  .medemit-search__form {
    width: 100%;
  }

  .medemit-nav__list {
    flex-wrap: wrap;
  }

  .medemit-nav__list li a {
    height: auto;
    padding: var(--medemit-space-1) var(--medemit-space-2);
  }

  .medemit-ticker-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--medemit-space-1);
    padding: var(--medemit-space-1) 0;
  }

  .medemit-hero-grid,
  .medemit-layout {
    grid-template-columns: 1fr;
  }

  /* Senza il vincolo di altezza della colonna, le card secondarie hanno bisogno
     di un minimo per non collassare sulla sola altezza del testo. */
  .medemit-news-item--small {
    min-height: 96px;
  }

  /* A una colonna la card non ha più bisogno del rapporto del mockup: con
     aspect-ratio attivo, il min-height si tradurrebbe in una larghezza minima
     (260 x 488/295 = 430 px) che sfonderebbe la colonna e la pagina. Qui la
     larghezza la decide la griglia e l'altezza resta un minimo. */
  .medemit-hero-grid__main {
    aspect-ratio: auto;
    min-height: 260px;
  }

  .medemit-layout__left,
  .medemit-layout__center {
    border-right: none;
    padding-right: 0;
  }

  .medemit-rubriche-grid {
    grid-template-columns: 1fr;
  }

  .medemit-footer__main {
    grid-template-columns: 1fr;
  }

  .medemit-footer__col + .medemit-footer__col {
    border-left: none;
    padding-left: 0;
  }

  .medemit-footer__social-copyright {
    justify-items: start;
  }

  .medemit-footer__copyright {
    text-align: left;
  }
}

@media (max-width: 480px) {
  :root {
    --medemit-gutter: 24px;
    /* Telefono: capolettera più piccola ma ancora ben distinguibile, per non
       lasciare righe troppo corte. */
    --medemit-dropcap-size: 100px;
  }

  .medemit-news-item--small,
  .medemit-news-list .medemit-news-item {
    grid-template-columns: 1fr;
  }

  .medemit-news-item--small .medemit-news-item__image {
    /* Con la larghezza dichiarata il rapporto si risolve nel verso giusto
       (larghezza -> altezza): senza di essa il riquadro ricavava la larghezza
       dall'altezza della riga e sbordava oltre la card. */
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-width: 0;
  }
}

/* ==========================================================================
   COMPATIBILITÀ WORDPRESS

   Regole richieste dal core: classi generate da WordPress, contenuto degli
   articoli, commenti, widget nativi, modulo di ricerca e paginazione.
   I valori usano i token definiti in :root, quindi non introducono colori,
   spaziature o tipografie nuove.
   ========================================================================== */

/* --- Valore di riserva dell'immagine di sfondo della testata ---
   Finché nel Personalizzatore non è caricata un'immagine, la dichiarazione
   background-image della fascia alta sarebbe invalida e il testo bianco
   risulterebbe invisibile su fondo bianco. Questo gradiente garantisce il
   contrasto. L'immagine scelta dall'utente lo sostituisce. */
:root {
  --medemit-custom-hero-bg: linear-gradient(
    135deg,
    var(--medemit-color-dark) 0%,
    var(--medemit-color-primary) 100%
  );
}

/* --- Immagine in evidenza assente ---
   Evita che una card senza immagine collassi sul solo testo. */
.medemit-thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 80px;
  background-color: var(--medemit-color-panel);
}

/* --- Testi riservati agli screen reader --- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal;
}

.screen-reader-text:focus {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--medemit-space-2);
  overflow: visible;
  clip-path: none;
  background: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
  z-index: 100000;
}

/* ==========================================================================
   Tipografia editoriale dell'articolo singolo

   Due elementi previsti dalla specifica: la linea rossa sotto il titolo e la
   capolettera del primo paragrafo. Entrambi valgono solo per l'articolo
   singolo (body.single-post), così homepage, archivi e pagine statiche non
   vengono toccati.
   ========================================================================== */

/* --- Titolo: una sola linea sotto l'intero titolo, anche su più righe.
   Lo pseudo-elemento è un blocco dentro l'h1, quindi si dispone dopo l'ultima
   riga di titolo e non si ripete riga per riga. --- */
.single-post .medemit-entry-title {
  margin-bottom: var(--medemit-space-2);
}

.single-post .medemit-entry-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 0.3em;
  background-color: var(--medemit-title-underline);
}

/* --- Capolettera del primo paragrafo.
   Il primo <p> figlio diretto del contenuto è il primo paragrafo reale: i
   blocchi che possono precederlo (immagini, titoli, citazioni) non sono
   paragrafi e non vengono selezionati. Il float non introduce un contenitore,
   quindi il testo scorre a destra della lettera e prosegue sotto di essa. --- */
.single-post .medemit-entry-content > p:first-of-type::first-letter {
  float: left;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--medemit-dropcap-size);
  line-height: 0.72;
  font-weight: normal;
  color: var(--medemit-dropcap-color);
  padding-right: 0.1em;
  /* Correzione ottica: il float parte dal bordo superiore della riga di testo,
     quindi la cima della lettera resterebbe più alta della cima della prima
     riga. Lo scostamento dell'inchiostro cresce con il corpo (circa 0,02
     volte), quello del testo no: da qui la differenza fra la parte fissa e
     quella in em. Misurato: 0,1 px di scarto a corpo 208 px, -0,3 px a 100 px. */
  padding-top: calc(8px - 0.02em);
}

/* --- Contenuto degli articoli e delle pagine --- */
.medemit-entry-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--medemit-color-text);
}

.medemit-entry-content > * + * {
  margin-top: var(--medemit-space-3);
}

.medemit-entry-content a {
  color: var(--medemit-color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.medemit-entry-content h2,
.medemit-entry-content h3,
.medemit-entry-content h4 {
  line-height: var(--medemit-lh-tight);
  color: var(--medemit-color-text);
}

.medemit-entry-content h2 {
  font-size: var(--medemit-fs-hero);
}

.medemit-entry-content h3 {
  font-size: var(--medemit-fs-section);
}

.medemit-entry-content h4 {
  font-size: var(--medemit-fs-card);
}

.medemit-entry-content ul,
.medemit-entry-content ol {
  padding-left: var(--medemit-space-3);
}

.medemit-entry-content li + li {
  margin-top: var(--medemit-space-1);
}

.medemit-entry-content blockquote {
  border-left: 3px solid var(--medemit-color-primary);
  padding-left: var(--medemit-space-3);
  color: var(--medemit-color-text-muted);
}

.medemit-entry-content img,
.medemit-entry-content iframe {
  max-width: 100%;
  height: auto;
}

.medemit-entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--medemit-fs-body);
}

.medemit-entry-content th,
.medemit-entry-content td {
  border: var(--medemit-line);
  padding: var(--medemit-space-1) var(--medemit-space-2);
  text-align: left;
}

.medemit-entry-content .wp-block-image img {
  border-radius: var(--medemit-radius);
}

.medemit-entry-content .wp-block-separator {
  border: 0;
  border-top: var(--medemit-line);
}

.medemit-entry-content figcaption,
.medemit-entry-content .wp-caption-text {
  font-size: var(--medemit-fs-meta);
  color: var(--medemit-color-text-muted);
  margin-top: var(--medemit-space-1);
}

/* --- Allineamenti di blocchi e immagini --- */
.alignleft {
  float: left;
  margin: 0 var(--medemit-space-3) var(--medemit-space-2) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--medemit-space-2) var(--medemit-space-3);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.medemit-entry-content .alignwide {
  max-width: var(--medemit-shell-max);
}

.medemit-entry-content .alignfull {
  max-width: none;
  width: 100%;
}

/* --- Commenti (markup generato da wp_list_comments) --- */
.comment-list,
.comment-list .children {
  list-style: none;
  padding: 0;
}

.comment-list .children {
  padding-left: var(--medemit-space-3);
}

.comment-body {
  border-top: var(--medemit-line);
  padding: var(--medemit-space-3) 0;
}

.comment-author {
  font-weight: 700;
  color: var(--medemit-color-text);
}

.comment-metadata {
  font-size: var(--medemit-fs-meta);
  color: var(--medemit-color-text-muted);
}

.comment-content {
  margin-top: var(--medemit-space-2);
}

.comment-respond {
  margin-top: var(--medemit-space-4);
}

.comment-form label {
  display: block;
  font-size: var(--medemit-fs-micro);
  color: var(--medemit-color-text-muted);
  margin-bottom: var(--medemit-space-1);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: var(--medemit-space-1) var(--medemit-space-2);
  border: var(--medemit-line);
  border-radius: var(--medemit-radius);
  font: inherit;
  color: var(--medemit-color-text);
}

.comment-form .submit,
.medemit-entry-content .wp-block-button__link {
  background: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
  border: 0;
  border-radius: var(--medemit-radius);
  padding: var(--medemit-space-2) var(--medemit-space-3);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.comment-form .submit:hover,
.medemit-entry-content .wp-block-button__link:hover {
  background: var(--medemit-color-dark);
}

/* --- Paginazione (classi del core: navigation pagination, page-numbers) --- */
.pagination {
  margin-top: var(--medemit-space-4);
  border-top: var(--medemit-line);
  padding-top: var(--medemit-space-3);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--medemit-space-1);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--medemit-space-1);
  border: var(--medemit-line);
  border-radius: var(--medemit-radius);
  font-size: var(--medemit-fs-micro);
  color: var(--medemit-color-text);
  text-decoration: none;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--medemit-color-primary);
  border-color: var(--medemit-color-primary);
  color: var(--medemit-color-bg);
}

/* --- Widget nativi di WordPress ---
   Le liste generate dai widget del core non hanno classi proprie: vengono
   stilizzate qui, escludendo la lista già gestita dal tema. */
.medemit-widget ul:not(.medemit-widget-list) {
  list-style: none;
  padding: 0;
}

.medemit-widget ul:not(.medemit-widget-list) li + li {
  border-top: var(--medemit-line);
}

.medemit-widget ul:not(.medemit-widget-list) li a {
  display: block;
  padding: var(--medemit-space-1) 0;
  font-size: var(--medemit-fs-body);
  color: var(--medemit-color-text);
  text-decoration: none;
}

.medemit-widget ul:not(.medemit-widget-list) li a:hover {
  color: var(--medemit-color-primary);
}

.medemit-widget select,
.medemit-widget input[type="text"],
.medemit-widget input[type="search"] {
  width: 100%;
  padding: var(--medemit-space-1) var(--medemit-space-2);
  border: var(--medemit-line);
  border-radius: var(--medemit-radius);
  font: inherit;
  font-size: var(--medemit-fs-body);
  color: var(--medemit-color-text);
}

/* --- Modulo di ricerca --- */
.search-form {
  display: flex;
  gap: var(--medemit-space-1);
}

.search-form .search-field {
  flex: 1;
  min-width: 0;
  padding: var(--medemit-space-1) var(--medemit-space-2);
  border: var(--medemit-line);
  border-radius: var(--medemit-radius);
  font: inherit;
  font-size: var(--medemit-fs-body);
  color: var(--medemit-color-text);
}

.search-form .search-submit {
  background: var(--medemit-color-primary);
  border: 0;
  border-radius: var(--medemit-radius);
  color: var(--medemit-color-bg);
  padding: var(--medemit-space-1) var(--medemit-space-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.search-form .search-submit:hover {
  background: var(--medemit-color-dark);
}