/* Nisab (نصاب تعلیم) public pages.

   The three nisab templates were written against the prototype's class
   vocabulary (.card-head, .card-body, .list-item, .rtl-text, .hero,
   .section-title) on the assumption that reusing those names meant the
   existing stylesheet would apply. It does not — this theme defines only
   .card; the other five had zero matching rules, which is why the book
   icon rendered at 820x820 instead of ~28px: every svg-sizing rule in
   this theme is scoped to a specific component (.home-quick-access__tile
   svg, .site-tabbar-auth__tab svg, .field__toggle-password svg …) and
   there is no global svg rule to fall back on.

   Rather than rename every class across three templates, the prototype
   vocabulary is defined here, scoped under .nisab-page so generic names
   like .list-item cannot leak into the rest of the site. Sizing follows
   the same component-scoped pattern the theme already uses, and only
   existing design tokens are used — no new palette, no magic numbers. */

.nisab-page .hero {
    margin-bottom: var(--space-6);
}

.nisab-page .section-title {
    font-size: var(--text-4xl);
    color: var(--primary);
    margin-bottom: var(--space-2);
}

.nisab-page .rtl-text {
    text-align: start;
}

/* Icon sizing — the actual bug. Matches .home-quick-access__tile svg,
   which is the convention for a component-scoped icon in this theme. */
.nisab-page .card-head svg {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    color: var(--primary);
}

.nisab-page .card {
    display: block;
    margin-bottom: var(--space-5);
    color: var(--text);
}

.nisab-page a.card:hover {
    box-shadow: var(--shadow-lg);
    color: var(--primary);
}

.nisab-page .card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
}

.nisab-page .card-body {
    margin-top: var(--space-4);
}

.nisab-page .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--outline-variant);
    color: var(--text);
}

.nisab-page .list-item:last-child {
    border-bottom: 0;
}

.nisab-page a.list-item:hover {
    color: var(--primary);
}

@media (max-width: 640px) {
    .nisab-page .section-title {
        font-size: var(--text-2xl);
    }
}