/*
Theme Name:   spaziodiamante
Template:     teatro256
Version:      1.1.0
Description:  Child Theme per Spazio Diamante. Eredita il core da Teatro 256 Refactor.
Author:       Marco Spadoni
*/

/* Importa stili custom qui sotto */

/* =========================================================================
   IMPORTS
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/* ==========================================================================
   1. THEMING & VARIABLES — SPAZIO DIAMANTE COLOR SYSTEM
   palette grezza → token semantici → temi. Default: CHIARO (sfondo bianco).
   ========================================================================== */
:root {
   /* --- Palette grezza Spazio Diamante (unica fonte di verita') --- */
   --diamante-green:       #3eaa00; /* verde logo = primario / evidenza */
   --diamante-green-dark:  #328c00; /* hover / pressed */
   --diamante-green-light: #56c81a; /* evidenza su fondo scuro / highlight */
   --diamante-green-tint:  #eff8e7; /* sfondo sezioni chiare */
   --diamante-ink:         #111111;
   --diamante-graphite:    #1a1a1a;
   --diamante-black:       #0d0d0d;
   --diamante-white:       #ffffff;

   /* --- Colori Primari di Brand --- */
   --primary-color: var(--diamante-green);
   --primary-color-dark: var(--diamante-green-dark);

   /* --- Colori di Testo --- */
   --text-color: var(--diamante-ink);
   --text-color-dark: #333333;
   --text-color-medium: #555555;
   --text-color-light: #666666;
   --text-color-accent: #272727;
   --text-color-inverted: var(--diamante-white);
   --link-color: var(--primary-color);
   --link-color-hover: var(--primary-color-dark);

   /* --- Colori di Sfondo --- */
   --background-color: var(--diamante-white);
   --background-color-light: #f5f5f5;
   --background-color-soft: #f8f9fa;
   --background-color-grey: #efefef;
   --background-color-grey-secondary: #f3f3f3;
   --background-color-grey-medium: #d3d3d3;
   --background-color-grey-dark: #cecece;
   --background-color-dark: var(--diamante-graphite);
   --background-overlay: rgba(0, 0, 0, 0.75);

   /* --- Superfici --- */
   --surface-section-accent: var(--diamante-green-tint); /* sezioni chiare */
   --surface-dark: var(--diamante-graphite);             /* sezioni scure (.slider-dark) */

   /* --- Colori per Bordi e Separatori --- */
   --border-color: #dddddd;
   --border-color-white: #ffffff;
   --border-color-light: #eeeeee;
   --border-color-medium: #e0e0e0;
   --border-color-dark: #cccccc;
   --border-color-grey: #bababa;
   --border-color-faint: #f0f0f0;

   /* --- Colori Funzionali (UI) — evidenze riportate al verde --- */
   --ui-accent: var(--diamante-green);
   --ui-accent-hover: var(--diamante-green-light);
   --ui-blue: var(--diamante-green);            /* alias legacy → verde */
   --ui-blue-dark: var(--diamante-green-dark);
   --ui-blue-light: var(--diamante-green-light);
   --ui-yellow-accent: var(--diamante-green-light); /* alias legacy → verde */
   --ui-yellow-hover: var(--diamante-green-light);
   --ui-red-error: #ff4444;   /* stato: invariato */
   --ui-green: green;         /* stato: invariato */
   --ui-orange: orange;       /* stato: invariato */
   --ui-black: #000000;

   /* --- Tipografia --- */
   --font-primary: "Open Sans", sans-serif;
   --font-secondary: "Poppins", sans-serif;

   /* --- Spaziature --- */
   --spacing-unit: 8px;
   --spacing-xxs: calc(var(--spacing-unit) * 0.5);
   --spacing-xs: var(--spacing-unit);
   --spacing-s: calc(var(--spacing-unit) * 1.25);
   --spacing-m: calc(var(--spacing-unit) * 2);
   --spacing-l: calc(var(--spacing-unit) * 2.5);
   --spacing-xl: calc(var(--spacing-unit) * 3.75);
   --spacing-xxl: calc(var(--spacing-unit) * 5);
   --spacing-xxxl: calc(var(--spacing-unit) * 7.5);

   /* --- Alias per retrocompatibilita' --- */
   --rosso-primario: var(--primary-color);
   --rosso-secondario: var(--primary-color-dark);
   --grigio-chiaro: var(--background-color-grey);
   --my-bianco: var(--background-color);
   --txt-bianco: var(--text-color-inverted);

   /* --- Toolbar: header chiara → icone/testo scuri (inverte il default) --- */
   --toolbar-bg:           var(--background-color); /* bianco */
   --toolbar-color:        var(--text-color);       /* icone + testo scuri */
   --toolbar-color-muted:  rgba(0, 0, 0, 0.55);     /* placeholder search */
   --toolbar-sep-color:    rgba(0, 0, 0, 0.20);     /* separatori + bordo pillola assistenza */

   /* Icone social nel footer */
   --footer-social-color:       var(--text-color);      /* nero a riposo */
   --footer-social-color-hover: var(--primary-color);   /* verde su hover */
   --footer-social-size:        24px;
}

/* --- SWITCH: TEMA SCURO — <html data-theme="dark"> --- */
:root[data-theme="dark"] {
   --background-color: var(--diamante-graphite);
   --background-color-light: #202020;
   --background-color-soft: #181818;
   --background-color-dark: var(--diamante-black);
   --surface-section-accent: #16210f;
   --surface-dark: var(--diamante-black);

   --text-color: #f2f2f2;
   --text-color-dark: #dddddd;
   --text-color-medium: #bdbdbd;
   --text-color-light: #9a9a9a;
   --text-color-inverted: var(--diamante-ink);

   --primary-color: var(--diamante-green);
   --primary-color-dark: var(--diamante-green-light);
   --link-color: var(--diamante-green-light);
   --link-color-hover: var(--diamante-white);

   --border-color: #333333;
   --border-color-light: #2a2a2a;
   --border-color-faint: #262626;
}

@media (max-width: 768px) {
    :root {
        --toolbar-height: 18px;
        --toolbar-icon-size: 16px;
        --toolbar-gap: 16px;
    }
}

/* ==========================================================================
   2. STILI GLOBALI
   ========================================================================== */

/* Titoli di sezione e di pagina in verde primario (h1 / h2) */
h1,
h2,
h1.entry-title,
h2.entry-title {
   color: var(--primary-color);
}

h1.entry-title {
   margin-block: 5px;
}

h3 {
   line-height: 1.2rem;
   margin-block: 5px;
}

body .entry-header .sottotitolo {
   font-size: 1.4em;
   font-weight: bold;
   color: var(--primary-color);
   text-transform: uppercase;
}

/* Nome artista / occhiello sopra il titolo card: nero, non verde */
.production-article-item .artista,
.entry-header .artista {
   color: var(--text-color);
   font-weight: 700;
   text-transform: uppercase;
}

#menu a.burg-icon {
   color: #000;
}

.locandina .crediti p {
   margin-block: 0;
}

.produzione-genere-label {
   color: #ffffff;
   border-top: none;
   background-color: #0005 !important;
}

.produzione-genere-label:hover {
   color: var(--ui-yellow-hover) !important;
}

/* ==========================================================================
   3. HEADER — bianca, verde solo sui dettagli
   Override dei componenti del parent che usano --primary-color come sfondo
   ========================================================================== */

#branding {
   padding: var(--spacing-m) var(--spacing-s) var(--spacing-s);
   width: 85%;
   margin-inline: 0;
}

.scrolled #branding {
   padding: var(--spacing-l) var(--spacing-s) var(--spacing-s);
   width: 100%;
   margin-inline: auto;
}

#branding a.custom-logo-link {
   display: block;
   max-width: 100%;
}

.scrolled #branding a.custom-logo-link {
   max-width: 70%;
   display: block;
   margin: 0 auto !important;
}

.scrolled #branding .mobile a.custom-logo-link {
   max-width: 85%;
   display: block;
   margin: 0 auto 0 0 !important;
}

/* Header + barra sticky: da primario a bianco */
#head-wrapper,
#header {
   background-color: var(--background-color);
   border-bottom: 1px solid var(--border-color);
}

/* Menu navigazione: fondo grigio chiaro, voci scure, verde su hover/attivo */
#menu #menu-nav {
   background-color: var(--background-color-grey);
   border-top: 1px solid var(--border-color);
}

/* Le varianti .scrolled servono: nel parent `.scrolled #menu #menu-nav>li>a`
   (testo bianco) è più specifica e vinceva appena l'header diventa sticky. */
#menu #menu-nav > li > a,
.scrolled #menu #menu-nav > li > a {
   color: var(--text-color);
}

#menu #menu-nav > li > a:hover,
#menu #menu-nav > li.current-menu-item > a,
.scrolled #menu #menu-nav > li > a:hover,
.scrolled #menu #menu-nav > li.current-menu-item > a {
   color: var(--primary-color);
}

/* Sottomenu a tendina: stesso trattamento chiaro */
#menu #menu-nav ul {
   background-color: var(--background-color);
   border: 1px solid var(--border-color);
}

#menu #menu-nav ul a {
   color: var(--text-color);
}

#menu #menu-nav ul a:hover {
   color: var(--primary-color);
}

/* Icone header (search, social, assistenza) scure */
#header-tools a,
#header-tools .icon {
   color: var(--text-color);
}

/* Limite dimensione logo header */
#branding .custom-logo {
   height: auto !important;
   width: auto !important;
   max-height: 85px !important;   /* desktop */
}

@media (max-width: 1024px) {
   #branding .custom-logo {
      max-height: 60px !important;
   }
}

@media (max-width: 600px) {
   #branding .mobile-logo {
      height: auto !important;
      width: auto !important;
      max-height: 46px !important;
   }
}

/* ==========================================================================
   4. BOTTONI E BOX UI
   ========================================================================== */

a.ui-btn {
   background-color: var(--primary-color);
   color: var(--text-color-inverted);
   border: 2px solid var(--primary-color);
}

a.ui-btn:hover {
   background-color: var(--primary-color-dark);
   border-color: var(--primary-color-dark);
}

/* Box sidebar "Botteghino" / "Info e contatti": outline verde su bianco */
.sidebar-box-link,
.sidebar .ui-btn.outline {
   background-color: transparent;
   color: var(--text-color);
   border: 2px solid var(--primary-color);
}

.sidebar-box-link:hover,
.sidebar .ui-btn.outline:hover {
   background-color: var(--primary-color);
   color: var(--text-color-inverted);
}

/* Etichetta sala sopra le card (Sala White / Sala Black) */
.produzione-location-label {
   border-top: 3px solid var(--primary-color);
}

/* ==========================================================================
   5. HOME
   ========================================================================== */

/* Sezione video responsive sotto lo slider */
.home-video {
   width: 100%;
   margin: 32px auto;
   padding-inline: 16px;
}

.home-video__inner {
   max-width: 1000px;
   width: 100%;
   margin-inline: auto;
}

.home-video__frame {
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 9;
   min-height: 320px;
   background: #000;
   overflow: hidden;
}

.home-video__frame iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
}

/* ---- Carousel: frecce e pallini ---- */
.slider-dots {
   text-align: center;
   padding: 15px 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: transparent;
}

.slider-dots button {
   border: none;
   width: 20px;
   height: 20px;
   margin: 0 4px;
   border-radius: 50%;
   background: var(--primary-color);
   cursor: pointer;
   padding: 0;
   transition: background-color 0.3s ease;
}

.slider-dots button.active {
   background: var(--background-color);
   border: 2px solid var(--primary-color);
}

.slider-dots button:hover {
   background: var(--primary-color-dark);
}

.slider-dots button.active:hover {
   background: var(--ui-accent-hover);
   border: 2px solid var(--primary-color-dark);
}

.home .slider-dark {
   background-color: var(--surface-dark);
}

.slider-dark h2.entry-title.season {
   color: var(--text-color-inverted);
}

.slider-dark a.ui-btn {
   background-color: transparent;
   color: var(--border-color-faint);
   border: 2px solid var(--border-color-faint);
}

.slider-dark .slider-dots button {
   background: var(--background-color);
   border: 2px solid var(--border-color-faint);
}

.slider-dark .slider-dots button.active {
   background: var(--background-color);
   border: 2px solid var(--primary-color);
}

.slider-dark .slider-dots button:hover {
   background: var(--primary-color-dark);
}

.slider-dark .slider-dots button.active:hover {
   background: var(--ui-accent-hover);
   border: 2px solid var(--primary-color-dark);
}

/* Banner statici home */
.home-static-banner a.home-static-banner__link {
   display: block;
   width: 100%;
   height: auto;
}

.home-static-banner a.home-static-banner__link img.desktop {
   width: 100%;
   height: auto;
}

/* ==========================================================================
   6. FOOTER — chiaro
   Il parent fa #footer con --primary-color e testo bianco: ribaltiamo
   ========================================================================== */

#footer {
   background-color: var(--background-color-light);
   color: var(--text-color);
}

#footer h2,
#footer h3,
#footer .widget-title {
   color: var(--text-color);
}

#footer p {
   color: var(--text-color) !important;
}

#footer a {
   color: var(--text-color);
}

#footer a:hover {
   color: var(--primary-color);
}

footer p,
footer p a {
   color: var(--text-color);
}

/* Menu footer: separatori chiari su fondo chiaro */
#footer .footer-widgets-area ul .menu-item {
   border-color: var(--border-color);
}

#footer .footer-widgets-area ul#menu-menu-footer.menu li.menu-item {
   list-style-type: none;
}

/* ---- Social footer ---- */
.footer-social-box {
   text-align: center;
}

.footer-social-box h3 {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 20px;
   color: var(--text-color);
}

.footer-social-box ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   gap: 10px;
}

.footer-social-box ul li {
   margin: 0;
   padding: 0;
}

.footer-social-box ul li a {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   text-decoration: none;
   color: var(--text-color);
}

.footer-social-box ul li a img {
   width: 35px;
   height: 35px;
   display: block;
   filter: brightness(0);   /* icone in nero pieno su fondo chiaro */
}

.footer-social-box .social-icon {
   display: inline-block;
   width: var(--footer-social-size);
   height: var(--footer-social-size);
   background-color: var(--footer-social-color);
   -webkit-mask-image: var(--icon-url);
           mask-image: var(--icon-url);
   -webkit-mask-size: contain;      mask-size: contain;
   -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
   -webkit-mask-position: center;   mask-position: center;
   transition: background-color 0.3s ease;
}

.footer-social-box ul li a:hover .social-icon {
   background-color: var(--footer-social-color-hover);
}

.footer-social-box ul li a:hover,
.footer-social-box ul li a:focus-visible {
   opacity: 0.85;
   outline: 2px solid currentColor;
   outline-offset: 2px;
}

.home footer#footer div.footer-widgets-area.flex-wrap .widget.widget_block nav.footer-social-box h3 {
   text-align: left;
}

/* Riga copyright: chiara, testo grigio, come da progetto grafico */
#copyright {
   background-color: var(--background-color-light);
   color: var(--text-color-medium);
   border-top: 1px solid var(--border-color);
   padding: var(--spacing-s) var(--spacing-m);
   text-align: center;
   font-size: 0.85em;
}

#copyright a {
   color: var(--text-color-medium);
}

#copyright a:hover {
   color: var(--primary-color);
}

/* ==========================================================================
   7. PAGINA INFO E CONTATTI — accordion
   ========================================================================== */

.br-accordion {
   border-top: 1px solid rgba(0, 0, 0, .12);
   padding: 10px 0;
}

.br-accordion:last-of-type {
   border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.br-accordion summary {
   cursor: pointer;
   font-weight: 700;
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   font-size: 1.2em;
}

.br-accordion summary::-webkit-details-marker {
   display: none;
}

.br-accordion summary::after {
   content: "+";
   font-weight: 700;
   line-height: 1;
}

.br-accordion[open] summary::after {
   content: "\2013";
}

.br-accordion p {
   margin: 10px 0 0;
}

/* ==========================================================================
   8. FORM PRENOTAZIONE (CF7 "Prenota il biglietto", .form-booking)
   Stili spostati qui dal <style> dentro il form CF7 (07/10/2026): colori
   dai token del tema invece del rosso #c60013. Nella sidebar (aside) le
   regole del parent su .form-booking restano più specifiche e prevalgono.
   ========================================================================== */
.form-booking input[type="text"],
.form-booking input[type="email"],
.form-booking input[type="tel"],
.form-booking input[type="number"],
.form-booking input[type="date"],
.form-booking textarea,
.form-booking select {
   padding: 10px;
   width: 100%;
   font-size: 15px;
   background: var(--background-color);
   border: none;
}

.form-booking input[type="submit"] {
   color: var(--diamante-white);
   font-size: 20px;
   font-weight: 600;
   text-align: center;
   padding: 8px 35px 7px;
   border: none;
   background: var(--primary-color);
   cursor: pointer;
}

.form-booking input[type="submit"]:hover {
   background: var(--diamante-green-dark);
}

.form-booking span.wpcf7-list-item {
   margin: 0;
}

.form-booking .col-01 {
   width: 100%;
}

.form-booking .acc {
   font-size: 13px;
   cursor: pointer;
   display: block;
   margin-bottom: 8px;
}

.form-booking .scelta-biglietto select {
   margin-top: 10px;
   background-color: var(--background-color-grey);
}

/* ==========================================================================
   9. MEDIA QUERIES
   ========================================================================== */

.scrolled #header .flexbox #branding {
   max-width: 400px !important;
}

@media (min-width: 720px) {
   #header .flexbox #branding {
      max-width: 680px;
   }

   .scrolled #header .flexbox #branding {
      max-width: 580px !important;
   }

   #header #branding #site-title div.desktop {
      display: block !important;
   }

   #header #branding #site-title div.mobile {
      display: none !important;
   }
}

@media screen and (min-width: 1020px) {
   #branding {
      padding: var(--spacing-xxl) var(--spacing-s) var(--spacing-s);
      width: 100%;
      margin-inline: auto;
   }

   .footer-social-box ul {
      justify-content: flex-start;
   }

   #footer .widget-col {
      width: 23%;
      margin-inline: var(--spacing-m) !important;
   }

   .scrolled #branding a.custom-logo-link {
      max-width: 70%;
      display: block;
      margin: 0 !important;
   }
}

@media (min-width: 1240px) {
   #header .flexbox #branding {
      flex: 1;
      max-width: 320px;
      padding-top: var(--spacing-l);
      transition: max-width 0.35s ease, padding 0.35s ease;
   }
}

@media screen and (max-width: 782px) {
   .admin-bar #head-wrapper.scrolled {
      top: 90px;
   }
}

/* Utility responsive */
@media (min-width: 769px) {
   .desktop { display: block !important; }
   .mobile  { display: none  !important; }
}

@media (max-width: 768px) {
   .desktop { display: none  !important; }
   .mobile  { display: block !important; }
}