/* ===========================================================================
   Janessa Hotel – main.css
   Fully responsive + vibrant theme (Aug 15, 2025)
   ========================================================================== */

/* --- Design tokens -------------------------------------------------------- */
:root{
  /* Brand */
  --brand:#06b6d4;         /* teal */
  --brand-2:#8b5cf6;       /* violet */
  --brand-rgb:6,182,212;
  --brand-2-rgb:139,92,246;
  --accent:#FBBF24;        /* golden accent */

  /* Typography & surfaces */
  --ink:#0f172a;           /* headings / strong */
  --muted:#475569;         /* body text */
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --background:#f7fafc;    /* page bg */
  --paper:#ffffff;         /* cards/surfaces */

  /* UI */
  --ring:rgba(6,182,212,.35);
  --radius:16px;
  --shadow:0 10px 30px rgba(2,6,23,.12), 0 2px 8px rgba(2,6,23,.08);
  --maxw:1200px;
}

/* --- Reset / base --------------------------------------------------------- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; width:100% }
body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  color:var(--muted);
  background:var(--background);
  line-height:1.5;
  width:100%;
  overflow-x:hidden; /* prevent horizontal drift */
}
img,video{ max-width:100%; height:auto; display:block }

h1,h2,h3,h4{ color:var(--ink); margin:0 0 .5rem }
h1{ font-size:clamp(2rem,4vw,4rem); font-family:'Playfair Display',serif; font-weight:700 }
h2{ font-size:clamp(1.5rem,2.5vw,2.2rem) }
h3{ font-size:clamp(1.25rem,2vw,1.5rem) }
p{ margin:0 0 1rem }

a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

/* Accessible focus */
a:focus-visible,button:focus-visible,input:focus,select:focus,textarea:focus{
  outline:3px solid rgba(var(--brand-rgb),.45);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18);
}

/* --- Layout helpers ------------------------------------------------------- */
.container{
  max-width:var(--maxw);
  width:100%;
  margin-inline:auto;
  padding-inline:1rem;              /* consistent gutters */
}
section{ padding:clamp(3rem,5vw,5rem) 0 }
.grid{ display:grid; gap:1.2rem }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-4{ grid-template-columns:repeat(4,1fr) }

/* --- Buttons & badges ----------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.1rem; border-radius:999px; border:none; cursor:pointer;
  background-image:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; font-weight:600; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(99,102,241,.3), 0 4px 14px rgba(6,182,212,.25); text-decoration:none }
.btn:active{ transform:translateY(0); filter:brightness(.95) }

.btn-outline{ background:transparent; color:var(--ink); border:2px solid #e2e8f0 }
.btn-outline:hover{ background-image:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent }

.badge{
  display:inline-block; padding:.35rem .7rem; border-radius:999px;
  background:linear-gradient(135deg,var(--accent),#fde68a); color:#111827;
  font-weight:600; font-size:.8rem; border:0;
}
.badge.kicker{ background:rgba(255,255,255,.9); border:1px solid rgba(15,23,42,.08); color:var(--ink) }

/* --- Header / Navigation -------------------------------------------------- */
header,#siteHeader{
  position:fixed; inset:0 0 auto 0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  transition:background .3s ease, box-shadow .3s ease;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(15,23,42,.06);
}
#siteHeader .inner, header .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; max-width:var(--maxw); width:100%; margin-inline:auto;
}
#siteHeader.scrolled, header.scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(2,6,23,.08);
}

.brand{ display:flex; align-items:center; gap:.7rem; font-weight:700; color:#0f172a; letter-spacing:.3px }
.brand .logo{
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:grid; place-items:center; color:#fff; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}

nav ul{ display:flex; gap:1rem; list-style:none; padding:0; margin:0; align-items:center }
nav a{ color:#0f172a; font-weight:600; padding:.5rem .8rem; border-radius:10px }
nav a:hover{ background:#eef2ff; text-decoration:none }
nav a.active{ background:#e0e7ff }
.mobile-toggle{ display:none }

/* mobile dropdown panel stays within viewport */
@media (max-width:900px){
  nav ul{
    display:none; position:absolute; top:100%; right:1rem; left:1rem;
    background:#ffffffee; backdrop-filter:blur(8px);
    border:1px solid #e2e8f0; border-radius:14px; padding:.5rem; box-shadow:var(--shadow);
    width:auto;
  }
  nav ul.open{ display:flex; flex-direction:column; gap:.2rem }
  .mobile-toggle{
    display:inline-flex; align-items:center; gap:.5rem;
    background:transparent; border:1.5px solid #e2e8f0; color:#0f172a;
    padding:.55rem .8rem; border-radius:10px;
  }
  .mobile-toggle:hover{ border-color:var(--brand); color:var(--brand) }
}

/* --- Hero (index) --------------------------------------------------------- */
.hero{
  position:relative; min-height:90vh; display:grid; place-items:center;
  color:#fff; text-align:center; overflow:hidden;
}
.hero video,.hero .poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:saturate(1.05) contrast(1.02); min-width:100%;
}

.hero .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%)), linear-gradient(135deg, rgba(var(--brand-rgb), .25), rgba(var(--brand-2-rgb), .25));
}

.hero .content{ position:relative; z-index:2; padding:7rem 1rem 4rem }
.hero .kicker{ margin-bottom:.8rem }
.hero .actions{ display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem }

/* --- Subhero (inner pages) ------------------------------------------------ */
.subhero{ position:relative; min-height:48vh; background-size:cover; background-position:center; display:grid; align-items:end }
.subhero .overlay{ position:absolute; inset:0; background:linear-gradient(to top,rgba(2,6,23,.65),rgba(2,6,23,.15)) }
.subhero .container{ position:relative; color:#fff; padding:6rem 1rem 2rem }
.subhero h1{ color:#fff }

/* --- Booking bar ---------------------------------------------------------- */
.booking-bar{ position:relative; margin-top:-3rem; z-index:3 }
.booking-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:.8rem;
  display:grid; grid-template-columns:1.2fr 1.2fr 1fr .9fr .9fr auto; gap:.6rem; align-items:end;
  grid-auto-rows:minmax(0,auto); overflow:hidden;
}
.booking-card > *{ min-width:0 }
.booking-card label{ font-size:.8rem; font-weight:600; color:#0f172a; display:block; margin:.2rem 0 }
.field{ position:relative }
.field input,.field select{
  width:100%; border:1.5px solid #e5e7eb; border-radius:12px; padding:.9rem .95rem; font:inherit; outline:none;
  transition:border .2s ease, box-shadow .2s ease; min-width:0; max-width:100%;
}
.field input:focus,.field select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--ring) }
.field input[type="date"]{ font-size:16px } /* avoid iOS zoom */
.booking-note{ font-size:.8rem; color:#64748b; margin-top:.25rem }

/* --- Cards / content surfaces -------------------------------------------- */
.card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden }
.card img{ width:100%; height:220px; object-fit:cover; display:block }
.card .pad{ padding:1rem }

.pad{
    padding:1rem;
}

.amen{
  display:flex; align-items:center; gap:.6rem; padding:.9rem 1rem;
  background:#fff; border-radius:14px; box-shadow:var(--shadow);
  border:1px solid rgba(2,6,23,.06);
}

/* --- Carousel / gallery --------------------------------------------------- */
.carousel{ position:relative; overflow:hidden }
.carousel-track{
  display:flex; gap:1rem; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem;
}
.carousel-track::-webkit-scrollbar{ height:10px }
.carousel-track::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px }
.snap{ scroll-snap-align:start; min-width:280px; height:200px; border-radius:14px; overflow:hidden }
.snap img{ width:100%; height:100%; object-fit:cover; display:block }

/* --- Quotes / testimonials ------------------------------------------------ */
.quote{
  background:linear-gradient(180deg,#ffffff,#f9fafb);
  border:1px solid rgba(2,8,23,.06);
  border-radius:16px; box-shadow:0 8px 20px rgba(2,8,23,.06);
  padding:1rem 1.1rem;
}
.quote p:first-child{ color:var(--text-primary) }

/* --- Map card ------------------------------------------------------------- */
.map{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  background:#cbd5e1; min-height:320px; display:grid; place-items:center;
  color:#0f172a; font-weight:700; border:1px solid rgba(2,8,23,.06);
}

/* --- Footer --------------------------------------------------------------- */
footer{ background:#0f172a; color:#cbd5e1 }
footer a{ color:#e2e8f0 }
footer a:hover{ color:var(--accent) }

/* --- Rooms UI ------------------------------------------------------------- */
.filters{ display:flex; gap:.5rem; flex-wrap:wrap }
.chip{ border:1.5px solid #e5e7eb; background:#fff; color:#0f172a; border-radius:999px; padding:.55rem .9rem; font-weight:600; cursor:pointer }
.chip.active,.chip:hover{ border-color:#c7d2fe; background:#eef2ff }
.room-card .price-badge{ display:inline-block; background:rgba(6,182,212,.12); color:#0e7490; border-radius:8px; padding:.35rem .6rem; font-weight:700; margin:.35rem 0 }
.room-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.5rem }

/* --- Dialog --------------------------------------------------------------- */
.room-dialog{ border:none; border-radius:18px; width:min(100% - 2rem,1000px); padding:0; box-shadow:0 20px 60px rgba(2,6,23,.25) }
.room-dialog::backdrop{ background:rgba(2,6,23,.55) }
.dialog-body{ display:grid; grid-template-columns:1.1fr .9fr }
.dialog-close{ position:absolute; right:.7rem; top:.7rem; background:#fff; border:1px solid #e5e7eb; border-radius:999px; padding:.4rem; cursor:pointer }
.dialog-close:hover{ border-color:var(--brand) }
.dialog-body .gallery{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding:1rem }
.dialog-body .gallery img{ width:100%; height:180px; object-fit:cover; border-radius:12px }
.dialog-text{ padding:1rem 1rem 1.2rem }
.amen-list{ list-style:none; padding:0; margin:.5rem 0; display:grid; grid-template-columns:1fr 1fr; gap:.3rem }
.amen-list li{ display:flex; align-items:center; gap:.5rem }

/* --- Reveal on scroll ----------------------------------------------------- */
[data-animate]{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.reveal{ opacity:1!important; transform:none!important }

/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */

/* Step down booking grid */
@media (max-width:1024px){
  .booking-card{ grid-template-columns:1fr 1fr 1fr }
}

/* Collapse two-column sections that were set inline in HTML */
@media (max-width:900px){
  #about .grid, #dining .grid, #mapsec .grid{ grid-template-columns:1fr !important }
  .grid-3{ grid-template-columns:1fr 1fr }
  .grid-4{ grid-template-columns:1fr 1fr }
  .dialog-body{ grid-template-columns:1fr }
}

/* Footer columns */
@media (max-width:1100px){
  footer .container{ display:grid; gap:1rem; grid-template-columns:1fr 1fr !important }
}
@media (max-width:700px){
  footer .container{ grid-template-columns:1fr !important; text-align:center }
  footer .brand{ justify-content:center }
  footer .container > div{ margin-bottom:.5rem }
  .map{ min-height:260px }
}

/* Phone-first stacks */
@media (max-width:740px){
  .booking-card{ grid-template-columns:1fr !important }
  .booking-card .btn{ width:100% }
}

/* Tiny phones */
@media (max-width:560px){
  .grid-3,.grid-4{ grid-template-columns:1fr }
}
@media (max-width:640px){
  .hero{ min-height:86vh }
  .hero .content{ padding:6rem 1rem 3rem }
}
@media (max-width:480px){
  .container{ padding-inline:1.25rem }
}

/* ================================
   Mobile fixes – promos + footer
   ================================ */

/* 1) Promos: force 1-column on mobile (HTML sets 1fr 1fr inline) */
@media (max-width: 900px) {
  #promos .grid { grid-template-columns: 1fr !important; }
}

/* 2) Footer: center social row on mobile and make brand text vibrant */
footer .brand span:last-child{
  background: linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                 /* vibrant, readable on dark bg */
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.25));
}

/* Keep logo chip looking crisp on dark footer */
footer .brand .logo{
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

/* Center the social icons row on small screens.
   This targets the inline-styled flex div inside your first footer column. */
@media (max-width: 700px){
  footer .container { text-align: center; }
  footer .brand { justify-content: center; }
  footer .container > div > div[style*="display:flex"] {
    justify-content: center !important;
  }
}

/* WhatsApp Floating Action Button */
.wa-fab{
  position:fixed; right:1rem; bottom:1rem;
  width:56px; height:56px; border-radius:9999px;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(2,6,23,.20), 0 4px 10px rgba(2,6,23,.12);
  z-index:70; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wa-fab:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(2,6,23,.25), 0 6px 14px rgba(2,6,23,.16); filter:brightness(1.05) }
.wa-fab svg{ width:28px; height:28px; display:block; }

/* On very small devices, keep tappable without overlap */
@media (max-width: 380px){
  #toTop{ bottom:4.5rem !important; }
}