/*
 * NewPress 2.0 — main stylesheet (assets/css/style.css)
 * Bootstrap-first. Every custom class below exists because
 * Bootstrap 5.3 cannot express it — reason given per block.
 * Fonts (@font-face Noto Sans Georgian) live in assets/fonts/fonts.css.
 */

/* ── Broadsheet tokens ── */
:root {
    --ink:   #111417;   /* text */
    --rule:  #d9d9d6;   /* hairlines */
    --muted: #6c6f73;   /* bylines, deks */
    --brand: #0090C4;   /* timestamps, live links, tag links */
    --brand-dark: #006E96;
}

/* Base: Noto Sans Georgian is the only typeface on the site */
body { font-family: 'Noto Sans Georgian', sans-serif; color: var(--ink); }

/* Headline links: ink, not blue; underline only on hover (SFC pattern).
   Bootstrap link utilities can't combine "inherit color + hover underline". */
a, a.hl { 
   color: var(--brand-dark); text-decoration: none; transition: color .2s ease, text-decoration-color .2s ease; }
a.hl:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Brand accents (Bootstrap's .text-primary is #0d6efd, not our cyan) */
.brand-accent { color: var(--brand); }
a.brand-accent:hover { color: var(--brand-dark); }

/* ── Masthead double rule — classic broadsheet: thick over thin.
   No Bootstrap utility produces a double horizontal rule. ── */
.masthead-rule { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 6px; }

/* ── Responsive hairline column dividers — Bootstrap borders are not
   responsive, and we need them only from lg up. ── */
@media (min-width: 992px) {
    .border-lg-end { border-right: 1px solid var(--rule); }
}

/* Hairlines everywhere else reuse Bootstrap .border-* with this color */
.border, .border-top, .border-bottom, .border-end, .border-start, hr { border-color: var(--rule) !important; }
hr { opacity: 1; }

/* ── Section label: small label sitting ON the rule (SFC section
   bands). Requires a pseudo-element line — not expressible in utilities. ── */
.section-label { position: relative; }
.section-label::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ink); }
.section-label span { position: relative; z-index: 1; background: #fff; padding-right: .75rem; font-weight: 700; letter-spacing: .06em; }

/* Georgian has no capitals — letter-spacing stands in for small caps in labels */
.label-track { letter-spacing: .08em; }

/* Keyboard focus visible on ink links (quality floor) */
a.hl:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Search overlay — full-screen pattern, not covered by Bootstrap ── */
.openBtn { background: transparent; border: none; padding: 4px; color: rgba(255,255,255,.75); }
.openBtn:hover { color: #fff; }
.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; }