/* components.css */
@layer components {
  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    user-select: none;
    white-space: nowrap;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--primary); color: var(--primary-text); border-color: transparent; }
  .btn-secondary { background: transparent; color: var(--text); }
  .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
  .btn-ghost:hover { border-color: var(--border); color: var(--text); }

  /* Cards */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-1);
  }
  .card:hover { background: var(--surface-2); }

  /* Enterprise card variant */
  .card-enterprise {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }
  .card-enterprise:hover { background: var(--surface-2); }

  /* Badges */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--text-sm);
    color: var(--muted);
  }

  /* Trust badges */
  .trust-badge-large {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--muted);
  }

  /* Page header (used on Products/Resources/Trust/Contact/etc.) */
  .page-header { padding: var(--space-7) 0 var(--space-5); }
  .page-header .meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
  .page-header .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

  /* Prose (long-form pages: Trust Procurement, Privacy, Terms, resource detail) */
  .prose { max-width: var(--reading-max); }
  .prose p { margin-bottom: var(--space-4); }
  .prose h2 { margin-top: var(--space-7); }
  .prose h3 { margin-top: var(--space-6); }
  .prose ul, .prose ol { margin-bottom: var(--space-4); }
  .prose li { margin-bottom: var(--space-2); }
  .prose code {
    font-family: var(--font-mono);
    font-size: 0.95em;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.25);
  }

  /* Callouts */
  .callout {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: rgba(255,255,255,0.05);
  }
  .callout strong { display: block; margin-bottom: var(--space-2); }

  /* Tables (enterprise doc style) */
  .table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
  .table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
  }
  .table th, .table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
  }
  .table th { background: rgba(255,255,255,0.04); font-weight: 600; }
  .table tr:last-child td { border-bottom: 0; }

  /* Forms */
  label { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
  input, select, textarea {
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.25);
    color: var(--text);
    padding: 0.65rem 0.75rem;
    font: inherit;
    transition: border-color var(--dur-1) var(--ease);
  }
  input:focus, select:focus, textarea:focus {
    border-color: var(--focus);
    outline: none;
  }
  .field-hint { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-1); }
  .field-error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--space-1); }

  /* If you set aria-invalid="true", it becomes visually obvious */
  [aria-invalid="true"] { border-color: rgba(255, 92, 92, 0.65); }

  /* Testimonial cards */
  .testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }

  /* Glass effect for header */
  .glass {
    background: rgba(11, 13, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }

  /* Nav link styling */
  .nav-link {
    text-decoration: none;
    color: var(--muted);
    transition: color var(--dur-1) var(--ease);
  }
  .nav-link:hover { color: var(--text); }

  /* Gradient text */
  .gradient-text {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}