/* System font stack (ESA-style): no custom font files; uses system-ui. */

/**
 * Base: reset, design tokens, typography, accessibility.
 * No layout. Brand-owned public design system.
 */

/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ===== DESIGN TOKENS (:root) ===== */
:root {
  /* Colors (semantic + legacy for migration) */
  --color-primary: #001C82;
  --color-secondary: #0D58FF;
  --color-accent: #2563eb;
  --color-background: #0C0C1F;
  /* CTA: single card background (contact-section-inner + contact-cta-box same), and deeper panel for service sections only */
  --color-surface: #18182b;
  --color-surface-deep: #161A28;
  /* Secondary CTA button: solid dark (not semi-transparent) */
  --color-cta-secondary-bg: #2d2e46;
  --color-text-primary: #EAF4FF;
  --color-text-muted: #CFE3FF;
  --color-border: rgba(37, 99, 235, 0.12);
  --color-border-strong: rgba(37, 99, 235, 0.18);
  --color-success: #00ff88;
  --color-warning: #ffaa00;
  --color-error: #ff4444;

  /* Danger & action buttons */
  --color-danger: #D32F2F;
  --color-danger-hover: #B71C1C;
  --color-premium-red: #C62828;
  --color-premium-red-hover: #B71C1C;
  --color-orange-dark: #E65100;
  --color-orange-dark-hover: #BF360C;
  --color-orange-light: #EF6C00;
  --color-orange-light-hover: #E65100;
  --color-green: #BFF747;
  --color-green-hover: #A5D936;
  --color-green-text: #1a1a1a;

  /* Contact button (.btn-contact) */
  --color-contact: #6B46C1;
  --color-contact-hover: #5B21B6;

  /* Legacy names (same values, for app.css/nav.css during migration) */
  --bg-900: var(--color-background);
  --bg-800: #12122a;
  --fg: var(--color-text-primary);
  --muted: var(--color-text-muted);
  --blue-900: var(--color-primary);
  --blue-500: var(--color-secondary);
  --cta: var(--color-accent);
  --cta-rgb: 37, 99, 235;
  --cta-hover: #1d4ed8;
  --cta-on-dark: #93c5fd;
  --ice: #C0FFFF;
  --line1: var(--color-border-strong);
  --line2: var(--color-border);
  --glass: rgba(255, 255, 255, 0.03);
  --glass-backdrop: blur(10px);
  --glass-shadow: 0 20px 60px rgba(0, 230, 255, 0.14);
  /* Card/small section (e.g. contact-cta-box, service interior cards): same as contact-cta-box */
  --card-bg: var(--color-background);
  --card-border: var(--line2);
  --r: 20px;
  --gradient: linear-gradient(135deg, #0D58FF, #00E6FF);

  /* Brand palette (raw; dark theme decorative use) */
  --color-1: #3b82f6;
  --color-2: #bc3af2;
  --color-3: #f23a80;
  --color-4: #f29d3a;
  --color-5: #9ff23a;

  /* Text on solid accent (CTA) buttons */
  --color-on-accent: #ffffff;
  /* Soft accent surfaces (e.g. secondary button) — dark UI: light text on tint */
  --color-accent-soft-bg: rgba(var(--cta-rgb), 0.12);
  --color-accent-soft-bg-hover: rgba(var(--cta-rgb), 0.2);
  --color-accent-soft-border: rgba(var(--cta-rgb), 0.28);
  --color-on-accent-soft: #ffffff;
  --focus-ring: var(--color-accent);

  /* Badge / chip (dark surfaces) */
  --badge-bg: rgba(12, 61, 217, 0.18);
  --badge-fg: #99c4ff;
  --badge-border: rgba(13, 88, 255, 0.22);
  /* Utility: dimmed muted (solid enough for AA on dark bg) */
  --muted-50: rgba(207, 227, 255, 0.62);

  /* Spacing scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* Typography */
  --font-family-sans: system-ui, -apple-system, sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Gradients (for .bg-gradient-to-r / .bg-gradient-to-br; from/to classes set values) */
  --gradient-stops: transparent;
  --gradient-from: transparent;
  --gradient-via: transparent;
  --gradient-to: transparent;

  /* Breakpoints (for reference in media queries) */
  --bp-xs: 560px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 860px;
  --bp-xl: 980px;
  --bp-2xl: 1024px;
}

/* ===== LIGHT THEME (explicit; default tokens above = dark) ===== */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-800: #e2e8f0;
  /* Accessible accents: blue-700 so white text meets WCAG AA on solid CTAs */
  --color-1: #1d4ed8;
  --color-2: #bc3af2;
  --color-3: #f23a80;
  --color-4: #f29d3a;
  --color-5: #9ff23a;
  --color-primary: #1e3a8a;
  --color-secondary: #2563eb;
  --color-accent: var(--color-1);
  /* Override critical.css --cta:#3b82f6 so solid CTAs meet WCAG AA with white text */
  --cta: var(--color-1);
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-deep: #f1f5f9;
  --color-cta-secondary-bg: #e2e8f0;
  --color-text-primary: #0f172a;
  --color-text-muted: #475569;
  --color-border: rgba(15, 23, 42, 0.12);
  --color-border-strong: rgba(15, 23, 42, 0.2);
  --cta-rgb: 29, 78, 216;
  --cta-hover: #1e40af;
  --cta-on-dark: #1e40af;
  --ice: #0369a1;
  --line1: var(--color-border-strong);
  --line2: var(--color-border);
  --glass: rgba(15, 23, 42, 0.06);
  --glass-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
  --card-bg: #ffffff;
  --card-border: var(--line2);
  --gradient: linear-gradient(135deg, var(--color-1), #7c3aed);
  --color-on-accent: #ffffff;
  --color-accent-soft-bg: rgba(29, 78, 216, 0.12);
  --color-accent-soft-bg-hover: rgba(29, 78, 216, 0.2);
  --color-accent-soft-border: rgba(29, 78, 216, 0.35);
  --color-on-accent-soft: #1e3a8a;
  --focus-ring: var(--color-1);
  --badge-bg: rgba(29, 78, 216, 0.12);
  --badge-fg: #1e3a8a;
  --badge-border: rgba(29, 78, 216, 0.32);
  /* Success on light surfaces (neon green fails AA on white/#f8fafc) */
  --color-success: #047857;
  /* WCAG-safe semantic text on light backgrounds (avoid root neon warning/error) */
  --color-warning: #b45309;
  --color-error: #b91c1c;
  /* Dimmed secondary text utility (solid, AA on white) */
  --muted-50: #64748b;
}

/* Win over late utilities that hardcode slate-400 for .text-muted */
html[data-theme="light"] .text-muted {
  color: var(--muted) !important;
}

@media (prefers-contrast: more) {
  html[data-theme="light"] {
    --color-border: rgba(15, 23, 42, 0.35);
    --color-border-strong: rgba(15, 23, 42, 0.5);
  }
}

/* ===== BODY ===== */
body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  overflow-x: hidden;
}

/* Legacy class: now uses system stack (Poppins removed per plan) */
.font-poppins {
  font-family: var(--font-family-sans);
}

/* ===== TYPOGRAPHY (base elements) ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw + 0.5rem, 2.25rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.875rem);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

small,
.text-small {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ===== ACCESSIBILITY ===== */
@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;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: rgba(7, 156, 255, 0.35);
    --color-border-strong: rgba(7, 156, 255, 0.5);
  }
}

:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 2px;
}

/* ===== GLOBAL LINKS (no underline by default; design tokens for contrast) ===== */
a {
  text-decoration: none;
  color: var(--cta);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--cta-hover);
}

a:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 2px;
}

/* ===== COOKIE BANNER & PREFERENCES MODAL ===== */
/* Layout + positioning: Views/partials/cookie-settings.php (#cookie-consent-shell). Here: theme surface + links only. */
#cookie-banner {
  background: rgba(12, 12, 31, 0.95) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line2);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

/* Cookie preferences modal: styles live in partial cookie-settings.php (inline when banner renders) */

/* Cookie banner links: high contrast on dark bg (WCAG AA); avoids Lighthouse contrast failure */
#cookie-banner .cookie-banner-link {
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cookie-banner .cookie-banner-link:hover {
  color: #bfdbfe;
}
#cookie-banner .cookie-banner-link:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

html[data-theme="light"] #cookie-banner {
  background: rgba(248, 250, 252, 0.98) !important;
  border-color: var(--line2);
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] #cookie-banner .cookie-banner-link {
  color: #1d4ed8;
}

html[data-theme="light"] #cookie-banner .cookie-banner-link:hover {
  color: #1e40af;
}

html[data-theme="light"] #cookie-banner .cookie-banner-link:focus-visible {
  outline-color: #2563eb;
}

/* Light banner surface (base.css wins over partial #cookie-banner bg): dark text, not partial’s white/slate */
html[data-theme="light"] #cookie-banner .cookie-title {
  color: var(--color-text-primary);
}

html[data-theme="light"] #cookie-banner .cookie-message {
  color: #334155;
}

/* ===== DANGER / ACTION BUTTON UTILITIES ===== */
.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
}
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-premium-red {
  background: var(--color-premium-red);
  color: #ffffff;
}
.btn-premium-red:hover { background: var(--color-premium-red-hover); }
.btn-orange-dark {
  background: var(--color-orange-dark);
  color: #ffffff;
}
.btn-orange-dark:hover { background: var(--color-orange-dark-hover); }
.btn-orange-light {
  background: var(--color-orange-light);
  color: #ffffff;
}
.btn-orange-light:hover { background: var(--color-orange-light-hover); }
.btn-green {
  background: var(--color-green);
  color: var(--color-green-text);
}
.btn-green:hover { background: var(--color-green-hover); }

/* ===== ADMIN EDIT NOTICE (logged-in admins on public views; HtmlCache strips .admin-edit-notice) ===== */
.admin-edit-notice {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 42%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-warning, #f59e0b) 18%, transparent), transparent 46%),
    color-mix(in srgb, var(--color-surface, #0f172a) 86%, rgba(15, 23, 42, 0.82));
  border-radius: 1rem;
  padding: 0.875rem 1rem;
  margin: 1.25rem auto 1.5rem;
  color: var(--color-text-primary);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.admin-edit-notice__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-warning, #f59e0b) 72%, #ffffff);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 35%, transparent);
}

.admin-edit-notice__icon svg,
.admin-edit-notice__link svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-edit-notice__body {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  flex-direction: column;
  gap: 0.125rem;
}

.admin-edit-notice__kicker {
  font-size: 0.6875rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-warning, #f59e0b) 80%, var(--color-text-muted));
}

.admin-edit-notice__title {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.25;
  font-weight: 800;
}

.admin-edit-notice__subtitle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.admin-edit-notice__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.375rem;
  padding: 0.625rem 0.875rem;
  border-radius: 999px;
  color: var(--color-on-accent, #fff);
  background: var(--color-accent, var(--cta, #2563eb));
  border: 1px solid color-mix(in srgb, var(--color-accent, #2563eb) 80%, #ffffff);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-accent, #2563eb) 30%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.admin-edit-notice__link:hover {
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--color-accent, #2563eb) 38%, transparent);
}

.admin-edit-notice__link:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-accent));
  outline-offset: 3px;
}

html[data-theme="light"] .admin-edit-notice {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-warning, #f59e0b) 16%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
  .admin-edit-notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .admin-edit-notice__link {
    width: 100%;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only:focus {
  position: fixed;
  z-index: 100000;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 2px solid #60a5fa;
  border-radius: 0.75rem;
  color: #eaf4ff;
  background: #0c0c1f;
  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45);
}

html[data-theme="light"] .sr-only:focus {
  border-color: #1d4ed8;
  color: #0f172a;
  background: #ffffff;
}

/* ===== ICON/SIZE UTILITIES (home, header, SVGs, partials – modern view) ===== */
/* Ensures w-4 h-4 and related classes work from base layer so home and icons render correctly. */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.flex-shrink-0 { flex-shrink: 0; }

/**
 * Layout core: page background (main layout), container, section, stack, grid.
 * Mobile-first. Breakpoints: 560, 640, 768, 860, 980, 1024px.
 * Loaded for every view. Utilities live in layout-utilities.css.
 * Page background (starfield, neural-bg) lives here because main.php outputs it.
 */

/* ===== PAGE BACKGROUND (main layout: body pseudo-elements + .neural-bg) ===== */
/* Simplified for Firefox performance: no SVG filters, no SMIL. Static gradients only. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  /* Desktop: fewer star layers than before — less style/paint cost, same vibe */
  background:
    radial-gradient(1px 1px at 22% 28%, #ffffff 1px, transparent 1px),
    radial-gradient(1px 1px at 72% 72%, #079CFF 1px, transparent 1px),
    radial-gradient(1px 1px at 88% 38%, #00E6FF 1px, transparent 1px),
    radial-gradient(2px 2px at 12% 82%, rgba(255, 255, 255, 0.85) 1px, transparent 1px),
    var(--bg-900);
  background-size: 480px 480px, 420px 420px, 360px 360px, 520px 520px, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: 0.38;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 55% at 50% 0%, rgba(7, 156, 255, 0.07) 0%, transparent 52%);
}

.neural-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.28;
  pointer-events: none;
  contain: layout style paint;
  background: radial-gradient(ellipse 100% 80% at 32% 22%, rgba(7, 156, 255, 0.09) 0%, transparent 48%);
}

.neural-bg::before {
  content: none;
}

/* Light theme: subtle page background (keep depth without dark starfield) */
html[data-theme="light"] body::before {
  background:
    radial-gradient(1px 1px at 22% 32%, rgba(37, 99, 235, 0.35) 1px, transparent 1px),
    radial-gradient(1px 1px at 78% 64%, rgba(8, 145, 178, 0.3) 1px, transparent 1px),
    radial-gradient(2px 2px at 12% 78%, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    var(--bg-900);
  background-size: 420px 420px, 380px 380px, 500px 500px, auto;
  opacity: 1;
}

html[data-theme="light"] body::after {
  opacity: 0.35;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(37, 99, 235, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(8, 145, 178, 0.05) 0%, transparent 50%);
}

html[data-theme="light"] .neural-bg {
  opacity: 0.25;
  background: radial-gradient(ellipse 100% 80% at 30% 20%, rgba(37, 99, 235, 0.06) 0%, transparent 45%),
    radial-gradient(ellipse 80% 60% at 70% 80%, rgba(8, 145, 178, 0.04) 0%, transparent 45%);
}

html[data-theme="light"] .neural-bg::before {
  background: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.05) 0%, transparent 25%);
}

/* Mobile LCP: cheaper first paint — solid theme background only (tokens already set on html[data-theme]). */
@media (max-width: 1023px) {
  body::before {
    background: var(--bg-900);
    background-size: auto;
  }

  body::after {
    opacity: 0;
    background: none;
  }

  .neural-bg {
    opacity: 0;
    background: none;
  }

  .neural-bg::before {
    content: none;
  }

  html[data-theme="light"] body::before {
    background: var(--bg-900);
    background-size: auto;
    opacity: 1;
  }

  html[data-theme="light"] body::after {
    opacity: 0;
    background: none;
  }

  html[data-theme="light"] .neural-bg {
    opacity: 0;
    background: none;
  }

  html[data-theme="light"] .neural-bg::before {
    content: none;
  }
}

/* Animations removed for Firefox performance (no SVG filters/SMIL). Backgrounds are static gradients. */

/* ===== CONTAINER ===== */
.container {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 640px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Desktop .container padding in layout-core.desktop.css */

/* ===== SECTION ===== */
.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  /* content-visibility:auto + intrinsic 200px caused large CLS when real section height applied (e.g. tools grid, marketing sections). */
}

.section--tight {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section--loose {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Mobile .section padding in layout-core.mobile.css */

/* ===== SECTION LABEL (eyebrow above section headings) ===== */
.section-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

/* ===== STACK (flex column with gap) ===== */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--sm { gap: var(--space-2); }
.stack--md { gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-8); }

.stack--center {
  align-items: center;
}

.stack--inline {
  flex-direction: row;
  flex-wrap: wrap;
}

/* ===== GRID ===== */
.grid {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

.grid--1 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--12 { grid-template-columns: repeat(12, 1fr); }

.grid--gap-sm { gap: var(--space-2); }
.grid--gap-md { gap: var(--space-4); }
.grid--gap-lg { gap: var(--space-6); }
.grid--gap-xl { gap: var(--space-8); }

/* Responsive grid: 1 col default, then 2 at sm, 4 at lg */
.grid--responsive {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--responsive-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid--responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop grid in layout-core.desktop.css */

/* Full-width layout default */
.layout-full {
  width: 100%;
  min-height: 100%;
}

/**
 * Layout utilities + Tools & public views compatibility.
 * Used by partials, tools, SVGs. Load async on home; in bundle for other views.
 */

/* ===== LAYOUT UTILITIES (design system compatibility for partials and views) ===== */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.min-w-0 { min-width: 0; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
/* Space between stacked children (margin-top on siblings except first) */
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-6 > * + * { margin-top: var(--space-6); }
.space-y-8 > * + * { margin-top: var(--space-8); }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.pt-6 { padding-top: var(--space-6); }
.pt-4 { padding-top: var(--space-4); }
.ml-auto { margin-left: auto; }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-16 { padding-bottom: var(--space-16); }

/* Grid utilities (responsive via brand-design or below) */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Desktop .lg\:* in layout-utilities.desktop.css */
.select-none { user-select: none; }
.rounded-lg { border-radius: 8px; }
.rounded-r-xl { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.rounded-l-xl { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.font-medium { font-weight: 500; }
.font-mono { font-family: var(--font-family-mono); }
.text-sm { font-size: var(--font-size-sm); }
.leading-none { line-height: 1; }
.h-12 { height: 3rem; }
.w-6 { width: 1.5rem; }
.rounded-full { border-radius: 9999px; }
/* WCAG 2.5.5 Target Size: minimum 44×44px touch target for controls (carousel dots, etc.) */
.touch-target-min { min-width: 44px; min-height: 44px; }
.pl-6 { padding-left: var(--space-6); }
.pr-8 { padding-right: var(--space-8); }
.transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.group:hover .group-hover\:bg-cta\/20 { background: rgba(37, 99, 235, 0.2); }
.group:hover .group-hover\:text-cta { color: var(--cta); }
/* Peer (sibling) state: when .peer is checked, style following siblings and their descendants */
.peer:checked ~ .peer-checked\:bg-cta { background: var(--cta); }
.peer:checked ~ .peer-checked\:border-cta { border-color: var(--cta); }
.peer:checked ~ .peer-checked\:opacity-100,
.peer:checked ~ * .peer-checked\:opacity-100 { opacity: 1; }
.peer:checked ~ .peer-checked\:text-cta { color: var(--cta); }
.bg-cta\/20 { background: rgba(37, 99, 235, 0.2); }
.bg-cta\/10 { background: rgba(37, 99, 235, 0.1); }
.from-cta\/20 { background: linear-gradient(to right, rgba(37, 99, 235, 0.2), transparent); }
.to-cta\/10 { background: linear-gradient(to left, rgba(37, 99, 235, 0.1), transparent); }
.from-line2\/10 { background-color: rgba(37, 99, 235, 0.06); }
.to-line2\/5 { background-color: rgba(37, 99, 235, 0.04); }
.bg-white\/10 { background: rgba(255, 255, 255, 0.1); }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.border-gray-300\/20 { border-color: rgba(209, 213, 219, 0.2); }
.hover\:bg-line2:hover { background: var(--line2); }
.hover\:from-cta\/10:hover { background: rgba(37, 99, 235, 0.1); }
.hover\:to-cta\/5:hover { background: rgba(37, 99, 235, 0.05); }
.hover\:bg-cta\/20:hover { background: rgba(37, 99, 235, 0.2); }
.hover\:bg-cta\/5:hover { background: rgba(37, 99, 235, 0.05); }
.hover\:border-cta\/50:hover { border-color: rgba(37, 99, 235, 0.5); }
.hover\:text-cta:hover { color: var(--cta); }
.text-\[11px\] { font-size: 11px; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-stops, transparent)); }
.from-cta\/20.to-cta\/10 { background: linear-gradient(to right, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.1)); }
.from-line2\/10.to-line2\/5 { background: linear-gradient(to right, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0.04)); }
.border-cta\/20 { border-color: rgba(37, 99, 235, 0.2); }
.bg-green-500\/10 { background: rgba(34, 197, 94, 0.1); }
.border-green-500\/20 { border-color: rgba(34, 197, 94, 0.2); }
.text-green-400 { color: #4ade80; }
/* Light: mint chip + green-400 fails AA (utility combo from CMS / partials) */
html[data-theme="light"] .bg-green-500\/10.text-green-400,
html[data-theme="light"] .bg-green-500\/10 .text-green-400,
html[data-theme="light"] .bg-green-500\/10 > span {
  color: #065f46 !important;
}
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.hover\:text-red-600:hover { color: #dc2626; }
.hover\:text-amber-400:hover { color: #fbbf24; }
.hover\:text-red-400:hover { color: #f87171; }
.bg-red-500\/10 { background: rgba(239, 68, 68, 0.1); }
.hover\:bg-amber-400:hover { background: #fbbf24; }
.hover\:bg-red-400:hover { background: #f87171; }

/* ===== TOOLS & PUBLIC VIEWS COMPATIBILITY (utility classes used in tools, partials, SVGs) ===== */
.block { display: block; }
.inline { display: inline; }
.min-h-screen { min-height: 100vh; }
/* Hero templates 7/9: reserve space for CLS (arbitrary min-heights) */
.min-h-\[85vh\] { min-height: 85vh; }
.min-h-\[90vh\] { min-height: 90vh; }
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.max-w-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.w-80 { width: 20rem; }
.h-80 { height: 20rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-3 { width: 0.75rem; }
.h-3 { height: 0.75rem; }
.w-2 { width: 0.5rem; }
.h-2 { height: 0.5rem; }
.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.w-24 { width: 6rem; }
.h-24 { height: 6rem; }
.h-8 { height: 2rem; }
.h-48 { height: 12rem; }
/* Modal overlay utilities */
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.absolute { position: absolute; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-x-full { transform: translateX(100%); }
.-translate-x-full { transform: translateX(-100%); }
.transform { transform: translateZ(0); }
.-top-40 { top: -10rem; }
.-right-40 { right: -10rem; }
.-bottom-40 { bottom: -10rem; }
.-left-40 { left: -10rem; }
.right-12 { right: var(--space-6); }
.right-4 { right: var(--space-4); }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.-z-10 { z-index: -10; }
.flex-shrink-0 { flex-shrink: 0; }
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.blur-3xl { filter: blur(64px); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.pr-32 { padding-right: 8rem; }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.pb-20 { padding-bottom: 5rem; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.-mr-8 { margin-right: -var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-12 { margin-top: var(--space-12); }
.self-center { align-self: center; }
.gap-1\.5 { gap: 0.375rem; }
.lg\:gap-8 { gap: var(--space-8); }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.leading-relaxed { line-height: 1.625; }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.font-semibold { font-weight: 600; }
.transition-all { transition-property: transform, opacity, box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }
.duration-200 { transition-duration: 200ms; }
.opacity-0 { opacity: 0; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:translate-x-full { transform: translateX(100%); }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(0.125rem); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:rotate-3 { transform: rotate(3deg); }
.group:hover .group-hover\:rotate-90 { transform: rotate(90deg); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:bg-cta\/20 { background: rgba(37, 99, 235, 0.2); }
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:text-red-400 { color: #f87171; }
.group:hover .group-hover\:text-blue-400 { color: #60a5fa; }
.group:hover .group-hover\:text-cyan-300 { color: #67e8f9; }
.hover\:opacity-70:hover { opacity: 0.7; }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:translate-x-full:hover { transform: translateX(100%); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-cta\/10 { box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1); }
.hover\:shadow-cta\/10:hover { box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.1); }
.shadow-cta\/20 { box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.2); }
.hover\:shadow-cta\/20:hover { box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.2); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--gradient-from, transparent), var(--gradient-via, transparent), var(--gradient-to, transparent)); }
/* Legacy tool page light gradient classes removed – tools use .tool-page and var(--bg-900) */
.from-cta\/5 { --gradient-from: rgba(37, 99, 235, 0.05); --gradient-stops: var(--gradient-from), var(--gradient-to, transparent); }
.to-purple-500\/5 { --gradient-to: rgba(168, 85, 247, 0.05); }
.bg-cta\/10 { background: rgba(37, 99, 235, 0.1); }
.bg-purple-500\/10 { background: rgba(168, 85, 247, 0.1); }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.object-cover { object-fit: cover; }
.cursor-pointer { cursor: pointer; }
.cursor-crosshair { cursor: crosshair; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.resize-none { resize: none; }
.overflow-y-auto { overflow-y: auto; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
/* Arbitrary height/min-height for tool textareas */
.h-\[150px\] { height: 150px; }
.h-\[200px\] { height: 200px; }
.h-\[300px\] { height: 300px; }
.h-\[400px\] { height: 400px; }
.h-\[600px\] { height: 600px; }
.min-h-\[80px\] { min-height: 80px; }
.min-h-\[100px\] { min-height: 100px; }
.min-h-\[200px\] { min-height: 200px; }
.min-h-\[300px\] { min-height: 300px; }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes spin { to { transform: rotate(360deg); } }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--cta); }
.focus\:ring-cta:focus { box-shadow: 0 0 0 2px var(--cta); }
.focus\:outline-none:focus { outline: none; }
.focus\:border-cta\/50:focus { border-color: rgba(37, 99, 235, 0.5); }
.rounded { border-radius: 0.25rem; }
.text-white { color: #fff; }
.text-white\/85 { color: rgba(255, 255, 255, 0.85); }
.text-muted { color: var(--muted); }
.text-muted\/50 { color: var(--muted-50, rgba(148, 163, 184, 0.55)); }
.text-success { color: var(--color-success); }
.text-cta { color: var(--cta); }
.text-cta\/40 { color: rgba(37, 99, 235, 0.4); }
.text-line2 { color: var(--line2); }
.text-blue-400 { color: #60a5fa; }
.bg-transparent { background-color: transparent; }
.mt-0\.5 { margin-top: 0.125rem; }
.bg-blue-600 { background-color: #2563eb; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-green-600 { background-color: #16a34a; }
.bg-red-600 { background-color: #dc2626; }
.bg-purple-600 { background-color: #9333ea; }
.bg-pink-500 { background-color: #ec4899; }
.bg-gray-600 { background-color: #4b5563; }
.hover\:bg-gray-700:hover { background-color: #374151; }
.border-2 { border-width: 2px; }
.border-b-2 { border-bottom-width: 2px; }
.border-white { border-color: #fff; }
.border-line2 { border-color: var(--line2); }
.border-cta { border-color: var(--cta); }
.mx-auto { margin-left: auto; margin-right: auto; }
.min-h-36 { min-height: 9rem; }
.top-4 { top: var(--space-4); }
.top-8 { top: var(--space-8); }
.bottom-2 { bottom: var(--space-2); }
.right-2 { right: var(--space-2); }
.right-4 { right: var(--space-4); }
.sticky { position: sticky; }
@media (min-width: 640px) {
  .sm\:inline { display: inline !important; }
  .sm\:min-h-\[90vh\] { min-height: 90vh; }
  .sm\:min-h-\[95vh\] { min-height: 95vh; }
  .sm\:px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
  .sm\:text-xl { font-size: var(--font-size-xl); }
  .sm\:w-3\.5 { width: 0.875rem; }
  .sm\:h-3\.5 { height: 0.875rem; }
}
/* Desktop .lg\:px-8, .lg\:p-12 in layout-utilities.desktop.css */

/* Tools-only utilities (dark: gradients, etc.) moved to views/tools-utilities.css */

/* lg: (min-width: 1024px) variants - MUST stay the last block in this file.
   The same rules live in layout-utilities.desktop.css, which rides inside the CSS bundle.
   In prod with reduce_critical_css_chain this sheet is taken OUT of the bundle and linked
   AFTER it (layouts/inclusions/head-additional-css.php), so its base rules (.grid-cols-1,
   .px-*, .p-*, .max-w-*, .col-span-*) came later in the cascade than the bundle's lg: rules,
   won on equal specificity and collapsed every lg: layout on desktop (live
   /tools/invoice-generator rendered single-column, 2026-09-28). Keeping the lg: variants at
   the end of THIS sheet keeps them after the base rules in every load mode: bundled,
   linked or async. Guard: scripts/tests/layout_utilities_lg_order_test.php (must equal
   layout-utilities.desktop.css and stay last). */
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:hidden { display: none !important; }
  .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
  .lg\:p-12 { padding: var(--space-12); }
  .lg\:max-w-md { max-width: 28rem; }
}

/**
 * Components: buttons, links, forms, cards, alerts.
 * Semantic class names only. Uses design tokens from base.css.
 */

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  text-decoration: none;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 44px;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition-duration: 0.01ms;
  }
}

.btn-primary,
.btn-cta {
  background: var(--color-accent);
  color: var(--color-on-accent, #fff);
  box-shadow: 0 20px 60px rgba(0, 230, 255, 0.25);
}

.btn-primary:hover,
.btn-cta:hover {
  background: var(--cta-hover);
  color: var(--color-on-accent, #fff);
  transform: translateY(-2px);
  box-shadow: 0 25px 80px rgba(0, 230, 255, 0.35);
}

/* Secondary: soft accent surface + theme-appropriate foreground (WCAG on light) */
.btn-secondary {
  background: var(--color-accent-soft-bg);
  color: var(--color-on-accent-soft);
  border: 1px solid var(--color-accent-soft-border);
}

.btn-secondary:hover {
  background: var(--color-accent-soft-bg-hover);
  color: var(--color-on-accent-soft);
  border-color: var(--color-accent-soft-border);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
}

.btn-ghost:hover {
  background: var(--color-border-strong);
}

/* Bordered neutral action (toolbar filters, secondary actions) */
.btn-outline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}

.btn-outline:hover {
  background: rgba(var(--cta-rgb), 0.08);
  color: var(--color-text-primary);
  border-color: rgba(var(--cta-rgb), 0.35);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  min-height: 36px;
  border-radius: 12px;
}

.btn-disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-disabled:hover,
.btn:disabled:hover {
  transform: none;
}

/* Addon / service "Learn More" button (addons partial, services-addons-grid, services index) */
.learn-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  margin-top: auto; /* push to bottom when inside flex column (addon cards) */
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  color: var(--color-accent);
  background: rgba(var(--cta-rgb), 0.1);
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
  min-height: 44px;
}

.learn-more-btn:hover {
  color: var(--cta-hover);
  background: rgba(var(--cta-rgb), 0.18);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.learn-more-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.learn-more-btn:active {
  transform: translateY(0);
}

/* ===== LINKS ===== */
a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--cta-hover);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.link-cta {
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
}

.link-cta:hover {
  color: var(--cta-hover);
}

.link-muted {
  color: var(--color-text-muted);
}

.link-muted:hover {
  color: var(--color-text-primary);
}

/* ===== FORMS ===== */
.label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.input,
.select,
textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--space-2);
  transition: none;
}

.input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

.input:focus,
.select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(7, 156, 255, 0.2);
}

.input-error {
  border-color: var(--color-error);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2);
}

.input-success {
  border-color: var(--color-success);
}

.select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23EAF4FF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: 2.5rem;
}

/* ===== CARDS / PANELS ===== */
.card,
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
  padding: var(--space-6);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 230, 255, 0.14);
}

.card--elevated,
.panel--elevated {
  box-shadow: 0 25px 80px rgba(0, 230, 255, 0.2);
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: 0 20px 60px rgba(0, 230, 255, 0.14);
}

/* ===== ALERTS / NOTICES ===== */
.alert {
  padding: var(--space-4);
  border-radius: var(--space-2);
  border: 1px solid;
}

.alert--success {
  background: rgba(0, 255, 136, 0.1);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert--warning {
  background: rgba(255, 170, 0, 0.1);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.alert--error {
  background: rgba(255, 68, 68, 0.1);
  border-color: var(--color-error);
  color: var(--color-error);
}

.alert--info {
  background: rgba(7, 156, 255, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

/* ===== UTILITY (semantic text/background helpers for migration) ===== */
.text-fg { color: var(--fg); }
.text-muted { color: var(--muted); }
.text-cta { color: var(--cta); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-error { color: var(--color-error); }

.bg-glass { background: var(--glass); }
.bg-bg-900 { background: var(--bg-900); }
.bg-cta { background: var(--cta); }
.border-line1 { border-color: var(--line1); }
.border-line2 { border-color: var(--line2); }
.border-cta { border-color: var(--cta); }

.bold-home-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  color: var(--fg);
}

.grad {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cookie policy page: readable body copy + clear links (admin HTML inside .legal-content) */
.cookie-policy-content .legal-content {
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-text-muted);
}

.cookie-policy-content .legal-content p {
  margin-bottom: var(--space-4);
}

.cookie-policy-content .legal-content p:last-child {
  margin-bottom: 0;
}

.cookie-policy-content .legal-content h1,
.cookie-policy-content .legal-content h2,
.cookie-policy-content .legal-content h3,
.cookie-policy-content .legal-content h4 {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.cookie-policy-content .legal-content h1:first-child,
.cookie-policy-content .legal-content h2:first-child,
.cookie-policy-content .legal-content h3:first-child {
  margin-top: 0;
}

.cookie-policy-content .legal-content ul,
.cookie-policy-content .legal-content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
}

.cookie-policy-content .legal-content li {
  margin-bottom: var(--space-2);
}

/* In-content links: CTA colour + underline (AA on light and dark surfaces) */
.cookie-policy-content a {
  color: var(--cta) !important;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 600;
}

.cookie-policy-content a:hover {
  color: var(--cta-hover) !important;
}


/* ===== ICON SIZES (for icon_svg; use these or compatibility w-/h- in layout.css) ===== */
.icon-size-sm { width: 1rem; height: 1rem; }
.icon-size-md { width: 1.25rem; height: 1.25rem; }
.icon-size-lg { width: 1.5rem; height: 1.5rem; }
.icon-size-xl { width: 4rem; height: 4rem; }
.icon-size-2xl { width: 6rem; height: 6rem; }
.icon-muted { color: var(--muted); fill: currentColor; }
.icon-cta { color: var(--cta); fill: currentColor; }
.icon-success { color: var(--color-success); fill: currentColor; }
.icon-center { margin-left: auto; margin-right: auto; }
.icon-inline { display: inline; vertical-align: middle; }
.icon-inline + span { margin-left: var(--space-2); }

/**
 * Brand design: global breakpoints for typography, grid columns, spacing, overflow.
 * Mobile-first. Breakpoints: 560, 640, 768, 860, 980, 1024px.
 * Theme-ready (light now; dark via :root variables).
 */

/* ===== TYPOGRAPHY SCALING BY BREAKPOINT ===== */
/* Base sizes set in base.css; here we only adjust where breakpoints matter */

@media (min-width: 640px) {
  body {
    font-size: var(--font-size-base);
  }
}

@media (min-width: 768px) {
  .section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
  .section-subtitle {
    font-size: var(--font-size-lg);
  }
}

/* Desktop .section-title in brand-design.desktop.css */

/* ===== GRID COLUMN OVERRIDES BY BREAKPOINT ===== */
/* Use with .grid for responsive column counts */
.grid-cols-1-md-2 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-cols-1-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-cols-1-lg-4 {
  grid-template-columns: 1fr;
}

/* Desktop .grid-cols-1-lg-4 in brand-design.desktop.css */

.grid-cols-1-lg-12 {
  grid-template-columns: 1fr;
}
/* Desktop .grid-cols-1-lg-12 in brand-design.desktop.css */

/* ===== SPACING BY BREAKPOINT ===== */
.padding-inline-responsive {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 640px) {
  .padding-inline-responsive {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Desktop .padding-inline-responsive in brand-design.desktop.css */

/* ===== OVERFLOW ===== */
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

/* ===== TOUCH-FRIENDLY TARGETS ===== */
@media (pointer: coarse) {
  .btn,
  .nav-link,
  a[role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== THEME READY (dark now; light can override later) ===== */
[data-theme="light"] {
  --color-background: #f8fafc;
  --color-surface: rgba(0, 0, 0, 0.03);
  --color-text-primary: #0f172a;
  --color-text-muted: #475569;
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.18);
}

/* ===== APP-SPECIFIC CSS (design system base is in base.css, layout-core.css, components.css) ===== */
/* This file: app utilities (glass, btn, section-title, error pages, headings). No page background – that lives in layout-core.css (main layout). */
/* Variables and reset in base.css; .container and page background in layout-core.css; buttons/links in components.css. */

/* ===== UTILITY CLASSES ===== */
.bold-home-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  color: var(--fg);
}

/* .container is in layout.css */

.hidden {
  display: none !important;
}

.glass {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: var(--glass-shadow, 0 20px 60px rgba(0, 230, 255, 0.14));
}

/* Utility classes using design tokens */
.text-fg {
  color: var(--fg);
}

.text-muted {
  color: var(--muted);
}

.text-cta {
  color: var(--cta);
}

/* Links distinguishable without relying on color (WCAG) */
a.text-cta {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
a.text-cta:hover {
  text-decoration: underline;
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-error {
  color: var(--error);
}

.bg-glass {
  background: var(--glass);
}

.bg-bg-900 {
  background: var(--bg-900);
}

.bg-cta {
  background: var(--cta);
}

.bg-success {
  background: var(--success);
}

.bg-warning {
  background: var(--warning);
}

.bg-error {
  background: var(--error);
}

.border-line1 {
  border-color: var(--line1);
}

.border-line2 {
  border-color: var(--line2);
}

.border-cta {
  border-color: var(--cta);
}

.border-success {
  border-color: var(--success);
}

.border-warning {
  border-color: var(--warning);
}

.border-error {
  border-color: var(--error);
}

/* CTA contrast on dark backgrounds (WCAG AA) */
.bg-bg-900 .text-cta,
.bg-bg-800 .text-cta {
  color: var(--cta-on-dark);
}
.bg-bg-900 .border-cta,
.bg-bg-800 .border-cta {
  border-color: var(--cta-on-dark);
}
.bg-bg-900 a:not([class*="text-"]),
.bg-bg-800 a:not([class*="text-"]) {
  color: var(--cta-on-dark);
}

.hover\:text-fg:hover {
  color: var(--fg);
}

.hover\:text-cta:hover {
  color: var(--cta);
}

.hover\:bg-line1:hover {
  background: var(--line1);
}

.hover\:border-cta:hover {
  border-color: var(--cta);
}

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

.hover\:shadow-cta\/20:hover {
  box-shadow: 0 20px 60px rgba(7, 156, 255, 0.2);
}

/* .btn, .btn-cta, .btn-ghost: canonical in main/components.css */

.btn-contact {
  background: var(--color-contact) !important;
  color: white !important;
}

.btn-contact:hover {
  background: var(--color-contact-hover) !important;
  color: white !important;
}

/* Enhanced contact protection: revealed-contact span (moved from inline style) */
.ecp-revealed-text {
  color: white;
  font-weight: normal;
}

/* No-silent-fallbacks marker (edit_marker_html in functions/system_helpers.php).
   An empty required field renders EDIT (field) instead of invented content, so
   the gap is visible rather than plausible. Until now the class had no styling
   anywhere in the theme and the marker rendered as ordinary body text. */
.edit-marker {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 1px dashed var(--color-warning);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--color-warning) 14%, transparent);
  color: var(--color-warning);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Scrollbar Hide Utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.grad {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid var(--badge-border);
  font-size: 0.8rem;
}

.neon {
  outline: 2px solid var(--cta);
  box-shadow: 0 0 0 2px rgba(7, 156, 255, 0.12), 0 30px 90px rgba(0, 230, 255, 0.28);
}

/* .section is in layout.css */

.stat {
  border: 1px solid var(--line1);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--glass);
  text-align: center;
}

.muted {
  color: var(--muted);
}

/* ===== SECTION HEADERS (Wireframe Base) ===== */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.section-subtitle {
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}

/* Service view hero: only h1 (title) and h2 (subtitle). Subtitle classes: .default-hero__subtitle (default template), .it-services-hero__subtitle (it-services). */

/* Section heading as p (service view: one h1, one h2; rest section titles are p with BEM __heading + this class). BEM __heading supplies font-size/weight. */
.section-heading-p {
  display: block;
  margin: 0 0 1rem;
}

/* .sr-only is in base.css */


/* ===== RESPONSIVE DESIGN (Wireframe Base) ===== */
/* Mobile-only .btn full-width moved to app.mobile.css (media="(max-width: 1023px)"). */

/* SVGs follow currentColor so theme + parent text color apply; dark-only hard white avoids light-theme contrast breaks */
html[data-theme="dark"] .text-white svg,
html[data-theme="dark"] .text-white svg path,
html[data-theme="dark"] .text-white svg use,
html[data-theme="dark"] svg.text-white,
html[data-theme="dark"] svg.text-white path,
html[data-theme="dark"] svg.text-white use,
html[data-theme="dark"] .icon-svg.text-white,
html[data-theme="dark"] .icon-svg.text-white svg,
html[data-theme="dark"] .icon-svg.text-white svg path,
html[data-theme="dark"] .icon-svg.text-white svg use {
  fill: #ffffff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .text-white svg,
html[data-theme="light"] .text-white svg path,
html[data-theme="light"] .text-white svg use,
html[data-theme="light"] svg.text-white,
html[data-theme="light"] svg.text-white path,
html[data-theme="light"] svg.text-white use,
html[data-theme="light"] .icon-svg.text-white,
html[data-theme="light"] .icon-svg.text-white svg,
html[data-theme="light"] .icon-svg.text-white svg path,
html[data-theme="light"] .icon-svg.text-white svg use {
  fill: currentColor !important;
  color: currentColor !important;
}

/* ===== SEO-FRIENDLY HEADING CLASSES ===== */
/* Use real H1/H2/H3 with section-title and subsection-title for semantic structure and SEO. */
.heading-1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .heading-1 {
    font-size: 3.75rem;
  }
}
/* Desktop .heading-1 4.5rem in app.desktop.css */

.heading-2 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .heading-2 {
    font-size: 2.25rem;
  }
}
/* Desktop heading overrides in app.desktop.css if needed */

.heading-3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* Semantic subsection heading (use with <h3 class="subsection-title">) */
.subsection-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.heading-4 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

/* Select dropdown: follow active theme (html data-theme from BoldTheme) */
html[data-theme="dark"] select {
  color-scheme: dark;
}

html[data-theme="light"] select {
  color-scheme: light;
}

select option {
  background-color: var(--color-background) !important;
  color: var(--color-text-primary) !important;
  padding: 0.5rem 0.75rem;
}

select:focus option {
  background-color: var(--color-surface-deep) !important;
  color: var(--color-text-primary) !important;
}

select option:hover,
select option:focus {
  background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-background)) !important;
  color: var(--color-text-primary) !important;
}

select option:checked {
  background-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-background)) !important;
  color: var(--cta) !important;
}

/* ===== HEADER PARTIAL ===== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 12, 31, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

html[data-theme="light"] .site-header {
  background: rgba(248, 250, 252, 0.92);
}

.header-top-bar {
  padding: var(--space-2) 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.header-top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header-top-bar-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.header-top-bar-cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  transition: none;
}

.header-top-bar-cta:hover {
  color: var(--cta-hover);
  border-color: var(--color-accent);
  background: rgba(var(--cta-rgb), 0.08);
}

.header-top-bar-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.header-main {
  flex-shrink: 0;
}

/* CLS: fixed height so nav/font load cannot change header bar size */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  height: 64px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.logo,
.logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.logo:hover,
.logo-link:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-surface);
}

.logo-icon .logo-img,
.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--color-accent);
}

.logo-text {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Mobile header in header.mobile.css (media="(max-width: 1023px)"). */

/* Footer Partial – design tokens only. Multi-column: Product, Solutions, Resources, Company. */

.site-footer,
.footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  backdrop-filter: blur(10px);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: var(--space-12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  min-height: 14rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop .footer-grid in footer.desktop.css */

.footer-section h2,
.footer-section h4 {
  color: var(--color-text-primary);
  font-weight: 600;
  margin-bottom: var(--space-4);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: var(--space-2);
}

.footer-links a,
.footer-link {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-link:hover,
.footer-links a:focus,
.footer-link:focus {
  color: var(--color-accent);
}

.footer-link:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.footer-social {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.social-link {
  width: 40px;
  height: 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.social-link:hover,
.social-link:focus {
  color: var(--color-accent);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.social-link:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.social-link-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-copyright {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Mobile footer spacing in footer.mobile.css */

/* ===== PAGE LOADING PARTIAL ===== */
/* Semantic: page-loading, page-loading-content, page-loading-logo, page-loading-name, page-loading-tagline, page-loading-spinner */

.page-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 16px);
  text-align: center;
  padding: var(--space-8, 32px);
}

.page-loading-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.page-loading-logo-placeholder {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cta-on-dark, #93c5fd);
}

.page-loading-icon {
  width: 40px;
  height: 40px;
}

.page-loading-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.page-loading-tagline {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  max-width: 20rem;
}

.page-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--line2);
  border-top-color: var(--cta-on-dark, #93c5fd);
  border-radius: 50%;
  animation: page-loading-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-loading-spinner {
    animation: none;
    border-top-color: var(--cta-on-dark, #93c5fd);
    opacity: 0.8;
  }
}

@keyframes page-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Blog pagination – modern pill-style, no underlines (inspired by nationwidevehicletransport) */
.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.blog-pagination a,
.blog-pagination a:hover,
.blog-pagination a:focus,
.blog-pagination a:visited {
    text-decoration: none !important;
}

.blog-pagination a,
.blog-pagination span.blog-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    border: 1px solid var(--line2, rgba(255, 255, 255, 0.15));
    background: var(--bg-800, rgba(255, 255, 255, 0.06));
    color: var(--fg);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-pagination a:hover,
.blog-pagination a:focus {
    background: var(--bg-800, rgba(255, 255, 255, 0.1));
    border-color: var(--cta);
    color: var(--fg);
}

.blog-pagination a.blog-pagination__page--current,
.blog-pagination span.blog-pagination__page--current {
    background: var(--cta);
    color: var(--color-on-accent, #fff);
    border-color: var(--cta);
    pointer-events: none;
}

.blog-pagination span.blog-pagination__item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--muted);
}

.blog-pagination .blog-pagination__info {
    margin-left: 0.75rem;
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: 500;
}

.blog-pagination__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.blog-pagination__prev .blog-pagination__icon {
    margin-right: 0.25rem;
}
.blog-pagination__next .blog-pagination__icon {
    margin-left: 0.25rem;
}


/*
 * Blog single post: layout, sidebar, comments.
 * Uses Bold tokens: --bg-900, --bg-800, --fg, --muted, --cta, --line2.
 * Contrast: link-on-dark and muted-on-dark meet WCAG AA on dark backgrounds.
 */

.blog-show-page {
    --blog-container-max: 1180px;
}

/* Section-level width: content section shares same max-width so it aligns with hero */
.blog-show-page .blog-show-section {
    width: 100%;
    max-width: var(--blog-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-5, 1.25rem);
    padding-right: var(--space-5, 1.25rem);
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .blog-show-page .blog-show-section {
        padding-left: var(--space-6, 1.5rem);
        padding-right: var(--space-6, 1.5rem);
    }
}
@media (min-width: 1024px) {
    .blog-show-page .blog-show-section {
        padding-left: var(--space-8, 2rem);
        padding-right: var(--space-8, 2rem);
    }
}
@media (max-width: 480px) {
    .blog-show-page .blog-show-section {
        padding-left: var(--space-4, 1rem);
        padding-right: var(--space-4, 1rem);
    }
}

/* Shared container width for hero, featured image, and content (same on desktop and mobile) */
.blog-show-page .blog-show-container {
    width: 100%;
    max-width: var(--blog-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-5, 1.25rem);
    padding-right: var(--space-5, 1.25rem);
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .blog-show-page .blog-show-container {
        padding-left: var(--space-6, 1.5rem);
        padding-right: var(--space-6, 1.5rem);
    }
}
@media (min-width: 1024px) {
    .blog-show-page .blog-show-container {
        padding-left: var(--space-8, 2rem);
        padding-right: var(--space-8, 2rem);
    }
}
@media (max-width: 480px) {
    .blog-show-page .blog-show-container {
        padding-left: var(--space-4, 1rem);
        padding-right: var(--space-4, 1rem);
    }
}

/* ========================================
   BLOG HERO MODERNIZATION
   Nebula Glass (dark) / Clean Editorial (light)
   ======================================== */

/* Hero section: relative for mesh overlay positioning */
.blog-show-hero {
    position: relative;
    background: var(--bg-900, #0C0C1F);
}

.blog-show-page .blog-show-hero {
    background:
        linear-gradient(90deg, rgba(7, 17, 31, 0.88) 0%, rgba(7, 17, 31, 0.68) 48%, rgba(7, 17, 31, 0.82) 100%),
        url('/assets/images/blog-hero-background.webp') center / cover no-repeat;
}

.blog-show-page .blog-show-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.16), transparent 34%),
        radial-gradient(circle at 76% 64%, rgba(245, 184, 75, 0.14), transparent 38%);
}

/* Light theme: solid neutral background so no page shade bleeds through at edges */
html[data-theme="light"] .blog-show-hero {
    background: #f1f5f9;
}

html[data-theme="light"] .blog-show-page .blog-show-hero {
    background:
        linear-gradient(90deg, rgba(7, 17, 31, 0.86) 0%, rgba(7, 17, 31, 0.62) 48%, rgba(7, 17, 31, 0.80) 100%),
        url('/assets/images/blog-hero-background.webp') center / cover no-repeat;
}

/* Remove glass blur + inset shadow — they create light-edge artifacts on the hero bg */
.blog-show-hero .blog-show-container {
    position: relative;
    z-index: 1;
    background: rgba(7, 17, 31, 0.76);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 1.25rem;
    box-shadow:
        0 0 40px rgba(59, 130, 246, 0.08),
        0 25px 50px -12px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.blog-show-hero .blog-show-container:hover {
    box-shadow:
        0 0 50px rgba(59, 130, 246, 0.12),
        0 30px 60px -12px rgba(0, 0, 0, 0.5);
    border-color: rgba(59, 130, 246, 0.25);
}

/* Light theme: Clean Editorial Surface */
html[data-theme="light"] .blog-show-hero .blog-show-container {
    background: rgba(7, 17, 31, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-top: 3px solid var(--cta, #1d4ed8);
    border-radius: 1.5rem;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.04),
        0 20px 25px -5px rgba(0, 0, 0, 0.03);
}



@keyframes hero-mesh-drift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-5%, 3%) rotate(2deg); }
}


/* Hero content wrapper for animations */
.blog-hero-content {
    animation: hero-fade-up 0.6s ease-out forwards;
}

/* Hero title: modern typography with gradient effect */
.blog-show-hero h1,
.blog-show-hero .blog-hero-title {
    font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    color: #fff;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #fff;
    animation: hero-fade-up 0.6s ease-out 0.1s forwards;
    opacity: 0;
}

/* Hero subtitle */
.blog-show-hero .text-xl,
.blog-show-hero .blog-hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.35rem);
    line-height: 1.6;
    opacity: 0.85;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    /* Excerpts may run to 500 chars; the hero shows a teaser, not the wall. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: hero-fade-up 0.6s ease-out 0.2s forwards;
    opacity: 0;
}

/* Hero animations */
@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero category badge: white text in light theme (inside hero container) */
html[data-theme="light"] .blog-show-hero .blog-show-category-badge,
html[data-theme="light"] .blog-show-hero .blog-show-category-badge:hover {
    color: #fff !important;
}

/* Card category badge: theme-aware (uses var(--cta) in light, default in dark) */
html[data-theme="light"] .blog-index-page .blog-index-card__category,
html[data-theme="light"] .blog-show-page .blog-index-card__category {
    color: var(--cta, #2563eb) !important;
}
html[data-theme="dark"] .blog-index-page .blog-index-card__category,
html[data-theme="dark"] .blog-show-page .blog-index-card__category {
    color: #fff;
}

html[data-theme="light"] .blog-show-hero .text-xl,
html[data-theme="light"] .blog-show-hero .blog-hero-subtitle,
html[data-theme="light"] .blog-show-hero .text-muted {
    color: #fff !important;
    opacity: 1;
}

/* Reduced motion: disable animations */
@media (prefers-reduced-motion: reduce) {
    .blog-show-hero::before {
        animation: none;
    }

    .blog-hero-content,
    .blog-show-hero h1,
    .blog-show-hero .blog-hero-title,
    .blog-show-hero .text-xl,
    .blog-show-hero .blog-hero-subtitle {
        animation: none;
        opacity: 1;
    }
}

/* Hero: top rounded corners (blog show only) - Updated for contained design */
.blog-show-hero .blog-show-container {
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

/* Hero / index: category chip — theme tokens (WCAG AA on dark + light; see base.css --badge-*) */
.blog-show-category-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--badge-bg, rgba(37, 99, 235, 0.12));
    color: var(--badge-fg, #1e3a8a);
    border: 1px solid var(--badge-border, rgba(37, 99, 235, 0.28));
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Beat app.css .bg-bg-900 a:not([class*="text-"]) so anchor badges keep --badge-fg */
.bg-bg-900 a.blog-show-category-badge,
.bg-bg-800 a.blog-show-category-badge {
    color: var(--badge-fg, #1e3a8a);
}

/* Grid and sticky sidebar: main content + aside side-by-side on desktop */
.blog-show-section .blog-show-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .blog-show-section .blog-show-grid {
        grid-template-columns: 2fr 1fr;
    }
    .blog-show-main {
        min-width: 0; /* allow content to shrink in grid */
    }
    .blog-show-sidebar {
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}

/* Main content: thin border, rounded, distinct from sidebar */
.blog-show-main {
    background: var(--bg-900, #0C0C1F);
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    border-radius: 1rem;
    padding: 1.5rem;
    min-height: 12rem;
}
@media (min-width: 768px) {
    .blog-show-main {
        padding: 2rem;
    }
}

/* Post body (prose): ensure readable when utility/bundle load order varies */
.blog-show-main .prose {
    color: var(--fg, #EAF4FF);
    max-width: none;
    line-height: 1.7;
}
.blog-show-main .prose p {
    margin-bottom: 1rem;
}
.blog-show-main .prose h1, .blog-show-main .prose h2, .blog-show-main .prose h3 {
    color: var(--fg, #EAF4FF);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
/* Links: distinguishable by underline (not color alone) + sufficient contrast on dark */
.blog-show-main .prose a {
    color: var(--cta-on-dark, #93c5fd);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.blog-show-main .prose a:hover {
    color: #bfdbfe;
}
.blog-show-main .prose a:focus-visible {
    outline: 2px solid var(--cta-on-dark, #93c5fd);
    outline-offset: 2px;
}
/* All links in main (breadcrumb, edit, etc.) – underline + contrast */
.blog-show-main a {
    color: var(--cta-on-dark, #93c5fd);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.blog-show-main a:hover {
    color: #bfdbfe;
}
.blog-show-main a:focus-visible {
    outline: 2px solid var(--cta-on-dark, #93c5fd);
    outline-offset: 2px;
}
.blog-show-breadcrumb a {
    color: var(--cta-on-dark, #93c5fd);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.blog-show-breadcrumb a:hover {
    color: #bfdbfe;
}
.blog-show-main .text-cta {
    color: var(--cta-on-dark, #93c5fd);
}

/* Reaction buttons: Like / Dislike – same size, no fill, bold white text, rounded border, SVG icon */
.blog-show-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.blog-show-reactions-label,
.blog-show-reactions-count {
    font-size: 0.875rem;
    color: var(--muted);
}
.blog-show-reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 6.5rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 2px solid var(--line1, rgba(255, 255, 255, 0.5));
    border-radius: 9999px;
    color: var(--fg);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.blog-show-reaction-btn:hover {
    border-color: var(--line2, rgba(255, 255, 255, 0.85));
    color: var(--fg);
    background: var(--glass, rgba(255, 255, 255, 0.08));
}
.blog-show-reaction-btn:focus-visible {
    outline: 2px solid var(--cta-on-dark, #93c5fd);
    outline-offset: 2px;
}
.blog-show-reaction-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    stroke: currentColor;
}

.blog-show-main .prose ul, .blog-show-main .prose ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

/* Code blocks: scrollable, monospace, copy-friendly */
.blog-show-main .prose pre {
    margin: 1.25rem 0;
    padding: 0;
    background: var(--bg-800, rgba(15, 23, 42, 0.85));
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.2));
    border-radius: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
}
.blog-show-main .prose pre code {
    display: block;
    padding: 1rem 1.125rem;
    font-size: 0.875rem;
    line-height: 1.6;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    color: var(--fg, #EAF4FF);
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.blog-show-main .prose p code,
.blog-show-main .prose li code {
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    border-radius: 0.35rem;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.2);
    word-break: break-word;
}

/* Related Services block (in main content) */
.blog-show-related-services {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
}
.blog-show-related-services h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--fg, #EAF4FF);
}
.blog-show-related-services-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.blog-show-related-services-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--cta-on-dark, #93c5fd);
    color: var(--cta-on-dark, #93c5fd);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.blog-show-related-services-links a:hover {
    background: rgba(147, 197, 253, 0.15);
    color: #bfdbfe;
}

/* Tags block (in main content) */
.blog-show-tags-block {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
}
.blog-show-tags-block h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--fg, #EAF4FF);
}
.blog-show-tags-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.blog-show-tags-links a {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--bg-800, #12122a);
    color: var(--muted, #CFE3FF);
    border-radius: 9999px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}
.blog-show-tags-links a:hover {
    color: var(--fg, #EAF4FF);
}

/* Sidebar cards */
.blog-show-sidebar-card {
    background: var(--bg-900, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 0;
}
.blog-show-sidebar-card + .blog-show-sidebar-card {
    margin-top: 1.5rem;
}
.blog-show-sidebar-card h3 {
    color: var(--fg, #EAF4FF);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Service and article cards in sidebar */
.blog-show-service-card,
.blog-show-article-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    border-radius: 0.75rem;
    background: rgba(12, 12, 31, 0.5);
    padding: 0.75rem;
    text-decoration: none;
    color: inherit;
    /* No transition on border/background – avoids non-composited animation (CLS/jank) */
}
.blog-show-service-card:hover,
.blog-show-article-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--bg-800, rgba(15, 23, 42, 0.6));
}
.blog-show-article-cards .blog-show-article-card + .blog-show-article-card,
.blog-show-service-cards .blog-show-service-card + .blog-show-service-card {
    margin-top: 0.75rem;
}
.blog-show-article-card-img-wrap {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--bg-800, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-show-article-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-show-article-card-img-wrap .blog-show-placeholder-svg {
    width: 2rem;
    height: 2rem;
    opacity: 0.6;
}
.blog-show-article-card-content,
.blog-show-service-card-content {
    min-width: 0;
    flex: 1;
}
.blog-show-article-card-content h4,
.blog-show-service-card-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg, #EAF4FF);
    margin: 0 0 0.25rem;
}
.blog-show-article-card-content p,
.blog-show-service-card-content p {
    font-size: 0.75rem;
    color: var(--muted, #CFE3FF);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-show-article-card-content .text-cta,
.blog-show-service-card-content .text-cta {
    font-size: 0.75rem;
    color: var(--cta-on-dark, #93c5fd);
    font-weight: 500;
}
/* Sidebar cards: links and CTA text – sufficient contrast on dark bg */
.blog-show-sidebar-card a {
    color: inherit;
}
.blog-show-sidebar-card a:hover {
    color: inherit;
}
.blog-show-sidebar-card .blog-show-service-card,
.blog-show-sidebar-card .blog-show-article-card {
    color: var(--fg, #EAF4FF);
}
.blog-show-sidebar-card .blog-show-service-card .text-cta,
.blog-show-sidebar-card .blog-show-service-card span.text-xs.text-cta,
.blog-show-sidebar-card .blog-show-article-card .text-cta {
    color: var(--cta-on-dark, #93c5fd);
}
.blog-show-sidebar-card .blog-show-service-card:hover .text-cta,
.blog-show-sidebar-card .blog-show-article-card:hover .text-cta {
    color: #bfdbfe;
}

/* Search form inside sidebar card */
.blog-show-sidebar-card .blog-aside__search-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.blog-show-sidebar-card .blog-aside__search-form .flex {
    display: flex;
    gap: 0.5rem;
}
.blog-show-sidebar-card .blog-aside__search-form input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--bg-900, #0C0C1F);
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    border-radius: 0.5rem;
    color: var(--fg, #EAF4FF);
    font-size: 0.875rem;
}
.blog-show-sidebar-card .blog-aside__search-form input::placeholder {
    color: var(--muted, #CFE3FF);
    opacity: 0.8;
}
.blog-show-sidebar-card .blog-aside__search-form input:focus {
    border-color: var(--cta, #2563eb);
    outline: none;
}
.blog-show-sidebar-card .blog-aside__search-form button {
    padding: 0.5rem 1rem;
    background: var(--cta, #2563eb);
    color: var(--color-on-accent, #fff);
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}
.blog-show-sidebar-card .blog-aside__search-form button:hover {
    opacity: 0.9;
}

/* Tag pills in sidebar */
.blog-show-sidebar-card .flex.flex-wrap.gap-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.blog-show-sidebar-card .flex.flex-wrap.gap-2 a {
    padding: 0.25rem 0.75rem;
    background: var(--bg-800, rgba(15, 23, 42, 0.6));
    color: var(--muted, #CFE3FF);
    border-radius: 9999px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}
.blog-show-sidebar-card .flex.flex-wrap.gap-2 a:hover {
    color: var(--cta-on-dark, #93c5fd);
}

/* Categories list in sidebar */
.blog-show-sidebar-card nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.blog-show-sidebar-card nav ul li {
    margin-bottom: 0.5rem;
}
.blog-show-sidebar-card nav ul li:last-child {
    margin-bottom: 0;
}
.blog-show-sidebar-card nav a {
    color: var(--muted);
    text-decoration: none;
}
.blog-show-sidebar-card nav a:hover {
    color: var(--cta-on-dark, #93c5fd);
}

/* CTA buttons in sidebar */
.blog-show-sidebar-card .flex.flex-col.gap-2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.blog-show-sidebar-card .flex.flex-col.gap-2 a {
    display: block;
    padding: 0.625rem 1rem;
    text-align: center;
    font-weight: 600;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: opacity 0.2s;
}
.blog-show-sidebar-card .flex.flex-col.gap-2 a:first-of-type {
    background: var(--cta, #2563eb);
    color: var(--color-on-accent, #fff);
    border: none;
}
.blog-show-sidebar-card .flex.flex-col.gap-2 a:last-of-type {
    border: 1px solid rgba(147, 197, 253, 0.4);
    color: var(--cta-on-dark, #93c5fd);
    background: transparent;
}
.blog-show-sidebar-card .flex.flex-col.gap-2 a:last-of-type:hover {
    color: #bfdbfe;
}

/* Comments section container */
.blog-show-comments {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
}

/* Comment item and replies */
.blog-show-comment-item {
    margin-bottom: 1rem;
}
.blog-show-comment-item:last-child {
    margin-bottom: 0;
}
.blog-show-comment-body {
    color: var(--fg, #EAF4FF);
}
.blog-show-comment-meta {
    color: var(--muted, #CFE3FF);
}
.blog-show-reply-item {
    margin-bottom: 0.75rem;
}
.blog-show-reply-item:last-child {
    margin-bottom: 0;
}

/* Details/summary for reply form */
.blog-show-details {
    margin-top: 0.5rem;
}
.blog-show-details summary {
    list-style: none;
}
.blog-show-details summary::-webkit-details-marker {
    display: none;
}
.blog-show-details[open] summary {
    margin-bottom: 0.25rem;
}
.blog-show-reply-form-wrap input,
.blog-show-reply-form-wrap textarea {
    background-color: var(--bg-900, #0C0C1F);
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    color: var(--fg, #EAF4FF);
}
.blog-show-reply-form-wrap input:focus,
.blog-show-reply-form-wrap textarea:focus {
    border-color: var(--cta, #2563eb);
    outline: 0;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* Leave comment form */
.blog-show-leave-comment {
    background: var(--bg-800, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    border-radius: 1rem;
    padding: 1.5rem;
}
.blog-show-leave-comment h3 {
    color: var(--fg, #EAF4FF);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
.blog-show-leave-comment .space-y-4 > * + * {
    margin-top: 1rem;
}
.blog-show-leave-comment label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted, #CFE3FF);
    margin-bottom: 0.375rem;
}
.blog-show-leave-comment label .text-red-400 {
    color: #f87171;
}
.blog-show-leave-comment input[type="text"],
.blog-show-leave-comment input[type="email"],
.blog-show-leave-comment textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--fg, #EAF4FF);
    background: var(--bg-900, #0C0C1F);
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    border-radius: 0.5rem;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.blog-show-leave-comment textarea {
    min-height: 6rem;
    resize: vertical;
}
.blog-show-leave-comment input::placeholder,
.blog-show-leave-comment textarea::placeholder {
    color: var(--muted, #CFE3FF);
    opacity: 0.7;
}
.blog-show-leave-comment input:focus,
.blog-show-leave-comment textarea:focus {
    border-color: var(--cta, #2563eb);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}
.blog-show-leave-comment input:read-only,
.blog-show-leave-comment textarea:read-only {
    opacity: 0.85;
    cursor: not-allowed;
}
.blog-show-leave-comment p.text-xs {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--muted, #CFE3FF);
}
.blog-show-leave-comment button[type="submit"] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-accent, #fff);
    background: var(--cta, #2563eb);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}
.blog-show-leave-comment button[type="submit"]:hover {
    background: #1d4ed8;
    opacity: 1;
}
.blog-show-leave-comment button[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}

/* Post featured image: reserve 16:9 box so decode does not shift layout (Lighthouse CLS) */
.blog-show-featured-media {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-height: min(60vh, 540px);
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--bg-800, #15152a);
}
.blog-show-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Line clamp fallback (if not in utilities) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog index cards: same colours as .blog-show-main (NVT layout, blog-show styling) */
.blog-index-page .blog-index-card {
    background: var(--bg-900, #0C0C1F);
    border: 1px solid var(--line2, rgba(37, 99, 235, 0.12));
    border-radius: 1rem;
    padding: 0;
    overflow: hidden;
    position: relative;
    /* Full height so every card in a grid row matches, and the footer can pin
       to the bottom regardless of title/excerpt length. */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s ease;
}
.blog-index-page .blog-index-card:hover {
    border-color: var(--line1, rgba(37, 99, 235, 0.25));
}
.blog-index-page .blog-index-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1 1 auto;
    height: 100%;
}
.blog-index-page .blog-index-card__img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--bg-800, #15152a);
    overflow: hidden;
}
.blog-index-page .blog-index-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.blog-index-page .blog-index-card__img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--bg-800, #15152a);
}
.blog-index-page .blog-index-card__img-placeholder-icon {
    width: 3.5rem;
    height: 3.5rem;
    color: rgba(255, 255, 255, 0.3);
}
html[data-theme="light"] .blog-index-page .blog-index-card__img-placeholder {
    background: var(--bg-800, #15152a);
}
html[data-theme="light"] .blog-index-page .blog-index-card__img-placeholder-icon {
    color: var(--cta, #2563eb);
}
.blog-index-page .blog-index-card__date {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-on-accent, #fff);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.2;
}
.blog-index-page .blog-index-card__date-day {
    display: block;
    font-weight: 700;
    font-size: 1rem;
}
.blog-index-page .blog-index-card__date-month {
    display: block;
    text-transform: uppercase;
}
.blog-index-page .blog-index-card__body {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
    flex: 1 1 auto;
}
.blog-index-page .blog-index-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--fg, #EAF4FF);
    line-height: 1.35;
}
.blog-index-page .blog-index-card__link:hover .blog-index-card__title {
    color: var(--cta-on-dark, #93c5fd);
}
.blog-index-page .blog-index-card__excerpt {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-index-page .blog-index-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Pin to the bottom of the card body so footers line up across a row
       even when titles/excerpts differ in height. */
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.8125rem;
}
.blog-index-page .blog-index-card__author {
    color: var(--muted, #CFE3FF);
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blog-index-page .blog-index-card__category {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cta, #2563eb) 14%, transparent);
    color: var(--cta, #2563eb);
    font-weight: 600;
    font-size: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}
/* Breadcrumb: links distinguishable and sufficient contrast (WCAG) */
.blog-index-page .blog-index-breadcrumb a,
.blog-index-page .blog-index-breadcrumb a.text-cta {
    color: var(--cta-on-dark, #93c5fd);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.blog-index-page .blog-index-breadcrumb a:hover,
.blog-index-page .blog-index-results strong {
    color: var(--fg, #EAF4FF);
}

/* Light theme: related cards on blog index/sidebar use dark-tinted panels — switch to surface tokens */
html[data-theme="light"] .blog-show-service-card,
html[data-theme="light"] .blog-show-article-card {
    background: var(--color-surface, #fff);
    border-color: var(--line2);
}
html[data-theme="light"] .blog-show-service-card:hover,
html[data-theme="light"] .blog-show-article-card:hover {
    background: var(--color-surface-deep, #f1f5f9);
    border-color: var(--line1);
}
html[data-theme="light"] .blog-show-article-card-img-wrap {
    background: var(--color-surface-deep, #f1f5f9);
    border-color: var(--line2);
}
html[data-theme="light"] .blog-show-article-card-content .text-cta,
html[data-theme="light"] .blog-show-service-card-content .text-cta {
    color: var(--cta);
}
html[data-theme="light"] .blog-show-sidebar-card .blog-show-service-card .text-cta,
html[data-theme="light"] .blog-show-sidebar-card .blog-show-article-card .text-cta {
    color: var(--cta);
}
html[data-theme="light"] .blog-show-sidebar-card .blog-show-service-card:hover .text-cta,
html[data-theme="light"] .blog-show-sidebar-card .blog-show-article-card:hover .text-cta {
    color: var(--cta-hover);
}
html[data-theme="light"] .blog-index-page .blog-index-card__link:hover .blog-index-card__title {
    color: var(--cta);
}

html[data-theme="light"] .blog-show-main .prose pre {
    background: var(--color-surface-deep, #f1f5f9);
    border-color: var(--line2);
}
html[data-theme="light"] .blog-show-main .prose pre code {
    color: var(--fg, #0f172a);
}
html[data-theme="light"] .blog-show-main .prose p code,
html[data-theme="light"] .blog-show-main .prose li code {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}


/* ---------------------------------------------------------------------
   Ported from the base assets copy of this stylesheet.

   The theme copy is the one actually served through theme-active, and it
   had drifted behind the base tree, so these rules never reached the page.
   Only selectors the theme did not already define are included, and @media
   context is preserved, so nothing the theme deliberately overrides here
   changes.
   --------------------------------------------------------------------- */

.blog-show-hero .blog-show-container--featured-image {
  isolation: isolate;
  overflow: hidden;
  background-color: #07111f;
  background-image: var(--blog-hero-image);
  background-size: cover;
  background-position: center;
}

.blog-show-hero .blog-show-container--featured-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 7, 18, 0.30), rgba(3, 7, 18, 0.46));
}

.blog-show-hero .blog-show-container--featured-image .blog-hero-content {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] .blog-show-hero .blog-show-container--featured-image {
  background-color: #07111f;
  background-image: var(--blog-hero-image);
  border-color: rgba(255, 255, 255, 0.20);
}

html[data-theme="light"] .blog-show-hero .blog-show-container--featured-image::before {
  background: linear-gradient(180deg, rgba(3, 7, 18, 0.34), rgba(3, 7, 18, 0.50));
}

.blog-index-page .blog-index-card:hover .blog-index-card__category {
  background: rgba(var(--cta-rgb, 37, 99, 235), 0.25);
  border-color: rgba(var(--cta-rgb, 37, 99, 235), 0.5);
}

.blog-index-page .blog-index-card__author:hover {
  color: var(--cta-on-dark, #93c5fd);
}

html[data-theme="light"] .blog-index-page .blog-index-card__author:hover {
  color: var(--cta, #2563eb);
}

@media (max-width: 1023px){
/* app.mobile.css: mobile-only (max-width: 1023px). Load with media="(max-width: 1023px)". */
.btn {
  width: 100%;
  justify-content: center;
}

}
@media (min-width: 1024px){
/* app.desktop.css: desktop-only (min-width: 1024px). Load with media="(min-width: 1024px)". */
.heading-1 {
  font-size: 4.5rem;
}

}
@media (max-width: 1023px){
/* layout-core.mobile.css: mobile-only (max-width: 1023px). Load with media="(max-width: 1023px)". */
.container {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (max-width: 768px) {
  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .section--loose {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

@media (max-width: 480px) {
  .section {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}

}
@media (min-width: 1024px){
/* layout-core.desktop.css: desktop-only (min-width: 1024px). Load with media="(min-width: 1024px)". */
.container {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.grid--responsive {
  grid-template-columns: repeat(4, 1fr);
}
.grid--responsive-2 {
  grid-template-columns: repeat(2, 1fr);
}

}
@media (min-width: 1024px){
/* layout-utilities.desktop.css: desktop-only (min-width: 1024px). Load with media="(min-width: 1024px)". */
.lg\:grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:col-span-2 {
  grid-column: span 2 / span 2;
}
.lg\:hidden {
  display: none !important;
}
.lg\:px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.lg\:p-12 {
  padding: var(--space-12);
}
.lg\:max-w-md {
  max-width: 28rem;
}

}
@media (min-width: 1024px){
/* brand-design.desktop.css: desktop-only (min-width: 1024px). Load with media="(min-width: 1024px)". */
.section-title {
  font-size: 2.5rem;
}

.grid-cols-1-lg-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-1-lg-12 {
  grid-template-columns: repeat(12, 1fr);
}

.padding-inline-responsive {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

}
@media (max-width: 1023px){
/* header.mobile.css: mobile-only (max-width: 1023px). Load with media="(max-width: 1023px)". */
@media (max-width: 1023px) {
  .header-inner {
    min-height: 56px;
    height: 56px;
  }

  .logo-text {
    font-size: var(--font-size-lg);
  }

  .logo-icon {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .logo-text {
    font-size: var(--font-size-base);
  }
}

}
/* Stitch Bold Modern — base theme CSS */
/* Active theme CSS is served from /assets/theme-active/css/ when theme is published */

:root {
  --theme-primary: #1a56db;
  --theme-secondary: #1e3a8a;
  --theme-accent: #7c3aed;
}