/*
 * NewPress — main stylesheet (v0.1)
 * Bootstrap-first: custom classes exist ONLY where Bootstrap 5.3
 * cannot do it. Every custom block carries a comment explaining why.
 */

/* ── Fonts: Noto Sans Georgian, self-hosted variable woff2 ─────────
   Single variable file covers weights 400–700 (one request instead
   of three). Georgian subset preloaded in header.php; Latin subset
   loads on demand via unicode-range. */
@font-face {
    font-family: 'Noto Sans Georgian';
    src: url('../fonts/NotoSansGeorgian/NotoSansGeorgian-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F, U+0589, U+205A, U+2E31;
}
@font-face {
    font-family: 'Noto Sans Georgian';
    src: url('../fonts/NotoSansGeorgian/NotoSansGeorgian-Variable-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

/* ── Brand tokens ───────────────────────────────────────────────────
   Single source of truth for the brand color. When editorial approves
   the category palette, category colors will be added here. */
:root {
    --brand:      #0090C4;
    --brand-dark: #006E96; /* hover state, WCAG-safe on white */
}

/* ── Base ─────────────────────────────────────────────────────────── */
html, body { scroll-behavior: smooth; font-family: 'Noto Sans Georgian', sans-serif; }
a { transition: .3s all ease; text-decoration: none; }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

/* Article body typography (single.php will rely on this) */
article > p { font-size: 1.2rem; line-height: 170%; }
article * { max-width: 100% !important; }
blockquote { padding: 1rem; margin: 1rem 0; background: #fafafa; border-left: 3px solid var(--brand); }
iframe { max-width: 100% !important; }

/* Brand-colored list bullets in article body — Bootstrap has no
   colored ::marker utility */
article > ul { list-style: none; }
article > ul li::before {
    content: "\2022";
    color: var(--brand);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1.1em;
}
article li { font-size: 1.1rem; line-height: 170%; }

/* ── Brand utility classes ──────────────────────────────────────────
   Bootstrap's .text-primary is blue #0d6efd — we need #0090C4, so we
   define minimal brand equivalents instead of recompiling Bootstrap. */
.brand-accent { color: var(--brand); }
.link-brand   { color: var(--brand); }
.link-brand:hover { color: var(--brand-dark); }
.btn-brand    { background: var(--brand); color: #fff; border: 0; }
.btn-brand:hover { background: var(--brand-dark); color: #fff; }

/* Section title with brand underline on homepage — no Bootstrap
   equivalent for a partial-width accent border */
.section-title { border-bottom: 2px solid #eee; }
.section-title h4 a { border-bottom: 3px solid var(--brand); padding-bottom: .4rem; display: inline-block; margin-bottom: -2px; }

/* ── Navbar ─────────────────────────────────────────────────────────*/
.nav-link { font-weight: 600; margin-right: 1.5rem; }
.navbar-nav .nav-link { color: #111; }
.navbar-nav .nav-link:hover { color: var(--brand); }

/* ── Search overlay ─────────────────────────────────────────────────
   Full-screen overlay pattern — not covered by Bootstrap components */
.openBtn { background: transparent; border: none; padding: 4px; color: #111; }
.openBtn:hover { color: var(--brand); }
.overlay {
    height: 100%; width: 100%;
    display: none;
    position: fixed;
    z-index: 1050;
    top: 0; left: 0;
    background-color: rgba(255, 255, 255, .97);
}
.overlay-content { position: relative; top: 40%; width: 80%; text-align: center; margin: auto; }
.overlay .closebtn {
    position: absolute;
    top: 20px; right: 45px;
    font-size: 60px;
    cursor: pointer;
    color: #111;
}
.overlay input[type="search"] {
    padding: 15px; font-size: 17px;
    border: none; border-bottom: 2px solid var(--brand);
    background: transparent;
    width: 80%;
}
.overlay input[type="search"]:focus { outline: none; }
.overlay button {
    padding: 15px; font-size: 17px;
    border: none; background: transparent;
    color: var(--brand); cursor: pointer;
}

/* ── Footer ─────────────────────────────────────────────────────────*/
.footer a { color: #ccc; }
.footer a:hover { color: #fff; }
.footer .item { padding: .15rem 0; }
.social-container { max-width: 240px; }
.social-inner { display: inline-block; padding: .5rem; }

/* ── Back to top ────────────────────────────────────────────────────*/
.back-to-top { display: inline-block; }