/*
Theme Name: BC Serravalle
Theme URI: https://www.basketclubserravalle.com
Author: Marco Pratone
Description: Tema ufficiale Basket Club Serravalle
Version: 1.9.81
License: GNU General Public License v2 or later
Text Domain: wolves-bc
*/

/* ============================================================
   FONT MONTSERRAT – file locali nel tema (cartella font/)
   ============================================================ */
@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('font/Montserrat-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('font/Montserrat-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('font/Montserrat-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('font/Montserrat-ExtraBold.woff2') format('woff2');
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:    #0033ca;
  --red:     #fe0000;
  --red-text: #e60000;
  --dark:    #0a0a1a;
  --light:   #f4f6fb;
  --white:   #ffffff;
  --grey:    #6b7280;
  --border:  #dde2ef;

  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Montserrat', sans-serif;

  /* --header-h è definito dal Customizer (functions.php, default 72px).
     Qui solo un fallback di sicurezza se il customizer non gira. */
  --header-h: 72px;
  --radius:   6px;
  /* Larghezza del contenuto pagina: 75% centrato, tetto 1140px.
     Su schermi larghi domina il tetto (margini netti), su schermi
     medi domina il 75% (contenuto visibilmente più stretto). */
  --content-w: 85%;
  --shadow:   0 4px 24px rgba(0,0,0,.12);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 30px;
  color: rgb(0, 0, 0);
  background: var(--white);
  /* niente padding-top: l'header è in overlay trasparente sul contenuto */
}
/* Montserrat forzato su tutto il sito (sostituisce lo snippet esterno) */
body, p, h1, h2, h3, h4, h5, h6, a, span, div, li, button, input, textarea, select {
  font-family: 'Montserrat', sans-serif;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--blue); text-decoration: none; }
a:hover { color: var(--red-text); }
ul  { list-style: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--dark);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }
p  { margin-bottom: 1rem; }

/* ============================================================
   UTILITIES
   ============================================================ */
.container {
  width: min(1200px, 94%);
  margin-inline: auto;
}
.btn {
  display: inline-block;
  padding: .55em 1.4em;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .22s ease;
}
.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red-text);
}
.btn-primary:hover {
  background: transparent;
  color: var(--red-text);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline:hover {
  background: var(--white);
  color: var(--blue);
}

/* ============================================================
   HEADER – trasparente, logo centrale, menu diviso
   ============================================================ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  min-height: 124px;
  background: transparent;
  display: flex;
  align-items: center;
  z-index: 9000;
  overflow: visible;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: min-height .35s ease, background .35s ease, box-shadow .35s ease;
}
#site-header.is-scrolled { min-height: 68px; }

/* Stato "scrolled" (stile Olimpia): l'header diventa una barra
   bianca fissa con menu scuro, così è sempre leggibile anche sopra
   il contenuto chiaro della pagina. Sopra la hero resta trasparente. */
#site-header.is-scrolled {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
}
/* Menu blu Wolves quando l'header è bianco */
#site-header.is-scrolled .primary-nav-half .menu a {
  color: #0033ca;
}
#site-header.is-scrolled .primary-nav-half .menu a:hover,
#site-header.is-scrolled .primary-nav-half .menu .current-menu-item > a,
#site-header.is-scrolled .primary-nav-half .menu .current_page_item > a {
  color: #e60000;
}
/* Sotto-menu a tendina: header bianco -> testo blu */
#site-header.is-scrolled .primary-nav-half .sub-menu a { color: #0033ca; }
/* Hamburger blu su header bianco – solo desktop (su mobile l'header
   resta blu, quindi l'hamburger deve restare bianco). */
@media (min-width: 901px) {
  #site-header.is-scrolled #menu-toggle span { background: #0033ca; }
}
/* Icona login blu su header bianco (il colore inline è bianco) */
#site-header.is-scrolled .header-login-icon { color: #0033ca !important; }
#site-header.is-scrolled .header-login-icon:hover { color: #e60000 !important; }

/* Gradiente di leggibilità in cima */
#site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  z-index: -1;
  opacity: 1;
  transition: opacity .35s ease;
  pointer-events: none;
}
#site-header.is-scrolled::before { opacity: 0; }

#site-header .header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0 2rem;
  overflow: visible;
}

/* Logo centrale – grande in cima, si rimpicciolisce allo scroll.
   Il logo Wolves ha già il suo sfondo circolare interno: nessun
   cerchio esterno aggiuntivo. */
.site-logo {
  grid-column: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.site-logo-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  margin-top: 18px;      /* stacca il logo dal bordo superiore */
  margin-bottom: -28px;  /* sporge verso il basso, non verso l'alto */
}
.site-logo-circle img {
  height: 160px;
  width: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
  transition: height .35s ease, filter .35s ease;
}

/* Stato scrolled: torna in linea e più piccolo (contrazione marcata) */
#site-header.is-scrolled .site-logo-circle {
  top: 0;
}
#site-header.is-scrolled .site-logo-circle img {
  height: 72px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Le due metà del menu */
.primary-nav-half {
  display: flex;
  align-items: center;
  min-width: 0;
}
#primary-nav-left  { grid-column: 1; justify-content: flex-end; }
#primary-nav-right { grid-column: 3; justify-content: flex-start; }

.primary-nav-half .menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
}

.primary-nav-half .menu a {
  display: block;
  padding: .45em .9em;
  color: rgba(255,255,255,.92);
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 0;
  border-bottom: 3px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.primary-nav-half .menu a:hover,
.primary-nav-half .menu .current-menu-item > a,
.primary-nav-half .menu .current_page_item > a {
  color: #fff;
  border-bottom-color: #fff;
}

/* Dropdown desktop */
.primary-nav-half .menu-item-has-children { position: relative; }
.primary-nav-half .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  padding: .4rem 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease;
  z-index: 100;
}
.primary-nav-half .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.primary-nav-half .sub-menu a {
  color: var(--dark);
  border-bottom: none;
  padding: .5em 1.2em;
  font-size: .9rem;
}
.primary-nav-half .sub-menu a:hover {
  background: var(--light);
  color: var(--blue);
  border-bottom: none;
}

/* Hamburger (mobile) */
#menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: .5rem;
  background: none;
  border: none;
  grid-column: 3;
  justify-self: end;
}
#menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: all .3s ease;
}
#menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menu-toggle.active span:nth-child(2) { opacity: 0; }
#menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Admin bar WordPress: sposta header e nav mobile */
.admin-bar #site-header {
  top: 32px;
}
.admin-bar #primary-nav-mobile {
  top: calc(32px + var(--header-h));
}
@media screen and (max-width: 782px) {
  .admin-bar #site-header {
    top: 46px;
  }
  .admin-bar #primary-nav-mobile {
    top: calc(46px + var(--header-h));
  }
}

/* Menu mobile unificato (nascosto su desktop) */
#primary-nav-mobile {
  display: none;
}

/* ============================================================
   MOBILE NAV
   ============================================================ */
@media (max-width: 900px) {
  /* Su mobile: nascondi le due metà desktop, mostra solo logo + hamburger */
  #primary-nav-left, #primary-nav-right { display: none; }

  #site-header .header-inner {
    grid-template-columns: auto 1fr auto;
  }
  .site-logo { grid-column: 1; justify-content: flex-start; }

  /* Logo dentro l'header su mobile: piccolo e centrato, non sfora */
  .site-logo { align-items: center; }
  .site-logo-circle { top: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; align-self: center; }
  .site-logo-circle img { height: 50px !important; width: auto !important; }
  #site-header.is-scrolled .site-logo-circle img { height: 50px !important; }

  #menu-toggle { display: flex; }

  /* L'header è sempre solido su mobile per leggibilità */
  #site-header { background: rgba(0, 51, 202, .96); }
  #site-header::before { display: none; }

  /* Su mobile: header full-width senza margini, sempre COMPATTO e fisso
     (stessa altezza in apertura e dopo lo scroll, niente spazio vuoto). */
  #site-header {
    top: 0; left: 0; right: 0;
    border-radius: 0;
    min-height: 72px !important;
    height: 72px !important;
    align-items: center;
  }
  /* Anche allo scroll resta uguale (nessun cambio di altezza su mobile) */
  #site-header.is-scrolled {
    min-height: 72px !important;
    height: 72px !important;
    background: rgba(0, 51, 202, .96) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
  }
  /* Su mobile il menu resta bianco anche scrolled (header blu) */
  #site-header.is-scrolled #menu-toggle span { background: #fff !important; }

  #primary-nav-mobile {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0; bottom: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: #0033ca;
    flex-direction: column;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: none;
    overflow-y: auto;
    z-index: 9500;
  }
  .admin-bar #primary-nav-mobile {
    height: calc(100vh - var(--header-h) - 32px);
    height: calc(100dvh - var(--header-h) - 32px);
  }
  #primary-nav-mobile.open { display: flex; }
  #primary-nav-mobile::before { display: none; }
  #primary-nav-mobile ul { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
  #primary-nav-mobile > ul > li > a,
  #primary-nav-mobile .menu > li > a {
    display: block;
    padding: .8em 1.5em;
    color: rgba(255,255,255,.92);
    font-family: var(--font-display);
    font-weight: 700;
    font-style: normal;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.1);
    text-decoration: none;
  }
  #primary-nav-mobile .current-menu-item > a { color: #fff; }
  #primary-nav-mobile .sub-menu {
    list-style: none;
    background: rgba(0,0,0,.15);
    display: none;
    margin: 0; padding: 0;
  }
  #primary-nav-mobile .menu-item-has-children.open > .sub-menu { display: block; }
  /* Lo snippet globale 'non-cliccabile' mette pointer-events:none sui
     link genitore E lo fa ereditare ai figli: nel menu mobile va
     riabilitato su TUTTO, altrimenti né i genitori aprono il sotto-menu
     né i link interni sono toccabili. */
  #primary-nav-mobile,
  #primary-nav-mobile * {
    pointer-events: auto !important;
  }
  #primary-nav-mobile .non-cliccabile > a,
  #primary-nav-mobile .menu-item-has-children > a {
    cursor: pointer !important;
  }
  #primary-nav-mobile .sub-menu a {
    display: block;
    color: rgba(255,255,255,.8);
    padding: .6em 2.5em;
    font-size: .9rem;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
  }
  #primary-nav-mobile .sub-menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
}


/* ============================================================
   PAGINE FULL WIDTH
   ============================================================ */
.page-full,
.single-post-wrap,
.archive-wrap,
.home-wrap {
  width: 100%;
}

/* ============================================================
   HERO (homepage / pagine con featured image)
   ============================================================ */
.hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  background: var(--blue);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,51,202,.92) 0%, rgba(10,10,26,.75) 100%);
  z-index: 1;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .35;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: calc(5rem + var(--header-h)) 2rem 5rem;
  max-width: 800px;
}
.hero-eyebrow {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .3em .9em;
  border-radius: 3px;
  margin-bottom: 1rem;
}
.hero-title {
  color: var(--white);
  margin-bottom: 1rem;
}
.hero-sub {
  color: rgba(255,255,255,.8);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* ============================================================
   SECTION STYLES
   ============================================================ */
.section { padding: 5rem 0; }
.section-alt { background: var(--light); }
.section-dark { background: var(--dark); color: var(--white); }
.section-dark h2, .section-dark h3 { color: var(--white); }

.section-header {
  margin-bottom: 3rem;
}
.section-header h2 {
  position: relative;
  display: inline-block;
  padding-bottom: .5rem;
}
.section-header h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 48px; height: 4px;
  background: var(--red);
  border-radius: 2px;
}
.section-header p {
  color: var(--grey);
  margin-top: .75rem;
  max-width: 520px;
}

/* ============================================================
   POST CARD (archivio / blog)
   ============================================================ */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.post-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  border: 1px solid var(--border);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.post-card-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--light);
}
.post-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.post-card:hover .post-card-thumb img { transform: scale(1.04); }

.post-card-cat {
  position: absolute;
  top: .75rem; left: .75rem;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25em .7em;
  border-radius: 3px;
}

.post-card-body {
  padding: 1.25rem 1.4rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8rem;
  color: var(--red-text);
  margin-bottom: .65rem;
}
.post-card-meta svg { flex-shrink: 0; }

.post-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .75rem;
  line-height: 1.2;
}
.post-card-title a { color: inherit; }
.post-card-title a:hover { color: var(--blue); }

.post-card-excerpt {
  color: var(--grey);
  font-size: .9rem;
  flex: 1;
  margin-bottom: 1rem;
}

.post-card-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.post-card-link:hover { color: var(--red-text); }
.post-card-link::after { content: '→'; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.single-post-hero {
  position: relative;
  background: var(--dark);
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.single-post-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .4;
}
.single-post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,26,.55) 0%, rgba(10,10,26,.7) 45%, rgba(254,0,0,.68) 100%);
}
.single-post-hero-content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 2rem;
  width: 100%;
}
.single-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .75rem;
}
.post-category-badge {
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28em .8em;
  border-radius: 3px;
}
.post-date-badge {
  color: rgba(255,255,255,.7);
  font-size: .85rem;
}
.single-post-title {
  color: var(--white);
  margin-bottom: 0;
}

/* Post content */
.single-post-content-wrap {
  max-width: 1020px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.post-content {
  font-size: 1.05rem;
  line-height: 1.75;
}
.post-content h2, .post-content h3 { margin: 2rem 0 .75rem; }
.post-content ul, .post-content ol {
  margin: 1rem 0 1rem 1.5rem;
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content blockquote {
  border-left: 4px solid var(--blue);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--light);
  font-style: italic;
  color: var(--grey);
}
.post-content img {
  border-radius: var(--radius);
  margin: 1.5rem 0;
}

/* ============================================================
   PHOTO GALLERY (post gallery)
   ============================================================ */
.post-gallery {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--border);
}
.post-gallery h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.post-gallery h3::after {
  /* red accent line */
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}
.gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  background: var(--light);
}
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.gallery-grid a:hover img { transform: scale(1.08); }

/* Lightbox overlay */
#gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#gallery-lightbox.active { display: flex; }
#gallery-lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 8px 48px rgba(0,0,0,.6);
}
.lightbox-close {
  position: fixed;
  top: 1.25rem; right: 1.5rem;
  color: var(--white);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  background: none;
  border: none;
  opacity: .8;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-prev, .lightbox-next {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  color: var(--white);
  font-size: 2.5rem;
  cursor: pointer;
  background: rgba(255,255,255,.1);
  border: none;
  padding: .5rem .9rem;
  border-radius: var(--radius);
  opacity: .8;
  transition: opacity .2s;
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }

/* ============================================================
   ARCHIVE / CATEGORY
   ============================================================ */
.archive-wrap {
  padding: 4rem 0;
}
.archive-header {
  background: var(--blue);
  color: var(--white);
  padding: calc(3rem + var(--header-h)) 2rem 3rem;
  margin-bottom: 3rem;
}
.archive-header h1 { color: var(--white); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  border: 2px solid var(--border);
  color: var(--dark);
  transition: all .18s;
}
.pagination a:hover { border-color: var(--blue); color: var(--blue); }
.pagination .current {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* ============================================================
   FOOTER – emerge da sotto come se fosse dietro alla pagina
   Z-index basso: il contenuto scorre sopra, il footer resta fisso
   in fondo e diventa visibile solo quando la pagina finisce.
   ============================================================ */
/* ============================================================
   FOOTER – tre fasce: rosso social, blu dati, blu scuro legal
   ============================================================ */
#site-footer {
  position: relative;
  z-index: 10;
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}

/* Spacer */
#footer-spacer {
  display: none;
}

/* ── FASCIA 1: rosso ── */
.footer-social {
  background: #fe0000;
  padding: 0;
}
.footer-social-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  gap: 1.2rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
}
.footer-brand-logo {
  height: 40px;
  width: auto;
}
.footer-app-group {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.footer-app-label {
  color: #fff;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: .3rem;
}
.footer-circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: border-width .15s ease, border-color .15s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}
.footer-circle-btn:hover {
  background: transparent;
  border-color: #fff;
  border-width: 2.5px;
  color: #fff;
  transform: none;
}
.footer-circle-btn:hover svg {
  color: #fff;
}
/* icone piene: restano bianche in hover */
.footer-circle-btn:hover svg:not([fill="none"]) {
  fill: #fff;
}
/* icona a contorni (Instagram): mantiene fill trasparente e stroke bianco */
.footer-circle-btn:hover svg[fill="none"] {
  fill: none;
  stroke: #fff;
}
.footer-vert-line {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.4);
  flex-shrink: 0;
}
.footer-social-group {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.footer-social-divider {
  height: 1px;
  background: rgba(255,255,255,.25);
  margin: 0 2.5rem;
}

/* ── FASCIA 2: blu ── */
.footer-dati {
  background: #0033ca !important;
  padding: .8rem 2.5rem;
}
.footer-dati-inner {
  max-width: 1200px;
  margin: 0 auto;
  color: rgba(255,255,255,.85) !important;
  font-size: .78rem;
  line-height: 1.8;
  display: block !important;
  columns: unset !important;
  column-count: unset !important;
}
.footer-dati-inner * {
  color: rgba(255,255,255,.85) !important;
}
.footer-dati-inner strong {
  color: #fff !important;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── FASCIA 3: blu scuro ── */
.footer-legal {
  background: #001f7a;
  padding: .5rem 2.5rem;
}
.footer-legal-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.footer-legal-inner a {
  color: rgba(255,255,255,.7);
  font-size: .72rem;
  text-decoration: none;
  transition: color .15s;
  letter-spacing: .03em;
}
.footer-legal-inner a:hover { color: #fff; text-decoration: underline; }
.footer-legal-sep {
  color: rgba(255,255,255,.35);
  font-size: .72rem;
}

/* Mobile */
@media (max-width: 768px) {
  .footer-social-inner {
    flex-wrap: wrap;
    justify-content: center;
    padding: .8rem 1rem;
    gap: .8rem;
  }
  .footer-brand { display: none; }
  .footer-dati { padding: .8rem 1rem; }
  .footer-dati-inner {
    flex-direction: column;
    gap: .8rem;
  }
  .footer-legal { padding: .4rem 1rem; }
}

/* ============================================================
   PAGE (content) – larghezza 75% centrata, tetto 1140px
   ============================================================ */
/* Contenuto delle pagine standard (page.php) e dei template custom
   roster/staff: la hero resta a tutta larghezza, il contenuto sotto
   viene centrato al 75% con tetto 1140px. Su mobile torna a tutta
   larghezza perché stringere ancora non darebbe leggibilità. */
.page-content {
  width: var(--content-w);
  max-width: 1300px;
  margin-inline: auto;
  padding: 3rem 0 4rem;
}
.page-content > *:first-child { margin-top: 0; }

/* Allineamenti Gutenberg: sfondano il contenitore 75%.
   .alignwide  = più largo del testo ma con margini (max 1400px)
   .alignfull  = da bordo a bordo della finestra
   La tecnica margin-left:50% + translateX(-50%) su 100vw riporta il
   blocco alla larghezza della viewport ignorando il wrapper stretto. */
.page-content .alignwide {
  width: 90vw;
  max-width: 1400px;
  margin-left: 50%;
  transform: translateX(-50%);
}
.page-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  transform: none;
}
/* Le immagini full/wide riempiono davvero il blocco */
.page-content .alignfull img,
.page-content .alignwide img { width: 100%; }
/* alignfull a filo dei bordi (niente padding laterale residuo) */
.page-content .alignfull { padding-left: 0; padding-right: 0; }

@media (max-width: 768px) {
  .page-content {
    width: 100%;
    padding: 2rem 1.25rem 3rem;
  }
}
.page-hero {
  background: var(--blue);
  padding: calc(3.5rem + var(--header-h)) 2rem 3.5rem;
  margin-bottom: 3rem;
}
.page-hero h1 { color: var(--white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Testo body: leggera riduzione su schermi più piccoli per
   mantenere proporzioni leggibili (specifica desktop: 16px/30px) */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    line-height: 26px;
  }
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
    line-height: 23px;
  }
}

@media (max-width: 900px) {
  .posts-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 480px) {
  .posts-grid { grid-template-columns: 1fr; }
  .single-post-content-wrap { padding: 2rem 1rem 4rem; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* WordPress alignment helpers */
.alignleft  { float: left;  margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter{ text-align: center; margin: 1.5rem auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { font-size: .82rem; color: var(--grey); text-align: center; }

/* ============================================================
   BEAVER BUILDER – COMPATIBILITÀ FULL WIDTH
   ============================================================ */

/* BB: compatibilità base - nessun override di larghezza */
.fl-builder-content,
.fl-page-content,
.fl-post-content {
    padding: 0;
    margin: 0;
}

/* Quando BB è in modalità editing, compensa l'header fisso */
.fl-builder .fl-builder-bar {
    top: 0 !important;
}

/* In modalità editing BB la toolbar resta in cima */
body.fl-builder-edit {
    padding-top: 40px !important;
}

/* Moduli BB – rimuovi eventuali background bianchi indesiderati */
.fl-module-content {
    /* non forziamo nulla, BB decide */
}

/* L'header è trasparente e in overlay: se la PRIMA riga di BB ha uno sfondo
   chiaro/bianco, conviene che l'autore della pagina imposti un "Top Margin"
   o "Top Padding" di almeno 90px nelle impostazioni della riga (Spacing)
   così il testo non finisce sotto al logo. Se invece la prima riga ha
   un'immagine di sfondo grande (come l'hero di Olimpia Milano), va benissimo
   lasciarla a 0: l'header si sovrappone esattamente come previsto. */

/* ============================================================
   ADMIN BAR (barra di WordPress nel frontend)
   Quando l'utente loggato vede la wpadminbar (32px desktop,
   46px mobile), l'header trasparente deve scendere di conseguenza.
   La gestione è unificata più in alto (sezione "Admin bar WordPress").
   ============================================================ */

/* ============================================================
   PAGINA 404 – semplice, sfondo bianco, testo nero
   ============================================================ */
.error-404-wrap {
  min-height: 70vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 3rem) 1.5rem 4rem;
  text-align: center;
}
.error-404-inner {
  max-width: 560px;
}
.error-404-code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 11rem);
  font-weight: 800;
  line-height: .85;
  color: var(--dark);
  letter-spacing: .02em;
}
.error-404-title {
  color: var(--dark);
  margin-top: .75rem;
}
.error-404-text {
  color: var(--grey);
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.7;
}

/* Nasconde voce Home nel menu mobile quando si è sulla homepage */
#primary-nav-mobile .hide-on-home { display: none !important; }

/* Editing Beaver Builder: header nascosto così l'area è editabile.
   L'anteprima reale si vede uscendo dall'editor. */
body.fl-builder-edit #site-header { display: none !important; }
body.fl-builder-edit #footer-spacer { display: none !important; }
body.fl-builder-edit #site-footer { display: none !important; }

/* BB editing: area contenuto pagina deve avere altezza minima
   altrimenti la dropzone collassa quando si trascina un modulo */
body.fl-builder-edit .fl-builder-content {
    min-height: calc(100vh - 120px) !important;
}

/* BB: compatibilità full width */



/* ============================================================
   LOGIN / AREA RISERVATA – pagina accesso-squadra
   ============================================================ */
.wolves-login-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border-top: 5px solid #0033ca;
}
.wolves-login-title {
  color: #0033ca;
  font-size: 1.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 .25rem;
  border: none;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}
.wolves-login-sub {
  color: #666;
  font-size: .95rem;
  margin: 0 0 1.5rem;
}
.wolves-login-error {
  background: #fdecec;
  border-left: 4px solid #fe0000;
  color: #a10000;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  font-size: .95rem;
  font-weight: 600;
}
.wolves-login-wrap .login-username,
.wolves-login-wrap .login-password { margin-bottom: 1rem; }
.wolves-login-wrap label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .35rem;
  color: #222;
  font-family: 'Montserrat', sans-serif;
}
.wolves-login-wrap input[type="text"],
.wolves-login-wrap input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #d5d5d5;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color .15s;
}
.wolves-login-wrap input[type="text"]:focus,
.wolves-login-wrap input[type="password"]:focus {
  border-color: #0033ca;
  outline: none;
}
.wolves-login-wrap .login-remember {
  font-size: .9rem;
  margin-bottom: 1rem;
  font-weight: 400;
}
.wolves-login-wrap .login-remember label {
  display: inline;
  font-weight: 400;
}
.wolves-login-wrap .login-submit input,
.wolves-login-wrap .button-primary {
  background: #0033ca;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  width: 100%;
  transition: background .15s;
  font-family: 'Montserrat', sans-serif;
}
.wolves-login-wrap .login-submit input:hover,
.wolves-login-wrap .button-primary:hover { background: #002499; }
.wolves-login-forgot {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  color: #0033ca;
  font-size: .9rem;
  text-decoration: none;
}
.wolves-login-forgot:hover { text-decoration: underline; }

/* Barra benvenuto + logout nell'area riservata */
.wolves-riservata-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #eee;
}
.wolves-riservata-benvenuto {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: #0033ca;
  font-family: 'Montserrat', sans-serif;
}
.wolves-logout-btn {
  background: #fe0000;
  color: #fff;
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: background .15s;
}
.wolves-logout-btn:hover { background: #cc0000; color: #fff; }

/* Link iscriviti / password dimenticata sotto il form login */
.wolves-login-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
  font-size: .9rem;
}
.wolves-login-links a { color: #0033ca; text-decoration: none; }
.wolves-login-links a:hover { text-decoration: underline; }
.wolves-login-iscriviti { font-weight: 700; color: #e60000 !important; }
.wolves-login-sep { color: #ccc; }



/* ============================================================
   FIX: ripristina header/footer/banner sulla pagina di login.
   Uno snippet esterno li nasconde con display:none !important
   (pensato per un login "a schermo pieno"). Qui li riportiamo
   visibili perché la pagina deve avere l'intestazione normale.
   ============================================================ */
body.page-template-page-login #site-header { display: flex !important; }
body.page-template-page-login #wolves-page-banner { display: flex !important; }
body.page-template-page-login #site-footer,
body.page-template-page-login .site-footer { display: block !important; }

/* ============================================================
   CALENDARI FIP – restyling stile Olimpia (tutte le squadre)
   Colore --bsg-accento ereditato dal titolo (rosso PS / blu giov.).
   Ombre via drop-shadow sul tr (compatibile Safari).
   ============================================================ */
.bsg-wrapper { --bsg-accento: #fe0000; }

/* Titoli sezione leggeri: testo grande + linea sotto (no fascia piena) */
.bsg-wrapper .bsg-section-title {
  background: transparent !important;
  color: #111 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 0 0 12px 0 !important;
  margin-bottom: 20px !important;
  border-bottom: 3px solid var(--bsg-accento);
  border-radius: 0 !important;
}

/* Pulsanti fase leggeri */
.bsg-wrapper .bsg-tab-btn { background:#fff !important; border:2px solid var(--bsg-accento) !important; color:var(--bsg-accento) !important; border-radius:8px !important; font-weight:700; padding:8px 18px !important; }
.bsg-wrapper .bsg-tab-btn.active { background:var(--bsg-accento) !important; color:#fff !important; }

/* Pulsanti giornata tondi */
.bsg-wrapper .bsg-gio-row { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; padding:14px 0; margin-bottom:6px; }
.bsg-wrapper .bsg-gio-row-label { font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:.5px; color:#222; min-width:80px; flex:0 0 auto; }
.bsg-wrapper .bsg-gio-btn { flex:1 1 0 !important; min-width:0 !important; height:40px; padding:0 4px !important; border-radius:8px !important; border:2px solid #e5e5e5 !important; background:#fff; font-size:14px !important; font-weight:700; color:#555; cursor:pointer; transition:.2s; display:inline-flex; align-items:center; justify-content:center; }
.bsg-wrapper .bsg-gio-btn:hover { border-color:var(--bsg-accento) !important; color:var(--bsg-accento); }
.bsg-wrapper .bsg-gio-btn.active { background:var(--bsg-accento) !important; color:#fff !important; border-color:var(--bsg-accento) !important; }

/* Titolo giornata (stile Olimpia) */
.bsg-wrapper .bsg-giornata-titolo { font-family:'Montserrat',sans-serif; font-size:24px; font-weight:800; color:#111; margin:24px 0 4px; }
.bsg-wrapper .bsg-giornata-linea { border:none; border-top:2px solid #e5e5e5; margin:0 0 16px; }

/* Righe partita: card ariose, niente divisioni interne, ombra unica (drop-shadow = Safari ok) */
.bsg-wrapper .bsg-gio-table { width:100%; border-collapse:separate !important; border-spacing:0 12px !important; }
.bsg-wrapper .bsg-gio-table td { background:#fff; padding:0 !important; vertical-align:middle; box-shadow:none !important; border-top:1px solid #ececec !important; border-bottom:1px solid #ececec !important; }
.bsg-wrapper .bsg-gio-table td.bsg-cal-cell { padding:22px 16px !important; }
.bsg-wrapper .bsg-gio-table td:first-child { border-radius:12px 0 0 12px; }
.bsg-wrapper .bsg-gio-table td:last-child { border-radius:0 12px 12px 0; border-right:1px solid #ececec !important; }
.bsg-wrapper .bsg-gio-table tr { filter: drop-shadow(0 2px 6px rgba(0,0,0,.06)); }

/* Blocco data col colore squadra */
.bsg-wrapper .bsg-cal-data { border-radius:12px 0 0 12px; padding:0 !important; min-width:80px; border:none !important; }
.bsg-wrapper .bsg-cal-data-inner { padding:16px 10px; }

/* Punteggio: rosso fisso, su una riga */
.bsg-wrapper .bsg-risultato { min-width:130px; }
.bsg-wrapper .bsg-risultato .bsg-cal-inner { flex-wrap:nowrap !important; }
.bsg-wrapper .bsg-risultato .bsg-cal-inner span { white-space:nowrap !important; font-size:20px !important; font-weight:900 !important; color: #e60000 !important; }

/* Loghi più grandi */
.bsg-wrapper .bsg-cal-logo { width:60px !important; height:60px !important; object-fit:contain; }
.bsg-wrapper .bsg-cal-cell:not(.bsg-risultato) span { font-weight:700; font-size:15px; }

/* Elenco unico (toggle attivo) */
.bsg-elenco-unico .bsg-elenco-fase { font-family:'Montserrat',sans-serif; font-weight:800; font-size:22px; text-transform:uppercase; letter-spacing:.5px; color:#111; background:transparent; padding:0 0 10px 0; border-bottom:3px solid var(--bsg-accento); border-radius:0; margin:24px 0 16px; }

/* Barra toggle leggera */
.bsg-toggle-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 20px; margin:14px 0; background:#f7f7f7; border:1px solid #ececec; border-radius:12px; }
.bsg-toggle-left { display:flex; align-items:center; gap:12px; }
.bsg-toggle-bar label { color:#222; font-weight:700; font-family:'Montserrat',sans-serif; cursor:pointer; }
.bsg-toggle-sw { position:relative; width:54px; height:30px; background:#d5d5d5; border-radius:30px; cursor:pointer; transition:.25s; flex:0 0 auto; }
.bsg-toggle-sw.on { background:var(--bsg-accento); }
.bsg-toggle-knob { position:absolute; top:3px; left:3px; width:24px; height:24px; background:#fff; border-radius:50%; transition:.25s; }
.bsg-toggle-sw.on .bsg-toggle-knob { left:27px; }
.bsg-ics-btn { color:var(--bsg-accento); font-weight:800; font-family:'Montserrat',sans-serif; cursor:pointer; text-decoration:none; display:flex; align-items:center; gap:8px; }
.bsg-ics-btn:hover { text-decoration:underline; }

@media (max-width:600px){
  .bsg-wrapper .bsg-gio-btn { min-width:0 !important; height:34px; font-size:12px !important; padding:0 2px !important; }
  .bsg-wrapper .bsg-gio-table td.bsg-cal-cell { padding:14px 8px !important; }
  .bsg-wrapper .bsg-cal-logo { width:44px !important; height:44px !important; }
  .bsg-wrapper .bsg-risultato .bsg-cal-inner span { font-size:17px !important; }
  .bsg-wrapper .bsg-section-title { font-size:22px !important; }
  .bsg-wrapper .bsg-giornata-titolo { font-size:20px; }
}


/* ============================================================
   Modale "Aggiungi al calendario" (Google / Apple / Ics)
   ============================================================ */
.bsg-modale-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:99999; padding:20px; }
.bsg-modale { background:#fff; border-radius:16px; max-width:520px; width:100%; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3); font-family:'Montserrat',sans-serif; animation:bsgModaleIn .2s ease; }
@keyframes bsgModaleIn { from { transform:scale(.95); opacity:0; } to { transform:scale(1); opacity:1; } }
.bsg-modale-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; background:#f7f7f7; border-bottom:1px solid #ececec; }
.bsg-modale-head span { font-size:18px; font-weight:700; color:#333; }
.bsg-modale-close { background:none; border:none; font-size:26px; line-height:1; color:#888; cursor:pointer; padding:0; width:32px; height:32px; }
.bsg-modale-close:hover { color:#333; }
.bsg-modale-body { padding:30px 24px; text-align:center; }
.bsg-modale-icon { margin:0 auto 16px; display:block; }
.bsg-modale-testo { font-size:17px; color:#444; line-height:1.5; margin:0 0 26px; font-weight:600; }
.bsg-modale-opzioni { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.bsg-modale-opt { display:flex; flex-direction:column; align-items:center; gap:10px; width:130px; padding:22px 10px; background:#f7f7f7; border:1px solid #ececec; border-radius:12px; text-decoration:none; color:#333; font-weight:700; transition:.2s; }
.bsg-modale-opt:hover { background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.1); transform:translateY(-2px); }
.bsg-modale-opt span:last-child { font-size:15px; }
.bsg-modale-g { font-size:34px; font-weight:800; background:conic-gradient(from -45deg,#ea4335 110deg,#4285f4 90deg 180deg,#34a853 180deg 270deg,#fbbc05 270deg) border-box; -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.bsg-modale-apple { font-size:36px; line-height:1; color:#000; }
.bsg-modale-ics { font-size:16px; font-weight:800; color:#333; border:2px solid #333; border-radius:6px; padding:6px 8px; line-height:1; }
@media (max-width:480px){ .bsg-modale-opt { width:100%; flex-direction:row; justify-content:center; } }

/* ============================================================
   Elenco Comunicati stile app (category.php)
   ============================================================ */
.wolves-com-list { display:flex; flex-direction:column; gap:12px; max-width:820px; margin-left:auto; margin-right:auto; }
.wolves-com-item { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #ececec; border-radius:14px; padding:16px 18px; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.06); transition:.2s; }
.wolves-com-item:hover { box-shadow:0 4px 16px rgba(0,0,0,.12); transform:translateY(-1px); }
.wolves-com-icon { flex:0 0 auto; width:52px; height:52px; background:#eaf0ff; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.wolves-com-text { flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0; }
.wolves-com-title { font-family:'Montserrat',sans-serif; font-weight:800; font-size:18px; color:#1a1a1a; line-height:1.25; }
.wolves-com-item:hover .wolves-com-title { color:#0033ca; }
.wolves-com-date { font-family:'Montserrat',sans-serif; font-size:14px; color:#888; }
.wolves-com-arrow { flex:0 0 auto; display:flex; align-items:center; }
@media (max-width:600px){
  .wolves-com-item { padding:14px; gap:12px; }
  .wolves-com-icon { width:46px; height:46px; }
  .wolves-com-title { font-size:16px; }
  .wolves-com-date { font-size:13px; }
}

/* Titolo principale nel corpo pagina (es. pagina Storia) - dimensione equilibrata */
.title-main { font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.15; }


/* Fix striscia grigia in cima: i <p> che WordPress genera attorno a <style>/<script>
   nei blocchi HTML (e i <p> vuoti) causano un margin-collapse che spinge giù il
   contenuto. Vanno nascosti del tutto, non basta azzerare il margine. */
.home-wrap > p:empty,
.page-content > p:empty,
.home-wrap > p:has(> style),
.home-wrap > p:has(> script),
.page-content > p:has(> style),
.page-content > p:has(> script) { display: none !important; }