/* ==========================================================================
   Royal Chalet Guest House — Main Stylesheet
   Design tokens sourced verbatim from the provided Stitch DESIGN.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root{
  /* Colors (from DESIGN.md) */
  --color-surface: #fff8f6;
  --color-surface-dim: #eed4d0;
  --color-surface-bright: #fff8f6;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fff0ee;
  --color-surface-container: #ffe9e6;
  --color-surface-container-high: #fde2de;
  --color-surface-container-highest: #f7ddd8;
  --color-on-surface: #261816;
  --color-on-surface-variant: #5a413d;
  --color-inverse-surface: #3d2d2a;
  --color-inverse-on-surface: #ffedea;
  --color-outline: #8e706c;
  --color-outline-variant: #e2bfb9;
  --color-surface-tint: #b22b1d;
  --color-primary: #570000;
  --color-on-primary: #ffffff;
  --color-primary-container: #800000;
  --color-on-primary-container: #ff8371;
  --color-inverse-primary: #ffb4a8;
  --color-secondary: #735c00;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fed65b;
  --color-on-secondary-container: #745c00;
  --color-tertiary: #262727;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #3c3c3c;
  --color-on-tertiary-container: #a8a6a6;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-primary-fixed: #ffdad4;
  --color-primary-fixed-dim: #ffb4a8;
  --color-on-primary-fixed: #410000;
  --color-on-primary-fixed-variant: #8f0f07;
  --color-secondary-fixed: #ffe088;
  --color-secondary-fixed-dim: #e9c349;
  --color-on-secondary-fixed: #241a00;
  --color-on-secondary-fixed-variant: #574500;
  --color-tertiary-fixed: #e4e2e1;
  --color-tertiary-fixed-dim: #c8c6c6;
  --color-on-tertiary-fixed: #1b1c1c;
  --color-on-tertiary-fixed-variant: #474747;
  --color-background: #fff8f6;
  --color-on-background: #261816;
  --color-surface-variant: #f7ddd8;

  /* Spacing */
  --container-max: 1280px;
  --gutter: 24px;
  --margin-desktop: 64px;
  --margin-mobile: 20px;
  --unit-xs: 4px;
  --unit-sm: 8px;
  --unit-md: 16px;
  --unit-lg: 24px;
  --unit-xl: 48px;
  --unit-2xl: 80px;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--color-background);
  color: var(--color-on-background);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }
ul{ list-style:none; margin:0; padding:0; }

.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
}

/* Typography ------------------------------------------------------------- */
.font-display{ font-family:'Libre Caslon Text', serif; }
h1,h2,h3,h4{ font-family:'Libre Caslon Text', serif; margin:0; }

.text-display-lg{ font-size:48px; line-height:56px; letter-spacing:-0.02em; font-weight:700; }
.text-headline-md{ font-size:32px; line-height:40px; font-weight:600; }
.text-headline-sm{ font-size:24px; line-height:32px; font-weight:600; }
.text-body-lg{ font-size:18px; line-height:28px; font-weight:400; }
.text-body-md{ font-size:16px; line-height:24px; font-weight:400; }
.text-label-md{ font-size:14px; line-height:20px; font-weight:600; letter-spacing:0.05em; }
.text-label-sm{ font-size:12px; line-height:16px; font-weight:500; }

@media (max-width: 767px){
  .text-display-lg{ font-size:36px; line-height:44px; letter-spacing:-0.01em; }
  .text-headline-md{ font-size:26px; line-height:34px; }
}

/* Layout helpers ----------------------------------------------------------*/
.container{
  width:100%;
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: var(--margin-mobile);
}
@media (min-width: 1024px){
  .container{ padding-inline: var(--margin-desktop); }
}
.section{ padding-block: var(--unit-2xl); }
@media (max-width: 767px){
  .section{ padding-block: var(--unit-xl); }
}

/* Buttons ------------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px; letter-spacing:0.05em;
  padding: 16px 32px;
  border-radius: var(--radius-lg);
  border: none;
  transition: all .25s ease;
  white-space:nowrap;
}
.btn:active{ transform: scale(.96); }
.btn-primary{ background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 8px 20px rgba(87,0,0,.18); }
.btn-primary:hover{ background: var(--color-primary-container); }
.btn-outline-light{ background: transparent; border:1px solid rgba(255,255,255,.5); color:#fff; backdrop-filter: blur(4px); }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); }
.btn-secondary-outline{ background:transparent; border:1px solid var(--color-secondary); color:var(--color-secondary); }
.btn-secondary-outline:hover{ background: rgba(115,92,0,.08); }
.btn-ghost{ background:transparent; border:1px solid var(--color-outline-variant); color: var(--color-on-surface); }
.btn-ghost:hover{ background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn-full{ width:100%; }
.btn-round{ border-radius: var(--radius-full); }
.btn-sm{ padding: 12px 24px; }

/* Navbar ---------------------------------------------------------------- */
.navbar{
  position: sticky; top:0; z-index:1000;
  background: rgba(255,248,246,.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(51,51,51,.06);
  transition: padding .2s ease;
}
.navbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width: var(--container-max); margin-inline:auto;
  padding: var(--unit-md) var(--margin-mobile);
}
@media (min-width:1024px){
  .navbar-inner{ padding: var(--unit-md) var(--margin-desktop); }
}
.navbar-logo{
  font-family:'Libre Caslon Text', serif;
  font-size: 28px;
  color: var(--color-primary);
  font-weight:700;
  line-height:1.1;
  max-width: 260px;
}
@media (min-width:1024px){ .navbar-logo{ font-size:32px; } }

.nav-links{ display:none; align-items:center; gap: var(--unit-lg); }
@media (min-width:1024px){ .nav-links{ display:flex; } }
.nav-links a{
  font-size:16px; color: var(--color-on-surface-variant);
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.nav-links a:hover{ color: var(--color-primary); }
.nav-links a.active{ color: var(--color-primary); border-color: var(--color-primary); font-weight:700; }

.navbar-right{ display:flex; align-items:center; gap: var(--unit-md); }
.navbar-phone{
  display:none; color: var(--color-primary); font-weight:600; font-size:14px; letter-spacing:.03em;
}
@media (min-width:1280px){ .navbar-phone{ display:inline; } }

.hamburger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; padding:0;
}
@media (min-width:1024px){ .hamburger{ display:none; } }
.hamburger span{
  display:block; width:100%; height:2px; background: var(--color-primary);
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none;
  flex-direction:column;
  background: var(--color-surface);
  border-top: 1px solid var(--color-outline-variant);
  box-shadow: 0 20px 40px rgba(51,51,51,.08);
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  padding: 16px var(--margin-mobile);
  border-bottom: 1px solid var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  font-size:16px;
}
.mobile-menu a.active{ color: var(--color-primary); font-weight:700; }
.mobile-menu .mobile-extra{
  padding: 16px var(--margin-mobile);
  display:flex; flex-direction:column; gap:12px;
}

/* Hero (home) ------------------------------------------------------------*/
.hero{
  position:relative; min-height:600px; height:90vh; max-height:921px;
  display:flex; align-items:center; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.05);
  animation: subtle-zoom 20s infinite alternate;
}
@keyframes subtle-zoom{ 0%{transform:scale(1);} 100%{transform:scale(1.1);} }
.hero-overlay{ position:absolute; inset:0; background: rgba(0,0,0,.42); }
.hero-content{ position:relative; z-index:2; width:100%; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.25);
  padding: 6px 16px; border-radius: var(--radius-full);
  color:#fff; font-size:14px; font-weight:600; letter-spacing:.04em;
  margin-bottom:16px;
}
.hero h1{ color:#fff; text-shadow: 0 4px 12px rgba(0,0,0,.35); margin-bottom:8px; max-width: 720px; }
.hero .tagline{ color:#fff; opacity:.92; font-family:'Libre Caslon Text',serif; font-style:italic; font-size:24px; margin-bottom:16px; }
.hero .addr{ display:flex; align-items:flex-start; gap:8px; color:#fff; opacity:.85; margin-bottom:28px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; }

/* Generic page header banner (interior pages) -----------------------------*/
.page-header{
  position:relative; min-height:340px; height:46vh; max-height:614px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  text-align:center;
}
.page-header-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.page-header-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(38,24,22,.45) 0%, rgba(38,24,22,.78) 100%); }
.page-header-content{ position:relative; z-index:2; padding-inline: var(--margin-mobile); max-width:760px; }
.page-header h1{ color:#fff; margin-bottom:12px; }
.page-header p{ color: var(--color-surface-container-low); opacity:.92; }

/* Cards --------------------------------------------------------------------*/
.card{
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(51,51,51,.04);
}

/* Room card */
.room-card{
  background: var(--color-surface-container-low);
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: 0 20px 40px rgba(51,51,51,.06);
  display:flex; flex-direction:column;
  transition: transform .3s ease;
}
.room-card .room-img-wrap{ position:relative; overflow:hidden; }
.room-card .room-img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.room-card:hover .room-img-wrap img{ transform: scale(1.06); }
.price-pill{
  position:absolute; top:16px; right:16px;
  background: var(--color-secondary-container); color: var(--color-on-secondary-container);
  padding:8px 16px; border-radius: var(--radius-full); font-size:14px; font-weight:600; letter-spacing:.04em;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.price-pill.popular{ background: var(--color-primary); color:#fff; }

/* Amenity icon circle */
.icon-circle{
  width:64px; height:64px; border-radius:50%;
  background: rgba(128,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  color: var(--color-primary);
  margin-bottom:16px;
  transition: transform .3s ease;
}
.amenity-card:hover .icon-circle{ transform: scale(1.08); }

/* Footer ------------------------------------------------------------------*/
.site-footer{ background: var(--color-tertiary); color: var(--color-surface); padding-top: var(--unit-2xl); padding-bottom: var(--unit-lg); }
.site-footer h4{ color: var(--color-secondary-fixed); font-family:'Inter',sans-serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.site-footer a{ color: var(--color-tertiary-fixed-dim); transition: color .2s ease; }
.site-footer a:hover{ color: var(--color-secondary-fixed); }
.site-footer .foot-grid{
  display:grid; grid-template-columns: 1fr; gap: var(--gutter);
  max-width: var(--container-max); margin-inline:auto;
  padding-inline: var(--margin-mobile);
  margin-bottom: var(--unit-xl);
}
@media (min-width:768px){ .site-footer .foot-grid{ grid-template-columns: repeat(4,1fr); padding-inline: var(--margin-desktop); } }
.site-footer .foot-brand{ font-family:'Libre Caslon Text',serif; font-size:28px; color: var(--color-surface-container-low); margin-bottom:16px; }
.foot-links{ display:flex; flex-direction:column; gap:10px; }
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top: var(--unit-lg);
  max-width: var(--container-max); margin-inline:auto;
  padding-inline: var(--margin-mobile);
  display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:space-between;
  font-size:12px; color: var(--color-tertiary-fixed-dim);
  text-align:center;
}
@media (min-width:768px){
  .foot-bottom{ flex-direction:row; padding-inline: var(--margin-desktop); text-align:left; }
}
.foot-bottom-links{ display:flex; gap: var(--unit-lg); flex-wrap:wrap; justify-content:center; }
.newsletter-row{ display:flex; gap:8px; }
.newsletter-row input{
  background: rgba(255,255,255,.06); border:1px solid var(--color-tertiary-fixed-dim);
  color:#fff; border-radius: var(--radius); padding:10px 14px; width:100%; outline:none;
}
.newsletter-row input::placeholder{ color: rgba(255,255,255,.5); }
.newsletter-row input:focus{ border-color: var(--color-secondary-fixed); }
.newsletter-row button{
  background: var(--color-secondary); color:#fff; border:none; border-radius: var(--radius);
  padding:10px 18px; font-weight:600; font-size:14px; white-space:nowrap;
}
.newsletter-row button:hover{ background: var(--color-on-secondary-container); }

/* Forms --------------------------------------------------------------------*/
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:14px; font-weight:600; letter-spacing:.03em; color: var(--color-on-surface-variant); margin-left:4px; }
.field input, .field textarea, .field select{
  background: var(--color-background);
  border:1px solid var(--color-outline-variant);
  border-radius: var(--radius);
  padding:14px 16px;
  font-size:16px;
  color: var(--color-on-surface);
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
  width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(87,0,0,.08);
}
.field input.error, .field textarea.error, .field select.error{
  border-color: var(--color-error);
}
.field-error-msg{ font-size:12px; color: var(--color-error); margin-left:4px; min-height:14px; }
.field-row{ display:grid; grid-template-columns:1fr; gap: var(--unit-md); }
@media (min-width:768px){ .field-row{ grid-template-columns:1fr 1fr; } }

.form-status{
  display:none;
  align-items:center; gap:10px;
  padding:14px 18px; border-radius: var(--radius);
  font-size:14px; font-weight:500;
  margin-top:12px;
}
.form-status.show{ display:flex; }
.form-status.success{ background:#eaf6ec; color:#1e5b2b; border:1px solid #b9e2bf; }
.form-status.error{ background: var(--color-error-container); color: var(--color-on-error-container); border:1px solid #f3b3ad; }

/* WhatsApp floating button --------------------------------------------------*/
.whatsapp-fab{
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
.whatsapp-fab:hover{ transform: scale(1.08); }
.whatsapp-fab svg{ width:32px; height:32px; }
.whatsapp-fab .ping{
  position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation: wa-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes wa-ping{ 0%{transform:scale(1); opacity:.6;} 100%{transform:scale(1.7); opacity:0;} }

@media (max-width:767px){
  .whatsapp-fab{ width:52px; height:52px; bottom:16px; right:16px; }
  .whatsapp-fab svg{ width:28px; height:28px; }
}

/* Modal (booking inquiry + lightbox base) ----------------------------------*/
.modal-overlay{
  position:fixed; inset:0; background: rgba(38,24,22,.6);
  backdrop-filter: blur(2px);
  display:none; align-items:center; justify-content:center;
  z-index:2000; padding: 20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background: var(--color-surface); border-radius: var(--radius-lg);
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  padding: var(--unit-xl);
  position:relative;
  box-shadow: 0 30px 60px rgba(0,0,0,.3);
  animation: modal-in .25s ease;
}
@keyframes modal-in{ from{ opacity:0; transform: translateY(16px) scale(.98);} to{opacity:1; transform:none;} }
.modal-close{
  position:absolute; top:18px; right:18px;
  background: var(--color-surface-container-high); border:none; border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  color: var(--color-on-surface); transition: background .2s ease;
}
.modal-close:hover{ background: var(--color-surface-dim); }
.modal-title{ color: var(--color-primary); margin-bottom:4px; }
.modal-sub{ color: var(--color-on-surface-variant); font-size:14px; margin-bottom:24px; }

@media (max-width:767px){
  .modal-box{ padding: var(--unit-lg); }
}

/* Lightbox ------------------------------------------------------------------*/
.lightbox-overlay{
  position:fixed; inset:0; background: rgba(15,8,7,.94);
  display:none; align-items:center; justify-content:center;
  z-index:2100; padding: 16px;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-img-wrap{ max-width: 1100px; width:100%; text-align:center; }
.lightbox-img-wrap img{
  max-width:100%; max-height:78vh; border-radius: var(--radius-md);
  margin-inline:auto; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox-caption{ color:#fff; margin-top:16px; font-family:'Libre Caslon Text',serif; font-size:20px; }
.lightbox-caption span{ display:block; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--color-secondary-fixed); margin-bottom:4px; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; transition: background .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,.22); }
.lightbox-close{ top:20px; right:20px; }
.lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
  .lightbox-prev{ left:8px; width:40px; height:40px; }
  .lightbox-next{ right:8px; width:40px; height:40px; }
  .lightbox-close{ top:10px; right:10px; width:40px; height:40px; }
}

/* Map embeds -----------------------------------------------------------------*/
.map-frame{ width:100%; height:100%; border:0; display:block; }

/* Utility ----------------------------------------------------------------- */
.text-primary{ color: var(--color-primary); }
.text-secondary{ color: var(--color-secondary); }
.text-muted{ color: var(--color-on-surface-variant); }
.bg-surface-container-low{ background: var(--color-surface-container-low); }
.bg-surface-container-high{ background: var(--color-surface-container-high); }
.divider-gold{ width:80px; height:4px; background: var(--color-secondary); border-radius:2px; }
.skip-link{
  position:absolute; left:-999px; top:0; background:#fff; color:#000; padding:10px 16px; z-index:5000;
}
.skip-link:focus{ left:10px; top:10px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* Star rating */
.stars{ display:flex; gap:2px; color: var(--color-secondary); }
.stars .material-symbols-outlined{ font-variation-settings:'FILL' 1; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}