/* ============================================================
   SINGLE ENTRY — chrome shared by every singular view:
   single-post.php (articles) and the generic single.php that
   future custom post types fall through to.

   That includes the blocks the generator writes inside
   post_content — .ai-answer-block, .quick-facts, .faq-block,
   cite[data-source], the tables. They were in single-post.css
   until 25.08.2026, where only an article ever loaded them.

   Still article-only, and still in single-post.css: the
   two-column shell, the TOC rail, .related-articles-wrapper
   and .related-posts.

   Same design system as the front page: display face for headings,
   body face for copy, 12px radii, indigo accent, the chip shape
   with one square corner. .cat-badge and .entry-meta come from
   base.css.
   ============================================================ */

/* ------------------------------------------------------------
   Header band — chip, title, byline, lead image
   ------------------------------------------------------------ */
.entry-header {
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) 0;
}

.entry-header__inner {
    max-width: 900px;
}

.entry-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.entry-title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.6vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    color: var(--c-ink);
}

.entry-thumbnail {
    margin-top: clamp(24px, 4vw, 40px);
}

.entry-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------
   Body wrapper — only the generic template uses this; the article
   template lays its content out on the .page-content grid instead
   (single-post.css).

   .entry-content carried a 900px cap of its own until 20.09.2026.
   .entry-body already stops at 1480px and pads, so the content
   takes that width now; the measure is a decision for whatever
   template is using this, not a default set here.
   ------------------------------------------------------------ */
.entry-body {
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px);
}

/* ------------------------------------------------------------
   Prose
   ------------------------------------------------------------
   Both selectors on purpose: .entry-content is the generic
   template's wrapper, .content is the article pipeline's. They
   read identically, so the rules stay in one place.
   ------------------------------------------------------------ */
.entry-content,
.content {
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--c-ink-soft);
}

.entry-content p,
.content p {
    margin: 0 0 1.35em;
}

.entry-content a,
.content a {
    color: var(--c-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: var(--c-glow);
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.entry-content a:hover,
.content a:hover {
    color: var(--c-accent-deep);
    text-decoration-color: var(--c-accent);
}

.entry-content strong,
.content strong {
    color: var(--c-ink);
    font-weight: 700;
}

/* Headings carry the same short solid tick the footer puts in front
   of its link lists — the one accent motif this design repeats. */
.entry-content h2,
.content h2 {
    display: flex;
    gap: 14px;
    margin: 2.1em 0 0.7em;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink);
}

.entry-content h2::before,
.content h2::before {
    content: "";
    flex: 0 0 auto;
    align-self: stretch;
    width: 4px;
    border-radius: 2px;
    background: var(--c-accent);
}

.entry-content h3,
.content h3 {
    margin: 1.7em 0 0.6em;
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink);
}

.entry-content ul,
.entry-content ol,
.content ul,
.content ol {
    margin: 0 0 1.35em;
    padding-left: 1.3em;
}

.entry-content li,
.content li {
    margin-bottom: 0.5em;
}

.entry-content li::marker,
.content li::marker {
    color: var(--c-accent);
}

.entry-content blockquote,
.content blockquote {
    margin: 1.8em 0;
    padding: 2px 0 2px 22px;
    border-left: 4px solid var(--c-accent);
    color: var(--c-ink);
    font-size: 1.12rem;
    line-height: 1.6;
}

.entry-content img,
.content img {
    max-width: 100%;
    height: auto;
}

.entry-content figure,
.content figure.wp-block-image {
    margin: 2em 0;
}

.entry-content figure img,
.content figure.wp-block-image img {
    display: block;
    width: 100%;
    border-radius: var(--radius-lg);
}

.entry-content figcaption,
.content figcaption {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--c-ink-faint);
}

/* ------------------------------------------------------------
   Tags — layout only; the chip itself is .tag-chip in base.css,
   shared with the archive sidebar.
   ------------------------------------------------------------ */
.post-tags {
    max-width: 1480px;
    margin: 0 auto;
    /* Tighter below than beside: the author box follows and the two
       should read as one closing group. */
    padding: 0 clamp(20px, 4vw, 56px) clamp(22px, 3vw, 32px);
}

/* The flex row itself now lives in base.css — single-place.php reuses it
   for feature chips, where a rule above would be wrong.
   Scoped here rather than on .post-tags because the rule has to line up
   with the content edges, and the wrapper is wider by its padding. */
.post-tags .tag-links {
    padding-top: 24px;
    border-top: 1px solid var(--c-border);
}

/* ------------------------------------------------------------
   Author box — sits under the tag row (single-post.php)
   ------------------------------------------------------------ */
.post-author {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px) clamp(40px, 6vw, 72px);
}

/* The one square corner is the site's signature shape — it is what
   --radius-badge draws on every .cat-badge. At card scale it turns a
   plain panel into something that belongs to this design rather than
   to any theme, and the accent rail down the square side is what the
   corner leans against. */
.post-author__card {
    position: relative;
    display: grid;
    gap: clamp(18px, 3vw, 28px);
    align-items: start;
    overflow: hidden;
    padding: clamp(22px, 3vw, 32px);
    padding-left: clamp(26px, 3vw, 36px);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-badge);
    background:
        linear-gradient(135deg, var(--c-surface) 0%, var(--c-surface-tint) 100%);
    box-shadow: 0 4px 24px var(--c-shadow);
}

.post-author__card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--c-accent);
}

@media (min-width: 560px) {
    .post-author__card {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

/* Two rings rather than a border: the inner one in the surface colour
   lifts the photo off the tinted panel, the outer one in the accent
   ties it to the rail. box-shadow rather than outline so both follow
   the circle. */
.post-author__avatar img,
.post-author__initials {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--c-surface-tint);
    box-shadow:
        0 0 0 3px var(--c-surface),
        0 0 0 5px var(--c-accent);
}

/* Stand-in when the user has no avatar — see
   insidebulgaria_author_avatar() in inc/authors.php. */
.post-author__initials {
    background: var(--c-accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
}

.post-author__body {
    display: grid;
    justify-items: start;
    gap: 8px;
}

/* The same chip a category wears, in the same shape, so the word
   "Автор" reads as a label and not as a stray line of small caps. */
.post-author__label {
    margin: 0;
    padding: 4px 11px;
    border-radius: var(--radius-badge);
    background: var(--c-accent);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
}

.post-author__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-ink);
}

/* A block, not a paragraph, since the bio became an editor field
   (inc/authors.php): it arrives as one or more <p>, and
   may carry a link or a list. */
.post-author__bio {
    max-width: 62ch;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--c-ink-soft);
}

.post-author__bio > *:first-child {
    margin-top: 0;
}

.post-author__bio > *:last-child {
    margin-bottom: 0;
}

.post-author__bio p {
    margin: 0 0 0.7em;
}

/* The author's own profiles. .socials is in base.css; this variant only
   sets the colour, which in the header and the footer is inherited from
   a dark bar and here has to be stated. */
.socials--author {
    margin-top: 2px;
}

.socials--author .socials__list a {
    color: var(--c-ink-faint);
}

.socials--author .socials__list a:hover,
.socials--author .socials__list a:focus-visible {
    color: var(--c-accent);
}

.socials--author .socials__list svg {
    width: 18px;
    height: 18px;
}

/* Filled, like Benqu's header button — this is the one call to action
   on the page, so it is not the outlined variant used for tag chips. */
/* Author links, only the networks that were filled in (single-post.php).
   Round outlined buttons rather than the bare icons the footer uses:
   here they sit on a tinted panel and need an edge of their own, and
   they are the one thing in the card a reader might click by mistake. */
.socials--author {
    margin-top: 2px;
}

.socials--author .socials__list {
    gap: 8px;
}

.socials--author .socials__list a {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--c-border-strong);
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-ink-soft);
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.socials--author .socials__list a:hover,
.socials--author .socials__list a:focus-visible {
    border-color: var(--c-accent);
    color: var(--c-accent);
    transform: translateY(-2px);
}

/* Outlined, not filled: the label chip and the avatar ring already
   carry the accent, and a third solid block of it turns the card into
   a poster. */
.post-author__link {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 22px;
    border: 1px solid var(--c-accent);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--c-accent);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* The arrow is CSS, not markup: single-post.php prints the label and
   nothing else, and an arrow is decoration a screen reader should not
   have to read out. */
.post-author__link::after {
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateX(0) rotate(45deg);
    transition: transform 0.18s ease;
}

.post-author__link:hover::after,
.post-author__link:focus-visible::after {
    transform: translateX(3px) rotate(45deg);
}

.post-author__link:hover,
.post-author__link:focus-visible {
    border-color: var(--c-accent-deep);
    background: var(--c-accent-deep);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .entry-content a,
    .content a,
    .post-author__link,
    .post-author__link::after,
    .socials--author .socials__list a {
        transition: none;
    }

    .post-author__link:hover::after,
    .post-author__link:focus-visible::after {
        transform: rotate(45deg);
    }

    .socials--author .socials__list a:hover,
    .socials--author .socials__list a:focus-visible {
        transform: none;
    }
}


/* ------------------------------------------------------------
   The blocks the generator emits inside post_content

   These lived in single-post.css until 25.08.2026, which meant
   they only ever loaded for is_singular('post') — a place whose
   body carried a quick-facts list or an FAQ got the raw markup.
   Nothing about them is article-specific, so by the convention
   in CLAUDE.md they belong one level up, here, where every
   singular reaches them.

   The two-column shell, the sticky contents rail and the
   related-articles grid stay in single-post.css: those really
   are article furniture.

   The class names are a contract — do not rename them.

   Order matters. .quick-facts strong and .entry-content strong
   have the same specificity, so this section has to stay after
   the prose above it or the label styling loses.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Quick-answer callout
   ------------------------------------------------------------ */
.ai-answer-block {
    margin: 1.8em 0;
    padding: 20px 22px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--radius-md);
}

.ai-answer-block::before {
    content: "Бърз отговор";
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 14px;
    border-radius: var(--radius-badge);
    background: var(--c-accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ai-answer-block h3 {
    margin: 0 0 0.5em;
    font-size: 1.1rem;
}

.ai-answer-block p {
    margin-bottom: 0.7em;
    font-size: 0.98rem;
}

/* ------------------------------------------------------------
   Quick facts
   ------------------------------------------------------------ */
.quick-facts {
    margin: 1.8em 0;
    padding: 6px 22px;
    background: var(--c-surface-tint);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

.quick-facts p {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    margin: 0;
    padding: 12px 0;
    font-size: 0.95rem;
}

.quick-facts p + p {
    border-top: 1px solid var(--c-border-strong);
}

/* Labels read as small caps; entry.css's plain bold is overridden. */
.quick-facts strong {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent);
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq-block {
    margin-top: 3em;
}

/* Same ruled heading the front page uses for its section titles. */
.faq-block > h2 {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    margin: 0 0 1.2em;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    font-weight: 700;
    color: var(--c-ink);
}

.faq-block > h2::before,
.faq-block > h2::after {
    content: "";
    flex: 1 1 0;
    align-self: center;
    width: auto;
    height: 1px;
    border-radius: 0;
    background: var(--c-border-strong);
}

.faq-item {
    margin-bottom: 14px;
    padding: 18px 22px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    transition: border-color 0.18s ease;
}

.faq-item:hover {
    border-color: var(--c-accent);
}

.faq-item h3 {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin: 0;
    font-size: 1.08rem;
}

.faq-item h3::before {
    content: "Q";
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-accent);
}

.faq-answer p {
    margin: 0.7em 0 0.2em;
    font-size: 0.98rem;
}

/* ------------------------------------------------------------
   Cited sources
   ------------------------------------------------------------ */
.entry-content cite,
.content cite {
    font-style: normal;
}

/* The source domain rides in a chip after the link. */
.entry-content cite[data-source]::after,
.content cite[data-source]::after {
    content: attr( data-source );
    display: inline-block;
    margin-left: 6px;
    padding: 1px 10px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-badge);
    background: var(--c-surface);
    color: var(--c-ink-faint);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: 2px;
}

/* ------------------------------------------------------------
   Comparison table
   ------------------------------------------------------------ */
.entry-content table.seo-comparison-table,
.content table.seo-comparison-table {
    display: block;            /* lets the table scroll on small screens */
    overflow-x: auto;
    width: 100%;
    margin: 2em 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    border-collapse: collapse;
    font-size: 0.95rem;
}

.entry-content table.seo-comparison-table th,
.entry-content table.seo-comparison-table td,
.content table.seo-comparison-table th,
.content table.seo-comparison-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}

.entry-content table.seo-comparison-table thead th,
.content table.seo-comparison-table thead th {
    background: var(--c-surface-tint);
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* ---- Key takeaways --------------------------------------------------

   The generator opens most articles with this: a summary paragraph and
   three or four bullets, before the first heading. It had no rules at
   all until 25.08.2026 and rendered as a loose paragraph followed by a
   default bulleted list — on 19 published posts, and as the very first
   thing on the one finished place page.

   Deliberately quieter than .ai-answer-block below it. That one is a
   callout the reader is meant to stop at; this is the lead-in, and two
   loud panels stacked at the top of an article cancel each other out.
   Hence a tinted panel with no border and a plain label, against the
   other's white card, accent rule and filled chip.

   The label is Bulgarian in the stylesheet, which cannot be translated.
   Same trade .ai-answer-block::before already makes — noted rather than
   solved, because solving it means moving the label into the markup the
   generator writes, and that markup is a contract.
   ------------------------------------------------------------------- */
.key-takeaways {
    margin: 0 0 2.2em;
    padding: 22px 24px 18px;
    background: var(--c-surface-tint);
    border-radius: var(--radius-md);
}

.key-takeaways::before {
    content: "Накратко";
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-accent);
}

/* The one paragraph that has to be read even by somebody who reads
   nothing else on the page. */
.key-takeaways-lead {
    margin: 0 0 14px;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--c-ink);
    font-weight: 500;
}

.key-takeaways ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.key-takeaways li {
    position: relative;
    margin: 0;
    padding: 0 0 0 26px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--c-ink-soft);
}

.key-takeaways li + li {
    margin-top: 8px;
}

/* A tick rather than a bullet: these are conclusions, not a list of
   things. Drawn in ::before so it stays out of the text a screen
   reader announces. */
.key-takeaways li::before {
    content: "";
    position: absolute;
    top: 0.45em;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
}

/* entry.css indents prose lists; this one carries its own. */
.entry-content .key-takeaways ul,
.content .key-takeaways ul {
    padding-left: 0;
}


/* ------------------------------------------------------------
   Tables in prose

   Nothing styled a plain <table> anywhere in the theme until
   25.08.2026 — .seo-comparison-table above had rules, .place-hours
   had its own, and a table written by hand in the editor fell
   through to the browser's defaults. A place page is where that
   surfaced: opening hours, prices and a stamp schedule all want a
   table, and none of them carries the generator's class.

   `display: block` is what lets it scroll rather than push the
   page sideways on a phone; the trade is that the table no longer
   fills the column, which is why width is set explicitly.
   ------------------------------------------------------------ */
.entry-content table,
.content table {
    display: block;
    overflow-x: auto;
    width: 100%;
    margin: 2em 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--c-ink-soft);
}

.entry-content table th,
.entry-content table td,
.content table th,
.content table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}

.entry-content table thead th,
.content table thead th {
    background: var(--c-surface-tint);
    color: var(--c-ink);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The last row's rule would otherwise double up with the border
   the table itself draws. */
.entry-content table tr:last-child td,
.content table tr:last-child td {
    border-bottom: 0;
}

.entry-content table caption,
.content table caption {
    margin-bottom: 8px;
    color: var(--c-ink-faint);
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-align: left;
}

/* ------------------------------------------------------------
   Contact card — the [ib_contact_card] shortcode
   (inc/shortcodes.php), on the contact page.

   A definition list rather than a table: these are labelled
   values, not rows and columns, and a table would put the
   narrowest screen into a horizontal scroll for two words.
   ------------------------------------------------------------ */
.contact-card {
    margin: 1.6em 0;
    padding: clamp(16px, 2.5vw, 24px);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
}

.contact-card__row {
    display: grid;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border);
}

.contact-card__row:first-child {
    padding-top: 0;
}

.contact-card__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

@media (min-width: 560px) {
    .contact-card__row {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 16px;
        align-items: baseline;
    }
}

.contact-card__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ink-faint);
}

.contact-card__value {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-ink);
}