/*
 * HaiberDyn blog — dark mode only
 * Bg: #070910 | Amber: #E8A84C | Teal: #3ECFBF
 * Fonts: IBM Plex Sans (UI) · Source Serif 4 (body) · IBM Plex Mono (code)
 */

/* ── Fonts ──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,300;1,8..60,400&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    --hd-bg:           #070910;
    --hd-amber:        #D4943C;
    --hd-amber-bright: #E8A84C;
    --hd-teal:         #3ECFBF;
    --hd-white:        #FFFFFF;
    --hd-white-90:     rgba(255,255,255,0.9);
    --hd-white-70:     rgba(255,255,255,0.7);
    --hd-amber-dim:    rgba(232,168,76,0.12);
    --hd-teal-dim:     rgba(62,207,191,0.10);
    --hd-gradient:     linear-gradient(135deg, #E8A84C, #3ECFBF);

    /* Dark palette — always applied */
    --primary-color:            var(--hd-amber-bright);
    --background-color:         var(--hd-bg);
    --bg-0:                     #0e1117;
    --bg-1:                     #151923;
    --bg-2:                     #050709;
    --bg-3:                     #1e2535;
    --text-color:               var(--hd-white-90);
    --text-color-high-contrast: var(--hd-white);
}

/* ── Typography ─────────────────────────────────────────────────────────── */
body {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 300;
    line-height: 1.85;
    font-size: 1.1rem;
}

h1, h2, h3, h4, h5, h6,
nav, header, footer, .meta, .tag, button, input, label {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

code, pre, kbd, samp {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

/* ── Gradient text — nav name and banner only ───────────────────────────── */
.rainbow,
.nav-name,
#home-banner-header {
    background: var(--hd-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Keep gradient on nav-name through hover */
.home-title:hover .nav-name {
    background: var(--hd-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Nav logo ────────────────────────────────────────────────────────────── */
.home-title {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none !important;
    line-height: 1.2;
    gap: 1px;
}

.nav-name {
    display: block;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nav-tagline {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.72);
}

/* ── Hide banner text, keep layout so image stays right ─────────────────── */
#home-banner-text {
    visibility: hidden !important;
}

/* ── Hide the redundant section title above post listing ────────────────── */
#posts-list .section-title {
    display: none;
}

/* ── Kill ALL hover background boxes ────────────────────────────────────── */
a:hover,
a:focus,
.card:hover,
.nav-links:hover,
.home-title:hover,
.tag a:hover {
    background-color: transparent !important;
    background-image: none !important;
}

/* ── Links — colour shift only, no boxes ────────────────────────────────── */
a, a:visited {
    color: var(--hd-amber-bright);
    text-decoration: none;
}

a:hover {
    color: var(--hd-teal);
    transition: color 0.2s ease;
}

/* Post title links — teal on hover */
h2 a:hover,
h3 a:hover,
.post-title a:hover {
    color: var(--hd-teal) !important;
    -webkit-text-fill-color: var(--hd-teal) !important;
}

/* ── Gradient dividers ───────────────────────────────────────────────────── */
hr, .section-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, var(--hd-amber-dim), var(--hd-teal-dim), transparent 80%);
    margin: 2rem 0;
}

/* ── Tags — teal accent ─────────────────────────────────────────────────── */
.tag a {
    color: var(--hd-teal);
}

/* ── Strong — amber ─────────────────────────────────────────────────────── */
strong {
    color: var(--hd-amber-bright);
    font-weight: 500;
}

/* ── Round profile image with rainbow gradient ring ─────────────────────── */
#banner-home-img {
    border-radius: 50%;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--hd-bg), var(--hd-bg)) padding-box,
        linear-gradient(135deg, var(--hd-amber-bright), var(--hd-teal)) border-box;
    box-shadow: 0 0 28px rgba(62,207,191,0.15), 0 0 14px rgba(232,168,76,0.15);
}

/* ── Selection ───────────────────────────────────────────────────────────── */
::selection {
    background: rgba(62, 207, 191, 0.2);
    color: var(--hd-white);
}