/* ==================================================================
   HOTEL SUMIYON — STYLESHEET
   ------------------------------------------------------------------
   CUSTOMIZE:
   1. All colors/fonts/spacing live in :root below — change once,
      updates everywhere.
   2. Search "REPLACE IMAGE" to swap illustrated placeholder blocks
      for real photography once you have it.
================================================================== */

:root {
  /* ---- Color tokens ---- */
  --forest:      #1E3B2B;   /* deep pine green — primary dark */
  --forest-2:    #142A1D;   /* darker forest, gradients/overlays */
  --ink:         #191B15;   /* near-black text */
  --cream:       #F6F1E3;   /* warm paper background */
  --paper:       #FBF8F0;
  --clay:        #B5502E;   /* terracotta/rust accent — CTAs */
  --clay-dark:   #8F3E22;
  --amber:       #DDA23C;   /* golden accent — prices, highlights */
  --line:        rgba(25,27,21,0.12);
  --line-light:  rgba(246,241,227,0.28);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Layout ---- */
  --container: 1240px;
  --gutter: clamp(24px, 5vw, 80px);
  --section-pad: clamp(60px, 9vw, 130px);
  --radius: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ================= THEME HEADER/FOOTER SAFETY NET =================
   ROOT CAUSE OF THE "BLACK BAR" ISSUE: your theme (Hello Elementor)
   uses a header with the class "site-header" — the exact same class
   name this design uses for its own header. That theme header is a
   separate, unstyled element that WordPress inserts above your page
   content automatically, and it was showing as an unstyled black bar
   above this design.

   The real fix is setting the page's Template to "Elementor Canvas"
   (see the setup guide) — that tells WordPress not to output the
   theme's header/footer on this page at all. As a safety net in case
   that setting gets missed or reset, this rule also actively hides
   the theme's header/footer/nav wrapper on any page using the
   [sumiyon_home] shortcode, while carefully leaving OUR OWN header
   and footer (both inside .sumiyon-wrap) untouched.
================================================================= */
body.sumiyon-fullpage > header,
body.sumiyon-fullpage > footer,
body.sumiyon-fullpage #masthead,
body.sumiyon-fullpage #colophon,
body.sumiyon-fullpage nav#site-navigation,
body.sumiyon-fullpage .site-header:not(.sumiyon-wrap .site-header),
body.sumiyon-fullpage .site-footer:not(.sumiyon-wrap .site-footer),
body.sumiyon-fullpage .site-branding:not(.sumiyon-wrap .site-branding) {
  display: none !important;
}

/* ================= THEME-CONFLICT HARDENING =================
   Your WordPress theme has its own default styles for links,
   headings, and backgrounds — on some themes those are specific
   enough to override the rules below. Everything in this block is
   scoped to .sumiyon-wrap (the container around this whole design)
   and marked !important specifically so your theme can never make
   links underlined, headings the wrong color, or a section's
   background turn transparent/dark by accident. This is the fix
   for the contrast/readability issue — nothing here changes the
   design, it just makes sure the design actually renders as built.
================================================================= */
.sumiyon-wrap { background: var(--paper) !important; color: var(--ink) !important; }
.sumiyon-wrap a { text-decoration: none !important; }
.sumiyon-wrap h1, .sumiyon-wrap h2, .sumiyon-wrap h3, .sumiyon-wrap h4 { font-family: var(--font-display) !important; }
.sumiyon-wrap ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sumiyon-wrap button { font-family: inherit !important; }

.sumiyon-wrap .site-header { background: var(--paper) !important; }
.sumiyon-wrap .brand-name { color: var(--forest) !important; }
.sumiyon-wrap .main-nav a { color: var(--ink) !important; }
.sumiyon-wrap .mobile-menu-panel { background: var(--paper) !important; opacity: 1 !important; }
.sumiyon-wrap .mobile-nav-item { color: var(--ink) !important; }
.sumiyon-wrap .mobile-nav-item.is-active, .sumiyon-wrap .mobile-nav-item:hover { color: var(--forest) !important; }
.sumiyon-wrap .nav-toggle { padding: 0 !important; border: none !important; background: none !important; }
.sumiyon-wrap .nav-toggle span { background: var(--ink) !important; width: 100% !important; height: 2px !important; }

.sumiyon-wrap .hero-title, .sumiyon-wrap .hero-sub, .sumiyon-wrap .badge { color: var(--cream) !important; }

.sumiyon-wrap .section { background: var(--paper) !important; color: var(--ink) !important; }
.sumiyon-wrap .section-head h2, .sumiyon-wrap .section h2, .sumiyon-wrap .section h3 { color: var(--ink) !important; }
.sumiyon-wrap .section-sub { color: rgba(25,27,21,0.65) !important; }

.sumiyon-wrap .section-tint { background: var(--cream) !important; }

.sumiyon-wrap .section-dark { background: var(--forest) !important; color: var(--cream) !important; }
.sumiyon-wrap .section-dark h2, .sumiyon-wrap .section-dark h3 { color: var(--cream) !important; }
.sumiyon-wrap .section-sub-light { color: rgba(246,241,227,0.75) !important; }

.sumiyon-wrap .testimonials { background: var(--paper) !important; }
.sumiyon-wrap .testimonial p { color: var(--forest) !important; }

.sumiyon-wrap .cta-banner { background: var(--clay) !important; color: var(--cream) !important; }
.sumiyon-wrap .cta-banner h2 { color: var(--cream) !important; }

.sumiyon-wrap .site-footer { background: var(--ink) !important; color: rgba(246,241,227,0.8) !important; }
.sumiyon-wrap .site-footer a, .sumiyon-wrap .logo-footer { color: var(--cream) !important; }
.sumiyon-wrap .footer-col h4 { color: var(--amber) !important; }

.sumiyon-wrap .room-card, .sumiyon-wrap .menu-card, .sumiyon-wrap .package-card { background: var(--paper) !important; }
.sumiyon-wrap .package-card--featured, .sumiyon-wrap .menu-card--featured { background: var(--cream) !important; }
.sumiyon-wrap .package-card--dark { background: transparent !important; color: var(--cream) !important; }
.sumiyon-wrap .package-card--dark .package-list li { color: var(--cream) !important; }
.sumiyon-wrap .package-list li { color: var(--ink); }

/* ================= RESET / BASE ================= */
*, *::before, *::after { box-sizing: border-box; }
html { 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 {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0 0 0.4em; letter-spacing: -0.01em; color: var(--ink); }
p { margin: 0 0 1em; color: var(--ink); }
li { color: var(--ink); }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

/* ================= TYPE HELPERS ================= */
.eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay-dark); margin: 0 0 1em; }
.eyebrow-light { color: var(--amber); }
.lede { font-size: 1.12rem; color: rgba(25,27,21,0.72); }
.text-link { display: inline-block; font-size: 0.95rem; font-weight: 600; border-bottom: 1px solid var(--clay); padding-bottom: 2px; transition: opacity 0.25s var(--ease); }
.text-link:hover { opacity: 0.6; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.25rem; }

/* ================= BUTTONS ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; border-radius: var(--radius); transition: all 0.3s var(--ease); white-space: nowrap; }
.btn-solid { background: var(--forest); color: var(--cream); }
.btn-solid:hover { background: var(--ink); }
.btn-solid-light { background: var(--cream); color: var(--forest); }
.btn-solid-light:hover { background: var(--amber); color: var(--forest-2); }
.btn-line { border: 1.5px solid var(--forest); color: var(--forest); }
.btn-line:hover { background: var(--forest); color: var(--cream); }
.btn-line-light { border: 1.5px solid var(--line-light); color: var(--cream); }
.btn-line-light:hover { background: var(--cream); color: var(--forest); }

/* ================= RIDGE LINE (signature element) ================= */
.ridge-line path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1700; stroke-dashoffset: 1700; transition: stroke-dashoffset 1.6s var(--ease); }
.ridge-line.drawn path { stroke-dashoffset: 0; }
#ridgeHero { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; color: var(--cream); opacity: 0.9; z-index: 3; }
.ridge-divider { display: block; width: 100%; height: 30px; color: var(--clay); margin: 0 auto; }

/* ================= TOPBAR ================= */
.topbar { background: var(--forest); color: var(--cream); font-size: 0.85rem; }
.topbar-inner { max-width: var(--container); margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.topbar-msg { opacity: 0.92; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.topbar-cta { border: 1px solid var(--line-light); border-radius: 30px; padding: 6px 16px; font-weight: 600; font-size: 0.78rem; transition: background 0.25s var(--ease); }
.topbar-cta:hover { background: rgba(246,241,227,0.12); }
.lang-toggle { display: flex; align-items: center; gap: 2px; background: rgba(246,241,227,0.12); border-radius: 30px; padding: 4px; font-size: 0.75rem; font-weight: 700; }
.lang-toggle button { padding: 4px 12px; border-radius: 20px; opacity: 0.6; font-weight: 700; font-size: 0.75rem; color: inherit; transition: opacity 0.2s var(--ease); }
.lang-toggle .lang-active { background: var(--cream); color: var(--forest); opacity: 1; }
.lang-toggle--mobile { background: rgba(30,59,43,0.08); }
.lang-toggle--mobile .lang-active { background: var(--forest); color: var(--cream); }

/* ================= HEADER ================= */
.site-header { position: sticky; top: 0; left: 0; right: 0; z-index: 9000; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.header-inner { max-width: var(--container); margin: 0 auto; padding: 16px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; color: var(--forest); flex-shrink: 0; }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.brand-mark circle { fill: var(--amber); stroke: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; color: var(--forest); }
.brand-tagline { font-size: 0.7rem; color: rgba(25,27,21,0.55); letter-spacing: 0.03em; }

.main-nav { display: flex; gap: 30px; }
.main-nav a { font-size: 0.86rem; font-weight: 600; color: var(--ink); transition: opacity 0.25s var(--ease); }
.main-nav a:hover { opacity: 0.55; }

.header-actions { display: flex; align-items: center; gap: 20px; }
.header-book { padding: 10px 22px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 26px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}

.mobile-menu {
  position: fixed; inset: 0;
  z-index: 999998;
  visibility: hidden;
  transition: visibility 0.4s var(--ease);
  /* Deliberately no opacity/background here — those live on the
     backdrop element below. Putting a fade on this outer wrapper
     would make the (should-be-solid) panel semi-transparent too,
     since a parent's opacity affects everything inside it, no
     matter what background that child sets on itself. */
}
.mobile-menu.open { visibility: visible; }

.mobile-menu-backdrop {
  position: absolute; inset: 0;
  background: rgba(21,24,26,0.35);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.mobile-menu.open .mobile-menu-backdrop { opacity: 1; }

.mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--paper);
  opacity: 1;
  box-shadow: -12px 0 40px rgba(20,42,29,0.2);
  padding: 22px 24px 32px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  overflow-y: auto;
}
.mobile-menu.open .mobile-menu-panel { transform: translateX(0); }

.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-menu-close { font-size: 1.8rem; line-height: 1; color: var(--ink); padding: 4px 8px; }

.mobile-menu nav { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.mobile-nav-item {
  display: block;
  padding: 14px 16px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.mobile-nav-item:hover, .mobile-nav-item.is-active {
  background: rgba(30,59,43,0.08);
  color: var(--forest);
}
.mobile-menu-cta { margin-top: auto; text-align: center; }

/* ================= HERO — layered ridge illustration ================= */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; color: var(--cream); }

.hero-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #EFCB8B 0%, #E7A868 30%, #C97A52 55%, #6C4A4A 78%, var(--forest-2) 100%); }
.hero-sun { position: absolute; top: 14%; left: 50%; width: 180px; height: 180px; margin-left: -90px; border-radius: 50%; background: radial-gradient(circle, #FFE9BE 0%, #F3B45E 60%, rgba(243,180,94,0) 72%); filter: blur(1px); }

/* REPLACE IMAGE: the .hero-ridge / .hero-lake blocks are an original
   CSS/clip-path illustration standing in for a real photo. To use a
   photo instead, delete these divs' backgrounds and set:
   .hero-sky { background-image: url('your-hero-photo.jpg'); background-size: cover; background-position: center; } */
.hero-ridge { position: absolute; left: 0; width: 100%; }
.hero-ridge--far { bottom: 30%; height: 34%; background: #4E5B45; clip-path: polygon(0% 100%, 0% 55%, 10% 35%, 22% 50%, 34% 20%, 48% 45%, 60% 15%, 74% 42%, 88% 25%, 100% 48%, 100% 100%); opacity: 0.55; }
.hero-ridge--mid { bottom: 22%; height: 32%; background: #37472F; clip-path: polygon(0% 100%, 0% 62%, 14% 30%, 28% 55%, 42% 18%, 56% 50%, 70% 22%, 84% 48%, 100% 30%, 100% 100%); opacity: 0.75; }
.hero-ridge--near { bottom: 0; height: 22%; background: var(--forest-2); clip-path: polygon(0% 100%, 0% 45%, 12% 65%, 24% 30%, 38% 60%, 52% 25%, 66% 55%, 80% 35%, 92% 58%, 100% 40%, 100% 100%); z-index: 2; }
.hero-lake { position: absolute; bottom: 0; left: 0; width: 100%; height: 22%; background: linear-gradient(180deg, #8A6B54 0%, #4E3A33 100%); opacity: 0.85; }

.hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,42,29,0.82) 0%, rgba(20,42,29,0.1) 50%, rgba(20,42,29,0.05) 100%); z-index: 2; }

.hero-content { position: relative; z-index: 3; padding: 0 var(--gutter) 120px; max-width: 720px; }
.badge { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-light); border-radius: 30px; padding: 8px 18px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 1.2em; }
.hero-title { font-size: clamp(2.4rem, 6vw, 4.6rem); font-style: italic; font-weight: 600; margin-bottom: 0.3em; }
.hero-sub { font-size: 1.1rem; max-width: 480px; color: rgba(246,241,227,0.88); margin-bottom: 1.8em; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.scroll-cue { position: absolute; right: var(--gutter); bottom: 50px; z-index: 3; width: 26px; height: 44px; border: 1px solid var(--line-light); border-radius: 20px; }
.scroll-cue span { display: block; width: 4px; height: 4px; background: var(--cream); border-radius: 50%; margin: 8px auto 0; animation: scrollCue 1.8s var(--ease) infinite; }
@keyframes scrollCue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ================= BOOKING BAR ================= */
.booking-bar { position: relative; z-index: 4; max-width: 1080px; margin: -60px auto 0; padding: 0 var(--gutter); }
.booking-form { background: var(--paper); box-shadow: 0 24px 55px rgba(20,42,29,0.2); border-radius: var(--radius); display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.field { padding: 18px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-dark); }
.field input, .field select { border: none; background: none; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); padding: 0; }
.field input:focus, .field select:focus { outline: none; }
.booking-submit { border-radius: 0; padding: 0 30px; }
.booking-note { margin: 14px 4px 0; font-size: 0.85rem; color: var(--clay-dark); min-height: 1.2em; }

/* ---- Dining inquiry form ----
   Deliberately mirrors .booking-form / .field above (same card look,
   same field styling) so the two forms feel like one consistent
   system, just placed inline within the Food Menu section instead of
   floating over the hero. */
.dining-form-wrap {
  max-width: 920px;
  margin: 64px auto 0;
}
.dining-form-intro { text-align: center; margin-bottom: 28px; }
.dining-form-intro h3 { margin-bottom: 0.3em; }
.dining-form-intro p { color: rgba(25,27,21,0.65); margin: 0; }

.dining-form {
  background: var(--paper);
  box-shadow: 0 24px 55px rgba(20,42,29,0.14);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
}
.dining-form .field { padding: 18px 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.dining-form .field label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay-dark); }
.dining-form .field input, .dining-form .field select { border: none; background: none; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); padding: 0; }
.dining-form .field input:focus, .dining-form .field select:focus { outline: none; }
.dining-submit { border-radius: 0; padding: 0 30px; }
.dining-note { margin: 14px 4px 0; font-size: 0.85rem; color: var(--clay-dark); min-height: 1.2em; text-align: center; }

@media (max-width: 860px) {
  .dining-form { grid-template-columns: 1fr 1fr; }
  .dining-form .field { border-right: none; border-bottom: 1px solid var(--line); }
  .dining-submit { grid-column: 1 / -1; padding: 16px; }
}
@media (max-width: 560px) {
  .dining-form { grid-template-columns: 1fr; }
}

/* ================= SECTION (generic) ================= */
.section { padding: var(--section-pad) var(--gutter); max-width: var(--container); margin: 0 auto; }
.section-tint { max-width: none; background: var(--cream); }
.section-tint .section-head, .section-tint .menu-grid { max-width: var(--container); margin-left: auto; margin-right: auto; }
.section-dark { max-width: none; background: var(--forest); color: var(--cream); }
.section-head { max-width: 620px; margin: 0 auto var(--section-pad); text-align: center; }
.section-head h2 { text-align: center; }
.section-head-light h2 { color: var(--cream); }
.section-sub { color: rgba(25,27,21,0.65); font-size: 1.02rem; }
.section-sub-light { color: rgba(246,241,227,0.75); }

/* ---- About ---- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.about-media { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; }
.about-media-inner { width: 100%; height: 100%; background: linear-gradient(165deg, #3B5940 0%, #1E3B2B 60%, #142A1D 100%); position: relative; }
.about-media-inner::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(221,162,60,0.35), transparent 55%); }

/* ---- Rooms ---- */
.room-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.room-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.room-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(20,42,29,0.12); }
.room-media { aspect-ratio: 4/3; }
.room-media--1 { background: linear-gradient(160deg,#5C7A55,#1E3B2B); }
.room-media--2 { background: linear-gradient(160deg,#7C8F5A,#324B2C); }
.room-media--3 { background: linear-gradient(160deg,#8A6B54,#4E3A33); }
.room-media--4 { background: linear-gradient(160deg,#DDA23C,#B5502E); }
.room-body { padding: 20px; }
.room-body p { font-size: 0.88rem; color: rgba(25,27,21,0.6); margin-bottom: 1.1em; }
.room-foot { display: flex; align-items: center; justify-content: space-between; }
.room-price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--clay-dark); }
.room-price small { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; color: rgba(25,27,21,0.5); }

/* Gives the room card's "Enquire" link a real button outline instead
   of just an underline, matching the visual weight of the bordered
   buttons used in Food/Camping/Groups. Scoped to .room-card only, so
   .text-link elsewhere (like the About section's link) is untouched. */
.room-card .text-link {
  border: 1.5px solid var(--clay);
  border-bottom: 1.5px solid var(--clay);
  border-radius: var(--radius);
  padding: 7px 16px;
}
.room-card .text-link:hover { background: rgba(181,80,46,0.12); opacity: 1; }

/* ---- Food menu ---- */
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 920px; margin: 0 auto; }
.menu-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.menu-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(20,42,29,0.14); }
.menu-card--featured { border-color: var(--clay); background: var(--cream); }

/* REPLACE IMAGE: set via Appearance → Customize → Hotel Sumiyon
   Settings → Photos → "Veg Thali Photo" / "Chicken Thali Photo".
   This gradient is the placeholder until a real photo is set. */
.menu-card-media { aspect-ratio: 16/10; background: linear-gradient(160deg, #cdbe93, #8F3E22); }
.menu-card--featured .menu-card-media { background: linear-gradient(160deg, #DDA23C, #8F3E22); }

.menu-card-body { padding: 32px 36px 36px; display: flex; flex-direction: column; flex-grow: 1; }

.menu-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-dark);
  background: rgba(181,80,46,0.1);
  border-radius: 30px;
  padding: 6px 14px;
  margin-bottom: 0.9em;
}
.menu-card--featured .menu-badge { background: var(--clay); color: var(--cream); }

.menu-card h3 { margin-bottom: 0.5em; }
.menu-desc { font-size: 0.95rem; color: rgba(25,27,21,0.68); margin-bottom: 1.4em; }

.menu-feature-list { margin: 0 0 1.8em; flex-grow: 1; }
.menu-feature-list li {
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  position: relative;
  line-height: 1.45;
  color: var(--ink);
}
.menu-feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 10px;
  color: var(--clay);
  font-weight: 700;
}

.menu-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; flex-wrap: wrap; }
.menu-price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--forest); white-space: nowrap; }
.menu-price small { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; color: rgba(25,27,21,0.5); }

/* ---- Packages (camping + group) ---- */
.package-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.package-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 34px; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease); }
.package-card:hover { transform: translateY(-4px); }
.package-card--featured { border-color: var(--clay); background: var(--cream); }
.package-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-dark); margin-bottom: 0.7em; }
.package-price { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--forest); margin-bottom: 1em; }
.package-price small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: rgba(25,27,21,0.5); }
.package-list { margin: 0 0 1.8em; }
.package-list li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; padding-left: 22px; position: relative; color: var(--ink); }
.package-list li::before { content: '✓'; position: absolute; left: 0; color: var(--clay); font-weight: 700; }

.package-grid--dark .package-card--dark { border-color: var(--line-light); }
.package-card--dark .package-price { color: var(--amber); }
.package-card--dark .package-tag { color: var(--amber); }
.package-card--dark .package-list li { border-bottom-color: var(--line-light); color: var(--cream); }
.package-card--dark .package-list li::before { color: var(--amber); }

/* ---- Specialty ---- */
.specialty-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.specialty-copy h2 { font-style: italic; }
.dish-list { margin-top: 1.6em; border-top: 1px solid var(--line); }
.dish-list li { padding: 13px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.1rem; }
.specialty-media { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; }
.specialty-media-inner { width: 100%; height: 100%; background: linear-gradient(160deg, #B5502E 0%, #8F3E22 55%, #4E3A33 100%); position: relative; }
.specialty-media-inner::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 75%, rgba(255,200,120,0.35), transparent 55%); }

/* ---- Explore Nearby (radial map) ----
   Desktop/tablet: a circular "orbit" layout — Hotel Sumiyon centered,
   nine destinations arranged evenly around it, connected by thin
   lines (reusing the same ridge-line signature style used elsewhere
   on the site). Mobile: the orbit doesn't have room to breathe, so it
   switches to a clean two-column grid instead — same content, no
   absolute positioning to fight with. */
.explore-orbit {
  position: relative;
  width: min(92vw, 760px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.explore-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--amber); opacity: 0.55; }
.explore-lines line {
  stroke: currentColor;
  stroke-width: 0.35;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.explore-orbit.drawn .explore-lines line { stroke-dashoffset: 0; }

.explore-hub {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  text-align: center;
  z-index: 2;
}
.explore-hub-photo {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: linear-gradient(160deg, #3B5940 0%, #1E3B2B 60%, #142A1D 100%);
  box-shadow: 0 0 0 6px var(--paper), 0 14px 34px rgba(20,42,29,0.35);
  margin: 0 auto 12px;
}
.explore-hub-label { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.95rem, 2vw, 1.25rem); color: var(--forest); line-height: 1.15; }
.explore-hub-tag { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-dark, var(--clay-dark)); margin-top: 2px; }

.explore-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 17%;
  text-align: center;
  z-index: 1;
}
.explore-node-photo {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--paper), 0 8px 20px rgba(20,42,29,0.25);
  margin: 0 auto 8px;
  transition: transform 0.3s var(--ease);
}
.explore-node:hover .explore-node-photo { transform: scale(1.08); }
.explore-node-name { font-size: 0.72rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.explore-node-distance { font-size: 0.66rem; color: var(--clay-dark); font-weight: 600; }

/* Node photo placeholder colors — replace via Settings → Photos once
   real destination photography is available. */
.explore-node--1 .explore-node-photo { background: linear-gradient(160deg,#5C7A55,#1E3B2B); }
.explore-node--2 .explore-node-photo { background: linear-gradient(160deg,#4E6B8C,#1E3B2B); }
.explore-node--3 .explore-node-photo { background: linear-gradient(160deg,#8AB4D8,#4E6B8C); }
.explore-node--4 .explore-node-photo { background: linear-gradient(160deg,#6E97B8,#2E4A5E); }
.explore-node--5 .explore-node-photo { background: linear-gradient(160deg,#7C8F5A,#324B2C); }
.explore-node--6 .explore-node-photo { background: linear-gradient(160deg,#8A6B54,#4E3A33); }
.explore-node--7 .explore-node-photo { background: linear-gradient(160deg,#8F3E22,#4E3A33); }
.explore-node--8 .explore-node-photo { background: linear-gradient(160deg,#DDA23C,#8F3E22); }
.explore-node--9 .explore-node-photo { background: linear-gradient(160deg,#37472F,#142A1D); }

/* Nine evenly-spaced positions around the circle (40° apart),
   starting at the top and moving clockwise. */
.explore-node--1  { left: 50.0%; top: 8.0%; }
.explore-node--2  { left: 77.0%; top: 17.8%; }
.explore-node--3  { left: 91.4%; top: 42.7%; }
.explore-node--4  { left: 86.4%; top: 71.0%; }
.explore-node--5  { left: 64.4%; top: 89.5%; }
.explore-node--6  { left: 35.6%; top: 89.5%; }
.explore-node--7  { left: 13.6%; top: 71.0%; }
.explore-node--8  { left: 8.6%;  top: 42.7%; }
.explore-node--9 { left: 23.0%; top: 17.8%; }

.explore-grid-mobile { display: none; }

@media (max-width: 760px) {
  .explore-orbit { display: none; }
  .explore-grid-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    max-width: 480px;
    margin: 0 auto;
  }
  .explore-grid-mobile .explore-hub-block { grid-column: 1 / -1; text-align: center; margin-bottom: 8px; }
  .explore-grid-mobile .explore-hub-photo { width: 96px; }
  .explore-grid-mobile .explore-node { position: static; transform: none; width: 100%; }
  .explore-grid-mobile .explore-node-photo { width: 64px; }
}

/* ---- Gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; }
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; border: none; padding: 0; cursor: zoom-in; transition: transform 0.5s var(--ease); }
.gallery-item:nth-child(1) { background: linear-gradient(160deg,#5C7A55,#1E3B2B); }
.gallery-item:nth-child(2) { background: linear-gradient(160deg,#B5502E,#4E3A33); }
.gallery-item:nth-child(3) { background: linear-gradient(160deg,#7C8F5A,#324B2C); }
.gallery-item:nth-child(4) { background: linear-gradient(160deg,#DDA23C,#8F3E22); }
.gallery-item:nth-child(5) { background: linear-gradient(160deg,#8A6B54,#4E3A33); }
.gallery-item:nth-child(6) { background: linear-gradient(160deg,#37472F,#142A1D); }
.gallery-item:nth-child(7) { background: linear-gradient(160deg,#E7A868,#8F3E22); }
.gallery-item:nth-child(8) { background: linear-gradient(160deg,#2E4A5E,#142A1D); }
.gallery-item:nth-child(9) { background: linear-gradient(160deg,#6E8F5A,#37472F); }
.gallery-item:nth-child(10) { background: linear-gradient(160deg,#B08D57,#4E3A33); }
.gallery-item:nth-child(11) { background: linear-gradient(160deg,#8AB4D8,#4E6B8C); }
.gallery-item:nth-child(12) { background: linear-gradient(160deg,#5C7A55,#142A1D); }
.gallery-item:hover { transform: scale(0.98); }
.gallery-item--tall { grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; }

.lightbox { position: fixed; inset: 0; z-index: 999997; background: rgba(20,42,29,0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease); }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-media { width: min(80vw, 900px); aspect-ratio: 16/10; border-radius: var(--radius); background: linear-gradient(160deg,#5C7A55,#1E3B2B); }
.lightbox-caption { color: var(--cream); font-size: 0.9rem; opacity: 0.8; }
.lightbox-close { position: absolute; top: 26px; right: var(--gutter); font-size: 2rem; color: var(--cream); line-height: 1; }

/* ---- Testimonials ---- */
.testimonials { background: var(--paper); padding: var(--section-pad) var(--gutter); text-align: center; }
.testimonial-track { max-width: 740px; margin: 0 auto; position: relative; min-height: 150px; }
.testimonial { position: absolute; inset: 0; opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none; }
.testimonial.active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; }
.testimonial p { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 400; line-height: 1.4; color: var(--forest); }
.testimonial cite { display: block; margin-top: 1.3em; font-style: normal; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clay-dark); }
.testimonial-dots { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.testimonial-dots button { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background 0.3s var(--ease), transform 0.3s var(--ease); }
.testimonial-dots button.active { background: var(--clay); transform: scale(1.3); }

/* ---- Location ---- */
.location-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.location-list { margin: 1.5em 0; }
.location-list li { padding: 8px 0; font-size: 0.95rem; border-top: 1px solid var(--line); }
.location-list li:last-child { border-bottom: 1px solid var(--line); }
.location-map { aspect-ratio: 4/3.3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.location-map iframe { display: block; width: 100%; height: 100%; }

/* ---- CTA banner ---- */
.cta-banner { background: var(--clay); color: var(--cream); text-align: center; padding: var(--section-pad) var(--gutter); }
.cta-banner h2 { color: var(--cream); }
.cta-banner p { opacity: 0.9; max-width: 460px; margin: 0 auto 1.8em; }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: rgba(246,241,227,0.8); padding: 80px var(--gutter) 28px; }
.footer-grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 54px; border-bottom: 1px solid rgba(246,241,227,0.12); }
.footer-brand p { max-width: 280px; font-size: 0.9rem; }
.logo-footer { font-family: var(--font-display); font-size: 1.3rem; color: var(--cream); margin-bottom: 0.6em; }
.footer-col h4 { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.1em; }
.footer-col a, .footer-col span { display: block; font-size: 0.9rem; margin-bottom: 0.85em; transition: opacity 0.25s var(--ease); }
.footer-col a:hover { opacity: 0.6; }
.footer-base { max-width: var(--container); margin: 0 auto; padding-top: 24px; display: flex; justify-content: space-between; font-size: 0.76rem; opacity: 0.6; }

.to-top { position: fixed; right: 22px; bottom: 92px; width: 44px; height: 44px; border-radius: 50%; background: var(--forest); color: var(--cream); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.35s var(--ease); z-index: 999995; }
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }

.whatsapp-float {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(20,42,29,0.35);
  z-index: 999996;
  transition: transform 0.25s var(--ease);
  /* The icon is a CSS background-image (data URI), not inline HTML
     SVG. Some hosting/security setups strip or mishandle raw <svg>
     markup inside page content, which can leave stray fragments
     (like a hex color value) visible as text. Living entirely in the
     stylesheet sidesteps that risk completely — this can't be
     touched by anything that filters post/page content. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2716%27%20r%3D%2716%27%20fill%3D%27%2325D366%27%2F%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M16%207.3c-4.8%200-8.7%203.9-8.7%208.7%200%201.5.4%203%201.2%204.3l-1.3%204.7%204.8-1.3c1.2.7%202.6%201%204%201%204.8%200%208.7-3.9%208.7-8.7s-3.9-8.7-8.7-8.7zm5.1%2012.3c-.2.6-1.3%201.2-1.8%201.2-.5.1-1%20.1-3.1-.7-2.6-1-4.3-3.7-4.4-3.9-.1-.2-1-1.4-1-2.6%200-1.3.6-1.9.9-2.1.2-.3.5-.3.6-.3h.5c.1%200%20.3%200%20.5.4.2.5.7%201.7.7%201.9.1.1.1.3%200%20.4-.1.2-.1.3-.3.4-.1.2-.3.3-.4.5-.1.1-.3.3-.1.5.1.3.7%201.1%201.5%201.8%201%20.9%201.9%201.2%202.1%201.3.3.1.4.1.6-.1.2-.2.6-.7.8-1%20.2-.3.4-.2.6-.1.2.1%201.5.7%201.8.8.3.1.4.2.5.3.1.2.1.6-.1%201.2z%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 56px 56px;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ================= SCROLL REVEAL ================= */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
  .room-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

@media (max-width: 860px) {
  .main-nav, .header-book { display: none; }
  .nav-toggle { display: flex; }
  .booking-form { grid-template-columns: 1fr 1fr; }
  .field { border-right: none; border-bottom: 1px solid var(--line); }
  .booking-submit { grid-column: 1 / -1; padding: 16px; }
  .about-grid, .specialty-grid, .location-grid { grid-template-columns: 1fr; }
  .specialty-media { order: -1; }
  .menu-grid, .package-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .topbar-msg { font-size: 0.78rem; }
}

@media (max-width: 560px) {
  .room-grid { grid-template-columns: 1fr; }
  .booking-form { grid-template-columns: 1fr; }
  .booking-bar { margin-top: -36px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; gap: 8px; }
  .hero-content { padding-bottom: 84px; }
  .topbar-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}