/*
 Theme Name: Micro Child
 Template: twentytwentyfour
 Text Domain: micro-child
*/

/* ---- Variables & base ---- */
:root{
  --ms-container: 1200px; /* larghezza fissa ottimale */
  --ms-gap: 20px;
  --ms-gray: #e5e5e5;
  --ms-shadow: 0 6px 16px rgba(0,0,0,.12);
  --ms-red: #d00000; /* rosso hover link */
}
html,body{ background:#fff; }
body{ color:#000; }

/* Link: ereditano il colore del testo, ma diventano rossi all'hover */
a{ color: inherit; }
a:hover{ color: var(--ms-red); }

/* ---- Container ---- */
.ms-container{
  max-width: var(--ms-container);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---- Header ---- */
.ms-header{ border-bottom:1px solid var(--ms-gray); }
.ms-header-inner{ gap: 20px; }
.ms-brand .wp-block-site-logo{ margin-right: 10px; }
.ms-brand .wp-block-site-title{ font-weight:700; letter-spacing:.2px; }

/* ---- Primary nav ---- */
.ms-primary-nav{ align-items:center; }
.ms-primary-nav .wp-block-navigation__responsive-container-open{
  border:1px solid #ddd;
  border-radius:999px;
  padding:.25rem .5rem;
}

/* ---- Home layout (main + sidebar) ---- */
.ms-home-grid .wp-block-columns{ align-items:flex-start; }
.ms-sidebar .wp-block-group{ margin-bottom:24px; }
.ms-sidebar .ms-widget-title{ font-weight:700; margin-bottom:.5rem; }

/* Titoletti sezione (etichetta sopra le righe children) */
.ms-section-title{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#111;
  margin: 8px 0 12px;
}

/* ---- Rows: una per voce del menu o per sottocategorie ---- */
.ms-row{ padding: 24px 0; }
.ms-row + .ms-row{ border-top:1px solid var(--ms-gray); }

/* Griglia per ogni riga: 3 colonne */
.ms-row .wp-block-post-template{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ms-gap);
}

/* ---- Card ---- */
.ms-card{
  transition: transform .15s ease, box-shadow .15s ease;
}
.ms-card:hover{
  transform: translateY(-2px) scale(1.01);
}
@media (prefers-reduced-motion: reduce){
  .ms-card{ transition:none; }
}
.ms-card .wp-block-post-featured-image{
  position:relative;
  margin-bottom:.5rem;
}
.ms-card .wp-block-post-featured-image a{ display:block; }
.ms-card .wp-block-post-featured-image img{
  width:100%;
  height:auto;
  aspect-ratio: 1 / 1;     /* immagine quadrata */
  object-fit: cover;
  border-radius:16px;       /* angoli arrotondati */
  border:4px solid #fff;    /* cornice bianca 4px */
  box-shadow: var(--ms-shadow); /* ombra sfumata grigia */
}

/* Titolo post sotto l’immagine (+ hover rosso) */
.ms-card .wp-block-post-title a{
  text-decoration:none;
  color: inherit;
}
.ms-card .wp-block-post-title a:hover{
  color: var(--ms-red);
}

/* ---- Badge categoria sovrapposto all'immagine ---- */
.ms-card .ms-badge{
  position:absolute;
  top:10px; left:10px;
  background:rgba(0,0,0,.80); /* fallback */
  color:#fff;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  padding:6px 10px;
  border-radius:999px;
  pointer-events:none;
  white-space:nowrap;
}

/* Varianti colore badge (top-level) */
.ms-badge--home{ background:#111; }
.ms-badge--podcast{ background:#E11D48; } /* rosso/rosa */
.ms-badge--music{ background:#2563EB; }   /* blu */
.ms-badge--blog{ background:#10B981; }    /* verde */

/* Varianti colore badge (sottocategorie comuni di Music) */
.ms-badge--dischi{ background:#8B5CF6; }    /* violet */
.ms-badge--eventi{ background:#F59E0B; }    /* amber */
.ms-badge--articoli{ background:#14B8A6; }  /* teal */
.ms-badge--libri{ background:#EA580C; }     /* orange */

/* badge “secondario” (parent) spostato un po' più sotto */
.ms-card .ms-badge + .ms-badge{ top:42px; }

/* ---- Sidebar ---- */
.ms-banner{
  border:1px dashed #ccc;
  padding:12px;
  text-align:center;
  border-radius:12px;
  background:#fafafa;
  font-size:.9rem;
}

/* ---- Footer ---- */
.ms-footer{
  border-top:1px solid var(--ms-gray);
  padding: 24px 0;
}
.ms-footer .wp-block-columns{ align-items:center; }
.ms-footer .wp-block-social-links{ justify-content:center; }

/* ---- Responsive ---- */
@media (max-width: 960px){
  .ms-row .wp-block-post-template{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px){
  .ms-row .wp-block-post-template{
    grid-template-columns: 1fr;
  }
}