/* ACHALA base styles: loaded after achala-theme.css and before tailwind.css (Tailwind utilities win over these). */
/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: var(--ac-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--ac-divider);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ac-text-muted);
}

/* Anchored sections clear the fixed header */
section[id] {
  scroll-margin-top: 56px;
}

/* Quiet scroll reveal (only when JS is running) */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Thai text breathes a little more */
html[lang='th'] .editorial-body {
  line-height: 1.95;
}

/* Form fields (theme tokens) */
.field-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ac-on-card);
  opacity: 0.8;
  margin-bottom: 6px;
}
.field-input {
  width: 100%;
  background: var(--ac-field);
  color: var(--ac-on-field);
  border: 1px solid var(--ac-field-border);
  padding: 8px 12px;
  font-size: 14px;
  transition: border-color 200ms;
  border-radius: 12px;
}
.field-input:focus {
  outline: 2px solid var(--ac-focus);
  outline-offset: 2px;
}
.field-input::placeholder {
  color: color-mix(in srgb, var(--ac-on-field) 72%, transparent);
}
select option {
  background: var(--ac-field);
  color: var(--ac-on-field);
}

/* ---- Achala theme helpers (tokens only) ---- */
/* Photo overlays: one scrim colour, varying strength (Tailwind opacity modifiers don't work on CSS-variable colours) */
.ac-scrim-t {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ac-scrim) 78%, transparent),
    color-mix(in srgb, var(--ac-scrim) 20%, transparent) 55%,
    transparent
  );
}
.ac-scrim-t-strong {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ac-scrim) 92%, transparent),
    color-mix(in srgb, var(--ac-scrim) 70%, transparent) 55%,
    transparent
  );
}
.ac-scrim-hdr {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ac-scrim) 65%, transparent),
    color-mix(in srgb, var(--ac-scrim) 25%, transparent) 60%,
    transparent
  );
}
/* Chips and pills that sit on photos */
.ac-chip {
  background: color-mix(in srgb, var(--ac-scrim) 55%, transparent);
  color: var(--ac-on-scrim);
  border-color: color-mix(in srgb, var(--ac-on-scrim) 28%, transparent);
}
.ac-chip:hover {
  background: color-mix(in srgb, var(--ac-scrim) 75%, transparent);
}
/* Reservation bar glass */
.ac-glass-bar {
  background: color-mix(in srgb, var(--ac-bar) 90%, transparent);
  color: var(--ac-text);
  border-color: var(--ac-divider);
}
/* Primary button */
.ac-cta {
  background: var(--ac-cta);
  color: var(--ac-on-cta);
  border-color: transparent;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ac-glow) 40%, transparent);
}
.ac-cta:hover {
  filter: brightness(1.12);
}
.ac-tint-hover:hover {
  background: color-mix(in srgb, var(--ac-text) 12%, transparent);
}

/* Headlines: Raleway (English) and Noto Sans Thai (Thai). Large headlines weight 400, small headlines weight 600. */
.ac-h-never,
.ac-h-sm {
  font-family: var(--font-body);
  font-weight: 600;
}
.ac-h-0 {
  font-family: var(--font-display);
  font-weight: 400;
}
html:lang(th) .ac-h-never,
html:lang(th) .ac-h-sm {
  font-family: var(--font-thai);
  font-weight: 600;
}
html:lang(th) .ac-h-0 {
  font-family: var(--font-display-thai);
  font-weight: 400;
}
@media (min-width: 640px) {
  .ac-h-sm {
    font-family: var(--font-display);
    font-weight: 400;
  }
  html:lang(th) .ac-h-sm {
    font-family: var(--font-display-thai);
    font-weight: 400;
  }
}

/* Site colours chosen in the colour studio (18 Oct 2026). Arabica palette: canvas #FAF6EF, haze #EDE6DA, clay #9C5B3B, espresso #3B2418. */
.ac-glass-bar {
  background: color-mix(in srgb, #ede6da 94%, transparent) !important;
}
.ac-glass-bar,
#reservation-bar-expanded input,
#reservation-bar-expanded select {
  color: #3b2418 !important;
}
#reservation-bar-expanded option {
  color: #22160f;
}
#site-header:not(.bg-ac-bg),
#site-header:not(.bg-ac-bg)
  :is(nav a, #mobile-menu a, .hl-t, .hl-w, .hl-s, #lang-toggle-btn, #lang-current-label, #lang-toggle-btn i) {
  color: #faf6ef !important;
}
#site-header:not(.bg-ac-bg) .ac-chip {
  border-color: color-mix(in srgb, #faf6ef 38%, transparent) !important;
}
#site-header.bg-ac-bg,
#site-header.bg-ac-bg
  :is(nav a, #mobile-menu a, .hl-t, .hl-w, .hl-s, #lang-toggle-btn, #lang-current-label, #lang-toggle-btn i) {
  color: #9c5b3b !important;
}
/* mobile-menu Enquire Stay button: keep cream text on the terracotta button (the nav-link colour rule above would otherwise turn it terracotta on terracotta once the header is scrolled) */
#site-header #mobile-menu a.ac-cta {
  color: #faf6ef !important;
}
#site-header.bg-ac-bg #lang-toggle-btn {
  background: transparent !important;
  border-color: color-mix(in srgb, #9c5b3b 45%, transparent) !important;
}
#site-header.bg-ac-bg {
  background: #ede6da !important;
}
#story {
  background: #faf6ef !important;
}
#story :is(h2, h3, p, blockquote, span):not(.text-ac-kicker) {
  color: #3b2418 !important;
}
#view {
  background: #faf6ef !important;
}
#view :is(h2, p, span):not(.text-ac-kicker):not(.text-ac-on-scrim):not([class*='on-scrim']) {
  color: #3b2418 !important;
}
#villa {
  background: #faf6ef !important;
}
#villa .vz-strips {
  background: #faf6ef !important;
}
#villa > div.max-w-7xl :is(h2, p, span):not(.text-ac-kicker) {
  color: #3b2418 !important;
}
#villa .vz-split {
  background: #faf6ef !important;
}
#villa .vz-split-body :is(span, h3, h4, p):not(.bg-ac-tag *):not(.ac-cta *) {
  color: #3b2418 !important;
}
#villa .vz-split-body .bg-ac-tag {
  background: #faf6ef !important;
}
#villa .vz-split-body .bg-ac-tag,
#villa .vz-split-body .bg-ac-tag * {
  color: #3b2418 !important;
}
#contact {
  background: #faf6ef !important;
}
#contact :is(h2, h3, p, li, span, a):not(form *):not(.text-ac-kicker) {
  color: #3b2418 !important;
}
#contact-form,
#booking-form {
  background: #faf6ef !important;
}
:is(#contact-form, #booking-form) :is(h2, h3, p, label, span):not(.field-input):not(.ac-cta *) {
  color: #3b2418 !important;
}
:is(#contact-form, #booking-form) .field-input,
:is(#contact-form, #booking-form) select option {
  background: #faf6ef !important;
}
:is(#contact-form, #booking-form) .field-input,
:is(#contact-form, #booking-form) select option {
  color: #3b2418 !important;
}
:is(#contact-form, #booking-form) .field-input::placeholder {
  color: color-mix(in srgb, #3b2418 70%, transparent) !important;
}
footer {
  background: #3b2418 !important;
}
footer,
footer :is(span, p):not(.hl-m *) {
  color: #faf6ef !important;
}
.ac-cta {
  background: #9c5b3b !important;
}
.ac-cta {
  color: #faf6ef !important;
}
input:not([type='checkbox']):not([type='radio']):not([type='file']):focus,
select:focus,
textarea:focus,
.field-input:focus {
  outline: 2px solid #9c5b3b !important;
  outline-offset: 2px !important;
  border-color: #9c5b3b !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, #9c5b3b 26%, transparent) !important;
}
::selection {
  background: #9c5b3b;
  color: #faf6ef;
}
#site-header nav a,
#site-header .hl-t,
#site-header #lang-toggle-btn {
  transition: color 0.45s ease !important;
}