/* Bulgaria Property Concierge: blog article layer.
   The articles in /journal are standalone pages (their own inline reading styles). This file, loaded AFTER those
   styles and together with css/brand.css (logo + language switch), brings them to the same standard as the site:
   the site's header and footer, square edges, Gold accent, no dark theme (the site has none), and no hairline by the labels. Source: bpc-brand-guidebook.pdf. */

/* Header: solid Ivory bar with a Beige line, same lockup, nav, language switch and Gold button as the site */
.art-header { position: sticky; top: 0; z-index: 50; background: var(--ivory); border-bottom: 1px solid var(--beige); }
.art-header-in { max-width: 1280px; margin: 0 auto; padding: .85rem clamp(20px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.art-header .brand { text-decoration: none; }
.art-nav { display: none; gap: 1.1rem; white-space: nowrap; }
.art-nav a { position: relative; font: 500 .8rem/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgb(15 27 46 / .88); text-decoration: none; }
.art-nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0; background: var(--gold); transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.art-nav a:hover::after, .art-nav a.active::after { width: 100%; }
.art-actions { display: flex; align-items: center; gap: .75rem; }
.art-header .lang-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.art-cta { display: none; align-items: center; background: var(--gold); color: var(--navy); border: 1px solid var(--gold); padding: .7rem 1.15rem; font: 500 .74rem/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .5s, color .5s; }
.art-cta:hover { background: var(--gold-dark); color: var(--ivory); }
@media (min-width: 1100px) { .art-nav { display: flex; } }
@media (min-width: 640px) { .art-cta { display: inline-flex; } }
@media (max-width: 479px) { .art-header-in { padding-left: 1rem; padding-right: 1rem; } }

/* Reading page details */
/* No hairline before or above labels (client decision, twice: it reads as a stray dash). Do not reintroduce without asking. */
.eyebrow::before { display: none; }
.cover { display: block; border: 0; }
.cta-btn { border-radius: 0; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; padding: 1rem 1.8rem; border: 1px solid var(--gold); transition: background-color .5s, color .5s; }
.cta-btn:hover { background: var(--gold-dark); color: var(--ivory); }
.article-body a { border-bottom-color: var(--gold); }

/* Footer: the site's navy footer, reduced to what an article needs */
.art-footer { background: var(--navy); color: var(--ivory); padding: clamp(44px, 7vw, 64px) 0 2rem; }
.art-footer-in { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.art-footer-top { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: flex-start; justify-content: space-between; padding-bottom: 2rem; border-bottom: 1px solid rgb(250 248 244 / .14); }
.art-footer .brand { text-decoration: none; }
.art-footer .tag { margin: 1rem 0 0; max-width: 34ch; color: rgb(250 248 244 / .7); font-size: .95rem; line-height: 1.6; }
.art-footer nav { display: flex; flex-direction: column; gap: .7rem; }
.art-footer nav a, .art-footer .mail { color: rgb(250 248 244 / .7); text-decoration: none; font-size: .92rem; transition: color .3s; }
.art-footer nav a:hover, .art-footer .mail:hover { color: var(--ivory); }
.art-footer .label { font: 500 .72rem/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 1rem; }
.art-footer .fine { margin: 1.5rem 0 0; font-size: .8rem; color: rgb(250 248 244 / .5); }

/* One reading column: title block, cover photo, body text, tables, call-to-action and related articles all share the
   same left and right edges (760px + the page gutter). The cover used to sit in a wider column and overhung the text. */
.wrap, .wrap-wide { max-width: 760px; }
.cover { aspect-ratio: 16 / 9; margin: 0 0 2.2rem; }

/* ── Guidebook type ladder for reading pages ───────────────────────────────────────────────────────────────────
   The exported pages were set for a dense document (17px body, 11px labels). Sizes below bring them to a comfortable
   reading size, and the warm greys become Navy tints (the brand has no neutral grey; lines are Beige). */
:root { --muted: #4C5461; --text-muted: #4C5461; --faint: #6D737D; --line: #E8E1D3; }
body { font-size: 18px; }
.eyebrow { font-size: .82rem; }
.hero .dek { font-size: clamp(1.18rem, 2vw, 1.32rem); }
.meta-row { font-size: .98rem; }
.answer-box { padding: 1.8rem 2rem; }
.answer-box p { font-size: 1.18rem; }
.answer-box .lbl { font-size: .78rem; }
.article-body { font-size: 1.16rem; }
.article-body li { max-width: none; }
.stat .n { font-size: 2.3rem; }
.stat .l { font-size: .88rem; }
table { font-size: 1.02rem; }
th { font-size: .78rem; }
details.faq .a { font-size: 1.1rem; }
.sources { font-size: 1rem; }
.sources .lbl { font-size: .78rem; }
.cta-band p { font-size: 1.12rem; }
.cta-btn { font-size: .85rem; }
.related h4 { font-size: .82rem; }
.related-card .cat { font-size: .78rem; }
.art-footer .tag, .art-footer nav a, .art-footer .mail { font-size: 1rem; }
.art-footer .fine { font-size: .88rem; }