/*
Theme Name: LiLa Theme
Description: Custom theme for Lila Resort, Koh Tang Private Island. Child of Hello Elementor; carries the brand styling for the Elementor-built pages.
Author: Lila Resort
Version: 1.0.0
Template: hello-elementor
Text Domain: lila-theme
Requires at least: 6.0
Requires PHP: 7.4
*/

/* ---------------------------------------------------------------
   Brand typography: self-hosted Futura + Avenir (replaces the
   Google Fonts used in earlier drafts — Jost, Poppins, Mulish,
   Cormorant Garamond, Marcellus).
   --------------------------------------------------------------- */
@font-face{font-family:'Futura';src:url('assets/fonts/Futura-Medium.ttf') format('truetype');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Futura';src:url('assets/fonts/Futura-MediumItalic.ttf') format('truetype');font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:'Futura';src:url('assets/fonts/Futura-Bold.ttf') format('truetype');font-weight:600 900;font-style:normal;font-display:swap}

@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-Book.ttf') format('truetype');font-weight:350;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-BookItalic.ttf') format('truetype');font-weight:350;font-style:italic;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-Roman.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-RomanItalic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-MediumItalic.ttf') format('truetype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-Heavy.ttf') format('truetype');font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-HeavyItalic.ttf') format('truetype');font-weight:600 800;font-style:italic;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Avenir';src:url('assets/fonts/Avenir-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap}

html{scroll-behavior:smooth}
body{background:#fff;color:#1C1E1B;-webkit-font-smoothing:antialiased}
[id]{scroll-margin-top:84px}
.lila-header{position:sticky;top:0;z-index:999}
.admin-bar .lila-header{top:32px}
.lila-nav .elementor-icon-list-icon,.lila-plainlist .elementor-icon-list-icon{display:none!important}
.lila-nav .elementor-icon-list-text,.lila-plainlist .elementor-icon-list-text{padding-left:0!important}
.lila-nav .elementor-icon-list-items{justify-content:center;flex-wrap:wrap;row-gap:4px}
.lila-header>.elementor-widget{width:auto;max-width:100%}
.lila-header .lila-book .elementor-button{padding:12px 20px}
.lila-nav .elementor-icon-list-item a{transition:color .2s ease}
.lila-nav{flex:1 1 auto}
.elementor-widget-text-editor p{margin:0}
.elementor-widget-heading .elementor-heading-title{margin:0}
.elementor-button{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.elementor-widget-icon-box .elementor-icon-box-title{margin:0}
.elementor-widget-icon-box .elementor-icon-box-description{max-width:210px;margin-left:auto;margin-right:auto}
.lila-getting-here{position:relative;overflow:hidden}
.lila-getting-here::before,.lila-getting-here::after{content:'';position:absolute;left:0;right:0;pointer-events:none;background-repeat:repeat-x;background-position:0 0;z-index:0}
.lila-getting-here::before{top:40px;height:70px;background-image:url(assets/waves/vector-50.svg)}
.lila-getting-here::after{bottom:40px;height:52px;background-image:url(assets/waves/vector-53.svg)}
.lila-getting-here>.e-con-inner{position:relative;z-index:1}
.lila-hero-title{max-width:780px}
@media (max-width:1024px){#experiences .e-grid>.e-con:nth-child(even){border-right-width:0!important}}
@media (min-width:1025px) and (max-width:1200px){.lila-nav .elementor-icon-list-items{column-gap:22px!important}.lila-header{padding-left:24px!important;padding-right:24px!important}}
@media (max-width:767px){.admin-bar .lila-header{top:46px}.elementor-widget-icon-box .elementor-icon-box-description{max-width:none}}

/* Responsive navigation: hamburger + dropdown up to 1024px */
.lila-burger{display:none;width:44px;height:44px;padding:0;margin:0;border:1px solid rgba(28,30,27,.2);border-radius:0;background:transparent;cursor:pointer;position:relative;flex:0 0 auto;-webkit-tap-highlight-color:transparent}
.lila-burger:hover,.lila-burger:focus{background:transparent}
.lila-burger:focus-visible{outline:2px solid #334F41;outline-offset:2px}
.lila-burger span{position:absolute;left:12px;right:12px;height:1.5px;background:#1C1E1B;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.lila-burger span:nth-child(1){top:15px}
.lila-burger span:nth-child(2){top:21px}
.lila-burger span:nth-child(3){top:27px}
.lila-nav-open .lila-burger span:nth-child(1){top:21px;transform:rotate(45deg)}
.lila-nav-open .lila-burger span:nth-child(2){opacity:0}
.lila-nav-open .lila-burger span:nth-child(3){top:21px;transform:rotate(-45deg)}
@media (max-width:1024px){
  .lila-header{padding-top:8px!important;padding-bottom:8px!important;flex-wrap:wrap}
  .lila-burger{display:block}
  .lila-header .lila-book{margin-left:auto}
  .lila-header .lila-nav{order:3;flex:1 1 100%;width:100%;display:none;margin-top:8px;border-top:1px solid rgba(28,30,27,.12)}
  .lila-nav-open .lila-nav{display:block;max-height:calc(100vh - 90px);overflow-y:auto}
  .lila-nav .elementor-icon-list-items{margin:0!important;padding:0!important;overflow:visible!important;flex-direction:column;align-items:stretch;justify-content:flex-start!important;flex-wrap:nowrap!important;row-gap:0}
  .lila-nav .elementor-icon-list-item{width:100%;margin:0!important;border-bottom:1px solid rgba(28,30,27,.08)}
  .lila-nav .elementor-icon-list-item>a{display:block;width:100%;padding:16px 4px}
}

/* ---------------------------------------------------------------
   Motion
   --------------------------------------------------------------- */
/* Elementor entrance animations: slower, softer easing */
.animated{animation-duration:.9s!important;animation-timing-function:cubic-bezier(.2,.7,.2,1)!important}
.animated.fadeInUp{--e-animation-distance:28px}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}

/* Header: shadow + smaller logo once scrolled, gold scroll-progress line */
.lila-header{transition:box-shadow .3s ease,background-color .3s ease}
.lila-header.is-scrolled{box-shadow:0 6px 24px rgba(28,30,27,.08)}
.lila-logo img{transition:width .3s ease,transform .3s ease}
.lila-header.is-scrolled .lila-logo img{transform:scale(.84)}
.lila-header::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:#A78844;transform:scaleX(var(--lila-progress,0));transform-origin:left;pointer-events:none}

/* Nav links: gold underline that draws in */
.lila-nav .elementor-icon-list-text{position:relative;display:inline-block}
.lila-nav .elementor-icon-list-text::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:#A78844;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lila-nav .elementor-icon-list-item:hover .elementor-icon-list-text::after{transform:scaleX(1)}

/* Buttons: gentle lift */
.lila-btn .elementor-button{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.lila-btn .elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(28,30,27,.16)}
.elementor-widget-button .elementor-button-text{transition:letter-spacing .3s ease}

/* Hero: slow settle-in zoom on the photo */
.lila-hero{position:relative;overflow:hidden}
.lila-hero::before{content:'';position:absolute;inset:0;background:inherit;z-index:0;animation:lilaSettle 16s cubic-bezier(.2,.6,.2,1) both}
.lila-hero>.e-con-inner{position:relative;z-index:1}
@keyframes lilaSettle{from{transform:scale(1.10)}to{transform:scale(1)}}

/* Image cards and split-section photos: zoom on hover */
.lila-zoom{position:relative;overflow:hidden}
.lila-zoom::before{content:'';position:absolute;inset:0;background:inherit;z-index:0;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.lila-zoom>*{position:relative;z-index:1}
.lila-zoom:hover::before{transform:scale(1.06)}

/* Pillars: circle fills with brand green on hover */
.elementor-widget-icon-box .elementor-icon{transition:background-color .35s ease,border-color .35s ease,color .35s ease,transform .35s ease}
.elementor-widget-icon-box:hover .elementor-icon{background-color:#334F41!important;border-color:#334F41!important;color:#fff!important;transform:translateY(-4px)}
.elementor-widget-icon-box:hover .elementor-icon svg{fill:#fff!important}
.elementor-widget-icon-box:hover .elementor-icon i{color:#fff!important}

/* Getting Here: waves drift sideways (loops seamlessly) */
.lila-getting-here::before{animation:lilaWaveA 22s linear infinite}
.lila-getting-here::after{animation:lilaWaveB 30s linear infinite}
@keyframes lilaWaveA{to{background-position:640px 0}}
@keyframes lilaWaveB{to{background-position:-853.33px 0}}

/* Mobile menu: panel drops in, links stagger */
@keyframes lilaDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes lilaItem{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@media (max-width:1024px){
  .lila-nav-open .lila-nav{animation:lilaDrop .32s cubic-bezier(.2,.7,.2,1) both}
  .lila-nav-open .lila-nav .elementor-icon-list-item{animation:lilaItem .4s cubic-bezier(.2,.7,.2,1) both}
  .lila-nav-open .lila-nav .elementor-icon-list-item:nth-child(1){animation-delay:.05s}
  .lila-nav-open .lila-nav .elementor-icon-list-item:nth-child(2){animation-delay:.10s}
  .lila-nav-open .lila-nav .elementor-icon-list-item:nth-child(3){animation-delay:.15s}
  .lila-nav-open .lila-nav .elementor-icon-list-item:nth-child(4){animation-delay:.20s}
  .lila-nav-open .lila-nav .elementor-icon-list-item:nth-child(5){animation-delay:.25s}
  .lila-nav .elementor-icon-list-text::after{display:none}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .elementor-invisible{visibility:visible!important}
  .lila-hero::before{animation:none}
}
/* ---------------------------------------------------------------
   Services page
   --------------------------------------------------------------- */
.lila-frame::after{content:'';position:absolute;inset:14px;border:1px solid rgba(255,255,255,.5);pointer-events:none;z-index:1;transition:inset .6s cubic-bezier(.2,.7,.2,1)}
.lila-frame:hover::after{inset:20px}
.lila-num{text-shadow:0 2px 12px rgba(0,0,0,.5)}
.lila-hero-sub{max-width:560px}
.lila-scroll-line{transform-origin:top;animation:lilaScroll 2.4s ease-in-out infinite}
@keyframes lilaScroll{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.lila-tile{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.lila-tile:hover{transform:translateY(-5px)}
.lila-tile .elementor-icon{border-color:rgba(15,110,86,.15)!important}
.lila-tile .elementor-widget-icon-box:hover .elementor-icon{background-color:#0F6E56!important;border-color:#0F6E56!important}
.lila-footlinks .elementor-icon-list-items{justify-content:flex-end;flex-wrap:wrap}
@media (max-width:767px){.lila-footlinks .elementor-icon-list-items{justify-content:flex-start}}
/* Villas page */
.lila-vcard{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.lila-vcard:hover{transform:translateY(-6px)}
.lila-hero-s .lila-hero-sub{max-width:560px}
/* ---------------------------------------------------------------
   Gallery page
   --------------------------------------------------------------- */
.lila-gallery-grid.e-con{display:block!important;column-count:3;column-gap:16px}
@media (max-width:1024px){.lila-gallery-grid.e-con{column-count:2}}
@media (max-width:600px){.lila-gallery-grid.e-con{column-count:1}}
.lila-gtile.e-con{display:block!important;position:relative!important;overflow:hidden;border-radius:4px;margin:0 0 16px;break-inside:avoid;box-shadow:0 20px 60px -20px rgba(0,0,0,.5);background:#F5F0E8;transition:opacity .3s ease,transform .3s ease}
.lila-gtile.e-con>*{display:block!important}
.lila-gtile img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.lila-gtile:hover img{transform:scale(1.05)}
.lila-gtile.is-hidden{display:none!important}
.lila-gcaption{position:absolute!important;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(180deg,rgba(9,59,45,0) 0%,rgba(9,30,24,.82) 100%);pointer-events:none}
.lila-gcaption .elementor-heading-title{margin:0}
.lila-gcaption .elementor-widget-heading+.elementor-widget-heading{margin-top:4px}

.lila-filterbar{position:sticky;top:78px;z-index:50;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media (max-width:1024px){.lila-filterbar{top:60px}}
.lila-filter-row .elementor-widget-button{margin:0}
.lila-filter-btn{transition:transform .2s ease}
.lila-filter-btn .elementor-button{background-color:transparent!important;color:#5F5E5A!important;border-color:#E4DDCA!important;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.lila-filter-btn.is-active .elementor-button{background-color:#093B2D!important;color:#fff!important;border-color:#093B2D!important}
.lila-filter-btn:not(.is-active):hover .elementor-button{border-color:#093B2D!important;color:#093B2D!important}
.lila-gcount-label span{color:#093B2D;font-weight:700}

.lila-gcta .elementor-widget-button .elementor-button{transition:background-color .25s ease,color .25s ease,transform .25s ease}
.lila-gcta .elementor-widget-button .elementor-button:hover{transform:translateY(-2px)}
/* ---------------------------------------------------------------
   Sustainability page
   --------------------------------------------------------------- */
@media (max-width:767px){#stat-strip .e-flex{flex-wrap:wrap}.lila-stat:nth-child(-n+2){border-bottom:1px solid rgba(196,184,154,.5)}}

/* ---------------------------------------------------------------
   Contact page
   --------------------------------------------------------------- */
.lila-form-card .wpforms-container{margin:0}
.lila-form-card .wpforms-field{padding-bottom:16px!important}
.lila-form-card .wpforms-field-label{font-family:'Jost',sans-serif;font-weight:500;font-size:13px!important;margin-bottom:6px!important}
.lila-form-card .wpforms-submit-container{margin-top:4px!important}
.lila-form-card .wpforms-submit{letter-spacing:1.1px;text-transform:uppercase;font-size:11px!important;padding:13px 26px!important;transition:transform .25s ease,box-shadow .25s ease}
.lila-form-card .wpforms-submit:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(28,30,27,.16)}
.lila-icon-circle{flex:0 0 40px!important;width:40px!important;aspect-ratio:1/1}

/* ---------------------------------------------------------------
   Policy page
   --------------------------------------------------------------- */
.lila-toc{position:sticky;top:104px;align-self:flex-start}
@media (max-width:1024px){.lila-toc{position:static}}
.lila-toc-list .elementor-icon-list-item{border-radius:4px;transition:background-color .2s ease}
.lila-toc-list .elementor-icon-list-item>a{display:block;padding:7px 10px}
.lila-toc-list .elementor-icon-list-item.is-active{background-color:rgba(9,59,45,.07)}
.lila-toc-list .elementor-icon-list-item.is-active .elementor-icon-list-text{color:#093B2D!important;font-weight:600}
.lila-pol-tag .elementor-button{cursor:default;pointer-events:none}
.lila-pol-tag .elementor-button:hover{transform:none;box-shadow:none}
.lila-pol-table a{color:#093B2D;text-decoration:underline}
/* Home: highlights (Reef / Wellness / Exploration / Dining) */
.lila-pillar{position:relative}
.lila-pillar .lila-discover{margin-top:auto;position:static}
.lila-pillar .lila-discover .elementor-widget-container{position:static}
.lila-pillar .lila-discover .elementor-button{position:static;transition:border-color .3s ease,color .3s ease}
.lila-pillar .lila-discover .elementor-button::after{content:'';position:absolute;inset:0}
.lila-pillar-circle{flex:0 0 76px!important;width:76px!important;aspect-ratio:1/1;transition:background-color .35s ease,border-color .35s ease,transform .35s ease}
.lila-pillar-circle .elementor-icon{color:#7B9FA0;transition:color .35s ease}
.lila-pillar-circle .elementor-icon svg{width:30px;height:30px;fill:none!important;stroke:currentColor}
.lila-pillar:hover .lila-pillar-circle{background-color:#15626C;border-color:#15626C!important;transform:translateY(-4px)}
.lila-pillar:hover .lila-pillar-circle .elementor-icon{color:#F6F1E9!important}
.lila-pillar:hover .lila-discover .elementor-button{border-bottom-color:#A88045!important}
.lila-pillar-text{max-width:24ch;margin-left:auto;margin-right:auto}
@media (max-width:1024px){.lila-pillar:nth-child(n+3){border-top:1px solid rgba(9,59,45,.14);padding-top:32px}}
@media (max-width:767px){.lila-pillar:nth-child(n+2){border-top:1px solid rgba(9,59,45,.14);padding-top:32px;margin-top:20px}.lila-pillar-text{max-width:30ch}}