:root {
  /* Brand colors */
  --color-linen: #f2e9dc;      /* sand / light section bg */
  --color-cerulean: #2c6e91;   /* ocean blue – headings/primary */
  --color-sky-blue: #8fc9df;   /* highlights / hovers */
  --color-white: #ffffff;
  --color-jet: #2b2b2b;        /* body text */
  --color-fern-green: #4a7856; /* subtle secondary accent */
  --color-dim-gray: #707070;   /* muted borders, meta text */

  /* Optional: legacy aliases so old classes keep working */
  --color-beige: var(--color-linen);
  --color-indigo-dye: var(--color-cerulean);
  --color-harvest-gold: var(--color-fern-green); /* pick your preferred map */

  /* Fluid type scale */
  --fs-h1: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.05rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 0.95rem + 1.5vw, 2rem);
  --fs-h4: clamp(1.25rem, 0.90rem + 1vw, 1.5rem)!important;
  --fs-h5: clamp(1.125rem, 0.85rem + 0.75vw, 1.25rem);
  --fs-h6: clamp(1rem, 0.80rem + 0.5vw, 1.125rem);
  --fs-p:  clamp(1rem, 0.95rem + 0.30vw, 1.1rem);

  --lh-tight: 1.15;
  --lh-head:  1.2;
  --lh-body:  1.6;
  --sp-vert:  0.6em;

  --radius: .75rem;
  --focus: 0 0 0 3px rgba(140,201,223,.45);
}

/* Base element typography */
h1, h2, h3, h4, h5, h6, p { margin: 0 0 var(--sp-vert); }
p  { color: var(--color-jet); font-size: var(--fs-p);  line-height: var(--lh-body); }
h1 { color: var(--color-cerulean); font-size: var(--fs-h1); line-height: var(--lh-head); }
h2 { color: var(--color-cerulean); font-size: var(--fs-h2); line-height: var(--lh-head); }
h3 { color: var(--color-cerulean); font-size: var(--fs-h3); line-height: var(--lh-head); }
h4 { color: var(--color-cerulean); font-size: var(--fs-h4); line-height: var(--lh-head); }
h5 { color: var(--color-cerulean); font-size: var(--fs-h5); line-height: var(--lh-head); }
h6 { color: var(--color-cerulean); font-size: var(--fs-h6); line-height: var(--lh-tight); letter-spacing:.02em; }

/* Links 
a { color: var(--color-cerulean); text-decoration: none; }
a:hover, a:focus { color: var(--color-sky-blue); text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--focus); border-radius: .2rem; }*/

/* ----------------------------
   BEM-ish Utilities
   ---------------------------- */

/* Font-size utilities */
.typography__h1 { font-size: var(--fs-h1); line-height: var(--lh-head); }
.typography__h2 { font-size: var(--fs-h2); line-height: var(--lh-head); }
.typography__h3 { font-size: var(--fs-h3); line-height: var(--lh-head); }
.typography__h4 { font-size: var(--fs-h4); line-height: var(--lh-head); }
.typography__h5 { font-size: var(--fs-h5); line-height: var(--lh-head); }
.typography__h6 { font-size: var(--fs-h6); line-height: var(--lh-tight); }
.typography__p  { font-size: var(--fs-p);  line-height: var(--lh-body); }

/* Font-weight utilities */
.fw--300 { font-weight: 300; }
.fw--400 { font-weight: 400; }
.fw--700 { font-weight: 700; }
.fw--800 { font-weight: 800; }
.fw--900 { font-weight: 900; }

/* Text color utilities (NEW names) */
.text--linen      { color: var(--color-linen); }
.text--cerulean   { color: var(--color-cerulean); }
.text--sky-blue   { color: var(--color-sky-blue); }
.text--white      { color: var(--color-white); }
.text--jet        { color: var(--color-jet); }
.text--fern-green { color: var(--color-fern-green); }
.text--dim-gray   { color: var(--color-dim-gray); }

/* Background color utilities (NEW names) */
.bg--linen      { background-color: var(--color-linen); }
.bg--cerulean   { background-color: var(--color-cerulean); }
.bg--sky-blue   { background-color: var(--color-sky-blue); }
.bg--white      { background-color: var(--color-white); }
.bg--jet        { background-color: var(--color-jet); }
.bg--fern-green { background-color: var(--color-fern-green); }
.bg--dim-gray   { background-color: var(--color-dim-gray); }

/* Border color utilities (1px solid) */
.border--linen      { border:1px solid var(--color-linen); }
.border--cerulean   { border:1px solid var(--color-cerulean); }
.border--sky-blue   { border:1px solid var(--color-sky-blue); }
.border--white      { border:1px solid var(--color-white); }
.border--jet        { border:1px solid var(--color-jet); }
.border--fern-green { border:1px solid var(--color-fern-green); }
.border--dim-gray   { border:1px solid var(--color-dim-gray); }

/* Only border-color (no width/style) */
.border-color--linen      { border-color: var(--color-linen); }
.border-color--cerulean   { border-color: var(--color-cerulean); }
.border-color--sky-blue   { border-color: var(--color-sky-blue); }
.border-color--white      { border-color: var(--color-white); }
.border-color--jet        { border-color: var(--color-jet); }
.border-color--fern-green { border-color: var(--color-fern-green); }
.border-color--dim-gray   { border-color: var(--color-dim-gray); }

/* --- Opinionated components you’ll likely need --- */

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.7em 1.1em; border-radius: var(--radius);
  font-weight:700; line-height:1; border:1px solid transparent;
  transition: transform .02s ease-in, box-shadow .2s ease;
}
.btn:focus-visible { outline:none; box-shadow: var(--focus); }
.btn--primary { background: var(--color-cerulean); color: var(--color-white); }
.btn--primary:hover { background: var(--color-sky-blue); }
.btn--outline  { background: transparent; color: var(--color-cerulean); border-color: var(--color-cerulean); }
.btn--outline:hover { color: var(--color-white); background: var(--color-cerulean); }

/* Cards (rooms, etc.) */
.card {
  background: var(--color-white);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Footer */
.site-footer { background: var(--color-jet); color: var(--color-white); }
.site-footer a { color: var(--color-sky-blue); }
.site-footer a:hover { color: var(--color-white); }

/* menu css */
.main-menu ul.level_2 {
  margin-top: 1.2rem!important;
}

/* main hero gradient */
main-hero {
  background: linear-gradient(rgba(44,110,145,.55), rgba(44,110,145,.25));
}

/* HBook CSS */
h3.hb-title-search-form {
    display: none!important;
}

.hb-accom-page-one-result,
.hb-resa-summary {
    margin-top: 2rem!important;
}

.hb-availability-calendar-centered {
    margin-left: 0!important;
}

.hb-search-fields-and-submit label {
    font-weight: 700;
    color: var(--color-cerulean);
}

h3.hb-title {
  font-size: var(--fs-h4)!important;
  font-family: playfair-display;
  font-weight: 700;
}

h3.hb-title-select {
  margin-bottom: 1.2rem;
}

/* accommodation pages */

span.my-starting-from-price,
span.sub-title-text {
  color: var(--color-white);
  font-weight: 700;
}

span.my-starting-from-price-front-page {
  color: var(--color-beige);
  font-weight: 700;
}

/* Base list */
.room-features {
  list-style: none;
  margin: 0;
  padding: 0;
  column-gap: 2rem;           /* space between columns */
}

/* Items */
.room-features li {
  position: relative;
  padding-left: 1.25rem;      /* space for custom bullet */
  margin: 0 0 .5rem 0;
  line-height: 1.45;
  break-inside: avoid;        /* keep items intact per column */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.room-features li::before {
  content: "✿";  /* or "❀" / "❁" / "✾" */
  position: absolute;
  left: 0;
  top: 0; /* adjust until perfectly aligned */
  font-size: 1rem;
  color: var(--color-fern-green); /* pick your accent */
}

.room-features li:hover::before {
  color: var(--color-cerulean, #2c6e91);
}

.room-features li::before {
  transition: transform 0.3s ease;
}
.room-features li:hover::before {
  transform: rotate(20deg);
}

/* Smartphone: 1 column */
@media (max-width: 599px) {
  .room-features { column-count: 1; }
}

/* Tablet: 2 columns */
@media (min-width: 600px) and (max-width: 1379px) {
  .room-features { column-count: 2; }
}

/* Laptop and bigger: 3 columns */
@media (min-width: 1380px) {
  .room-features { column-count: 3; }
}

/* Card container */
.w-grid-item .accommodation-card {
  position: relative;
  border-radius: var(--radius, .75rem);
  overflow: hidden;
}

/* Image zoom only */
.w-grid-item .accommodation-card .post_image img {
  transition: transform .6s ease;
  will-change: transform;
}
.w-grid-item .accommodation-card:hover .post_image img {
  transform: scale(1.08);
}

/* TEXT WRAPPER (your usg_vwrapper_2) */
.w-grid-item .accommodation-card .usg_vwrapper_2 {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.2rem 1.2rem;
  color: var(--color-white);
  z-index: 2;
}

/* Gradient scrim behind text */
.w-grid-item .accommodation-card .usg_vwrapper_2::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.35) 50%,
    rgba(0,0,0,.00) 100%
  );
  z-index: -1;
}

/* Title */
.accoommodation-title {
  color: var(--color-white);
  font-size: var(--fs-h4);
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.accoommodation-title a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}
.accoommodation-title a:hover {
  color: var(--color-sky-blue);
}

/* Sub text (price) */
.accommodation-sub-text {
  color: var(--color-white);
  font-size: var(--fs-p);
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  opacity: .95;
}

/* "Discover" link */
.accommodation-button-text a {
  color: var(--color-white);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  transition: transform .25s ease, color .25s ease;
}
.accommodation-button-text a:hover {
  color: var(--color-sky-blue);
  transform: translateX(4px);
}

/* booking form */
.hb-booking-details-form {
    margin-top: 0.6rem!important;
}

.hb-select-accom-wrapper {
  margin-bottom: 1rem!important;
}

/* homepage paragraph text */
.home-text-box {
  /* Base styles for the text container */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  line-height: 1.6;
  color: #333;
}

/* Desktop and laptop styles (above 1024px) */
@media (min-width: 1025px) {
  .home-text-box {
    column-count: 2;
    column-gap: 40px;
    column-rule: 1px solid #ddd; /* Optional: adds a line between columns */
  }
}

/* Tablet and mobile styles (1024px and below) */
@media (max-width: 1024px) {
  .home-text-box {
    column-count: 1;
    padding: 15px;
  }
}

/* Optional: Prevent awkward breaks in paragraphs */
.home-text-box p {
  break-inside: avoid;
  margin-bottom: 1em;
}

.homepage-intro-text {
  font-size: var(--fs-h5);
  line-height: var(--lh-head);
  font-family: playfair-display;
  font-weight: 700;
  color: var(--color-white);
}

/* palika menu */
/************************************************************
 Palika Sun House — Menu CSS (scoped)
 Paste this whole file. It only styles markup inside .menu
*************************************************************/

/* ---------- Wrapper ---------- */
.menu {}

/* ---------- Section spacing & title ---------- */
.menu .menu-section {
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  /* border-bottom: 1px solid rgba(0,0,0,.08); */
}
.menu .menu-section:last-of-type {
  margin-bottom: 0;
  border-bottom: none;
}
.menu .menu-section__title {
  color: var(--color-fern-green);
  font-weight: 800;
  margin: 0 0 1rem 0;
  /* border-bottom: 3px solid var(--color-cerulean);*/
  display: block;
  text-align: center;
  padding-bottom: .2rem;
  font-family: playfair-display;
}

/* ---------- Grid (3/2/1) ---------- */
.menu .menu-grid {
  display: grid;
  gap: 1rem 2rem;                 /* row gap / column gap */
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;             /* needed for the column dividers */
}

/* Desktop: 2 columns */
@media (min-width: 1025px) {
  .menu .menu-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .menu .menu-grid::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0,0,0,.12);
    pointer-events: none;
    z-index: 0;
  }
  .menu .menu-grid::after { display: none; }
}

/* Tablet: 2 columns + one full-height divider */
@media (min-width: 600px) and (max-width: 1024px) {
  .menu .menu-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .menu .menu-grid::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    background: rgba(0,0,0,.12);
    pointer-events: none;
    z-index: 0;
  }
  .menu .menu-grid::after { display: none; }
}

/* Mobile: 1 column, no dividers */
@media (max-width: 600px) {
  .menu .menu-grid {
    grid-template-columns: 1fr;
  }
  .menu .menu-grid::before,
  .menu .menu-grid::after { display: none; }
}

/* ---------- Each menu entry ---------- */
.menu .menu-entry {
  position: relative;
  padding-left: 1.6rem;           /* space for the ✿ marker */
  z-index: 1;                     /* above the divider lines */
}

/* ✿ marker (replace native bullets) */
.menu .menu-entry::before {
  content: "✿";
  position: absolute;
  left: 0; top: .25rem;
  font-size: 1rem; line-height: 1;
  color: var(--color-fern-green);   /* try var(--color-fern-green) if you prefer */
  opacity: .95;
  transition: transform .15s ease, opacity .15s ease;
}
.menu .menu-entry:hover::before {
  transform: rotate(12deg) scale(1.05);
  opacity: 1;
  color: var(--color-cerulean);
}

/* ---------- Title–leaders–price row ---------- */
.menu .menu-item__row {
  display: flex;
  align-items: baseline;          /* aligns price with title baseline */
  gap: .5rem;
}

/* Title (left) */
.menu .menu-item__title {
  order: 0;
  flex: 0 1 auto;
  color: var(--color-jet);
  font-weight: 700;
}

/* Leader (dots between title & price) */
.menu .menu-item__row::before {
  content: "";
  order: 1;
  flex: 1 1 auto;                 /* fills remaining space */
  border-bottom: 1px dotted rgba(0,0,0,.28);
  margin: 0 .5rem .25em .5rem;    /* .25em drops line to near baseline */
}

/* Price (right) */
.menu .menu-item__price {
  order: 2;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 800;
  color: var(--color-cerulean);
}
.menu .menu-item__price::before {
  content: "THB ";
  font-weight: 400;
  margin-right: .15rem;
}

/* ---------- Optional description (post content) ---------- */
.menu .menu-item__desc {
  margin: .25rem 0 0;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--color-dim-gray);
  font-style: italic;
}

/* ---------- Optional image support ---------- */
.menu .menu-item__media {
  margin-bottom: .5rem;
}
.menu .menu-item__thumb {
  width: 100%;
  height: auto;
  border-radius: .5rem;
  display: block;
}

/* ---------- Accessibility niceties (optional) ---------- */
@media (prefers-reduced-motion: reduce) {
  .menu .menu-entry::before { transition: none; }
}

/* book now page */
/* BOOKING HIGHLIGHTS CLEAN CHECKMARKS */

/* Make sure wrapper stays centered */
.booking-highlights {
  max-width: min(60%, 860px);
  margin: 2.5rem auto 3rem;
  text-align: center;
}

/* Title */
.booking-highlights-title {
  margin: 0 0 1rem;
  color: var(--color-cerulean);
  font-weight: 700;
  font-family: playfair-display;
}

/* Checklist */
.booking-highlights-list {
  list-style: none;
  padding: 0;
  margin: 1rem auto 1.5rem;
  text-align: left;
  display: inline-block;
  max-width: 40rem;
}

.booking-highlights-list li {
  position: relative;
  padding-left: 1.6rem; /* room for check */
  margin: .45rem 0;
  line-height: 1.45;
  color: var(--color-jet);
  font-size: 1rem;
  transition: color 0.25s ease, transform 0.25s ease;
  cursor: default;
}

.booking-highlights-list i {
  color: var(--color-cerulean);
  margin-right: .6rem;
  transition: color 0.25s ease;
}

/* Hover effect: slightly lift + color accent */
.booking-highlights-list li:hover {
  color: var(--color-cerulean);
  transform: translateX(4px); /* subtle shift to the right */
}

.booking-highlights-list li:hover i {
  color: var(--color-fern-green);
}

/* Closing text */
.booking-highlights-text p {
  margin: 1.25rem auto 0;
  max-width: 40rem;
  color: var(--color-jet);
  opacity: .9;
  font-size: 1rem;
  line-height: 1.5;
}

/* Responsive: full width on tablet & below */
@media (max-width: 1024px) {
  .booking-highlights {
    max-width: 100%;
    padding: 0 1rem;
  }
}

/* footer css */
.general-footer-title {
  font-size: var(--fs-h5);
  line-height: var(--lh-head);
  font-weight: 700;
  font-family: playfair-display;
}

.social-icons-footer .w-socials-item-link {
    background: var(--color-sky-blue)!important;
}

/* WPML Language Switcher */
.lang-switcher {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.lang-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-cerulean);
  color: var(--color-cerulean);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.lang-circle:hover {
  background-color: var(--color-sky-blue);
  color: var(--color-white);
}

.lang-circle.active {
  background-color: var(--color-cerulean);
  color: var(--color-linen);
}

/* booking conditions & privacy policy */
.booking-conditions-text .condition-section {
  display: block;
  margin: 1.5rem 0 0.5rem 0;
  font-size: var(--h5-font-size);
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

.booking-conditions-text .bc-point {
  display: inline-block;
  line-height: 1.6;
}

.booking-conditions-text .condition-section {
  display: block;
  margin: 1.5rem 0 0.5rem 0;
  font-size: var(--h5-font-size);
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}

.booking-conditions-text .bc-point {
  display: block;
  line-height: 1.6;
}