/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN — AZURE  [data-design='azure']
   The fazley.online architecture in one click: floating pill navigation, a
   royal-gradient hero with white type, stat cards that overlap the hero edge,
   pill buttons, white cards on cool ground, colourful feature icons, a navy
   footer. Structure changes, not just colour — that is this theme's job.

   Scoping/specificity contract (same as the other design files): every token
   set in the light block is restated in the dark block, because
   html[data-design='azure'] (0,1,1) outranks brand.css's [data-theme='dark']
   (0,1,0). The scoped .btn below out-specifies base variants, so all variants
   are re-declared.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-design='azure'] {
  --bg: #f8fafc;
  --bg-2: #eff5ff;
  --surface: #ffffff;
  --surface-2: #f5f8ff;
  --surface-3: #e8eefb;
  --line: rgba(23, 34, 77, 0.1);
  --line-strong: rgba(23, 34, 77, 0.2);
  --text: #17224d;
  --text-2: #3a4670;
  --muted: #6b7794;
  --faint: #8a94ad;

  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 4px 16px rgba(16, 24, 40, 0.07);
  --shadow-3: 0 18px 48px rgba(15, 23, 42, 0.16);

  /* The signature gradient, derived from the admin's accent so recolouring the
     brand keeps the theme coherent. */
  --az-g1: color-mix(in srgb, var(--brand) 72%, #1d4ed8);
  --az-g2: color-mix(in srgb, var(--brand) 26%, #0b1450);
  --az-navy: #0b1450;
  --az-on-gradient: #ffffff;
  --az-on-gradient-soft: rgba(255, 255, 255, 0.78);
}

html[data-design='azure'][data-theme='dark'] {
  --bg: #0a1030;
  --bg-2: #0d1540;
  --surface: #121b4a;
  --surface-2: #182254;
  --surface-3: #1f2a60;
  --line: rgba(203, 213, 235, 0.14);
  --line-strong: rgba(203, 213, 235, 0.26);
  --text: #e7ecf9;
  --text-2: #c3cced;
  --muted: #93a0c6;
  --faint: #7280a8;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 22px 56px rgba(0, 0, 0, 0.5);

  --az-g1: color-mix(in srgb, var(--brand) 78%, #2653f0);
  --az-g2: #091040;
  --az-navy: #070c33;
}

/* ── Floating pill header ──────────────────────────────────────────────────
   The bar detaches from the page edge into a rounded capsule — the loudest
   structural signal that this is a different site. */
[data-design='azure'] .site-header {
  position: sticky;
  top: 0.85rem;
  width: min(1180px, calc(100% - 1.6rem));
  margin: 0.85rem auto 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
}
[data-design='azure'] .site-header.is-scrolled { box-shadow: var(--shadow-3); }
[data-design='azure'] .header-inner { padding-block: 0.55rem; }
[data-design='azure'] .nav-link { border-radius: 999px; padding: 0.42rem 0.85rem; }
[data-design='azure'] .nav-link:hover { background: var(--surface-2); }
[data-design='azure'] .nav-link.is-active {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
[data-design='azure'] .nav-menu { border-radius: 18px; box-shadow: var(--shadow-3); }
[data-design='azure'] .announce {
  background: linear-gradient(90deg, var(--az-g1), var(--az-g2));
  color: var(--az-on-gradient);
}

/* ── Gradient hero ─────────────────────────────────────────────────────────── */
[data-design='azure'] .hero {
  position: relative;
  overflow: hidden;
  margin: 1rem auto 0;
  width: min(1380px, calc(100% - 1.2rem));
  border-radius: 28px;
  background: linear-gradient(135deg, var(--az-g1), var(--az-g2));
}
[data-design='azure'] .hero::before,
[data-design='azure'] .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
[data-design='azure'] .hero::before {
  width: 480px; height: 480px; right: -140px; top: -160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%);
}
[data-design='azure'] .hero::after {
  width: 360px; height: 360px; left: -120px; bottom: -160px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.09), transparent 65%);
}
[data-design='azure'] .hero h1 { color: var(--az-on-gradient); }
[data-design='azure'] .hero .hero-sub { color: var(--az-on-gradient-soft); }
[data-design='azure'] .hero .eyebrow { color: var(--az-on-gradient-soft); }
[data-design='azure'] .hero .eyebrow::before { background: var(--az-on-gradient-soft); }
[data-design='azure'] .hero-badges { color: var(--az-on-gradient-soft); }
[data-design='azure'] .hero-badges > * {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--az-on-gradient-soft);
}
[data-design='azure'] .hero .btn-primary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--az-navy);
}
[data-design='azure'] .hero .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
[data-design='azure'] .hero .btn-ghost,
[data-design='azure'] .hero .btn-quiet {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--az-on-gradient);
  background: transparent;
}
[data-design='azure'] .hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
[data-design='azure'] .hero-visual {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Stats: white cards overlapping the hero's bottom edge ────────────────── */
[data-design='azure'] .stat-row {
  position: relative;
  z-index: 4;
  margin-top: -3.4rem;
  padding: 1.4rem 1.6rem;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
/* When stats sit right under the hero, pull the whole band up over the edge. */
[data-design='azure'] .hero + .section-sm { padding-top: 0; }
[data-design='azure'] .stat-value { font-variant-numeric: tabular-nums; }
[data-design='azure'] .stat-cell:nth-child(4n + 1) .stat-value { color: var(--brand); }
[data-design='azure'] .stat-cell:nth-child(4n + 2) .stat-value { color: var(--brand-2); }
[data-design='azure'] .stat-cell:nth-child(4n + 3) .stat-value { color: #0e9f6e; }
[data-design='azure'] .stat-cell:nth-child(4n + 4) .stat-value { color: #d97706; }

/* ── Pill buttons everywhere ──────────────────────────────────────────────── */
[data-design='azure'] .btn {
  border-radius: 999px;
  font-weight: 600;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
}
[data-design='azure'] .btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 32%, transparent);
}
[data-design='azure'] .btn-primary:hover {
  background: color-mix(in srgb, var(--brand) 86%, #0b1450);
  transform: translateY(-1px);
}
[data-design='azure'] .btn-accent {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #ffffff;
}
[data-design='azure'] .btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
}
[data-design='azure'] .btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
[data-design='azure'] .btn-quiet { background: var(--surface-2); border-color: transparent; color: var(--text); }
[data-design='azure'] .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
[data-design='azure'] .btn:active { transform: translateY(1px); }

/* ── Cards: white, lifted, rounded ────────────────────────────────────────── */
[data-design='azure'] .card,
[data-design='azure'] .panel,
[data-design='azure'] .post-card,
[data-design='azure'] .showcase-card,
[data-design='azure'] .quote-card,
[data-design='azure'] .price-card,
[data-design='azure'] .feature-card,
[data-design='azure'] .team-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
  transition: transform var(--fast), box-shadow var(--fast);
}
[data-design='azure'] .post-card:hover,
[data-design='azure'] .showcase-card:hover,
[data-design='azure'] .feature-card:hover,
[data-design='azure'] .price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
[data-design='azure'] .price-card.is-featured {
  border: 2px solid var(--brand);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Colourful feature icons — blue, rose, green, amber in rotation. */
[data-design='azure'] .feature-icon {
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 11%, transparent);
  color: var(--brand);
}
[data-design='azure'] .feature-card:nth-child(4n + 2) .feature-icon {
  background: color-mix(in srgb, var(--brand-2) 11%, transparent);
  color: var(--brand-2);
}
[data-design='azure'] .feature-card:nth-child(4n + 3) .feature-icon {
  background: rgba(14, 159, 110, 0.12);
  color: #0e9f6e;
}
[data-design='azure'] .feature-card:nth-child(4n + 4) .feature-icon {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}

/* ── Gradient CTA band ────────────────────────────────────────────────────── */
[data-design='azure'] .cta-panel,
[data-design='azure'] .cta-panel.cta-accent {
  background: linear-gradient(135deg, var(--az-g1), var(--az-g2));
  border: 0;
  border-radius: 24px;
  color: var(--az-on-gradient);
  box-shadow: var(--shadow-3);
}
[data-design='azure'] .cta-panel h2,
[data-design='azure'] .cta-panel h3 { color: var(--az-on-gradient); }
[data-design='azure'] .cta-panel p { color: var(--az-on-gradient-soft); }
[data-design='azure'] .cta-panel .btn-primary { background: #fff; border-color: #fff; color: var(--az-navy); }
[data-design='azure'] .cta-panel .btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--az-on-gradient);
  background: transparent;
}

/* ── Marquee as a colour band ─────────────────────────────────────────────── */
[data-design='azure'] .marquee {
  background: var(--bg-2);
  border-block: 1px solid var(--line);
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
[data-design='azure'] .input,
[data-design='azure'] .select,
[data-design='azure'] .textarea {
  background: var(--surface);
  border-radius: 12px;
  border-color: var(--line-strong);
}
[data-design='azure'] .input:focus-visible,
[data-design='azure'] .select:focus-visible,
[data-design='azure'] .textarea:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
  outline: none;
}
[data-design='azure'] .badge { border-radius: 999px; }
[data-design='azure'] .chip { border-radius: 999px; }

/* ── Prose & links ────────────────────────────────────────────────────────── */
[data-design='azure'] .prose a,
[data-design='azure'] .link { color: var(--brand); }
[data-design='azure'] .prose blockquote {
  border-left: 3px solid var(--brand);
  background: var(--surface-2);
  border-radius: 0 14px 14px 0;
}
[data-design='azure'] .article-cover img { border-radius: 20px; }

/* ── Navy footer ──────────────────────────────────────────────────────────── */
[data-design='azure'] .site-footer {
  background: var(--az-navy);
  color: #cbd5e1;
  border-top: 0;
  position: relative;
}
[data-design='azure'] .site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--az-g1), var(--brand-2), var(--az-g1));
}
[data-design='azure'] .site-footer h4,
[data-design='azure'] .site-footer strong,
[data-design='azure'] .site-footer .brand-mark b { color: #ffffff; }
[data-design='azure'] .site-footer a { color: #cbd5e1; }
[data-design='azure'] .site-footer a:hover { color: #ffffff; }
[data-design='azure'] .site-footer .field-help,
[data-design='azure'] .site-footer .text-sm,
[data-design='azure'] .site-footer .muted,
[data-design='azure'] .site-footer .faint { color: #93a0c6; }
[data-design='azure'] .site-footer .input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
[data-design='azure'] .site-footer .input::placeholder { color: #93a0c6; }
[data-design='azure'] .site-footer .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
[data-design='azure'] .site-footer .icon-btn { border-color: rgba(255, 255, 255, 0.22); color: #cbd5e1; }

/* ── Focus & motion ───────────────────────────────────────────────────────── */
[data-design='azure'] :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 65%, transparent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  [data-design='azure'] .btn,
  [data-design='azure'] .post-card,
  [data-design='azure'] .showcase-card,
  [data-design='azure'] .feature-card,
  [data-design='azure'] .price-card { transition: none; }
  [data-design='azure'] .btn:hover,
  [data-design='azure'] .post-card:hover,
  [data-design='azure'] .showcase-card:hover,
  [data-design='azure'] .feature-card:hover,
  [data-design='azure'] .price-card:hover { transform: none; }
}

/* Phones: the pill header hugs the edge a little closer, the hero keeps its
   rounding, and the overlapping stats stack without clipping. */
@media (max-width: 860px) {
  [data-design='azure'] .site-header { top: 0.5rem; width: calc(100% - 0.9rem); }
  [data-design='azure'] .hero { width: calc(100% - 0.8rem); border-radius: 20px; }
  [data-design='azure'] .stat-row { margin-top: -2.2rem; padding: 1rem; }
}