/*
Theme Name: mio-child
Template: covernews
Version: 1.0
*/

/* ──────────────────────────────────────────
   HEADER – riga logo + banner (rosso)
────────────────────────────────────────── */
.site-header{
  background-color:#D40100 !important;
  border-bottom:2px solid #bb1919;
  padding:0 !important;
  margin:0 !important;
  position:relative;
}
.masthead-banner,
.masthead-banner .container,
.masthead-banner .container .row{
  padding:0 !important;
  margin:0 !important;
  height:auto !important;
  min-height:0 !important;
}
/* FULL-WIDTH: la container dell’header occupa 100 % */
.masthead-banner .container{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
/* Flexbox per centrare col-4 se col-8 è vuota */
.masthead-banner .row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
}
.masthead-banner .row .col-md-4,
.masthead-banner .row .col-md-8{
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
}
/* Branding */
.site-branding,
.site-branding *{
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}
.site-branding img.custom-logo{
  max-width:400px !important;
  height:auto !important;
  display:block;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.site-branding .site-title a{
  font-family:'Source Sans Pro',sans-serif;
  font-size:60px !important;
  color:#fff !important;
  text-transform:uppercase;
  text-decoration:none;
}
.site-branding .site-description{
  font-size:1.2em !important;
  color:#eee !important;
}

/* ──────────────────────────────────────────
   NAVIGAZIONE PRINCIPALE (barra scura)
────────────────────────────────────────── */
.main-navigation{background:#000;}
.main-navigation ul li a{
  font-size:1em;
  color:#fff;
  padding:8px 12px !important;
  display:inline-block;
  transition:background-color .3s,color .3s;
  text-decoration:none;
}
.main-navigation ul li a:hover,
.main-navigation ul li a:focus{
  background:#bb1919;
  color:#fff;
}
/* Menu orizzontale */
#site-navigation .navigation-container .main-navigation ul.menu>li{
  display:inline-block !important;
  vertical-align:middle;
  margin-right:15px !important;
  width:auto !important;
}
#site-navigation .navigation-container .main-navigation ul.menu>li:last-child{
  margin-right:0 !important;
}
#site-navigation .navigation-container .main-navigation ul.menu>li>a{
  color:#fff !important;
  padding:15px 20px !important;
}
#site-navigation .navigation-container .main-navigation ul.menu>li>a:hover{
  background:#bb1919 !important;
}

@media(max-width:768px){
  .main-navigation ul li a{padding:10px 15px;font-size:.9em;}
  #site-navigation .navigation-container .main-navigation ul.menu>li{
    display:block !important;margin:0 0 5px !important;
  }
}

/* ──────────────────────────────────────────
   HERO (Banner principale)
────────────────────────────────────────── */
.hero-banner{
  background:url('../covernews/images/hero.jpg') center/cover no-repeat;
  height:500px;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;
}
.hero-banner .hero-content{
  background:rgba(0,0,0,.5);
  padding:20px 40px;
}

/* ──────────────────────────────────────────
   ARTICOLI
────────────────────────────────────────── */
.article-list .article-item{border-bottom:1px solid #ddd;padding:20px 0;}
.article-list .article-item:last-child{border-bottom:none;}

/* Titolo GRANDE SOLO nei singoli articoli */
.single .entry-title{
  /* font-size:5em !important; RIMOSSO PER EVITARE CONFLITTO */
  color:#000 !important;
  line-height:1.15;
}

/* Titolo nei loop (home, categorie, widget, ecc.) */
.article-item .entry-title a,
.article-title,
.latest-posts-full .entry-title a,
.latest-posts-grid .article-title a{
  font-size:1.3em !important;
  color:#000 !important;
}
.article-item .entry-title a:hover,
.article-title a:hover{color:#bb1919 !important;}

.article-item .entry-meta{font-size:.9em;color:#777;margin-bottom:10px;}
.article-item .entry-content{font-size:1em;line-height:1.6;color:#555;}

/* ──────────────────────────────────────────
   SIDEBAR & FOOTER
────────────────────────────────────────── */
.widget{background:#f9f9f9;padding:15px;margin-bottom:20px;border:1px solid #ddd;}
.widget-title{font-size:1.5em;color:#000;margin-bottom:15px;
  border-bottom:2px solid #bb1919;padding-bottom:5px;}
.site-footer{
  background:#000000 !important;color:#ccc;padding:40px 20px;text-align:center;
  border-top:2px solid #bb1919;
}
.site-footer a{color:#bb1919;text-decoration:none;transition:color .3s;}
.site-footer a:hover{color:#fff;}

/* ──────────────────────────────────────────
   TIPOGRAFIA
────────────────────────────────────────── */
body,button,input,select,textarea{
  font-family:'Lato',sans-serif;
  font-size:16px;line-height:1.6;color:#3a3a3a;
}

/* ---- Titoli nei LOOP (home, categorie, widget) --------------------- */
.home   .entry-title,
.home   .entry-title a,
.blog   .entry-title,
.blog   .entry-title a,
.archive .entry-title,
.archive .entry-title a,
.search  .entry-title,
.search  .entry-title a,
.latest-posts-full  .entry-title,
.latest-posts-full  .entry-title a,
.latest-posts-grid  .article-title,
.latest-posts-grid  .article-title a,
.latest-posts-grid  .entry-title,
.latest-posts-grid  .entry-title a {
    font-size: 1.3em !important;      /* ≈ 16 px */
    line-height: 1.25 !important;
}
/* Nasconde il contatore dei commenti (icona + numero) ovunque */
.aft-comment-count { display: none !important; }

/* 1. BLOCCO DELLO SCROLL ORIZZONTALE */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.masthead-banner .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2a. STILE TITOLI H2 NEGLI ARTICOLI (Principali) */
.entry-content h2,
.single-post .entry-content h2 {
    font-size: 28px !important; 
    font-weight: 700 !important; 
    color: #111111 !important; 
    margin-top: 45px !important; 
    margin-bottom: 15px !important;
    margin-left: 0 !important;
    line-height: 1.2;
    border-bottom: 3px solid #bb1919 !important; 
    padding-bottom: 5px !important; 
    display: block !important;
    width: max-content !important; 
    max-width: 100% !important;
}

/* 2b. STILE TITOLI H3 NEGLI ARTICOLI (Secondari) */
.entry-content h3,
.single-post .entry-content h3 {
    font-size: 22px !important; 
    font-weight: 700 !important; 
    color: #111111 !important; 
    margin-top: 30px !important; 
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    line-height: 1.2;
    border-bottom: none !important; /* Riga rossa rimossa del tutto */
    padding-bottom: 0 !important; 
    display: block !important;
    width: max-content !important; 
    max-width: 100% !important;
}

/* Nasconde eventuali pseudo-elementi decorativi ereditati dal tema genitore */
.entry-content h2::after, 
.entry-content h2::before,
.entry-content h3::after, 
.entry-content h3::before {
    display: none !important;
}

/* FIX LARGHEZZA TESTO ARTICOLO (Rimuove l'effetto imbuto da TUTTI i contenitori) */
.single-post .entry-content,
.single-post .entry-content p,
.single-post .entry-content ul,
.single-post .entry-content ol,
.single-post .entry-content .wp-block-group,
.single-post .entry-content .wp-block-columns {
    max-width: 100% !important;
    width: 100% !important;
    clear: both !important; /* Questo impedisce che il testo venga "schiacciato" da elementi precedenti */
}

/* 3. ALLINEAMENTO IMMAGINI E PARAGRAFI */
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block; 
    margin: 10px auto 20px auto; /* Centra l'immagine e aggiunge spazio sotto */
}

.entry-content p {
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 4. DIMENSIONI TITOLO PRINCIPALE (H1) */
h1.entry-title,
.single-post h1.entry-title,
.post-title {
    font-size: 42px !important; /* Dimensione fissa per visualizzazione desktop */
    font-weight: 900 !important; /* Peso del font massimo */
    line-height: 1.2 !important;
}

/* Adattamento dimensioni H1 per dispositivi mobili */
@media screen and (max-width: 768px) {
    h1.entry-title,
    .single-post h1.entry-title,
    .post-title {
        font-size: 32px !important; /* Riduzione della dimensione per schermi piccoli */
    }
}

/* ==========================================================================
   STILE HERO POST 
   ========================================================================== */
.nyp-hero-wrap {
    max-width: 750px; /* Ancora più stretto (era 900) */
    margin: 30px auto 40px auto; 
    text-align: center;
    background-color: #fdfae6; /* Giallino tenue molto elegante */
    border-bottom: 3px solid #111111; 
    padding: 25px 20px 20px 20px; /* Spazio interno per dare respiro allo sfondo */
    position: relative; /* Serve per posizionare l'etichetta "In evidenza" */
}
.nyp-hero-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #111111; /* Sfondo nero per l'etichetta */
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
}
.nyp-hero-wrap a {
    text-decoration: none !important;
    color: #111111 !important;
    display: block;
}
.nyp-hero-img {
    width: 100%;
    height: auto;
    max-height: 400px; /* Immagine più compatta */
    object-fit: cover;
    margin-bottom: 20px;
}
.nyp-hero-title {
    font-size: 36px !important; /* Titolo più piccolo (era 42) */
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
    margin-top: 0 !important;
    border: none !important; 
}
.nyp-hero-excerpt {
    font-size: 16px; /* Testo più piccolo */
    line-height: 1.4;
    color: #444;
    max-width: 650px;
    margin: 0 auto;
}

/* Adattamento per i telefoni */
@media screen and (max-width: 768px) {
    .nyp-hero-wrap {
        padding: 40px 15px 15px 15px; /* Più spazio in alto su mobile per non coprire l'immagine con l'etichetta */
    }
    .nyp-hero-title {
        font-size: 28px !important;
    }
    .nyp-hero-excerpt {
        font-size: 15px;
    }
}

/* ==========================================================================
   EFFETTO RUMORE (GRAIN) SULLO SFONDO ROSSO DELL'HEADER
   ========================================================================== */
.site-header {
    position: relative;
    overflow: hidden; /* Evita che il rumore sbordi fuori dall'header */
}

/* Crea la patina di rumore */
.site-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Fondamentale: permette di cliccare il logo attraverso il rumore */
    
    /* Genera il rumore visivo (SVG in Base-64) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    
    opacity: 0.35; /* REGOLA L'INTENSITÀ QUI: 0.10 è leggero, 0.30 è molto sporco/pesante */
    z-index: 0; 
}

/* Assicura che i contenuti (il logo) stiano SOPRA il rumore */
.masthead-banner {
    position: relative;
    z-index: 1;
}