/* fsq-components-q13.css - Component styles layer */
@layer components {
  /* Buttons */
  .fsq-btn {
    &--primary {
      background: var(--fsq-color-primary-500);
      color: white;

      &:hover:not(:disabled) {
        background: var(--fsq-color-primary-600);
        transform: translateY(-1px);
        box-shadow: var(--fsq-shadow-md);
      }

      &:active:not(:disabled) {
        transform: translateY(0);
      }
    }

    &--secondary {
      background: var(--fsq-color-secondary-500);
      color: white;

      &:hover:not(:disabled) {
        background: var(--fsq-color-secondary-600);
      }
    }

    &--outline {
      border: 2px solid var(--fsq-color-primary-500);
      color: var(--fsq-color-primary-600);

      &:hover:not(:disabled) {
        background: var(--fsq-color-primary-50);
      }
    }

    &--ghost {
      color: var(--fsq-color-primary-600);

      &:hover:not(:disabled) {
        background: var(--fsq-color-primary-50);
      }
    }

    &--lg {
      padding: var(--fsq-space-4) var(--fsq-space-8);
      font-size: var(--fsq-text-lg);
    }

    &--sm {
      padding: var(--fsq-space-2) var(--fsq-space-4);
      font-size: var(--fsq-text-sm);
    }
  }

  /* Cards */
  .fsq-card {
    background: var(--fsq-color-surface);
    border: 1px solid var(--fsq-color-border);
    border-radius: var(--fsq-radius-lg);
    padding: var(--fsq-space-6);
    box-shadow: var(--fsq-shadow-sm);
    transition: all var(--fsq-transition-base);
    content-visibility: auto;

    &:hover {
      box-shadow: var(--fsq-shadow-lg);
      transform: translateY(-2px);
    }

    &__header {
      margin-bottom: var(--fsq-space-4);
    }

    &__title {
      font-size: var(--fsq-text-xl);
      font-weight: var(--fsq-font-bold);
      margin-bottom: var(--fsq-space-2);
    }

    &__body {
      color: var(--fsq-color-text-muted);
      line-height: var(--fsq-leading-relaxed);
    }

    &__footer {
      margin-top: var(--fsq-space-4);
      padding-top: var(--fsq-space-4);
      border-top: 1px solid var(--fsq-color-border);
    }

    &--featured {
      border-color: var(--fsq-color-primary-300);
      background: linear-gradient(135deg, var(--fsq-color-primary-50) 0%, var(--fsq-color-surface) 100%);
    }
  }

  /* Badge */
  .fsq-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--fsq-space-1) var(--fsq-space-3);
    font-size: var(--fsq-text-xs);
    font-weight: var(--fsq-font-bold);
    border-radius: var(--fsq-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;

    &--primary {
      background: var(--fsq-color-primary-100);
      color: var(--fsq-color-primary-800);
    }

    &--secondary {
      background: var(--fsq-color-secondary-100);
      color: var(--fsq-color-secondary-800);
    }

    &--accent {
      background: var(--fsq-color-accent-100);
      color: var(--fsq-color-accent-800);
    }
  }

  /* Alert */
  .fsq-alert {
    padding: var(--fsq-space-4);
    border-radius: var(--fsq-radius-md);
    border-left: 4px solid;

    &--info {
      background: var(--fsq-color-secondary-50);
      border-color: var(--fsq-color-secondary-500);
      color: var(--fsq-color-secondary-900);
    }

    &--success {
      background: #ecfdf5;
      border-color: #10b981;
      color: #065f46;
    }

    &--warning {
      background: #fffbeb;
      border-color: #f59e0b;
      color: #92400e;
    }

    &--error {
      background: #fef2f2;
      border-color: #ef4444;
      color: #991b1b;
    }
  }

  /* Navigation */
  .fsq-nav {
    &__list {
      display: flex;
      gap: var(--fsq-space-6);
      list-style: none;
      padding: 0;
      margin: 0;
    }

    &__link {
      font-weight: var(--fsq-font-bold);
      color: var(--fsq-color-text);
      text-decoration: none;
      padding: var(--fsq-space-2) var(--fsq-space-3);
      border-radius: var(--fsq-radius-md);
      transition: all var(--fsq-transition-fast);

      &:hover {
        background: var(--fsq-color-primary-50);
        color: var(--fsq-color-primary-600);
      }

      &--active {
        background: var(--fsq-color-primary-100);
        color: var(--fsq-color-primary-700);
      }
    }
  }

  /* Hero section */
  .fsq-hero {
    position: relative;
    padding-block: var(--fsq-space-20);
    text-align: center;
    background: linear-gradient(135deg, var(--fsq-color-primary-50) 0%, var(--fsq-color-secondary-50) 100%);

    &__title {
      font-size: var(--fsq-text-5xl);
      margin-bottom: var(--fsq-space-6);
      background: linear-gradient(135deg, var(--fsq-color-primary-600), var(--fsq-color-secondary-600));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    &__subtitle {
      font-size: var(--fsq-text-xl);
      color: var(--fsq-color-text-muted);
      margin-bottom: var(--fsq-space-8);
      max-width: 60ch;
      margin-inline: auto;
    }

    &__actions {
      display: flex;
      gap: var(--fsq-space-4);
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  /* Feature tiles */
  .fsq-feature {
    text-align: center;

    &__icon {
      width: 64px;
      height: 64px;
      margin-inline: auto;
      margin-bottom: var(--fsq-space-4);
      padding: var(--fsq-space-4);
      background: var(--fsq-color-primary-100);
      border-radius: var(--fsq-radius-xl);
      color: var(--fsq-color-primary-600);
    }

    &__title {
      font-size: var(--fsq-text-xl);
      margin-bottom: var(--fsq-space-3);
    }

    &__description {
      color: var(--fsq-color-text-muted);
      line-height: var(--fsq-leading-relaxed);
    }
  }

  /* Form group */
  .fsq-form-group {
    margin-bottom: var(--fsq-space-6);

    &__error {
      color: #dc2626;
      font-size: var(--fsq-text-sm);
      margin-top: var(--fsq-space-2);
    }

    &__hint {
      color: var(--fsq-color-text-muted);
      font-size: var(--fsq-text-sm);
      margin-top: var(--fsq-space-2);
    }
  }

  /* Accordion */
  .fsq-accordion {
    border: 1px solid var(--fsq-color-border);
    border-radius: var(--fsq-radius-lg);
    overflow: hidden;

    &__item {
      border-bottom: 1px solid var(--fsq-color-border);

      &:last-child {
        border-bottom: none;
      }
    }

    &__trigger {
      width: 100%;
      padding: var(--fsq-space-4) var(--fsq-space-6);
      text-align: left;
      font-weight: var(--fsq-font-bold);
      background: var(--fsq-color-surface);
      transition: background var(--fsq-transition-fast);

      &:hover {
        background: var(--fsq-color-neutral-50);
      }

      &[aria-expanded="true"] {
        background: var(--fsq-color-primary-50);
        color: var(--fsq-color-primary-700);
      }
    }

    &__content {
      padding: var(--fsq-space-6);
      background: var(--fsq-color-surface);

      &[hidden] {
        display: none;
      }
    }
  }

  /* Table */
  .fsq-table {
    &--striped tbody tr:nth-child(even) {
      background: var(--fsq-color-neutral-50);
    }

    &--hover tbody tr:hover {
      background: var(--fsq-color-primary-50);
    }
  }

  /* Breadcrumb */
  .fsq-breadcrumb {
    display: flex;
    gap: var(--fsq-space-2);
    align-items: center;
    list-style: none;
    padding: 0;
    margin-bottom: var(--fsq-space-6);
    font-size: var(--fsq-text-sm);

    &__item {
      display: flex;
      align-items: center;
      gap: var(--fsq-space-2);

      &::after {
        content: "/";
        color: var(--fsq-color-text-muted);
      }

      &:last-child::after {
        display: none;
      }
    }

    &__link {
      color: var(--fsq-color-primary-600);

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* Tooltip (Tippy.js will style this) */
  .fsq-tooltip {
    background: var(--fsq-color-neutral-900);
    color: white;
    padding: var(--fsq-space-2) var(--fsq-space-3);
    border-radius: var(--fsq-radius-md);
    font-size: var(--fsq-text-sm);
  }
}