/*
Theme Name: Lili & Alix (Hello Child)
Theme URI: https://github.com/elementor/hello-theme/
Description: Child theme of Hello Elementor for Lili & Alix — Private Worlds. All layout and design lives in Elementor (global variables + global classes); this file only holds the base layer Elementor cannot express: body font stack, page background and resets for Hello's defaults.
Author: Yojimbo Estudio
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Body text: Avenir where the visitor has it installed, Nunito Sans (bundled) everywhere else. */
@font-face { font-family: 'Nunito Sans'; font-weight: 300; src: url('assets/fonts/nunito-sans-latin-300-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito Sans'; font-weight: 400; src: url('assets/fonts/nunito-sans-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito Sans'; font-weight: 600; src: url('assets/fonts/nunito-sans-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito Sans'; font-weight: 700; src: url('assets/fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); font-display: swap; }

/* Display + script fonts (also registered in Elementor › Custom Fonts so they appear in the font picker). */
@font-face { font-family: 'Luxoorea'; src: url('assets/fonts/luxoorea.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Brittany Signature'; src: url('assets/fonts/brittany-signature.woff2') format('woff2'); font-display: swap; }

html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #eee7e0;
	color: #1a1414;
	font-family: 'Avenir Next', 'Avenir', 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(15px, 1vw, 17px);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
a { color: inherit; }
a:hover, a:active { color: inherit; }
:focus-visible { outline: 2px solid #f069a3; outline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* Brand accent: italic text (I) in any Elementor heading or text renders as the pink accent
   used across the design (e.g. "A <em>World</em> Designed For You"). Same convention as the
   original theme's *word* = pink. */
.elementor em { font-style: normal; color: var(--pink-text, #ee5d9c); }

/* Header (Theme Builder → Header, global class "la-header"): transparent over the hero,
   solid once the page scrolls (site.js adds .is-scrolled) and always solid on plain pages. */
.la-header.is-scrolled,
body:has(.la-solid-header) .la-header,
body:not(.page-template-elementor_header_footer) .la-header {
	background-color: rgba(26, 14, 14, .82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
body:not(.page-template-elementor_header_footer) .site-main,
body:not(.page-template-elementor_header_footer) main#content { padding-top: 84px; }
body.admin-bar .la-header { top: 32px; }
body.home .la-header-logo { visibility: hidden; }
body.home .la-header.is-scrolled .la-header-logo { visibility: visible; }
@media (max-width: 1024px) {
	.la-header-logo { width: 62px !important; margin-top: 0 !important; margin-right: auto !important; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
	.la-header.is-scrolled .la-header-logo, body.home .la-header.is-scrolled .la-header-logo { opacity: 1; visibility: visible; }
}
@media (max-width: 782px) { body.admin-bar .la-header { top: 46px; } }
/* Footer logo spans the full row on tablet/mobile (the linked logo is wrapped in <a>). */
@media (max-width: 1024px) { .footer-top > :first-child { grid-column: 1 / -1; } }
.form-consent a { text-decoration: underline; }

/* "What makes <em>Viva</em> special": the italic word gets the pink frame. */
.special-title em { font-style: normal; color: var(--pink-text, #ee5d9c); border: 1.5px solid var(--pink, #f069a3); padding: .08em .1em .02em .35em; }
/* "The feeling" quote: first line in gold, like the original design. */
.feeling-quote::first-line { color: var(--gold-text, #f3a33a); }

/* Find Your World quiz (assets/js/quiz.js). Screens stay visible inside the Elementor editor. */
body:not(.elementor-editor-active) .quiz-question,
body:not(.elementor-editor-active) .quiz-result,
body:not(.elementor-editor-active) .quiz-cta { display: none; }
body:not(.elementor-editor-active) .quiz-intro.is-off { display: none; }
body:not(.elementor-editor-active) .quiz-question.is-on,
body:not(.elementor-editor-active) .quiz-result.is-on,
body:not(.elementor-editor-active) .quiz-cta.is-on { display: block; animation: la-fade .5s cubic-bezier(.22, .61, .36, 1) both; }
.quiz-option { display: flex; align-items: center; gap: 20px; width: 100%; text-align: left; background: #fff; border: 1px solid rgba(26, 20, 20, .12); padding: 20px 24px; font: inherit; font-size: 16px; font-weight: 300; line-height: 1.5; color: #1a1414; cursor: pointer; transition: border-color .2s, background .2s; animation: la-fade .4s cubic-bezier(.22, .61, .36, 1) both; }
.quiz-option:hover, .quiz-option.is-picked { border-color: #841d38; background: #fff9f4; }
.quiz-option__letter { font-family: 'Luxoorea', serif; font-size: 20px; color: #841d38; min-width: 22px; }

/* Motion that Elementor's atomic styles cannot store (keyframes). Hooked to global class names. */
.spin-slow { animation: la-spin 22s linear infinite; }
@keyframes la-spin { to { transform: rotate(360deg); } }
.bob { animation: la-bob 2.4s ease-in-out infinite; }
@keyframes la-bob { 50% { translate: 0 8px; } }
.fade-panel > .e-tab-content:not([hidden]),
.fade-panel > [role="tabpanel"]:not([hidden]) { animation: la-fade .6s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes la-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}