/* ═══════════════════════════════════════════════════════════════
   MAYA TUYA — SITE CSS
   Shared base, header and forms. Page-specific styles live inside
   each page's own HTML widget (they are hoisted into <head> at build).
   Tokens: Master Codex §6 Design System.
═══════════════════════════════════════════════════════════════ */

:root {
  --mt-g: #013220;        /* dark green — primary */
  --mt-gold: #c89e4b;     /* gold — accent */
  --mt-gold-d: #9a7828;   /* gold dark — hover */
  --mt-cream: #f3eee2;    /* live site background (not #f2e9d0) */
  --mt-paper: #fffdf7;    /* inputs, menu panels */
  --mt-ink: #0c0b09;      /* body text */
  --mt-muted: #5a5040;    /* secondary text */
  --mt-rule: rgba(1, 50, 32, 0.12);
  --mt-rule-gold: rgba(200, 158, 75, 0.25);
  --mt-error: #8b2a2a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mt-cream);
  color: var(--mt-ink);
  font-family: 'Lato', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; }
p { margin: 0 0 1.75em; }

/* Accessibility floor */
.mt-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--mt-g); color: var(--mt-cream); padding: 10px 16px; font-size: 13px;
}
.mt-skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--mt-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Page sections (one per former Elementor container) ───────── */
/* Padding comes from per-section variables; --mt-gutter guarantees a minimum side margin on small screens */
:root { --mt-gutter: 0px; }
@media (max-width: 1200px) { :root { --mt-gutter: 16px; } }
@media (max-width: 600px)  { :root { --mt-gutter: 12px; } }
.mt-sec {
  padding: var(--pt, 10px) max(var(--pr, 10px), var(--mt-gutter)) var(--pb, 10px) max(var(--pl, 10px), var(--mt-gutter));
}
.mt-sec .mt-inner {
  display: flex; flex-direction: column; gap: 20px;   /* Elementor's default container gap */
  width: 100%; max-width: 1200px; margin: 0 auto;
}
.mt-sec.mt-full .mt-inner { max-width: none; }
/* ── Uniform layer (applies to every page) ────────────────────────
   Page bodies were extracted from WordPress with their own large section padding (40-70px).
   On phones that stacks on top of each card's own padding, so cap it here. */
:root { --mt-edge: max(20px, calc((100vw - 1200px) / 2)); }
body { overflow-x: clip; }   /* full-bleed heroes use 100vw; clip avoids a scrollbar-width overflow */
@media (max-width: 680px) {
  .mt-sec {
    padding: min(var(--pt, 10px), 20px) var(--mt-gutter) min(var(--pb, 10px), 20px) var(--mt-gutter);
  }
}
/* Heroes run edge to edge. Campeche guide pages at every width; the other hero banners on phones. */
.mt-inner .pg-hero, .mt-inner .pg-hero + div[style*="height:3px"] {
  width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
.mt-inner .pg-hero .pg-hero-content { padding-left: var(--mt-edge) !important; padding-right: var(--mt-edge) !important; }
@media (max-width: 680px) {
  .mt-inner :is(.mt-story-hero, .mt-exp-hero, div.hero:not(#mthome .hero)) {
    width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  }
}
.mt-sec .mt-inner > * { min-width: 0; }

/* ── Header ───────────────────────────────────────────────────── */
.mt-header { background: var(--mt-cream); border-bottom: 1px solid var(--mt-rule); position: relative; z-index: 50; }
.mt-header-inner {
  max-width: 1140px; margin: 0 auto; padding: 12px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.mt-logo { display: block; flex-shrink: 0; line-height: 0; }
.mt-logo img { height: 56px; width: auto; display: block; }

.mt-nav { flex: 1; display: flex; justify-content: center; }
.mt-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.mt-nav li { position: relative; }
.mt-nav a {
  display: block; font-family: 'Lato', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .38em; text-transform: uppercase; text-decoration: none;
  color: var(--mt-g); padding: 8px 14px; transition: color .2s, background .2s;
}
.mt-nav a:hover, .mt-nav a:focus-visible, .mt-nav a[aria-current="page"] { color: var(--mt-gold); }
.mt-nav .has-sub > a::after { content: "▾"; font-size: 8px; margin-left: 6px; letter-spacing: 0; }
.mt-nav .sub {
  display: none; position: absolute; left: 0; top: 100%; min-width: 190px; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--mt-paper); border: 1px solid var(--mt-rule); border-top: 2px solid var(--mt-g);
  box-shadow: 0 8px 24px rgba(1, 50, 32, .08); padding: 4px 0;
}
.mt-nav .sub a { color: var(--mt-muted); letter-spacing: .32em; padding: 10px 18px; border-bottom: 1px solid rgba(1, 50, 32, .07); }
.mt-nav .sub li:last-child a { border-bottom: 0; }
.mt-nav .sub a:hover, .mt-nav .sub a:focus-visible { color: var(--mt-g); background: rgba(1, 50, 32, .04); }
.mt-nav .has-sub:hover > .sub, .mt-nav .has-sub:focus-within > .sub, .mt-nav .has-sub.open > .sub { display: flex; }

.mt-lang-switch {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 10px; flex-shrink: 0;
  border: 1px solid rgba(1, 50, 32, .18); background: transparent; text-decoration: none;
  transition: border-color .2s, background .2s;
}
.mt-lang-switch:hover { border-color: var(--mt-gold); background: rgba(200, 158, 75, .06); }
.mt-lang-flag { width: 20px; height: 14px; border-radius: 2px; display: block; object-fit: cover; }
.mt-lang-divider { width: 1px; height: 12px; background: rgba(1, 50, 32, .2); }
.mt-lang-code { font-size: 9px; letter-spacing: .38em; text-transform: uppercase; color: var(--mt-g); font-weight: 700; line-height: 1; }

.mt-nav-toggle {
  display: none; background: none; border: 1px solid rgba(1, 50, 32, .18); color: var(--mt-g);
  font: 700 9px 'Lato', sans-serif; letter-spacing: .38em; text-transform: uppercase; padding: 10px 14px; cursor: pointer;
}

@media (max-width: 860px) {
  .mt-header-inner { flex-wrap: wrap; padding: 10px 20px; }
  .mt-nav-toggle { display: inline-block; margin-left: auto; }
  .mt-lang-switch { order: 3; }
  .mt-nav { display: none; order: 4; flex-basis: 100%; background: var(--mt-paper); border-top: 2px solid var(--mt-g); margin: 0 -20px -10px; }
  .mt-nav.open { display: block; }
  .mt-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .mt-nav a { padding: 12px 22px; border-bottom: 1px solid rgba(1, 50, 32, .08); }
  .mt-nav .sub { position: static; display: none; border: 0; box-shadow: none; background: rgba(1, 50, 32, .03); padding: 0; }
  .mt-nav .sub a { padding-left: 38px; }
  .mt-nav .has-sub:hover > .sub { display: none; }
  .mt-nav .has-sub.open > .sub { display: flex; }
}

/* ── Forms (ported from the Fluent Forms styling) ─────────────── */
.mt-form { font-family: 'Lato', sans-serif; color: var(--mt-ink); }
.mt-form .mt-row { display: flex; gap: 16px; }
.mt-form .mt-row > .mt-field { flex: 1; min-width: 0; }
.mt-form .mt-field { margin-bottom: 20px; }
.mt-form label.mt-label {
  display: block; font-size: 8px; letter-spacing: .45em; text-transform: uppercase; font-weight: 700;
  color: var(--mt-gold-d); opacity: .85; margin-bottom: 7px;
}
.mt-form .mt-req::after { content: " *"; color: var(--mt-gold); font-size: 11px; }
.mt-form input[type="text"], .mt-form input[type="email"], .mt-form input[type="tel"],
.mt-form input[type="number"], .mt-form input[type="date"], .mt-form textarea, .mt-form select {
  font: 14px 'Lato', sans-serif; color: var(--mt-ink); background: var(--mt-paper);
  border: 1px solid var(--mt-rule); border-bottom: 1px solid var(--mt-gold); border-radius: 0;
  padding: 10px 14px; width: 100%; outline: none; box-shadow: none; transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
.mt-form input:focus, .mt-form textarea:focus, .mt-form select:focus { border-color: var(--mt-gold); border-bottom-color: var(--mt-g); }
.mt-form textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
.mt-form select {
  padding-right: 36px; cursor: pointer; background-repeat: no-repeat; background-position: right 14px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a7828' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.mt-form input::placeholder, .mt-form textarea::placeholder { color: var(--mt-muted); opacity: .45; }
.mt-form .mt-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; line-height: 1.6; color: var(--mt-muted); }
.mt-form .mt-check input { width: 15px; height: 15px; margin-top: 3px; flex-shrink: 0; accent-color: var(--mt-g); }
.mt-form .mt-form-btn {
  font: 700 10px 'Lato', sans-serif; letter-spacing: .38em; text-transform: uppercase;
  padding: 14px 36px; background: var(--mt-g); color: var(--mt-cream); border: 0; border-radius: 0; cursor: pointer; transition: background .2s;
}
.mt-form .mt-form-btn:hover { background: #024a30; }
.mt-form .mt-form-btn[disabled] { opacity: .6; cursor: wait; }
.mt-form .mt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mt-form .mt-form-status { margin: 14px 0 0; font-size: 13px; color: var(--mt-error); min-height: 1em; }
.mt-form .mt-form-status a { color: inherit; }
.mt-form-success {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; color: var(--mt-g);
  background: rgba(1, 50, 32, .04); border-left: 3px solid var(--mt-gold); padding: 18px 22px; line-height: 1.6;
}
.mt-form-success a { color: var(--mt-g); }
@media (max-width: 520px) { .mt-form .mt-row { flex-direction: column; gap: 0; } }

/* ── Experience booking modal: close button (base style was inherited from the old theme) ── */
#mtexp-modal-close {
  background: none; border: 0; padding: 0; cursor: pointer; float: right;
  font: 700 9px 'Lato', sans-serif; letter-spacing: .38em; text-transform: uppercase; color: var(--mt-muted);
}

/* ── Native content (converted from Elementor heading / text / button widgets) ── */
.mt-h { font-family: 'Playfair Display SC', serif; font-weight: 400; color: var(--mt-g); line-height: 1.2; margin: 0; }
h1.mt-h { font-size: clamp(28px, 4vw, 44px); }
h2.mt-h { font-size: clamp(22px, 3vw, 30px); }
.mt-text { font-size: 15px; line-height: 1.85; color: var(--mt-muted); }
.mt-text p { margin: 0 0 1.1em; }
.mt-text ul, .mt-text ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.mt-text li { margin-bottom: .5em; }
.mt-text a { color: var(--mt-g); text-decoration-color: var(--mt-gold); }
.mt-text h3 { font-family: 'Playfair Display SC', serif; font-weight: 400; color: var(--mt-g); font-size: 19px; margin: 1.6em 0 .6em; }
.mt-btn-wrap { margin: 0; }
.mt-btn {
  display: inline-block; background: var(--mt-g); color: var(--mt-cream); text-decoration: none;
  font: 700 10px 'Lato', sans-serif; letter-spacing: .38em; text-transform: uppercase; padding: 15px 34px; transition: background .2s;
}
.mt-btn:hover { background: #024a30; }

/* Long-form native pages (legal, donations): keep line length readable */
.mt-sec .mt-inner:has(> .mt-text, > .mt-h) { max-width: 780px; }

/* Dark sections made from native widgets: light text, gold buttons */
.mt-dark .mt-text { color: #f1f1f1; }
.mt-dark .mt-text a { color: var(--mt-gold); }
.mt-dark .mt-btn { background: var(--mt-gold); color: var(--mt-g); }
.mt-dark .mt-btn:hover { background: #d4b068; }