/* ============================================================
   Mwazaro Beach Lodge — faithful rebuild of the original theme
   Marcellus (headings) · Raleway (labels/buttons) · Inter (body)
   Kit: primary #C9BAA9 · accent #35A8A8 · text #313131
   ============================================================ */

:root {
  --taupe: #C9BAA9;
  --taupe-dark: #b3a190;
  --teal: #35A8A8;
  --teal-dark: #2b8d8d;
  --text: #313131;
  --grey: #565656;
  --cream: #FBF9F6;
  --line: #e5ddd2;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { background: #fff; color: var(--text); font-family: 'Inter', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--teal); color: #fff; }

.font-display { font-family: 'Marcellus', serif; }

/* ---------- type ---------- */
.h-hero { font-family: 'Marcellus', serif; font-size: clamp(2.6rem, 6.5vw, 4.875rem); line-height: 1.1; text-transform: capitalize; font-weight: 400; }
.h-page { font-family: 'Marcellus', serif; font-size: clamp(2.1rem, 4.2vw, 2.75rem); line-height: 1.2; text-transform: capitalize; font-weight: 400; }
.h-sec  { font-family: 'Marcellus', serif; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.3; text-transform: capitalize; font-weight: 400; color: var(--taupe); }
.h-sub  { font-family: 'Marcellus', serif; font-size: 1.5rem; line-height: 1.35; text-transform: capitalize; font-weight: 400; }
.eyebrow { font-family: 'Raleway', sans-serif; font-style: italic; font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.body-text { color: var(--grey); font-size: 1rem; line-height: 1.7; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Raleway', sans-serif; font-weight: 500; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .85rem 1.9rem; border-radius: 5px; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .2s ease; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); }
.btn-outline-light { border: 1px solid rgba(255,255,255,.8); color: #fff; background: transparent; }
.btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn-outline { border: 1px solid var(--taupe); color: var(--grey); background: transparent; }
.btn-outline:hover { background: var(--taupe); color: #fff; }

/* ---------- header (taupe, like the original) ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--taupe); }
.nav-link { font-family: 'Marcellus', serif; font-size: 1.02rem; color: #453f38; padding-bottom: 6px; position: relative; transition: color .3s ease; }
.nav-link:hover { color: var(--teal); }
.btn-outline-hdr { border: 1px solid rgba(255, 255, 255, .9); color: #fff; background: transparent; }
.btn-outline-hdr:hover { background: #fff; color: #8d7f70; border-color: #fff; }
/* home only: header fades into the hero photo */
.hero-fade { background: linear-gradient(to bottom, var(--taupe) 0%, rgba(201, 186, 169, 0) 100%); }
.nav-link[aria-current="page"] { color: var(--teal); }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal); }
.nav-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* dropdown */
.has-drop { position: relative; }
.dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); background: #fff; min-width: 205px;
  box-shadow: 0 14px 34px -12px rgba(49, 49, 49, .25); border-radius: 4px; padding: .5rem 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 70; }
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: block; padding: .6rem 1.3rem; font-family: 'Marcellus', serif; font-size: .95rem; color: #4a4a4a; transition: color .2s ease, background-color .2s ease; }
.dropdown a:hover { color: var(--teal); background: var(--cream); }

/* ---------- hero ---------- */
.hero-veil { background: linear-gradient(rgba(20, 20, 18, .38), rgba(20, 20, 18, .38)); }
.hero-video-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-video-frame iframe { position: absolute; top: 50%; left: 50%; width: 178vh; min-width: 100%; height: 56.25vw; min-height: 100%; transform: translate(-50%, -50%); border: 0; }

/* ---------- room tiles ---------- */
.tile { position: relative; display: block; overflow: hidden; }
.tile img { transition: transform .8s ease; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.08) 100%); }
.tile-label { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 2; color: #fff; }
.tile-price { font-family: 'Raleway', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.tile-name { font-family: 'Marcellus', serif; font-size: 1.6rem; line-height: 1.25; margin-top: .3rem; }
.tile:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ---------- review cards ---------- */
.score-chip { display: inline-grid; place-items: center; min-width: 2.4rem; height: 1.6rem; padding: 0 .4rem; border-radius: 4px; background: #003580; color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: .8rem; }

/* ---------- forms ---------- */
.input { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: .8rem 1rem; font-family: 'Inter', sans-serif; font-size: .92rem; color: var(--text); }
.input::placeholder { color: #9a9a9a; }
.input:focus { outline: 2px solid var(--teal); outline-offset: 0; border-color: var(--teal); }

/* ---------- footer ---------- */
.site-footer { background: var(--taupe); color: #fff; }
.site-footer .f-head { font-family: 'Marcellus', serif; font-size: 1.5rem; text-transform: capitalize; }
.f-icon { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 4px; background: var(--teal); color: #fff; transition: background-color .3s ease; }
.f-icon:hover { background: var(--teal-dark); }

/* ---------- gallery slider ---------- */
.slider-main { position: relative; overflow: hidden; }
.slider-main img { width: 100%; height: 100%; object-fit: cover; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: grid; place-items: center;
  width: 46px; height: 46px; color: #fff; background: rgba(0,0,0,.22); border-radius: 4px; transition: background-color .3s ease; cursor: pointer; }
.slider-arrow:hover { background: rgba(0,0,0,.45); }
.thumb { cursor: pointer; opacity: .85; transition: opacity .25s ease, outline-color .25s ease; outline: 2px solid transparent; outline-offset: -2px; }
.thumb:hover { opacity: 1; }
.thumb.active { opacity: 1; outline-color: var(--teal); }

/* ---------- lightbox ---------- */
.g-item { cursor: zoom-in; }
dialog.lightbox { border: none; padding: 0; background: rgba(20, 20, 18, .95); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
dialog.lightbox::backdrop { background: rgba(20, 20, 18, .85); }
dialog.lightbox img { max-width: min(92vw, 1400px); max-height: 84vh; object-fit: contain; }
.lb-btn { position: fixed; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 4px; background: rgba(255,255,255,.12); color: #fff; transition: background-color .3s ease; z-index: 5; }
.lb-btn:hover { background: rgba(255,255,255,.26); }

/* ---------- mobile drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer-veil { position: absolute; inset: 0; background: rgba(30, 28, 25, .5); opacity: 0; transition: opacity .35s ease; }
.drawer.open .drawer-veil { opacity: 1; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 90vw); background: var(--cream); transform: translateX(103%); transition: transform .45s ease; display: flex; flex-direction: column; overflow-y: auto; }
.drawer.open .drawer-panel { transform: none; }
.drawer-link { font-family: 'Marcellus', serif; font-size: 1.45rem; color: var(--text); transition: color .25s ease; }
.drawer-link:hover { color: var(--teal); }

/* ---------- misc ---------- */
img { max-width: 100%; }
.no-scroll { overflow: hidden; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 100; background: var(--teal); color: #fff; padding: .7rem 1.2rem; border-radius: 4px; transition: top .3s ease; }
.skip-link:focus { top: 12px; }

/* reveal (subtle, matching Elementor's default fade-ins) */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
.reveal-off .reveal, html.no-js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }