/* ==========================================================================
   TRAcc — Proven Conference landing page (/proven)
   Loaded only by page-proven.php, layered on top of main.css. Every value
   here comes from main.css's design tokens, so this page tracks the site's
   colors, type, spacing and dark mode automatically.

   The page has one job: take a booking from someone who just scanned the QR
   code at the booth. So the hero is deliberately short and the calendar sits
   as close to the top of the document as it can.
   ========================================================================== */

/* ---------- Minimal header: logo + theme toggle, no nav ---------- */
.site-header--landing .site-header__inner{ justify-content: space-between; }

/* ---------- Hero ---------- */
.landing-hero{ padding-block: var(--space-6) var(--space-5); }
.landing-hero__inner{ text-align: center; }
.landing-hero h1{ font-size: var(--text-3xl); margin-block: var(--space-3) var(--space-4); }
.landing-hero .lede{ margin-inline: auto; max-width: 42ch; }
.landing-hero__specialty{
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------- Booking ---------- */
.landing-booking{ padding-bottom: var(--space-7); }
.landing-actions{ display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.landing-actions--center{ justify-content: center; }
.landing-note{
  margin-top: var(--space-3);
  margin-inline: auto;
  max-width: 46ch;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Calendly inline embed. The widget script is lazy-loaded and brings its own
   spinner, so the container just needs to be a light surface — which also
   keeps the iframe reading as an intentional white card in dark mode. */
.calendly-embed{
  height: 700px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---------- Reassurance below the fold ---------- */
/* h2 at the theme's default --text-3xl would out-shout a page this short. */
.landing-h2{ font-size: var(--text-2xl); }

.check-list{ display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.check-list li{ display: flex; gap: var(--space-3); align-items: flex-start; }
.check-list svg{ width: 22px; height: 22px; color: var(--color-orange); flex-shrink: 0; margin-top: 3px; }

/* Conference offer — accent-tinted, but deliberately quieter than the
   calendar above it. The hat is a nudge, not the reason to book. */
.offer-card{
  background: var(--color-orange-050);
  border: 1.5px solid var(--color-orange-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.offer-card--compact{ margin-top: var(--space-6); padding: var(--space-5); }
.offer-card__badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-orange);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  margin-bottom: var(--space-3);
}
.offer-card p{ color: var(--color-text); font-size: var(--text-sm); }
:root[data-theme='dark'] .offer-card{
  background: rgba(224,102,42,0.10);
  border-color: rgba(224,102,42,0.34);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme='light']) .offer-card{
    background: rgba(224,102,42,0.10);
    border-color: rgba(224,102,42,0.34);
  }
}

.landing-closing{
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------- Simplified footer ---------- */
.site-footer--landing{ padding-block: var(--space-7) var(--space-6); text-align: center; }
.footer-landing{ display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.footer-landing .brand{ color: #fff; }
.footer-landing__tagline{
  color: var(--color-text-muted-on-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-landing__contact{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.footer-landing__legal{ color: var(--color-text-muted-on-dark); font-size: var(--text-xs); margin-top: var(--space-2); }

/* ---------- Phone ----------
   Tighter still, so the calendar is reachable in one short scroll. The
   fallback button goes full width for an easy tap target, and its label is
   allowed to wrap rather than clip (.btn defaults to white-space: nowrap). */
@media (max-width: 640px){
  .landing-hero{ padding-block: var(--space-5) var(--space-4); }
  .landing-hero h1{ margin-block: var(--space-3) var(--space-3); }
  .landing-hero .lede{ font-size: var(--text-base); }
  .landing-booking{ padding-bottom: var(--space-6); }
  .tracc-landing .landing-actions .btn{ width: 100%; white-space: normal; padding-inline: var(--space-4); }
  .calendly-embed{ height: 940px; border-radius: var(--radius-md); }
}