/*
Theme Name: Visit Micronesia
Theme URI: https://github.com/cchandra/visit-micronesia.fm
Author: Visit Micronesia
Description: Clean-room rebuild of the Federated States of Micronesia tourism site theme. Built from scratch (no code carried over from the prior compromised install) with the same content and design as the site's Node.js reference build.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: visit-micronesia
*/

:root {
  --brand: #5191fa;
  --brand-dark: #2f6fd6;
  --accent: #7db02e;
  --text: #1c1e21;
  --bg: #fff;
  --muted: #707a88;
  --border: #e5e5e5;
  --footer-bg: #030338;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

a { color: var(--brand-dark); }
h1, h2, h3 { font-weight: 600; }

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }

.eyebrow {
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin: 0 0 0.35rem;
}
.eyebrow--center { text-align: center; }
.section-title { text-align: center; margin: 0 0 1.75rem; font-size: 1.9rem; }

/* Header */
.site-header { position: relative; }

.top-bar {
  background: #f5f9ff;
  border-bottom: 1px solid var(--border);
}
.top-bar__nav {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0.5rem 0;
}
.top-bar__nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
}
.top-bar__nav a:hover { color: var(--brand-dark); }

.logo-bar {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
}
.logo-bar .wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.logo-bar__brand { flex-shrink: 0; display: block; }
.logo-bar__img { height: 56px; width: auto; display: block; }

.main-nav { flex: 1; }
.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
}
.main-nav > ul > li { position: relative; }
.main-nav a, .main-nav span {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.main-nav a:hover, .main-nav .has-children:hover > span { color: var(--brand-dark); }
.main-nav .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 0.5rem;
  border-radius: 6px;
  min-width: 190px;
  flex-direction: column;
  gap: 0;
  z-index: 20;
  margin-top: 0.5rem;
}
.main-nav .dropdown a { display: block; padding: 0.45rem 0.6rem; border-radius: 4px; }
.main-nav .dropdown a:hover { background: #f5f9ff; }
.main-nav li.has-children:hover .dropdown,
.main-nav li.has-children.is-open .dropdown { display: flex; }
/* Bridge the gap between trigger and dropdown so the pointer never leaves
   the hoverable area while moving down into it (the old hard-to-click gap). */
.main-nav li.has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.5rem;
}
.dropdown-caret { display: inline-block; font-size: 0.7em; margin-left: 0.2rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--text); display: block; }

/* Hero carousel */
.hero-carousel {
  position: relative;
  height: 70vh;
  min-height: 380px;
  max-height: 620px;
  overflow: hidden;
  background: #0a1626;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,3,56,0.35), rgba(3,3,56,0.6));
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide__overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 1rem;
}
.hero-slide__kicker { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; margin: 0 0 0.75rem; opacity: 0.9; }
.hero-slide__title { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0 0 0.5rem; font-weight: 700; }
.hero-slide__tagline { font-size: 1.2rem; margin: 0; opacity: 0.95; }
.hero-carousel__dots {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}
.hero-carousel__dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.hero-carousel__dots button.is-active { background: #fff; }

/* Welcome section */
.welcome { padding: 4rem 0; }
.welcome__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.welcome__content h2 { font-size: 1.9rem; margin: 0 0 1rem; }
.welcome__media img { width: 100%; height: auto; display: block; }

/* Popular destinations */
.popular-destinations {
  padding: 4rem 0;
  background: #f8faff;
}
.destination-filter {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.destination-filter button {
  background: none;
  border: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  cursor: pointer;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}
.destination-filter button.is-active,
.destination-filter button:hover { color: var(--brand-dark); border-bottom-color: var(--brand); }

.destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
}
.destination-card {
  position: relative;
  display: block;
  height: 260px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: #fff;
}
.destination-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
.destination-card__overlay h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.destination-card__stars { color: #ffc93c; font-size: 0.8rem; letter-spacing: 0.15em; }

/* Per-state mini header: own logo, own accent color (matches the real
   site's brand-blue "Read more"/accent-button color across all 4 states). */
.state-header .main-nav a { color: var(--text); }
.state-header .main-nav a:hover { color: #030ba6; }
.state-logo { height: 56px; width: auto; }

.state-page { padding: 2rem 1rem; max-width: 1140px; margin: 0 auto; }
.state-page__welcome { margin-bottom: 3rem; }
.state-page__welcome .content-page__body { max-width: 820px; margin: 0 auto; overflow: auto; }
.state-page__welcome .alignright { float: right; margin: 0 0 1rem 1.5rem; max-width: 45%; height: auto; }
.state-page__welcome .alignleft { float: left; margin: 0 1.5rem 1rem 0; max-width: 45%; height: auto; }
.state-page .eyebrow--center { margin-top: 0; }
.state-page__stay { margin: 0 -1rem 2rem; padding: 3rem 1rem; background: #f8faff; }
.card__location { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.8rem; margin: 0 0 0.25rem; }
.card__location i { color: #030ba6; }

@media (max-width: 900px) {
  .state-page__welcome { grid-template-columns: 1fr; }
}

/* Explore by state / generic card grid (reused on listing pages) */
.home-states { padding: 4rem 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.15s ease;
}
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.card__placeholder { width: 100%; height: 150px; background: #f0f0f0; }
.card__body { padding: 0.75rem 1rem; }
.card__body h2, .card__body h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.card__excerpt { color: var(--muted); font-size: 0.9rem; }

.site-main { max-width: 1140px; margin: 0 auto; padding: 2rem 1rem; min-height: 40vh; }
.site-main:has(> .hero-carousel),
.site-main:has(> .content-page--themed) { max-width: none; padding: 0; }

/* Themed content pages: their markup brings its own theme classes
   (Bootstrap grid, Elementor sections) via the vendored theme CSS. */
.content-page--themed .content-page__body { max-width: none; }
.content-page--themed a.btn,
.content-page--themed .btn-primary { background: var(--brand); border-color: var(--brand); }
.content-page--themed a.btn:hover,
.content-page--themed .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

.content-page__hero { width: 100%; max-height: 420px; object-fit: cover; border-radius: 8px; margin: 1rem 0; }
.content-page__body img { max-width: 100%; height: auto; }

.state-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.state-links a {
  background: var(--brand);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9rem;
}
.state-links a:hover { background: var(--brand-dark); }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 3rem;
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.contact-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: var(--brand);
  border-radius: 8px;
  font-size: 1.1rem;
}
.contact-card h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.contact-card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.contact-card p a { color: var(--brand-dark); }

.contact-form-wrap { max-width: 640px; margin: 0 auto; text-align: center; }
.contact-form-wrap h2 { margin-bottom: 0.25rem; font-size: 1.75rem; }
.contact-form-wrap__intro { color: var(--muted); margin-bottom: 2rem; }
.contact-form-wrap .form-success { margin-bottom: 1.5rem; }
.contact-form-wrap .contact-form { text-align: left; max-width: none; }

.contact-page form { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; }
.inline-fields { display: flex; gap: 1rem; flex-wrap: wrap; }
.inline-fields label { flex: 1; min-width: 120px; }
.contact-page label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; }
.contact-page input, .contact-page textarea {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.contact-page button {
  align-self: flex-start;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
.contact-page button:hover { background: var(--brand-dark); }
.form-success { color: var(--accent); font-weight: 600; }

.link-list { columns: 2; }

/* Footer */
.site-footer {
  background: var(--footer-bg);
  color: #b9bfd6;
  margin-top: 3rem;
  padding: 3rem 0 1.5rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
}
.footer-brand__kicker { margin: 0; font-size: 0.85rem; letter-spacing: 0.1em; color: #8891b5; }
.footer-brand__title { margin: 0 0 1rem; font-size: 1.8rem; color: #fff; }
.footer-copyright { font-size: 0.85rem; margin: 0 0 0.75rem; }
.footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; padding: 0; font-size: 0.8rem; }
.footer-legal a { color: #8891b5; text-decoration: none; }
.footer-legal a:hover { color: #fff; }

.footer-links { display: flex; gap: 3rem; flex-wrap: wrap; }
.footer-links__col h3 { color: #fff; font-size: 0.95rem; margin: 0 0 0.75rem; }
.footer-links__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.footer-links__col a { color: #b9bfd6; text-decoration: none; font-size: 0.9rem; }
.footer-links__col a:hover { color: #fff; }

@media (max-width: 900px) {
  .welcome__grid { grid-template-columns: 1fr; }
  .welcome__media { order: -1; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 780px) {
  .top-bar__nav { justify-content: center; }
  .logo-bar .wrap { flex-wrap: wrap; }
  .nav-toggle { display: flex; margin-left: auto; }
  .main-nav {
    flex-basis: 100%;
    display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav > ul > li { border-top: 1px solid var(--border); }
  .main-nav a, .main-nav span { display: block; padding: 0.65rem 0; }
  .main-nav .dropdown { position: static; box-shadow: none; margin: 0 0 0 1rem; display: none; }
  .main-nav li.has-children:hover .dropdown,
  .main-nav li.has-children.is-open .dropdown { display: flex; }
  .hero-carousel { height: 60vh; }
}

/* Restaurants (sourced from Google Places) */
.restaurant-card__meta { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.35rem; }
.restaurant-card__rating { color: #b8860b; font-weight: 600; font-size: 0.9rem; }
.restaurant-card__ratings-total { color: var(--muted); font-weight: 400; }
.restaurant-card__price { color: var(--accent); font-weight: 700; letter-spacing: 0.05em; }

.restaurant-page__meta { display: flex; align-items: center; gap: 1.25rem; margin: 1rem 0; flex-wrap: wrap; }
.restaurant-page__details { margin: 1.5rem 0; }
.restaurant-page__details dt { font-weight: 600; margin-top: 0.75rem; }
.restaurant-page__details dd { margin: 0.15rem 0 0; color: var(--text); }
.restaurant-page__hours { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; color: var(--muted); }

.google-attribution { margin-top: 2rem; font-size: 0.8rem; color: var(--muted); }

.restaurant-state-group { margin-bottom: 3rem; }
.restaurant-state-group__title {
  font-size: 1.4rem;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
.restaurant-state-group__divider {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 2.5rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.restaurant-page__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}
.restaurant-page__gallery img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; }
.restaurant-page__gallery-main {
  grid-column: span 2;
  grid-row: span 2;
  height: 100% !important;
  min-height: 230px;
}

.review-card { border-top: 1px solid var(--border); padding: 1rem 0; }
.review-card__header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.review-card__rating { color: #b8860b; font-weight: 600; }
.review-card__time { color: var(--muted); font-size: 0.85rem; }
.review-card__text { margin: 0; color: var(--text); }

@media (max-width: 600px) {
  .restaurant-page__gallery-main { grid-column: span 2; min-height: 180px; }
}

/* Elementor's Gallery widget positions items with absolute + calc(var(...))
   masonry math that its own JS computes/repaints on load and resize; without
   that JS the values scraped in are stale and don't reliably paint. Replace
   it with a plain, robust CSS grid using the same background-image divs. */
.e-gallery-container {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.e-gallery-item {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}
.e-gallery-image {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 66.6% !important;
  border-radius: 6px;
  overflow: hidden;
}


.contact-page form, .vm-form { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; }
.inline-fields { display: flex; gap: 1rem; flex-wrap: wrap; }
.inline-fields label { flex: 1; min-width: 120px; }
.contact-page label, .vm-form label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; }
.contact-page input, .contact-page textarea, .vm-form input, .vm-form textarea {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.contact-page button, .vm-form button {
  align-self: flex-start;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}
.form-success { color: var(--brand-dark); font-weight: 600; }
.form-error { color: #a33; font-weight: 600; }


/* WordPress navigation and imported content. */
img, video { max-width: 100%; height: auto; }
.main-nav .sub-menu { display:none; position:absolute; z-index:30; background:#fff; padding:1rem; min-width:190px; box-shadow:0 8px 24px #0002; flex-direction:column; gap:.65rem; }
.main-nav li { position:relative; }
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display:flex; }
.main-nav .sub-menu a { display:block; }
.custom-logo { max-height:65px; width:auto; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:100; background:white; padding:1rem; }
.vm-photo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:2rem 0; }
.vm-photo-grid figure { margin:0; }
.vm-photo-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px; }
.vm-honeypot { position:absolute; left:-10000px; }
.content-page,.listing-page,.news-page,.contact-page { max-width:1140px; margin:auto; padding:2rem 1rem; }
.content-page__body { overflow-wrap:anywhere; }
.content-page__body .elementor-invisible { visibility:visible; }
.state-links { display:flex; flex-wrap:wrap; gap:1rem; margin:2rem 0; }
.state-links a { background:var(--brand); color:white; padding:.7rem 1rem; border-radius:4px; text-decoration:none; }
.site-footer__inner { max-width:1140px; margin:auto; padding:1rem; }
.site-footer__inner > .footer-links { list-style:none; padding:0; }
.site-footer__inner a { color:inherit; }
.destination-card[hidden] { display:none; }
.hero-carousel__dots button { border:2px solid white; }
@media(max-width:780px) {
 .main-nav { display:block; }
 .js .main-nav { display:none; }
 .js .main-nav.is-open { display:block; }
 .main-nav .sub-menu { display:flex; position:static; box-shadow:none; margin-left:1rem; padding:0; }
 .hero-slide__title { font-size:2rem; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }