/* ============================================================
   Hlalithwa theme — Yende framework, Hlalithwa identity.

   The framework in ./framework/ is Yende's, copied unchanged so it
   can be re-synced when Yende improves. Everything that makes the
   site Hlalithwa rather than Yende lives here.

   The framework drives almost all of its colour from a small token
   set, so remapping those tokens rethemes the whole system: the
   industrial red/ink/paper becomes boutique gold/bronze/cream.

   Accent rule: gold (#d0a23a) is a FILL colour — as text on cream it
   measures 1.9:1. Bronze (#8c6422) is the TEXT accent at 5.3:1 on
   white. The framework uses --red for both, so --red is bronze and
   the gold fills are set explicitly below.
   ============================================================ */

:root {
  /* --- framework tokens, retargeted to the Hlalithwa palette --- */
  --ink: #231f19;
  --ink-2: #302419;
  --paper: #fbf8f1;
  --muted: #f5efe2;
  --line: #e7dcc9;
  --red: #8c6422;          /* accent used as TEXT: bronze, 5.3:1 on white */
  --red-dark: #6d4d16;
  --white: #fff;
  --text: #3a332a;
  --soft-text: #6f665b;
  --max: 1180px;
  --shadow: 0 20px 60px rgb(35 31 25 / 12%);

  /* foundation tokens */
  --header-h: 84px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --surface: #ffffff;
  --surface-dark: #231f19;
  --soft-shadow: 0 22px 70px rgb(35 31 25 / 16%);

  /* --- Hlalithwa-specific --- */
  --gold: #d0a23a;
  --gold-soft: #f0db9a;
  --gold-grad: linear-gradient(135deg, #d8ad48, #f0d77e);
  --bronze: #8c6422;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Typography -------------------------------------------------------
   Yende is an all-sans industrial voice. Hlalithwa is hospitality: a
   serif display face over the same sans body. */
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--text);
}
h1, h2, h3,
.page-title,
.hero h1,
.page-hero h1,
.section-heading h2,
.wf-hero-title,
.wf-innovation-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;   /* the framework uppercases headings; hospitality does not */
}
.page-title,
.wf-hero-title {
  text-transform: none;
  letter-spacing: -0.02em;
}
.eyebrow,
.kicker {
  font-family: var(--font-sans);
  color: var(--bronze);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Accent fills -----------------------------------------------------
   --red carries the text accent. Anything the framework fills with the
   accent takes the gold gradient with dark ink on top instead. */
.btn,
.button-primary,
.nav-cta,
.wf-banner--red {
  background: var(--gold-grad) !important;
  color: #2a1c08 !important;
  border-color: rgba(154, 108, 25, 0.32) !important;
  box-shadow: 0 10px 24px rgb(154 108 25 / 22%);
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 700;
}
.btn:hover,
.button-primary:hover,
.nav-cta:hover {
  filter: brightness(1.04);
  color: #2a1c08 !important;
}
.wf-hero-dot.is-active,
.wf-num,
.why-grid span,
.value-grid article > span {
  background: var(--ink);
  color: var(--gold-soft);
}

/* --- Dark surfaces ----------------------------------------------------
   Yende's dark modules are near-black; Hlalithwa's are warm brown. */
.wf-dark-module,
.wf-banner--dark,
.section-dark,
.cta-inner,
.services-menu .featured-service {
  background: linear-gradient(145deg, #231f19, #302419);
  color: #fffaf0;
}
.wf-dark-module h3,
.cta-inner h2,
.cta-inner h3 { color: #fffaf0; }
.wf-dark-module p,
.cta-inner p { color: rgba(255, 248, 235, 0.82); }
.site-footer,
.footer {
  background: linear-gradient(145deg, #231f19, #302419);
  color: #fffaf0;
}

/* --- Header -----------------------------------------------------------
   Yende's chrome is white; Hlalithwa's is the dark warm bar the brand
   already uses, with the logo tile reading against it. */
.site-header,
.site-header.scrolled {
  background: rgba(30, 24, 18, 0.94);
  border-bottom: 1px solid rgba(240, 219, 154, 0.18);
  box-shadow: 0 10px 34px rgb(18 12 6 / 18%);
  backdrop-filter: blur(14px) saturate(1.1);
}
.primary-nav,
.nav-link,
.primary-nav > a,
.nav-dropdown-toggle { color: rgba(255, 250, 239, 0.86); }
.nav-link:hover,
.primary-nav > a:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown:focus-within .nav-dropdown-toggle {
  color: #fffaf0;
  background: rgba(255, 255, 255, 0.07);
}
/* Yende's wordmark is a wide horizontal lockup, so the framework lets it grow
   to 300px. The Hlalithwa mark is a tall square crest — at that width it drove
   the header to ~285px and pushed the hero card under it. Constrain by height
   and let the width follow. */
.brand-logo,
.brand-logo-header {
  width: auto;
  height: clamp(46px, 6vw, 60px);
  background: #fffdf9;
  border: 1px solid rgba(208, 162, 58, 0.32);
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 8px 22px rgb(35 31 25 / 22%);
}
.brand-logo-footer {
  width: auto;
  height: 76px;
  box-shadow: none;
}
.nav-shell { min-height: var(--header-h); gap: 1rem; }
.primary-nav { flex-wrap: wrap; justify-content: flex-end; }
.nav-toggle { color: #fffaf0; border-color: rgba(240, 219, 154, 0.35); background: rgba(255,255,255,.08); }
@media (max-width: 980px) {
  .primary-nav {
    background: rgba(30, 24, 18, 0.98);
    border-color: rgba(240, 219, 154, 0.22);
  }
  .services-menu { background: rgba(45, 36, 25, 0.96); }
  .services-menu strong { color: #fffaf0; }
  .services-menu span { color: rgba(255, 248, 235, 0.72); }
}

/* --- Hero -------------------------------------------------------------
   The framework's hero card is a solid white panel over photography.
   That is the Yende look the brief asked for, kept, but warmed. */
.wf-hero-card {
  background: #fffdf9;
  border-top: 4px solid var(--gold);
}
.wf-hero::after {
  background: linear-gradient(
    100deg,
    rgba(255, 253, 249, 0.96) 0%,
    rgba(255, 253, 249, 0.86) 42%,
    rgba(35, 31, 25, 0.32) 100%
  );
}
.wf-hero-title .red,
.hero h1 .red { color: var(--bronze); }

/* --- Cards ------------------------------------------------------------ */
.wf-flow-card,
.wf-number-card,
.wf-why-card,
.wf-use-card,
.wf-hub-card,
.service-card,
.related-card {
  background: #fff;
  border-color: var(--line);
}
.wf-flow-card h3,
.wf-number-card h3,
.wf-why-card h3,
.wf-use-card h4,
.related-card small { color: var(--bronze); }
.wf-hub-head { background: linear-gradient(145deg, #231f19, #302419); }
.wf-info-panel,
.contact-copy { background: var(--muted); }
.wf-info-panel h2 { color: var(--bronze); }

/* --- Forms ------------------------------------------------------------ */
input, select, textarea {
  font-size: max(16px, 1rem);   /* iOS refuses to not zoom below 16px */
  background: #fff;
  border: 1px solid rgba(122, 91, 35, 0.22);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgb(208 162 58 / 20%);
}

/* --- Safe areas + touch ----------------------------------------------- */
.container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
@media (pointer: coarse) {
  .btn, .button, .nav-link, .primary-nav > a, .wf-service-list .item { min-height: 44px; }
}
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }


/* --- Hero clearance ---------------------------------------------------
   The header is fixed and taller than --header-h once the crest and the
   wrapped nav are in it, so the hero has to clear its measured height. */
.wf-hero-inner { padding: calc(var(--header-h) + 3.5rem) 0 4rem; }
.wf-hero { min-height: clamp(560px, 82vh, 780px); }

/* The flow cards carry a label + one line of support copy; the framework
   sizes them for a number and a paragraph. Let them grow to their content
   instead of clipping. */
.wf-flow-card { min-height: 0; align-items: center; }
.wf-flow-card h3 {
  font-family: var(--font-sans);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 4px;
  color: var(--ink);
}
.wf-flow-card p { font-size: 13px; }
.wf-flow-card .wf-num { background: linear-gradient(145deg, #231f19, #302419); color: var(--gold-soft); }
.wf-flow-card .wf-num svg { width: 20px; height: 20px; }
.wf-why-card .wf-num svg { width: 20px; height: 20px; }

/* --- Availability bar -------------------------------------------------
   It sits directly under the hero card and is the primary action on the
   page; it needs a real surface rather than the framework's bare row. */
.search-shell { position: relative; z-index: 3; margin-top: -2.5rem; }
.booking-search {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0;
  background: #fffdf9;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.booking-search > label {
  display: grid;
  gap: 6px;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.booking-search .field-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
}
.booking-search input,
.booking-search select { border: 0; padding: 0; background: transparent; font-weight: 700; }
.booking-search input:focus,
.booking-search select:focus { box-shadow: none; }
.booking-search .btn { border-radius: 0; height: 100%; padding: 0 28px; }
@media (max-width: 900px) {
  .search-shell { margin-top: 0; }
  .booking-search { grid-template-columns: 1fr; }
  .booking-search > label { border-right: 0; border-bottom: 1px solid var(--line); }
  .booking-search .btn { padding: 16px 24px; }
}

/* --- Rate labels ------------------------------------------------------
   The framework has no price primitive. `.rate-main` is the figure and
   `.rate-weekend-note` the qualifier under it — the qualifier was
   inheriting a pale tone and washing out on white. */
.rate-summary { display: grid; gap: 2px; }
.rate-main {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.rate-weekend-note {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft-text);
}
.wf-rate-price {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--bronze);
  margin: 6px 0 10px;
}
.wf-rate-price span {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--soft-text);
}
.wf-rate-when {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}
.wf-rate-card.is-featured {
  background: linear-gradient(158deg, #231f19, #302419);
  border-color: rgba(208, 162, 58, 0.55);
  color: #fffaf0;
}
.wf-rate-card.is-featured h3,
.wf-rate-card.is-featured .wf-rate-price { color: var(--gold-soft); }
.wf-rate-card.is-featured .wf-rate-when { color: var(--gold-soft); }
.wf-rate-card.is-featured p,
.wf-rate-card.is-featured .wf-rate-price span { color: rgba(255, 248, 235, 0.82); }
.wf-rate-card.is-featured .wf-num { background: rgba(240, 219, 154, 0.16); color: var(--gold-soft); }

/* --- Card headings ----------------------------------------------------
   The framework uppercases card headings for an industrial voice. A
   guesthouse reads better in sentence case. */
.wf-number-card h3,
.wf-flow-card h3,
.wf-why-card h3,
.wf-hub-head h2,
.wf-hub-head h3,
.wf-dark-module h3,
.wf-info-panel h2 {
  text-transform: none;
  letter-spacing: -0.01em;
}
.wf-number-card h3,
.wf-why-card h3 { font-size: 19px; }
.room-type-line {
  margin: 2px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft-text);
}

/* --- Meta chips -------------------------------------------------------
   `.wf-service-list` is a 2-up grid built for link rows; the room meta is
   a set of short inline facts, so let them flow and keep the icon clear
   of the label. */
.room-meta.wf-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.room-meta .item {
  min-height: 34px;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.room-meta .item svg { flex: 0 0 auto; }

/* Room cards: photo, then copy, with the CTA pinned to the base so a row
   of cards lines up regardless of copy length. */
.wf-service-card { display: flex; flex-direction: column; }
.wf-service-card > a { display: flex; flex-direction: column; flex: 1; }
.wf-service-card .wf-service-card-body { display: flex; flex-direction: column; flex: 1; }
.room-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.room-unit-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(24, 18, 11, 0.86);
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.room-img-wrap { position: relative; }
.room-color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }

/* The corporate row pairs a copy column with a dark module; align them to
   the top so the short column does not leave a hole. */
.wf-service-layout { align-items: start; }

/* ============================================================
   Booking engine

   A direct-booking surface has no equivalent in the Yende
   framework — Yende sells engineering, not room-nights. These are
   built from the framework's tokens and spacing so they read as
   part of the same system.
   ============================================================ */
.booking-page .panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.panel-icon { flex: 0 0 auto; color: var(--gold); }

.availability-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0;
  margin-bottom: 28px;
  background: #fffdf9;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.availability-bar > label {
  display: grid;
  gap: 6px;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  min-width: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
}
.availability-bar input,
.availability-bar select {
  border: 0;
  padding: 0;
  background: transparent;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.availability-bar input:focus,
.availability-bar select:focus { box-shadow: none; }
.availability-bar .btn,
.availability-bar .button { border-radius: 0; height: 100%; padding: 0 26px; }

/* Nightly calendar */
.rate-calendar {
  margin-bottom: 28px;
  padding: 20px;
  background: var(--muted);
  border: 1px solid var(--line);
}
.rate-calendar-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.rate-calendar-head span { font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--bronze); }
.rate-calendar-head small { color: var(--soft-text); font-size: 12px; }
.rate-calendar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.rate-day {
  display: grid;
  gap: 2px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, transform .16s ease;
}
.rate-day:hover { border-color: var(--gold); transform: translateY(-2px); }
.rate-day.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgb(208 162 58 / 32%); }
.rate-day span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft-text); }
.rate-day strong { font-size: 14px; color: var(--ink); }
.rate-day small { font-size: 10px; color: var(--soft-text); }
.rate-day b { font-size: 13px; color: var(--bronze); }

/* Room picker — a multi-select list of bookable units */
.booking-layout { align-items: start; }
.room-picker { display: grid; gap: 12px; align-content: start; }
.room-picker-hint { margin: 0 0 4px; font-size: 13px; color: var(--soft-text); }
.room-option {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 12px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.room-option:hover { border-color: var(--gold); transform: translateY(-2px); }
.room-option.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgb(208 162 58 / 34%), var(--shadow);
}
.room-option > img { width: 84px; height: 64px; object-fit: cover; display: block; }
.room-option > span { display: grid; gap: 2px; min-width: 0; }
.room-option strong { font-size: 15px; color: var(--ink); }
.room-option small { font-size: 12px; color: var(--soft-text); }
.room-option > b { font-family: var(--font-display); font-size: 20px; color: var(--bronze); white-space: nowrap; }
.room-option-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: #2a1c08;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .16s ease, transform .16s ease;
}
.room-option.active .room-option-check { opacity: 1; transform: scale(1); }

/* Booking form */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.form-grid > label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink); min-width: 0; }
.form-grid > label input,
.form-grid > label select,
.form-grid > label textarea { font-weight: 400; padding: 11px 12px; }
.form-grid .wide,
.form-grid > .summary-card,
.form-grid > button,
.form-grid > .payment-proof-field,
.form-grid > .launch-rate-note { grid-column: 1 / -1; }
.summary-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; }
.summary-card strong { display: block; color: var(--ink); font-size: 15px; }
.summary-card p { margin: 4px 0 0; font-size: 13px; color: var(--soft-text); }
.summary-room-list { margin: 8px 0 6px; padding: 0; list-style: none; display: grid; gap: 5px; }
.summary-room-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.summary-room-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.summary-room-list b { white-space: nowrap; color: var(--bronze); }
.payment-proof-field { padding: 16px; background: var(--muted); border: 1px solid var(--line); }
.payment-proof-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.payment-proof-head strong { display: block; color: var(--ink); }
.payment-proof-head p { margin: 4px 0 0; font-size: 13px; color: var(--soft-text); }
.upload-field { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); cursor: pointer; font-weight: 700; font-size: 13px; }
.upload-field input[type="file"] { display: none; }
.app-error { padding: 12px 14px; background: #fdf1f0; border-left: 4px solid #9f2d2d; color: #7a2020; font-size: 14px; }
.app-success { padding: 12px 14px; background: #eef6f0; border-left: 4px solid #27624e; color: #1d4a3a; font-size: 14px; }
.launch-rate-note { padding: 12px 14px; background: var(--muted); border-left: 4px solid var(--gold); font-size: 13px; color: var(--text); }
.mobile-cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: 8px; padding: 10px 12px; background: rgba(255, 253, 249, .96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); }
.mobile-cta-bar .btn { flex: 1; }

@media (max-width: 900px) {
  .availability-bar { grid-template-columns: 1fr; }
  .availability-bar > label { border-right: 0; border-bottom: 1px solid var(--line); }
  .availability-bar .btn { padding: 15px 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .room-option { grid-template-columns: 64px minmax(0, 1fr); }
  .room-option > b { grid-column: 2; }
  .room-option > img { width: 64px; height: 52px; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 64px; }
}

/* --- .muted -----------------------------------------------------------
   A collision worth naming: in the Yende framework `--muted` is a SURFACE
   token (a pale background), but the markup inherited from the old build
   uses a `.muted` class for secondary TEXT. Left alone, secondary copy was
   painted with the cream background colour — 1.08:1, invisible.
   `.muted` is text and takes the body's secondary tone. */
.muted,
p.muted,
span.muted,
small.muted { color: var(--soft-text) !important; }

/* The reference layer ships its own grey for supporting copy that lands at
   4.38:1 on the cream page, just under AA. Same role, taken to 5.3:1. */
:root { --wf-muted: #6f665b; }
.page-intro,
.wf-flow-card p,
.wf-number-card p,
.wf-why-card p,
.wf-info-panel p { color: var(--soft-text); }

/* `.pill` hit the same --muted collision: it took the surface token for both
   its fill and its text, so the label vanished into its own background. */
.pill,
.chip,
.tag,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--muted) !important;
  border: 1px solid var(--line);
  color: var(--ink) !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}