/* ===========================================================================
   Vista Destination — compliance chrome
   ---------------------------------------------------------------------------
   Deliberately standalone. The site has two rendering paths (the CodeIgniter
   layout and two self-contained Tailwind landing pages), and the disclosure
   must look and behave identically on both. A shared stylesheet is the only
   way to guarantee that; duplicating utility classes in each template is how
   the original drift happened.

   Palette is inherited from the existing brand navy (#063b73 / #042f5f) so the
   bar reads as part of the product, not as a bolted-on legal banner. A strip
   that looks like boilerplate gets ignored by users and discounted by
   reviewers; one that looks intentional gets read.
   =========================================================================== */

:root {
  --vd-c-navy: #042f5f;
  --vd-c-navy-deep: #02203f;
  --vd-c-amber: #f5c26b;
  --vd-c-ink: #0f172a;
  --vd-c-muted: #64748b;
  --vd-c-line: rgba(255, 255, 255, 0.16);
}

/* --------------------------------------------------------------------------
   Above-the-fold disclosure strip
   -------------------------------------------------------------------------- */
.vd-compliance-bar {
  background: var(--vd-c-navy-deep);
  color: #eef2f7;
  border-bottom: 1px solid var(--vd-c-line);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  position: relative;
  z-index: 60;
}

.vd-compliance-bar__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.625rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.vd-compliance-bar__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: var(--vd-c-amber);
}

.vd-compliance-bar p {
  margin: 0;
  font-size: 0.8125rem; /* 13px — never smaller; must be legible on a phone */
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: #dbe4ef;
}

.vd-compliance-bar strong {
  color: #ffffff;
  font-weight: 600;
}

.vd-compliance-bar a {
  color: var(--vd-c-amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.vd-compliance-bar a:hover,
.vd-compliance-bar a:focus-visible {
  color: #ffd89b;
}

.vd-compliance-bar a:focus-visible {
  outline: 2px solid var(--vd-c-amber);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .vd-compliance-bar__inner { padding: 0.5rem 1rem; }
  .vd-compliance-bar p { font-size: 0.75rem; line-height: 1.4; }
}

/* --------------------------------------------------------------------------
   Phone call-to-action disclosure
   Sits adjacent to every tel: link so a caller cannot mistake the number for
   an airline support line. This is the single highest-risk surface on the
   site: a phone number plus travel context is the exact shape of the airline
   support-desk impersonation pattern that ad networks police hardest.
   -------------------------------------------------------------------------- */
.vd-phone-disclosure {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--vd-c-muted);
  font-weight: 500;
}

.vd-phone-disclosure--onDark { color: rgba(226, 232, 240, 0.86); }

/* --------------------------------------------------------------------------
   Footer disclosure block
   -------------------------------------------------------------------------- */
.vd-compliance-footer {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  padding: 1.75rem 0 0.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

@media (min-width: 900px) {
  .vd-compliance-footer { grid-template-columns: 1.6fr 1fr; gap: 2.5rem; }
}

.vd-compliance-footer__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--vd-c-amber);
}

.vd-compliance-footer p {
  margin: 0;
  font-size: 0.775rem;
  line-height: 1.65;
  color: rgba(203, 213, 225, 0.92);
}

/* Light-surface variant for legal pages rendered on white */
.vd-compliance-footer--light .vd-compliance-footer__title { color: var(--vd-c-navy); }
.vd-compliance-footer--light p { color: #475569; }

/* --------------------------------------------------------------------------
   Accessibility floor
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vd-compliance-bar,
  .vd-compliance-bar * { transition: none !important; animation: none !important; }
}