/* ═══════════════════════════════════════════════════════════════════════════
   قالب آریا – section-heads.css
   Home-page section headers in five designs (inc/section-heads.php).
   Settings arrive as --sh-* variables; empty colour settings fall back to the
   theme's own colours, so light and dark mode keep working.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --sh-fs: 21px; --sh-pad: 15px; --sh-radius: 20px; --sh-gap: 30px; --sh-shadow: 0 6px 22px rgba(15, 23, 42, .07); }

.cat-header.arya-sh {
    --sh-accent: var(--sh-accent-user, var(--accent));
    --sh-bg: var(--sh-bg-user, var(--bg-card));
    --sh-title: var(--sh-title-user, var(--text-main));
    --sh-soft: color-mix(in srgb, var(--sh-accent) 12%, transparent);
    --sh-line: color-mix(in srgb, var(--sh-accent) 24%, transparent);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 var(--sh-gap);
    padding: var(--sh-pad) 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--sh-radius);
    background: var(--sh-bg);
    box-shadow: var(--sh-shadow);
    text-align: start;
    transition: box-shadow .25s, border-color .25s;
}
.arya-sh__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.arya-sh__text { display: flex; flex-direction: column; min-width: 0; }
.cat-header.arya-sh h2 {
    margin: 0;
    overflow: hidden;
    color: var(--sh-title);
    font-size: var(--sh-fs);
    font-weight: 800;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arya-sh__count { color: var(--text-muted); font-size: .78rem; font-weight: 500; line-height: 1.5; }
.cat-header.arya-sh .arya-sh__icon {
    width: calc(var(--sh-fs) * 2.1);
    height: calc(var(--sh-fs) * 2.1);
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--sh-line);
    border-radius: calc(var(--sh-radius) * .55 + 4px);
    background: var(--sh-soft);
    color: var(--sh-accent);
    font-size: calc(var(--sh-fs) * .9);
}
.cat-header.arya-sh .arya-sh__more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 18px;
    border: 1px solid var(--sh-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--sh-accent);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.cat-header.arya-sh .arya-sh__more i { font-size: .72rem; transition: transform .2s; }
.cat-header.arya-sh .arya-sh__more:hover { background: var(--sh-accent); color: #fff; transform: translateY(-1px); }
.cat-header.arya-sh .arya-sh__more:hover i { transform: translateX(-3px); }

/* 1 · classic: the card with a coloured side bar */
.cat-header.arya-sh--classic { border-inline-start: 5px solid var(--sh-accent); }
body.dark-mode .cat-header.arya-sh--classic { border-inline-start-color: var(--sh-accent) !important; }

/* 2 · pill: fully rounded, round filled icon, soft pill button */
.cat-header.arya-sh--pill { padding: max(6px, calc(var(--sh-pad) * .55)) 8px; padding-inline-end: 8px; border-radius: 999px; }
.cat-header.arya-sh--pill .arya-sh__icon { border: 0; border-radius: 50%; background: var(--sh-accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--sh-accent) 35%, transparent); }
.cat-header.arya-sh--pill .arya-sh__more { border-color: transparent; background: var(--sh-soft); }
.cat-header.arya-sh--pill .arya-sh__more:hover { background: var(--sh-accent); }

/* 3 · line: no box – title, a hairline that fills the space, a text link */
.cat-header.arya-sh--line { padding-inline: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.dark-mode .cat-header.arya-sh--line { background-color: transparent !important; }
.arya-sh__line { flex: 1; min-width: 24px; height: 1px; background: linear-gradient(to left, var(--sh-line), var(--border-color) 60%, transparent); }
.cat-header.arya-sh--line .arya-sh__icon { border-radius: 50%; }
.cat-header.arya-sh--line .arya-sh__more { padding-inline: 4px; border: 0; }
.cat-header.arya-sh--line .arya-sh__more:hover { background: transparent; color: var(--sh-accent); transform: none; }

/* 4 · tab: the title sits in a coloured tab on a line */
.cat-header.arya-sh--tab { padding: 0; border: 0; border-bottom: 2px solid var(--sh-accent); border-radius: 0; background: transparent; box-shadow: none; }
body.dark-mode .cat-header.arya-sh--tab { background-color: transparent !important; border-bottom-color: var(--sh-accent) !important; }
.cat-header.arya-sh--tab .arya-sh__title {
    padding: var(--sh-pad) 20px;
    border-radius: var(--sh-radius) var(--sh-radius) 0 0;
    background: var(--sh-accent);
    box-shadow: var(--sh-shadow);
}
.cat-header.arya-sh--tab h2, body.dark-mode .cat-header.arya-sh--tab h2 { color: #fff !important; }
.cat-header.arya-sh--tab .arya-sh__count { color: rgba(255, 255, 255, .8); }
.cat-header.arya-sh--tab .arya-sh__icon { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .18); color: #fff; }
.cat-header.arya-sh--tab .arya-sh__more { margin-bottom: 8px; padding-block: 6px; border-color: transparent; background: var(--sh-soft); }
.cat-header.arya-sh--tab .arya-sh__more:hover { background: var(--sh-accent); }

/* 5 · glow: a soft gradient card, a big filled icon, a solid button */
.cat-header.arya-sh--glow {
    padding: calc(var(--sh-pad) + 4px) 22px;
    border-color: var(--sh-line);
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sh-accent) 16%, transparent), transparent 60%),
        var(--sh-bg);
}
body.dark-mode .cat-header.arya-sh--glow { border-color: var(--sh-line) !important; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--sh-accent) 22%, transparent), transparent 60%), var(--bg-card) !important; }
.cat-header.arya-sh--glow .arya-sh__icon {
    width: calc(var(--sh-fs) * 2.5);
    height: calc(var(--sh-fs) * 2.5);
    border: 0;
    background: linear-gradient(135deg, var(--sh-accent), color-mix(in srgb, var(--sh-accent) 60%, #000));
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--sh-accent) 35%, transparent);
}
.cat-header.arya-sh--glow .arya-sh__more { border-color: transparent; background: var(--sh-accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--sh-accent) 30%, transparent); }
.cat-header.arya-sh--glow .arya-sh__more:hover { box-shadow: 0 10px 22px color-mix(in srgb, var(--sh-accent) 40%, transparent); }

/* phones: one tidy row (title start, button end) instead of a tall centred column */
@media (max-width: 900px) {
    .cat-header.arya-sh { flex-direction: row; text-align: start; gap: 10px; padding-inline: 16px; }
    .cat-header.arya-sh--line, .cat-header.arya-sh--tab { padding-inline: 0; }
    .cat-header.arya-sh--pill { padding-inline: 6px; }
}
@media (max-width: 600px) {
    .cat-header.arya-sh { --sh-fs-m: clamp(15px, calc(var(--sh-fs) * .82), 20px); }
    .cat-header.arya-sh h2 { font-size: var(--sh-fs-m); }
    .cat-header.arya-sh .arya-sh__icon { width: calc(var(--sh-fs-m) * 2.1); height: calc(var(--sh-fs-m) * 2.1); font-size: calc(var(--sh-fs-m) * .85); }
    .cat-header.arya-sh--glow .arya-sh__icon { width: calc(var(--sh-fs-m) * 2.3); height: calc(var(--sh-fs-m) * 2.3); }
    .cat-header.arya-sh .arya-sh__more { padding: 6px 12px; font-size: .78rem; }
    .cat-header.arya-sh--tab .arya-sh__title { padding: calc(var(--sh-pad) * .75) 14px; }
    .arya-sh__line { display: none; }
}
@media (max-width: 360px) {
    .cat-header.arya-sh .arya-sh__more span { display: none; }   /* very small phones: just the arrow */
    .cat-header.arya-sh .arya-sh__more { padding: 0; width: 36px; height: 36px; justify-content: center; }
}