/* ============================================================
   VILLA ZAHAR — Global Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --terracotta:      #C4572E;
  --terracotta-dark: #A3431E;
  --terracotta-light:#E8937A;
  --cream:           #F7F0E3;
  --cream-dark:      #EDE2CC;
  --olive:           #6B7A42;
  --olive-dark:      #4A5628;
  --charcoal:        #1E1C18;
  --stone:           #8C7B6B;
  --sand:            #D4B896;
  --white:           #FDFAF5;
  --gold:            #C9A84C;
  --nav-h:           80px;
}

/* ---- Reset ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Jost',sans-serif; background:var(--white); color:var(--charcoal); overflow-x:hidden; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }

/* ---- Typography helpers ---- */
.eyebrow {
  font-size:10px; font-weight:500; letter-spacing:.35em; text-transform:uppercase;
  color:var(--terracotta); display:block; margin-bottom:14px;
}
.eyebrow--gold { color:var(--gold); }
.eyebrow--light { color:rgba(253,250,245,.55); }

.section-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(36px,5vw,62px); font-weight:400; line-height:1.1;
  color:var(--charcoal); margin-bottom:20px;
}
.section-title em { font-style:italic; color:var(--terracotta); }
.section-title--white { color:var(--white); }
.section-title em.light { color:var(--terracotta-light); }

.lead {
  font-size:16px; font-weight:300; line-height:1.85; color:var(--stone);
}
.lead--white { color:rgba(253,250,245,.65); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Jost',sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:15px 36px; cursor:pointer; border:none; transition:all .3s;
}
.btn--primary { background:var(--terracotta); color:var(--white); }
.btn--primary:hover { background:var(--terracotta-dark); transform:translateY(-2px); box-shadow:0 12px 40px rgba(196,87,46,.35); }
.btn--outline { background:transparent; color:var(--white); border:1.5px solid rgba(253,250,245,.6); }
.btn--outline:hover { border-color:var(--white); background:rgba(253,250,245,.1); }
.btn--outline-dark { background:transparent; color:var(--charcoal); border:1.5px solid var(--charcoal); }
.btn--outline-dark:hover { background:var(--charcoal); color:var(--white); }

/* ---- Navigation ---- */
#mainNav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h); display:flex; align-items:center;
  justify-content:space-between; padding:0 50px;
  background:rgba(30,28,24,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,168,76,.15);
  transition:all .4s;
}
#mainNav.scrolled { background:rgba(30,28,24,.98); border-bottom-color:rgba(201,168,76,.35); }

.nav-logo { line-height:1; text-decoration:none; }
.nav-logo .n-main { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:600; color:var(--white); display:block; }
.nav-logo .n-sub  { font-size:9px; font-weight:400; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); display:block; margin-top:2px; }

.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { font-size:11px; font-weight:500; color:rgba(253,250,245,.7); letter-spacing:.14em; text-transform:uppercase; transition:color .3s; }
.nav-links a:hover, .nav-links a.active { color:var(--gold); }
.nav-links .nav-book { background:var(--terracotta); color:var(--white)!important; padding:9px 22px; }
.nav-links .nav-book:hover { background:var(--terracotta-dark)!important; }

.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; }
.nav-hamburger span { width:25px; height:2px; background:var(--white); transition:all .3s; }

/* Mobile menu */
.mobile-menu {
  position:fixed; inset:0; z-index:999; background:var(--charcoal);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transform:translateX(100%); transition:transform .5s cubic-bezier(.77,0,.175,1);
}
.mobile-menu.open { transform:translateX(0); }
.mobile-menu a { font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:400; color:rgba(253,250,245,.8); transition:color .3s; }
.mobile-menu a:hover { color:var(--gold); }
.mobile-close { position:absolute; top:24px; right:24px; background:none; border:none; color:var(--white); cursor:pointer; padding:8px; }
.mobile-close svg { width:28px; height:28px; }

/* ---- Page Hero (inner pages) ---- */
.page-hero {
  height:52vh; min-height:420px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
}
.page-hero::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(30,28,24,.35) 0%, rgba(30,28,24,.65) 100%);
}
.page-hero-content { position:relative; z-index:2; text-align:center; padding:0 20px; }
.page-hero-content .eyebrow { color:var(--charcoal); justify-content:center; display:inline-block; background:rgba(255,255,255,.55); backdrop-filter:blur(6px); padding:6px 16px; border-radius:20px; margin-bottom:16px; }
.page-hero-content h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(52px,8vw,100px); font-weight:300; color:var(--white); line-height:.95; }
.page-hero-content h1 em { font-style:italic; font-weight:600; }

/* ---- Breadcrumb ---- */
.breadcrumb {
  background:var(--cream); padding:16px 50px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; color:var(--stone);
  border-bottom:1px solid var(--cream-dark);
}
.breadcrumb a { color:var(--terracotta); }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb svg { width:14px; height:14px; }

/* ---- Footer ---- */
footer {
  background:#131210;
  border-top:1px solid rgba(201,168,76,.15);
  padding:60px 50px 28px;
}
.footer-inner { max-width:1300px; margin:0 auto; }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px;
  padding-bottom:50px; margin-bottom:30px;
  border-bottom:1px solid rgba(253,250,245,.07);
}
.footer-brand .f-logo-main { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:600; color:var(--white); display:block; margin-bottom:4px; }
.footer-brand .f-logo-sub  { font-size:10px; font-weight:400; letter-spacing:.25em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:18px; }
.footer-brand p { font-size:14px; font-weight:300; line-height:1.8; color:rgba(253,250,245,.4); max-width:260px; }
.footer-social { display:flex; gap:10px; margin-top:22px; }
.social-link { width:36px; height:36px; border:1px solid rgba(253,250,245,.15); display:flex; align-items:center; justify-content:center; color:rgba(253,250,245,.45); transition:all .3s; }
.social-link:hover { border-color:var(--terracotta); color:var(--terracotta); }
.social-link svg { width:15px; height:15px; }
.footer-col h4 { font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col ul a { font-size:13px; font-weight:300; color:rgba(253,250,245,.4); letter-spacing:.03em; transition:color .3s; }
.footer-col ul a:hover { color:var(--white); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:12px; color:rgba(253,250,245,.28); letter-spacing:.04em; }
.footer-bottom a { color:rgba(253,250,245,.38); }
.footer-bottom a:hover { color:var(--gold); }

/* ---- Sticky CTA ---- */
.sticky-cta {
  position:fixed; bottom:28px; right:28px; z-index:900;
  background:var(--terracotta); color:var(--white);
  padding:14px 26px; display:flex; align-items:center; gap:10px;
  font-family:'Jost',sans-serif; font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  box-shadow:0 12px 40px rgba(196,87,46,.45);
  transform:translateY(120px); opacity:0; transition:all .4s;
}
.sticky-cta.visible { transform:translateY(0); opacity:1; }
.sticky-cta:hover { background:var(--terracotta-dark); transform:translateY(-3px); box-shadow:0 18px 50px rgba(196,87,46,.5); }
.sticky-cta svg { width:17px; height:17px; }

/* ---- Scroll reveal ---- */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .8s ease, transform .8s ease; }
.reveal.revealed { opacity:1; transform:translateY(0); }
.delay-1 { transition-delay:.12s; }
.delay-2 { transition-delay:.24s; }
.delay-3 { transition-delay:.36s; }
.delay-4 { transition-delay:.48s; }

/* ---- Utility ---- */
.max-w { max-width:1300px; margin:0 auto; }
.section-pad { padding:100px 50px; }
.text-center { text-align:center; }

/* ---- Responsive ---- */
@media(max-width:1024px) {
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .breadcrumb { padding:14px 20px; }
  .section-pad { padding:70px 20px; }
  footer { padding:50px 20px 24px; }
  .footer-top { grid-template-columns:1fr; gap:36px; }
}