/*
 * components.css
 * Complex component classes. Loaded after utilities.css.
 *
 * Rule: only write a component class when 3+ utilities
 * repeat together 3+ times across the codebase.
 * All values must reference tokens — no raw hex, px, or rem.
 *
 * COMPONENT inventory:
 *   nav          .nav .nav-logo .nav-links .nav-cta .nav-toggle .nav-drawer
 *   hero         .hero .hero-eyebrow .hero-title .hero-subtitle .hero-actions
 *   btn          .btn-primary .btn-secondary .btn-ghost .btn-danger .btn-sm .btn-lg .btn-full
 *   card         .card .card--interactive .card--sunken
 *                .card-icon .card-eyebrow .card-title .card-body .card-footer .card-meta
 *   badge        .badge .badge-info .badge-success .badge-warning .badge-danger
 *   alert        .alert .alert-info .alert-success .alert-warning .alert-danger
 *                .alert-icon .alert-content .alert-title .alert-body
 *   form         .form .form-group .form-label .form-label-required
 *                .form-hint .form-error .form-inline .form-count
 *   table        .table-wrapper .table-striped .table-hover .table-compact
 *   modal        .modal-header .modal-title .modal-close .modal-body .modal-footer
 *   pagination   .pagination .pagination-item .pagination-ellipsis
 *   animate      [data-animate] [data-animate].is-visible
 */

/* ─── 2. Navigation ───────────────────────────────────────────────────────── */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.nav--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-logo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo:hover {
  color: var(--color-text-primary);
}

.nav-links {
  display: none;
  list-style: none;
  gap: var(--space-1);
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
    align-items: center;
  }
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-links a:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-sunken);
}

.nav-links a[aria-current='page'] {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.nav-cta {
  flex-shrink: 0;
}

/* Mobile nav toggle */
.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0;
  min-height: unset;
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border-default);
  background: var(--color-bg-surface);
}

.nav-drawer.is-open {
  display: flex;
}

@media (min-width: 768px) {
  .nav-drawer { display: none !important; }
}

.nav-drawer a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.nav-drawer a:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-sunken);
}



/* ─── 3. Hero ─────────────────────────────────────────────────────────────── */

.hero {
  padding-block: var(--space-16);
  text-align: center;
}

@media (min-width: 768px) {
  .hero { padding-block: var(--space-16) var(--space-16); }
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-interactive-primary);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-4);
}

.hero-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  max-width: 18ch;
  margin-inline: auto;
  margin-block-end: var(--space-5);
}

@media (min-width: 768px) {
  .hero-title { font-size: var(--font-size-4xl); }
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 52ch;
  margin-inline: auto;
  margin-block-end: var(--space-8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}


/* ─── 4. Buttons ──────────────────────────────────────────────────────────── */
/* base.css sets the default (primary) button style on the button element.    */
/* These classes extend and create variants.                                  */

.btn-primary {
  background: var(--color-interactive-primary);
  color: var(--color-interactive-primary-text);
  border-color: var(--color-interactive-primary);
}

.btn-primary:hover {
  background: var(--color-interactive-primary-hover);
  border-color: var(--color-interactive-primary-hover);
}

.btn-secondary {
  background: var(--color-interactive-secondary);
  color: var(--color-interactive-secondary-text);
  border-color: var(--color-border-default);
}

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

.btn-ghost {
  background: transparent;
  color: var(--color-interactive-primary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-info-bg);
  border-color: transparent;
}

.btn-danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
}

.btn-danger:hover {
  background: var(--color-danger-border);
  color: var(--color-danger-text);
}

/* Sizes */
.btn-sm {
  font-size: var(--font-size-sm);
  min-height: 36px;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
}

.btn-lg {
  font-size: var(--font-size-lg);
  min-height: 52px;
  padding-block: var(--space-3);
  padding-inline: var(--space-8);
}

.btn-full {
  width: 100%;
}


/* ─── 5. Cards ────────────────────────────────────────────────────────────── */

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card--interactive {
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: inherit;
  display: flex;
}

.card--interactive:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--color-bg-overlay) 8%, transparent);
}

.card--interactive:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.card--sunken {
  background: var(--color-bg-sunken);
  border-color: transparent;
}

.card-icon {
  width: 44px;
  height: 44px;
  background: var(--color-info-bg);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-info-icon);
  flex-shrink: 0;
}

.card-eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.card-body {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  flex: 1;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border-default);
  margin-block-start: auto;
}

.card-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}


/* ─── 6. Badges ───────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  background: var(--badge-bg, var(--color-bg-sunken));
  color: var(--badge-text, var(--color-text-secondary));
  border: 1px solid var(--badge-border, var(--color-border-default));
}

.badge-info    { --badge-bg: var(--color-info-bg);    --badge-text: var(--color-info-text);    --badge-border: var(--color-info-border); }
.badge-success { --badge-bg: var(--color-success-bg); --badge-text: var(--color-success-text); --badge-border: var(--color-success-border); }
.badge-warning { --badge-bg: var(--color-warning-bg); --badge-text: var(--color-warning-text); --badge-border: var(--color-warning-border); }
.badge-danger  { --badge-bg: var(--color-danger-bg);  --badge-text: var(--color-danger-text);  --badge-border: var(--color-danger-border); }


/* ─── 7. Alerts ───────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--alert-border, var(--color-border-default));
  background: var(--alert-bg, var(--color-bg-sunken));
  color: var(--alert-text, var(--color-text-primary));
}

.alert-info    { --alert-bg: var(--color-info-bg);    --alert-text: var(--color-info-text);    --alert-border: var(--color-info-icon); }
.alert-success { --alert-bg: var(--color-success-bg); --alert-text: var(--color-success-text); --alert-border: var(--color-success-icon); }
.alert-warning { --alert-bg: var(--color-warning-bg); --alert-text: var(--color-warning-text); --alert-border: var(--color-warning-icon); }
.alert-danger  { --alert-bg: var(--color-danger-bg);  --alert-text: var(--color-danger-text);  --alert-border: var(--color-danger-icon); }

.alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
}

.alert-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.alert-title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

.alert-body {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}


/* ─── 8. Forms ────────────────────────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.form-label-required::after {
  content: ' *';
  color: var(--color-danger-icon);
  font-weight: var(--font-weight-regular);
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  margin-block-start: var(--space-1);
}

.form-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger-text);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}

/* Error state on inputs */
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--color-danger-icon);
}

.form-group.has-error input:focus-visible,
.form-group.has-error textarea:focus-visible,
.form-group.has-error select:focus-visible {
  border-color: var(--color-danger-icon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-icon) 20%, transparent);
}

/* Inline form: label and input side by side */
.form-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}

.form-inline .form-group {
  flex: 1;
  min-width: 200px;
}

/* Character count */
.form-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  text-align: end;
}

.form-count.is-near-limit { color: var(--color-warning-text); }
.form-count.is-at-limit   { color: var(--color-danger-text); }


/* ─── 9. Tables ───────────────────────────────────────────────────────────── */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.table-striped tbody tr:nth-child(even) {
  background: var(--color-bg-sunken);
}

.table-hover tbody tr {
  transition: background-color 0.1s ease;
}

.table-hover tbody tr:hover {
  background: var(--color-bg-sunken);
}

.table-compact th,
.table-compact td {
  padding: var(--space-2) var(--space-3);
}


/* ─── 10. Modals ──────────────────────────────────────────────────────────── */

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
}

.modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

.modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-height: unset;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--color-bg-sunken);
  color: var(--color-text-primary);
}

.modal-body {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  margin-block-end: var(--space-6);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}


/* ─── 11. Pagination ──────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination-item:hover {
  background: var(--color-bg-sunken);
  color: var(--color-text-primary);
}

.pagination-item[aria-current='page'] {
  background: var(--color-interactive-primary);
  color: var(--color-interactive-primary-text);
  border-color: var(--color-interactive-primary);
}

.pagination-item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.pagination-ellipsis {
  padding-inline: var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  user-select: none;
}


/* ─── 12. Utilities ───────────────────────────────────────────────────────── */

/* Screen-reader only — visually hidden but accessible */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Text alignment */
.text-start   { text-align: start; }
.text-center  { text-align: center; }
.text-end     { text-align: end; }

/* Text color */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-subtle    { color: var(--color-text-subtle); }
.text-danger    { color: var(--color-danger-text); }
.text-success   { color: var(--color-success-text); }

/* Font weight */
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium  { font-weight: var(--font-weight-medium); }
.font-bold    { font-weight: var(--font-weight-bold); }

/* Truncate single line */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Truncate multi-line (2 lines default) */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: var(--clamp-lines, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spacing helpers: margin-block */
.mt-0  { margin-block-start: 0; }
.mt-4  { margin-block-start: var(--space-4); }
.mt-8  { margin-block-start: var(--space-8); }
.mt-12 { margin-block-start: var(--space-12); }
.mb-4  { margin-block-end: var(--space-4); }
.mb-8  { margin-block-end: var(--space-8); }

/* Aspect ratios */
.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-portrait  { aspect-ratio: 3 / 4; }

/* Image fill helper */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Focus ring: scroll offset for sticky headers */
.focus-offset:focus-visible {
  scroll-margin-top: var(--space-16);
}

/* ─── 11. Scroll animation ────────────────────────────────────────────────── */
/* Triggered by main.js IntersectionObserver on elements with data-animate.  */
/* CSS handles the transition; JS adds .is-visible when element enters view. */

[data-animate] {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition: opacity 0.4s ease, transform 0.4s ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger sibling animations using data-animate-delay="1|2|3" */
[data-animate][data-animate-delay="1"] { transition-delay: 0.1s; }
[data-animate][data-animate-delay="2"] { transition-delay: 0.2s; }
[data-animate][data-animate-delay="3"] { transition-delay: 0.3s; }
[data-animate][data-animate-delay="4"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate][data-animate-delay] {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}