/*
 * TAM Digital Articles — hand-coded single-article page (no Elementor).
 * Same brand palette as tam-front-page: purple #937FC7 accent, orange
 * #FF6D1C secondary/CTA, cream #FFFAEE background, #252525 heading text.
 * The promo-box copy/colors are the site's own real content, pulled from
 * the live Elementor single-post template before it was retired.
 */

@font-face {
    font-family: 'YEKAN BAKH';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../fonts/YekanBakhFaNum-Regular-2.woff') format('woff');
}
@font-face {
    font-family: 'YEKAN BAKH';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('../fonts/YekanBakhFaNum-Bold-2.woff') format('woff');
}
@font-face {
    font-family: 'YEKAN BAKH';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/YekanBakhFaNum-ExtraBold-2.woff') format('woff');
}
@font-face {
    font-family: 'YEKAN BAKH';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/YekanBakhFaNum-Black-2.woff') format('woff');
}

:root {
    --tam-art-primary: #252525;
    --tam-art-accent: #937FC7;
    --tam-art-accent-dark: #7c68b3;
    --tam-art-secondary: #FF6D1C;
    --tam-art-text: #6b6b6b;
    --tam-art-bg: #FFFAEE;
    --tam-art-border: #CDCDCD;
    --tam-art-radius: 10px;
    --tam-art-font: 'YEKAN BAKH', Tahoma, sans-serif;
}

.tam-art-single {
    font-family: var(--tam-art-font);
    color: var(--tam-art-primary);
    padding-top: 48px;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────── */

.tam-art-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .85rem;
    color: var(--tam-art-text);
    margin-bottom: 18px;
}

.tam-art-breadcrumbs a {
    color: var(--tam-art-text);
    text-decoration: none;
}

.tam-art-breadcrumbs a:hover {
    color: var(--tam-art-secondary);
}

.tam-art-breadcrumb-sep {
    opacity: .5;
}

.tam-art-breadcrumb-current {
    color: var(--tam-art-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
}

/* ── Post header: title/meta + featured image, side by side, top-aligned ── */

.tam-art-post-header {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding-top: 32px;
    padding-bottom: 24px;
}

.tam-art-post-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.tam-art-hero {
    flex: 0 0 420px;
    max-width: 45%;
}

.tam-art-single .tam-art-hero img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    border-radius: 16px;
    display: block;
}

@media (max-width: 900px) {
    .tam-art-post-header {
        flex-direction: column;
    }

    .tam-art-hero {
        flex: 1 1 auto;
        max-width: 100%;
        order: -1;
    }
}

/* Institute News header image: center-cropped to fill a fixed frame
   (unlike the article's uncropped image) — one of the visual cues that
   makes a news item read as its own content type. */

.tam-art-post-header--news {
    align-items: stretch;
}

.tam-art-single .tam-art-hero.tam-art-hero--news img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    display: block;
}

.tam-art-post-header--news .tam-art-post-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tam-art-post-header--news .tam-art-breadcrumbs {
    margin-bottom: 14px;
}

.tam-art-badge--news {
    background: var(--tam-art-accent);
}

@media (max-width: 900px) {
    .tam-art-hero--news img {
        min-height: 200px;
    }
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.tam-art-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px 64px;
}

.tam-art-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-areas:
        "main   latest"
        "main   toc";
    grid-template-rows: auto 1fr;
    gap: 24px 48px;
    align-items: start;
}

.tam-art-main { grid-area: main; }
.tam-art-latest { grid-area: latest; }
.tam-art-toc { grid-area: toc; }

@media (max-width: 900px) {
    .tam-art-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "toc"
            "main"
            "latest";
    }
}

/* ── Main column ─────────────────────────────────────────────────────── */

.tam-art-badge {
    display: inline-block;
    background: var(--tam-art-accent);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.tam-art-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 12px;
}

.tam-art-meta {
    color: var(--tam-art-text);
    font-size: .9rem;
    margin-bottom: 28px;
}

.tam-art-content {
    line-height: 2;
    font-size: 1.05rem;
    color: #3d3d3d;
}

.tam-art-content h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--tam-art-primary);
    margin: 40px 0 16px;
    scroll-margin-top: 24px;
}

.tam-art-content h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tam-art-primary);
    margin: 28px 0 12px;
    scroll-margin-top: 24px;
}

.tam-art-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.tam-art-content a {
    color: var(--tam-art-accent-dark);
}

/* ── Author box ──────────────────────────────────────────────────────── */

.tam-art-author-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--tam-art-border);
    border-radius: var(--tam-art-radius);
    padding: 22px;
    margin-top: 48px;
}

.tam-art-author-avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.tam-art-author-label {
    display: block;
    color: var(--tam-art-text);
    font-size: .8rem;
    margin-bottom: 4px;
}

.tam-art-author-name {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.tam-art-author-bio {
    margin: 0;
    color: var(--tam-art-text);
    line-height: 1.8;
    font-size: .95rem;
}

/* ── Promo box ───────────────────────────────────────────────────────── */

a.tam-art-promo-box {
    display: block;
    background: var(--tam-art-secondary);
    border-radius: 15px;
    padding: 26px;
    margin-top: 24px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: opacity .15s ease;
}

a.tam-art-promo-box:hover,
a.tam-art-promo-box:focus,
a.tam-art-promo-box:visited,
a.tam-art-promo-box:active {
    color: #fff;
    opacity: .92;
}

.tam-art-promo-heading {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.tam-art-promo-text {
    margin: 0 0 16px;
    line-height: 1.8;
}

.tam-art-promo-btn {
    display: inline-block;
    background: #fff;
    color: var(--tam-art-secondary);
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 999px;
}

/* ── Comments ────────────────────────────────────────────────────────── */

.tam-art-comments {
    margin-top: 48px;
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

.tam-art-toc,
.tam-art-latest {
    background: #fff;
    border: 1px solid var(--tam-art-border);
    border-radius: var(--tam-art-radius);
    padding: 20px;
}

/* TOC is a <details> element: sticky while scrolling, capped so a long
   list scrolls inside itself instead of running off past the viewport.
   Nesting h3s under their h2 (see single-article.php) keeps that scroll
   from being needed in most cases; a slim custom scrollbar covers the rest. */
.tam-art-toc {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tam-art-border) transparent;
}

.tam-art-toc::-webkit-scrollbar {
    width: 6px;
}

.tam-art-toc::-webkit-scrollbar-track {
    background: transparent;
}

.tam-art-toc::-webkit-scrollbar-thumb {
    background: var(--tam-art-border);
    border-radius: 999px;
}

.tam-art-sidebar-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0 0 14px;
    color: var(--tam-art-primary);
}

summary.tam-art-sidebar-title {
    cursor: pointer;
    margin-bottom: 0;
    list-style: none;
}

summary.tam-art-sidebar-title::-webkit-details-marker {
    display: none;
}

summary.tam-art-sidebar-title::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid var(--tam-art-text);
    border-bottom: 2px solid var(--tam-art-text);
    transform: rotate(45deg);
    margin-inline-start: 8px;
    transition: transform .2s ease;
    vertical-align: middle;
}

details[open] > summary.tam-art-sidebar-title::after {
    transform: rotate(-135deg);
}

.tam-art-toc[open] .tam-art-toc-list {
    margin-top: 14px;
}

.tam-art-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tam-art-toc-item > a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--tam-art-primary);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    transition: color .15s ease, background .15s ease;
}

.tam-art-toc-item > a:hover,
.tam-art-toc-item > a.is-active {
    color: var(--tam-art-secondary);
    background: var(--tam-art-bg);
}

/* h3s nested under their h2, in their own small collapsible drawer instead
   of one long flat list. */
.tam-art-toc-sub {
    margin: 2px 0 4px;
}

.tam-art-toc-sub summary {
    cursor: pointer;
    list-style: none;
    padding: 4px 12px;
    font-size: .78rem;
    color: var(--tam-art-text);
    opacity: .8;
}

.tam-art-toc-sub summary::-webkit-details-marker {
    display: none;
}

.tam-art-toc-sublist {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tam-art-toc-sublist a {
    display: block;
    padding: 6px 12px;
    padding-inline-start: 26px;
    border-radius: 8px;
    color: var(--tam-art-text);
    text-decoration: none;
    font-size: .85rem;
    line-height: 1.5;
    transition: color .15s ease, background .15s ease;
}

.tam-art-toc-sublist a:hover,
.tam-art-toc-sublist a.is-active {
    color: var(--tam-art-secondary);
    background: var(--tam-art-bg);
}

.tam-art-latest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

a.tam-art-latest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

a.tam-art-latest-item:hover,
a.tam-art-latest-item:visited {
    color: inherit;
}

.tam-art-latest-cover {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

.tam-art-latest-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tam-art-latest-title {
    font-size: .9rem;
    line-height: 1.6;
    color: var(--tam-art-primary);
}

@media (max-width: 900px) {
    .tam-art-toc {
        position: static;
        max-height: none;
    }
}

/* ── Institute News (simpler single-column pages) ───────────────────── */

.tam-art-news-container {
    max-width: 900px;
}

.tam-art-news-archive {
    max-width: 1500px;
}

.tam-art-news-body-card {
    background: #fff;
    border: 1px solid var(--tam-art-border);
    border-radius: var(--tam-art-radius);
    padding: 32px clamp(20px, 4vw, 48px);
    margin-top: 8px;
}

.tam-art-archive-header {
    text-align: center;
    margin-bottom: 40px;
}

.tam-art-archive-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--tam-art-primary);
    margin: 0;
}

.tam-art-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .tam-art-news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .tam-art-news-grid { grid-template-columns: 1fr; }
}

a.tam-art-news-card {
    display: block;
    background: #fff;
    border: 1px solid var(--tam-art-border);
    border-radius: var(--tam-art-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}

a.tam-art-news-card:hover,
a.tam-art-news-card:visited,
a.tam-art-news-card:focus {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -18px rgba(37, 37, 37, .35);
}

.tam-art-news-card-cover {
    display: block;
}

.tam-art-news-card-cover img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

.tam-art-news-card-body {
    display: block;
    padding: 16px;
}

.tam-art-news-card-date {
    display: block;
    color: var(--tam-art-text);
    font-size: .82rem;
    margin-bottom: 6px;
}

.tam-art-news-card-title {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--tam-art-primary);
}

.tam-art-empty {
    text-align: center;
    color: var(--tam-art-text);
    padding: 40px 0;
}

/* ── Pagination (shared by any tam-articles archive) ────────────────── */

.tam-art-pagination {
    margin-top: 48px;
    display: flex;
    justify-content: center;
}

.tam-art-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tam-art-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--tam-art-border);
    color: var(--tam-art-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tam-art-pagination .page-numbers.current {
    background: var(--tam-art-secondary);
    border-color: var(--tam-art-secondary);
    color: #fff;
}

.tam-art-pagination .page-numbers:hover:not(.current):not(.dots) {
    border-color: var(--tam-art-secondary);
    color: var(--tam-art-secondary);
}

.tam-art-pagination .page-numbers.dots {
    background: none;
    border: none;
}