/* landing-page.css — surgical fix for 4 v2-build gaps on landing pages.
   Loaded only via legacyStyles in custom-landing-page.hbs. Scope is the
   load context (this file does not load anywhere else). */

/* Zone 1 — header visibility on dark hero, using v2-native pattern.
   Mirrors .header-inverse:not(.is-scrolled) from assets/css/components/header.css
   without needing the .header-inverse class on the element itself.
   :not(.is-scrolled) is mutually exclusive with v2's .header.is-scrolled rule
   (header.css:25), so v2's JS-toggled translucent-white scrolled state takes
   over automatically once the user scrolls past the hero. No specificity war. */
.header:not(.is-scrolled) .header-link {
  color: var(--inherit-white);
  opacity: 0.75;
}
.header:not(.is-scrolled) .header-burger {
  color: var(--inherit-white);
}
.header:not(.is-scrolled) .header-logo > svg :first-child {
  fill: #30ffeb;
}
.header:not(.is-scrolled) .header-logo > svg :last-child {
  fill: #fff;
}

/* Zone 2 — hero text alignment (.container has 0 rules in v2 build) */
.keyword-hero-area > .container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 1024px) {
  .keyword-hero-area > .container { padding-inline: 2rem; }
}

/* Zone 3a — missing custom-color utilities (v2 Tailwind config dropped lightBlue/blueGray) */
.bg-lightBlue-50 { background-color: #f0f9ff; }
.bg-lightBlue-500 { background-color: #0ea5e9; }
.text-lightBlue-500 { color: #0ea5e9; }
.text-blueGray-600 { color: #475569; }
.border-blueGray-600 { border-color: #475569; }

/* Zone 3b — popup hidden by default, shown via :target */
.inline-popup { display: none; }
.inline-popup:target {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: auto;
  background: rgba(0, 0, 0, 0.6);
}
.inline-popup:target .css-popup {
  position: relative;
  max-width: 600px;
  margin: 5vh auto;
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
}
.inline-popup .close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  text-decoration: none;
}

/* === Body content utilities used by landing-page body HTML === */
/* Verified by Mark via Ghost editor inspection: all 4000 landing pages
   share identical HTML structure with the same set of utility classes.
   Only the text content varies. The 18 rules below cover every utility
   the body HTML uses that v2's compiled index.css dropped. */

/* Custom v1 color */
.bg-blueGray-50          { background-color: #f8fafc; }

/* Standard Tailwind utilities missing from v2 build */
.bg-gray-200             { background-color: #e5e7eb; }
.border-blue-700         { border-color: #1d4ed8; }
.capitalize              { text-transform: capitalize; }
.col-span-8              { grid-column: span 8 / span 8; }
.container               { width: 100%; margin-inline: auto; }
@media (min-width: 640px)  { .container { max-width: 640px; } .sm\:flex-nowrap { flex-wrap: nowrap; } }
@media (min-width: 768px)  { .container { max-width: 768px; } .md\:items-center { align-items: center; } .md\:py-12 { padding-top: 3rem; padding-bottom: 3rem; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } .lg\:order-1 { order: 1; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
.list-disc               { list-style-type: disc; }
.order-4                 { order: 4; }

/* Arbitrary-value utilities */
.font-\[300\]            { font-weight: 300; }
.h-\[150px\]             { height: 150px; }
.max-h-\[500px\]         { max-height: 500px; }
.min-w-\[160px\]         { min-width: 160px; }
.pr-\[46px\]             { padding-right: 46px; }
.w-\[150px\]             { width: 150px; }