/* Akore Labs — static-site layer.
   Everything visual comes from the design-system stylesheets baked into each
   page. This file only covers what changes when React buttons become links. */

a[data-nav], a[data-setlang] { text-decoration: none; color: inherit; }
a[data-nav] { display: inline-block; }

/* Scroll reveal. The .reveal-ready class is added by site.js, so with
   JavaScript disabled every section stays visible and crawlable. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms cubic-bezier(.2,.6,.2,1), transform 520ms cubic-bezier(.2,.6,.2,1);
}
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* FAQ accordion. Answers are in the HTML for crawlers; site.js collapses all
   but the first once it runs. */
[data-faq-answer][hidden] { display: none; }

/* Contact form wrapper must not disturb the original flex layout. */
form[data-contact] { display: contents; }

/* Header login link to the app. Styled inline to match the diagnostic CTA;
   only the underline reset is needed here. */
a[data-login] { text-decoration: none; }

/* Focus ring for keyboard users on the converted links. */
a[data-nav]:focus-visible, a[data-setlang]:focus-visible, a[data-login]:focus-visible,
button[data-faq-toggle]:focus-visible, input:focus-visible, button[type=submit]:focus-visible {
  outline: 2px solid var(--violet-600, #6d4fe0);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   RESPONSIVE LAYER
   The artifact was authored desktop-only: every layout rule lives in an
   inline style attribute, and the page wrapper sets overflow-x:hidden, so
   below ~900px the header, hero and card grids were silently clipped.
   It was also authored at one fixed width, so on a large monitor it stopped
   growing; both ends are corrected here.

   Inline styles can only be overridden with !important, and the elements
   carry no classes — so each rule targets the artifact's own declaration via
   [style*="..."]. That is stable here precisely because the artifact reuses a
   small, consistent set of values (one section padding, one card grid, and so
   on); the audit behind these selectors is in build/audit-styles.mjs.

   The type scale is handled differently: those inline styles read CSS custom
   properties (font-size: var(--fs-h1)), so redefining the tokens per
   breakpoint needs no !important at all.
   ====================================================================== */

/* ---- large screens ----
   The artifact centres every section in a fixed 1200px shell, so a 1440px
   laptop and a 2560px display get the same column of content with ever-wider
   empty margins either side. The brief is a full stretch with no margin, so
   above laptop sizes the shells are uncapped and every section runs the full
   width of the window, held off the glass only by the 32px of horizontal
   padding the sections already carry.

   Prose keeps its own ch caps (60ch, 78ch, and so on), so headlines and body
   copy stay at a readable measure; what widens is the nav, the grids and the
   cards.

   1441px is the floor because verify.mjs and visual-diff.mjs both render at
   exactly 1440px - staying one pixel above them keeps the regression baseline
   against the original artifact meaningful. It is also low enough to catch a
   1920px display running at 125% scaling, which reports a 1536px viewport;
   a higher floor would have left those monitors on the old fixed width. */
@media (min-width: 1441px) {
  [style*="max-width: 1200px"],
  [style*="max-width: 920px"] { max-width: none !important; }
}

/* ---- tablet and below ---- */
@media (max-width: 1024px) {
  :root { --fs-display: 3.25rem; --fs-h1: 2.5rem; --fs-h2: 2rem; --fs-h3: 1.5rem; }

  /* stats row (4 up) and the footer's 4 columns */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* hero: copy beside the sample-answer card */
  [style*="grid-template-columns: 1.05fr 0.95fr"] { grid-template-columns: 1fr !important; }
  [style*="gap: 72px"] { gap: 40px !important; }
  [style*="gap: 64px"] { gap: 36px !important; }
  [style*="gap: 56px"] { gap: 34px !important; }
}

/* ---- single column ---- */
@media (max-width: 860px) {
  :root { --fs-display: 2.6rem; --fs-h1: 2.15rem; --fs-h2: 1.8rem; --fs-lead: 1.125rem; }

  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }

  /* section rhythm */
  [style*="padding: 96px 32px"] { padding: 68px 22px !important; }
  [style*="padding: 104px 32px 88px"] { padding: 64px 22px 60px !important; }
  [style*="padding: 40px 32px 56px"] { padding: 32px 22px 48px !important; }
  [style*="padding: 56px 32px 40px"] { padding: 48px 22px 32px !important; }
  /* stat-band source footnote */
  [style*="padding: 0px 32px 40px"] { padding: 0 22px 32px !important; }
  /* FAQ answers reserved 60px on the right for the +/- disc */
  [style*="padding: 0px 60px 24px 4px"] { padding: 0 4px 22px 4px !important; }

  /* headline clamps bottom out at 2.5rem / 2rem — too wide for a phone */
  [style*="clamp(2.5rem, 4vw, 3.6rem)"] { font-size: clamp(1.9rem, 6.6vw, 2.5rem) !important; }
  [style*="clamp(2rem, 2.8vw, 2.5rem)"],
  [style*="clamp(2rem, 2.8vw, 2.6rem)"] { font-size: clamp(1.6rem, 5.6vw, 2rem) !important; }

  /* header: logo + language + CTA on one row, links wrap underneath */
  header nav[style*="padding: 16px 32px"] {
    padding: 12px 20px !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
  header nav > div[style*="gap: 28px"][style*="margin-left: auto"] {
    order: 3 !important;
    width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px 20px !important;
  }
  header nav > div[style*="border-radius: 999px"] { margin-left: auto !important; }
}

/* ---- phones ---- */
@media (max-width: 560px) {
  :root { --fs-display: 2.25rem; --fs-h1: 1.95rem; --fs-h2: 1.6rem; --fs-h3: 1.35rem; }

  /* stats and footer columns finish collapsing */
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  [style*="padding: 96px 32px"] { padding: 54px 18px !important; }
  [style*="padding: 104px 32px 88px"] { padding: 48px 18px 48px !important; }
  [style*="padding: 56px 32px 40px"] { padding: 40px 18px 28px !important; }
  [style*="padding: 0px 32px 40px"] { padding: 0 18px 28px !important; }
  /* card and button padding — the :not() guards keep single-value paddings
     from matching multi-value ones that merely start the same way */
  [style*="padding: 34px"] { padding: 22px !important; }
  [style*="padding: 32px"]:not([style*="padding: 32px "]) { padding: 22px !important; }
  [style*="padding: 30px"]:not([style*="padding: 30px "]) { padding: 20px !important; }
  [style*="padding: 28px"]:not([style*="padding: 28px "]) { padding: 20px !important; }
  [style*="padding: 15px 30px"] { padding: 14px 22px !important; }

  /* The header CTA repeats the hero's primary button one scroll below. */
  header .sc-host-x { display: none !important; }
}