/* eMalondweni Homestead — Bootstrap build.
   Bootstrap 5 (CDN) supplies grid, components and utilities; this file
   retunes it to the brand (see the corporate identity manual): cream ground,
   terracotta + sage accents, pill controls. Caprasimo is display-only — h1/h2
   headlines and big numbers, never under 20px, never the brand name; everything
   else, including the name and interface headings, is Figtree 400–600. */

@import url('https://fonts.googleapis.com/css2?family=Caprasimo:wght@400&family=Figtree:wght@400;500;600&display=swap');

:root{
  --color-bg:#f5ead8;
  --color-surface:#ebddc5;
  --color-text:#201e1d;
  --color-accent:#c67139;
  --color-accent-2:#7a8a5e;
  --color-divider:rgba(32,30,29,.16);

  --color-neutral-100:#f9f4ed; --color-neutral-200:#eee7db; --color-neutral-300:#dcd3c4;
  --color-neutral-600:#82796a; --color-neutral-700:#645c50; --color-neutral-800:#474238; --color-neutral-900:#201e1d;

  --color-accent-100:#fff2eb; --color-accent-200:#ffe1d0; --color-accent-300:#ffc6a5;
  --color-accent-600:#b2622d; --color-accent-700:#8c491a; --color-accent-800:#643312; --color-accent-900:#402310;

  --color-accent-2-100:#f0fae1; --color-accent-2-200:#e1eecc;
  --color-accent-2-700:#56633f; --color-accent-2-800:#3d472b; --color-accent-2-900:#272e1b;

  --font-heading:"Caprasimo", system-ui, sans-serif;
  --font-body:"Figtree", system-ui, sans-serif;

  --shadow-sm:0 1px 2px rgba(46,43,37,.14);
  --shadow-md:0 3px 10px rgba(46,43,37,.16);
  --shadow-lg:0 12px 32px rgba(46,43,37,.22);

  /* Bootstrap theme hooks — the shipped CDN build is precompiled, so these
     variables retint what already reads them; hover/active shades below are
     set explicitly since those are baked into Bootstrap's compiled CSS. */
  --bs-body-bg:var(--color-bg);
  --bs-body-bg-rgb:245,234,216;
  --bs-body-color:var(--color-text);
  --bs-body-font-family:var(--font-body);
  --bs-primary:var(--color-accent);
  --bs-primary-rgb:198,113,57;
  --bs-secondary:var(--color-accent-2);
  --bs-secondary-rgb:122,138,94;
  /* Terracotta on cream only clears 3:1 — fine for buttons and chrome, not for
     text-sized links, which the manual sets in Terracotta 700. */
  --bs-link-color:var(--color-accent-700);
  --bs-link-color-rgb:140,73,26;
  --bs-link-hover-color:var(--color-accent-800);
  --bs-border-radius:16px;
  --bs-border-radius-sm:8px;
  --bs-border-radius-lg:28px;
  --bs-border-radius-xl:28px;
  --bs-border-color:var(--color-divider);
  --bs-emphasis-color:var(--color-text);
}

body{ font-size:16px; line-height:1.6; }
h1,h2,.h1,.h2,.font-heading{ font-family:var(--font-heading); font-weight:400; letter-spacing:-.015em; }
h3,h4,h5,h6,.h3,.h4,.h5,.h6{ font-family:var(--font-body); font-weight:600; letter-spacing:-.01em; line-height:1.2; }
h1,.h1{ font-size:2.75rem; line-height:1.06; } h2,.h2{ font-size:2rem; line-height:1.1; } h3,.h3{ font-size:1.625rem; }
b,strong{ font-weight:600; }
.fw-bold{ font-weight:600 !important; }
a{ text-decoration:none; }
::selection{ background:rgba(198,113,57,.3); }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }

.washed{ filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); }
.object-fit-cover{ object-fit:cover; }
.bg-surface{ background:var(--color-surface); }
.bg-neutral-900{ background:var(--color-neutral-900); }
.bg-sage-800{ background:var(--color-accent-2-800); }
.text-accent{ color:var(--color-accent); }
.text-accent-700{ color:var(--color-accent-700); }
.text-accent-2-900{ color:var(--color-accent-2-900); }
.bg-accent-2-tint{ background:var(--color-accent-2-200); }
.kicker{ font:600 .75rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent-700); }
.shadow-sm{ box-shadow:var(--shadow-sm) !important; }
.shadow{ box-shadow:var(--shadow-md) !important; }
.shadow-lg{ box-shadow:var(--shadow-lg) !important; }

/* — brand lockup (partials/logo.blade.php) — horizontal, 46px mark per the manual.
   Terracotta mark + ink name on light grounds; all-cream on sage, ink or photos. */
.brand-lockup{ display:inline-flex; align-items:center; gap:.85rem; color:var(--color-text); }
.brand-mark{ height:46px; width:auto; flex-shrink:0; color:var(--color-accent); }
.brand-divider{ align-self:stretch; width:1px; margin-block:.2rem; background:currentColor; opacity:.22; }
.brand-name{ font:600 1.05rem/1.15 var(--font-body); letter-spacing:-.005em; text-align:left; }
.brand-tagline{ display:block; margin-top:.45rem; font:500 .66rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent-700); }
.brand-lockup-light,.brand-lockup-light .brand-mark{ color:var(--color-bg); }
.brand-lockup-light .brand-tagline{ color:var(--color-accent); }

/* — navbar — */
.navbar{ padding-block:1rem; }
.navbar-brand{ padding-block:0; margin-right:1.5rem; }
.navbar .nav-link{ font:600 .85rem/1 var(--font-body); border-radius:999px; padding:.55rem 1rem; }
.navbar-light .nav-link{ color:var(--color-text); }
.navbar-light .nav-link:hover{ background:rgba(32,30,29,.06); }
.navbar-light .nav-link.active{ background:var(--color-accent); color:var(--color-bg) !important; }
.navbar-dark .nav-link{ color:#f5ead8; }
.navbar-dark .nav-link:hover{ background:rgba(245,234,216,.14); }
.navbar .nav-link-account{ display:flex; align-items:center; padding:.35rem .75rem; }
.navbar .dropdown-menu{ background:var(--color-neutral-100); border:1px solid var(--color-divider); border-radius:1rem; box-shadow:var(--shadow-md); padding:.4rem; min-width:12rem; }
.navbar .dropdown-item{ font:600 .85rem/1 var(--font-body); color:var(--color-text); border-radius:999px; padding:.6rem 1rem; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus{ background:rgba(32,30,29,.06); color:var(--color-text); }
.navbar .dropdown-item.active, .navbar .dropdown-item:active{ background:var(--color-accent); color:var(--color-bg); }
.navbar .dropdown-divider{ border-color:var(--color-divider); margin:.35rem .5rem; }
.navbar-hero{ position:absolute; inset-inline:0; top:0; z-index:10; }
@media (max-width:991.98px){
  .navbar-hero .navbar-collapse{ background:rgba(32,30,29,.94); border-radius:1rem; box-shadow:var(--shadow-md); padding:.5rem; margin-top:.75rem; }
}

/* — buttons — */
.btn{ font-family:var(--font-body); font-weight:600; letter-spacing:.005em; }
.btn-primary{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-bg); }
.btn-primary:hover,.btn-primary:focus{ background:var(--color-accent-600); border-color:var(--color-accent-600); color:var(--color-bg); }
.btn-primary:active{ background:var(--color-accent-700) !important; border-color:var(--color-accent-700) !important; }
.btn-outline-primary{ color:var(--color-accent-700); border-color:var(--color-divider); }
.btn-outline-primary:hover{ background:rgba(32,30,29,.06); border-color:var(--color-divider); color:var(--color-text); }
.btn-outline-light{ border-color:rgba(245,234,216,.5); }
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary{ background:var(--color-accent); border-color:var(--color-accent); color:var(--color-bg); }
.btn-sage{ background:var(--color-accent-2); border-color:var(--color-accent-2); color:#f0fae1; }
.btn-sage:hover{ background:var(--color-accent-2-700); border-color:var(--color-accent-2-700); color:#f0fae1; }

/* — forms — */
.form-label{ font-size:.75rem; font-weight:600; color:rgba(32,30,29,.7); margin-bottom:.3rem; }
.form-control,.form-select{
  background:var(--color-surface); border:1px solid var(--color-divider);
  border-radius:999px; padding:.6rem 1rem; font-size:.9rem; color:var(--color-text);
}
textarea.form-control{ border-radius:var(--bs-border-radius); }
.form-control:focus,.form-select:focus{
  background:var(--color-surface); border-color:var(--color-accent);
  box-shadow:0 0 0 .2rem rgba(198,113,57,.18); color:var(--color-text);
}
.form-check-input{ border-color:var(--color-divider); }
.form-check-input:checked{ background-color:var(--color-accent); border-color:var(--color-accent); }
.form-check-input:focus{ box-shadow:0 0 0 .2rem rgba(198,113,57,.18); }
.qty-stepper .btn{ width:36px; padding:0; }
.qty-stepper input{ text-align:center; -moz-appearance:textfield; }
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* — calendar —
   Bootstrap only ships .row-cols-1 .. .row-cols-6 out of the box, so ".row-cols-7"
   silently does nothing and lets the day buttons wrap wherever they fit — this grid
   is what actually pins every day under its weekday column. */
.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:.5rem; }

.cal-day{ height:52px; width:100%; border:0; border-radius:var(--bs-border-radius-sm); background:var(--color-surface); color:var(--color-neutral-700); font-size:.85rem; }
.cal-day small{ display:block; font-size:.6rem; font-weight:600; letter-spacing:.04em; }
.cal-day.is-open{ background:var(--color-accent-2-200); color:var(--color-accent-2-900); font-weight:600; }
/* Same colour story as the public calendar: sage = bookable, terracotta = taken,
   dark neutral = closed by us, pale neutral = not opened for booking yet. */
.cal-day.is-past{ background:transparent; color:var(--color-neutral-300); }
.cal-day.is-unconfirmed{ background:var(--color-accent-200); color:var(--color-accent-900); }
.cal-day.is-booked{ background:var(--color-accent); color:var(--color-bg); }
.cal-day.is-closed{ background:var(--color-neutral-700); color:var(--color-bg); }
.cal-day.is-unavailable{ background:var(--color-neutral-200); color:var(--color-neutral-600); }
.cal-day.is-picked,.cal-day.is-picked:hover{ background:var(--color-accent-2-700); color:var(--color-bg); font-weight:600; }
.cal-day.is-open:hover{ filter:brightness(.97); }
.cal-day:disabled{ opacity:1; cursor:default; }

/* — public calendar (calendar.blade.php + calendar.js) — */
.cal2-day{
  position:relative; min-height:76px; border-radius:var(--bs-border-radius-sm);
  background:transparent; color:var(--color-neutral-300); font-size:.7rem;
  display:flex; flex-direction:column; gap:.2rem; padding:.4rem;
}
.cal2-daynum{ font-size:.8rem; font-weight:600; }
.cal2-day.cal2-past{ color:var(--color-neutral-300); }
.cal2-day.cal2-closed{ background:var(--color-neutral-700); color:var(--color-bg); }
.cal2-day.cal2-unavailable{ background:var(--color-neutral-200); color:var(--color-neutral-600); }
.cal2-day.cal2-open{ background:var(--color-accent-2-200); color:var(--color-accent-2-900); cursor:pointer; }
.cal2-day.cal2-open:hover{ filter:brightness(.97); }
.cal2-day.cal2-open:focus-visible{ outline:2px solid var(--color-accent-2-900); outline-offset:2px; }
.cal2-day.cal2-unconfirmed{ background:var(--color-accent-200); color:var(--color-accent-900); }
.cal2-day.cal2-confirmed{ background:var(--color-accent); color:var(--color-bg); }
.cal2-info{ font-size:.62rem; line-height:1.15; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cal2-badge{ font-size:.58rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; margin-top:auto; }
.cal2-short{ display:none; font-size:.58rem; font-weight:600; letter-spacing:.02em; margin-top:auto; }
/* Phones: names and categories don't fit a seventh of the screen — just say "Booked". */
@media (max-width:575.98px){
  .cal2-day{ min-height:56px; padding:.3rem .2rem; }
  .cal2-info,.cal2-badge{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .cal2-short{ display:block; }
}

/* — cards / tags — */
.card{ border:0; border-radius:28px; background:var(--color-surface); }
.card-flat{ border:0; border-radius:var(--bs-border-radius); background:var(--color-surface); }
.badge-tag{ font:600 .7rem/1 var(--font-body); padding:.5em .85em; border-radius:999px; }
.gallery-item{ border-radius:var(--bs-border-radius-lg); overflow:hidden; }
.gallery-item img{ transition:transform .35s ease; }
.gallery-item:hover img{ transform:scale(1.04); }
.gallery-item.d-none{ display:none !important; }

/* — accordion (FAQ) — */
.accordion-item{ background:var(--color-surface); border:0; border-radius:var(--bs-border-radius) !important; margin-bottom:.75rem; overflow:hidden; }
.accordion-button{ background:transparent; font-family:var(--font-body); font-weight:600; color:var(--color-text); }
.accordion-button:not(.collapsed){ background:var(--color-surface); color:var(--color-accent-700); box-shadow:none; }
.accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(198,113,57,.18); }
/* Booking form's coupon fold-out: sits inside a card, so a lighter, tighter row. */
.coupon-accordion .accordion-item{ margin-bottom:0; }
.coupon-accordion .accordion-button{ padding:.75rem 1rem; font-size:.9rem; }

/* — hero — */
.hero{ position:relative; min-height:600px; overflow:hidden; }
.hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.75) brightness(.72); pointer-events:none; }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(32,30,29,.62) 0%,rgba(32,30,29,.18) 40%,rgba(32,30,29,.74) 100%); pointer-events:none; }
.hero-content{ position:relative; z-index:2; }

/* — footer — */
footer a,footer span{ color:rgba(245,234,216,.85); font-size:.9rem; }
footer a:hover{ color:var(--color-bg); }
footer .footer-heading{ font:600 .75rem/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:rgba(245,234,216,.6); }
footer .brand-lockup span{ color:inherit; }
footer .brand-lockup .brand-name{ font-size:1.05rem; }
footer .brand-lockup .brand-tagline{ font-size:.66rem; color:var(--color-accent); }

/* — page hero band (inner pages) — */
.page-intro{ padding-block:3.25rem .5rem; }

/* — calendar page: compact, scrollable "open dates" list beside the month grid — */
.open-dates-list{ max-height:420px; overflow-y:auto; margin-right:-.5rem; padding-right:.5rem; display:flex; flex-direction:column; gap:.375rem; scrollbar-width:thin; scrollbar-color:var(--color-neutral-300) transparent; }
.open-dates-list::-webkit-scrollbar{ width:6px; }
.open-dates-list::-webkit-scrollbar-thumb{ background:var(--color-neutral-300); border-radius:3px; }
@media (min-width:992px){
  /* Fill the card's height (set by the calendar beside it) instead of a fixed cap. */
  .open-dates-list{ flex:1 1 0; min-height:0; max-height:none; }
}
.open-dates-item{ display:block; padding:.4rem .6rem; border-radius:var(--bs-border-radius); font-size:.8rem; line-height:1.35; background:var(--color-neutral-100); color:var(--color-neutral-600); text-decoration:none; }
.open-dates-item.is-open{ background:var(--color-accent-2-200); color:var(--color-accent-2-900); }
.open-dates-item.is-open:hover{ filter:brightness(.97); }
.open-dates-item.is-open:focus-visible{ outline:2px solid var(--color-accent-2-900); outline-offset:2px; }