/* Veritasa marketing site — shared styles.
   Layered on top of Tailwind (loaded via CDN). Keep overrides minimal.
   Palette = "Ink / Ember / Teal". See scripts/tailwind-config.js. */

:root {
  /* Ink — slate scale retained for body; stone scale for dark surfaces */
  --ink-900: #0a0a0a;         /* near-black, for dark bands */
  --ink-800: #1c1917;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;

  /* Accent (ember orange) — primary CTAs, high-energy accents */
  --accent-50:  #fff7ed;
  --accent-100: #ffedd5;
  --accent-500: #fb8b24;       /* requested primary */
  --accent-600: #e8721a;
  --accent-700: #c2580a;

  /* Brand (teal) — secondary accent, links, info */
  --brand-50:  #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;

  /* Semantic (product UI) */
  --success-600: #059669;
  --warn-600:    #d97706;
  --error-600:   #dc2626;

  /* Paper (warm off-white surfaces) — default marketing body */
  --paper-50:  #fdfaf4;
  --paper-100: #fbf5ec;        /* body default */
  --paper-200: #f7ecda;
  --paper-300: #f2e0c5;

  /* Journey (warm editorial — stone-based, kept distinct from paper) */
  --paper-warm: #fcfaf7;
  --ink-warm:   #1c1917;
}

/* Alpine.js — hide x-cloak elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Marketing body background — white by default.
   Journey pages override this via the `.journey-page` body class. */
body.bg-white { background-color: #ffffff; }
body.journey-page { background-color: var(--paper-warm); }

/* ----------------------------------------------------------------
   Site-wide pattern — white body, light teal nav, orange-shaded cards.
   Journey pages (with `.journey-page`) keep their own warm editorial
   look and won't be affected by these rules.
   ---------------------------------------------------------------- */
:root {
  --nav-teal:        #a7d9cb;   /* soft light teal — top nav bar */
  --nav-teal-border: #7ec2b0;   /* slightly darker hairline */
  --card-1:          #ffe7ce;   /* pillar 1 — pale peach (lightest) */
  --card-2:          #f8c893;   /* pillar 2 — apricot */
  --card-3:          #e99a5e;   /* pillar 3 — terracotta (deepest) */
  --card-tint-a:     #ffe7ce;   /* small-card tint A */
  --card-tint-b:     #f8c893;   /* small-card tint B */
}

/* Hero canvas — white, no gradients (text sections stay clean). */
.hero-canvas { background: #ffffff; }

/* Light teal top nav — muted sea-teal, dark text, no blur */
.nav-paper {
  background: var(--nav-teal);
  border-bottom-color: var(--nav-teal-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-paper a,
.nav-paper .text-slate-700 { color: #1c3b34; }   /* deep teal-ink */
.nav-paper span,
.nav-paper .text-slate-900 { color: #0f1f1b; }   /* near-black teal */
.nav-paper a.hover\:text-slate-900:hover,
.nav-paper a:hover { color: #0f1f1b; }
/* Ember CTA in the nav stays on brand — ember on light teal reads strongly */
/* Journey pages use a separate `.journey-nav` element styled in journey.css,
   so the site-wide `.nav-paper` rule above does not affect them. */

/* Pillar cards — three orange shades. Pillar identity comes from the
   shade plus the eyebrow label color in each card's markup. */
.pillar-card {
  border-top-width: 0;
  background-color: transparent;
}
.pillar-card::after { display: none; }
.pillar-evaluate { background-color: var(--card-1); }
.pillar-manage   { background-color: var(--card-2); }
.pillar-report   { background-color: var(--card-3); color: #1c1917; }

/* Boost contrast on the deepest (terracotta) card */
.pillar-report h3,
.pillar-report p,
.pillar-report .text-slate-900 { color: #1c1917; }
.pillar-report .text-slate-700 { color: #3f2e1a; }

/* Small-card tints used on "How we're different"-style rows */
.tint-card-ember { background-color: var(--card-tint-b); }
.tint-card-teal  { background-color: var(--card-tint-a); }

/* Neutralize the decorative section bands — the site no longer uses
   shaded gradients behind text sections. Classes remain for backward
   compatibility with existing markup; they render as plain canvas. */
.band-ember-soft,
.band-teal-soft,
.band-paper-soft { background: transparent; }
.band-paper-warm { background: #fafafa; }   /* gentle neutral for small card fills */

/* (Legacy `.nav-paper` and `.band-*-soft` gradient rules were defined here;
   they are superseded by the site-wide white/teal pattern defined above.) */

body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink-900);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Brand utilities ──────────────────────────────────────────────────────
   Prefer these over inline utility chains so palette shifts live in one place. */

.btn-primary {
  display: inline-block;
  background: var(--accent-500);
  color: #ffffff;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: background-color 150ms ease;
}
.btn-primary:hover { background: var(--accent-600); }
.btn-primary:focus-visible {
  outline: 2px solid var(--accent-700);
  outline-offset: 2px;
}

/* Inline brand-accent link — quieter, teal-toned; used for secondary
   navigation-ish inline links ("Our stance on independence →"). */
.link-accent {
  color: var(--brand-700);
  font-weight: 500;
}
.link-accent:hover { color: var(--brand-800); }

/* Subtle gradient rule used as a section divider / hero underline */
.rule-gradient {
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, var(--accent-500) 0%, var(--brand-600) 100%);
  border-radius: 2px;
}

/* Dark band — used for "Independence" / hero-breaker blocks */
.band-dark {
  background: var(--ink-900);
  color: #ffffff;
}
.band-dark h2, .band-dark h3 { color: #ffffff; }

/* ─── "No vendor lock-in" callout band ──────────────────────────────────
   Sits between the dark outcomes band and the proof section on the home
   page. Light-teal fill + ember accent border so it echoes the nav chord
   without competing with the pillar cards above it. */
.lockin-band {
  background: var(--brand-50);
  border-top: 1px solid var(--brand-100);
  border-bottom: 1px solid var(--brand-100);
}
.lockin-band h2 { color: var(--ink-800); }
.lockin-band a { color: var(--accent-700); font-weight: 500; }
.lockin-band a:hover { color: var(--accent-600); }

/* ─── Pillar-page color treatment ───────────────────────────────────────
   Each pillar detail page (Evaluate / Manage / Report) sets a body class
   so alternating section bands, numbered step badges, and figure frames
   pick up a pillar-specific tint automatically without per-section markup.

   Usage (per page):
     <body class="bg-white page-evaluate"> … </body>
     <section class="pillar-tint-band"> … </section>   (alt rows)
     <h2><span class="step-badge">1</span> Section</h2>
*/
:root {
  --eval-tint:    #e6f8f3;   /* pale teal wash */
  --eval-accent:  var(--brand-700);
  --manage-tint:  #fff1dd;   /* pale ember wash */
  --manage-accent: var(--accent-600);
  --report-tint:  #f4ece0;   /* warm stone wash */
  --report-accent: var(--ink-800);
}
.page-evaluate .pillar-tint-band { background: var(--eval-tint); }
.page-manage   .pillar-tint-band { background: var(--manage-tint); }
.page-report   .pillar-tint-band { background: var(--report-tint); }

/* Numbered step badge — pillar color fill, white numeral. */
.step-badge {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  font-weight: 600;
  color: #ffffff;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.page-evaluate .step-badge { background: var(--eval-accent); }
.page-manage   .step-badge { background: var(--manage-accent); }
.page-report   .step-badge { background: var(--report-accent); }

/* Pillar-themed figure frame — colored border + tiny caption chip. */
.page-evaluate .screenshot-placeholder .placeholder-box { border-color: var(--eval-accent); }
.page-manage   .screenshot-placeholder .placeholder-box { border-color: var(--manage-accent); }
.page-report   .screenshot-placeholder .placeholder-box { border-color: var(--report-accent); }

/* ─── Lifecycle strip (Manage page "authorize → close the period") ──── */
.lifecycle-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.lifecycle-step {
  padding: 1rem 1rem;
  border-radius: 0.75rem;
  background: var(--manage-tint);
  border: 1px solid var(--accent-100);
}
.lifecycle-step .lifecycle-num {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--manage-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lifecycle-step .lifecycle-title {
  margin-top: 0.4rem;
  font-weight: 600;
  color: var(--ink-900);
}
.lifecycle-step .lifecycle-desc {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--ink-700);
  line-height: 1.45;
}
@media (max-width: 768px) {
  .lifecycle-strip { grid-template-columns: 1fr; }
}

/* ─── FAQ (used on Manage page) ─────────────────────────────────────── */
.faq-item {
  border-top: 1px solid var(--ink-200);
  padding: 1.25rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--ink-200); }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-900);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ink-500);
  transition: transform 150ms ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin-top: 0.75rem;
  color: var(--ink-700);
  line-height: 1.6;
}

/* ─── Horizontal accordion (pillar-page step folds) ────────────────────
   A true horizontal fold: each step is a vertical strip with a rotated
   title rail. Clicking a strip expands it to reveal its content while
   the other strips stay collapsed as narrow title-only rails.

   Visual system:
   • Card background (accordion chrome + active content area): light
     teal, intentionally lighter than the nav teal.
   • Rails: graduated orange shades, lightest (step 1) → darkest (last).
     Per-panel `--stub-color` / `--stub-text` variables drive this.

   Markup:
     <div class="h-accordion" x-data="{ active: 1 }">
       <div class="h-panel" :class="active === 1 && 'is-active'" @click="active = 1">
         <div class="h-rail">
           <span class="h-rail-num">1</span>
           <span class="h-rail-label">Ingest</span>
           <span class="h-rail-icon" x-text="active === 1 ? '−' : '+'"></span>
         </div>
         <div class="h-content"> … </div>
       </div>
       …
     </div>
*/

:root {
  /* Card shell (soft teal, deliberately lighter than --nav-teal #a7d9cb). */
  --card-teal: #d6ebe3;
}

.h-accordion {
  display: flex;
  gap: 0.5rem;
  /* Fixed height (not min-height): prevents the container from briefly
     growing tall when a collapsed panel is clicked — during the first
     frames of the flex transition the incoming content is rendered
     inside a narrow 3.25rem strip which would otherwise wrap very
     tall and push the rest of the page down. */
  height: 440px;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--card-teal);
  padding: 0.5rem;
}

.h-panel {
  /* Defaults; overridden per panel via :nth-of-type below. */
  --stub-color: var(--accent-400);
  --stub-text: var(--ink-900);
  display: flex;
  flex: 0 1 3.25rem;
  min-width: 3.25rem;
  background: var(--stub-color);
  color: var(--stub-text);
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.5rem;
  transition: flex-grow 450ms cubic-bezier(0.4, 0, 0.2, 1),
              flex-basis 450ms cubic-bezier(0.4, 0, 0.2, 1),
              filter 180ms ease;
}
.h-panel.is-active {
  flex: 1 1 3.25rem;
  cursor: default;
}
.h-panel:not(.is-active):hover { filter: brightness(0.96); }
.h-panel:focus-visible {
  outline: 2px solid var(--accent-700);
  outline-offset: -4px;
}

/* Graduated orange rails, lightest → darkest. Dark text on pale shades,
   white text on the deeper shades. The `data-panels` attribute selects
   the ramp; default is the 5-step scale. A data attribute (not a
   class) is used because Tailwind's JIT synthesises any `.h-N` utility
   on sight (`.h-6` = height:1.5rem), which would nuke the accordion's
   fixed 440px height if we used that as a modifier class. */
.h-accordion > .h-panel:nth-of-type(1) { --stub-color: #fed7aa; --stub-text: var(--ink-900); }
.h-accordion > .h-panel:nth-of-type(2) { --stub-color: #fdba74; --stub-text: var(--ink-900); }
.h-accordion > .h-panel:nth-of-type(3) { --stub-color: #fb8b24; --stub-text: var(--ink-900); }
.h-accordion > .h-panel:nth-of-type(4) { --stub-color: #e8721a; --stub-text: #ffffff; }
.h-accordion > .h-panel:nth-of-type(5) { --stub-color: #c2580a; --stub-text: #ffffff; }
/* 6-step ramp: one extra mid-shade inserted so the gradient still reads
   lightest → darkest without a visible jump. */
.h-accordion[data-panels="6"] > .h-panel:nth-of-type(1) { --stub-color: #fed7aa; --stub-text: var(--ink-900); }
.h-accordion[data-panels="6"] > .h-panel:nth-of-type(2) { --stub-color: #fdba74; --stub-text: var(--ink-900); }
.h-accordion[data-panels="6"] > .h-panel:nth-of-type(3) { --stub-color: #fca55c; --stub-text: var(--ink-900); }
.h-accordion[data-panels="6"] > .h-panel:nth-of-type(4) { --stub-color: #fb8b24; --stub-text: var(--ink-900); }
.h-accordion[data-panels="6"] > .h-panel:nth-of-type(5) { --stub-color: #e8721a; --stub-text: #ffffff; }
.h-accordion[data-panels="6"] > .h-panel:nth-of-type(6) { --stub-color: #c2580a; --stub-text: #ffffff; }

.h-rail {
  flex: 0 0 3.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  user-select: none;
  color: var(--stub-text);
  background: var(--stub-color);
}
.h-rail-num {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--stub-text);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1;
}
.h-panel.is-active .h-rail-num {
  background: #ffffff;
  color: var(--stub-color);
}
.h-rail-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--stub-text);
  flex: 0 1 auto;
  padding: 0.75rem 0;
}
.h-rail-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--stub-text);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1;
}
.h-panel.is-active .h-rail-icon {
  background: #ffffff;
  color: var(--stub-color);
}

.h-content {
  flex: 1 1 auto;
  /* A stable intrinsic width so the content wraps the same way
     regardless of the owning panel's animating flex-basis. Without
     this, text would re-layout frame-by-frame during the 450ms
     expand transition and briefly blow out the panel height. The
     parent panel's overflow: hidden clips the portion that doesn't
     fit yet. */
  min-width: 36rem;
  padding: 1.5rem 2rem 1.5rem 1.5rem;
  background: var(--card-teal);
  color: var(--ink-800);
  overflow: auto;
  animation: h-content-fade 280ms ease 140ms both;
}
.h-panel:not(.is-active) .h-content { display: none; }
@keyframes h-content-fade {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.h-content h3 {
  color: var(--ink-900);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.h-content p,
.h-content li {
  color: var(--ink-700);
  line-height: 1.6;
}
.h-content em,
.h-content strong { color: var(--ink-900); }
.h-content blockquote {
  border-left: 4px solid var(--accent-600);
  padding-left: 1rem;
  color: var(--ink-800);
  font-style: italic;
}
.h-content ul { margin-top: 0.5rem; }
.h-content .h-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.h-content .screenshot-placeholder { margin: 0.25rem 0 0; }
.h-content .screenshot-placeholder .placeholder-box { aspect-ratio: 16 / 10; }

/* Mobile: stack vertically as a classic accordion with horizontal rails. */
@media (max-width: 768px) {
  .h-accordion {
    flex-direction: column;
    /* Override desktop fixed height so the stack grows to fit the
       expanded panel's content naturally. */
    height: auto;
    gap: 0.4rem;
  }
  .h-panel { flex: 0 0 auto; }
  .h-panel.is-active { flex: 1 1 auto; }
  .h-rail {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    width: 100%;
    justify-content: flex-start;
  }
  .h-rail-label {
    writing-mode: horizontal-tb;
    transform: none;
    flex: 1 1 auto;
    letter-spacing: 0.08em;
    padding: 0;
  }
  .h-content {
    /* Reset desktop's stable min-width so content can reflow to the
       narrow viewport when the accordion is stacked vertically. */
    min-width: 0;
    padding: 1rem 1rem 1.25rem;
    animation: none;
  }
  .h-content .h-panel-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ─── Screenshot placeholder (see journal/VERITASA_SITE/SCREENSHOTS.md) ─── */

.screenshot-placeholder {
  margin: 2rem 0;
}

.screenshot-placeholder .placeholder-box {
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(
    45deg,
    #f3f4f6, #f3f4f6 10px,
    #e5e7eb 10px, #e5e7eb 20px
  );
  border: 1px dashed #9ca3af;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screenshot-placeholder .placeholder-label {
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
}

.screenshot-placeholder figcaption {
  margin-top: 0.5rem;
  color: #4b5563;
  font-size: 0.875rem;
  text-align: center;
}

/* ─── Phase 0 scaffold banner (remove when Phase 1 fills in real content) ─── */

.scaffold-banner {
  background: #fef3c7;         /* amber-100 */
  color: #78350f;              /* amber-900 */
  border-bottom: 1px solid #fcd34d;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─── Screenshot lightbox (scripts/image-lightbox.js) ─── */

body.marketing-lightbox-open {
  overflow: hidden;
}

figure.lightbox-thumb {
  cursor: zoom-in;
}

figure.lightbox-thumb:hover img {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

figure.lightbox-thumb:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
}

figure.lightbox-thumb:focus:not(:focus-visible) {
  outline: none;
}

figure.lightbox-thumb:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
}

.marketing-image-lightbox[hidden] {
  display: none !important;
}

.marketing-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.marketing-image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  cursor: zoom-out;
}

.marketing-image-lightbox__frame {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.marketing-image-lightbox__img {
  max-width: 100%;
  max-height: calc(92vh - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
}

.marketing-image-lightbox__caption {
  margin: 0;
  max-width: 48rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #e2e8f0;
}

.marketing-image-lightbox__caption[hidden] {
  display: none !important;
}

.marketing-image-lightbox__close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marketing-image-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 640px) {
  .marketing-image-lightbox__close {
    top: -0.5rem;
    right: -0.25rem;
  }
}