/*
Theme Name:   eliseo
Template:     teatro256
Version:      1.0.1
Description:  Child Theme per eliseo. 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 — ELISEO COLOR SYSTEM
   palette grezza → token semantici → temi. Default: CHIARO (ipotesi 2).
   ========================================================================== */
:root {
   /* --- Palette grezza Eliseo (unica fonte di verità) --- */
   --eliseo-gold:       #b98c34; /* oro logo 4k = evidenza */
   --eliseo-gold-dark:  #97702a; /* hover / pressed */
   --eliseo-gold-light: #cfa24a; /* evidenza su fondo scuro / highlight */
   --eliseo-gold-tint:  #f6efe1; /* sfondo sezioni chiare */
   --eliseo-ink:        #111111;
   --eliseo-graphite:   #1a1a1a;
   --eliseo-black:      #0d0d0d;
   --eliseo-white:      #ffffff;

   /* --- Colori Primari di Brand --- */
   --primary-color: var(--eliseo-gold);
   --primary-color-dark: var(--eliseo-gold-dark);
   --primary-color-legacy: #013d7c; /* vecchio blu, solo riferimento */

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

   /* --- Colori di Sfondo --- */
   --background-color: var(--eliseo-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(--eliseo-graphite);
   --background-overlay: rgba(0, 0, 0, 0.75);

   /* --- Superfici (nuovi token) --- */
   --surface-section-accent: var(--eliseo-gold-tint); /* sezioni chiare */
   --surface-dark: var(--eliseo-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 all'oro --- */
   --ui-accent: var(--eliseo-gold);
   --ui-accent-hover: var(--eliseo-gold-light);
   --ui-blue: var(--eliseo-gold);            /* alias legacy → oro */
   --ui-blue-dark: var(--eliseo-gold-dark);
   --ui-blue-light: var(--eliseo-gold-light);
   --ui-yellow-accent: var(--eliseo-gold-light); /* alias legacy → oro */
   --ui-yellow-hover: var(--eliseo-gold-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 retrocompatibilità --- */
   --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, sparisce la barra oro */
   --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(--primary-color);   /* oro a riposo */
   --footer-social-color-hover: var(--text-color);       /* nero su hover */
   --footer-social-size:        24px;
}

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

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

   --primary-color: var(--eliseo-gold);
   --primary-color-dark: var(--eliseo-gold-light);
   --link-color: var(--eliseo-gold-light);
   --link-color-hover: var(--eliseo-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
   ========================================================================== */
   h1.entry-title {
	margin-block: 5px;
}

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

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

#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;
}

/*-----------------------HOME---------------------*/

/* =========================================================================
   Home — sezione video responsive sotto lo slider
   ========================================================================= */
.home-video {
   margin-block: var(--spacing-xxl);   /* respiro sopra e sotto */
   padding-inline: var(--spacing-m);
}

.home-video__inner {
   max-width: 1200px;                   /* "boxed" come le altre sezioni */
   margin-inline: auto;
}

.home-video__frame {
   position: relative;
   aspect-ratio: 16 / 9;                /* mantiene la proporzione a ogni larghezza */
   width: 100%;
   overflow: hidden;
   background: #000;                    /* evita flash bianco mentre carica */
}

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

.home-video{
   width:100% !important;
   margin:32px auto !important;
   padding-inline:16px !important;
}
.home-video__inner{
   max-width:1000px !important;
   width:100% !important;
   margin-inline:auto !important;
}
.home-video__frame{
   position:relative !important;
   width:100% !important;
   aspect-ratio:16/9 !important;
   min-height:320px !important;   /* grandezza minima garantita */
   background:#000 !important;
   overflow:hidden !important;
}
.home-video__frame iframe{
   position:absolute !important;
   inset:0 !important;
   top:0 !important; left:0 !important;
   width:100% !important;
   height:100% !important;
   border:0 !important;
   display:block !important;
}



/*------------------------------ my home carousel ------------------------------*/
/* Stili per 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-dark);
   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-yellow-hover);
   border: 2px solid var(--primary-color-dark);
}

.home .slider-dark {
   background-color: var(--primary-color-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-yellow-hover);
   border: 2px solid var(--primary-color-dark);
}

/*--------------------HEADER--------------------*/

#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;
}

/* =========================================================================
   ELISEO — layout "stile Diamante": header BIANCA, oro solo sui dettagli
   Override dei componenti del parent che usano --primary-color come sfondo
   ========================================================================= */

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

/* Menu navigazione: bianco, voci scure, oro su hover/attivo */
#menu #menu-nav {
   background-color: var(--background-color);
   border-top: 1px solid var(--border-color);
}
#menu #menu-nav > li > a { color: var(--text-color); }
#menu #menu-nav > li > a:hover,
#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); }

/* Bottoni: oro pieno */
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);
}




/*--------------------FORMATTO LA SEZIONE EVENTI 2025-2026--------------------*/
body.home .sect-fuori-stagione-2025-2026 .setion-wrap {
   max-width: none;
}

.sect-fuori-stagione-2025-2026 .setion-wrap.slider .flex-wrap>article.production-article-item {
   padding-inline: 0 !important;
}

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

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

/*--------------------widget social footer menu ----------------------*/
footer p, footer p a {
   color: var(--text-color);
}

footer h3, footer h3 a, footer .widget-title{
   color: var(--primary-color);
}


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

.footer-social-box h3 {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 20px;
}

.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%;
   /*background-color: #ffffff;*/
   text-decoration: none;
}

.footer-social-box ul li a img {
   width: 35px;
   height: 35px;
   display: block;
}

.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);
}

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

/* =========================================================================
   ELISEO — footer chiaro
   Il parent fa #footer oro (var --primary-color) con testo bianco: ribaltiamo
   ========================================================================= */

/* Sfondo chiaro, testo scuro */
#footer {
   background-color: var(--background-color-light);   /* grigio chiarissimo */
   color: var(--text-color);
}

/* Titoli widget (Botteghino, Seguici, ecc.) scuri */
#footer h2, #footer h3, #footer .widget-title { color: var(--primary-color); }

#footer p { color: var(--text-color) !important; }
/* Link: scuri, oro su hover */
#footer a { color: var(--text-color); }
#footer a:hover { color: var(--primary-color); }

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

/* Social: da bianchi a scuri (le icone sono mask-image colorate via color/bg) */
.footer-social-box h3 { color: var(--primary-color); }
.footer-social-box ul li a { color: var(--text-color); }
.footer-social-box ul li a img { filter: none; }   /* se erano forzate a bianco via filter */

/* Riga copyright: sfondo oro, testo bianco */
#copyright {
   background-color: var(--primary-color);
   color: var(--text-color-inverted);
   padding: var(--spacing-s) var(--spacing-m);
   text-align: center;
}
#copyright a { color: var(--text-color-inverted); }

@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%;
   }

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

/* Hover & focus (accessibilità) */
.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;
}

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

/*----------------------pagina info e contatti --------------------------*/
/* Accordion (Details) - stile base */
.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: "–";
}

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

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

/* Icone social footer: da bianche a scure (SVG in <img>, si inverte via filter) */
.footer-social-box ul li a img {
   filter: brightness(0);   /* nero pieno */
}

@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 (min-width: 1020px) {
   .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; }
}

/* 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; }
}

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

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

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