/* ==========================================================================
   TajikGanjoor typography & layout
   Self-hosted fonts: PT Serif (poem/body text) + PT Sans (UI chrome).
   Subset used: cyrillic-ext — the plain "cyrillic" subset is MISSING the
   six Tajik-specific letters (ғ ӣ қ ӯ ҳ ҷ), cyrillic-ext has them.
   ========================================================================== */

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ptserif/pt-serif-cyrillic-ext-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ptserif/pt-serif-cyrillic-ext-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/ptserif/pt-serif-cyrillic-ext-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/ptserif/pt-serif-cyrillic-ext-700-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ptsans/pt-sans-cyrillic-ext-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ptsans/pt-sans-cyrillic-ext-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/ptsans/pt-sans-cyrillic-ext-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'PT Sans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/ptsans/pt-sans-cyrillic-ext-700-italic.woff2') format('woff2');
}

/* ---------- base page: warm paper tone, PT Sans chrome ---------- */

:root {
    --tg-paper: #faf6ee;
    --tg-paper-edge: #efe6d3;
    --tg-surface: #ffffff;
    --tg-ink: #2b2620;
    --tg-ink-soft: #5b5346;
    --tg-accent: #8a5a2b;
    --tg-accent-deep: #6b3f1d;
    --tg-rule: #d9cdb2;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tg-paper: #211d18;
        --tg-paper-edge: #2c2620;
        --tg-surface: #2c2620;
        --tg-ink: #ece6d9;
        --tg-ink-soft: #bfb6a4;
        --tg-accent: #d1a06a;
        --tg-accent-deep: #e3b988;
        --tg-rule: #453d32;
    }

    /* poet portrait circles keep a light backing regardless of theme -
       the portraits are illustrations on a light background, and a
       pure-white disc reads as a deliberate frame against the dark
       page rather than a mismatched surface */
    .tg-poet-portrait,
    .tg-poet-portrait-lg,
    .sitem-poet-portrait,
    .tg-crumb-poet img {
        background: #f4efe4;
    }
}

html, body {
    background-color: var(--tg-paper);
    color: var(--tg-ink);
    font-family: 'PT Sans', Tahoma, sans-serif;
}

.navbar {
    background-color: var(--tg-paper) !important;
    border-bottom: 1px solid var(--tg-rule) !important;
    font-family: 'PT Sans', sans-serif;
}

/* BreadCrumpUrls always starts with <a href="/">Ганҷур</a> (see Index.cshtml.cs) -
   style that first link as the site's wordmark rather than duplicating it. */
.tg-breadcrumb {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 2px;
}

.tg-breadcrumb a:first-child {
    font-family: 'PT Serif', serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--tg-accent-deep);
    text-decoration: none;
    margin-inline-end: 4px;
}

.navbar input[type="search"] {
    font-family: 'PT Sans', sans-serif;
    border: 1px solid var(--tg-rule);
    background: var(--tg-surface);
    color: var(--tg-ink);
}

.footer {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.85rem;
}

.footer a {
    color: var(--tg-accent-deep);
}

/* ---------- poem prev/next navigation ---------- */

.tg-poem-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 12px;
    max-width: 720px;
    margin: 24px auto 8px auto;
    padding-top: 14px;
    border-top: 1px solid var(--tg-rule);
}

.tg-poem-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 46%;
    padding: 6px 10px;
    text-decoration: none;
    color: var(--tg-ink-soft);
    border-radius: 6px;
}

.tg-poem-nav-link:hover {
    background-color: var(--tg-paper-edge);
    color: var(--tg-accent-deep);
}

.tg-poem-nav-next {
    margin-inline-start: auto;
    text-align: end;
    flex-direction: row-reverse;
}

.tg-poem-nav-arrow {
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.tg-poem-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tg-poem-nav-caption {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.72rem;
    opacity: 0.75;
}

.tg-poem-nav-title {
    font-family: 'PT Serif', serif;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- poem page: printed-book feel ---------- */

.container {
    max-width: 720px;
}

.b, .b2, .n, .l {
    font-family: 'PT Serif', serif;
}

/* one beyt (couplet): two stacked mesras, book-style, not side-by-side
   columns — matches how Cyrillic verse is actually typeset (and matches
   ganjoor.net's own <768px fallback), and needs no breakpoint since it's
   already a single column at any width. */
.b {
    max-width: 480px;
    margin: 0 auto 1.35em auto;
    text-align: center;
    clear: both;
}

.b .m1, .b .m2 {
    float: none;
    width: auto;
    display: block;
}

.b .m1 p, .b .m2 p {
    font-family: 'PT Serif', serif;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.9;
    margin: 0;
    text-shadow: none;
    text-align: center;
}

.b .m2 p {
    opacity: 0.92;
}

/* rubaʼi-style already-centered couplet */
.b2 p {
    font-family: 'PT Serif', serif;
    font-size: 1.15rem;
    line-height: 1.9;
    text-align: center;
    margin: 0;
}

/* paragraph / single-line verses */
.n p, .l p {
    font-family: 'PT Serif', serif;
    font-size: 1.1rem;
    line-height: 1.9;
    text-align: center;
    margin: 0 auto 1.2em auto;
    max-width: 560px;
}

/* comments / notes: quieter, sans-serif, clearly not part of the poem */
.c {
    max-width: 90%;
    margin: 10px auto;
    padding: 8px 14px;
    background-color: var(--tg-paper-edge);
    border-inline-start: 3px solid var(--tg-accent);
    clear: both;
}

.c p {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--tg-ink-soft);
    margin: 0;
}

/* poem title */
.text-center h1, .text-center h2 {
    font-family: 'PT Serif', serif;
    font-weight: 700;
    color: var(--tg-accent-deep);
}

.text-center h1 a, .text-center h2 a {
    color: inherit;
    text-decoration: none;
}

/* faint rule between poems on a listing/category page */
.item {
    padding-top: 20px;
    border-top: 1px solid var(--tg-rule);
    margin-top: 20px;
}

.item:first-child {
    border-top: none;
    margin-top: 0;
}

/* search hit highlighting - keep legible on the paper background */
.hilite, .hilite1, .hilite2, .hilite3 {
    padding: 0 2px;
    border-radius: 2px;
}

/* ---------- homepage: poet card grid ---------- */

.tg-poet-grid {
    max-width: 980px;
    margin: 10px auto 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 18px 12px;
    padding: 0 8px;
}

.tg-poet-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--tg-ink);
}

.tg-poet-card .tg-poet-portrait {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--tg-rule);
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.tg-poet-card .tg-poet-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tg-poet-card .tg-poet-name {
    margin-top: 8px;
    font-family: 'PT Serif', serif;
    font-size: 0.92rem;
    text-align: center;
    line-height: 1.25;
}

.tg-poet-card:hover .tg-poet-portrait {
    border-color: var(--tg-accent);
}

.tg-poet-card:hover .tg-poet-name {
    color: var(--tg-accent-deep);
}

@media (max-width: 480px) {
    .tg-poet-grid {
        grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
        gap: 14px 8px;
    }

    .tg-poet-card .tg-poet-portrait {
        width: 64px;
        height: 64px;
    }

    .tg-poet-card .tg-poet-name {
        font-size: 0.8rem;
    }
}

/* ---------- poet bio page ---------- */

.tg-poet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
}

.tg-poet-header .tg-poet-portrait-lg {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--tg-rule);
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.tg-poet-header .tg-poet-portrait-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* small poet portrait inlined into the breadcrumb, prefixing the poet's
   name wherever it appears there (poet page's own crumb, and the first
   ancestor crumb on category/poem pages, which is always the poet's root
   category - see Index.cshtml.cs) */
.tg-crumb-poet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}

.tg-crumb-poet img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--tg-rule);
    background: #fff;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* GanjoorPage.HtmlText for poet/cat pages is server-generated plain
   <p> tags (bio prose) followed by more <p><a>...</a></p> tags (sub-
   category / poem links) with no distinguishing classes at all - the
   markup is identical for both, so it's told apart here structurally:
   a paragraph whose only content is a single link is a nav row, any
   other paragraph is bio prose. */
.tg-poet-page p,
.tg-cat-page p {
    font-family: 'PT Serif', serif;
    font-size: 1.05rem;
    line-height: 1.85;
    text-align: start;
    margin: 0 auto 0.9em auto;
    max-width: 620px;
}

.tg-poet-page p:has(> a:only-child),
.tg-cat-page p:has(> a:only-child) {
    font-family: 'PT Sans', sans-serif;
    font-size: 1rem;
    text-align: start;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tg-rule);
    max-width: 620px;
    line-height: 1.6;
}

.tg-poet-page p:has(> a:only-child):first-of-type,
.tg-cat-page p:has(> a:only-child):first-of-type {
    border-top: 1px solid var(--tg-rule);
    margin-top: 12px;
}

.tg-poet-page p:has(> a:only-child) a,
.tg-cat-page p:has(> a:only-child) a {
    color: var(--tg-accent-deep);
    text-decoration: none;
    font-weight: 700;
}

/* the excerpt trailing the link (": ..." from PrepareTajikCatHtmlTextAsync /
   PrepareTajikPoetHtmlTextAsync) is plain text in the same <p>, so it can only
   be dimmed via the paragraph's own color - the link's explicit color above
   still wins for the title itself */
.tg-poet-page p:has(> a:only-child),
.tg-cat-page p:has(> a:only-child) {
    color: var(--tg-ink-soft);
}

.tg-poet-page p:has(> a:only-child):hover,
.tg-cat-page p:has(> a:only-child):hover {
    background-color: var(--tg-paper-edge);
}

/* ---------- search results ---------- */

.sitem {
    max-width: 620px;
    margin: 0 auto;
    padding: 16px 4px;
    border-top: 1px solid var(--tg-rule);
    text-align: start;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.sitem:first-of-type {
    border-top: none;
}

.sitem-poet-portrait {
    flex: 0 0 auto;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--tg-rule);
    background: #fff;
}

.sitem-poet-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sitem-poet-portrait:hover {
    border-color: var(--tg-accent);
}

.sitem-body {
    flex: 1 1 auto;
    min-width: 0;
}

.sitem h2 {
    font-family: 'PT Serif', serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.sitem h2 a {
    color: var(--tg-accent-deep);
    text-decoration: none;
}

.sit {
    float: none;
    max-width: none;
    font-family: 'PT Serif', serif;
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--tg-ink-soft);
}

.sit p {
    margin: 0 0 4px 0;
}

@media (max-width: 420px) {
    .sitem-poet-portrait {
        width: 40px;
        height: 40px;
    }
}

/* ---------- pagination bar (GeneratePagingBarHtml in Index.cshtml.cs) ---------- */

.circled-number, .circled-number-diff {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 2px;
    border-radius: 50%;
    font-family: 'PT Sans', sans-serif;
    font-size: 0.9rem;
}

.circled-number {
    border: 1px solid var(--tg-rule);
    color: var(--tg-ink-soft);
}

.circled-number:hover {
    border-color: var(--tg-accent);
    color: var(--tg-accent-deep);
}

.circled-number-diff {
    background-color: var(--tg-accent-deep);
    color: #fff;
}

/* ---------- error page ---------- */

.text-danger {
    font-family: 'PT Serif', serif;
    color: var(--tg-accent-deep) !important;
}

/* ---------- poem recitations (audio) ---------- */

.tg-recitations {
    max-width: 560px;
    margin: 28px auto 0 auto;
    padding-top: 16px;
    border-top: 1px solid var(--tg-rule);
    text-align: start;
}

.tg-recitations-title {
    font-family: 'PT Serif', serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--tg-accent-deep);
    margin-bottom: 10px;
}

.tg-recitation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background-color: var(--tg-paper-edge);
    border-radius: 8px;
}

.tg-recitation audio {
    max-width: 100%;
    height: 34px;
}

.tg-recitation-caption {
    font-family: 'PT Sans', sans-serif;
    font-size: 0.88rem;
    color: var(--tg-ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tg-recitation-title {
    color: var(--tg-ink);
}

.tg-recitation-download {
    color: var(--tg-accent-deep);
    text-decoration: none;
    margin-inline-start: 4px;
}

.tg-recitation-download:hover {
    opacity: 0.7;
}

@media (max-width: 480px) {
    .tg-recitation audio {
        width: 100%;
    }
}

/* verse currently being recited, highlighted by recitation-sync.js */
.tg-verse-active {
    color: var(--tg-accent-deep) !important;
    background-color: var(--tg-paper-edge);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}