/* Component Styles */
@layer components {
  /* Header */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    background: var(--sccx-surface);
    border-block-end: 1px solid var(--sccx-border);
    z-index: var(--sccx-z-sticky);
    padding-block: var(--sccx-space-s);
  }

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sccx-space-m);
  }

  .logo {
    display: flex;
    align-items: center;
    gap: var(--sccx-space-xs);
    font-weight: var(--sccx-weight-bold);
    font-size: var(--sccx-text-lg);
    color: var(--sccx-text);
    text-decoration: none;
  }

  .logo svg {
    fill: var(--sccx-primary);
  }

  .mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    padding: var(--sccx-space-xs);
    cursor: pointer;
  }

  .mobile-toggle span {
    display: block;
    inline-size: 24px;
    block-size: 3px;
    background: var(--sccx-text);
    border-radius: var(--sccx-radius-sm);
    transition: transform var(--sccx-transition-fast);
  }

  .mobile-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .mobile-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .mobile-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .main-nav ul {
    display: flex;
    gap: var(--sccx-space-m);
    list-style: none;
  }

  .main-nav a {
    color: var(--sccx-text);
    text-decoration: none;
    font-weight: var(--sccx-weight-medium);
    transition: color var(--sccx-transition-fast);
  }

  .main-nav a:hover,
  .main-nav a[aria-current="page"] {
    color: var(--sccx-primary);
  }

  @media (max-width: 1023px) {
    .mobile-toggle {
      display: flex;
      z-index: var(--sccx-z-fixed);
    }

    /* Fixed mobile nav positioning and animation */
    .main-nav {
      position: fixed;
      inset: 0;
      block-size: 100%;
      overflow-y: auto;
      background: var(--sccx-surface);
      padding: var(--sccx-space-m);
      padding-block-start: 80px; /* Approximate header height */
      transform: translateY(-100%);
      opacity: 0;
      visibility: hidden;
      transition: transform var(--sccx-transition-base), opacity var(--sccx-transition-base), visibility 0s var(--sccx-transition-base);
      z-index: var(--sccx-z-dropdown);
    }

    .main-nav.active {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      transition: transform var(--sccx-transition-base), opacity var(--sccx-transition-base), visibility 0s 0s;
    }

    .main-nav ul {
      flex-direction: column;
      gap: var(--sccx-space-s);
    }
  }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sccx-space-xs);
    padding: var(--sccx-space-s) var(--sccx-space-l);
    font-weight: var(--sccx-weight-semibold);
    text-decoration: none;
    border-radius: var(--sccx-radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--sccx-transition-fast);
  }

  .btn-primary {
    background: var(--sccx-primary);
    color: white;
  }

  .btn-primary:hover {
    background: var(--sccx-primary-hover);
  }

  .btn-secondary {
    background: transparent;
    color: var(--sccx-primary);
    border-color: var(--sccx-primary);
  }

  .btn-secondary:hover {
    background: var(--sccx-primary);
    color: white;
  }

  /* Cards */
  .feature-card,
  .update-card {
    background: var(--sccx-surface);
    border: 1px solid var(--sccx-border);
    border-radius: var(--sccx-radius-lg);
    padding: var(--sccx-space-l);
    transition: transform var(--sccx-transition-fast), box-shadow var(--sccx-transition-fast);
  }

  .feature-card:hover,
  .update-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sccx-shadow-lg);
  }

  .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 80px;
    block-size: 80px;
    background: oklch(var(--sccx-primary-l) var(--sccx-primary-c) var(--sccx-primary-h) / 0.1);
    border-radius: var(--sccx-radius-xl);
    margin-block-end: var(--sccx-space-m);
  }

  .feature-icon svg {
    fill: var(--sccx-primary);
  }

  .feature-card h3,
  .update-card h3 {
    margin-block-end: var(--sccx-space-s);
    color: var(--sccx-text);
  }

  .feature-card p,
  .update-card p {
    color: var(--sccx-text-muted);
    line-height: var(--sccx-leading-relaxed);
  }

  .update-card time {
    display: block;
    margin-block-start: var(--sccx-space-s);
    font-size: var(--sccx-text-sm);
    color: var(--sccx-text-muted);
  }

  /* Forms */
  .contact-form {
    max-inline-size: 600px;
    margin-inline: auto;
  }

  .form-group {
    margin-block-end: var(--sccx-space-m);
  }

  .form-group label {
    display: block;
    margin-block-end: var(--sccx-space-xs);
    font-weight: var(--sccx-weight-medium);
    color: var(--sccx-text);
  }

  .form-group input,
  .form-group textarea {
    inline-size: 100%;
    padding: var(--sccx-space-s);
    background: var(--sccx-surface);
    border: 1px solid var(--sccx-border);
    border-radius: var(--sccx-radius-md);
    color: var(--sccx-text);
    transition: border-color var(--sccx-transition-fast);
  }

  .form-group input:focus,
  .form-group textarea:focus {
    border-color: var(--sccx-primary);
    outline: none;
  }

  .form-group .error-message {
    display: none;
    margin-block-start: var(--sccx-space-xs);
    font-size: var(--sccx-text-sm);
    color: oklch(0.55 0.22 25);
  }

  .form-group.error .error-message {
    display: block;
  }

  .form-group.error input,
  .form-group.error textarea {
    border-color: oklch(0.55 0.22 25);
  }

  .honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
  }

  /* Gallery */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sccx-space-m);
  }

  .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--sccx-radius-lg);
    aspect-ratio: 4 / 3;
  }

  .gallery-item img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--sccx-transition-base);
  }

  .gallery-item:hover img {
    transform: scale(1.05);
  }

  /* Footer */
  .site-footer {
    background: var(--sccx-surface);
    border-block-start: 1px solid var(--sccx-border);
    padding-block: var(--sccx-space-2xl) var(--sccx-space-l);
    margin-block-start: var(--sccx-space-3xl);
  }

  .footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--sccx-space-xl);
    margin-block-end: var(--sccx-space-xl);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-logo {
    display: flex;
    align-items: center;
    gap: var(--sccx-space-xs);
    font-weight: var(--sccx-weight-bold);
    font-size: var(--sccx-text-lg);
    color: var(--sccx-text);
    text-decoration: none;
    margin-block-end: var(--sccx-space-s);
  }

  .footer-logo svg {
    fill: var(--sccx-primary);
  }

  .footer-brand p {
    color: var(--sccx-text-muted);
  }

  .footer-nav-group h3 {
    font-size: var(--sccx-text-lg);
    margin-block-end: var(--sccx-space-s);
  }

  .footer-nav-group ul {
    list-style: none;
  }

  .footer-nav-group li {
    margin-block-end: var(--sccx-space-xs);
  }

  .footer-nav-group a {
    color: var(--sccx-text-muted);
    text-decoration: none;
    transition: color var(--sccx-transition-fast);
  }

  .footer-nav-group a:hover {
    color: var(--sccx-primary);
  }

  .footer-bottom {
    padding-block-start: var(--sccx-space-l);
    border-block-start: 1px solid var(--sccx-border);
    text-align: center;
    color: var(--sccx-text-muted);
    font-size: var(--sccx-text-sm);
  }

  .footer-bottom p {
    margin-block-end: var(--sccx-space-xs);
  }
}