/*
Theme Name: XQ Platform
Theme URI: https://xqmsg.co
Author: XQ Message
Author URI: https://xqmsg.co
Description: Block theme for the XQ Zero Trust Data Governance Platform marketing site. Ported from the XQ React/Vite site — Ramp-inspired design system (Inter type, mint accent, 6px radii), scroll-reveal animations, and an auto-scrolling logo ticker. Global settings (colors, type scale, spacing, radii) live in theme.json; this file carries the animation keyframes, the .aos scroll-reveal system, and the reveal-on-scroll behavior script (see functions.php) that theme.json cannot express.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xq-platform
Tags: block-theme, full-site-editing, one-page, business

This theme is production-ready starter markup: swap image placeholders,
review the disclosure in README.txt about which interactive React
components (canvas backgrounds, the live product-demo simulation) were
simplified to static/CSS equivalents for a block theme.
*/

/* ── Base ── */
html, body { height: 100%; }

body {
  background-color: var(--wp--preset--color--bg-base);
  color: var(--wp--preset--color--text-0);
}

* { box-sizing: border-box; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(17,24,39,0.12); }
::-webkit-scrollbar-thumb:hover { background: rgba(17,24,39,0.22); }

/* ── Typography helpers (mirrors the site's t-* classes) ── */
.xq-t-h2 {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(36px, 3.5vw, 50px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--wp--preset--color--text-0);
}
.xq-t-body-lg {
  font-size: var(--wp--preset--font-size--body-lg);
  line-height: 1.7;
  color: var(--wp--preset--color--text-1);
}
.xq-t-meta {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-2);
}

/* ── Section label ("eyebrow" with accent dash) ──
 * core/paragraph with the `section-label` block style (typography lives in
 * styles/blocks/section-label.json). The dash only grows in on Home
 * (.xq-reveal-dash): React never adds `in` to labels on other pages or in the
 * FAQ, so there it stays at scaleX(0) — invisible but still taking its space.
 * Default bottom margin 20px; a label overrides it with its own spacing
 * control (inline margin-bottom beats this rule). */
body .is-style-section-label {
  display: flex; align-items: center; gap: 12px;
  margin-top: 0; margin-bottom: 20px;
}
body .is-style-section-label.has-text-align-center { justify-content: center; }
.is-style-section-label::before {
  content: ''; display: block; width: 16px; height: 1px; flex-shrink: 0;
  background: var(--wp--preset--color--accent);
  transform-origin: left; transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.is-style-section-label.xq-reveal-dash.xq-in::before { transform: scaleX(1); }

/* ── Subtle grid background ── */
.xq-grid-bg {
  background-image:
    linear-gradient(rgba(17,24,39,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,24,39,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* ── Scroll-reveal system ──
   Elements start hidden; functions.php enqueues a small IntersectionObserver
   script that adds .xq-in to any .xq-aos* element once it scrolls into view. */
.xq-aos {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.xq-aos.xq-in { opacity: 1; transform: none; }

.xq-aos-scale {
  opacity: 0;
  transform: scale(0.92) translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.xq-aos-scale.xq-in { opacity: 1; transform: none; }

.xq-aos.xq-d1, .xq-aos-scale.xq-d1 { transition-delay: 0.07s; }
.xq-aos.xq-d2, .xq-aos-scale.xq-d2 { transition-delay: 0.14s; }
.xq-aos.xq-d3, .xq-aos-scale.xq-d3 { transition-delay: 0.21s; }
.xq-aos.xq-d4, .xq-aos-scale.xq-d4 { transition-delay: 0.28s; }

/* ── Section wipe accent: thin rule sweeps across on enter ── */
.xq-section-wipe { position: relative; overflow: hidden; }
.xq-section-wipe::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--cyan), var(--wp--preset--color--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.xq-section-wipe.xq-in::before { transform: scaleX(1); }

/* ── Keyframes ── */
@keyframes xq-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}
@keyframes xq-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes xq-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Status pill (hero "free scan" indicator) ── */
.xq-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--wp--preset--color--green); display: inline-block;
  animation: xq-pulse-dot 2s ease-in-out infinite;
  margin-right: 8px;
}

/* ── Badge row: flex-wrapped row of pills/badges ── */
.xq-badge-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Trust-strip checklist ── */
.xq-check-list { display: flex; flex-direction: column; gap: 12px; }
.xq-check-item { display: flex; gap: 10px; align-items: flex-start; font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--wp--preset--color--text-2); }
.xq-check-item::before { content: '✓'; color: var(--wp--preset--color--accent-dark); font-size: var(--wp--preset--font-size--small); flex-shrink: 0; margin-top: 1px; }

/* ── Gradient headline accent (hero second line) ── */
.xq-gradient-text {
  background-image: var(--wp--preset--gradient--accent-special);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: xq-gradient 14s linear infinite;
}


/* ── FAQ: native <details>, always in server-rendered HTML ──
   Mirrors Faq.tsx: 800px column on bg-surface, bordered list, 20px rows,
   "+" that rotates 45° when open. */
.xq-faq {
  background: var(--wp--preset--color--bg-surface);
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--section-80) !important;
  padding-bottom: var(--wp--preset--spacing--section-80) !important;
}
.xq-faq > * { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
.xq-faq h2 { margin-top: 0; margin-bottom: 32px; }
.xq-faq-list { border-top: 1px solid var(--wp--preset--color--border); margin-top: 0 !important; }
.xq-faq-list > * { margin-top: 0 !important; }
.xq-faq-item { border-bottom: 1px solid var(--wp--preset--color--border); padding: 0; }
.xq-faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--body); font-weight: 600; color: var(--wp--preset--color--text-0);
}
.xq-faq-item summary::-webkit-details-marker { display: none; }
.xq-faq-item summary::after {
  content: '+'; flex-shrink: 0; color: var(--wp--preset--color--text-2); font-size: var(--wp--preset--font-size--title-sm); font-weight: 400;
  transition: transform 0.2s;
}
.xq-faq-item[open] summary::after { transform: rotate(45deg); }
.xq-faq-item p { color: var(--wp--preset--color--text-1); font-size: var(--wp--preset--font-size--ui); line-height: 1.7; margin: 0; padding-bottom: 22px; max-width: 760px; }


/* ══════════════════════════════════════════════════════════════
 * Full-parity interactive components (mega-menu, hero widget link,
 * product-demo tabs + live mockups). Markup is rendered statically;
 * behavior comes from assets/nav.js and assets/product-demo.js.
 * ══════════════════════════════════════════════════════════════ */

@keyframes xq-log-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes xq-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ── Nav: custom mega-menu bar ── */
.xq-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; border-bottom: 1px solid transparent; background-color: transparent; transition: border-color 0.2s, background-color 0.2s; }
.xq-nav.is-scrolled { border-bottom: 1px solid var(--wp--preset--color--border); background-color: rgba(255,255,255,0.97); backdrop-filter: blur(16px); }
.xq-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; height: 64px; gap: 4px; }
.xq-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 24px; flex-shrink: 0; }
.xq-nav-logo img { height: 28px; width: auto; display: block; }
.xq-nav-logo span { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 700; letter-spacing: -0.02em; color: var(--wp--preset--color--text-0); }
.xq-nav-primary { display: flex; align-items: center; gap: 0; flex: 1; }
.xq-nav-trigger-wrap { position: relative; }
.xq-nav-link {
  background: none; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--ui); font-weight: 500;
  color: var(--wp--preset--color--text-1); padding: 6px 12px; border-radius: 6px;
  display: flex; align-items: center; gap: 4px; transition: color 0.15s; white-space: nowrap;
}
.xq-nav-link:hover, .xq-nav-link.is-active { color: var(--wp--preset--color--text-0); }
.xq-nav-caret { opacity: 0.5; }
.xq-nav-cta-group { display: flex; align-items: center; gap: 8px; }
/* The nav row is built from blocks (xq/site-nav, parts/header.html): reset the
 * flow-layout gap on the group/paragraph children. */
/* Doubled class: must beat WP's :root :where(.is-layout-flow) > * (same specificity), which can
 * print after this file when logged in and push every item after the first down. */
.xq-nav .xq-nav-primary > *, .xq-nav .xq-nav-cta-group > *, .xq-nav .xq-megamenu-col > * { margin: 0; }
.xq-nav-login, .xq-nav-demo-btn { line-height: 1.6; }
.xq-nav-login a {
  display: block; background: none; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 500;
  color: var(--wp--preset--color--text-1); padding: 6px 12px; transition: color 0.15s;
}
.xq-nav-login a:hover { color: var(--wp--preset--color--text-0); }
.xq-nav-demo-btn a {
  background: var(--wp--preset--color--accent); border: 1px solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--text-0); font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--small); font-weight: 600; padding: 7px 18px; border-radius: var(--wp--custom--spacing--radius-pill, 6px);
  cursor: pointer; text-decoration: none; transition: background 0.15s; display: inline-block;
}
.xq-nav-demo-btn a:hover { background: var(--wp--preset--color--accent-hi); }
.xq-nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--wp--preset--color--text-1); padding: 8px; }
.xq-nav-mobile-menu { display: none; background: var(--wp--preset--color--bg-surface); border-top: 1px solid var(--wp--preset--color--border); padding: 16px 24px 24px; }
.xq-nav-mobile-menu.is-open { display: block; }
.xq-nav-mobile-link {
  display: block; width: 100%; background: none; border: none; text-align: left; text-decoration: none;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 500;
  color: var(--wp--preset--color--text-1); padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--border);
}
.xq-nav-mobile-demo-btn {
  margin-top: 16px; width: 100%; text-align: center; display: block;
  background: var(--wp--preset--color--accent); border: none; color: var(--wp--preset--color--text-0);
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--ui); font-weight: 600;
  padding: 12px; border-radius: var(--wp--custom--spacing--radius-pill, 6px); text-decoration: none;
}

/* ── Mega menu panel ── */
.xq-megamenu { position: absolute; top: 100%; z-index: 300; padding-top: 8px; animation: xq-fade-in 0.12s ease; display: none; }
.xq-megamenu.is-open { display: block; }
.xq-megamenu-panel {
  background: var(--wp--preset--color--bg-surface); border: 1px solid var(--wp--preset--color--border-mid);
  border-radius: var(--wp--custom--spacing--radius, 6px); display: grid; min-width: 760px; overflow: hidden;
}
.xq-megamenu-col { padding: 24px; border-right: 1px solid var(--wp--preset--color--border); }
.xq-megamenu-col:last-child { border-right: none; }
.xq-megamenu-col-heading {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--micro); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--text-2); margin-bottom: 16px;
}
.xq-megamenu-item { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 6px; text-decoration: none; }
.xq-megamenu-item:hover { background: var(--wp--preset--color--accent-dim); }
.xq-megamenu-item-label { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--wp--preset--color--text-0); margin-bottom: 2px; }
.xq-megamenu-item-desc { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-2); line-height: 1.4; }

@media (max-width: 900px) {
  .xq-nav-primary, .xq-nav-cta-group { display: none; }
  .xq-nav-mobile-toggle { display: block; margin-left: auto; }
}

/* ── Product demo: interactive tabs + live mockups ── */
.xq-demo-panel { display: grid; grid-template-columns: 240px 1fr; border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--spacing--radius, 6px); overflow: hidden; }
.xq-demo-tablist { border-right: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--bg-surface); }
.xq-demo-tab { display: block; width: 100%; text-align: left; background: none; border: none; border-right: 2px solid transparent; border-bottom: 1px solid var(--wp--preset--color--border); padding: 20px 24px; cursor: pointer; font: inherit; }
.xq-demo-tab.is-active { background: var(--wp--preset--color--bg-base); border-right-color: var(--wp--preset--color--accent); }
.xq-demo-tab-label { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--text-1); margin-bottom: 4px; }
.xq-demo-tab.is-active .xq-demo-tab-label { color: var(--wp--preset--color--text-0); }
.xq-demo-tab-sub { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--text-2); letter-spacing: 0.08em; }
.xq-demo-tab.is-active .xq-demo-tab-sub { color: var(--wp--preset--color--accent); }
.xq-demo-status { padding: 16px 24px; display: flex; align-items: center; gap: 6px; }
.xq-demo-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--wp--preset--color--green); animation: xq-pulse-dot 2s infinite; }
.xq-demo-status-label { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--text-2); letter-spacing: 0.06em; }
.xq-demo-mockup { padding: 28px 32px; background: var(--wp--preset--color--bg-base); min-height: 380px; }

.xq-zt { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--meta); }
.xq-zt-alert { display: flex; align-items: center; gap: 10px; background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--wp--custom--spacing--radius, 6px); padding: 10px 14px; margin-bottom: 16px; }
.xq-zt-alert-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--red); flex-shrink: 0; animation: xq-pulse-dot 1.5s infinite; }
.xq-zt-alert-label { font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--red); font-weight: 600; }
.xq-zt-alert-msg { color: var(--wp--preset--color--text-2); font-size: var(--wp--preset--font-size--meta); }
.xq-zt-header-row { display: grid; grid-template-columns: 80px 1fr 140px 80px 60px; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--wp--preset--color--border); margin-bottom: 4px; }
.xq-zt-header-row span { font-size: 9px; font-weight: 700; color: var(--wp--preset--color--text-2); letter-spacing: 0.12em; }
.xq-zt-row { display: grid; grid-template-columns: 80px 1fr 140px 80px 60px; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--wp--preset--color--border); animation: xq-log-in 0.35s cubic-bezier(0.16,1,0.3,1); animation-fill-mode: both; }
.xq-zt-row.is-deny { background: rgba(239,68,68,0.03); }
.xq-zt-ts, .xq-zt-geo { color: var(--wp--preset--color--text-2); }
.xq-zt-user, .xq-zt-file { color: var(--wp--preset--color--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xq-zt-row.is-deny .xq-zt-file { color: var(--wp--preset--color--red); }
.xq-zt-status { display: flex; align-items: center; gap: 5px; }
.xq-zt-status-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.xq-zt-row:not(.is-deny) .xq-zt-status-dot { background: var(--wp--preset--color--green); }
.xq-zt-row.is-deny .xq-zt-status-dot { background: var(--wp--preset--color--red); }
.xq-zt-status-label { font-size: 9px; font-weight: 700; }
.xq-zt-row:not(.is-deny) .xq-zt-status-label { color: var(--wp--preset--color--green); }
.xq-zt-row.is-deny .xq-zt-status-label { color: var(--wp--preset--color--red); }
.xq-zt-actions { margin-top: 14px; display: flex; gap: 8px; }
.xq-zt-btn-revoke { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--meta); font-weight: 600; padding: 7px 14px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); color: var(--wp--preset--color--red); border-radius: var(--wp--custom--spacing--radius-pill, 6px); cursor: pointer; }
.xq-zt-btn-audit { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--meta); font-weight: 600; padding: 7px 14px; background: none; border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--text-1); border-radius: var(--wp--custom--spacing--radius-pill, 6px); cursor: pointer; }
.xq-zt-actions { align-items: center; flex-wrap: wrap; }
.xq-zt-btn-revoke:disabled { cursor: default; }
.xq-zt-btn-revoke.is-done { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: var(--wp--preset--color--green); }
.xq-zt-btn-revoke:not(:disabled):hover { background: rgba(239,68,68,0.14); }
.xq-zt-btn-audit:hover { border-color: var(--wp--preset--color--text-2); }

/* Revoke: the row pulses while keys are destroyed, then reads REVOKED. */
.xq-zt-revoke-status { font-size: 10px; color: var(--wp--preset--color--text-2); }
.xq-zt-revoke-status.is-working::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: -1px; border: 1.5px solid var(--wp--preset--color--amber); border-right-color: transparent; border-radius: 50%; animation: xq-spin 0.7s linear infinite; }
.xq-zt-revoke-status.is-done { color: var(--wp--preset--color--green); }
.xq-zt-row.is-revoking { animation: xq-revoke-pulse 0.7s ease-in-out infinite; }
.xq-zt-row.is-revoked { background: rgba(239,68,68,0.04); transition: background 0.4s; }
.xq-zt-row.is-revoked .xq-zt-file, .xq-zt-row.is-revoked .xq-zt-user { text-decoration: line-through; text-decoration-color: var(--wp--preset--color--red); color: var(--wp--preset--color--text-2); }
.xq-zt-row.is-revoked .xq-zt-status-dot { background: var(--wp--preset--color--red); }
.xq-zt-row.is-revoked .xq-zt-status-label { color: var(--wp--preset--color--red); }
@keyframes xq-revoke-pulse { 0%, 100% { background: rgba(245,158,11,0.05); } 50% { background: rgba(245,158,11,0.18); } }
@keyframes xq-spin { to { transform: rotate(360deg); } }

/* Audit: a chain-of-custody panel slides over the log (covering the mockup's
 * visible box, not the wider scrolling log on phones). */
.xq-demo-mockup { position: relative; }
.xq-zt-audit { position: absolute; inset: 16px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--meta); display: flex; flex-direction: column; background: var(--wp--preset--color--bg-base); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--spacing--radius, 6px); box-shadow: 0 12px 32px rgba(17,24,39,0.10); padding: 16px 18px; overflow: auto; z-index: 2; animation: xq-audit-in 0.35s cubic-bezier(0.16,1,0.3,1); }
.xq-zt-audit-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--wp--preset--color--border); margin-bottom: 6px; }
.xq-zt-audit-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--wp--preset--color--text-0); }
.xq-zt-audit-sub { font-size: 10px; color: var(--wp--preset--color--text-2); margin-top: 3px; }
.xq-zt-audit-close { background: none; border: 0; padding: 0 4px; font-size: 18px; line-height: 1; color: var(--wp--preset--color--text-2); cursor: pointer; }
.xq-zt-audit-close:hover { color: var(--wp--preset--color--text-0); }
.xq-zt-audit-list { flex: 1; }
.xq-zt-audit-row { display: grid; grid-template-columns: 64px 76px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--wp--preset--color--border); animation: xq-log-in 0.35s cubic-bezier(0.16,1,0.3,1); }
.xq-zt-audit-ev { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--wp--preset--color--green); }
.xq-zt-audit-row.is-deny .xq-zt-audit-ev { color: var(--wp--preset--color--red); }
.xq-zt-audit-who { color: var(--wp--preset--color--text-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xq-zt-audit-who em { font-style: normal; color: var(--wp--preset--color--text-2); margin-left: 8px; }
.xq-zt-audit-hash { font-size: 10px; color: var(--wp--preset--color--text-2); }
.xq-zt-audit-foot { font-size: 10px; padding-top: 10px; min-height: 24px; color: var(--wp--preset--color--text-2); }
.xq-zt-audit-foot.is-working::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: -1px; border: 1.5px solid var(--wp--preset--color--green); border-right-color: transparent; border-radius: 50%; animation: xq-spin 0.7s linear infinite; }
.xq-zt-audit-foot.is-done { color: var(--wp--preset--color--green); font-weight: 600; }
@keyframes xq-audit-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .xq-zt-audit-row { grid-template-columns: 56px 1fr auto; }
  .xq-zt-audit-who { grid-column: 1 / -1; order: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .xq-zt-row.is-revoking, .xq-zt-audit, .xq-zt-audit-row { animation: none; }
}

.xq-enc-chrome { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--spacing--radius, 6px); overflow: hidden; }
.xq-enc-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--wp--preset--color--bg-surface); border-bottom: 1px solid var(--wp--preset--color--border); }
.xq-enc-dot { width: 10px; height: 10px; border-radius: 50%; opacity: 0.5; }
.xq-enc-dot.is-red { background: var(--wp--preset--color--red); }
.xq-enc-dot.is-amber { background: var(--wp--preset--color--amber); }
.xq-enc-dot.is-green { background: var(--wp--preset--color--green); }
.xq-enc-toolbar-label { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--text-2); margin-left: 8px; }
.xq-enc-field { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--wp--preset--color--border); }
.xq-enc-field-label { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--text-2); width: 60px; flex-shrink: 0; }
.xq-enc-field-value { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-1); }
.xq-enc-body { padding: 14px; min-height: 80px; position: relative; }
.xq-enc-body-text { font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-1); line-height: 1.6; transition: all 0.5s; }
.xq-enc-body-text.is-encrypted { color: var(--wp--preset--color--text-2); font-family: var(--wp--preset--font-family--mono); }
.xq-enc-body-badge { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.xq-enc-body-badge span { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--green); letter-spacing: 0.08em; }
.xq-enc-progress-wrap { margin-top: 14px; }
.xq-enc-progress-track { height: 3px; background: var(--wp--preset--color--bg-raised); border-radius: 2px; overflow: hidden; }
.xq-enc-progress-fill { height: 100%; width: 0%; background: var(--wp--preset--color--accent); border-radius: 2px; transition: width 0.1s linear; }
.xq-enc-progress-label { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--accent-dark); margin-top: 5px; letter-spacing: 0.08em; }
.xq-enc-btn { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--caption); font-weight: 600; padding: 9px 20px; border-radius: var(--wp--custom--spacing--radius-pill, 6px); cursor: pointer; background: var(--wp--preset--color--accent); border: 1px solid var(--wp--preset--color--accent); color: var(--wp--preset--color--text-0); margin-top: 10px; transition: all 0.3s; }
.xq-enc-btn.is-encrypted { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.3); color: var(--wp--preset--color--green); }
.xq-enc-key-info { margin-top: 10px; font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--text-2); line-height: 1.6; }

.xq-mon-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.xq-mon-stat { border-radius: var(--wp--custom--spacing--radius, 6px); padding: 12px 14px; }
.xq-mon-stat.is-green { background: rgba(16,185,129,0.03); border: 1px solid rgba(16,185,129,0.13); }
.xq-mon-stat.is-amber { background: rgba(245,158,11,0.03); border: 1px solid rgba(245,158,11,0.13); }
.xq-mon-stat.is-red { background: rgba(239,68,68,0.03); border: 1px solid rgba(239,68,68,0.13); }
.xq-mon-stat-value { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.xq-mon-stat.is-green .xq-mon-stat-value { color: var(--wp--preset--color--green); }
.xq-mon-stat.is-amber .xq-mon-stat-value { color: var(--wp--preset--color--amber); }
.xq-mon-stat.is-red .xq-mon-stat-value { color: var(--wp--preset--color--red); }
.xq-mon-stat-label { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--text-2); margin-top: 4px; letter-spacing: 0.06em; }
.xq-mon-sparkline { display: flex; gap: 2px; margin-bottom: 16px; height: 32px; align-items: flex-end; }
.xq-mon-sparkline-bar { flex: 1; background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(79,70,229,0.15)); border-radius: 1px; transition: height 0.5s; }
.xq-mon-sparkline-bar.is-last { background: var(--wp--preset--color--accent); }
.xq-mon-caption { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--text-2); margin-bottom: 14px; letter-spacing: 0.06em; }
.xq-mon-alerts { display: flex; flex-direction: column; gap: 6px; }
.xq-mon-alert { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: var(--wp--custom--spacing--radius, 6px); animation: xq-log-in 0.35s cubic-bezier(0.16,1,0.3,1); animation-fill-mode: both; }
.xq-mon-alert.is-critical { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.18); }
.xq-mon-alert.is-warn { background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.18); }
.xq-mon-alert.is-info { background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(79,70,229,0.05)); border: 1px solid rgba(124,58,237,0.15); }
.xq-mon-alert-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.xq-mon-alert.is-critical .xq-mon-alert-dot { background: var(--wp--preset--color--red); }
.xq-mon-alert.is-warn .xq-mon-alert-dot { background: var(--wp--preset--color--amber); }
.xq-mon-alert.is-info .xq-mon-alert-dot { background: linear-gradient(135deg, rgb(124,58,237), rgb(79,70,229)); }
.xq-mon-alert-msg { font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-1); line-height: 1.45; flex: 1; }
.xq-mon-alert-time { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--text-2); flex-shrink: 0; }

@media (max-width: 780px) {
  .xq-demo-panel { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
 * Parity layer — global fixes found in the React ↔ WP audit.
 * ══════════════════════════════════════════════════════════════ */

/* Full-width page sections butt together in the React site; WP's
 * constrained layout otherwise inserts the 24px blockGap between every
 * top-level section and between header/main/footer. */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 80px; }

/* Flex rows of pills/badges: the flow-layout blockGap otherwise pushes
 * every badge after the first down 24px, which made the rows jagged. */
.xq-badge-row > *, .xq-check-list > * { margin: 0 !important; }


/* Typography classes used directly on blocks (mirror src/index.css t-*),
 * plus line-height/tracking for the size presets. */
.has-hero-font-size { line-height: 1.06; letter-spacing: -0.025em; }
.has-h-2-font-size { line-height: 1.1; letter-spacing: -0.02em; }
.has-h-3-font-size { line-height: 1.25; letter-spacing: -0.015em; }

/* Buttons: React Btn primary/ghost (14px/600, 10px 24px, 6px radius). */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent; border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--text-1); padding: 10px 24px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--border-mid); color: var(--wp--preset--color--text-0);
}
.wp-block-button__link { transition: all 0.15s; }

/* Word-by-word reveal (Home.tsx WordReveal). */
.xq-word {
  display: inline-block; opacity: 0; transform: translateY(16px); /* gaps are real spaces (reveal-on-scroll.js) */
  transition-property: opacity, transform; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.xq-in > .xq-word { opacity: 1; transform: none; }
.xq-word-reveal > br + .xq-word { margin-top: 4px; }

/* On-load fade/rise for hero pieces that React animated via `show` state. */
@keyframes xq-rise { from { opacity: 0; transform: translateY(var(--xq-rise, 10px)); } to { opacity: 1; transform: none; } }
@keyframes xq-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .xq-aos, .xq-aos-scale, .xq-word { opacity: 1 !important; transform: none !important; transition: none !important; }
  .xq-logo-ticker-track, .xq-gradient-text { animation: none !important; }
}


/* <main> clears the fixed 64px nav, as React's <main paddingTop>. */
.xq-main { padding-top: 70px; }
.xq-main--home { padding-top: 64px; }

/* ── Section scaffolding (React: <section borderTop padding> + 1280/40px container) ──
 * Children of these groups are laid out with explicit margins, as in
 * React, instead of WP's uniform 24px flow gap. */
.xq-sec { border-top: 1px solid var(--wp--preset--color--border); }
.xq-sec--surface { background: var(--wp--preset--color--bg-surface); }
.xq-sec--40 { padding-top: var(--wp--preset--spacing--section-40); padding-bottom: var(--wp--preset--spacing--section-40); }
.xq-sec--56 { padding-top: var(--wp--preset--spacing--section-56); padding-bottom: var(--wp--preset--spacing--section-56); }
.xq-sec--88 { padding-top: var(--wp--preset--spacing--section-88); padding-bottom: var(--wp--preset--spacing--section-88); }
.xq-sec--96 { padding-top: var(--wp--preset--spacing--section-96); padding-bottom: var(--wp--preset--spacing--section-96); }
.xq-sec--120 { padding-top: var(--wp--preset--spacing--section-120); padding-bottom: var(--wp--preset--spacing--section-120); }
.xq-sec > *, .xq-sec-head > *, .xq-split-head > *, .xq-split-head > * > *,
.xq-home-hero-copy > *, .xq-home-hero-sub > *, .xq-home-cta > *, .xq-home-cta > * > * { margin-block: 0; }
/* The head block stays in the centered 1200px container like every other
 * section child; only its text is capped at 640px (React's maxWidth). */
.xq-sec-head { margin-bottom: 40px !important; }
.xq-sec-head > * { max-width: 640px; }
/* Headlines get more room than their body copy so they don't wrap early. */
.xq-sec-head:not(.xq-sec-head--56) > .xq-t-h2 { max-width: 880px; }
.xq-sec-head--48 { margin-bottom: 48px !important; }
.xq-sec-head--56 { margin-bottom: 56px !important; }
.xq-sec-head--56 > * { max-width: none; }
.xq-sec-head .xq-t-h2 { margin-bottom: 12px; }

/* React's class names were t-h2 / t-body-lg; keep block margins out of them. */
h1.xq-t-h2, h2.xq-t-h2 { margin-top: 0; }
p.xq-t-body-lg { margin-top: 0; }

/* Home-page sections live in assets/css/page-home.css. These pieces are
 * shared (the status pill is also on Developers; the canvas host and demo
 * panel become custom blocks in step 3). */
.xq-plus-grid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xq-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--wp--preset--color--border); border-radius: 6px; padding: 5px 12px;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--meta); font-weight: 500;
  color: var(--wp--preset--color--text-1); letter-spacing: 0.04em; line-height: 1.6;
  margin-bottom: 32px !important;
  animation: xq-rise 0.5s ease 0.08s both;
}
.xq-status-pill .xq-status-dot { margin-right: 0; }
.xq-demo-tab { transition: all 0.15s; }

@media (max-width: 780px) {
  .xq-demo-panel { grid-template-columns: minmax(0, 1fr); }
  .xq-demo-tablist { border-right: 0; border-bottom: 1px solid var(--wp--preset--color--border); }
  .xq-demo-mockup { overflow-x: auto; padding: 20px; }
  .xq-zt { min-width: 480px; }
}


/* ══════════════════════════════════════════════════════════════
 * Shared page utilities
 * ══════════════════════════════════════════════════════════════ */
/* Pages whose React container is 1280px with 80px side padding. Constrained
 * layout reads its max-width from this variable. */
.xq-w-1120 { --wp--style--global--content-size: 1120px; }
.xq-sec--80 { padding-top: var(--wp--preset--spacing--section-80); padding-bottom: var(--wp--preset--spacing--section-80); }

/* Centered heading block (label + h2, mb 48). */
.xq-center-head { text-align: center; margin-bottom: 48px !important; }
.xq-center-head > * { margin-block: 0; }
.xq-center-head .xq-t-h2 { margin-bottom: 12px; }

/* Small uppercase list/panel label (React: 11px, .15em, text-2). */
.xq-list-label {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--meta); font-weight: 400;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--wp--preset--color--text-2);
  margin: 0 0 16px;
}
.xq-list-label--14 { margin-bottom: 14px; }

.xq-aos.xq-d5 { transition-delay: 0.35s; }

/* …and those pages also use 80px side padding instead of the site's 40px. */
.xq-w-1120.has-global-padding { padding-left: 80px; padding-right: 80px; }
@media (max-width: 767px) { .xq-w-1120.has-global-padding { padding-left: 24px; padding-right: 24px; } }

/* ══════════════════════════════════════════════════════════════
 * Block styles & shared components (refactor step 2)
 * Registered styles live in styles/blocks/*.json (typography, color,
 * border, spacing). This section only carries what theme.json can't
 * express: pseudo-elements, hover states, layout of children.
 * ══════════════════════════════════════════════════════════════ */

/* Tones: add class xq-tone-<green|amber|violet|blue|sky|teal|accent> to any
 * block to tint pills, dots, icons and pillar buttons inside it. */
.xq-tone-green { --xq-c: var(--wp--preset--color--green); }
.xq-tone-amber { --xq-c: var(--wp--preset--color--amber); }
.xq-tone-violet { --xq-c: var(--wp--preset--color--violet); }
.xq-tone-blue { --xq-c: var(--wp--preset--color--blue); }
.xq-tone-sky { --xq-c: var(--wp--preset--color--sky); }
.xq-tone-teal { --xq-c: var(--wp--preset--color--teal); }
.xq-tone-accent { --xq-c: var(--wp--preset--color--accent); }

/* Children of card/panel groups are spaced by their own margins, not the
 * 24px flow gap (React cards set every margin explicitly). */
.is-style-card > *, .is-style-panel > * { margin-block: 0; } /* beats WP's :root :where(.is-layout-flow) > * gap */

/* Whole-card link: add xq-stretched to a card; its (single) link covers it. */
.xq-stretched { position: relative; }
.xq-stretched a::after { content: ''; position: absolute; inset: 0; }
.xq-stretched a { text-decoration: none; color: inherit; }
/* Touch screens: grow small standalone links to a ≥24px hit area (WCAG 2.2
 * target size) with an invisible overlay, so nothing moves. */
@media (pointer: coarse) {
  :is(.xq-tc-link, .xq-hero-widget-technical-link, .xq-blog-badge-cat, .xq-blog-badge-pil) a { position: relative; }
  :is(.xq-tc-link, .xq-hero-widget-technical-link, .xq-blog-badge-cat, .xq-blog-badge-pil) a::before { content: ''; position: absolute; inset: -8px -2px; }
}
.xq-hover-border { transition: border-color 0.2s, transform 0.2s; }
.xq-hover-border:hover { border-color: var(--wp--preset--color--border-mid) !important; }
.xq-hover-lift:hover { transform: translateY(-3px); }

/* Primary CTA button (core/button with class xq-btn-cta): 15px/600, 13px 28px. */
.xq-btn-cta > .wp-block-button__link,
.xq-btn-cta > .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--text-0); border: none;
  font-size: var(--wp--preset--font-size--body); font-weight: 600; line-height: 1.6; padding: 13px 28px; border-radius: 6px; white-space: nowrap;
}
/* Keep the reveal fade when a card is also .xq-aos (hover's transition list would otherwise replace it). */
.xq-aos.xq-hover-border, .xq-aos-scale.xq-hover-border { transition: border-color 0.2s, opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); }

/* Pill: tinted by the nearest tone (defaults to accent). */
.is-style-pill {
  background: color-mix(in srgb, var(--xq-c, var(--wp--preset--color--accent)) 6%, transparent);
  border-color: color-mix(in srgb, var(--xq-c, var(--wp--preset--color--accent)) 15%, transparent);
  color: var(--xq-c, var(--wp--preset--color--accent-dark));
}

/* Lists. */
:where(.is-style-dot-list, .is-style-square-list, .is-style-dash-list, .is-style-divided-list, .is-style-plain-list) { list-style: none; padding-left: 0; }
:where(.is-style-dot-list, .is-style-square-list, .is-style-dash-list) > li { display: flex; align-items: center; gap: 10px; }
.is-style-dot-list > li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--xq-c, var(--wp--preset--color--accent)); flex-shrink: 0; }
.is-style-square-list > li::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--xq-c, var(--wp--preset--color--accent)); flex-shrink: 0; }
.is-style-dash-list > li { align-items: baseline; gap: 12px; }
.is-style-dash-list > li::before { content: '—'; color: var(--wp--preset--color--accent-dark); font-size: var(--wp--preset--font-size--caption); flex-shrink: 0; }
.is-style-divided-list > li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--wp--preset--color--border); }

/* Bordered grid: a group whose children are columns separated by dividers
 * inside one rounded box (Platform integrations, Developers reference). */
.is-style-bordered-grid { display: grid; grid-template-columns: repeat(var(--xq-cols, 4), 1fr); overflow: hidden; }
.is-style-bordered-grid > * { margin: 0 !important; border-right: 1px solid var(--wp--preset--color--border); }
.is-style-bordered-grid > :last-child { border-right: 0; }

/* Meter block (xq/meter). */
.xq-meter { margin-bottom: 12px; }
.xq-meter-head { display: flex; justify-content: space-between; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-1); margin-bottom: 4px; }
.xq-meter-track { height: 6px; background: var(--wp--preset--color--border); border-radius: 3px; }
.xq-meter-fill { height: 100%; background: var(--wp--preset--color--accent); border-radius: 3px; }

/* Count-up: add xq-count-up to a paragraph/heading holding a number. */

@media (max-width: 900px) {
  .is-style-bordered-grid { grid-template-columns: repeat(var(--xq-cols-md, 2), 1fr); } /* set --xq-cols-md to keep more columns on tablets */
  .is-style-bordered-grid > * { border-bottom: 1px solid var(--wp--preset--color--border); }
}
@media (max-width: 600px) { .is-style-bordered-grid { grid-template-columns: 1fr; } }

/* Editor placeholder for xq/canvas-background (the animation runs only on the site). */
.xq-canvas-placeholder { padding: 10px 14px; border: 1px dashed var(--wp--preset--color--border-mid); border-radius: 6px; font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--text-2); }

/* Colon headlines split into h1 + subtitle h2 (inc/heading-split.php). */
h1:has(+ .xq-h1-subtitle) { margin-bottom: 10px !important; }
h2.xq-h1-subtitle {
  margin-top: 0 !important; margin-bottom: 24px !important; /* top/bottom only: constrained layouts centre with auto side margins */
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--text-1);
}