/*
Theme Name: Cerasella Child
Description: Child theme Avada per il sito del Ristorante Cerasella (Sapori della Campania)
Author: Striom
Template: Avada
Version: 1.1.2
Text Domain: Avada
*/

:root{
	--cera-green: #1F4A42;
	--cera-green-dark: #163530;
	--cera-gold: #B08D3E;
	--cera-gold-light: #D3B36A;
	--cera-cream: #F6EEDC;
	--cera-cream-dark: #EFE4CA;
	--cera-terracotta: #B3492E;
	--cera-navy: #1B2A52;
	--cera-text: #2B2B26;
}

/* Font Playfair Display/Poppins: registrati nativamente come "Custom Fonts"
   di Avada (fusion_options.custom_fonts, file caricati in Media Library),
   selezionabili per nome nei campi tipografia nativi (h1_typography,
   body_typography, nav_typography, button_typography). Avada genera da solo
   le regole @font-face necessarie: non serve più dichiararle qui. */

/* Sfondo pagina, colore/font heading (h1-h4), colori link, tipografia menu
   principale, sfondo header, sfondo/colori footer, aspetto base dei bottoni:
   impostati nativamente via Theme Options (fusion_options: bg_color,
   h1-h4_typography, link_color/link_hover_color, nav_typography,
   header_bg_color, footer_bg_color/footer_text_color/footer_link_color,
   button_*), non più forzati qui via CSS. */

.cera-section-green a, .cera-section-navy a{ color:#fff; }
.cera-section-green a:hover, .cera-section-navy a:hover{ color: var(--cera-gold-light); }

/* Menu mobile flyout (selettore di fallback nascosto, margine bottoni
   Fusion in hover): spostati nel Custom CSS nativo di Avada (Theme Options
   > Advanced) il 2026-09-16, non più qui — vedi PROJECT.md. Restano in
   questo file solo le classi di stile per contenuti/componenti custom del
   sito, non le correzioni a elementi Avada nativi. */

.fusion-button.cera-btn-outline{
	background-color: transparent !important;
	border: 2px solid #ffffff !important;
	color: #ffffff !important;
}
.fusion-button.cera-btn-outline:hover{
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--cera-green) !important;
}

/* Sfondo delle sezioni cream/green/navy: impostato nativamente con
   l'attributo background_color sui [fusion_builder_container] interessati
   (vedi scripts/build_pages.php), non più qui via CSS. Il colore del testo
   resta qui: è un adattamento di leggibilità su sfondo scuro, non la
   sovrascrittura di un default Avada. */
.cera-section-green{ color: #fff; }
.cera-section-green h1,.cera-section-green h2,.cera-section-green h3,.cera-section-green h4{ color: #fff !important; }
.cera-section-green p{ color: #f0ead9; }
.cera-section-navy{ color:#fff; }
.cera-section-navy h2, .cera-section-navy h3{ color: #fff !important; }

.cera-eyebrow{
	color: var(--cera-gold);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 700;
	font-size: 14px;
}

.cera-menu-list{ margin: 0 0 30px 0; }
.cera-menu-list h3.cera-menu-cat{
	color: var(--cera-green);
	border-bottom: 2px solid var(--cera-gold);
	padding-bottom: 8px;
	margin-bottom: 18px;
	font-size: 26px;
}
.cera-menu-item{
	display:flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px dotted #cbbf9c;
}
.cera-menu-item .cera-menu-name{ font-weight: 700; color: var(--cera-text); }
.cera-menu-item .cera-menu-desc{ display:block; font-weight:400; font-size: 14px; color:#6b6b60; margin-top:2px; }
.cera-menu-item .cera-menu-price{ font-weight: 700; color: var(--cera-gold); white-space: nowrap; font-size: 17px; }
.cera-menu-note{ font-size: 13px; color:#7a7a6e; font-style: italic; margin-top: 6px; }

.cera-badge-chef{
	display:inline-block;
	background: var(--cera-gold);
	color:#fff;
	font-size: 12px;
	font-weight:700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 10px;
	border-radius: 3px;
	margin-bottom: 6px;
}

.cera-orari{ list-style:none; margin:0; padding:0; }
.cera-orari li{
	display:flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
.cera-orari li span:first-child{ font-weight:700; }

.cera-divider{
	text-align:center;
	color: var(--cera-gold);
	font-size: 20px;
	margin: 10px 0 20px;
	letter-spacing: 6px;
}

.cera-todo{
	background: #fff7e6;
	border-left: 4px solid var(--cera-gold);
	padding: 10px 14px;
	font-size: 14px;
	color:#7a5b00;
	margin: 10px 0;
}

@media (max-width: 800px){
	.cera-menu-item{ flex-direction: column; }
}

/* Logo ufficiale Cerasella: impostato correttamente via fusion_options
   (vedi scripts/README.md). La dimensione di visualizzazione (max-height
   sull'<img> reale) resta invece nel Custom CSS nativo di Avada (spostata
   lì il 2026-09-16): verificato in class-avada-images.php che questa
   versione non produce uno style inline di dimensione per un logo
   "semplice" senza variante retina con width/height esplicite, quindi
   serve comunque CSS — ma nel campo nativo del tema, non qui. */

/* Sfondo header, icone social/ricerca in header, sticky header: impostati
   nativamente via Theme Options (header_bg_color, social_media_icons=[],
   main_nav_search_icon=0, mobile_menu_search=0, header_sticky=""), non più
   forzati/nascosti qui via CSS. */

.cera-phone-bar{
	background-color: var(--cera-green);
	color: #f3ead9;
	text-align: right;
	padding: 8px 4%;
	font-size: 13px;
	letter-spacing: 0.04em;
}
.cera-phone-bar a{
	color: #f3ead9;
	font-weight: 700;
	text-decoration: none;
}
.cera-phone-bar a:hover{ color: var(--cera-gold-light); }
.cera-phone-bar .cera-phone-icon{ color: var(--cera-gold-light); margin-right: 4px; }

/* Barra telefono al posto dei social, iniettata via wp_body_open(): nessun
   elemento Avada nativo equivalente su questa versione (verificato via
   Reflection su Fusion_Settings::$options_with_id, nessuna chiave
   topbar/contact_info/phone). Sfondo/colori del footer, icone social e
   colori della barra privacy/cookie: impostati nativamente via Theme
   Options (footer_bg_color, footer_text_color, footer_link_color,
   social_media_icons, privacy_bar_bg_color/color/link_color), non più
   forzati qui via CSS. */

/* ===== Card: contenitore di testo con bordo/ombra, mai testo "nudo" su
   sfondi grandi ===== */
.cera-card{
	background: #fffaf0;
	border-radius: 16px;
	padding: 56px 48px;
	box-shadow: 0 18px 40px rgba(31,74,66,0.13);
}
/* Clearfix: i bottoni Fusion (alignment="left") generano un div flottante
   come ultimo figlio della card; senza questo il box della card collassa
   e il bottone sporge fuori dal bordo arrotondato invece di starci dentro. */
.cera-card::after{
	content: "";
	display: table;
	clear: both;
}
.cera-section-green .cera-card,
.cera-section-navy .cera-card{
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.2);
	box-shadow: none;
	backdrop-filter: blur(6px);
}
.cera-card p:last-child{ margin-bottom: 0; }

/* Card di uno stesso blocco (Chi Siamo, La Nostra Cucina, Curiosità
   Campane, ecc. - tranne Home) sempre della stessa altezza: impostato
   nativamente con l'attributo equal_height_columns="yes" sui
   [fusion_builder_container] interessati (verificato che questa versione,
   a differenza di quella nuova, lo supporta nativamente - vedi
   fusion-container.php), non più forzato qui via flexbox. Il testo/card
   riempiono comunque per intero la colonna stirata grazie al
   comportamento nativo dei contenuti a blocco. */

@media (max-width: 800px){
	.cera-card{ padding: 40px 26px; }
}

/* ===== Immagini: angoli più morbidi e ombra, stile moderno =====
   Il raggio (18px) è nativo dal 2026-09-16: opzione Avada "Image Border
   Radius" (imageframe_border_radius in Theme Options), non più forzato
   qui via CSS — prima ogni [fusion_imageframe] aveva anche un
   borderradius="6" locale nel Builder, completamente ignorato perché
   sovrascritto da questa regola con !important: un operatore che avesse
   provato a cambiarlo da Fusion Builder non avrebbe visto alcun effetto.
   Restano qui solo overflow e ombra, senza equivalente nativo. */
.fusion-imageframe{
	overflow: hidden;
	box-shadow: 0 20px 45px rgba(20,30,25,0.22);
}

/* ===== Hero in parallasse (Home) ===== */
/* L'immagine di sfondo/parallasse e l'altezza minima sono impostate via
   attributi nativi Fusion Builder sullo shortcode (background_image/
   background_parallax/min_height con hundred_percent_height="min"), non
   qui: il CSS puro veniva silenziosamente ignorato/sovrascritto da Avada
   (background) o dalla regola .fusion-fullwidth{min-height:var(--awb-min-height)}
   caricata dopo il child theme nella cascata, stessa specificita' (min-height). */
.cera-hero-parallax{
	position: relative;
	background-color: var(--cera-green-dark) !important;
	background-size: cover !important;
	display: flex;
	align-items: center;
}
.cera-hero-parallax .fusion-builder-row{ padding-top: 80px; padding-bottom: 80px; box-sizing: border-box; }
.cera-hero-parallax::before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(10,18,14,.88) 0%, rgba(15,26,20,.8) 40%, rgba(31,74,66,.62) 100%);
}
.cera-hero-parallax .fusion-builder-row{ position: relative; z-index: 2; width: 100%; }
.cera-hero-parallax .cera-hero-content{ max-width: 780px; }
.cera-hero-eyebrow{
	color: var(--cera-gold-light);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 18px;
}
.cera-hero-title{
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	color: #fdf8ec !important;
	line-height: 1.18;
	text-shadow: 0 6px 24px rgba(0,0,0,0.35);
	margin: 0 0 24px;
}
.cera-hero-sub{
	color: #f0ead9;
	font-size: 19px;
	max-width: 560px;
	margin: 0 0 34px;
}
@media (max-width: 1024px){
	.cera-hero-parallax{ background-attachment: scroll; }
	.cera-hero-title.fusion-responsive-typography-calculated{ font-size: 43px !important; }
	h1.fusion-responsive-typography-calculated{ font-size: 48px !important; }
	h2.fusion-responsive-typography-calculated{ font-size: 36px !important; }
}
@media (max-width: 700px){
	.cera-hero-content{ padding: 0 24px; box-sizing: border-box; }
	.cera-hero-title.fusion-responsive-typography-calculated{ font-size: 33px !important; }
	h1.fusion-responsive-typography-calculated{ font-size: 35px !important; }
	.cera-hero-break{ display: none; }
	.cera-hero-parallax .fusion-builder-row{ padding-top: 50px; padding-bottom: 50px; }
}
@media (max-width: 420px){
	.cera-hero-content{ padding: 0 18px; }
	.cera-hero-title.fusion-responsive-typography-calculated{ font-size: 26px !important; }
	h1.fusion-responsive-typography-calculated{ font-size: 28px !important; }
	.cera-hero-sub{ font-size: 15px; }
}

/* ===== Copyright bar nativa Avada: dati societari/privacy/cookie iniettati
   tramite il filtro avada_setting_get_footer_text (vedi functions.php),
   qui solo la veste grafica. ===== */
.fusion-copyright-notice{
	font-size: 12.5px;
	line-height: 1.8;
	text-align: center;
	width: 100%;
}
.fusion-copyright-notice a{ color: #d9ddec; text-decoration: underline; }
.fusion-copyright-notice a:hover{ color: var(--cera-gold-light); }
.fusion-footer-copyright-area .fusion-row{
	display: flex;
	justify-content: center;
	text-align: center;
}
.fusion-copyright-content{ width: 100%; text-align: center; }

/* ===== Cookie banner, in basso a destra, leggero ===== */
#cera-cookie-banner{
	position: fixed;
	right: 20px;
	bottom: 20px;
	max-width: 360px;
	background: #fffaf0;
	color: var(--cera-text);
	border-radius: 14px;
	box-shadow: 0 15px 45px rgba(0,0,0,0.28);
	padding: 22px 24px;
	z-index: 9999;
	font-size: 13.5px;
	line-height: 1.6;
	border: 1px solid rgba(31,74,66,0.15);
}
#cera-cookie-banner strong{ color: var(--cera-green); }
#cera-cookie-banner a{ color: var(--cera-green); text-decoration: underline; }
#cera-cookie-banner .cera-cookie-actions{
	margin-top: 14px;
	display: flex;
	gap: 10px;
}
#cera-cookie-banner button{
	font-family: "Playfair Display", Georgia, serif;
	font-size: 13px;
	letter-spacing: 0.03em;
	border-radius: 4px;
	padding: 9px 18px;
	cursor: pointer;
	border: 2px solid var(--cera-green);
	background: var(--cera-green);
	color: #fff;
}
#cera-cookie-banner button.cera-cookie-info{
	background: transparent;
	color: var(--cera-green);
}
@media (max-width: 480px){
	#cera-cookie-banner{ right: 12px; left: 12px; bottom: 12px; max-width: none; }
}


/* ===== Sfondo 100% viewport per hero/verde/navy, qualunque sia il padding
   laterale ereditato da #main/wrapper: tecnica "full-bleed" con vw+margini
   negativi, indipendente dal layout con cui Avada wrappa il contenuto. ===== */
.cera-hero-parallax,
.cera-section-green.fusion-fullwidth,
.cera-section-navy.fusion-fullwidth{
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}
/* Il contenuto (la riga interna, .fusion-builder-row) NON va forzato via
   CSS: con hundred_percent="no" sullo shortcode (vedi build_pages.php),
   Avada applica da solo alla riga lo stesso max-width inline (senza
   !important) usato in tutte le altre sezioni del sito — è quindi già
   identico alle altre pagine senza bisogno di replicarlo qui. Con
   hundred_percent="yes" invece Avada mette sulla riga un
   `max-width:100% !important` inline che nessuna regola esterna può
   battere: ecco perché il 100% di larghezza si ottiene SOLO sul
   contenitore esterno (sopra), mai passando hundred_percent="yes". */

/* ===== Armonia: le foto (spesso verticali) non devono torreggiare sulla
   card di testo accanto — altezza massima uniforme, ritagliate con cover. ===== */
.fusion-imageframe img{ max-height: 520px; width: 100%; object-fit: cover; }

/* ===== Immagini sempre centrate in responsive =====
   .fusion-imageframe è uno <span> inline-block: quando l'immagine è più
   stretta della colonna (es. foto verticali accanto a una card, limitate
   in altezza dalla regola sopra) resta ancorata a sinistra invece di
   stare al centro. Reso block + margini auto per centrarlo sempre. */
@media (max-width: 1024px){
	.fusion-imageframe{ display: block !important; margin-left: auto !important; margin-right: auto !important; }
}

/* ===== Sezioni verdi/navy full-bleed: padding orizzontale su mobile =====
   .cera-section-green/.cera-section-navy con "fusion-fullwidth" escono dal
   padding di #main per il sfondo a piena larghezza (vedi tecnica sopra);
   sotto i 700px la riga interna finiva senza margine, con testo e
   immagini a contatto con i bordi dello schermo. */
@media (max-width: 700px){
	.cera-section-green.fusion-fullwidth .fusion-builder-row,
	.cera-section-navy.fusion-fullwidth .fusion-builder-row{
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 15px !important;
		padding-right: 15px !important;
		box-sizing: border-box !important;
	}
}

/* Header più compatto: margine logo (logo_margin) e padding verticale della
   riga (header_padding) impostati nativamente via fusion_options, non più
   forzati qui via CSS. */

/* Spazio tra testo e bottone sotto: impostato nativamente con l'attributo
   margin_top di ogni [fusion_button] (vedi scripts/build_pages.php),
   non più forzato via CSS — necessario anche perché dopo l'estrazione dei
   bottoni come elementi separati (vedi PROJECT.md) non sono più discendenti
   di .fusion-text/.cera-card, quindi il selettore CSS precedente non
   avrebbe comunque più funzionato. */

/* ===== Blocchi "grandi" in Home (immagine+card equivalenti a hero-level) ===== */
.cera-block-title{ font-size: 34px; line-height: 1.25; }
.cera-block-text{ font-size: 18px; line-height: 1.6; }
@media (max-width: 700px){
	.cera-block-title{ font-size: 26px; }
}