/* Avatara Resort – Premium Styles
   Gold: #C5A253  Deep Gold: #A8872A  Ivory: #FAF7F2  Charcoal: #1F2937
*/
:root{
  --gold:#C5A253; --gold-600:#A8872A;
  --ink:#1F2937; --muted:#6b7280; --ivory:#FAF7F2; --white:#fff; --line:#e7e8ec;
  --rad:18px; --shadow:0 10px 30px rgba(2,8,23,.08); --shadow-lg:0 16px 40px rgba(2,8,23,.10);
  --space:68px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink); background:var(--white);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Typography */
h1,h2,h3{font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif; letter-spacing:.2px; color:var(--ink)}
h1{font-weight:600; line-height:1.15}
h2{font-weight:600; line-height:1.2}
h3{font-weight:500; line-height:1.25}
.muted{color:var(--muted)}
.kicker{color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.82rem}

/* Header / Nav */
.navwrap{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.08) blur(10px);box-shadow:0 1px 6px rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 6px}
.brand{display:flex;align-items:center;gap:0}
.brand img{height:34px;width:auto}
.menu{display:flex;gap:24px;align-items:center}
.menu a{font-weight:600;color:var(--ink);opacity:.9;transition:opacity .15s}
.menu a:hover{opacity:1;color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:.45rem;justify-content:center;background:var(--gold);color:#fff;border:2px solid var(--gold);border-radius:999px;padding:.65rem 1.05rem;font-weight:700;box-shadow:var(--shadow);transition:background .2s, transform .08s}
.btn:hover{background:var(--gold-600);border-color:var(--gold-600)}
.btn:active{transform:translateY(1px)}
.btn.outline{background:transparent;color:var(--gold);border:2px solid var(--gold);box-shadow:none}
.btn.outline:hover{color:#fff;background:var(--gold)}
.btn.small{padding:.5rem .8rem;font-weight:700}

/* Hero */
.hero{
  min-height:72vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:72px 20px;
  background:linear-gradient(180deg, rgba(250,247,242,.8), rgba(255,255,255,.95));
}

/* ✅ Correct relative path from assets/style.css → assets/hero.jpg */
.hero.has-image{
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
}


.hero h1{font-size:clamp(2.2rem,4vw,3.2rem);margin:.2em 0 .1em}
.hero p{max-width:820px;margin:0 auto 16px;color:var(--muted);font-size:1.05rem}


/* Sections */
section{padding:var(--space) 0}
.section-ivory{background:var(--ivory)}
h2{font-size:clamp(1.7rem,2.8vw,2.35rem);margin:0 0 22px;display:inline-block;padding-bottom:8px;border-bottom:2px solid var(--gold)}
.divider{height:1px;background:linear-gradient(90deg,transparent,#e9e9ec,transparent);margin:34px 0}

/* Grid & Cards */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .16s ease, box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card img{aspect-ratio:3/2;object-fit:cover}
.card .content{padding:20px}

/* Soft cards */
.soft{background:var(--ivory)}

/* Badges */
.badge{display:inline-block;padding:.28rem .65rem;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-weight:700;font-size:.82rem}

/* Feature list icons */
.features{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.features li{display:flex;align-items:center;gap:.6rem}
.features li i{color:var(--gold);font-size:1.2rem}

/* Gallery */
.gallery img{border-radius:14px}

/* Footer */
footer{background:#0f172a;color:#cbd5e1;margin-top:40px}
footer .inner{padding:34px 0}
footer a{color:#cbd5e1}
footer .icons i{font-size:1rem}
.footline{border-top:1px solid #1f2937;padding:12px 0;color:#94a3b8;font-size:.92rem;text-align:center}

/* FAQ accordion */
.accordion{display:grid;gap:12px}
.item{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.q{width:100%;text-align:left;background:transparent;border:0;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:16px 18px;font-weight:700;cursor:pointer}
.q span{flex:1;padding-right:12px}
.plus{font-weight:900;font-size:18px;transition:transform .2s}
.a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 18px}
.item.open .a{padding:0 18px 16px}
.item.open .plus{transform:rotate(45deg)}

/* Utilities */
.center{text-align:center}
.stack{display:grid;gap:10px}
.icons{display:inline-flex;align-items:center;gap:.5rem}
.icons i{font-size:1.05rem;line-height:1}

/* ===== Experiences Section ===== */
.experiences .card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-top-left-radius:var(--rad);border-top-right-radius:var(--rad)}
.experiences .card{overflow:hidden;transition:transform .16s ease, box-shadow .2s}
.experiences .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.experiences .card .content{padding:18px 20px}

/* Three-line hamburger (absolute lines for precision) */
.hamburger{
  display:none;                 /* shown on mobile via media query */
  position:relative;
  width:44px; height:44px;
  background:transparent; border:0; border-radius:10px;
  cursor:pointer;
}

/* the three lines */
.hamburger span{
  position:absolute;
  left:50%;
  width:22px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transform:translateX(-50%);
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}

/* positions */
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:28px; }

/* hover tint */
.hamburger:hover span{ background:var(--gold); }

/* animate to X when expanded */
.hamburger[aria-expanded="true"] span:nth-child(1){
  transform:translateX(-50%) translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.hamburger[aria-expanded="true"] span:nth-child(3){
  transform:translateX(-50%) translateY(-7px) rotate(-45deg);
}

/* Mobile layout */
@media (max-width: 940px){
  .hamburger{ display:inline-flex; }
  .menu{
    position: fixed;
    top: 64px; right:16px; left:16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow: var(--shadow);
    padding:12px;
    display:none;
    flex-direction: column;
    gap:12px;
    z-index:60;
  }
  .menu.open{ display:flex; }
  .menu a{ padding:10px 12px; border-radius:10px; }
  .menu a:hover{ background:var(--ivory); }
}


/* Hero text colors tuned for dark background */
.hero.has-image h1 {
  color: #FAF7F2; /* Ivory white */
  text-shadow: 0 2px 6px rgba(0,0,0,0.4); /* subtle contrast */
}

.hero.has-image p {
  color: #E5E5E5; /* light grey for readability */
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.hero.has-image .kicker {
  color: var(--gold); /* brand gold */
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}


/* ===== Enhanced Footer (mobile-first & rich content) ===== */
.site-footer{
  background:#0f1218; /* deeper charcoal for premium look */
  color:#e5e7eb;
  margin-top:64px;
  font-size:0.95rem;
}

.footer-grid{
  display:grid;
  gap:28px;
  padding:44px 0;
  grid-template-columns: 1fr; /* mobile */
}

.f-brand .f-logo{ height:56px; margin-bottom:10px }
.f-brand h3{
  margin:0 0 6px 0;
  font-family:"Cormorant Garamond", serif;
  color:var(--gold);
  font-weight:600;
}
.f-brand .tagline{ color:#cbd5e1; margin:0 0 12px 0 }

.f-cta{ margin-top:6px; }

.f-contact, .f-payments, .f-policies{
  list-style:none; padding:0; margin:16px 0 0 0; display:grid; gap:8px;
}
.f-contact li, .f-policies li{ display:flex; gap:10px; align-items:flex-start }
.site-footer i{ color:var(--gold); font-size:1.05rem; line-height:1.1 }

.f-links{ display:grid; gap:8px }
.f-links a{ color:#e5e7eb; transition:color .2s }
.f-links a:hover{ color:var(--gold) }

.f-col h4{
  margin:4px 0 10px 0;
  font-weight:700;
  color:var(--gold);
  font-size:1.05rem;
}

.f-payments{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.f-payments li{ display:flex; gap:8px; align-items:center; padding:6px 10px; border:1px solid #1f2937; border-radius:999px; }
.f-payments i{ font-size:1rem }

.mt16{ margin-top:16px }

/* Desktop/tablet layout */
@media (min-width: 900px){
  .footer-grid{
    grid-template-columns: 1.2fr 1fr 1fr 1.3fr; /* brand, quick, rooms+exp, policies */
    gap:36px;
    padding:56px 0;
  }
}

/* Bottom legal line */
.footline{
  border-top:1px solid #1f2937;
  text-align:center;
  padding:16px 0;
  font-size:0.9rem;
  color:#9ca3af;
}

/* ===== Lightbox (vanilla) ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.75);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.lightbox.open { display: flex; }

.lightbox-inner {
  position: relative; max-width: 92vw; max-height: 86vh;
  display: grid; place-items: center;
}

.lightbox-img {
  max-width: 100%; max-height: 86vh; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}

.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(17,24,39,.75); color: #fff; border: 0;
  width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-size: 20px;
  transition: background .2s;
}
.lb-btn:hover { background: rgba(17,24,39,.95); }

.lb-prev { left: -56px; }
.lb-next { right: -56px; }

@media (max-width: 640px){
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

.lb-close {
  position: absolute; top: -56px; right: 0;
  background: rgba(17,24,39,.75); color: #fff; border: 0;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; font-size: 18px;
  transition: background .2s;
}
.lb-close:hover { background: rgba(17,24,39,.95); }

/* Use brand gold for focus/active rings */
.lb-btn:focus-visible, .lb-close:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* ===== Gallery Filters ===== */
.gallery-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; align-items:center;
  margin:18px 0 10px;
}
.gf-btn{
  padding:.5rem .9rem; border-radius:999px; border:1px solid var(--gold);
  background:#fff; color:var(--gold); font-weight:700; cursor:pointer;
  transition:background .2s, color .2s, box-shadow .2s;
}
.gf-btn:hover{ box-shadow:var(--shadow); }
.gf-btn.active{ background:var(--gold); color:#fff; }

#galleryGrid img{
  /* subtle reveal animation */
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}

/* ===== Lazy + Blur-up ===== */
.blur-up {
  filter: blur(12px);
  transform: scale(1.02);
  transition: filter .45s ease, transform .45s ease, opacity .25s ease;
  will-change: filter, transform, opacity;
  background: #f3f3f3; /* soft placeholder behind */
}
.blur-up.is-loaded {
  filter: blur(0);
  transform: scale(1);
}

/* Optional: subtle fade-in when images enter viewport */
.fade-in {
  opacity: 0;
  transition: opacity .35s ease;
}
.fade-in.is-visible { opacity: 1; }









/* Useful Information – visual cards */
.info-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:12px;
}
.info-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px 16px;
  box-shadow:0 8px 28px rgba(2,8,23,.04);
}
.info-card i{
  color:var(--gold);
  font-size:1.4rem;
  line-height:1;
  margin-top:.2rem;
}
.info-card h3{
  margin:.1rem 0 .25rem;
  font-size:1.05rem;
  line-height:1.25;
}
.info-card p{
  margin:0;
  color:var(--muted);
}
.info-cta{
  margin-top:16px;
  display:flex;
  justify-content:flex-start;
}
@media (max-width: 700px){
  .info-card{padding:12px}
  .info-card h3{font-size:1rem}
}

/* About Us preview */
.section-ivory img {
  max-height: 320px;
  object-fit: cover;
}



/* Bigger header logo (override) */
.brand img{
  height: 56px !important;   /* try 56–64px to taste */
  width: auto;
  max-height: 64px;
  display: block;
}
@media (max-width: 640px){
  .brand img{ height: 48px !important; }
}