/* ==========================================================================
   NDLESS Training — stylesheet
   --------------------------------------------------------------------------
   The pages come out of Claude Design and carry their layout in style="..."
   attributes. This file holds what cannot live there: hover and focus states,
   the responsive menu, the FAQ accordion and the scroll animation.

   To change colours or typography, edit the variables at the top.
   ========================================================================== */

:root {
  --ink:    #1B2430;   /* headings and buttons                    */
  --paper:  #FBF9F4;   /* page background                         */
  --line:   #E7E3D9;   /* borders and separators                  */
  --hover:  #F1EFE9;   /* menu item background under the cursor   */
  --detail: #31404F;   /* accent: labels, icons, links in copy    */
}

/* ----------------------------------------------------------------- base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: #5A6472; }

/* The legal pages put standalone links in the accent colour. */
.page-legal a { color: var(--detail); }
.page-legal a:hover { color: var(--ink); }

input, textarea, button { font-family: inherit; }

::selection { background: #DDE6E0; color: var(--ink); }

img { max-width: 100%; }

/* Visible focus ring for keyboard users. Mouse users never see it
   (:focus-visible). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--detail);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link for screen reader and keyboard users. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  color: var(--paper);
}

/* -------------------------------------------------- hover / focus states
   Generated from style-hover and style-focus in the design by
   tools/convert.py. Identical declarations share one rule. Re-running the
   converter prints the current set — keep this block in sync with it. */

.h1:hover { background: var(--hover); color: #1B2430; }   /* menu item      */
.h2:hover { background: #111820; color: #FBF9F4; }        /* dark button    */
.h3:hover { border-color: #1B2430; color: #1B2430; }      /* outlined button*/
.h4:hover { border-color: #C9CFD5; }                      /* feature card   */
.h5:hover { background: #111820; }                        /* submit button  */
.h6:hover { color: #1B2430; }                             /* footer link    */

.f1:focus { border-color: var(--detail); }                /* form field     */

/* --------------------------------------------------------- hero layout
   Three corrections to layout that the design gets away with on its canvas
   but that misbehaves in a browser. The hooks are added by tools/convert.py. */

/* The design lays this strip out with auto-fit / minmax(150px, 1fr), which
   resolves to three columns for four items. The leftover cell then shows the
   grid's own background — the hairline colour — as a solid grey block. Two
   columns always divide evenly across four items and keeps the labels
   comfortably wide. */
.hero-stats {
  grid-template-columns: repeat(2, 1fr);
}

/* The design trims the padding on the outer edges, which only lines up while
   everything sits on one row. Re-apply it per column instead. */
.hero-stats > div {
  padding: 18px 16px !important;
}
.hero-stats > div:nth-child(odd)  { padding-left: 0 !important; }
.hero-stats > div:nth-child(even) { padding-right: 0 !important; }

/* Phone mockup: centred in its column in the design. Right-aligned here so it
   lines up with the call-to-action in the header. Below the point where the
   hero collapses to a single column, centred reads better again. */
.hero-visual { justify-content: flex-end; }

@media (max-width: 719px) {
  .hero-visual { justify-content: center; }
}

/* Admin mockup: a fixed 1240px-wide screenshot. The design scrolls it
   sideways, which cuts the rounded frame off on anything narrower than a very
   wide window. site.js measures the space and scales it down to fit instead,
   so the whole frame stays visible. Without JavaScript it falls back to the
   original sideways scroll. */
.admin-shot {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-shot.is-scaled {
  overflow: hidden;
}

.admin-shot.is-scaled > div {
  transform: scale(var(--admin-scale, 1));
  transform-origin: top left;
}

/* ----------------------------------------------------------- navigation
   The design switched between a desktop and a mobile menu with JS
   (window.innerWidth). As a media query there is no flash on load, and it
   still works with JavaScript disabled.

   display:contents removes the wrapper from layout, so the items inside take
   part in the header flexbox exactly as in the design, where no wrapper
   existed. Keep the breakpoint in sync with MOBILE_BREAKPOINT in site.js. */

.nav-desktop { display: contents; }
.nav-mobile  { display: none; }

.mobile-menu[hidden] { display: none; }

@media (max-width: 879px) {
  .nav-desktop { display: none; }
  .nav-mobile  { display: contents; }
}

@media (min-width: 880px) {
  /* Should the menu be open while the window widens: force it shut. */
  .mobile-menu { display: none !important; }
}

/* The hamburger turns into a cross once the menu is open. */
.menu-icon-open { display: none; }
[aria-expanded="true"] .menu-icon-closed { display: none; }
[aria-expanded="true"] .menu-icon-open   { display: inline-flex; }

/* ------------------------------------------------------------------- FAQ
   A hand-built accordion in the design. As <details> it works without
   JavaScript, is keyboard operable, and a screen reader announces open and
   closed by itself. site.js only keeps one open at a time, as in the design. */

.faq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  cursor: pointer;
  list-style: none;
}

/* Remove the default <details> triangle across browsers. */
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { content: ""; }

.faq-icon { font-size: 20px; flex-shrink: 0; }
.faq-icon-closed { color: #B9C0C7; }
.faq-icon-open   { color: var(--detail); display: none; }

.faq-item[open] .faq-icon-closed { display: none; }
.faq-item[open] .faq-icon-open   { display: inline-flex; }

/* --------------------------------------------------------- scroll reveal
   Elements carrying data-reveal fade upward into view. site.js only hides
   them when IntersectionObserver exists, so without JavaScript they stay
   visible. */

@keyframes v3-fade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-reveal].is-pending { opacity: 0; }

[data-reveal].is-revealed {
  animation: v3-fade 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ------------------------------------------------------------------ form */

#demo-form [aria-invalid="true"] { border-color: #B4443A; }

.form-error {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: #B4443A;
}

#demo-form button[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* Cloudflare Turnstile sits between the last field and the submit button. The
   widget renders its own iframe at a fixed size, so it only needs spacing. */
.turnstile-field {
  margin-top: 18px;
}

/* Honeypot: invisible to people, filled in by bots. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal].is-pending { opacity: 1; }
}

/* ------------------------------------------------------------------ print */

@media print {
  header, footer, .mobile-menu, #demo-form { display: none; }
  body { background: #fff; }
  .faq-item > div { display: block !important; }
}