/*
Theme Name: TRC Puglia
Theme URI: https://www.trcpuglia.it/
Description: Tema per l'emittente televisiva TRC Puglia. Fondo scuro da broadcast, player della diretta in evidenza, palette derivata dal logo.
Author: TRC Puglia
Template: twentytwentyfive
Version: 1.0.5
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: trc-puglia
*/

:root {
  --trc-nero:      #0A0B0D;
  --trc-nero-2:    #14161A;
  --trc-riga:      #262A31;
  --trc-bianco:    #FFFFFF;
  --trc-carta:     #F5F6F7;
  --trc-inchiostro:#14161A;
  --trc-tenue:     #5C636D;
  --trc-vermiglio: #C83803;
  --trc-azzurro:   #38C2FF;
  --trc-ambra:     #F8C423;
}

/* ---------------- intestazione ---------------- */

.trc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--trc-nero);
  border-bottom: 1px solid var(--trc-riga);
}
body.admin-bar .trc-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .trc-header { top: 46px; } }

.trc-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.trc-logo { display: inline-flex; align-items: center; line-height: 0; }
.trc-logo img { height: 46px; width: auto; display: block; }
.trc-logo:focus-visible { outline: 2px solid var(--trc-azzurro); outline-offset: 6px; border-radius: 4px; }

.trc-nav { display: flex; align-items: center; gap: 30px; }
.trc-nav a {
  color: #D7DBE0;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.trc-nav a:hover { color: #fff; border-bottom-color: var(--trc-vermiglio); }
.trc-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--trc-vermiglio); }

.trc-canale {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--trc-vermiglio);
  padding: 6px 11px; border-radius: 4px; white-space: nowrap;
}

/* menu mobile senza JavaScript */
.trc-toggle { display: none; }
.trc-toggle-label {
  display: none; cursor: pointer; padding: 8px; color: #fff;
}
.trc-toggle-label span, .trc-toggle-label span::before, .trc-toggle-label span::after {
  display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; content: "";
}
.trc-toggle-label span::before { transform: translateY(-7px); }
.trc-toggle-label span::after  { transform: translateY(5px); }

@media (max-width: 900px) {
  .trc-toggle-label { display: block; }
  .trc-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--trc-nero); border-bottom: 1px solid var(--trc-riga);
    padding: 8px 24px 20px;
  }
  .trc-toggle:checked ~ .trc-nav { display: flex; }
  .trc-nav a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--trc-riga); }
  .trc-nav a:hover { border-bottom-color: var(--trc-riga); }
  .trc-header__inner { position: relative; flex-wrap: wrap; }
}

/* ---------------- sezione diretta ---------------- */

.trc-hero { background: var(--trc-nero); color: #fff; padding: 44px 0 56px; }
.trc-hero__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.trc-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--trc-azzurro); margin-bottom: 14px;
}
.trc-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--trc-vermiglio);
  animation: trc-pulse 2s ease-in-out infinite;
}
@keyframes trc-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .trc-eyebrow::before { animation: none } }

.trc-hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.06; letter-spacing: -.025em; font-weight: 800;
  margin: 0 0 12px; text-wrap: balance; color: #fff;
}
.trc-hero p.trc-sub { color: #A7AEB8; font-size: 1.05rem; max-width: 60ch; margin: 0 0 30px; }

.trc-player-wrap {
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.9);
  border: 1px solid var(--trc-riga);
}

/* ---------------- corpo pagina ---------------- */

.trc-sezione { max-width: 1100px; margin: 0 auto; padding: 60px 24px; }
.trc-sezione--carta {
  background: var(--trc-carta);
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* Stessa gabbia delle altre sezioni: 1100px di contenuto più i 24px di respiro
   laterale. Senza questo, le sezioni chiare rientrano di 24px rispetto alle
   altre e il testo non è più allineato scorrendo la pagina. */
.trc-sezione--carta > .trc-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* Righe troppo lunghe si leggono male: il testo corrente si ferma prima,
   mentre griglie, elenchi di comuni e valori restano a tutta larghezza. */
.trc-sezione > p,
.trc-sezione > .wp-block-list,
.trc-inner > p,
.trc-inner > .wp-block-list { max-width: 68ch; }

.trc-titolo-sez {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 8px; text-wrap: balance;
}
.trc-occhiello {
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--trc-vermiglio); margin: 0 0 10px;
}

.trc-griglia { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 700px) { .trc-griglia--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .trc-griglia--2 { grid-template-columns: repeat(2, 1fr); } }

.trc-scheda {
  background: #fff; border: 1px solid #E3E6E9; border-radius: 8px;
  padding: 22px 24px;
}
.trc-scheda h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; }
.trc-scheda p  { margin: 0; color: var(--trc-tenue); font-size: .95rem; line-height: 1.6; }

.trc-valori { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 2px; }
.trc-valori li {
  padding: 16px 0; border-top: 1px solid #E3E6E9;
  display: grid; gap: 4px;
}
@media (min-width: 760px) { .trc-valori li { grid-template-columns: 190px 1fr; gap: 24px; align-items: baseline; } }
.trc-valori b { font-weight: 800; letter-spacing: -.01em; }
.trc-valori span { color: var(--trc-tenue); }

.trc-comuni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.trc-comuni li {
  font-size: 14px; font-weight: 600; color: var(--trc-inchiostro);
  background: #fff; border: 1px solid #DDE1E5; border-radius: 100px; padding: 7px 15px;
}

.trc-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--trc-vermiglio); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 6px;
  transition: background .15s;
}
.trc-cta:hover { background: #A72D02; color: #fff; }
.trc-cta:focus-visible { outline: 2px solid var(--trc-azzurro); outline-offset: 3px; }

/* ---------------- piè di pagina ---------------- */

.trc-footer { background: var(--trc-nero); color: #9AA1AB; padding: 54px 0 30px; font-size: 14px; }
.trc-footer__inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.trc-footer__top { display: grid; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--trc-riga); }
@media (min-width: 820px) { .trc-footer__top { grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; } }
.trc-footer img.trc-footer-logo { height: 42px; width: auto; margin-bottom: 16px; }
.trc-footer h4 {
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; margin: 0 0 14px;
}
.trc-footer a { color: #C6CCD4; text-decoration: none; }
.trc-footer a:hover { color: #fff; text-decoration: underline; }
.trc-footer p { margin: 0 0 7px; line-height: 1.65; }
.trc-dati { line-height: 1.9; }
.trc-dati dt { color: #6E757F; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.trc-dati dd { margin: 0 0 10px; color: #C6CCD4; }
.trc-footer__bottom {
  padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: space-between; font-size: 13px; color: #6E757F;
}

/* ---------------- ritocchi generali ---------------- */

.wp-site-blocks > * { margin-block-start: 0; }
.trc-header + * { margin-top: 0 !important; }
h1, h2, h3, h4 { text-wrap: balance; }
a:focus-visible { outline: 2px solid var(--trc-vermiglio); outline-offset: 2px; }