/*
Theme Name: Olympos Child
Theme URI: https://www.olymposcucinagreca.it/
Description: Child theme di Hello Elementor per Olympos Ristorante Greco. Contiene solo il CSS che Elementor Free non puo riprodurre con le opzioni native (header sticky, nastri marquee animati, pattern diagonali e a rombi, bordo dentellato, proporzioni fisse degli slot foto, stati di focus).
Author: Makeitweb.it
Author URI: https://makeitweb.it
Template: hello-elementor
Version: 1.0.0
Text Domain: olympos-child
*/

/* ==========================================================================
   INDICE
   1. Accessibilita (focus visibile, skip link)
   2. Header sticky
   3. Nastri marquee animati
   4. Pattern di sfondo (diagonali, rombi, tratteggi, dentelli)
   5. Proporzioni fisse degli slot foto
   6. Dettagli tipografici (evidenza nel titolo, corsivo, a capo elegante)
   7. Riduzione del movimento
   Ogni regola e limitata a una classe oly-* assegnata al singolo container
   o widget dall'editor Elementor: nessun selettore generico.
   ========================================================================== */


/* 1. ACCESSIBILITA ------------------------------------------------------- */

/* Stato di focus sempre visibile per tastiera (Elementor non lo espone). */
:focus-visible {
	outline: 3px solid #0066A7;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Link "Salta al contenuto": fuori schermo, compare al focus da tastiera. */
.oly-skip-link a {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100;
}
.oly-skip-link a:focus {
	left: 16px;
}


/* 2. HEADER STICKY ------------------------------------------------------- */

/* position:sticky e backdrop-filter sono riservati a Elementor Pro. */
.oly-header-sticky {
	position: sticky;
	top: 0;
	z-index: 60;
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	backdrop-filter: saturate(150%) blur(10px);
}

/* Compensa l'header fisso quando si arriva a un anchor (#piatti, #contatti). */
.oly-anchor-offset {
	scroll-margin-top: 96px;
}


/* 3. NASTRI MARQUEE ------------------------------------------------------ */

/* Nastro: piu largo della pagina perche ruotato, quindi overflow nascosto.
   Il container Elementor porta la classe; qui forziamo overflow e larghezza. */
.e-con.oly-marquee {
	overflow: hidden;
	width: 118%;
	margin-left: -9%;
	max-width: none;
}

/* Binario: due copie identiche della riga, scorre di meta larghezza. */
.e-con.oly-marquee__track {
	width: max-content;
	max-width: none;
	flex-wrap: nowrap;
	animation: oly-marquee-left 110s linear infinite;
}
.e-con.oly-marquee__track--destra { animation-name: oly-marquee-right; }
.e-con.oly-marquee__track--120 { animation-duration: 120s; }
.e-con.oly-marquee__track--130 { animation-duration: 130s; }

/* Riga di testo: le voci restano su una sola linea. */
.oly-marquee__line .elementor-heading-title {
	margin: 0;
	display: flex;
	gap: 26px;
	padding-right: 26px;
	white-space: nowrap;
}
.oly-marquee__line--mono .elementor-heading-title { gap: 22px; padding-right: 22px; }
.oly-marquee__line--24 .elementor-heading-title { gap: 24px; padding-right: 24px; }

/* Separatore a rombo tra le voci del nastro. */
.oly-marquee__line .oly-sep { opacity: .55; }
.oly-marquee__line--olivo .oly-sep { opacity: 1; color: #C9D8AC; }
.oly-marquee__line--terracotta .oly-sep { opacity: .5; }

@keyframes oly-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes oly-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}


/* Le due copie della riga non devono ereditare la larghezza piena del
   container Elementor, altrimenti si sovrappongono dentro al binario. */
.e-con.oly-marquee__track > .elementor-widget.oly-marquee__line {
	width: max-content;
	max-width: none;
	flex: 0 0 auto;
	align-self: center;
}
.e-con.oly-marquee__track { align-items: center; }

/* 4. PATTERN DI SFONDO --------------------------------------------------- */

/* Slot foto su fondo chiaro: righine diagonali color blu notte. */
.oly-slot-chiaro {
	background-image: repeating-linear-gradient(135deg, rgba(10,52,80,.07) 0 9px, rgba(10,52,80,0) 9px 18px);
	background-color: #EFE3CF;
}

/* Slot foto su fondo scuro: righine diagonali bianche. */
.oly-slot-scuro {
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 9px, rgba(255,255,255,0) 9px 18px);
	background-color: #1C4A69;
}

/* Sezione piatti: trama di rombi molto tenue su fondo bianco. */
.oly-pattern-rombi {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3E%3Cg%20fill='none'%20stroke='%230A3450'%20stroke-opacity='0.075'%20stroke-width='1.8'%3E%3Cpath%20d='M20%206l14%2014-14%2014L6%2020z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 40px 40px;
	background-repeat: repeat;
}

/* Tratteggio decorativo sul bordo superiore di un blocco colorato. */
.oly-tratti { position: relative; }
.oly-tratti::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 16px;
	pointer-events: none;
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 8px, rgba(255,255,255,0) 8px 18px);
}
.oly-tratti--azzurro::before {
	height: 18px;
	background: repeating-linear-gradient(90deg, rgba(143,195,228,.55) 0 10px, rgba(143,195,228,0) 10px 22px);
}
.oly-tratti--blu::before {
	height: 14px;
	opacity: .35;
	background: repeating-linear-gradient(90deg, #0066A7 0 14px, rgba(0,102,167,0) 14px 28px);
}

/* Bordo dentellato: chiude la sezione piatti con una fila di semicerchi. */
.oly-dentelli {
	height: 26px;
	background: radial-gradient(circle at 13px -1px, rgba(0,0,0,0) 13px, #fff 13.5px) repeat-x 0 0 / 26px 26px;
}


/* 5. PROPORZIONI SLOT FOTO ----------------------------------------------- */

/* Elementor Free non espone aspect-ratio: i segnaposto restano proporzionati
   anche prima di inserire le immagini definitive. */
.oly-ar-4-5   { aspect-ratio: 4 / 5; }
.oly-ar-4-3   { aspect-ratio: 4 / 3; }
.oly-ar-16-11 { aspect-ratio: 16 / 11; }
.oly-ar-16-9  { aspect-ratio: 16 / 9; }
.oly-ar-3-4   { aspect-ratio: 3 / 4; }
.oly-ar-1-1   { aspect-ratio: 1 / 1; }

/* Il widget immagine, quando verra popolato, riempie lo slot. */
[class*="oly-ar-"] .elementor-widget-image,
[class*="oly-ar-"] .elementor-widget-image .elementor-widget-container,
[class*="oly-ar-"] .elementor-widget-image figure {
	height: 100%;
	width: 100%;
	margin: 0;
}
[class*="oly-ar-"] .elementor-widget-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}


/* 6. DETTAGLI TIPOGRAFICI ------------------------------------------------ */

/* "a tavola," nel titolo hero: pastiglia blu leggermente ruotata. */
.oly-evidenza {
	display: inline-block;
	background: #0066A7;
	color: #fff;
	padding: 2px 16px 8px;
	border-radius: 14px 60px 16px 62px;
	transform: rotate(-1.6deg);
	margin: 6px 0;
}

/* "di piu" nel titolo piatti: corsivo terracotta. */
.oly-corsivo {
	font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
	font-style: italic;
	font-weight: 700;
	color: #A8492A;
}

/* A capo piu equilibrati su titoli e paragrafi lunghi. */
.oly-wrap-balance { text-wrap: balance; }
.oly-wrap-pretty  { text-wrap: pretty; }

/* Misura di lettura confortevole per i paragrafi introduttivi. */
.oly-misura-45 { max-width: 45ch; }
.oly-misura-48 { max-width: 48ch; }
.oly-misura-54 { max-width: 54ch; }


/* 7. RIDUZIONE DEL MOVIMENTO --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.e-con.oly-marquee__track { animation: none; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* 8. INTEGRAZIONI SU WIDGET SPECIFICI ------------------------------------ */

/* Voci del menu a pastiglia: UAE non espone il raggio delle singole voci. */
.oly-nav .hfe-nav-menu li a.hfe-menu-item,
.oly-nav .hfe-nav-menu li a.hfe-sub-menu-item {
	border-radius: 999px;
	transition: background .2s ease, color .2s ease;
}

/* Macchia organica decorativa dell'hero: raggio con sintassi a due assi,
   non riproducibile dal controllo raggio di Elementor. */
.oly-blob {
	border-radius: 48% 52% 44% 56% / 56% 44% 56% 44%;
}

/* Cornice ad arco dietro la foto principale. */
.oly-arco {
	border-radius: 340px 340px 32px 32px;
}
.oly-arco-piccolo {
	border-radius: 200px 200px 26px 26px;
}
.oly-arco-basso {
	border-radius: 22px 22px 90px 90px;
}

/* Misure di lettura ricorrenti (max-width in caratteri). */
.oly-misura-24 { max-width: 24ch; }
.oly-misura-30 { max-width: 30ch; }
.oly-misura-32 { max-width: 32ch; }
.oly-misura-42 { max-width: 42ch; }
.oly-misura-44 { max-width: 44ch; }

/* Le pastiglie "occhiello" e le etichette ruotate non devono ereditare la
   larghezza piena del container flex. */
.oly-pill {
	flex: 0 0 auto;
	align-self: flex-start;
}
.oly-pill--centro {
	align-self: center;
}

/* Il paragrafo del widget testo non deve aggiungere margini propri:
   la spaziatura la governa il container. */
.oly-no-margin p:last-child { margin-bottom: 0; }

/* Elenco contatti del footer: il testo su piu righe resta allineato. */
.elementor-widget-icon-list .elementor-icon-list-text { line-height: inherit; }
/* Icona grande sfumata sul fondo delle card "Che serata hai in mente?". */
.oly-icona-sfondo { opacity: .10; line-height: 0; pointer-events: none; }

/* La mappa riempie il riquadro senza bordi propri. */
.elementor-widget-google_maps iframe { display: block; border: 0; }

/* Il CTA sempre visibile non deve coprire il footer su schermi piccoli. */
@media (max-width: 767px) {
	.oly-cta-fisso .elementor-button { font-size: 15px; padding: 13px 20px; }
}