/* ==========================================================================
   PLANE SPOTTERS BARI — user.css per il child template "cassiopeia_psb"
   ==========================================================================
   Dove va: Sistema -> Modelli sito -> cassiopeia_psb -> Dettagli e file
            -> cartella "css" (creala se non esiste) -> Nuovo file
            -> nome "user", tipo ".css"

   Questo file vive DENTRO il child template: è isolato dal Cassiopeia
   originale, non lo tocca in nessun modo. Struttura, posizioni e moduli
   restano quelli standard di Cassiopeia - qui si riscrive solo l'aspetto
   degli elementi che esistono già.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@700;800;900&family=Piazzolla:ital,wght@0,400;0,500;0,600;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --psb-ink: #1C2B3A;
  --psb-ink-soft: rgba(28,43,58,0.66);
  --psb-dark: #1C3E34;
  --psb-paper: #F2E9D6;
  --psb-paper-deep: #E7D9B8;
  --psb-terracotta: #B5432E;
  --psb-terracotta-dark: #8E3222;
  --psb-radar: #2E6E5E;
  --psb-brass: #9C7C3C;
  --psb-cream: #F7F1E3;

  /* Variabili ufficiali di Cassiopeia: cambiarle qui le applica ovunque
     nel template (bottoni, link, hover) senza dover inseguire ogni
     singolo selettore. */
  --cassiopeia-color-primary: var(--psb-terracotta);
  --cassiopeia-color-link: var(--psb-radar);
  --cassiopeia-color-hover: var(--psb-terracotta-dark);
}

/* ---------- Tipografia globale ---------- */
body {
  background-color: var(--psb-paper);
  color: var(--psb-ink);
  font-family: 'Piazzolla', serif;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Big Shoulders Stencil Display', sans-serif;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--psb-ink);
}
.nav-link, .badge, .breadcrumb, .small, small,
.site-title, .site-description, .page-header,
.pagination .page-link {
  font-family: 'IBM Plex Mono', monospace;
}

/* Estetica "carta nautica": angoli squadrati ovunque, niente arrotondato */
.card, .btn, .badge, .alert, .moduletable, .form-control,
.pagination .page-link, .nav-tabs .nav-link {
  border-radius: 0 !important;
}

/* ---------- Header (barra logo) ---------- */
.container-header {
  background-color: var(--psb-dark);
  background-image: none;
}
.container-header .site-title,
.container-header .site-description,
.container-header a {
  color: var(--psb-cream);
}

/* ---------- Topbar / menu ---------- */
.container-topbar {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--psb-paper);
  border-bottom: 1px solid var(--psb-ink);
}
.container-topbar .nav-link {
  color: var(--psb-ink-soft) !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.container-topbar .nav-link:hover,
.container-topbar .nav-link.active {
  color: var(--psb-ink) !important;
  border-bottom: 1px solid var(--psb-terracotta);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 0.78rem;
  letter-spacing: 0.4px;
  color: var(--psb-ink-soft);
  text-transform: uppercase;
}
.breadcrumb a { color: var(--psb-ink-soft); }
.breadcrumb a:hover { color: var(--psb-terracotta); }

/* ---------- Bottoni ---------- */
.btn-primary {
  background-color: var(--psb-terracotta);
  border-color: var(--psb-terracotta);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.82rem;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--psb-terracotta-dark);
  border-color: var(--psb-terracotta-dark);
}
.btn-secondary, .btn-outline-secondary, .btn-info {
  color: var(--psb-ink);
  border-color: var(--psb-ink);
  background-color: transparent;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 0.82rem;
}
.btn-secondary:hover, .btn-outline-secondary:hover, .btn-info:hover {
  background-color: var(--psb-ink);
  color: var(--psb-cream);
}

/* ---------- Card (articoli, moduli a riquadro) ---------- */
.card {
  background-color: var(--psb-cream);
  border: 1px solid var(--psb-ink);
}
.card .card-title, .card .card-title a {
  color: var(--psb-ink);
  font-family: 'Piazzolla', serif;
  font-weight: 600;
}
.card .card-body small, .card .card-body .small,
article .created, article .category {
  color: var(--psb-terracotta-dark);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ---------- Badge / tag ---------- */
.badge {
  background-color: var(--psb-paper-deep) !important;
  color: var(--psb-ink) !important;
  border: 1px solid var(--psb-brass);
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* ---------- Moduli generici (riquadri sidebar, ecc.) ---------- */
.moduletable, .card.moduletable, .content-wrapper .card {
  border: 1px solid var(--psb-paper-deep);
  background-color: var(--psb-cream) !important;
}
.moduletable .moduletable-heading, .moduletable h3 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--psb-ink-soft);
  border-bottom: 1px solid var(--psb-paper-deep);
  padding-bottom: 8px;
}

/* ---------- Paginazione ---------- */
.pagination .page-link {
  color: var(--psb-ink);
  border-color: var(--psb-paper-deep);
}
.pagination .page-item.active .page-link {
  background-color: var(--psb-terracotta);
  border-color: var(--psb-terracotta);
}

/* ---------- Footer ---------- */
.container-footer {
  background-color: var(--psb-dark);
  color: var(--psb-cream);
}
.container-footer a { color: rgba(247,241,227,0.8); }
.container-footer a:hover { color: var(--psb-cream); }

/* ---------- Messaggi di sistema Joomla (avvisi/conferme in cima alla pagina) ---------- */
#system-message-container .alert,
.alert-message {
  background-color: var(--psb-paper-deep) !important;
  border: 1px solid var(--psb-ink) !important;
  color: var(--psb-ink) !important;
  border-radius: 0 !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
}
#system-message-container .alert-success { border-color: var(--psb-radar) !important; }
#system-message-container .alert-danger { border-color: var(--psb-terracotta) !important; }

/* ---------- "Dal diario di volo" - articoli recenti in formato scheda ----------
   Attiva assegnando "psb-latest-cards" nel campo "Classe Blog" (Layout
   Blog) della voce di menu Home - Joomla applica quella classe
   DIRETTAMENTE su .blog-items, quindi i selettori qui sotto la
   combinano senza spazio (.blog-items.psb-latest-cards), non come
   antenato di un elemento separato.
   Classi reali confermate via ispezione: .blog-items.masonry-3 (contenitore),
   .blog-item (scheda singola), .item-image (foto), .item-content (testo). */
.blog-items.psb-latest-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  gap: 24px;
}
@media (max-width: 860px) {
  .blog-items.psb-latest-cards {
    grid-template-columns: 1fr !important;
  }
}
.blog-items.psb-latest-cards .blog-item {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
  position: static !important;
  background: var(--psb-cream);
  border: 1px solid var(--psb-ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.blog-items.psb-latest-cards .item-image {
  margin: 0;
}
.blog-items.psb-latest-cards .item-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.blog-items.psb-latest-cards .item-content {
  padding: 16px 20px 20px;
  min-width: 0;
}
.blog-items.psb-latest-cards .item-title {
  font-family: 'Piazzolla', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--psb-ink);
  margin: 0 0 8px;
}
.blog-items.psb-latest-cards .item-title a {
  color: inherit;
  text-decoration: none;
}
.blog-items.psb-latest-cards .item-title a:hover {
  color: var(--psb-terracotta);
}

/* icone social/edit e pulsanti di condivisione: fuori posto in una card
   compatta, e fonte di dimensioni intrinseche imprevedibili */
.blog-items.psb-latest-cards .icons,
.blog-items.psb-latest-cards .s2s_supra_contenedor {
  display: none;
}

/* primo blocco data/categoria: reso compatto, in stile "strumento di bordo" */
.blog-items.psb-latest-cards .item-content > dl.article-info {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--psb-terracotta-dark);
  margin: 0 0 10px;
}
.blog-items.psb-latest-cards .item-content > dl.article-info dt,
.blog-items.psb-latest-cards .item-content > dl.article-info dd {
  display: inline;
  margin: 0;
}
.blog-items.psb-latest-cards .item-content > dl.article-info dt {
  display: none;
}

/* testo di anteprima: sia per gli articoli con wrapper .spotters-bari-article
   (quello "principale"), sia per quelli senza (paragrafo diretto) */
.blog-items.psb-latest-cards .spotters-bari-article .lead,
.blog-items.psb-latest-cards .item-content > p {
  font-family: 'Piazzolla', serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--psb-ink-soft);
  margin: 0 0 12px;
}
.blog-items.psb-latest-cards .spotters-bari-article .lead em {
  font-style: normal;
}
.blog-items.psb-latest-cards .spotters-bari-article hr {
  display: none;
}
/* secondo dl.article-info (data/visite): nascosto ovunque compaia, con o
   senza il wrapper .spotters-bari-article */
.blog-items.psb-latest-cards .spotters-bari-article > dl.article-info,
.blog-items.psb-latest-cards .item-content > dl.article-info ~ dl.article-info {
  display: none;
}

.blog-items.psb-latest-cards .readmore a,
.blog-items.psb-latest-cards .readmore .btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--psb-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--psb-ink);
  border-radius: 0 !important;
  padding: 0;
  text-decoration: none;
}

/* ---------- Tabellone FIDS (radar locale): font e griglia sfondo ----------
   I colori vanno impostati direttamente nella scheda "Colori" del modulo
   (sfondo #E7D9B8, testo #1C2B3A, accento #B5432E) - qui serve solo quello
   che quei campi non raggiungono: font e sfondo a griglia. */
.fidsboard-root {
  background-image:
    repeating-linear-gradient(0deg, rgba(28,43,58,0.10) 0px, rgba(28,43,58,0.10) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(28,43,58,0.10) 0px, rgba(28,43,58,0.10) 1px, transparent 1px, transparent 48px);
  padding: 14px !important;
}
.fidsboard-root .fidsboard-current-label,
.fidsboard-root .fidsboard-recent-title {
  font-family: 'Big Shoulders Stencil Display', sans-serif !important;
  letter-spacing: 0.5px !important;
}
.fidsboard-root .fidsboard-callsign,
.fidsboard-root .fidsboard-current-sublabel,
.fidsboard-root .fidsboard-info-title,
.fidsboard-root .fidsboard-info-value,
.fidsboard-root .fidsboard-recent-comp,
.fidsboard-root .fidsboard-recent-reg,
.fidsboard-root .fidsboard-recent-route {
  font-family: 'IBM Plex Mono', monospace !important;
}
/* ---------- Classe opzionale per pannelli in stile "carta nautica" ----------
   Da assegnare via "Aggiungi classe CSS" nelle Opzioni Avanzate di un
   modulo specifico (es. il tabellone Radar Locale), senza toccare codice. */
.psb-panel {
  background-color: var(--psb-paper-deep) !important;
  border: 1px solid var(--psb-ink) !important;
  color: var(--psb-ink) !important;
}