/* ==========================================================================
   blog/blog.css
   --------------------------------------------------------------------------
   Styles for the Ilm by Nouman learning-guides blog (/blog/).
   Built entirely on top of home/css/theme.css — the variables, fonts and
   colour palette below are all inherited from that file so the blog feels
   native to the rest of the site. Nothing here restyles the main website.

   Contents
     1. Breadcrumb
     2. Article header
     3. Table of contents
     4. Article body typography
     5. Callouts
     6. Learning cards (contextual links into the curriculum)
     7. FAQ
     8. Related content + related articles
     9. CTA block
    10. Blog index (cards + category filter)
    11. Author page
    12. Utilities, focus states, reduced motion, print
   ========================================================================== */

/* ------------------------------------------------------- 1. Breadcrumb */
.breadcrumb {
    padding: var(--space-md) 0 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumb li + li::before {
    content: '\203A';
    color: var(--text-dim);
    opacity: 0.7;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

/* Breadcrumb and footer links are inline text, so WCAG 2.5.8's 24px minimum
   applies rather than the 44px target recommended for standalone controls. */
.breadcrumb a,
.breadcrumb [aria-current="page"] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.breadcrumb a:focus-visible,
.breadcrumb [aria-current="page"]:focus-visible {
    outline-offset: 1px;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.breadcrumb [aria-current="page"] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ---------------------------------------------------- 2. Article header */
.article-header {
    padding: var(--space-lg) 0 var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: var(--space-lg);
}

.article-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 5.2vw, 3.05rem);
    line-height: 1.18;
    color: #fff;
    margin: 0.6rem 0 0.9rem;
    letter-spacing: -0.01em;
}

.article-header .lede {
    font-size: clamp(1rem, 2.4vw, 1.16rem);
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 74ch;
    margin: 0 0 1.3rem;
}

.article-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(245, 185, 66, 0.11);
    border: 1px solid rgba(245, 185, 66, 0.3);
    border-radius: var(--radius-full);
    padding: 0.34rem 0.9rem;
}

.article-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    font-size: 0.88rem;
    color: var(--text-dim);
}

.article-byline a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(245, 185, 66, 0.45);
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.article-byline a:hover,
.article-byline a:focus-visible {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

.byline-sep {
    opacity: 0.5;
}

/* Direct answer / featured snippet block */
.direct-answer {
    background: linear-gradient(145deg, rgba(245, 185, 66, 0.12), rgba(245, 185, 66, 0.03));
    border: 1px solid rgba(245, 185, 66, 0.32);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-md) calc(var(--space-md) - 2px);
    margin: 0 0 var(--space-lg);
}

.direct-answer p {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.78;
    font-size: 1rem;
}

.direct-answer .direct-answer-label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

/* --------------------------------------------------- 3. Table of contents */
.article-toc {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-md) calc(var(--space-md) - 4px);
    margin: 0 0 var(--space-lg);
}

.article-toc > summary {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

.article-toc > summary::-webkit-details-marker {
    display: none;
}

.article-toc > summary::before {
    content: '\25B8';
    color: var(--gold);
    transition: transform var(--transition-normal);
    display: inline-block;
}

.article-toc[open] > summary::before {
    transform: rotate(90deg);
}

.article-toc > summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.article-toc ol {
    list-style: none;
    counter-reset: toc;
    margin: 0.3rem 0 0;
    padding: 0;
    columns: 2;
    column-gap: var(--space-lg);
}

.article-toc li {
    counter-increment: toc;
    break-inside: avoid;
    margin-bottom: 0.4rem;
}

.article-toc li a {
    display: flex;
    gap: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.2rem 0.3rem;
    border-radius: 5px;
}

.article-toc li a::before {
    content: counter(toc) ".";
    color: var(--gold);
    font-weight: 700;
    flex-shrink: 0;
}

.article-toc li a:hover,
.article-toc li a:focus-visible {
    color: var(--gold);
    background: rgba(245, 185, 66, 0.09);
}

/* ------------------------------------------------ 4. Article body typography */
.article-body {
    max-width: 74ch;
    margin: 0 auto;
    color: var(--text-light);
    font-size: clamp(1rem, 2.2vw, 1.075rem);
    line-height: 1.82;
}

.article-body > * {
    margin-bottom: 1.15em;
}

.article-body h2 {
    font-family: var(--font-display);
    font-size: clamp(1.42rem, 3.4vw, 1.92rem);
    line-height: 1.28;
    color: #fff;
    margin: 2.1em 0 0.6em;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(245, 185, 66, 0.22);
    scroll-margin-top: 1.5rem;
}

.article-body h2:first-child {
    margin-top: 0;
}

.article-body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.14rem, 2.6vw, 1.32rem);
    line-height: 1.34;
    color: var(--gold-soft);
    margin: 1.7em 0 0.5em;
    scroll-margin-top: 1.5rem;
}

.article-body h4 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-primary);
    margin: 1.4em 0 0.4em;
}

.article-body p {
    margin-bottom: 1.15em;
}

.article-body a {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: rgba(245, 185, 66, 0.4);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transition-fast);
}

.article-body a:hover,
.article-body a:focus-visible {
    text-decoration-color: var(--gold);
}

.article-body strong {
    color: #fff;
    font-weight: 700;
}

.article-body ul,
.article-body ol {
    margin: 0 0 1.15em;
    padding-left: 1.35em;
}

.article-body li {
    margin-bottom: 0.55em;
    padding-left: 0.2em;
}

.article-body li::marker {
    color: var(--gold);
    font-weight: 700;
}

.article-body blockquote {
    margin: 1.5em 0;
    padding: 0.9em 1.2em;
    border-left: 3px solid var(--accent-gold);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-muted);
    font-size: 0.97em;
}

.article-body blockquote p:last-child {
    margin-bottom: 0;
}

.article-body hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    margin: 2.4em 0;
}

/* Definition-style term rows used in the "what you will learn" sections */
.term-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4em;
    display: grid;
    gap: 0.6rem;
}

.term-list li {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin: 0;
    line-height: 1.65;
}

.term-list li strong {
    display: block;
    color: var(--gold-soft);
    font-family: var(--font-display);
    font-size: 1.02rem;
    margin-bottom: 0.15rem;
}

/* Arabic examples. direction:rtl + isolate keeps the run in correct logical
   order; a slightly smaller size and wider word-spacing let the 28-letter
   alphabet pack into two tidy lines instead of three ragged ones. */
.term-list li span.arabic {
    display: block;
    font-family: var(--font-arabic);
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-primary);
    direction: rtl;
    unicode-bidi: isolate;
    word-spacing: 0.35em;
    text-align: right;
    margin-bottom: 0.35rem;
}

/* Tables.
   Three-column comparison tables cannot fit a 320–430px phone, so below
   640px each row becomes a self-contained card and the column header for that
   cell is shown as an inline label from its data-label attribute. The table
   keeps its semantic markup, so assistive technology still reads it as a
   table. Above 640px it is an ordinary table. */
.article-body .table-scroll {
    overflow-x: visible;
    margin-bottom: 1.5em;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}

/* Caption: `display: table-caption` keeps it anchored above the table on
   desktop, and `display: block` stops it collapsing to the content width once
   the table switches to block layout on mobile. */
.article-body caption {
    display: table-caption;
    caption-side: top;
    text-align: left;
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
    padding-bottom: 0.7rem;
}

.article-body th,
.article-body td {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: top;
    line-height: 1.6;
}

.article-body thead th {
    color: var(--gold);
    font-family: var(--font-display);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
}

.article-body tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.022);
}

.article-body td .arabic {
    font-family: var(--font-arabic);
    font-size: 1.2rem;
    direction: rtl;
    unicode-bidi: isolate;
}

@media (max-width: 640px) {
    /* Stacked card layout for the comparison tables. */
    .article-body table,
    .article-body thead,
    .article-body tbody,
    .article-body tr,
    .article-body th,
    .article-body td {
        display: block;
        width: auto;
    }

    /* The table is no longer a table, so the caption needs block layout. */
    .article-body caption {
        display: block;
    }

    .article-body thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .article-body tbody tr {
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
        padding: 0.35rem 0.9rem 0.6rem;
        margin-bottom: 0.9rem;
    }

    .article-body tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.035);
    }

    .article-body tbody th,
    .article-body tbody td {
        border-bottom: 0;
        padding: 0.5rem 0;
    }

    /* The row header doubles as the card title. */
    .article-body tbody th {
        color: var(--gold);
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 700;
        padding-bottom: 0.35rem;
    }

    /* Column header repeated above each value. */
    .article-body tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-family: var(--font-display);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-dim);
        margin-bottom: 0.15rem;
    }
}

/* --------------------------------------------------------- 5. Callouts */
.callout {
    border-radius: var(--radius-md);
    padding: 1.05rem 1.2rem;
    margin: 1.6em 0;
    border: 1px solid;
    font-size: 0.97em;
    line-height: 1.72;
}

.callout > :last-child {
    margin-bottom: 0;
}

.callout-label {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.callout-tip {
    background: rgba(95, 224, 176, 0.08);
    border-color: rgba(95, 224, 176, 0.32);
}

.callout-tip .callout-label {
    color: var(--mint);
}

.callout-note {
    background: rgba(111, 201, 255, 0.08);
    border-color: rgba(111, 201, 255, 0.3);
}

.callout-note .callout-label {
    color: var(--sky-blue);
}

.callout-caution {
    background: rgba(255, 131, 131, 0.08);
    border-color: rgba(255, 131, 131, 0.3);
}

.callout-caution .callout-label {
    color: var(--coral);
}

/* ------------------------------------------- 6. Contextual learning cards */
.learn-more {
    margin: 2em 0 0;
    padding: 0;
    border: 0;
}

.learn-more > legend {
    font-family: var(--font-display);
    font-size: 1.16rem;
    color: var(--text-primary);
    padding: 0;
    margin-bottom: 0.85rem;
}

.learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0.8rem;
}

.learn-card {
    display: block;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.05rem 1.15rem;
    text-decoration: none;
    color: var(--text-light);
    transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.learn-card:hover,
.learn-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(245, 185, 66, 0.4);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

.learn-card:hover .learn-card-title,
.learn-card:focus-visible .learn-card-title {
    color: var(--gold);
}

.learn-card-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}

.learn-card-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    transition: color var(--transition-fast);
}

.learn-card-desc {
    display: block;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ------------------------------------------------------------- 7. FAQ */
.faq {
    margin: 0 0 var(--space-lg);
}

.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.faq-item {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-item > summary {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.15rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    line-height: 1.5;
}

.faq-item > summary::-webkit-details-marker {
    display: none;
}

.faq-item > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--gold);
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.faq-item[open] > summary::after {
    transform: rotate(45deg);
}

.faq-item > summary:hover {
    color: var(--gold);
}

.faq-item > summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.faq-answer {
    padding: 0 1.15rem 1.1rem;
    color: var(--text-muted);
    line-height: 1.78;
    font-size: 0.97rem;
}

.faq-answer > :last-child {
    margin-bottom: 0;
}

.faq-answer a {
    color: var(--gold);
}

/* ------------------------------- 8. Related content and related articles */
.related-block {
    max-width: 74ch;
    margin: 0 auto var(--space-lg);
}

.related-block > h2 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    color: #fff;
    margin: 0 0 0.9rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(245, 185, 66, 0.22);
}

.related-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0.7rem;
}

.related-list a {
    display: block;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.05rem;
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.93rem;
    line-height: 1.6;
    min-height: 44px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.related-list a:hover,
.related-list a:focus-visible {
    background: rgba(245, 185, 66, 0.09);
    border-color: rgba(245, 185, 66, 0.45);
    border-left-color: var(--gold);
    color: var(--text-primary);
}

.related-list .related-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

.related-list a:hover .related-title,
.related-list a:focus-visible .related-title {
    color: var(--gold);
}

.related-list .related-desc {
    display: block;
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* A related-list card whose title is the only content would otherwise render
   as a single short line; give it a 24px minimum hit height. */
.related-list a {
    min-height: 24px;
}

/* ------------------------------------------------------------- 9. CTA */
.article-cta {
    max-width: 74ch;
    margin: 0 auto var(--space-lg);
    background: linear-gradient(145deg, rgba(245, 185, 66, 0.14), rgba(232, 138, 47, 0.05));
    border: 1px solid rgba(245, 185, 66, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
}

.article-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.32rem, 3.2vw, 1.72rem);
    color: #fff;
    margin: 0 0 0.5rem;
    border: 0;
    padding: 0;
}

.article-cta p {
    color: var(--text-muted);
    line-height: 1.72;
    max-width: 58ch;
    margin: 0 auto 1.4rem;
}

.article-cta .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}

.article-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.article-cta .btn:hover,
.article-cta .btn:focus-visible {
    transform: translateY(-2px);
}

.article-cta .btn-primary {
    background: linear-gradient(135deg, #f5b942, #e88a2f);
    color: #2c1a4d;
}

.article-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-primary);
}

.article-cta .btn-secondary:hover,
.article-cta .btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.14);
}

.article-cta .cta-note {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.84rem;
    color: var(--text-dim);
}

/* -------------------------------------------------- 10. Blog index page */
.blog-intro {
    max-width: 74ch;
    margin: 0 auto var(--space-lg);
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1.02rem;
}

.blog-search-box {
    position: relative;
    max-width: 480px;
    margin: 0 auto 1.5rem;
}

.blog-search-box i {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    pointer-events: none;
    font-size: 0.95rem;
}

.blog-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    padding: 0.75rem 1.2rem 0.75rem 2.8rem;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.blog-search-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(245, 185, 66, 0.07);
    box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.2);
}

.blog-publisher-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.btn-publisher {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(245, 185, 66, 0.12);
    border: 1px dashed rgba(245, 185, 66, 0.45);
    color: var(--gold);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.btn-publisher:hover {
    background: var(--gold);
    color: #2c1a4d;
    border-style: solid;
}

.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 var(--space-lg);
    padding: 0;
    border: 0;
    justify-content: center;
}

.blog-filter legend {
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.6rem;
    padding: 0;
}

.filter-btn {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
    padding: 0.5rem 1.05rem;
    min-height: 44px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-btn:hover,
.filter-btn:focus-visible {
    color: var(--gold);
    border-color: rgba(245, 185, 66, 0.5);
    background: rgba(245, 185, 66, 0.09);
}

.filter-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, #f5b942, #e88a2f);
    border-color: transparent;
    color: #2c1a4d;
}

.filter-btn[aria-pressed="true"] .count {
    opacity: 0.85;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
    gap: var(--space-md);
    margin: 0 0 var(--space-lg);
}

.article-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.45rem;
    text-decoration: none;
    color: var(--text-light);
    transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-warm));
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.article-card:hover,
.article-card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(245, 185, 66, 0.35);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

.article-card:hover::before,
.article-card:focus-visible::before {
    opacity: 1;
}

.article-card-tag {
    align-self: flex-start;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(245, 185, 66, 0.11);
    border: 1px solid rgba(245, 185, 66, 0.26);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.75rem;
}

.article-card-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    transition: color var(--transition-fast);
}

.article-card:hover .article-card-title,
.article-card:focus-visible .article-card-title {
    color: var(--gold);
}

.article-card-excerpt {
    display: block;
    font-size: 0.93rem;
    line-height: 1.68;
    color: var(--text-muted);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.article-card-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.article-card[hidden] {
    display: none;
}

.no-results {
    text-align: center;
    color: var(--text-dim);
    padding: var(--space-lg) 0;
}

/* ----------------------------------------------------- 11. Author page */
.author-card {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.author-avatar {
    flex-shrink: 0;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    border: 2px solid rgba(245, 185, 66, 0.5);
    object-fit: cover;
    background: rgba(245, 185, 66, 0.1);
}

.author-meta h2 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: #fff;
    margin: 0 0 0.2rem;
    border: 0;
    padding: 0;
}

.author-role {
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
}

.author-meta p {
    color: var(--text-muted);
    line-height: 1.72;
    font-size: 0.95rem;
    margin-bottom: 0.7rem;
}

.author-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.author-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    padding: 0.6rem 1rem;
    min-height: 44px;
    text-decoration: none;
}

.author-links a:hover,
.author-links a:focus-visible {
    color: var(--gold);
    border-color: rgba(245, 185, 66, 0.5);
}

/* Footer link targets. theme.css sizes .footer-section a at 22px tall, which is
   just under the 24px WCAG 2.5.8 minimum for inline links. */
.footer .footer-section a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* Links inside running prose are inline text. WCAG 2.5.8 asks for a 24px hit
   area; padding extends it without changing the visual line rhythm. */
.article-body p a,
.article-body li a,
.article-body td a,
.faq-answer a,
.direct-answer a,
.callout a,
.term-list a,
.article-body a,
.article-cta p a,
.related-block p a,
.blog-intro a {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ==========================================================================
   12. VISUAL COMPONENTS
   --------------------------------------------------------------------------
   Everything here is built from the site's existing palette, fonts and the
   verified audio files in /audio — no stock imagery, no invented diagrams.
   Arabic is always real Unicode text set in Amiri so the shapes are the font's
   own, never hand-drawn.
   ========================================================================== */

/* ---- 12a. Article hero --------------------------------------------------- */
.article-visual {
    position: relative;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(120% 140% at 12% 0%, rgba(245, 185, 66, 0.16), transparent 58%),
        radial-gradient(100% 120% at 92% 100%, rgba(111, 201, 255, 0.13), transparent 55%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    padding: var(--space-lg) var(--space-md);
    margin: 0 auto var(--space-lg);
    overflow: hidden;
}

/* Faint oversized Arabic glyph as a watermark, kept behind the content. */
.article-visual::before {
    content: attr(data-glyph);
    position: absolute;
    top: 50%;
    inset-inline-end: -4%;
    transform: translateY(-50%);
    font-family: var(--font-arabic);
    font-size: clamp(7rem, 26vw, 15rem);
    line-height: 1;
    color: rgba(245, 185, 66, 0.09);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.article-visual > * {
    position: relative;
    z-index: 1;
}

.article-visual-title {
    font-family: var(--font-display);
    font-size: 1.16rem;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
    text-align: center;
}

/* The site header is position:sticky and overlays content when an element
   screenshot scrolls it into view, so component captures can show a slice of
   header over the top of the component. Scroll-reveal the wrapper instead:
   it starts visible and only animates in when actually seen in the viewport. */
.article-visual,
.sound-grid,
.harakat-row,
.ladder,
.rail,
.figure-strip {
    opacity: 1;
    transform: none;
}

.article-visual-sub {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-muted);
    text-align: center;
    max-width: 46ch;
    margin: 0 auto 1.2rem;
}

/* ---- 12b. Harakat anatomy ----------------------------------------------- */
/* Shows one base letter with each short vowel in turn. The mark is rendered
   in real Unicode (U+064E / U+0650 / U+064F) so its position and shape come
   from the font rather than from CSS offsets. */
.harakat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
    gap: 0.7rem;
    margin: 0 auto 1.1rem;
}

.harakat-cell {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 0.9rem 0.6rem 0.75rem;
    text-align: center;
}

.harakat-cell .glyph {
    display: block;
    font-family: var(--font-arabic);
    font-size: 3rem;
    line-height: 1.35;
    color: var(--gold);
    direction: rtl;
    unicode-bidi: isolate;
    /* Room for the marks above and below without clipping */
    padding: 0.25em 0.1em 0.35em;
}

.harakat-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.2rem;
}

.harakat-pos {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.harakat-sound {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

/* ---- 12c. Letter sound cards (audio) ------------------------------------
   These deliberately REUSE the site's own `.letter-card` from
   lessons/lessons.css rather than re-styling a parallel card. That is why the
   blog loads lessons.css ahead of theme.css: theme.css wins on :root/body and
   the letter-card design (organic blob shape, 6-colour petal cycle, staggered
   popIn) is inherited exactly as the lesson pages render it. Only the extra
   caption and speaker affordance are added here. */
.letters-grid {
    margin: 0 0 1rem;
}

.letter-card.sound-card {
    flex-direction: column;
    gap: 0.15rem;
}

.sound-card .letter {
    line-height: 1.15;
}

.sound-card .sound-name {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    opacity: 0.72;
}

.sound-card .spk {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    font-size: 0.62rem;
    opacity: 0.5;
}

.sound-card .spk::before { content: '\266B'; }
.sound-card .spk { font-size: 0; }

.sound-card.loading .spk {
    opacity: 1;
    animation: soundPulse 0.9s ease-in-out infinite;
}

@keyframes soundPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Pathway picker: taps a "starting point" card and reveals the matching entry
   in the list below. Built on the site's .letter-card, with a dashed outline to
   read as "pick one". The chosen card is marked with aria-current so the state
   is announced, not just coloured. */
.pathway-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 108px), 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.letter-card.pathway {
    min-height: 108px;
    padding: 1rem 0.5rem 0.9rem;
    font-size: 2.2rem;
    border-style: dashed;
}

.letter-card.pathway .sound-name {
    font-size: 0.66rem;
    line-height: 1.3;
    padding: 0 0.2rem;
}

.letter-card.pathway[aria-current="true"],
.letter-card.pathway[aria-pressed="true"] {
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.55), 0 14px 30px rgba(0, 0, 0, 0.3);
}

.term-list li[hidden] {
    display: none;
}

.term-list li.is-highlighted {
    border-color: rgba(245, 185, 66, 0.55);
    background: rgba(245, 185, 66, 0.1);
}

/* ---- 12d0. Hub: guide-path graphic ------------------------------------ */
/* A compact map of the three guides, drawn with CSS only: a spine with three
   stops, each carrying the guide's topic. Purely decorative — every word is
   real text, and the whole block is hidden from assistive tech because the
   article cards immediately below carry the same information. */
.path-map {
    position: relative;
    display: grid;
    gap: 0.9rem;
    margin: 0 0 var(--space-lg);
    padding: var(--space-md) var(--space-md) var(--space-md);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(90% 120% at 50% 0%, rgba(245, 185, 66, 0.13), transparent 60%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.path-map::before {
    content: '';
    position: absolute;
    top: 2.4rem;
    bottom: 2.4rem;
    inset-inline-start: 2.15rem;
    width: 2px;
    background: linear-gradient(180deg, var(--gold), rgba(245, 185, 66, 0.12));
}

.path-map-title {
    position: relative;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 0.2rem;
}

.path-stop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.95rem;
}

.path-stop .stop-dot {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: #2c1a4d;
    background: linear-gradient(135deg, var(--gold), var(--accent-warm));
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(245, 185, 66, 0.14);
}

.path-stop .stop-glyph {
    font-family: var(--font-arabic);
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--gold);
    direction: rtl;
    unicode-bidi: isolate;
    flex-shrink: 0;
    width: 2.2rem;
    text-align: center;
}

.path-stop .stop-text strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.35;
}

.path-stop .stop-text span {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
}

@media (max-width: 420px) {
    .path-map {
        padding: var(--space-sm);
    }

    .path-map::before {
        inset-inline-start: 1.65rem;
    }

    .path-stop {
        gap: 0.7rem;
    }

    .path-stop .stop-dot {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* ---- 12d1. Letter-form (positions) diagram ---------------------------- */
/* The four shapes a letter takes: isolated, word-initial, medial and final.
   Each form is written as real Unicode (ب / بـ / ـبـ / ـب) and shaped by the
   font, so the joins shown are genuine letterforms, not an illustration of
   them. */
.forms-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 118px), 1fr));
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.form-cell {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.4rem 0.6rem;
}

.form-cell .form-glyph {
    display: block;
    font-family: var(--font-arabic);
    font-size: 2.9rem;
    line-height: 1.45;
    color: var(--gold);
    direction: rtl;
    unicode-bidi: isolate;
}

.form-cell .form-name {
    display: block;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.form-cell .form-note {
    display: block;
    font-size: 0.73rem;
    color: var(--text-dim);
    line-height: 1.45;
}

/* ---- 12d2. Join / break demonstration --------------------------------- */
/* Two words built from identical letters, differing only in whether a
   non-joining letter sits between them. The visual point — the join chain
   either continues or stops — is the whole lesson. */
.join-demo {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.join-case {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    flex-wrap: wrap;
}

.join-case .join-word {
    font-family: var(--font-arabic);
    font-size: 2.5rem;
    line-height: 1.5;
    color: var(--gold);
    direction: rtl;
    unicode-bidi: isolate;
    min-width: 4.5rem;
    text-align: center;
}

.join-case .join-verdict {
    flex: 1 1 12rem;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.join-case .join-verdict strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.92rem;
    color: var(--text-primary);
    margin-bottom: 0.1rem;
}

.join-case.is-joined { border-inline-start: 3px solid var(--mint); }
.join-case.is-broken { border-inline-start: 3px solid var(--coral); }
.join-case.is-joined .join-verdict strong { color: var(--mint); }
.join-case.is-broken .join-verdict strong { color: var(--coral); }

/* ---- 12d3. Interactive word builder ----------------------------------- */
.builder {
    display: grid;
    gap: 0.9rem;
    margin: 0;
}

.builder-stage {
    display: grid;
    place-items: center;
    min-height: 96px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(245, 185, 66, 0.4);
    border-radius: var(--radius-md);
    padding: 0.5rem;
}

.builder-word {
    font-family: var(--font-arabic);
    font-size: 3rem;
    line-height: 1.4;
    color: var(--gold);
    direction: rtl;
    unicode-bidi: isolate;
    word-break: keep-all;
}

.builder-word .caret {
    display: inline-block;
    width: 2px;
    height: 0.9em;
    background: var(--gold);
    vertical-align: -0.08em;
    animation: caretBlink 1s steps(2, start) infinite;
}

@keyframes caretBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.builder-target {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.builder-prompt {
    font-family: var(--font-arabic);
    font-size: 1.7rem;
    color: var(--text-primary);
    direction: rtl;
    unicode-bidi: isolate;
}

.builder-meaning {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.builder-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}

.builder-tile {
    min-width: 54px;
    min-height: 54px;
    padding: 0.3rem 0.5rem;
    font-family: var(--font-arabic);
    font-size: 1.85rem;
    line-height: 1.35;
    color: var(--gold);
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    cursor: pointer;
    direction: rtl;
    unicode-bidi: isolate;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.builder-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(245, 185, 66, 0.5);
}

.builder-tile[disabled] {
    opacity: 0.28;
    cursor: default;
    transform: none;
}

.builder-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.builder-btn {
    min-height: 44px;
    padding: 0.55rem 1.1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.builder-btn:hover {
    color: var(--gold);
    border-color: rgba(245, 185, 66, 0.5);
}

.builder-btn.is-primary {
    background: linear-gradient(135deg, var(--gold), var(--accent-warm));
    border-color: transparent;
    color: #2c1a4d;
}

.builder-btn.is-primary:hover {
    color: #2c1a4d;
    filter: brightness(1.06);
}

.builder-feedback {
    text-align: center;
    font-size: 0.9rem;
    min-height: 1.5em;
    color: var(--text-muted);
}

.builder-feedback.is-win {
    color: var(--mint);
    font-weight: 600;
}

/* ---- 12d. Visual progression ladder ------------------------------------- */
/* Used for the four levels of "finished" in the timeline article. */
.ladder {
    list-style: none;
    margin: 0 0 1.4em;
    padding: 0;
    display: grid;
    gap: 0.55rem;
    counter-reset: rung;
}

.ladder li {
    position: relative;
    counter-increment: rung;
    background: linear-gradient(90deg, rgba(245, 185, 66, 0.13), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-inline-start: 3px solid var(--gold);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem 0.85rem 3rem;
    margin: 0;
    line-height: 1.68;
}

.ladder li::before {
    content: counter(rung);
    position: absolute;
    inset-inline-start: 0.85rem;
    top: 0.8rem;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: #2c1a4d;
    background: linear-gradient(135deg, var(--gold), var(--accent-warm));
    border-radius: 50%;
}

.ladder li strong {
    color: var(--gold-soft);
}

/* ---- 12e. Journey / step rail ------------------------------------------- */
.rail {
    counter-reset: step;
    list-style: none;
    margin: 0 0 1.4em;
    padding: 0;
    position: relative;
}

/* Connecting spine */
.rail::before {
    content: '';
    position: absolute;
    inset-inline-start: 17px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold), rgba(245, 185, 66, 0.08));
}

.rail li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.15rem 3rem;
    margin: 0;
    line-height: 1.72;
}

.rail li:last-child {
    padding-bottom: 0;
}

.rail li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    top: 0.05rem;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gold);
    background: var(--night-2, #1c1050);
    border: 2px solid rgba(245, 185, 66, 0.5);
    border-radius: 50%;
    z-index: 1;
}

.rail-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
}

/* ---- 12f. Key-figure strip --------------------------------------------- */
.figure-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 0.7rem;
    margin: 0 0 1.4em;
}

.figure-cell {
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    padding: 1rem 0.7rem;
}

.figure-cell .figure-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gold);
    margin-bottom: 0.2rem;
}

.figure-cell .figure-label {
    display: block;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.figure-cell .figure-label a {
    color: var(--gold);
    /* 24px hit area for the game links inside the strip. */
    padding-top: 3px;
    padding-bottom: 3px;
    display: inline-block;
}

/* ---- 12g. Inline note strip (pull-quote style) -------------------------- */
.note-strip {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    background: linear-gradient(90deg, rgba(111, 201, 255, 0.11), transparent);
    border-inline-start: 3px solid var(--sky-blue);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0.9rem 1rem;
    margin: 0 0 1.3em;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.note-strip .note-icon {
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1.5;
}

.note-strip p {
    margin: 0;
}

.note-strip strong {
    color: var(--text-primary);
}

/* ---- 12h. Hub: category chips with counts ------------------------------ */
.filter-btn .count {
    display: inline-block;
    margin-inline-start: 0.35rem;
    font-size: 0.75em;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
    .article-visual {
        padding: var(--space-md) var(--space-sm);
    }

    .article-visual::before {
        font-size: 7.5rem;
        inset-inline-end: -8%;
    }

    .harakat-cell .glyph {
        font-size: 2.4rem;
    }

    .rail li {
        padding-inline-start: 2.7rem;
    }

    .rail::before {
        inset-inline-start: 15px;
    }

    .rail li::before {
        width: 32px;
        height: 32px;
    }

    .ladder li {
        padding-inline-start: 2.7rem;
    }
}

/* ------------------------------------- 13. Utilities, focus, motion, print */
.article-body :focus-visible,
.related-list :focus-visible,
.learn-card:focus-visible,
.article-card:focus-visible,
.article-cta a:focus-visible,
.breadcrumb a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.article-updated {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-style: italic;
}

@media (max-width: 700px) {
    .article-toc ol {
        columns: 1;
    }

    .article-cta .cta-actions {
        flex-direction: column;
    }

    .article-cta .btn {
        width: 100%;
    }

    .author-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .author-links {
        justify-content: center;
    }

    .article-grid {
        gap: var(--space-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-card,
    .learn-card,
    .related-list a,
    .article-cta .btn,
    .filter-btn,
    .article-toc > summary::before,
    .faq-item > summary::after {
        transition: none;
    }

    .article-card:hover,
    .learn-card:hover,
    .article-cta .btn:hover {
        transform: none;
    }
}

@media print {
    .site-header,
    .footer,
    .all-pages-wrapper,
    .article-toc,
    .article-cta,
    .related-block,
    .whatsapp-float {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .article-body {
        max-width: 100%;
        color: #000;
    }

    .article-body a {
        color: #000;
    }
}