/* ============================================================
   SINGLE POST — the article-only furniture, loaded just for
   is_singular('post'). Never reaches a custom post type, which
   falls through to single.php + entry.css alone.

   What is left here is the furniture around an article, not
   the blocks inside it; the class names are a contract, do not
   rename them (see CLAUDE.md):
     .page-content > .sidebar (.sidebar-toc) + .content
     .related-articles-wrapper (generator) + .related-posts (theme)

   The blocks the generator writes inside post_content —
   .ai-answer-block, .quick-facts, .faq-block / .faq-item,
   cite[data-source], table.seo-comparison-table — moved to
   entry.css on 25.08.2026. Nothing about them was
   article-specific, and keeping them here meant a place page
   rendered them raw.

   Shared prose, header band and tag chips: entry.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. Two-column shell
   ------------------------------------------------------------ */
.page-content,
.page-content *,
.page-content *::before,
.page-content *::after {
    box-sizing: border-box;
}

.page-content {
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

/* Sticky table-of-contents rail from desktop up. */
@media (min-width: 1024px) {
    .page-content {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 56px;
        align-items: start;
    }

    .sidebar {
        position: sticky;
        /* Clears the sticky nav bar, which is ~68px tall. */
        top: 88px;
        /* A long contents list must not outgrow the viewport while
           pinned, or its tail becomes unreachable. */
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* Anchor jumps must land below that same sticky nav bar. */
.content [id],
.faq-block [id] {
    scroll-margin-top: 96px;
}

/* CLAUDE.md documents .related-articles-wrapper as a sibling of
   .sidebar/.content; in the posts on this site the generator actually
   nests it inside .content, where this rule is simply inert. Kept for
   the sibling case so it spans both columns instead of sitting in the
   narrow rail. (The tag row is rendered outside this grid entirely —
   see the note in single-post.php.) */
.related-articles-wrapper {
    grid-column: 1 / -1;
}

/* ------------------------------------------------------------
   2. Table of contents
   ------------------------------------------------------------ */
.sidebar {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 22px;
}

/* Label above the list, in CSS so the generated markup stays clean. */
.sidebar-toc::before {
    content: "Съдържание";
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-ink-faint);
}

.sidebar-toc {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.sidebar-toc li {
    counter-increment: toc;
    margin: 0;
}

.sidebar-toc li + li {
    border-top: 1px solid var(--c-border);
}

.sidebar-toc a {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 10px 2px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--c-ink-soft);
    text-decoration: none;
    transition: color 0.18s ease;
}

.sidebar-toc a::before {
    content: counter( toc, decimal-leading-zero );
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c-accent);
}

.sidebar-toc a:hover {
    color: var(--c-accent);
}


/* ------------------------------------------------------------
   3. Related articles
   ------------------------------------------------------------ */
.related-articles-wrapper {
    margin: 2em 0 0;
    padding: 24px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.related-title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-ink-faint);
}

.related-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.related-list a {
    display: inline-flex;
    gap: 10px;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--c-ink);
    text-decoration: none;
}

.related-list a::before {
    content: "\2192";
    color: var(--c-accent);
    transition: transform 0.18s ease;
}

.related-list a:hover {
    color: var(--c-accent);
}

.related-list a:hover::before {
    transform: translateX(4px);
}

/* ------------------------------------------------------------
   4. Related posts — four cards from the article's category
   ------------------------------------------------------------
   Not to be confused with .related-articles-wrapper above: that one
   is the link list the generator puts inside post_content, this is
   the theme's own block under the article.
   ------------------------------------------------------------ */
.related-posts {
    padding-bottom: clamp(24px, 3vw, 36px);
}

.related-posts__grid {
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 28px) clamp(20px, 4vw, 56px) 0;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
    .related-posts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .related-posts__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.related-card {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.18s ease;
}

.related-card:hover {
    box-shadow: 0 18px 36px -24px var(--c-shadow);
}

.related-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-surface-tint);
}

.related-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card__media img {
    transform: scale(1.04);
}

.related-card__body {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 16px 18px 18px;
}

.related-card__terms {
    margin: 0;
}

.related-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.28;
    /* Clamped so the cards in a row keep matching heights. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-card__title a {
    color: var(--c-ink);
    text-decoration: none;
}

.related-card__title a:hover {
    color: var(--c-accent);
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-toc a,
    .faq-item,
    .related-list a::before,
    .related-card,
    .related-card__media img {
        transition: none;
    }
}

/* ------------------------------------------------------------
   5. „Добави ни в предпочитани източници в Google“

   Sits under the save and share row inside .entry-header__inner,
   so it inherits that band's padding and lines up with the title.
   A quiet outlined row rather than a filled button: it is an
   invitation, and it must not compete with the headline it sits
   under. See inc/google-preferred.php.
   ------------------------------------------------------------ */
.google-source {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 14px;
    padding: 9px 14px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-ink-soft);
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.google-source:hover,
.google-source:focus-visible {
    border-color: var(--c-accent);
    color: var(--c-ink);
    box-shadow: 0 2px 10px var(--c-shadow);
}

/* The logo keeps its own four colours in both themes — it is a
   trademark, not a token. */
.google-source__logo {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
}

.google-source__text {
    min-width: 0;
}

.google-source__arrow {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--c-ink-faint);
    transition: transform 0.2s ease, color 0.2s ease;
}

.google-source:hover .google-source__arrow,
.google-source:focus-visible .google-source__arrow {
    color: var(--c-accent);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .google-source,
    .google-source__arrow {
        transition: none;
    }

    .google-source:hover .google-source__arrow,
    .google-source:focus-visible .google-source__arrow {
        transform: none;
    }
}

/* ------------------------------------------------------------
   6. Article header width

   entry.css caps .entry-header__inner at 900px for every singular
   view. An article takes the cap off: the lead image below it is
   already the full width of .entry-header, and a headline stopping
   at 900px against a 1368px photo read as a mistake rather than as
   a measure.

   The override lives here and not in entry.css because a place page
   keeps the cap — .place-card sits directly under its hero and the
   two line up at 900px.

   Below roughly 1010px the container is narrower than the cap
   anyway, so this changes nothing but desktop.
   ------------------------------------------------------------ */
.entry-header__inner {
    max-width: none;
}