/* ==========================================================================
   NANDAKAM REST HOUSE — Design System
   HTML5 / CSS3 / Vanilla JS static site
   ========================================================================== */

/* ---------- 1. Custom Properties ---------- */
:root{
  --color-primary:#5A3E2B;
  --color-secondary:#C97832;
  --color-accent:#B18A45;
  --color-bg:#FAF7F0;
  --color-surface:#FFFFFF;
  --color-text:#292724;
  --color-muted:#6F6A63;
  --color-border:#E7E0D3;
  --color-primary-dark:#432D1F;
  --color-focus:#1E63C9;

  --font-heading:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;

  --shadow-sm:0 1px 3px rgba(41,39,36,0.08);
  --shadow-md:0 8px 24px rgba(41,39,36,0.10);
  --shadow-lg:0 16px 40px rgba(41,39,36,0.14);

  --space-1:0.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:3rem;
  --space-6:4.5rem;
  --space-7:6rem;

  --container-max:1200px;
  --transition-fast:0.18s ease;
  --transition-med:0.32s ease;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}
body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
  font-size:1rem;
  overflow-x:hidden;
}
img,picture,svg{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
table{border-collapse:collapse;width:100%;}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:600;
  line-height:1.15;
  color:var(--color-primary);
  letter-spacing:0.01em;
}
h1{font-size:clamp(2.2rem,5vw,3.4rem);}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem);}
h4{font-size:1.15rem;}
p{color:var(--color-text);}
.text-muted{color:var(--color-muted);}
.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-secondary);
  margin-bottom:var(--space-1);
}
.section-heading{max-width:640px;margin-bottom:var(--space-4);}
.section-heading.center{margin-left:auto;margin-right:auto;text-align:center;}
.lead{font-size:1.1rem;color:var(--color-muted);}

/* ---------- 4. Layout helpers ---------- */
.container{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--space-3);
}
.section{padding-block:var(--space-6);}
.section-tight{padding-block:var(--space-4);}
.section-alt{background:var(--color-surface);}
.grid{display:grid;gap:var(--space-3);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
}
.flex{display:flex;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.gap-1{gap:var(--space-1);}
.gap-2{gap:var(--space-2);}
.gap-3{gap:var(--space-3);}

/* ---------- 5. Skip link ---------- */
.skip-link{
  position:absolute;
  left:var(--space-2);
  top:-100px;
  background:var(--color-primary);
  color:#fff;
  padding:0.75rem 1.25rem;
  border-radius:var(--radius-sm);
  z-index:1000;
  transition:top var(--transition-fast);
}
.skip-link:focus{top:var(--space-2);}

/* ---------- 6. Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- 7. Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.85rem 1.75rem;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  border:2px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--color-secondary);color:#fff;}
.btn-primary:hover{background:var(--color-primary);}
.btn-outline{background:transparent;border-color:var(--color-surface);color:var(--color-surface);}
.btn-outline:hover{background:rgba(255,255,255,0.14);}
.btn-secondary{background:var(--color-surface);border-color:var(--color-border);color:var(--color-primary);}
.btn-secondary:hover{border-color:var(--color-secondary);color:var(--color-secondary);}
.btn-block{width:100%;}

/* ---------- 8. Header / Navigation ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:rgba(250,247,240,0.94);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--color-border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:0.85rem;
}
.brand{display:flex;align-items:center;gap:0.6rem;}
.brand-mark{width:42px;height:42px;flex-shrink:0;}
.brand-text{font-family:var(--font-heading);line-height:1.05;}
.brand-text .brand-name{display:block;font-weight:700;font-size:1.15rem;color:var(--color-primary);letter-spacing:0.02em;}
.brand-text .brand-sub{display:block;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--color-secondary);font-family:var(--font-body);font-weight:600;}

.main-nav{display:flex;align-items:center;gap:var(--space-4);}
.nav-list{display:flex;align-items:center;gap:var(--space-3);}
.nav-list a{
  font-weight:500;
  font-size:0.95rem;
  color:var(--color-text);
  padding:0.4rem 0.1rem;
  border-bottom:2px solid transparent;
  transition:color var(--transition-fast), border-color var(--transition-fast);
}
.nav-list a:hover,
.nav-list a[aria-current="page"]{color:var(--color-secondary);border-color:var(--color-secondary);}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  border-radius:var(--radius-sm);
}
.nav-toggle span{width:22px;height:2px;background:var(--color-primary);transition:transform var(--transition-fast), opacity var(--transition-fast);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;}
  .main-nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(320px,86vw);
    height:100vh;
    background:var(--color-surface);
    flex-direction:column;
    align-items:stretch;
    padding:5.5rem var(--space-3) var(--space-3);
    transform:translateX(100%);
    transition:transform var(--transition-med);
    box-shadow:var(--shadow-lg);
    gap:var(--space-4);
  }
  .main-nav.is-open{transform:translateX(0);}
  .nav-list{flex-direction:column;align-items:flex-start;gap:var(--space-2);width:100%;}
  .nav-list a{display:block;width:100%;padding:0.6rem 0;font-size:1.05rem;}
  .main-nav .btn{width:100%;}
  .nav-backdrop{
    display:none;
    position:fixed;inset:0;
    background:rgba(41,39,36,0.45);
    z-index:490;
  }
  .nav-backdrop.is-open{display:block;}
}

/* ---------- 9. Hero ---------- */
.hero{
  position:relative;
  color:#fff;
  background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-primary-dark) 60%,#33221 100%);
  overflow:hidden;
}
.hero-motif{position:absolute;inset:0;opacity:0.16;pointer-events:none;}
.hero-inner{
  position:relative;
  z-index:2;
  padding-block:var(--space-7) var(--space-6);
  max-width:720px;
}
.hero .eyebrow{color:var(--color-accent);}
.hero h1{color:#fff;margin-bottom:var(--space-2);}
.hero p{color:rgba(255,255,255,0.88);font-size:1.15rem;margin-bottom:var(--space-4);max-width:60ch;}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);}

.page-hero{
  position:relative;
  color:#fff;
  background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);
  padding-block:var(--space-6) var(--space-5);
}
.page-hero h1{color:#fff;}
.page-hero p{color:rgba(255,255,255,0.85);max-width:60ch;margin-top:var(--space-1);}

/* ---------- 10. Breadcrumbs ---------- */
.breadcrumbs{font-size:0.85rem;color:rgba(255,255,255,0.75);margin-bottom:var(--space-2);}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:0.35rem;align-items:center;}
.breadcrumbs a{color:rgba(255,255,255,0.85);text-decoration:underline;text-underline-offset:2px;}
.breadcrumbs a:hover{color:#fff;}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:0.35rem;color:rgba(255,255,255,0.5);}
.breadcrumbs-light{color:var(--color-muted);}
.breadcrumbs-light a{color:var(--color-primary);}

/* ---------- 11. Quick info strip ---------- */
.quick-info{
  background:var(--color-surface);
  border-block:1px solid var(--color-border);
}
.quick-info-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-3);
  padding-block:var(--space-4);
}
.quick-info-item{display:flex;align-items:center;gap:0.85rem;}
.quick-info-item .icon{width:40px;height:40px;flex-shrink:0;color:var(--color-secondary);}
.quick-info-item strong{display:block;font-family:var(--font-heading);font-size:1.15rem;color:var(--color-primary);}
.quick-info-item span{font-size:0.85rem;color:var(--color-muted);}
@media (max-width:900px){.quick-info-list{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.quick-info-list{grid-template-columns:1fr;}}

/* ---------- 12. Cards ---------- */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow var(--transition-fast), transform var(--transition-fast);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.card-body{padding:var(--space-3);}
.card-media{aspect-ratio:4/3;background:var(--color-bg);overflow:hidden;position:relative;}
.card-media img{width:100%;height:100%;object-fit:cover;}
.card h3{margin-bottom:0.4rem;}
.card p{color:var(--color-muted);font-size:0.96rem;}
.img-label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(0deg,rgba(41,39,36,0.72),transparent);
  color:#fff;font-size:0.72rem;padding:0.5rem 0.75rem;letter-spacing:0.02em;
}

.facility-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  text-align:left;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-fast), transform var(--transition-fast);
}
.facility-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.facility-card .icon{width:38px;height:38px;color:var(--color-secondary);margin-bottom:var(--space-2);}
.facility-card h3{font-size:1.05rem;margin-bottom:0.25rem;}
.facility-card p{font-size:0.9rem;color:var(--color-muted);}

/* ---------- 13. Sections with motif divider ---------- */
.divider{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--color-border) 20%,var(--color-border) 80%,transparent);
  margin-block:var(--space-5);
  border:none;
}
.section-motif{width:64px;height:20px;margin-bottom:var(--space-2);color:var(--color-accent);}

/* ---------- 14. Why choose / feature list ---------- */
.feature-list{display:grid;gap:var(--space-3);}
.feature-item{display:flex;gap:var(--space-2);align-items:flex-start;}
.feature-item .icon{width:28px;height:28px;flex-shrink:0;color:var(--color-secondary);margin-top:2px;}
.feature-item h3{font-size:1.05rem;margin-bottom:0.2rem;}
.feature-item p{font-size:0.92rem;color:var(--color-muted);}

/* ---------- 15. Location / map ---------- */
.map-frame{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);
}
.map-frame iframe{width:100%;height:420px;border:0;display:block;}
.address-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
}
.address-card address{font-style:normal;color:var(--color-muted);margin-block:var(--space-1) var(--space-2);}

/* ---------- 16. FAQ accordion ---------- */
.faq-item{
  border-bottom:1px solid var(--color-border);
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-2) 0.25rem;
  text-align:left;
  font-family:var(--font-heading);
  font-weight:600;
  font-size:1.1rem;
  color:var(--color-primary);
}
.faq-question .plus{
  flex-shrink:0;
  width:24px;height:24px;
  position:relative;
}
.faq-question .plus::before,
.faq-question .plus::after{
  content:"";
  position:absolute;
  background:var(--color-secondary);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.faq-question .plus::before{width:16px;height:2px;}
.faq-question .plus::after{width:2px;height:16px;transition:transform var(--transition-fast);}
.faq-question[aria-expanded="true"] .plus::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
.faq-answer{
  overflow:hidden;
  max-height:0;
  transition:max-height var(--transition-med);
}
.faq-answer[data-open="true"]{max-height:600px;}
.faq-answer-inner{padding:0 0.25rem var(--space-3);color:var(--color-muted);}

/* ---------- 17. Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-3);}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.form-field{display:flex;flex-direction:column;gap:0.4rem;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-weight:600;font-size:0.9rem;color:var(--color-primary);}
.form-field .req{color:var(--color-secondary);}
.form-field input,
.form-field textarea,
.form-field select{
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:0.75rem 0.9rem;
  background:var(--color-surface);
  color:var(--color-text);
}
.form-field textarea{min-height:120px;resize:vertical;}
.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown){border-color:#B3261E;}
.form-error{font-size:0.82rem;color:#B3261E;min-height:1.1em;}
.form-note{
  background:var(--color-bg);
  border:1px dashed var(--color-border);
  border-radius:var(--radius-sm);
  padding:var(--space-2);
  font-size:0.9rem;
  color:var(--color-muted);
  margin-top:var(--space-2);
}
.form-status{margin-top:var(--space-2);font-weight:600;}
.form-status[data-state="success"]{color:#2E7D32;}

/* ---------- 18. Footer ---------- */
.site-footer{
  background:var(--color-primary-dark);
  color:rgba(255,255,255,0.82);
  padding-block:var(--space-6) var(--space-3);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--space-4);
  margin-bottom:var(--space-5);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand .brand-text .brand-name{color:#fff;}
.footer-brand p{color:rgba(255,255,255,0.7);margin-top:var(--space-2);font-size:0.92rem;max-width:32ch;}
.footer-heading{color:#fff;font-family:var(--font-body);font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--space-2);font-weight:700;}
.footer-links li{margin-bottom:0.55rem;}
.footer-links a{color:rgba(255,255,255,0.75);font-size:0.92rem;transition:color var(--transition-fast);}
.footer-links a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:var(--space-3);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  justify-content:space-between;
  align-items:center;
  font-size:0.82rem;
  color:rgba(255,255,255,0.6);
}
.footer-disclaimer{
  font-size:0.78rem;
  color:rgba(255,255,255,0.55);
  max-width:80ch;
  margin-bottom:var(--space-3);
  line-height:1.6;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:0.75rem 1.25rem;}

/* ---------- 19. Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-2);
}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.gallery-grid{grid-template-columns:1fr;}}
.gallery-item{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:4/3;
  border:1px solid var(--color-border);
}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-med);}
.gallery-item:hover img{transform:scale(1.04);}

/* ---------- 20. Alert / notice boxes ---------- */
.notice{
  background:#FFF6EA;
  border:1px solid var(--color-accent);
  border-radius:var(--radius-md);
  padding:var(--space-3);
  color:var(--color-text);
}
.notice h3{margin-bottom:0.4rem;}
.notice a{color:var(--color-primary);text-decoration:underline;}

/* ---------- 21. Legal page content ---------- */
.legal-content{max-width:76ch;}
.legal-content h2{margin-top:var(--space-4);margin-bottom:var(--space-1);}
.legal-content h2:first-child{margin-top:0;}
.legal-content p,.legal-content li{color:var(--color-muted);margin-bottom:var(--space-2);}
.legal-content ul{list-style:disc;padding-left:1.4rem;}
.legal-content ul li{margin-bottom:0.5rem;}
.legal-updated{color:var(--color-muted);font-size:0.9rem;margin-bottom:var(--space-4);}

/* ---------- 22. 404 ---------- */
.error-page{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-block:var(--space-7);
}
.error-page .code{font-family:var(--font-heading);font-size:5rem;color:var(--color-secondary);line-height:1;}

/* ---------- 23. Utilities ---------- */
.mt-1{margin-top:var(--space-1);} .mt-2{margin-top:var(--space-2);} .mt-3{margin-top:var(--space-3);} .mt-4{margin-top:var(--space-4);}
.mb-1{margin-bottom:var(--space-1);} .mb-2{margin-bottom:var(--space-2);} .mb-3{margin-bottom:var(--space-3);} .mb-4{margin-bottom:var(--space-4);}
.text-center{text-align:center;}
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.badge{
  display:inline-block;
  background:var(--color-bg);
  border:1px solid var(--color-border);
  color:var(--color-muted);
  font-size:0.75rem;
  padding:0.25rem 0.65rem;
  border-radius:999px;
}

/* ---------- 24. Blog ---------- */
.blog-card p{color:var(--color-muted);}
.blog-meta{font-size:0.8rem;color:var(--color-muted);margin-bottom:0.4rem;}

/* ---------- 25. Photographic imagery ---------- */
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(67,45,31,0.92) 0%,rgba(67,45,31,0.72) 55%,rgba(67,45,31,0.55) 100%);}
.media-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);box-shadow:var(--shadow-md);position:relative;}
.media-frame img{width:100%;height:100%;object-fit:cover;}
.media-frame.banner img{max-height:420px;object-position:center 35%;}
.img-credit{display:block;font-size:0.7rem;color:var(--color-muted);margin-top:0.4rem;text-align:right;}
.photo-card{position:relative;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);aspect-ratio:4/3;}
.photo-card img{width:100%;height:100%;object-fit:cover;}
.photo-card figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(41,39,36,0.78),transparent);color:#fff;font-size:0.8rem;padding:0.65rem 0.85rem;}