/*
 * Core Distro private staging — utility compatibility sheet.
 *
 * assets/site.css is the Tailwind v4 build of the current public homepage. The
 * eleven additional staging pages reuse the same source markup, so they use a
 * handful of utility classes that the homepage build never emitted. Each rule
 * below reproduces the standard Tailwind v4 value for one such class. Nothing
 * here restyles the public design; it only completes it.
 *
 * Loaded on every staging page: the homepage needs the staging-only hooks below
 * (.cd-preview-notice, .cd-inert-form), which it renders like every other route.
 */

/* --- utilities used by the additional pages but absent from the local build - */

.absolute {
  position: absolute;
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:shadow-lg:hover {
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.focus\:outline-none:focus {
  outline-style: none;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:text-green-700 {
  color: #15803d;
}

/*
 * The source markup carries `focus:outline-none`, which removes the browser
 * focus ring. Keyboard users must still be able to see where they are, so an
 * explicit focus-visible ring is restored for anything focusable.
 *
 * input, textarea and select are included because the source markup puts
 * `focus:outline-none` on form controls too; a restoration that stops at
 * a/button leaves those controls with outline-style:none and nothing to
 * replace it. This costs nothing today (every staged control is disabled and
 * therefore unfocusable) and closes the gap before anything is enabled.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid oklch(0.78 0.22 148);
  outline-offset: 2px;
}

/*
 * Audit H1: the nine homepage "Request a Quote" / "View Products" call-to-action
 * controls were <button> elements nested inside their own <a>. The buttons have
 * been promoted to styled anchors (the same one-interactive-element pattern
 * front-page.php already used for the sticky quote bar), so these two rules
 * restore what the <button> gave them for free.
 *
 * A <button> is inline-block with its label centred; an <a> is inline with its
 * label left-aligned. Without these declarations the promoted anchors would
 * render measurably differently from the captured design. These set display and
 * alignment only — no colour, spacing, border or font value is touched, and the
 * .btn-cd-* declarations themselves are unchanged.
 */
a.btn-cd-primary,
a.btn-cd-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*
 * Skip link (audit M2). No route had one, so every page load meant tabbing
 * past the preview notice, the logo, up to eight desktop nav links, the phone
 * link, the quote button and the menu toggle before reaching content.
 *
 * It is the first focusable element in both templates and targets #cd-main,
 * the <main> landmark. Clipped to a 1px box until it takes focus, so it adds
 * nothing to the rendered page in its resting state; on focus it becomes a
 * visible fixed control above everything else.
 */
.cd-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cd-skip-link:focus,
.cd-skip-link:focus-visible {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 300;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  padding: 0.625rem 1rem;
  background-color: oklch(0.12 0.055 148);
  color: oklch(0.88 0.08 148);
  font-family: var(--font-mono), "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid oklch(0.78 0.22 148);
}

/*
 * Audit L2: reduced-motion support covered only .automation-img and
 * .marquee-track. These two animated on every load regardless of the user's
 * motion preference, so they are neutralised here.
 *
 * .fade-in-up starts at opacity:0, so under reduced motion the rule both shows
 * it and drops the transform; assets/stage-interactions.js shows it immediately
 * too, which matters if the stylesheet has not loaded. .sticky-quote-bar plays
 * slideDown on every page load and lands at exactly the same resting state, so
 * removing the animation changes nothing once it has settled.
 */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sticky-quote-bar {
    animation: none;
  }
}

/* --- staging-only hooks ---------------------------------------------------- */

/*
 * Private-preview notice. Rendered at the top of every staged page by
 * theme/page.php and theme/front-page.php so it is impossible to mistake
 * staging for the public site.
 *
 * On the eleven page-template routes it stays in normal flow: the public header
 * is position:fixed, so anything in flow would slide underneath it and hide the
 * navigation. See the `.cd-stage-page header.fixed` rule below, which turns the
 * header sticky so the flow offset works out.
 */
.cd-preview-notice {
  background-color: oklch(0.12 0.055 148);
  color: oklch(0.88 0.08 148);
  font-family: var(--font-mono), "JetBrains Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid oklch(0.78 0.22 148 / 0.35);
}

/*
 * The homepage keeps the public header exactly as captured: position:fixed over
 * a full-height hero, transparent until scrolled. That preserved layout cannot
 * host an in-flow notice, because the fixed header would cover it, and making
 * the header sticky would shift the hero and break the preserved public design.
 *
 * So on the homepage alone the notice is pinned to the bottom of the viewport
 * instead. It is always visible, never covers the navigation, needs no
 * JavaScript, and leaves every pixel of the captured hero untouched.
 */
.cd-stage-front .cd-preview-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  border-bottom: none;
  border-top: 1px solid oklch(0.78 0.22 148 / 0.35);
}

/*
 * The public header is position:fixed because on the public site it overlays a
 * full-height hero. The eleven page-template routes stack the notice, header and
 * content, so fixed positioning would require a magic offset that breaks as soon
 * as the notice wraps to a second line on a narrow screen. Sticky keeps the header
 * pinned to the top of the viewport with no offsets to maintain, and lets it
 * occupy its own space in the flow so no content is hidden behind it.
 *
 * assets/stage-interactions.js sets the transparent background as an inline
 * style on load, so !important is required to win against it. This sheet loads
 * on every route, but `.cd-stage-page` is a body class only theme/page.php sets,
 * so the preserved public homepage header is unaffected.
 */
.cd-stage-page header.fixed {
  position: sticky;
  top: 0;
  background-color: oklch(0.18 0.065 148 / 0.97) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid oklch(0.78 0.22 148 / 0.15);
}

.cd-preview-notice strong {
  color: oklch(0.78 0.22 148);
  font-weight: 700;
}

/* FAQ accordion hooks, added by tools/extract-route-content.py. */
.cd-faq-item[hidden] {
  display: none !important;
}

.cd-faq-item button[data-cd-faq-trigger] {
  cursor: pointer;
}

/*
 * Newsletter, contact and registration controls are rendered from public source
 * markup but are inert here: no action, no endpoint, no submit. They are
 * visibly non-interactive so nobody types data into a preview that discards it.
 */
.cd-inert-form input,
.cd-inert-form textarea,
.cd-inert-form select {
  cursor: not-allowed;
}

.cd-inert-form {
  position: relative;
}

.cd-inert-download {
  cursor: not-allowed;
  text-decoration-line: none;
}

.cd-stage-page main {
  display: block;
}

/* The sticky header occupies its own space, so content needs no top offset. */
.cd-stage-page .cd-page-content {
  padding-top: 0;
}

/* Lighthouse: the products-page cards intentionally use the dark site surface,
 * but their imported inline foreground colors were also dark. Preserve the
 * surface and make all card labels readable; !important is needed to override
 * those source inline colors without changing stored page content. */
body.cd-stage-page.cd-route-products .cd-page-content .cd-card .font-display,
body.cd-stage-page.cd-route-products .cd-page-content .cd-card .font-mono-spec {
  color: oklch(0.88 0.04 148) !important;
}

/* Route-specific helper copy uses opposite surfaces in the blog and registration
 * forms, so keep the contrast corrections scoped to each actual background. */
body.cd-stage-page.cd-route-blog .cd-inert-form p.text-xs {
  color: oklch(0.72 0.04 148) !important;
}

body.cd-stage-page.cd-route-register .cd-inert-form p.text-xs {
  color: oklch(0.42 0.04 148) !important;
}

body.cd-stage-page.cd-route-contact .cd-page-content span.ml-auto.font-mono-spec.text-xs {
  color: oklch(0.42 0.04 148) !important;
}