:root {
  --ai-navy: #1d3557;
  --ai-warning: #e9a23b;
}

body { background: #f8f7f4; }

.ai-skip-link {
  position: absolute; left: -999px; top: auto;
  background: #fff; color: #000; padding: .5rem 1rem; z-index: 2000;
}
.ai-skip-link:focus { left: 1rem; top: 1rem; }

.ai-hero {
  background: linear-gradient(135deg, var(--ai-navy), #457b9d);
  color: #fff;
}

.ai-freshness-note {
  background: #fbf6e9;
  border: 1px solid #ecdfbb;
  border-radius: .5rem;
  padding: .6rem .9rem;
}

.ai-region-card {
  border: 1px solid #e5e1d8;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ai-region-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.08);
}

.ai-category-card { border: 1px solid #e5e1d8; }

.ai-sidebar-sticky { position: sticky; top: 5rem; }

.navbar-brand .text-warning { color: var(--ai-warning) !important; }
.btn-warning { background-color: var(--ai-warning); border-color: var(--ai-warning); color: #1d1f23; }
.btn-warning:hover { background-color: #d68f27; border-color: #d68f27; color: #1d1f23; }
.text-warning { color: var(--ai-warning) !important; }

/* ---------------------------------------------------------------------
   Legacy content re-skin — recreates the original Yola two-column
   name/address/price/button layout using the SAME class names the
   archived markup already carries, since the per-widget inline <style>
   blocks were stripped by the extractor. Also cleans up leftover
   inline font-family/size clutter from the legacy pages.
   --------------------------------------------------------------------- */
.legacy-content { font-size: 1rem; line-height: 1.6; color: #2b2b2b; }
.legacy-content font { font: inherit !important; color: inherit !important; }
.legacy-content h3.ai-attraction-name {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Merriweather', serif;
  margin: 0 0 .15rem;
  color: var(--ai-navy);
}

.legacy-content .Panel_Default {
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid #e5e1d8;
  border-radius: .5rem;
  background: #fff;
}
.legacy-content .Panel_Default:empty,
.legacy-content .Panel_Default:has(> :only-child:empty) { display: none; }

.legacy-content .column_divider::after,
.legacy-content .layout_1-column::after { content: ""; display: table; clear: both; }

.legacy-content .left,
.legacy-content .right {
  width: 50%;
  float: left;
  box-sizing: border-box;
  padding: 0 .5rem;
}
.legacy-content .left { font-weight: 600; }
.legacy-content .right { color: #555; }

@media (max-width: 576px) {
  .legacy-content .left,
  .legacy-content .right { width: 100%; float: none; padding: .15rem 0; }
}

.legacy-content .sys_button,
.legacy-content .Button_Default {
  text-align: right;
}
.legacy-content .sys_button a,
.legacy-content .Button_Default a {
  display: inline-block;
  padding: .35rem 1rem;
  border: 2px solid var(--ai-navy);
  border-radius: 999px;
  color: var(--ai-navy) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
}
.legacy-content .sys_button a:hover,
.legacy-content .Button_Default a:hover {
  background: var(--ai-navy);
  color: #fff !important;
}

.legacy-content img { max-width: 100%; height: auto; }

/* Contact form honeypot — hidden from sighted users, still in the tab/DOM
   order so bots that fill every field trip it, but screen readers skip it
   via aria-hidden on the wrapper. */
.ai-honeypot { position: absolute; left: -9999px; top: -9999px; }