/* ══════════════════════════════════════════════════
   Khamthana Hotel — site stylesheet
   Extracted from the Claude Design artboard.
   ══════════════════════════════════════════════════ */

:root{
  /* neutrals — warm, colonial */
  --color-neutral-100:#f5f1ea; --color-neutral-200:#e8e1d5; --color-neutral-300:#d5cabb;
  --color-neutral-400:#b0a595; --color-neutral-500:#8a8177; --color-neutral-600:#6f665c;
  --color-neutral-700:#554d44; --color-neutral-800:#332e28; --color-neutral-900:#211e1a;
  /* antique gold accent */
  --color-accent-100:#f4ecdc; --color-accent-200:#e8d9b9; --color-accent-300:#d9c191;
  --color-accent-400:#c8a869; --color-accent-500:#b08d4f; --color-accent-600:#987738;
  --color-accent-700:#84632f; --color-accent-800:#5f4720;
  --color-accent:var(--color-accent-500);
  /* surfaces */
  --color-bg:#faf7f1; --color-surface:#f1ebe0; --color-text:#2b2723;
  --color-divider:#e4ddce;
  --font-heading:"Cormorant Garamond","Noto Serif Thai",system-ui,serif;
  --font-body:"Lora","Noto Serif Thai",system-ui,sans-serif;
  --shadow-md:0 18px 44px -22px rgba(51,46,40,.4);
}

/* Thai reads better with the Thai serif leading the stack */
html[lang="th"]{
  --font-heading:"Noto Serif Thai","Cormorant Garamond",system-ui,serif;
  --font-body:"Noto Serif Thai","Lora",system-ui,sans-serif;
}
html[lang="th"] body{line-height:1.9;}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{line-height:1.4!important;}
/* Thai has no hyphenation and justifying it opens ugly rivers */
html[lang="th"] p{text-align:left!important;hyphens:none!important;}
/* uppercase + wide tracking mangles Thai glyphs */
html[lang="th"] .u-caps{text-transform:none;letter-spacing:.02em;}

/* ══ scale ════════════════════════════════════════════════
   Everything on the site is sized in rem, so these few rules are the
   only knob for how large the whole page reads. Below 1440px nothing
   changes from the design's own figures; above it the page grows with
   the screen instead of stranding a third of a wide monitor in margin.

   --wrap  is the content column; --gutter its side padding.
   Prose still caps itself in ch, so lines never grow past a readable
   measure — the extra width goes to more columns and larger pictures. */
html{
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
:root{
  --wrap:1240px;
  --gutter:40px;
}
@media(min-width:1440px){ :root{ --wrap:1360px; --gutter:48px } html{font-size:16.5px} }
@media(min-width:1680px){ :root{ --wrap:1500px; --gutter:56px } html{font-size:17px} }
@media(min-width:1920px){ :root{ --wrap:1640px; --gutter:64px } html{font-size:17.5px} }
@media(min-width:2400px){ :root{ --wrap:1820px; --gutter:72px } html{font-size:18.5px} }

@media(max-width:900px){ :root{ --gutter:28px } }
@media(max-width:640px){ :root{ --gutter:20px } html{font-size:15.5px} }
@media(max-width:380px){ :root{ --gutter:16px } html{font-size:15px} }

*{box-sizing:border-box;}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:1.0625rem;line-height:1.78;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,.card-title,.nav-brand{font-family:var(--font-heading);}
input,select,textarea,button{font-family:inherit;}
a{color:var(--color-accent-700);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--color-accent-600);}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
::selection{background:var(--color-accent-200);}
.th{font-family:"Noto Serif Thai",var(--font-body);}
@keyframes kt-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* small-caps label used all over the design */
.u-caps{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--color-bg);padding:12px 18px;border:1px solid var(--color-accent);}
.skip:focus{left:8px;top:8px;}

/* ── buttons ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--color-neutral-400);background:transparent;color:inherit;padding:12px 22px;cursor:pointer;text-decoration:none;font-size:0.8125rem;line-height:1.25;transition:background .18s,color .18s,border-color .18s;}
.btn:hover{border-color:var(--color-accent);color:var(--color-accent-700);}
.btn-primary{background:var(--color-accent-700);border-color:var(--color-accent-700);color:#faf7f1;}
.btn-primary:hover{background:var(--color-accent-800);border-color:var(--color-accent-800);color:#faf7f1;}
.btn-secondary{background:transparent;border-color:var(--color-neutral-400);color:inherit;}
.btn-secondary:hover{border-color:var(--color-accent);color:var(--color-accent-700);}
.btn-ghost{border-color:transparent;background:transparent;padding-left:0;padding-right:0;color:var(--color-accent-700);}
.btn-ghost:hover{color:var(--color-accent-600);}
.btn-block{display:flex;width:100%;}
.btn-icon{padding:9px;width:38px;height:38px;}
/* Thai needs a touch more vertical room in buttons */
html[lang="th"] .btn{padding-top:13px;padding-bottom:13px;line-height:1.3;}

/* ── forms ───────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-neutral-600);}
html[lang="th"] .field label{font-size:0.7812rem;letter-spacing:.01em;text-transform:none;}
.input{width:100%;border:1px solid var(--color-neutral-300);background:var(--color-bg);color:var(--color-text);padding:12px 14px;font-size:1rem;line-height:1.4;}
.input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent);}
textarea.input{resize:vertical;}
.radio{display:flex;gap:10px;cursor:pointer;}

/* ── misc components ─────────────────────── */
.tag{display:inline-block;font-size:0.75rem;letter-spacing:.05em;padding:5px 11px;background:var(--color-accent-100);color:var(--color-accent-800);}
.tag-outline{background:transparent;border:1px solid var(--color-divider);color:var(--color-neutral-700);}
.table{border-collapse:collapse;}
.table th,.table td{padding:13px 6px;border-bottom:1px solid var(--color-divider);font-size:0.9375rem;}
.table th{font-family:var(--font-heading);font-weight:500;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-600);}
.hr{height:1px;background:var(--color-divider);margin:14px 0 22px;}
.plate{border:1px solid var(--color-divider);box-shadow:var(--shadow-md);}
.tnum{font-feature-settings:'tnum';}

/* ── layout helpers ──────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}


.nav-desktop{display:none;}
.nav-burger{display:inline-flex;}
@media(min-width:1140px){ .nav-desktop{display:flex;} .nav-burger{display:none;} }
/* Thai nav labels are wider — hold the burger a little longer */
html[lang="th"] .nav-desktop{display:none;}
html[lang="th"] .nav-burger{display:inline-flex;}
@media(min-width:1280px){ html[lang="th"] .nav-desktop{display:flex;} html[lang="th"] .nav-burger{display:none;} }

.two-col{grid-template-columns:minmax(0,1fr);}
@media(min-width:900px){ .two-col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }

.bookbar{grid-template-columns:minmax(0,1fr);row-gap:22px;}
.bookbar .bb-field{border-right:0!important;padding:0!important;}
.bookbar .bb-action{padding-left:0!important;grid-column:1/-1;}
@media(min-width:700px){ .bookbar{grid-template-columns:repeat(2,minmax(140px,1fr));} }
@media(min-width:1120px){
  .bookbar{grid-template-columns:repeat(5,minmax(120px,1fr)) auto;row-gap:0;}
  .bookbar .bb-field{border-right:1px solid var(--color-divider)!important;padding:0 20px!important;}
  .bookbar .bb-field.first{padding:0 20px 0 0!important;}
  .bookbar .bb-action{padding-left:20px!important;grid-column:auto;}
}

/* ── nav ─────────────────────────────────── */
.nav-link{text-decoration:none;color:inherit;font-size:0.8125rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;}
.nav-link:hover{color:var(--color-accent-700);}
.nav-link[aria-current="page"]{color:var(--color-accent-700);border-bottom-color:var(--color-accent);}
html[lang="th"] .nav-link{font-size:0.9375rem;letter-spacing:.01em;text-transform:none;}

.mobile-menu{border-top:1px solid var(--color-divider);padding:8px 28px 22px;animation:kt-rise .22s ease both;}
.mobile-menu a{display:block;text-decoration:none;color:inherit;font-family:var(--font-heading);font-size:1.375rem;padding:11px 0;border-bottom:1px solid var(--color-divider);}
.mobile-menu[hidden]{display:none;}

/* ── the crest ───────────────────────────── */
.crest{display:block;width:44px;height:44px;flex:0 0 auto;}
.crest-footer{display:block;width:56px;height:56px;margin:0 0 18px;}
@media(max-width:640px){
  .crest{width:36px;height:36px;}
  .crest-footer{width:48px;height:48px;}
}

.lang-switch{display:flex;align-items:center;gap:7px;font-size:0.6875rem;letter-spacing:.1em;}
.lang-switch a{text-decoration:none;color:var(--color-text);opacity:.6;padding:2px 1px;border-bottom:1px solid transparent;}
.lang-switch a:hover{opacity:1;}
.lang-switch a[aria-current="true"]{opacity:1;color:var(--color-accent-700);border-bottom-color:var(--color-accent);}

/* ── gallery ─────────────────────────────── */
.shot{cursor:zoom-in;}

/* ── print ───────────────────────────────── */
@media print{
  header,footer,.nav-burger,.lang-switch,.bookbar{display:none!important;}
  .plate{box-shadow:none;}
}


/* ══ large screens ═══════════════════════════════════════
   The extra width goes to bigger pictures and more columns, never to
   longer lines: every paragraph still caps itself in ch. */
@media(min-width:1440px){
  .hero-tall{min-height:min(88vh,880px)!important}
  .hero-short{min-height:min(58vh,560px)!important}
}
@media(min-width:1920px){
  .hero-tall{min-height:min(88vh,1000px)!important}
  .hero-short{min-height:min(58vh,640px)!important}
}

/* ══ small screens ═══════════════════════════════════════ */
@media(max-width:760px){
  /* Sticky sidebars stop being sticky once they are stacked — a panel
     that follows the scroll in a single column just eats the screen. */
  aside > div[style*="sticky"]{position:static!important;top:auto!important}
}
@media(max-width:640px){
  .btn{padding:11px 18px}
  /* A hero that fills the phone leaves nothing visible below it. */
  .hero-tall{min-height:min(74vh,560px)!important}
  .hero-short{min-height:min(46vh,360px)!important}
}
@media(max-width:420px){
  /* Side-by-side buttons wrap to full width rather than shrinking to
     something too small to hit. */
  .btn{width:100%}
  .btn-inline{width:auto}
}


/* ══ waiting ═════════════════════════════════════════════
   Sending a reservation now talks to a real mail server, which takes
   seconds rather than milliseconds. Without a signal the page looks
   frozen and people press the button again — so the button says what
   is happening and stops accepting a second press. */

.is-sending{position:relative;pointer-events:none}
.is-sending .btn[type="submit"],
.is-sending button[type="submit"]{opacity:1}

.spinner{
  width:1em;height:1em;flex:0 0 auto;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:kt-spin .7s linear infinite;
}
@keyframes kt-spin{to{transform:rotate(360deg)}}

button[data-busy="true"],a[data-busy="true"]{
  cursor:progress;opacity:.85;
}
button[data-busy="true"] .btn-label{opacity:.9}

/* A thin bar across the top of the window, so the wait is visible even
   when the button has scrolled out of sight. */
.page-progress{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:90;
  background:var(--color-accent-200);overflow:hidden;
  display:none;
}
.page-progress[data-on="true"]{display:block}
.page-progress::after{
  content:"";position:absolute;inset:0;width:40%;
  background:var(--color-accent);
  animation:kt-slide-bar 1.1s ease-in-out infinite;
}
@keyframes kt-slide-bar{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(350%)}
}

/* A quiet veil over the form itself, so the fields visibly stop
   accepting input rather than just ignoring it. */
.form-veil{
  position:absolute;inset:0;z-index:5;
  background:color-mix(in srgb, var(--color-bg) 62%, transparent);
  display:grid;place-items:center;
}
.form-veil-note{
  display:flex;align-items:center;gap:10px;
  background:var(--color-bg);border:1px solid var(--color-accent-300);
  padding:12px 18px;font-size:0.9375rem;box-shadow:var(--shadow-md);
}

@media(prefers-reduced-motion:reduce){
  .spinner,.page-progress::after{animation:none}
  .page-progress::after{width:100%}
}

/* ── gallery ──────────────────────────────────────────────
   The selected tab is marked with aria-current rather than an
   inline style, so the script can move it without rewriting
   style attributes — and screen readers are told which filter
   is active, which an inline colour never conveyed. */
.gallery-tab[aria-current="true"]{
  border-color:var(--color-accent);
  color:var(--color-accent-700);
}
/* Belt and braces: a hidden item must leave the column flow
   entirely, or the masonry keeps a gap where it used to be. */
.gallery-item[hidden]{display:none!important;}