/* ==========================================================================
   CheckMyGuest — custom stylesheet
   Loaded AFTER the Tailwind Play CDN so these rules can override utilities.
   Everything here is plain CSS. No build step, no preprocessor.
   Edit freely — the whole file is hand-written and commented.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Change these five values to re-skin the entire site.
   -------------------------------------------------------------------------- */
:root {
  --cmg-brand: #3245c9;        /* primary blue (brand) — matches the logo shield */
  --cmg-brand-dark: #26379e;   /* hover state for primary buttons */
  --cmg-brand-light: #4f63d6;  /* lighter blue for gradient stops */
  --cmg-ink: #0f172a;          /* headings / body text */
  --cmg-muted: #475569;        /* secondary text */
  --cmg-accent: #e2482c;       /* vermillion highlight (logo dot) — used sparingly */
  --cmg-line: #e2e8f0;         /* hairline borders */
  --cmg-tint: #eef1fc;         /* very light indigo wash for panels */
}

/* --------------------------------------------------------------------------
   2. Base typography
   System font stack = zero webfont requests = faster first paint.
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--cmg-ink);
  background: #ffffff;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/* Anchor offset so in-page jumps don't hide under the sticky header */
:target {
  scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   3. Reusable components
   Used across home, city and guide pages so markup stays short.
   -------------------------------------------------------------------------- */

/* Primary call-to-action button (all primary CTAs point to a partner tool) */
.cmg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 0.6rem;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease, border-color 0.18s ease;
}

/* The arrow inside CTAs nudges forward on hover */
.cmg-btn:hover { transform: translateY(-2px); }
.cmg-btn:active { transform: translateY(0); }

.cmg-btn-primary {
  background-image: linear-gradient(135deg, var(--cmg-brand-light), var(--cmg-brand));
  color: #ffffff;
  box-shadow: 0 4px 14px -4px rgba(50, 69, 201, 0.5);
}

.cmg-btn-primary:hover {
  box-shadow: 0 8px 22px -6px rgba(50, 69, 201, 0.6);
}

/* Light shine sweep across primary buttons on hover */
.cmg-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.cmg-btn-primary:hover::before { transform: translateX(120%); }

/* FIX: buttons that sit inside .cmg-prose must NOT inherit the prose link
   styling (blue text + underline), which was hiding the white button label.
   Higher specificity than ".cmg-prose a" so the button colours win. */
.cmg-prose a.cmg-btn { text-decoration: none; }
.cmg-prose a.cmg-btn-primary { color: #ffffff; }
.cmg-prose a.cmg-btn-secondary { color: var(--cmg-brand); }

/* FIX: the inverted white CTA on the dark band uses Tailwind's !bg-white.
   The gradient background-image was painting over it, leaving dark-on-blue.
   Drop the gradient when !bg-white is applied so the white button shows. */
.cmg-btn-primary.\!bg-white {
  background-image: none;
  box-shadow: 0 4px 14px -6px rgba(15, 23, 42, 0.25);
}

.cmg-btn-secondary {
  background: #ffffff;
  color: var(--cmg-brand);
  border: 1.5px solid var(--cmg-brand);
}

.cmg-btn-secondary:hover {
  background: var(--cmg-tint);
  transform: translateY(-1px);
}

/* Inverted variant for use on the dark CTA band */
.cmg-btn-ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.cmg-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Keyboard focus ring — visible for accessibility, hidden for mouse users */
.cmg-btn:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--cmg-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. TL;DR answer block
   Sits at the top of every page. Answer engines lift this text directly,
   so it must be real HTML — never injected by JavaScript.
   -------------------------------------------------------------------------- */
.cmg-tldr {
  background: var(--cmg-tint);
  border-left: 4px solid var(--cmg-brand);
  border-radius: 0 0.6rem 0.6rem 0;
  padding: 1.25rem 1.5rem;
}

.cmg-tldr p {
  margin: 0;
  color: #1e2a63;
}

.cmg-tldr .cmg-tldr-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cmg-brand);
  margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   5. FAQ accordion
   Built on native <details>/<summary>. The answer text is present in the DOM
   even when collapsed, so crawlers that do not run JS still read it.
   -------------------------------------------------------------------------- */
.cmg-faq details {
  border: 1px solid var(--cmg-line);
  border-radius: 0.6rem;
  background: #ffffff;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.cmg-faq details[open] {
  border-color: var(--cmg-brand);
  background: #fbfcff;
}

.cmg-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1.25rem;
  font-weight: 600;
  color: var(--cmg-ink);
  position: relative;
}

/* Hide the default disclosure triangle in WebKit and Firefox */
.cmg-faq summary::-webkit-details-marker { display: none; }
.cmg-faq summary::marker { content: ""; }

/* Custom +/- indicator drawn in CSS (no icon font, no SVG request) */
.cmg-faq summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--cmg-brand);
  transition: transform 0.25s ease;
}

.cmg-faq details[open] summary::after {
  transform: translateY(-50%) rotate(135deg);
}

/* Slide the answer body open when details is toggled */
.cmg-faq details[open] .cmg-faq-body {
  animation: cmgFaqOpen 0.28s ease;
}
@keyframes cmgFaqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cmg-faq summary:hover {
  background: var(--cmg-tint);
}

.cmg-faq .cmg-faq-body {
  padding: 0 1.25rem 1.15rem;
  color: var(--cmg-muted);
}

.cmg-faq .cmg-faq-body p:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   6. Long-form prose (guide pages)
   -------------------------------------------------------------------------- */
.cmg-prose h2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 2.75rem 0 0.85rem;
  color: var(--cmg-ink);
  scroll-margin-top: 90px;
}

.cmg-prose h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
  color: var(--cmg-ink);
  scroll-margin-top: 90px;
}

.cmg-prose p {
  margin: 0 0 1.1rem;
  color: #334155;
}

/* The 40–60 word direct answer that follows each question heading.
   Styled slightly heavier so both readers and extractors spot it. */
.cmg-prose .cmg-answer {
  font-size: 1.05rem;
  color: var(--cmg-ink);
  font-weight: 500;
  border-left: 3px solid var(--cmg-line);
  padding-left: 1rem;
}

.cmg-prose ul,
.cmg-prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.35rem;
  color: #334155;
}

.cmg-prose ul { list-style: disc; }
.cmg-prose ol { list-style: decimal; }
.cmg-prose li { margin-bottom: 0.5rem; }

.cmg-prose a {
  color: var(--cmg-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cmg-prose a:hover { color: var(--cmg-brand-dark); }

/* --------------------------------------------------------------------------
   7. Comparison tables
   Wrapped in .cmg-table-wrap so wide tables scroll instead of breaking
   the mobile layout.
   -------------------------------------------------------------------------- */
/* Grid children default to min-width:auto, which means they refuse to shrink
   below their content's minimum width. A 560px-wide comparison table inside a
   grid column therefore forces the whole page to scroll sideways on phones.
   Allowing grid children to shrink confines that scroll to the table wrapper,
   which is where it belongs. */
.grid > * {
  min-width: 0;
}

.cmg-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--cmg-line);
  border-radius: 0.6rem;
  margin: 0 0 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.cmg-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.cmg-table caption {
  caption-side: top;
  text-align: left;
  padding: 0.85rem 1rem;
  font-weight: 600;
  color: var(--cmg-muted);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--cmg-line);
}

.cmg-table th,
.cmg-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--cmg-line);
  vertical-align: top;
}

.cmg-table thead th {
  background: #f8fafc;
  font-weight: 700;
  color: var(--cmg-ink);
  white-space: nowrap;
}

.cmg-table tbody tr:last-child td {
  border-bottom: none;
}

.cmg-table tbody th {
  font-weight: 600;
  color: var(--cmg-ink);
  background: #fcfdfe;
}

/* --------------------------------------------------------------------------
   8. Small utilities
   -------------------------------------------------------------------------- */

/* "Last updated" line shown near the top of every content page */
.cmg-updated {
  font-size: 0.85rem;
  color: var(--cmg-muted);
}

/* Label applied to illustrative / placeholder content so it is never
   mistaken for a verified customer claim. */
.cmg-placeholder-note {
  font-size: 0.8rem;
  color: var(--cmg-muted);
  font-style: italic;
}

/* Screen-reader-only text */
.cmg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Subtle hero background wash — the two colour pools drift slowly */
.cmg-hero {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%, #dbe1fa 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 10%, #fbe0da 0%, transparent 50%),
    #ffffff;
  overflow: hidden;
}

/* Slow-drifting aurora blobs layered behind hero content */
.cmg-hero::before,
.cmg-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.cmg-hero::before {
  width: 32rem; height: 32rem;
  top: -8rem; left: -6rem;
  background: radial-gradient(circle, rgba(79, 99, 214, 0.28), transparent 68%);
  animation: cmgDrift 16s ease-in-out infinite alternate;
}
.cmg-hero::after {
  width: 26rem; height: 26rem;
  top: -4rem; right: -6rem;
  background: radial-gradient(circle, rgba(226, 72, 44, 0.18), transparent 68%);
  animation: cmgDrift 20s ease-in-out infinite alternate-reverse;
}
.cmg-hero > * { position: relative; z-index: 1; }

@keyframes cmgDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(3rem, 2rem) scale(1.12); }
}

/* Hero content rises in once on page load (above the fold, so not scroll-tied).
   Structural selectors mean it works on the home, city and guide heroes with
   no per-page markup. */
.cmg-hero h1,
.cmg-hero > div > .grid > div:first-child > p,
.cmg-hero > div > .grid > div:first-child > .inline-flex,
.cmg-hero > div > .grid > div:first-child > div,
.cmg-hero .cmg-tldr,
.cmg-hero .cmg-updated {
  animation: cmgHeroIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cmg-hero > div > .grid > div:first-child > .inline-flex { animation-delay: 0.02s; }
.cmg-hero h1 { animation-delay: 0.08s; }
.cmg-hero > div > .grid > div:first-child > p { animation-delay: 0.16s; }
.cmg-hero > div > .grid > div:first-child > div { animation-delay: 0.24s; }
.cmg-hero .cmg-tldr { animation-delay: 0.30s; }
.cmg-hero .cmg-updated { animation-delay: 0.38s; }

@keyframes cmgHeroIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cmg-hero h1,
  .cmg-hero > div > .grid > div:first-child > p,
  .cmg-hero > div > .grid > div:first-child > .inline-flex,
  .cmg-hero > div > .grid > div:first-child > div,
  .cmg-hero .cmg-tldr,
  .cmg-hero .cmg-updated { animation: none; }
}

/* Card hover lift used in the feature grid */
.cmg-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.cmg-card:hover {
  transform: translateY(-4px);
  border-color: #b9c3f4;
  box-shadow: 0 18px 40px -18px rgba(50, 69, 201, 0.38);
}

/* Icon tile inside each feature card gains a soft brand glow on card hover */
.cmg-card .cmg-icon,
.cmg-card > div:first-child {
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.cmg-card:hover > div:first-child {
  transform: scale(1.08) rotate(-3deg);
}

/* --------------------------------------------------------------------------
   9. Scroll-reveal + entrance animation
   Elements tagged by main.js with .cmg-reveal fade and rise into place as
   they enter the viewport. If JS is off, .cmg-reveal is never added, so
   content stays fully visible — nothing is hidden behind JavaScript.
   -------------------------------------------------------------------------- */
.cmg-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.cmg-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger children within a revealed group (feature cards, pills, etc.) */
.cmg-reveal[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.cmg-reveal[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
.cmg-reveal[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.cmg-reveal[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.06s; }
.cmg-reveal[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.12s; }
.cmg-reveal[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.cmg-reveal[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.24s; }
.cmg-reveal[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.30s; }

/* --------------------------------------------------------------------------
   10. Header, nav, mobile menu, back-to-top polish
   -------------------------------------------------------------------------- */
/* Sticky header gains depth once the page is scrolled (class added by JS) */
header.cmg-scrolled {
  box-shadow: 0 6px 24px -14px rgba(15, 23, 42, 0.28);
}
header { transition: box-shadow 0.25s ease, background-color 0.25s ease; }

/* The header logo lifts very slightly on hover */
header a[aria-label="CheckMyGuest home"] img {
  transition: transform 0.25s ease;
}
header a[aria-label="CheckMyGuest home"]:hover img {
  transform: translateY(-1px) scale(1.02);
}

/* Animated underline on desktop nav links */
nav[aria-label="Primary"] a {
  position: relative;
}
nav[aria-label="Primary"] a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px; width: 100%;
  background: var(--cmg-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  border-radius: 2px;
}
nav[aria-label="Primary"] a:hover::after { transform: scaleX(1); }

/* Mobile menu slide-down when revealed by JS */
[data-nav-menu]:not(.hidden) {
  animation: cmgMenuDown 0.22s ease;
}
@keyframes cmgMenuDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Back-to-top button injected by main.js */
.cmg-top {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 60;
  height: 2.8rem; width: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-image: linear-gradient(135deg, var(--cmg-brand-light), var(--cmg-brand));
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(50, 69, 201, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.cmg-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.cmg-top:hover { transform: translateY(-2px) scale(1.05); }
.cmg-top:focus-visible { outline: 3px solid var(--cmg-accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   11. Feature icon tiles + link cards + stat count-up
   -------------------------------------------------------------------------- */
/* City / link cards get a smooth border+lift treatment */
a.cmg-linkcard, .cmg-linkcard {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
a.cmg-linkcard:hover, .cmg-linkcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(50, 69, 201, 0.4);
}

/* Numbers that count up keep a stable width so layout doesn't jump */
[data-countup] { font-variant-numeric: tabular-nums; }

/* Accent chip used in trust band */
.cmg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--cmg-tint);
  color: var(--cmg-brand-dark);
}

/* --------------------------------------------------------------------------
   12. Print + reduced-motion courtesy rules
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* Never leave reveal content stuck invisible when motion is off */
  .cmg-reveal,
  .cmg-reveal[data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .cmg-hero::before, .cmg-hero::after { display: none; }
}

@media print {
  header, footer, .cmg-no-print, .cmg-top { display: none !important; }
  .cmg-faq details { break-inside: avoid; }
  .cmg-faq details > .cmg-faq-body { display: block !important; }
  .cmg-reveal { opacity: 1 !important; transform: none !important; }
}