/* Shared site chrome and the East Marvel Thailand look (staff template, 2026-11).
 *
 * Linked by every customer page, last or nearly last in its <head>. Holds the tokens,
 * the type, the header + phone menu, the footer, the small shared pieces (.th-wrap,
 * .th-eyebrow, .th-btn), the forms, the trip list and the chat button. Pages are built on
 * different stacks (compiled Tailwind, the guide generator's own CSS), so what must look the
 * same everywhere is pinned here, some of it with !important against utilities and inline
 * font styles. The header's links, buttons and script hooks are untouched: a line under the
 * header is a box-shadow, not a border, so sticky offsets keep working.
 *
 * Page layouts live elsewhere: assets/thailand-home.css, assets/thailand-pages.css,
 * assets/destination-editorial.css, and the tour shell's own <style>.
 * Fonts: assets/fonts.css (the home page inlines the same rules; keep them in step).
 * Small text and buttons use the darker shades (--em-coral 4.9:1, --em-bronze 5.8:1 on white);
 * the template's --em-hibiscus and --em-saffron stay for shapes and large type. */

html:root {
  --em-white: #ffffff;
  --em-fog: #f6f8f7;
  --em-cream: #f7f4ee;
  --em-ink: #14201c;
  --em-soft: #4b5a53;
  --em-muted: #5f6f67;
  --em-lagoon: #0e9aa7;
  --em-lagoon-deep: #0a6f79;
  --em-mist: #e8f7f5;
  --em-palm: #1f8a5b;
  --em-green: #1f6b4f;
  --em-saffron: #c9a24a;
  --em-sun: #ffe3a3;
  --em-amber: #ef9f1b;
  --em-bronze: #80600a;
  --em-hibiscus: #e4572e;
  --em-coral: #c8421c;
  --em-coral-dark: #a93615;
  --em-forest: #12332e;
  --em-forest-2: #0f3f3a;
  --em-forest-3: #164a3f;
  --em-forest-4: #0c2f35;
  --em-line: rgba(20, 32, 28, .1);
  --em-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --em-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* the guide generator's own tokens */
  --blue: #1f6b4f;
  --gold: #c8421c;
  --red: #c8421c;
  --ink: #14201c;
  --muted: #5f6f67;
  --line: rgba(20, 32, 28, .1);
  --soft: #f6f8f7;
}

/* ── type ─────────────────────────────────────────────────────────────── */
body, header, #mobile-menu, button, input, select, textarea, .em-trip-cart-root, #em-chat-panel, #em-gemini-chat-widget {
  font-family: var(--em-sans) !important;
}
body { color: var(--em-ink); line-height: 1.55; }
h1, h2, [style*="Playfair"], .brand strong, #em-trip-cart-modal-title {
  font-family: var(--em-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--em-lagoon) !important;
  outline-offset: 2px;
}

/* ── shared pieces ────────────────────────────────────────────────────── */
.th-wrap { width: min(1200px, calc(100% - 36px)); margin: 0 auto; }
.th-eyebrow { margin: 0; color: var(--em-coral); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.th-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.th-btn--white { background: #fff; color: var(--em-ink); }
.th-btn--white:hover { background: var(--em-sun); }
.th-btn--accent { background: var(--em-coral); color: #fff; }
.th-btn--accent:hover { background: var(--em-coral-dark); color: #fff; }

/* ── header: the same logo and the same six links ─────────────────────── */
header.sticky, .site-header {
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 1px 0 var(--em-line) !important;
}
header .text-\[\#14532d\][style*="Playfair"], .brand strong {
  color: var(--em-ink) !important;
  font-family: var(--em-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.75rem !important;
}
header .text-\[\#b8860b\], header .text-\[\#b8860b\].uppercase, .brand small {
  color: var(--em-lagoon-deep) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  line-height: 1rem !important;
}
header nav .rounded-full, .desktop-nav a {
  position: relative;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--em-soft) !important;
  font-weight: 600 !important;
}
header nav .rounded-full:hover, .desktop-nav a:hover { color: var(--em-coral) !important; background: transparent !important; }
header nav .rounded-full.bg-gray-100, .desktop-nav a[style*="background"] {
  color: var(--em-coral) !important;
  background: transparent !important;
}
header nav .rounded-full.bg-gray-100::after, .desktop-nav a[style*="background"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 2px;
  background: var(--em-hibiscus); pointer-events: none;
}
.hover\:text-primary:hover { color: var(--em-coral) !important; }
#mobile-menu a { color: var(--em-ink) !important; font-family: var(--em-serif); font-weight: 400 !important; font-size: 30px; line-height: 1.1; }
#mobile-menu-button:not(.md\:hidden) { background: var(--em-coral) !important; }
#close-menu-button { color: var(--em-ink) !important; }
@media (max-width: 430px) {
  header nav > a:first-child > span > span:first-child { font-size: 1.2rem !important; }
}

/* ── footer, every page ───────────────────────────────────────────────── */
footer.bg-text-dark, body > footer {
  background: var(--em-forest) !important;
  color: rgba(255,255,255,.88) !important;
}
footer h4 { font-family: var(--em-sans); font-weight: 700 !important; }
footer .text-\[\#f2b807\] { color: var(--em-saffron) !important; text-shadow: none; }
footer .text-gray-400 { color: rgba(255,255,255,.78) !important; }
footer a.text-gray-400:hover { color: #fff !important; }
footer .text-gray-500 { color: rgba(255,255,255,.66) !important; }
footer .border-gray-700 { border-color: rgba(255,255,255,.14) !important; }

/* ── forms ────────────────────────────────────────────────────────────── */
form input:not([type="checkbox"]):not([type="radio"]), form select, form textarea {
  border-color: var(--em-line) !important;
  border-radius: 14px !important;
  background: #fff;
}
form input:focus, form select:focus, form textarea:focus {
  border-color: var(--em-lagoon) !important;
  box-shadow: 0 0 0 3px rgba(14,154,167,.16) !important;
  outline: 0;
}
form .text-gray-400 { color: var(--em-muted) !important; }

/* ── the trip list (its stylesheet is injected at runtime, after everything: hence !important) ── */
.em-trip-cart-tab { background: var(--em-forest-3) !important; }
.em-trip-cart-btn-primary { background: var(--em-coral) !important; border-radius: 999px !important; }
button.em-trip-cart-add { border-color: var(--em-lagoon-deep) !important; color: var(--em-lagoon-deep) !important; border-radius: 999px !important; }
button.em-trip-cart-add:hover { background: var(--em-lagoon-deep) !important; color: #fff !important; }
button.em-trip-cart-add--solid { background: var(--em-coral) !important; border-color: var(--em-coral) !important; color: #fff !important; }
button.em-trip-cart-add--solid:hover { background: var(--em-coral-dark) !important; border-color: var(--em-coral-dark) !important; color: #fff !important; }
main button.em-trip-cart-add.pkg-hero-trip-btn { background: var(--em-coral) !important; border-color: var(--em-coral) !important; color: #fff !important; }
main button.em-trip-cart-add.pkg-hero-trip-btn:hover { background: var(--em-coral-dark) !important; border-color: var(--em-coral-dark) !important; color: #fff !important; }

/* ── floating pieces ──────────────────────────────────────────────────── */
html body #em-chat-fab { background: var(--em-forest-3) !important; }
html body #em-chat-fab:hover { background: var(--em-forest-2) !important; }
#em-cookie-notice { background: var(--em-forest) !important; border-radius: 18px !important; }
#em-cookie-notice a { color: var(--em-sun) !important; }
#em-cookie-notice button { background: var(--em-sun) !important; color: var(--em-ink) !important; border-radius: 999px !important; }