/* ==========================================================================
   TANZAOLOGY — components.css
   Header, nav, buttons, cards, forms, footer. Shared by every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER  — transparent over a hero, solid once scrolled
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .wrap-wide {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: min(100% - var(--gutter) * 2, var(--w-wide));
}

/* While the bar is transparent it carries its own scrim. The hero veil used
   to darken the whole frame and the nav rode on that; now that the picture is
   left clear, the darkening belongs to the header — 98px of gradient instead
   of a wash across the photograph. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(28,19,11,.78) 0%,
    rgba(28,19,11,.30) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity .4s var(--ease);
}
.site-header.is-solid::before { opacity: 0; }

.site-header.is-solid {
  background: rgba(250, 246, 238, .96);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--c-line-soft);
  box-shadow: var(--shadow-sm);
}

/* Logo: white knockout over the hero, brown once the bar goes solid */
.logo { flex: 0 0 auto; line-height: 0; }
.logo img { height: 78px; width: auto; transition: opacity .35s var(--ease); }
/* the white mark has to survive a pale sky behind it */
.logo .logo-white { filter: drop-shadow(0 1px 10px rgba(0, 0, 0, .55)); }
.logo .logo-brown { display: none; }
.site-header.is-solid .logo .logo-white { display: none; }
.site-header.is-solid .logo .logo-brown { display: block; }

/* Desktop nav — seven items plus the CTA, so the tracking is kept tight */
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.nav-list { display: flex; align-items: center; gap: clamp(var(--s-3), 1.4vw, var(--s-5)); }
.nav-list a {
  font-size: var(--fs-xs);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-white);
  padding-block: var(--s-2);
  position: relative;
  transition: color .3s var(--ease), text-shadow .3s var(--ease);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 12px rgba(0,0,0,.4);
}
.nav-list a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }

.site-header.is-solid .nav-list a { color: var(--c-ink); text-shadow: none; }
.site-header.is-solid .nav-list a:hover { color: var(--c-accent); }

/* Hamburger — a real button, keyboard reachable */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  margin-left: auto;
}
.nav-toggle span {
  display: block; width: 24px; height: 1.5px;
  background: var(--c-white);
  transition: transform .35s var(--ease), opacity .25s var(--ease), background .35s;
}
.site-header.is-solid .nav-toggle span { background: var(--c-ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* the CTA pill can shed a little padding before the nav has to collapse */
@media (max-width: 1280px) {
  .nav .btn { padding-inline: 1.5em; }
}
/* Seven nav items plus the CTA need ~916px, and the logo ~153px. Below about
   1200px of viewport those no longer both fit inside the gutters, so the nav
   collapses to the drawer here rather than overlapping the mark. */
@media (max-width: 1240px) {
  .nav-list, .nav .btn { display: none; }
  .nav-toggle { display: flex; }
  .logo img { height: 58px; }
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(88vw, 400px);
  background: var(--c-dark-deep);
  color: var(--c-cream);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  display: flex; flex-direction: column;
  padding: var(--s-6) var(--s-6) var(--s-8);
  overflow-y: auto;
}
.drawer.is-open { transform: none; }
.drawer-close { align-self: flex-end; width: 44px; height: 44px; color: var(--c-cream); font-size: 1.5rem; }
.drawer-list { margin-top: var(--s-6); display: flex; flex-direction: column; }
.drawer-list a {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  padding-block: var(--s-3);
  border-bottom: 1px solid rgba(250, 246, 238, .12);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.drawer-list a:hover { color: var(--c-accent-soft); padding-left: var(--s-2); }
.drawer .btn { margin-top: var(--s-6); }
.drawer-meta { margin-top: auto; padding-top: var(--s-6); font-size: var(--fs-sm); color: rgba(250,246,238,.7); }
.drawer-meta a:hover { color: var(--c-accent-soft); }

.scrim {
  position: fixed; inset: 0;
  background: rgba(36, 26, 18, .55);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   BUTTONS  — only pills are round
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 0.9em 2.1em;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }

.btn-primary { background: var(--c-accent); color: var(--c-white); }
.btn-primary:hover { background: var(--c-accent-lift); }

.btn-ghost { border: 1px solid rgba(255,255,255,.65); color: var(--c-white); }
.btn-ghost:hover { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }

.btn-outline { border: 1px solid var(--c-line); color: var(--c-ink); }
.btn-outline:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* The header CTA sits on every page at every scroll position. A solid pill
   that persistent reads as a booking-engine advert, so it is drawn as an
   outline and only fills on hover — the solid .btn-primary is kept for the
   one real primary action in a view (the hero, the closing CTA band). */
.nav .btn-primary {
  background: transparent;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, .55);
}
.nav .btn-primary:hover {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-ink);
}
.site-header.is-solid .nav .btn-primary {
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.site-header.is-solid .nav .btn-primary:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-white);
}

.btn-block { width: 100%; }

/* Text link with an arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--c-accent);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: gap .3s var(--ease);
}
.link-arrow:hover { gap: var(--s-3); }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-none);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease),
              border-color .4s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--c-line); }

.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-sand-soft); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }

.card-media-tall { aspect-ratio: 3 / 4; }

.card-badge {
  position: absolute; top: var(--s-3); left: var(--s-3);
  background: rgba(250, 246, 238, .94);
  color: var(--c-ink);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4em 1em;
  border-radius: var(--r-pill);
}

.card-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card-body h3 { font-size: var(--fs-h4); }
.card-meta { font-size: var(--fs-sm); color: var(--c-ink-soft); display: flex; align-items: center; gap: var(--s-2); }
.card-body p { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.card-foot { margin-top: auto; padding-top: var(--s-3); }

/* Editorial image tile with the caption laid over the image */
.tile { position: relative; overflow: hidden; aspect-ratio: 3 / 4; display: block; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(36,26,18,.78) 0%, rgba(36,26,18,.18) 45%, transparent 70%);
}
.tile-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--s-5); color: var(--c-white); }
.tile-body h3 { color: var(--c-white); }
.tile-body p { font-size: var(--fs-sm); color: rgba(255,255,255,.82); margin-top: var(--s-1); }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink); }
.field .req { color: var(--c-accent); }

.input, .field input, .field select, .field textarea {
  width: 100%;
  padding: .85em 1em;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-none);
  font-size: var(--fs-base);
  color: var(--c-ink);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-ink-faint); }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(163, 95, 22, .12);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--c-err); }

.field-error { font-size: var(--fs-sm); color: var(--c-err); }
.field-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

.check { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.check input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--c-accent); }

.form-note { font-size: var(--fs-sm); color: var(--c-ink-soft); }

.alert { padding: var(--s-4) var(--s-5); border-left: 3px solid; font-size: var(--fs-sm); }
.alert-ok  { background: rgba(74,124,78,.09);  border-color: var(--c-ok);  color: #2f5a33; }
.alert-err { background: rgba(166,58,42,.09);  border-color: var(--c-err); color: #8a2f22; }

/* Honeypot — must stay reachable to bots but invisible to people */
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-dark-deep); color: rgba(250,246,238,.78); padding-top: var(--section-y); }
.site-footer a { transition: color .3s var(--ease); }
.site-footer a:hover { color: var(--c-accent-soft); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
}
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Matches the header mark — the two are the same logo and should read as one size. */
.footer-logo img { height: 78px; width: auto; margin-bottom: var(--s-4); }
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent-soft);
  font-weight: 500;
  margin-bottom: var(--s-4);
}
.footer-list { display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--fs-sm); }
.footer-contact li { display: flex; gap: var(--s-3); align-items: flex-start; }
.footer-contact i { color: var(--c-accent-soft); margin-top: 5px; flex: 0 0 16px; }

.socials { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(250,246,238,.22);
  border-radius: var(--r-pill);
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.socials a:hover { background: rgba(250,246,238,.10); border-color: var(--c-accent-soft); color: var(--c-accent-soft); }

.footer-bottom {
  border-top: 1px solid rgba(250,246,238,.12);
  padding-block: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-sm);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }

/* Newsletter */
.newsletter-form { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.newsletter-form input {
  flex: 1; min-width: 0;
  padding: .8em 1em;
  background: rgba(250,246,238,.07);
  border: 1px solid rgba(250,246,238,.22);
  color: var(--c-cream);
}
.newsletter-form input::placeholder { color: rgba(250,246,238,.45); }
.newsletter-form input:focus { outline: none; border-color: var(--c-accent-soft); }
.newsletter-form button { padding-inline: 1.4em; }

/* --------------------------------------------------------------------------
   FLOATING WHATSAPP  — single contact affordance, bottom-left
   (Tawk.to owns bottom-right)
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  left: var(--s-5); bottom: var(--s-5);
  z-index: 800;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  border-radius: var(--r-pill);
  font-size: 1.6rem;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .38);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float:hover { transform: scale(1.07); box-shadow: 0 10px 28px rgba(37,211,102,.5); }

@media (max-width: 640px) {
  .wa-float { width: 48px; height: 48px; font-size: 1.4rem; left: var(--s-4); bottom: var(--s-4); }
}