المحددات الحديثة + CSS Nesting

/* Modern Selectors Challenge */

/* 1. Use :has() to style cards with images */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* 2. Use :is() to group selectors */
:is(.nav, .footer) a:is(:hover, :focus, :active) {
  color: var(--accent);
}

/* 3. Use :where() for resets */
:where(h1, h2, h3) {
  margin: 0;
}

/* 4. Use CSS Nesting */
.card {
  background: white;
  border-radius: 8px;

  & h2 {
    color: navy;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* 5. Use @layer for specificity control */
@layer reset, base, components;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer components {
  .card h2 { margin-bottom: 1rem; }
}