/*
Theme Name: Lizaffair Beauty Spa
Theme URI: https://lizaffair.com/
Author: Cr8tify / Lizaffair
Author URI: https://lizaffair.com/
Description: A luxury spa theme for Lizaffair Beauty Spa, Abuja. Custom animated homepage, a built-in Theme Options dashboard (logo, colors, fonts, header, footer, audio, custom CSS), CSS-variable theming, mobile optimization, widget areas, and Elementor compatibility.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lizaffair-spa
*/

/* ============ BRAND TOKENS (defaults; overridden by Theme Options) ============ */
:root {
  --liz-gold: #b07414;
  --liz-gold-bright: #d99c27;
  --liz-gold-light: #e9b96a;
  --liz-dark: #211b13;
  --liz-darker: #16110c;
  --liz-dark-2: #1c1610;
  --liz-cream: #f4eee4;
  --liz-panel: #fbf8f1;
  --liz-cream-2: #e9dfd0;
  --liz-ink: #fffbf4;
  --liz-muted: #6d6252;
  --liz-heading-font: 'Italiana', serif;
  --liz-body-font: 'Albert Sans', sans-serif;
  --liz-accent-font: 'Cormorant Garamond', serif;
}

/* ============ BASE ============ */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--liz-darker);
  -webkit-font-smoothing: antialiased;
  font-family: var(--liz-body-font);
  color: var(--liz-dark);
  overflow-x: hidden;
}
::selection { background: var(--liz-gold-bright); color: var(--liz-darker); }
img, video { backface-visibility: hidden; max-width: 100%; }
.liz-wrap { font-family: var(--liz-body-font); color: var(--liz-dark); background: var(--liz-darker); }

/* ============ ANIMATIONS ============ */
@keyframes heroLineUp { from { transform: translateY(110%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeDown { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes floatY { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes btnShine { to { left: 130%; } }

[data-reveal] { opacity: 0; transform: translateY(46px); transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1); }
[data-reveal="left"] { transform: translateX(-70px); }
[data-reveal="right"] { transform: translateX(70px); }
[data-reveal].on { opacity: 1; transform: translate(0, 0); }

/* ============ HEADER / NAV ============ */
#siteHeader { transform: translateZ(0); background: transparent; transition: background 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease; }
#siteHeader.scrolled { background: rgba(24,17,10,0.62); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 12px 40px rgba(0,0,0,0.28); }
.navItem .megaPanel { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.16,1,.3,1); z-index: 40; }
.navItem:hover .megaPanel, .navItem:focus-within .megaPanel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.navItem::after { content: ''; position: absolute; left: -10px; right: -10px; top: 100%; height: 16px; }
.megaPanel a:hover { background: rgba(255,251,244,0.1); }
.subLink { transition: color 0.3s ease; }
.subLink:hover { color: var(--liz-gold-light) !important; }

/* ============ BUTTONS ============ */
.growBtn { transition: transform 0.4s cubic-bezier(.16,1,.3,1); }
.growBtn:hover { transform: scale(1.06); }
.shineBtn { position: relative; overflow: hidden; }
.shineBtn::after { content: ''; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%); transform: skewX(-20deg); pointer-events: none; }
.shineBtn:hover::after { animation: btnShine 0.85s ease; }

/* ============ SERVICES ROWS ============ */
.svc-row:hover .svc-arrow { transform: translateX(10px); opacity: 1; }
.svc-row:hover .svc-name { color: var(--liz-gold); }

/* ============ RESPONSIVE (desktop -> tablet) ============ */
.mobBtn { display: none; }
.heroMobCta { display: none; }
@media (min-width: 901px) { .mobPanel { display: none !important; } }

@media (max-width: 1180px) {
  .heroHead { position: static !important; text-align: left !important; padding: 12px 40px 28px !important; font-size: clamp(38px, 6.8vw, 68px) !important; }
  .heroCardWrap { padding-bottom: 32px !important; }
}
@media (min-width: 641px) and (max-width: 1180px) {
  #heroVidA { object-position: 82% 22% !important; }
  .heroPoster { background-position: 82% 22% !important; }
}
@media (max-width: 900px) {
  .navLinks { display: none !important; }
  .bookNowTop { display: none !important; }
  .mobBtn { display: flex !important; }
  .ritualGrid { grid-template-columns: 1fr !important; }
  .posterGrid { grid-template-columns: 1fr !important; padding: 90px 6vw !important; }
  .prodGrid { grid-template-columns: 1fr !important; gap: 50px !important; padding: 100px 6vw !important; }
  .whyGrid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .whyCol { text-align: left !important; align-items: flex-start !important; }
  .footCols { grid-template-columns: 1fr 1fr !important; gap: 36px 20px !important; }
  .heroCard { width: 100% !important; max-width: 430px; }
  .secPad { padding: 120px 6vw 100px !important; }
  .svcSec { padding: 0 6vw 100px !important; }
  .priceGrid { display: block !important; padding: 100px 6vw !important; }
  .priceLeft { position: static !important; margin-bottom: 50px; }
  .testiSec { padding: 100px 6vw !important; }
  .testiGrid { grid-template-columns: 1fr !important; }
  .footSec { padding: 110px 6vw 0 !important; }
  .footBar { flex-direction: column; gap: 8px; align-items: center; text-align: center; }
  .founderGrid { grid-template-columns: 1fr !important; }
  .researchGrid { grid-template-columns: 1fr !important; }
  .researchPhoto { min-height: 420px !important; }
  .footPanel { padding: 44px 26px 0 !important; }
  .tabGrid { grid-template-columns: 1fr !important; }
  .tabPhoto { min-height: 380px !important; }
  .faqGrid { padding: 100px 6vw !important; }
  .faqLeft { margin-bottom: 46px !important; }
  .expWrap { flex-direction: column !important; height: 940px !important; }
  .expCard { min-width: 0 !important; min-height: 64px !important; }
}

/* ============ MOBILE OPTIMIZATION (phones) ============ */
@media (max-width: 768px) {
  .secPad { padding: 78px 6vw 68px !important; }
  #services, .svcSec { padding: 66px 6vw !important; }
  .posterGrid { padding: 70px 6vw !important; }
  #shop, .prodGrid { padding: 78px 6vw !important; }
  #founder { padding: 78px 6vw !important; }
  #research > div:last-child { padding: 64px 7vw !important; }
  #why { padding: 78px 6vw !important; }
  #pricing, .priceGrid { padding: 78px 6vw !important; }
  #serviceMenu { padding: 56px 6vw 78px !important; }
  #testimonials, .testiSec { padding: 78px 6vw !important; }
  #faq, .faqGrid { padding: 74px 6vw 88px !important; }
  .footSec { padding: 88px 6vw 24px !important; }
  .expWrap { height: 860px !important; }
  .prodGrid { min-height: auto !important; }
  .heroFramePad { padding: 12px !important; }
}
@media (max-width: 640px) {
  .heroCard { display: none !important; }
  .heroCardWrap { flex: 1 !important; padding: 0 20px 22px !important; }
  .heroMobCta { display: inline-flex !important; }
  .heroNav { padding: 18px 20px !important; }
  .heroHead { font-size: clamp(30px, 9vw, 46px) !important; padding: 6px 20px 18px !important; }
  .heroRail { margin: 0 20px !important; }
  .heroRail span { font-size: 12px !important; }
  #fillText { font-size: clamp(23px, 6.6vw, 34px) !important; }
  .footCols { grid-template-columns: 1fr 1fr !important; gap: 30px 18px !important; }
  .testiGrid { gap: 18px !important; }
  .footPanel { padding: 34px 20px 0 !important; }
  .shineBtn, .heroMobCta { max-width: 100%; }
}