/* ===========================================================
   Siribuapha Thaise Massage — shared theme
   Dark teak + gold, Thai sema frames, ornamental dividers.
   Palette and ornament assets taken from the client's own site.
   =========================================================== */

:root {
  --wood-900: #1d0d06;
  --wood-800: #2a1409;
  --wood-700: #3a1d0f;
  --wood-600: #4a2614;
  --wood-500: #5c3320;

  --gold-100: #ffe9bd;
  --gold-200: #ffd894;
  --gold-300: #ffc67e;
  --gold-400: #ffb80f;
  --gold-500: #e0a02a;
  --gold-700: #9a6f2c;

  --cream: #fffbee;

  --panel: rgba(92, 51, 32, 0.55);
  --panel-solid: #47240f;
  --rim: rgba(255, 184, 15, 0.32);
}

html {
  scroll-behavior: smooth;
}

/* Teak ground: the client's own wood tile, darkened so gold text stays legible. */
body {
  background-color: var(--wood-700);
  background-image: linear-gradient(rgba(29, 13, 6, 0.82), rgba(29, 13, 6, 0.82)),
    url("../media/footerbg.png");
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--cream);
}

::selection {
  background-color: var(--gold-400);
  color: var(--wood-900);
}

/* -----------------------------------------------------------
   Images — never stretch. Everything is cropped, not squashed.
   ----------------------------------------------------------- */
img {
  color: transparent;
  max-width: 100%;
  height: auto;
}

img.cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------
   Typography
   ----------------------------------------------------------- */
.font-display {
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0.01em;
}

.gold-heading {
  color: var(--gold-300);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.eyebrow {
  color: var(--gold-400);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------
   Ornaments
   ----------------------------------------------------------- */

/* Tileable carved band from the client's bottombar graphic. */
.ornament-band {
  height: 26px;
  background-image: url("../media/bottombar116.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  opacity: 0.9;
}

.ornament-band--alt {
  background-image: url("../media/bottombar117.png");
}

/* Gold swash divider. */
.gold-swash {
  display: block;
  width: min(560px, 80%);
  margin-inline: auto;
  height: auto;
  opacity: 0.85;
}

/* Gold line-art accent above a section heading. */
.section-ornament {
  display: block;
  margin-inline: auto;
  width: clamp(150px, 26vw, 260px);
  height: auto;
  margin-bottom: 0.5rem;
}

.gold-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-500), transparent);
  opacity: 0.6;
}

/* -----------------------------------------------------------
   Panels — translucent teak with a thin gold rim
   ----------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--rim);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.panel-link {
  display: block;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.panel-link:hover {
  border-color: var(--gold-400);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
}

.panel-feature {
  background: linear-gradient(150deg, rgba(154, 111, 44, 0.5), rgba(74, 38, 20, 0.6));
  border-color: var(--gold-400);
}

/* -----------------------------------------------------------
   Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.15s ease;
}

.btn-gold {
  background: linear-gradient(to bottom, var(--gold-300), var(--gold-500) 60%, #b8781a);
  color: var(--wood-900);
  border: 1px solid var(--gold-200);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.btn-gold:hover {
  filter: brightness(1.08);
}

.btn-gold:active {
  transform: translateY(1px);
}

.btn-ghost {
  border: 1px solid var(--rim);
  color: var(--gold-200);
}

.btn-ghost:hover {
  border-color: var(--gold-400);
  background: rgba(255, 184, 15, 0.08);
}

/* -----------------------------------------------------------
   Thai sema frame — the client's signature photo shape.
   Parent draws the gold rim, the image is clipped inside it.
   Both use objectBoundingBox units, so the rim scales cleanly.
   ----------------------------------------------------------- */
.thai-frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  padding: 6px;
  background: linear-gradient(155deg, #ffe9bd, #d8a33a 40%, #8a5f1a 68%, #ffd894);
  clip-path: url(#thai-sema);
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.thai-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: url(#thai-sema);
}

/* Wide variant for landscape photography. */
.thai-frame--wide {
  aspect-ratio: 4 / 3;
}

/* Fallback for browsers without SVG clip-path support. */
@supports not (clip-path: url("#thai-sema")) {
  .thai-frame {
    border-radius: 48% 48% 48% 48% / 32% 32% 32% 32%;
  }
  .thai-frame > img {
    border-radius: 48% 48% 48% 48% / 32% 32% 32% 32%;
  }
}

/* -----------------------------------------------------------
   Hero video
   ----------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Dark enough for legible cream text, light enough that the water still reads. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(29, 13, 6, 0.42), rgba(29, 13, 6, 0.72) 75%),
    linear-gradient(to bottom, rgba(29, 13, 6, 0.6), rgba(29, 13, 6, 0.35) 45%, rgba(29, 13, 6, 0.85));
}

.hero__video {
  filter: brightness(1.5) saturate(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

/* -----------------------------------------------------------
   Decorative side figures — the gold statue and the frame collage.
   Purely ornamental, so they retire on narrow screens.
   ----------------------------------------------------------- */
.deco {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  z-index: -1;
  opacity: 0.22;
}

.deco--left {
  left: -1rem;
  width: 190px;
}

.deco--right {
  right: -1.5rem;
  width: 230px;
}

/* Ornamental only — retire them before they crowd the content column. */
@media (max-width: 1500px) {
  .deco {
    display: none;
  }
}

/* -----------------------------------------------------------
   Header / navigation
   ----------------------------------------------------------- */
.site-header {
  background: rgba(29, 13, 6, 0.92);
  border-bottom: 1px solid var(--rim);
  backdrop-filter: blur(8px);
}

.nav-link {
  color: var(--cream);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--gold-400);
}

/* Mobile drawer */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

#mobile-menu.open {
  max-height: 34rem;
}

/* Native <details> dropdown, de-styled marker + custom chevron */
.nav-dropdown summary {
  cursor: pointer;
  list-style: none;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown[open] .chevron {
  transform: rotate(180deg);
}

@media (min-width: 1024px) {
  .nav-dropdown {
    position: relative;
  }
  .nav-dropdown summary {
    padding-block: 0.5rem;
  }
  .nav-dropdown .dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-dropdown[open] .dropdown-panel {
    display: block;
  }
}

.dropdown-panel {
  background: var(--panel-solid);
  border: 1px solid var(--rim);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.dropdown-panel a:hover {
  background: rgba(255, 184, 15, 0.12);
  color: var(--gold-300);
}

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
.site-footer {
  background-color: var(--wood-900);
  background-image: linear-gradient(rgba(20, 9, 4, 0.78), rgba(20, 9, 4, 0.78)),
    url("../media/footerbg.png");
  background-repeat: repeat;
  border-top: 1px solid var(--rim);
}

/* -----------------------------------------------------------
   Form fields
   ----------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: rgba(20, 9, 4, 0.55);
  color: var(--cream);
  font: inherit;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 251, 238, 0.4);
}

input:focus,
textarea:focus,
select:focus {
  background-color: rgba(20, 9, 4, 0.75);
  outline: none;
}

/* -----------------------------------------------------------
   Accessibility
   ----------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold-400);
  color: var(--wood-900);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0;
}

.skip-link:focus {
  left: 0;
}