/* ============================================================
   NAVBAR
   ============================================================ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent;
  transition: background .5s ease, border-color .5s ease, box-shadow .5s ease;
}
#navbar.scrolled,
#navbar.solid {
  background: rgba(6,32,28,.97);
  border-bottom: 1px solid rgba(212,168,75,.3);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 32px rgba(0,0,0,.35);
}
:root.dark-mode #navbar.scrolled,
:root.dark-mode #navbar.solid { background: rgba(4,9,8,.97); }

.nav-wrap {
  max-width: 1360px; margin: 0 auto; padding: 0 48px;
  height: 80px; display: flex; align-items: center;
}
.nav-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
.nav-compass { width: 44px; height: 44px; flex-shrink: 0; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1; }
.nav-brand-main { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--gold); letter-spacing: .04em; font-style: italic; }
.nav-brand-sub  { font-family: var(--sc); font-size: 9px; font-weight: 300; color: rgba(212,168,75,.65); letter-spacing: .25em; text-transform: uppercase; margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: var(--nav-gap, 32px); margin-left: auto; flex-wrap: nowrap; }
/*.nav-links a {
  font-family: var(--sc); font-weight: 400;
  font-size: var(--nav-font, 12px); letter-spacing: var(--nav-ls, .18em);
  color: rgba(237,208,128,.85); text-decoration: none; text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s;
}*/

.nav-links a {
  font-family: var(--sc); font-weight: 400;
  font-size: var(--nav-font, 12px); letter-spacing: var(--nav-ls, .18em);
  color: var(--gold-lt); text-decoration: none; text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s;
}

.nav-links a:hover, .nav-links a.current { color: var(--gold-lt); }

.nav-controls { display: flex; align-items: center; gap: 16px; margin-left: 24px; flex-shrink: 0; }

.theme-toggle {
  background: none; border: 1px solid rgba(212,168,75,.5);
  color: var(--gold-lt); padding: 7px 11px; cursor: pointer;
  font-size: 16px; transition: all .3s; border-radius: 4px; line-height: 1;
}
.theme-toggle:hover { background: rgba(212,168,75,.12); border-color: var(--gold); }

.lang-selector { position: relative; }
.lang-button {
  background: none; border: 1px solid rgba(212,168,75,.5);
  color: var(--gold-lt); padding: 7px 12px; cursor: pointer;
  font-family: var(--sc); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; transition: all .3s; border-radius: 4px;
}
.lang-button:hover { background: rgba(212,168,75,.12); border-color: var(--gold); }
.lang-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: rgba(6,32,28,.98); border: 1px solid rgba(212,168,75,.35);
  border-radius: 6px; z-index: 300; backdrop-filter: blur(14px);
  min-width: 130px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
:root.dark-mode .lang-dropdown { background: rgba(4,9,8,.98); }
.lang-dropdown.active { display: block; }
.lang-dropdown a {
  display: block; padding: 10px 16px; color: var(--gold-lt);
  text-decoration: none; font-family: var(--sc); font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase;
  transition: background .2s; border-bottom: 1px solid rgba(212,168,75,.12);
}
.lang-dropdown a:last-child { border-bottom: none; }
.lang-dropdown a:hover { background: rgba(212,168,75,.18); }
.lang-dropdown a.active { background: rgba(212,168,75,.28); color: var(--gold-lt); }

.nav-enquire {
  border: 1px solid rgba(212,168,75,.55) !important;
  color: var(--gold-lt) !important;
  padding: 9px var(--nav-enquire-px, 22px) !important;
  letter-spacing: var(--nav-ls, .18em) !important;
  transition: all .25s !important;
  border-radius: 2px;
}
.nav-enquire:hover { background: var(--gold) !important; color: var(--teal-dk) !important; }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; margin-left: 28px; }
.hamburger span { display: block; width: 24px; height: 1px; background: var(--gold-lt); margin: 6px 0; transition: all .3s; }

#mobMenu {
  display: none; position: fixed; inset: 0;
  background: var(--teal-dk);
  z-index: 199; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
}
:root.dark-mode #mobMenu { background: #040908; }
#mobMenu.open { display: flex; }
#mobMenu a { font-family: var(--sc); font-size: 16px; letter-spacing: .2em; color: var(--gold-lt); text-decoration: none; text-transform: uppercase; }
#mobMenu .mob-close { position: absolute; top: 26px; right: 28px; background: none; border: none; cursor: pointer; color: var(--gold-lt); font-size: 26px; font-family: var(--serif); }

/* ============================================================
   PAGE HEADER (for inner pages — About, Contact, etc.)
   ============================================================ */
.page-hero {
  position: relative; min-height: clamp(560px, calc(54vh + 96px), 760px);
  display: flex; align-items: center;
  justify-content: center; text-align: center; overflow: hidden;
  padding-top: 80px;
}
/* On narrow screens the hero is much taller relative to its width than on
   desktop, which forces background-size:cover to crop deep into wide banner
   photography (faces/logos near the left or right edge get cut off first).
   Tightening the height on smaller viewports keeps the box closer to the
   banner's own aspect ratio, so far less of the image needs to be trimmed. */
@media (max-width: 768px) {
  .page-hero { min-height: clamp(400px, 88vw, 560px); padding-top: 72px; }
}
@media (max-width: 480px) {
  .page-hero { min-height: clamp(340px, 95vw, 460px); padding-top: 68px; }
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  /* Focal point: each page sets --hero-pos (and optionally --hero-pos-m for
     a mobile-specific focal point) inline, e.g.
     style="--hero-pos:center 35%; --hero-pos-m:center 22%"
     so a face/logo can be kept in frame independently on phone vs desktop. */
  background-position: var(--hero-pos, center);
  filter: brightness(1.08) saturate(1.06);
}
@media (max-width: 768px) {
  .page-hero-bg { background-position: var(--hero-pos-m, var(--hero-pos, center)); }
}
:root.dark-mode .page-hero-bg { filter: none; }
.page-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--img-overlay-light) 0%,
    rgba(8,42,37,.40) 40%,
    rgba(8,42,37,.58) 88%,
    var(--ivory) 100%);
}
:root.dark-mode .page-hero-bg::after {
  background: linear-gradient(to bottom,
    rgba(4,9,8,.85) 0%,
    rgba(4,9,8,.74) 40%,
    rgba(4,9,8,.78) 88%,
    var(--ivory) 100%);
}
/* min-width: 0 — see the matching comment on .hero-inner in home.css.
   .page-hero-in is the same "single flex item inside a centered flex
   container" pattern used by every inner-page hero (Destinations, About,
   FAQ, etc.), so it needs the same fix or adaptive-fit.js can't shrink
   .page-hero h1 for long translated titles. */
.page-hero-in { position: relative; z-index: 2; padding: 72px 1cm; width: 100%; min-width: 0; }
.page-hero-eyebrow {
  font-family: var(--sc); font-size: 11px; letter-spacing: .35em;
  color: var(--gold-lt); text-transform: uppercase; margin-bottom: 20px; display: block;
  text-shadow: 0 1px 2px rgba(0,0,0,.92), 0 1px 10px rgba(0,0,0,.55);
}
.page-hero h1 {
  font-family: var(--serif); font-size: clamp(36px, 6vw, 64px);
  font-weight: 300; font-style: italic; color: #FFFDF9;
  line-height: 1.1; margin-bottom: 16px;
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 2px 16px rgba(0,0,0,.6);
}
:root.dark-mode .page-hero h1 { color: var(--gold-lt); text-shadow: 0 0 50px rgba(224,189,99,.2), 0 2px 8px rgba(0,0,0,.5); }
.page-hero p {
  font-family: var(--serif); font-size: 17px; font-weight: 300;
  color: #FFFDF9; max-width: 560px; margin: 0 auto;
  line-height: 1.8;
  text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 1px 12px rgba(0,0,0,.6);
}

.page-content { padding: 90px 0; }
.page-content .prose { max-width: 820px; margin: 0 auto; }

/* contact.php's info + form 2-column layout — hardcoded inline as
   1fr 1.3fr with no fallback previously, which would squeeze both
   columns uncomfortably narrow on tablets and phones. */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 480px) {
  .contact-grid { gap: 32px !important; }
  .contact-form-card { padding: 28px !important; }
}
.prose h2 {
  font-family: var(--serif); font-size: 32px; font-weight: 300; font-style: italic;
  color: var(--teal-dk); margin: 44px 0 18px;
}
:root.dark-mode .prose h2 { color: var(--gold-lt); }
.prose h2:first-child { margin-top: 0; }
.prose p {
  font-size: 15.5px; color: var(--text2); line-height: 1.9; margin-bottom: 18px;
}
.prose ul { margin: 0 0 18px 22px; }
.prose li { font-size: 15.5px; color: var(--text2); line-height: 1.85; margin-bottom: 8px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--dark); padding: 60px 0 40px;
  border-top: 1px solid rgba(212,168,75,.18);
}
.footer-in { max-width: 1360px; margin: 0 auto; padding: 0 48px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 40px; }
.footer-col h4 {
  font-family: var(--serif); font-size: 16px; font-weight: 300; font-style: italic;
  color: var(--gold-lt); margin-bottom: 16px;
}
.footer-col a, .footer-col p {
  display: block; font-size: 13px; color: rgba(237,208,128,.62);
  text-decoration: none; margin-bottom: 10px; transition: color .2s; line-height: 1.7;
}
.footer-col a:hover { color: var(--gold-lt); }
.footer-bottom {
  border-top: 1px solid rgba(212,168,75,.15);
  padding-top: 24px; text-align: center;
  font-size: 12px; color: rgba(237,208,128,.5);
}
.footer-bottom a { color: rgba(237,208,128,.5); text-decoration: underline; }

@media (max-width: 1024px) {
  .nav-wrap { padding: 0 24px; padding-right: 8px; }
  .nav-links { display: none; }
  .hamburger { display: block; }
}
@media (max-width: 480px) {
  /* Neither .nav-brand nor .nav-controls shrink (flex-shrink:0), so on
     narrow phones the logo + theme toggle + language button + hamburger
     can collectively exceed the available width. Scale each down a
     little rather than letting the row overflow or force horizontal
     scroll. */
  .nav-wrap { height: 68px; padding: 0 16px; padding-right: 6px; }
  .nav-compass { width: 34px; height: 34px; }
  .nav-brand { gap: 10px; }
  .nav-brand-main { font-size: 17px; }
  .nav-brand-sub { display: none; }
  .nav-controls { gap: 8px; margin-left: 10px; }
  .theme-toggle { padding: 6px 8px; font-size: 14px; }
  .lang-button { padding: 6px 8px; font-size: 10px; letter-spacing: .1em; }
  .hamburger { margin-left: 14px; padding: 6px 2px; }
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}