/*
Theme Name: Vexara
Theme URI: https://vexaraai.com
Description: Vexara AI — brand child theme on top of Blocksy. Owns color tokens, typography, and a handful of opinionated overrides. Keeps structural layout to the parent.
Author: Vexara AI
Author URI: https://vexaraai.com
Template: blocksy
Version: 0.1.0
Text Domain: vexara
*/

/* ── Brand tokens ─────────────────────────────────────────────────────
   Exposed as CSS vars so block editor, Blocksy color presets, and custom
   blocks all reference the same palette. Change once, rolls through. */

:root {
  --vx-navy: #0B2540;
  --vx-navy-deep: #081B2F;
  --vx-amber: #F5A524;
  --vx-amber-hover: #DD930F;
  --vx-ink: #0A0F1C;
  --vx-paper: #FAFAF7;
  --vx-muted: #6B7280;
  --vx-border: #E5E7EB;
  --vx-success: #10B981;

  --vx-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --vx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --vx-radius: 8px;
  --vx-shadow: 0 8px 24px -10px rgb(11 37 64 / 22%);
  --vx-shadow-lg: 0 20px 40px -15px rgb(11 37 64 / 30%);
}

/* ── Google Fonts preconnect happens in functions.php — just declare the stacks here */

html, body {
  background: var(--vx-paper);
  color: var(--vx-ink);
  font-family: var(--vx-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--vx-font-display);
  color: var(--vx-navy);
  letter-spacing: -0.015em;
  line-height: 1.15;
  font-weight: 600;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.75rem); }
h2 { font-size: clamp(1.625rem, 2vw + 1rem, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1vw + 0.9rem, 1.625rem); }

p  { max-width: 68ch; }

a {
  color: var(--vx-navy);
  text-decoration-color: var(--vx-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--vx-amber-hover); }

/* ── Opinionated block overrides ──────────────────────────────────── */

/* Buttons — primary = amber-on-navy */
.wp-block-button__link,
.vx-btn {
  font-family: var(--vx-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85em 1.6em;
  border-radius: var(--vx-radius);
  background: var(--vx-navy);
  color: var(--vx-paper) !important;
  border: none;
  transition: transform 0.15s ease, background 0.15s ease;
  text-decoration: none;
  display: inline-block;
}
.wp-block-button__link:hover,
.vx-btn:hover {
  background: var(--vx-navy-deep);
  transform: translateY(-1px);
}

.wp-block-button.is-style-vx-amber .wp-block-button__link,
.vx-btn.amber {
  background: var(--vx-amber);
  color: var(--vx-ink) !important;
}
.wp-block-button.is-style-vx-amber .wp-block-button__link:hover,
.vx-btn.amber:hover {
  background: var(--vx-amber-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--vx-navy) !important;
  border: 2px solid var(--vx-navy);
}

/* Hero */
.vx-hero {
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2rem, 6vw, 5rem);
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(245,165,36,0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--vx-paper) 0%, #FFFDF7 100%);
}
.vx-hero h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);
}
.vx-hero .vx-kicker {
  display: inline-block;
  font-family: var(--vx-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vx-amber);
  margin-bottom: 1rem;
}
.vx-hero .vx-sub {
  font-size: clamp(1.125rem, 1vw + 0.95rem, 1.375rem);
  color: var(--vx-muted);
  max-width: 62ch;
}

/* Card grid — used on Solutions, Results */
.vx-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.vx-card {
  background: #FFFFFF;
  border: 1px solid var(--vx-border);
  border-radius: var(--vx-radius);
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(11,37,64,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vx-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--vx-shadow);
}
.vx-card h3 {
  margin-top: 0;
  color: var(--vx-navy);
  font-size: 1.375rem;
}
.vx-card .vx-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--vx-amber) 15%, transparent);
  color: var(--vx-amber);
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

/* Numbered step list */
.vx-steps { counter-reset: step; padding: 0; list-style: none; }
.vx-steps > li {
  counter-increment: step;
  position: relative;
  padding: 1rem 0 1rem 3.5rem;
  border-bottom: 1px solid var(--vx-border);
}
.vx-steps > li:last-child { border-bottom: none; }
.vx-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1rem;
  font-family: var(--vx-font-display);
  font-size: 1.5rem; font-weight: 600;
  color: var(--vx-amber);
}

/* Stat row */
.vx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--vx-border);
  border-bottom: 1px solid var(--vx-border);
}
.vx-stat .vx-num {
  display: block;
  font-family: var(--vx-font-display);
  font-size: 2.75rem;
  font-weight: 600;
  color: var(--vx-navy);
  line-height: 1;
}
.vx-stat .vx-label {
  color: var(--vx-muted);
  font-size: 0.95rem;
  margin-top: 0.4rem;
  display: block;
}
.vx-stat.is-accent .vx-num { color: var(--vx-amber); }

/* Callout */
.vx-callout {
  border-left: 4px solid var(--vx-amber);
  padding: 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--vx-amber) 8%, transparent);
  border-radius: 0 var(--vx-radius) var(--vx-radius) 0;
  margin: 2rem 0;
}

/* Illustrative label — for placeholder stats / case studies */
.vx-illustrative {
  display: inline-block;
  font-size: 0.75rem;
  font-family: var(--vx-font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vx-muted);
  padding: 0.2rem 0.5rem;
  border: 1px dashed var(--vx-border);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

/* Footer CTA band */
.vx-footer-cta {
  background: var(--vx-navy);
  color: var(--vx-paper);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  text-align: center;
  border-radius: var(--vx-radius);
  margin: 3rem 0;
}
.vx-footer-cta h2 { color: var(--vx-paper); }
.vx-footer-cta p { color: color-mix(in srgb, var(--vx-paper) 80%, transparent); margin-inline: auto; }

/* Nav CTA (the amber pill we tag on "Book a Demo") */
.menu-cta a {
  background: var(--vx-amber);
  color: var(--vx-ink) !important;
  padding: 0.5em 1em;
  border-radius: var(--vx-radius);
  text-decoration: none;
}
.menu-cta a:hover { background: var(--vx-amber-hover); }

/* Blog layout niceties */
.single-post .entry-content { max-width: 68ch; margin-inline: auto; }
.single-post .entry-title { margin-bottom: 0.25em; }
.single-post .vx-kicker { color: var(--vx-amber); }