/* ==========================================================================
   Twin Beans Farm — shared stylesheet
   Single source of truth for every TB Custom page template and the blog
   templates (category-blog.php, single-blog.php). Edit here, not per-page.
   ========================================================================== */

@font-face {
  font-family: "SVN Evergreen";
  src: url("https://twinbeansfarm.com/wp-content/uploads/twinbeans-fonts/svn-evergreen.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "UVN Chu Ky";
  src: url("https://twinbeansfarm.com/wp-content/uploads/twinbeans-fonts/uvn-chu-ky.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iCiel Apercu Pro";
  src: url("https://twinbeansfarm.com/wp-content/uploads/twinbeans-fonts/iciel-apercu-pro-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iCiel Apercu Pro";
  src: url("https://twinbeansfarm.com/wp-content/uploads/twinbeans-fonts/iciel-apercu-pro-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette (converted from the project's oklch tokens) */
  --cream: #F5EDD9;
  --cream-deep: #E8D9B6;
  --pine: #445427;
  --pine-deep: #3F4E1F;
  --coffee: #6B3A1E;
  --coffee-deep: #53230A;
  --herb: #6B7939;
  --earth: #D2571F;
  --clay: #E58B55;
  --ink: #2E190D;

  --font-display: "SVN Evergreen", Georgia, serif;
  --font-expressive: "UVN Chu Ky", "SVN Evergreen", cursive;
  --font-sans: "iCiel Apercu Pro", Arial, sans-serif;

  --max-width: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.tb-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .tb-container { padding: 0 40px; }
}

.tb-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--coffee);
}
.tb-eyebrow--on-dark { color: var(--cream); opacity: .9; }
a.tb-eyebrow { transition: color .2s ease; }
a.tb-eyebrow:hover { color: var(--pine-deep); }
/* Smaller/tighter eyebrow variant for card sub-labels (spec lists, contact details) */
.tb-eyebrow-sm {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--coffee);
}

/* ---------- Buttons ---------- */
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: background-color .2s ease, opacity .2s ease, color .2s ease;
  white-space: nowrap;
}
.tb-btn--primary {
  background: var(--pine-deep);
  color: var(--cream);
}
.tb-btn--primary:hover { background: var(--pine); }
.tb-btn--cream {
  background: var(--cream);
  color: var(--pine-deep);
}
.tb-btn--cream:hover { background: var(--cream-deep); }
.tb-btn--outline {
  border-color: rgba(63,78,31,0.4);
  color: var(--pine-deep);
  background: transparent;
}
.tb-btn--outline:hover { background: rgba(232,217,182,0.5); }
.tb-btn--outline-on-dark {
  border-color: rgba(245,237,217,0.7);
  color: var(--cream);
}
.tb-btn--outline-on-dark:hover { background: rgba(245,237,217,0.1); }
.tb-btn--coffee {
  background: var(--coffee);
  border-color: var(--coffee);
  color: var(--cream);
}
.tb-btn--coffee:hover { opacity: .9; }
.tb-link-arrow { color: var(--coffee); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: gap .2s ease, opacity .2s ease; }
a.tb-link-arrow:hover, .tb-card:hover .tb-link-arrow { gap: 10px; opacity: .8; }

/* ---------- Header / Nav ---------- */
.tb-site-header {
  position: sticky;
  top: 12px;
  z-index: 40;
  margin: 12px 12px 0;
  background: rgba(245,237,217,0.92);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  overflow: hidden; /* clips .tb-mobile-nav's corners to match when it opens */
}
@media (min-width: 768px) { .tb-site-header { margin: 20px 20px 0; } }
@media (min-width: 1360px) {
  .tb-site-header { max-width: calc(var(--max-width) + 40px); margin-left: auto; margin-right: auto; }
}
.tb-site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) { .tb-site-header__inner { padding: 16px 40px; } }
.tb-logo {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--coffee-deep);
  letter-spacing: -0.01em;
  transition: opacity .2s ease;
}
.tb-logo:hover { opacity: .75; }
.tb-main-nav {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: rgba(46,25,13,0.85);
}
@media (min-width: 1024px) { .tb-main-nav { display: flex; } }
.tb-main-nav a { letter-spacing: 0.01em; }
.tb-main-nav a:hover, .tb-main-nav a.tb-is-active { color: var(--pine-deep); }
.tb-main-nav a.tb-is-active { font-weight: 700; }
.tb-header-actions { display: flex; align-items: center; gap: 12px; }
.tb-lang-switch {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(46,25,13,0.7);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color .2s ease;
}
.tb-lang-switch:hover { color: var(--pine-deep); }
@media (min-width: 768px) { .tb-lang-switch { display: inline-flex; } }
.tb-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cream-deep);
  padding: 8px;
  background: transparent;
  color: var(--ink);
  transition: background-color .2s ease;
}
.tb-nav-toggle:hover { background: rgba(232,217,182,0.5); }
@media (min-width: 1024px) { .tb-nav-toggle { display: none; } }
.tb-nav-toggle__icon-close { display: none; }
.tb-nav-toggle.tb-is-open .tb-nav-toggle__icon-open { display: none; }
.tb-nav-toggle.tb-is-open .tb-nav-toggle__icon-close { display: block; }
.tb-mobile-nav {
  display: none;
  border-top: 1px solid var(--cream-deep);
  background: var(--cream);
}
.tb-mobile-nav.tb-is-open { display: block; }
.tb-mobile-nav ul { display: flex; flex-direction: column; padding: 8px 20px 16px; }
.tb-mobile-nav a { padding: 12px 0; border-bottom: 1px solid var(--cream-deep); transition: color .2s ease; }
.tb-mobile-nav a:hover { color: var(--pine-deep); }
@media (min-width: 1024px) { .tb-mobile-nav { display: none !important; } }

/* ---------- Hero (home) ---------- */
/* min-height (not a fixed height) so the box grows to fit its content instead of
   clipping/overflowing it — some mobile browsers compute `vh` inconsistently
   (address-bar collapse/expand), and a fixed-height box has no way to react when
   that makes 88vh shorter than the title+subtitle+CTA actually need. */
.tb-hero {
  position: relative;
  min-height: max(560px, 88vh);
  width: 100%;
  overflow: hidden;
}
/* ~60% of the desktop height — full-viewport-height hero reads as excessive on a
   phone screen, pushing everything else down below the fold. */
@media (max-width: 767px) { .tb-hero { min-height: max(380px, 53vh); } }
.tb-hero__media { position: absolute; inset: 0; }
.tb-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.tb-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(63,78,31,.25), rgba(63,78,31,.15) 45%, rgba(63,78,31,.6));
}
/* position:absolute + inset:0 (not height:100%) — this resolves reliably against
   .tb-hero's own box regardless of whether .tb-hero is sized via `height` or
   `min-height`; a percentage height on a normal-flow child can't (that's what
   silently broke the flex-end bottom-alignment when .tb-hero switched to
   min-height — same fix .tb-page-hero__content already uses, ported here). */
.tb-hero__content {
  position: absolute;
  inset: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 20px 56px;
  color: var(--cream);
}
@media (min-width: 768px) { .tb-hero__content { padding: 0 40px 80px; } }
/* Same scale as .tb-page-hero__title (inner pages) for a consistent look site-wide. */
.tb-hero__title {
  max-width: 760px;
  margin-top: 20px;
  font-family: var(--font-expressive);
  font-size: 34px;
  line-height: 1.08;
}
@media (min-width: 768px) { .tb-hero__title { font-size: 52px; } }
/* Hidden on mobile — with the title alone already filling most of a short phone
   viewport, the subtitle paragraph was the main thing pushing content past the
   hero's available height. */
.tb-hero__sub { display: none; }
@media (min-width: 640px) { .tb-hero__sub { display: block; max-width: 620px; margin-top: 24px; font-size: 17px; opacity: .92; } }
.tb-hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Page hero (inner pages) ---------- */
.tb-page-hero {
  position: relative;
  height: 50vh;
  min-height: 340px;
  width: 100%;
  overflow: hidden;
}
.tb-page-hero__overlay { position: absolute; inset: 0; background: rgba(63,78,31,.45); }
.tb-page-hero__content {
  position: absolute;
  inset: 0;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 20px 48px;
}
@media (min-width: 768px) { .tb-page-hero__content { padding: 0 40px 48px; } }
.tb-page-hero__title {
  max-width: 760px;
  margin-top: 12px;
  font-family: var(--font-expressive);
  font-size: 34px;
  line-height: 1.08;
  color: var(--cream);
}
@media (min-width: 768px) { .tb-page-hero__title { font-size: 52px; } }
/* Smaller page-hero variant (blog single posts: title needs more room to wrap) */
.tb-page-hero--sm { height: 42vh; min-height: 300px; }

/* ---------- Image placeholder (real photos are hosted separately; swap the div for an <img>) ---------- */
.tb-ph {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream-deep), #d8c79c);
  display: flex;
  align-items: flex-end;
}
.tb-ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(63,78,31,0.06) 0 2px, transparent 2px 14px);
}
.tb-ph__label {
  position: relative;
  z-index: 1;
  margin: 14px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--coffee-deep);
  background: rgba(245,237,217,0.85);
  padding: 6px 10px;
}
.tb-ph--hero { height: 100%; }
.tb-ph--45 { aspect-ratio: 4/5; }
.tb-ph--169 { aspect-ratio: 16/9; }
.tb-ph--43 { aspect-ratio: 4/3; }
.tb-ph--54 { aspect-ratio: 5/4; }
.tb-ph--1611 { aspect-ratio: 16/11; }
.tb-ph--square { aspect-ratio: 1/1; }

/* ---------- Sections ---------- */
.tb-section { padding: 72px 0; }
.tb-section--muted { background: rgba(232,217,182,0.4); }
/* Overrides .tb-section's own responsive padding-top (72px/96px) — that's tuned for gaps
   between major visual blocks (hero images, background-color changes); a thin divider line
   reads better with the smaller, already-established 48px rhythm unit on both sides of it. */
.tb-section--divided { border-top: 1px solid var(--cream-deep); padding-top: 48px !important; }
@media (min-width: 768px) { .tb-section { padding: 96px 0; } }
.tb-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.tb-h2 {
  font-family: var(--font-expressive);
  font-size: 34px;
  line-height: 1.1;
  color: var(--pine-deep);
  margin-top: 8px;
}
@media (min-width: 768px) { .tb-h2 { font-size: 46px; } }
/* !important on both: this component sees h2 *and* h3 tags depending on context (see tb-h3--serif
   below), and the blanket "h3,h4,h5,h6 { font-family: font-display !important }" fallback near the
   end of this file would otherwise silently win over a plain (non-important) declaration here
   whenever an h3 tag is used, regardless of which font this component actually asked for. */
.tb-h3 { font-family: var(--font-expressive) !important; font-size: 24px; color: var(--pine-deep); }
.tb-h3--serif { font-family: var(--font-display) !important; }
.tb-h3--lg { font-size: 32px; }
/* Cursive "atmospheric" opening line under a title (stay page room detail sections) —
   promoted from a 3x-repeated inline style so future pages can reuse it as a class */
.tb-lede-serif { font-family: var(--font-expressive); font-size: 20px; color: var(--ink); }
/* Compact bullet list of amenities/inclusions (stay page room detail sections) — same, was
   3x-repeated inline */
.tb-amenity-list { font-size: 14px; color: rgba(46,25,13,0.8); display: grid; gap: 6px; }
.tb-lede { margin-top: 16px; color: rgba(46,25,13,0.8); max-width: 640px; }
.tb-rule { width: 96px; height: 1px; background: rgba(107,121,57,.5); margin: 28px auto; }

/* ---------- Grids & cards ---------- */
.tb-grid { display: grid; gap: 32px; }
.tb-grid-2 { grid-template-columns: 1fr; }
.tb-grid-3 { grid-template-columns: 1fr; }
.tb-grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .tb-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) {
  .tb-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .tb-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) { .tb-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.tb-card { display: block; overflow: hidden; }
.tb-card img { transition: transform .4s ease; }
.tb-card:hover img { transform: scale(1.045); }
/* !important: always an <h3> in practice — see the .tb-h3 comment above for why that needs it */
.tb-card__title { margin-top: 20px; font-family: var(--font-expressive) !important; font-size: 22px; color: var(--pine-deep); transition: color .2s ease; }
.tb-card:hover .tb-card__title { color: var(--coffee); }
.tb-card__meta { margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(46,25,13,0.55); }
.tb-card__body { margin-top: 8px; font-size: 14px; color: rgba(46,25,13,0.75); }
.tb-card__cta { margin-top: 14px; transition: gap .2s ease; }

.tb-pillar svg, .tb-pillar .tb-icon { color: var(--herb); }
/* !important: always an <h3> in practice — see the .tb-h3 comment above for why that needs it */
.tb-pillar__title { margin-top: 16px; font-family: var(--font-expressive) !important; font-size: 20px; color: var(--pine-deep); }
.tb-pillar__body { margin-top: 8px; font-size: 14px; color: rgba(46,25,13,0.75); }
.tb-icon-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--herb); display: inline-block; }

/* ---------- CTA banner ---------- */
.tb-cta-box {
  border: 1px solid rgba(63,78,31,0.15);
  background: rgba(232,217,182,0.3);
  padding: 32px;
}
@media (min-width: 768px) { .tb-cta-box { padding: 56px; } }

/* ---------- Testimonials ---------- */
.tb-testimonial blockquote { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--pine-deep); }
.tb-testimonial cite { display: block; margin-top: 16px; font-style: normal; font-size: 13px; color: rgba(46,25,13,0.6); }

/* ---------- Table (stay comparison) ---------- */
.tb-compare-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.tb-compare-table th {
  border: none !important;
  padding: 14px 12px 14px 0;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(46,25,13,0.6);
  border-bottom: 1px solid rgba(63,78,31,0.25) !important;
}
.tb-compare-table td {
  border: none !important;
  padding: 18px 12px 18px 0;
  border-bottom: 1px solid var(--cream-deep) !important;
  vertical-align: top;
  color: rgba(46,25,13,0.8);
}
.tb-compare-table td:first-child { font-family: var(--font-display); font-size: 18px; color: var(--pine-deep); }
@media (max-width: 767px) { .tb-compare-table--desktop { display: none; } }
@media (min-width: 768px) { .tb-compare-cards { display: none; } }
.tb-compare-card { border: 1px solid var(--cream-deep); padding: 20px; margin-bottom: 20px; }
.tb-compare-card dl { margin-top: 14px; display: grid; gap: 10px; }
.tb-compare-card .tb-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; font-size: 14px; }
.tb-compare-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(46,25,13,0.55); }

/* ---------- Check list ---------- */
.tb-check-list { display: grid; gap: 10px; }
@media (min-width: 640px) { .tb-check-list--2col { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .tb-check-list--3col { grid-template-columns: repeat(3,1fr); } }
.tb-check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(46,25,13,0.8); }
.tb-check { color: var(--herb); flex-shrink: 0; margin-top: 2px; }

/* ---------- FAQ (native details/summary accordion) ---------- */
.tb-faq { border-top: 1px solid var(--cream-deep); }
.tb-faq-item { border-bottom: 1px solid var(--cream-deep); }
.tb-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-family: var(--font-expressive);
  font-size: 18px;
  color: var(--pine-deep);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.tb-faq-item summary::-webkit-details-marker { display: none; }
.tb-faq-item summary::after { content: "+"; font-family: var(--font-sans); font-size: 20px; color: var(--coffee); flex-shrink: 0; }
.tb-faq-item[open] summary::after { content: "−"; }
.tb-faq-item p { padding-bottom: 20px; color: rgba(46,25,13,0.75); max-width: 640px; }

/* ---------- Placeholder note block (mirrors PageShell's <Placeholder>) ---------- */
.tb-wip {
  margin-top: 40px;
  border: 1px dashed var(--cream-deep);
  background: rgba(232,217,182,0.3);
  padding: 24px;
  font-size: 14px;
  color: rgba(46,25,13,0.6);
}

/* ---------- Stay gallery ---------- */
.tb-stay-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tb-stay-gallery .tb-ph:first-child { grid-column: span 3; }
@media (min-width: 640px) {
  .tb-stay-gallery { grid-template-columns: repeat(6, 1fr); }
  .tb-stay-gallery .tb-ph:first-child { grid-column: span 6; }
}

/* ---------- Carousel (single-image slider with arrows + dots, used in room detail sections) ---------- */
/* padding-top trick instead of `aspect-ratio` — see .tb-post-banner for why */
.tb-carousel__viewport { position: relative; width: 100%; height: 0; padding-top: 75%; overflow: hidden; }
.tb-carousel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.tb-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(245,237,217,.9);
  color: var(--pine-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 16px -4px rgba(46,25,13,.3);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.tb-carousel__arrow:hover { background: var(--cream); transform: translateY(-50%) scale(1.06); }
.tb-carousel__arrow--prev { left: 12px; }
.tb-carousel__arrow--next { right: 12px; }
.tb-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.tb-carousel__dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(63,78,31,0.3); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.tb-carousel__dot:hover { background: rgba(63,78,31,0.55); }
.tb-carousel__dot.is-active { background: var(--pine-deep); transform: scale(1.35); }
.tb-carousel__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tb-carousel__thumb { width: 72px; height: 72px; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: .6; overflow: hidden; transition: opacity .2s ease, border-color .2s ease; }
.tb-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-carousel__thumb:hover { opacity: .85; }
.tb-carousel__thumb.is-active { opacity: 1; border-color: var(--pine-deep); }

/* ---------- Two-col media/text ---------- */
.tb-split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 768px) { .tb-split { grid-template-columns: 1fr 1fr; gap: 64px; } }
/* Top-align instead of center — for pairings where the text column runs noticeably longer than the media (e.g. stay page room details), so the media's top edge lines up with the heading instead of floating mid-column */
.tb-split--top { align-items: start; }
.tb-split.tb-reverse .tb-ph { order: -1; }
@media (min-width: 768px) { .tb-split.tb-reverse .tb-ph { order: 0; } }
.tb-split.tb-media-first-desktop .tb-ph { }
@media (min-width: 768px) { .tb-split.tb-media-first-desktop .tb-ph { order: -1; } }

/* ---------- Footer ---------- */
.tb-site-footer {
  margin-top: 96px;
  border-top: 1px solid var(--cream-deep);
  background: var(--cream);
  padding: 64px 20px;
}
@media (min-width: 768px) { .tb-site-footer { padding: 64px 40px; } }
.tb-footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  gap: 48px;
}
@media (min-width: 768px) { .tb-footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.tb-footer-brand { font-family: var(--font-display); font-size: 22px; color: var(--pine-deep); }
.tb-footer-tagline { margin-top: 12px; max-width: 340px; font-size: 14px; color: rgba(46,25,13,0.7); }
.tb-footer-loc { margin-top: 24px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(46,25,13,0.6); }
.tb-footer-col-title { margin-bottom: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(46,25,13,0.6); }
.tb-footer-col ul { display: grid; gap: 8px; font-size: 14px; }
.tb-footer-col ul a { transition: color .2s ease; }
.tb-footer-col ul a:hover { color: var(--pine-deep); }
.tb-footer-bottom {
  max-width: var(--max-width);
  margin: 48px auto 0;
  border-top: 1px solid var(--cream-deep);
  padding-top: 24px;
  font-size: 12px;
  color: rgba(46,25,13,0.55);
}

/* ---------- Booking note (mirrors the on-site booking modal) ---------- */
.tb-booking-note {
  margin-top: 40px;
  border: 1px solid var(--cream-deep);
  padding: 24px;
  background: #fff8;
}
.tb-booking-note ul { margin-top: 12px; display: grid; gap: 8px; font-size: 14px; }
.tb-booking-note li::before { content: "→ "; color: var(--pine); }

/* ---------- Utility ---------- */
.tb-mt-8 { margin-top: 8px; }
.tb-mt-12 { margin-top: 12px; }
.tb-mt-16 { margin-top: 16px; }
.tb-mt-24 { margin-top: 24px; }
.tb-mt-32 { margin-top: 32px; }
.tb-mt-48 { margin-top: 48px; }
.tb-mt-64 { margin-top: 64px; }
.tb-max-w-sm { max-width: 480px; }
.tb-max-w-md { max-width: 640px; }
.tb-max-w-lg { max-width: 760px; }
.tb-max-w-xl { max-width: 860px; }
.tb-center { text-align: center; margin-left: auto; margin-right: auto; }
.tb-body-lg { font-size: 18px; color: rgba(46,25,13,0.8); }
.tb-text-muted { color: rgba(46,25,13,0.75); }
.tb-divider-l { border-left: 2px solid var(--herb); padding-left: 20px; }

/* ---------- Video embeds (real YouTube iframes, ids kept from source) ---------- */
.tb-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--pine-deep);
}
.tb-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tb-video-embed-label {
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(46,25,13,0.6);
}
.tb-fullbleed-video__heading { max-width: 720px; margin: 0 auto 28px; text-align: center; }

/* Suppress the site-wide GTranslate floating widget — these templates have their own EN switcher */
.gtranslate_wrapper { display: none !important; }

/* No underline on hover anywhere — overrides Enfold's global a:hover default */
a, a:hover, a:focus, a:active { text-decoration: none !important; }

/* Hero title: force cream color regardless of any global h1/h2 rule elsewhere on the site */
.tb-hero__title, .tb-hero__content h1, .tb-page-hero__title { color: var(--cream) !important; }

/* ---------- "Ai cũng có thể làm nông" full-bleed band with play button (like the hero) ---------- */
.tb-lifestyle {
  position: relative;
  height: 60vh;
  min-height: 420px;
  width: 100%;
  overflow: hidden;
  background: var(--pine-deep);
}
@media (min-width: 768px) { .tb-lifestyle { height: 80vh; } }
.tb-lifestyle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tb-lifestyle__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.2) 55%, rgba(0,0,0,.3));
}
.tb-lifestyle__content {
  position: relative;
  z-index: 10;
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 20px 64px;
  color: var(--cream);
}
@media (min-width: 768px) { .tb-lifestyle__content { padding: 0 40px 96px; } }
.tb-lifestyle__title {
  max-width: 640px;
  margin-top: 16px;
  font-family: var(--font-expressive);
  font-size: 32px;
  line-height: 1.05;
  color: var(--cream) !important;
}
@media (min-width: 768px) { .tb-lifestyle__title { font-size: 52px; } }
.tb-play-btn {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-play-btn__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(245,237,217,.95);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.tb-play-btn:hover .tb-play-btn__circle { transform: scale(1.06); }

/* ---------- Room cards (stay section): image + specs + description + CTA ---------- */
.tb-room-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cream-deep);
  background: rgba(245,237,217,0.4);
  height: 100%;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.tb-room-card:hover { border-color: rgba(63,78,31,0.3); box-shadow: 0 12px 28px -16px rgba(46,25,13,0.25); }
.tb-room-card img { transition: transform .4s ease; }
.tb-room-card:hover img { transform: scale(1.03); }
.tb-room-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.tb-room-card__cta { margin-top: auto; padding-top: 20px; }
.tb-spec-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.tb-spec-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(46,25,13,0.8); }
.tb-spec-list .tb-icon { color: var(--herb); flex-shrink: 0; margin-top: 2px; }
.tb-room-card .tb-card__body { margin-top: 12px; }

/* ---------- Retreat rows (flexible-day programs): image left, content right, stacked with dividers ---------- */
.tb-retreat-list { border-top: 1px solid var(--cream-deep); }
.tb-retreat-row { display: flex; flex-direction: column; gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--cream-deep); }
@media (min-width: 768px) { .tb-retreat-row { flex-direction: row; align-items: center; gap: 40px; } }
.tb-retreat-row__media { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) { .tb-retreat-row__media { width: 320px; } }
.tb-retreat-row__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.tb-retreat-row__body { flex: 1; }
.tb-retreat-row__body .tb-card__title { margin-top: 10px; font-size: 28px; }
.tb-retreat-row__body .tb-card__body { max-width: 640px; }

/* ---------- Pagination (blog archive) ---------- */
.tb-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }
.tb-pagination a, .tb-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 8px 12px;
  border: 1px solid var(--cream-deep);
  font-size: 14px; color: var(--pine-deep);
}
.tb-pagination a:hover { background: rgba(232,217,182,0.5); }
.tb-pagination span.current { background: var(--pine-deep); color: var(--cream); border-color: var(--pine-deep); }
.tb-pagination span.dots { border-color: transparent; color: rgba(46,25,13,0.5); }
.tb-empty { padding: 48px 0; color: rgba(46,25,13,0.65); }

/* ---------- Blog post body (single.php: rendered Avia builder content) ---------- */
.tb-post-body { max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: rgba(46,25,13,0.85); display: flow-root; text-align: justify; text-justify: inter-word; }
/* Neutralize Avia Builder's own section/container chrome (also used by .tb-content on generic pages) so it blends into the page instead of showing its own white background/borders */
.tb-post-body .avia-section, .tb-post-body .av_textblock_section, .tb-post-body .container_wrap,
.tb-content .avia-section, .tb-content .av_textblock_section, .tb-content .container_wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tb-post-body .container, .tb-content .container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.tb-post-body .avia_textblock, .tb-content .avia_textblock { font-size: inherit; color: inherit; }
.tb-post-body .avia_textblock div, .tb-content .avia_textblock div { margin-bottom: 20px; }
.tb-post-body .av-special-heading, .tb-content .av-special-heading { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 24px !important; }
/* !important: the shortcode author picks the rendered tag per post (h1–h6, editor's choice), so
   this can land on any of them — see the .tb-h3 comment above for why that needs it */
.tb-post-body .av-special-heading-tag, .tb-content .av-special-heading-tag { font-family: var(--font-expressive) !important; color: var(--pine-deep); font-size: 30px; }
/* Avia's multi-column shortcodes (av_one_half etc.) rely on Enfold's own grid CSS for their
   table-cell/float widths — collapse any that survive content cleanup into a single full-width
   column instead of a half-width block floating oddly next to empty space. Builder columns also
   often carry their own inline background/padding/shadow (a "card" look) — flatten those too so
   the content reads as plain flowing text, same as the rest of a blog post body. */
.tb-post-body .flex_column_table, .tb-content .flex_column_table { display: block !important; width: 100% !important; }
.tb-post-body .flex_column, .tb-content .flex_column {
  display: block !important; width: 100% !important; float: none !important;
  background: transparent !important; box-shadow: none !important; padding: 0 !important; border: none !important;
}
.tb-post-body p { margin-bottom: 20px; }
.tb-post-body h2 { font-family: var(--font-expressive); font-size: 30px; color: var(--pine-deep); margin: 40px 0 16px; text-align: left; }
.tb-post-body h3 { font-family: var(--font-display); font-size: 22px; color: var(--pine-deep); margin: 32px 0 12px; text-align: left; }
.tb-post-body img { margin: 24px 0; }
.tb-post-body a { color: var(--coffee); text-decoration: underline !important; text-underline-offset: 2px; }
.tb-post-body ul, .tb-post-body ol { margin: 0 0 20px 24px; list-style: revert; text-align: left; }
.tb-post-body blockquote { margin: 32px 0; padding-left: 20px; border-left: 2px solid var(--herb); font-family: var(--font-display); font-size: 19px; text-align: left; color: var(--pine-deep); }
/* First paragraph reads as a lede: larger, not justified so the ragged edge doesn't look like a mistake */
.tb-post-body .avia_textblock > div:first-child { font-size: 20px; line-height: 1.6; color: var(--ink); text-align: left; }

/* Hero banner + simple centered title block below (plain flow, no card/overlap — the earlier card-with-shadow treatment read as cluttered) */
/* padding-top percentage trick instead of `aspect-ratio` — some browsers/webviews render the
   featured-image band as a barely-there sliver when `aspect-ratio` isn't honored on this element,
   this old technique has no such dependency */
.tb-post-banner { position: relative; width: 100%; height: 0; padding-top: 42.857%; overflow: hidden; }
.tb-post-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; margin: 0; }
.tb-post-header { max-width: 760px; margin: 0 auto; text-align: center; }
.tb-post-header .tb-h2 { margin-top: 10px; }
.tb-post-header__meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(46,25,13,0.55); }
.tb-post-header__meta .tb-dot { opacity: 0.5; }

.tb-post-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 760px; margin: 48px auto 0; }
@media (min-width: 640px) { .tb-post-gallery { grid-template-columns: repeat(3, 1fr); } }
.tb-post-gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; margin: 0; }
.tb-post-gallery a { display: block; cursor: zoom-in; }
.tb-post-gallery a:hover img { opacity: 0.85; }

/* ---------- Lightbox (click-to-enlarge for .tb-post-gallery) ---------- */
.tb-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(46,25,13,0.94);
  display: none;
  align-items: center; justify-content: center;
  padding: 56px;
}
.tb-lightbox.tb-is-open { display: flex; }
.tb-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 24px 64px rgba(0,0,0,.5); cursor: zoom-out; }
.tb-lightbox__close, .tb-lightbox__prev, .tb-lightbox__next {
  position: absolute;
  background: transparent; border: none;
  color: var(--cream); opacity: .85;
  font-size: 28px; line-height: 1; cursor: pointer;
  padding: 14px;
}
.tb-lightbox__close:hover, .tb-lightbox__prev:hover, .tb-lightbox__next:hover { opacity: 1; }
.tb-lightbox__close { top: 12px; right: 16px; }
.tb-lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); font-size: 40px; }
.tb-lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); font-size: 40px; }
@media (max-width: 640px) {
  .tb-lightbox { padding: 16px; }
  .tb-lightbox__prev, .tb-lightbox__next { font-size: 28px; padding: 10px; }
}

/* Related posts */
.tb-related { border-top: 1px solid var(--cream-deep); margin-top: 72px; padding-top: 56px; }

/* Prev/next nav with thumbnails */
.tb-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto; }
.tb-post-nav__item { display: flex; align-items: center; gap: 16px; border: 1px solid var(--cream-deep); padding: 16px; transition: border-color .2s ease, background-color .2s ease; }
.tb-post-nav__item:hover { border-color: rgba(63,78,31,0.3); background: rgba(232,217,182,0.3); }
.tb-post-nav__item:hover .tb-post-nav__title { color: var(--coffee); }
.tb-post-nav__item .tb-post-nav__title { transition: color .2s ease; }
.tb-post-nav__item img { width: 76px; height: 76px; object-fit: cover; flex-shrink: 0; margin: 0; }
.tb-post-nav__item .tb-post-nav__dir { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(46,25,13,0.55); display: block; margin-bottom: 4px; }
.tb-post-nav__item .tb-post-nav__title { font-family: var(--font-expressive); font-size: 17px; color: var(--pine-deep); }
.tb-post-nav__item--next { grid-column: 2; text-align: right; }
.tb-post-nav__item--next { flex-direction: row-reverse; }
@media (max-width: 640px) { .tb-post-nav { grid-template-columns: 1fr; } .tb-post-nav__item--next { grid-column: 1; } }

/* ---------- Contact page ---------- */
.tb-contact-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .tb-contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.tb-contact-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--cream-deep); }
.tb-contact-item svg { color: var(--herb); flex-shrink: 0; margin-top: 2px; }
.tb-contact-item__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--coffee); }
.tb-contact-item__value { margin-top: 6px; font-size: 16px; color: rgba(46,25,13,0.85); }
.tb-contact-item__value a { transition: color .2s ease; }
.tb-contact-item__value a:hover { color: var(--coffee); }
.tb-form-field { display: grid; gap: 8px; margin-bottom: 20px; }
.tb-form-field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(46,25,13,0.6); }
.tb-form-field input, .tb-form-field textarea, .tb-form-field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--cream-deep);
  background: #fff8; color: var(--ink); font-size: 15px; font-family: var(--font-sans);
}
.tb-form-field input:focus, .tb-form-field textarea:focus, .tb-form-field select:focus {
  outline: none; border-color: var(--pine);
}
.tb-form-field textarea { resize: vertical; min-height: 120px; }
/* padding-top trick instead of `aspect-ratio` — see .tb-post-banner for why */
.tb-map-embed { position: relative; width: 100%; height: 0; padding-top: 62.5%; border: 1px solid var(--cream-deep); overflow: hidden; }
.tb-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Generic content page (page-tb-generic.php: default the_content()) ---------- */
.tb-content { max-width: 820px; margin: 0 auto; font-size: 17px; color: rgba(46,25,13,0.85); }
.tb-content h1, .tb-content h2 { font-family: var(--font-expressive); font-size: 30px; color: var(--pine-deep); margin: 40px 0 16px; }
.tb-content h1:first-child, .tb-content h2:first-child { margin-top: 0; }
.tb-content h3 { font-family: var(--font-display); font-size: 22px; color: var(--pine-deep); margin: 32px 0 12px; }
.tb-content p { margin-bottom: 20px; }
.tb-content img { margin: 24px 0; }
.tb-content a { color: var(--coffee); text-decoration: underline !important; text-underline-offset: 2px; }
.tb-content ul, .tb-content ol { margin: 0 0 20px 24px; list-style: revert; }

/* ---------- Shop (archive-product.php, taxonomy-product_cat.php) ---------- */
.tb-shop-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.tb-shop-filters a {
  display: inline-flex; align-items: center; padding: 10px 20px;
  border: 1px solid rgba(63,78,31,0.3); font-size: 14px; color: var(--pine-deep);
  transition: background-color .2s ease, color .2s ease;
}
.tb-shop-filters a:hover { background: rgba(232,217,182,0.5); }
.tb-shop-filters a.is-active { background: var(--pine-deep); border-color: var(--pine-deep); color: var(--cream); }

.tb-product-card { display: block; overflow: hidden; }
.tb-product-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .4s ease; }
.tb-product-card:hover img { transform: scale(1.045); }
.tb-product-card__title { margin-top: 16px; font-family: var(--font-expressive); font-size: 19px; color: var(--pine-deep); transition: color .2s ease; }
.tb-product-card:hover .tb-product-card__title { color: var(--coffee); }
.tb-product-card__price { margin-top: 6px; font-size: 14px; color: rgba(46,25,13,0.75); }
.tb-product-card__price .woocommerce-Price-amount { font-family: var(--font-sans); }

.tb-empty-shop { padding: 48px 0; color: rgba(46,25,13,0.65); }

/* ---------- Single product (single-product.php) ---------- */
.tb-product-detail { display: grid; gap: 40px; }
@media (min-width: 900px) { .tb-product-detail { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.tb-product-gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.tb-product-info__price { margin-top: 16px; font-family: var(--font-display); font-size: 26px; color: var(--coffee); }
.tb-product-info__price .woocommerce-Price-amount { font-family: var(--font-display); }
.tb-product-info__price ins { text-decoration: none; }
.tb-product-info__price del { opacity: 0.5; font-size: 0.7em; margin-right: 8px; }
.tb-product-info .stock { display: inline-block; margin-top: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--herb); }
.tb-product-info .stock.out-of-stock { color: var(--earth); }

.tb-product-info form.cart { margin-top: 28px; }
.tb-product-info table.variations { display: block; width: 100%; margin-bottom: 20px; }
.tb-product-info table.variations tbody { display: block; width: 100%; }
.tb-product-info table.variations tr { display: flex; flex-direction: column; width: 100%; margin-bottom: 16px; padding: 0; border: none; }
.tb-product-info table.variations th, .tb-product-info table.variations td { display: block; width: 100%; padding: 0; border: none; }
.tb-product-info table.variations label { display: block; margin-bottom: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(46,25,13,0.6); }
.tb-product-info table.variations select {
  display: block; width: 100%; max-width: 320px; padding: 12px 14px; border: 1px solid var(--cream-deep);
  background: #fff8; color: var(--ink); font-size: 15px; font-family: var(--font-sans);
}
.tb-product-info .woocommerce-variation-add-to-cart,
.tb-product-info .quantity { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tb-product-info .quantity { margin-bottom: 0; }
.tb-product-info .quantity .qty {
  width: 84px; padding: 12px 14px; border: 1px solid var(--cream-deep);
  background: #fff8; color: var(--ink); font-size: 15px; font-family: var(--font-sans);
}
.tb-product-info button.single_add_to_cart_button,
.tb-product-info button.wc-variation-selection-needed {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border: none; background: var(--pine-deep); color: var(--cream);
  font-size: 14px; letter-spacing: 0.02em; cursor: pointer; transition: background-color .2s ease;
}
.tb-product-info button.single_add_to_cart_button:hover { background: var(--pine); }
.tb-product-info button.single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; }
.tb-product-info .woocommerce-variation-description p { font-size: 14px; color: rgba(46,25,13,0.75); margin-top: 12px; }
.tb-product-info .woocommerce-variation-price { margin-top: 12px; font-family: var(--font-display); font-size: 22px; color: var(--coffee); }
.tb-product-info p.woocommerce-variation-availability { margin-top: 8px; }

.tb-related-products { margin-top: 96px; }

/* Force brand body font everywhere — overrides Enfold's own body font-family (loaded later via wp_head, wins ties without !important) */
body, p, li, span, a, div, input, textarea, select, button,
.tb-btn, .tb-eyebrow, .tb-eyebrow-sm, .tb-spec-list li {
  font-family: var(--font-sans) !important;
}
h1, h2 { font-family: var(--font-expressive) !important; }
h3, h4, h5, h6 { font-family: var(--font-display) !important; }