/* ==========================================================================
   cryptoblog — screen.css
   A LocalCoinSwap-blog-equivalent Ghost theme
   Fonts: Noto Sans (UI) / Noto Serif (reading)
   ========================================================================== */

/* Design tokens ---------------------------------------------------------- */
:root {
    --font-sans: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;

    --color-bg: #ffffff;
    --color-surface: #f7f8fa;
    --color-text: #1a1a1a;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-accent: #0052ff;       /* swap for your brand colour */
    --color-accent-dark: #003fcc;

    --container: 1120px;
    --container-narrow: 720px;
    --radius: 10px;
    --shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Reset / base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.25; font-weight: 700; }

/* Layout ----------------------------------------------------------------- */
.c-site { display: flex; flex-direction: column; min-height: 100vh; }
.c-main { flex: 1 0 auto; }
.c-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}
.c-container--narrow { max-width: var(--container-narrow); }

/* Nav -------------------------------------------------------------------- */
.c-nav {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    position: sticky; top: 0; z-index: 50;
}
.c-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.c-logo__img { max-height: 34px; width: auto; }
.c-logo__text { font-family: var(--font-serif); font-weight: 700; font-size: 22px; color: var(--color-text); }
.c-nav__menu { display: flex; align-items: center; gap: 22px; }
.c-nav__menu .nav { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.c-nav__menu .nav a { color: var(--color-text); font-size: 15px; font-weight: 600; }
.c-nav__menu .nav a:hover { color: var(--color-accent); }
.c-search { font-size: 16px; }
.c-nav__toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; }
.c-nav__toggle span { width: 24px; height: 2px; background: var(--color-text); display: block; }

/* Dropdown (matches reference .dropdown/.dropbtn/.dropdown-content) ------- */
.dropdown { position: relative; }
.dropbtn {
    background: none; border: 0; cursor: pointer; font: 600 15px/1 var(--font-sans);
    color: var(--color-text); display: inline-flex; align-items: center; gap: 4px;
}
.dropdown-content {
    display: none; position: absolute; right: 0; top: 130%;
    background: var(--color-bg); box-shadow: var(--shadow);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    min-width: 180px; padding: 8px 0; z-index: 60;
}
.dropdown-content .nav { flex-direction: column; align-items: stretch; gap: 0; }
.dropdown-content .nav a { padding: 8px 16px; display: block; }
.dropdown-content .nav a:hover { background: var(--color-surface); }
.dropdown.is-open .dropdown-content { display: block; }

/* Intro / archive headers ------------------------------------------------ */
.c-intro, .c-archive { text-align: center; padding: 56px 0 36px; }
.c-intro__title, .c-archive__title { font-size: 40px; margin: 0 0 12px; }
.c-intro__desc, .c-archive__desc { color: var(--color-muted); font-size: 19px; max-width: 620px; margin: 0 auto; }
.c-archive__kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--color-accent); font-weight: 700; margin: 0 0 8px; }
.c-archive__count { color: var(--color-muted); font-size: 14px; margin-top: 10px; }
.c-archive__avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; object-fit: cover; }

/* Post feed grid --------------------------------------------------------- */
.c-post-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 34px;
    padding: 20px 0 40px;
}

/* Teaser card ------------------------------------------------------------ */
.c-teaser {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.c-teaser:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.c-teaser__image { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.c-teaser__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.c-tag { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-accent); margin-bottom: 10px; }
.c-teaser__title { font-size: 22px; margin: 0 0 10px; }
.c-teaser__title a { color: var(--color-text); }
.c-teaser__title a:hover { color: var(--color-accent); }
.c-teaser__excerpt { color: var(--color-muted); font-size: 16px; margin: 0 0 16px; flex: 1; }
.c-teaser__meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--color-muted); flex-wrap: wrap; margin-top: auto; }

/* Single post ------------------------------------------------------------ */
.c-post__header { padding: 48px 0 28px; text-align: center; }
.c-post__tag { color: var(--color-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
.c-post__title { font-size: 44px; margin: 14px 0 16px; }
.c-post__excerpt { font-size: 21px; color: var(--color-muted); margin: 0 auto 22px; max-width: 620px; }
.c-post__meta { display: flex; gap: 16px; align-items: center; justify-content: center; font-size: 14px; color: var(--color-muted); flex-wrap: wrap; }
.c-author { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); }
.c-author__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.c-post__figure { margin: 0 auto 40px; max-width: 1120px; }
.c-post__figure img { width: 100%; border-radius: var(--radius); }
.c-post__figure figcaption { text-align: center; color: var(--color-muted); font-size: 14px; margin-top: 10px; }

/* Post body + TOC layout ------------------------------------------------- */
.c-post__body { position: relative; }

/* Reading content — Noto Serif */
.c-content {
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.75;
}
.c-content > * { margin: 0 0 1.5em; }
.c-content h2 { font-size: 30px; margin: 1.8em 0 .6em; scroll-margin-top: 90px; }
.c-content h3 { font-size: 24px; margin: 1.6em 0 .5em; scroll-margin-top: 90px; }
.c-content img { border-radius: var(--radius); margin: 1.8em auto; }
.c-content figcaption { text-align: center; color: var(--color-muted); font-size: 15px; font-family: var(--font-sans); }
.c-content blockquote { border-left: 3px solid var(--color-accent); margin-left: 0; padding-left: 20px; color: var(--color-muted); font-style: italic; }
.c-content pre { background: #0d1117; color: #e6edf3; padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; font-size: 15px; font-family: monospace; }
.c-content code { font-family: monospace; background: var(--color-surface); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.c-content pre code { background: none; padding: 0; }
.c-content a { text-decoration: underline; }

/* Kg bookmark card (Ghost Koenig) ---------------------------------------- */
.kg-card.kg-bookmark-card,
.kg-bookmark-card { width: 100%; margin: 1.8em 0; font-family: var(--font-sans); }
.kg-bookmark-container {
    display: flex; min-height: 148px;
    color: var(--color-text);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg);
}
.kg-bookmark-container:hover { box-shadow: var(--shadow); }
.kg-bookmark-content { flex: 1 1 60%; display: flex; flex-direction: column; justify-content: flex-start; padding: 20px; overflow: hidden; }
.kg-bookmark-title { font-weight: 700; font-size: 16px; color: var(--color-text); line-height: 1.4; }
.kg-bookmark-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-size: 14px; color: var(--color-muted); line-height: 1.5; }
.kg-bookmark-metadata { display: flex; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--color-text); }
.kg-bookmark-icon { width: 18px; height: 18px; margin-right: 8px; border-radius: 3px; }
.kg-bookmark-author { font-weight: 600; }
.kg-bookmark-author::after { content: "•"; margin: 0 6px; color: var(--color-muted); }
.kg-bookmark-publisher { color: var(--color-muted); overflow: hidden; max-width: 240px; white-space: nowrap; text-overflow: ellipsis; }
.kg-bookmark-thumbnail { position: relative; flex: 1 1 33%; min-width: 33%; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
    .kg-bookmark-container { flex-direction: column-reverse; }
    .kg-bookmark-thumbnail { min-height: 160px; }
}

/* Kg gallery (Ghost Koenig) — flex ratio set by JS */
.kg-gallery-container { display: flex; flex-direction: column; gap: 10px; margin: 1.8em 0; }
.kg-gallery-row { display: flex; gap: 10px; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.kg-width-wide { max-width: 1120px; margin-left: 50%; transform: translateX(-50%); }
.kg-width-full { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Table of contents (tocbot) -------------------------------------------- */
.c-toc { margin: 0 0 32px; padding: 18px 20px; background: var(--color-surface); border-radius: var(--radius); }
.c-toc__title { font-family: var(--font-sans); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin: 0 0 8px; }
.toc-list { list-style: none; margin: 0; padding-left: 0; font-family: var(--font-sans); font-size: 15px; }
.toc-list .toc-list { padding-left: 16px; }
.toc-link { color: var(--color-muted); display: block; padding: 4px 0; }
.toc-link.is-active-link { color: var(--color-accent); font-weight: 600; }
@media (min-width: 1080px) {
    .c-toc {
        position: sticky; top: 90px;
        float: right; width: 240px; margin: 6px 0 24px 40px;
    }
}

/* Share ------------------------------------------------------------------ */
.c-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 48px 0; padding-top: 24px; border-top: 1px solid var(--color-border); font-family: var(--font-sans); }
.c-share__label { font-weight: 700; font-size: 14px; }
.c-share__link { font-size: 14px; font-weight: 600; color: var(--color-muted); background: none; border: 0; cursor: pointer; }
.c-share__link:hover { color: var(--color-accent); }

/* Related ---------------------------------------------------------------- */
.c-related { background: var(--color-surface); padding: 48px 0; margin-top: 60px; }
.c-related__title { text-align: center; font-size: 28px; margin: 0 0 10px; }

/* Pagination ------------------------------------------------------------- */
.c-pagination { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px 0 70px; font-family: var(--font-sans); }
.c-pagination__link { font-weight: 600; }
.page-number { color: var(--color-muted); font-size: 14px; }
.c-pagination__more {
    display: inline-block; cursor: pointer;
    background: var(--color-accent); color: #fff; border: 0;
    font: 600 15px/1 var(--font-sans);
    padding: 14px 28px; border-radius: 999px;
}
.c-pagination__more:hover { background: var(--color-accent-dark); }

/* Footer ----------------------------------------------------------------- */
.c-footer { background: #0d1117; color: #c9d1d9; margin-top: 60px; }
.c-footer__inner { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; padding-top: 48px; padding-bottom: 32px; }
.c-footer__logo { max-height: 32px; }
.c-footer__desc { color: #8b949e; max-width: 320px; font-size: 15px; }
.c-footer__nav .nav { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.c-footer__nav .nav a { color: #c9d1d9; font-size: 15px; }
.c-social { display: flex; gap: 10px; }
.c-social__link { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.c-footer__legal { border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #8b949e; }
.c-footer__legal .c-container { display: flex; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; gap: 8px; }

/* Error ------------------------------------------------------------------ */
.c-error { text-align: center; padding: 100px 0; }
.c-error__code { font-size: 88px; margin: 0; color: var(--color-accent); }
.c-btn { display: inline-block; background: var(--color-accent); color: #fff; padding: 12px 26px; border-radius: 999px; font-weight: 600; margin-top: 18px; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 700px) {
    .c-post__title { font-size: 32px; }
    .c-intro__title, .c-archive__title { font-size: 30px; }
    .c-content { font-size: 18px; }
    .c-nav__menu { position: fixed; inset: 68px 0 auto 0; background: var(--color-bg); flex-direction: column; align-items: flex-start; padding: 20px; border-bottom: 1px solid var(--color-border); display: none; }
    .c-nav__menu.is-open { display: flex; }
    .c-nav__menu .nav { flex-direction: column; align-items: flex-start; gap: 14px; }
    .c-nav__toggle { display: flex; }
}