/* ============================================================
   MATRIX HACKER THEME — zethr.us
   Complete responsive rewrite with hero canvas support
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
    --mg:        #00FF00;   /* matrix green */
    --mg-dim:    #00CC00;
    --mg-dark:   #008F11;
    --mg-faint:  #003300;
    --bg:        #000000;
    --bg-1:      #0a0a0a;
    --bg-2:      #111111;
    --bg-3:      #1a1a1a;
    --bg-4:      #222222;
    --txt:       #c8ffc8;
    --txt-dim:   #7acc7a;
    --txt-muted: #3d6b3d;
    --radius:    6px;
    --glow-s:    0 0 8px  rgba(0,255,0,.4);
    --glow-m:    0 0 16px rgba(0,255,0,.5);
    --glow-l:    0 0 30px rgba(0,255,0,.6);
    --font:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    --transition: 0.25s cubic-bezier(.4,0,.2,1);
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--bg) !important;
    color: var(--txt) !important;
    font-family: var(--font) !important;
    line-height: 1.65 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Global Background Canvas (full-page subtle rain) ─────── */
#matrixBg {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -3 !important;
    pointer-events: none !important;
    opacity: 0.07 !important;
}

/* ── CRT Vignette ─────────────────────────────────────────── */
#crtOverlay {
    position: fixed !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at center,
        transparent 55%, rgba(0,0,0,.75) 100%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* ── Scanlines ────────────────────────────────────────────── */
#scanlines {
    position: fixed !important;
    inset: 0 !important;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.12) 0px,
        rgba(0,0,0,.12) 1px,
        transparent 1px,
        transparent 3px
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* ── Links ────────────────────────────────────────────────── */
a {
    color: var(--mg) !important;
    text-decoration: none !important;
    transition: color var(--transition), text-shadow var(--transition) !important;
}
a:hover {
    color: var(--mg-dim) !important;
    text-shadow: var(--glow-s) !important;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.gh-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(0,0,0,.92) !important;
    border-bottom: 1px solid var(--mg-dark) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Make the inner a proper flex row */
.gh-head-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    height: 56px !important;
    gap: 1rem !important;
}

/* ── Brand / Logo ─────────────────────────────────────────── */
.gh-head-brand {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
}

.gh-head-logo {
    color: var(--mg) !important;
    font-family: var(--font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
    text-shadow: var(--glow-s) !important;
}

/* ── Nav Menu ─────────────────────────────────────────────── */
.gh-head-menu {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

.gh-head-menu .nav {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: .4rem !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.gh-head-menu .nav li { margin: 0 !important; }

.gh-head-menu .nav a {
    color: var(--txt) !important;
    font-family: var(--font) !important;
    font-size: .78rem !important;
    padding: .3rem .75rem !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    background: transparent !important;
    transition: all var(--transition) !important;
    white-space: nowrap !important;
    display: block !important;
}

.gh-head-menu .nav a:hover,
.gh-head-menu .nav-current a {
    background: var(--mg-dark) !important;
    color: var(--bg) !important;
    border-color: var(--mg) !important;
    box-shadow: var(--glow-s) !important;
}

/* ── Header Actions (search + subscribe) ─────────────────── */
.gh-head-actions {
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    flex-shrink: 0 !important;
}

/* Unify all header buttons */
.gh-search,
.gh-icon-btn,
.gh-head-button,
.gh-head-link {
    background: transparent !important;
    color: var(--txt) !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    padding: .3rem .65rem !important;
    font-family: var(--font) !important;
    font-size: .78rem !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .3rem !important;
    cursor: pointer !important;
    transition: all var(--transition) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

.gh-search:hover,
.gh-icon-btn:hover,
.gh-head-button:hover,
.gh-head-link:hover {
    background: var(--mg-dark) !important;
    color: var(--bg) !important;
    border-color: var(--mg) !important;
    box-shadow: var(--glow-s) !important;
}

.gh-icon-btn svg {
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

/* Burger (mobile) */
.gh-burger {
    background: transparent !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    color: var(--txt) !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 6px !important;
}

.gh-burger::before,
.gh-burger::after,
.gh-burger span {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background: var(--mg) !important;
    transition: all var(--transition) !important;
}

/* Head members container — prevent overflow */
.gh-head-members {
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

/* Wrapper that Ghost outputs around the hero */
.site-header-content,
.gh-canvas.site-header-content,
.home-template .site-header-content {
    position: relative !important;
    width: calc(100% - 3rem) !important;
    max-width: 860px !important;
    margin: 2.5rem auto !important;
    padding: 0 !important;
    background: rgba(0,8,0,.85) !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow:
        0 0 0 1px rgba(0,255,0,.08),
        0 0 40px rgba(0,255,0,.12) !important;
}

/* Hero canvas (matrix rain local to hero) */
#heroCanvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.22 !important;
    border-radius: 10px !important;
}

/* Cover image — hide it, we use canvas */
.site-header-cover {
    display: none !important;
}

/* Inner text content sits above canvas */
.site-header-inner {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 2.5rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .75rem !important;
}

/* Terminal prompt badge */
.site-header-inner::before {
    content: 'zethrus@zethr.us:~$ ./init_portfolio --secure' !important;
    display: inline-block !important;
    color: var(--mg-dim) !important;
    font-family: var(--font) !important;
    font-size: .72rem !important;
    background: rgba(0,0,0,.7) !important;
    padding: .35rem .75rem !important;
    border-radius: 4px !important;
    border: 1px solid var(--mg-faint) !important;
    letter-spacing: .06em !important;
    
    margin-bottom: .25rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

    95%            { opacity: 0; }
}

/* Site title */
.site-title {
    color: var(--mg) !important;
    font-family: var(--font) !important;
    font-size: clamp(1.75rem, 5vw, 2.8rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    text-shadow: 0 0 12px rgba(0,255,0,.55), 0 0 24px rgba(0,255,0,.25) !important;
    margin: 0 !important;
    word-break: break-word !important;
    animation: title-pulse 5s ease-in-out infinite !important;
}

@keyframes title-pulse {
    0%, 100% { text-shadow: 0 0 12px rgba(0,255,0,.55), 0 0 24px rgba(0,255,0,.25); }
    50%       { text-shadow: 0 0 18px rgba(0,255,0,.75), 0 0 36px rgba(0,255,0,.4);  }
}

/* Site description */
.site-description {
    color: var(--txt-dim) !important;
    font-family: var(--font) !important;
    font-size: clamp(.85rem, 2.2vw, 1.05rem) !important;
    line-height: 1.65 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    word-break: break-word !important;
}

/* CTA button(s) inside hero */
.site-header-cta a,
.site-header-cta-btn {
    display: inline-block !important;
    background: var(--mg-dark) !important;
    color: var(--bg) !important;
    border: 1px solid var(--mg) !important;
    border-radius: var(--radius) !important;
    padding: .55rem 1.4rem !important;
    font-family: var(--font) !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    transition: all var(--transition) !important;
    cursor: pointer !important;
    margin-top: .5rem !important;
}

.site-header-cta a:hover,
.site-header-cta-btn:hover {
    background: var(--mg) !important;
    box-shadow: var(--glow-m) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.site-content {
    width: 100% !important;
    overflow-x: hidden !important;
}

.site-main,
.gh-main {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    width: 100% !important;
}

/* ── Post Feed Grid ───────────────────────────────────────── */
.post-feed {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
    gap: 1.4rem !important;
    margin-top: 2rem !important;
}

/* ── Post Cards ───────────────────────────────────────────── */
.gh-post-card,
.post-card {
    background: linear-gradient(160deg, var(--bg-3) 0%, var(--bg-2) 100%) !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all var(--transition) !important;
    position: relative !important;
}

.gh-post-card::after,
.post-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    top: auto !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--mg), transparent) !important;
    opacity: 0 !important;
    transition: opacity var(--transition) !important;
}

.gh-post-card:hover,
.post-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--mg) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.6), var(--glow-s) !important;
}

.gh-post-card:hover::after,
.post-card:hover::after { opacity: 1 !important; }

.gh-post-card-content,
.post-card-content {
    padding: 1.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.gh-post-card-title,
.post-card-title {
    color: var(--mg) !important;
    font-family: var(--font) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 0 .6rem 0 !important;
}

.gh-post-card-excerpt,
.post-card-excerpt {
    color: var(--txt-dim) !important;
    font-size: .9rem !important;
    line-height: 1.65 !important;
    flex: 1 !important;
    margin-bottom: 1rem !important;
}

.gh-post-card-meta,
.post-card-meta {
    color: var(--txt-muted) !important;
    font-size: .75rem !important;
    letter-spacing: .02em !important;
}

/* Featured image */
.gh-post-card-image,
.post-card-image-link img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    display: block !important;
    border-bottom: 1px solid var(--mg-dark) !important;
    filter: brightness(.85) saturate(.9) !important;
    transition: filter var(--transition) !important;
}

.gh-post-card:hover .gh-post-card-image,
.post-card:hover .post-card-image-link img {
    filter: brightness(1) saturate(1.05) !important;
}

/* ── Article / Single Post ────────────────────────────────── */
.gh-article,
.single-article {
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
}

.gh-article-header { margin-bottom: 2rem !important; }

.gh-article-title,
.article-title {
    color: var(--mg) !important;
    font-family: var(--font) !important;
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: var(--glow-s) !important;
    word-break: break-word !important;
    margin: 0 0 1rem 0 !important;
}

.gh-article-meta { color: var(--txt-muted) !important; font-size: .82rem !important; }

/* Article body text */
.gh-content,
.article-content {
    color: var(--txt) !important;
    font-family: var(--font) !important;
    font-size: 1rem !important;
    line-height: 1.85 !important;
}

.gh-content h1, .gh-content h2, .gh-content h3,
.gh-content h4, .gh-content h5, .gh-content h6 {
    color: var(--mg) !important;
    font-family: var(--font) !important;
    text-shadow: var(--glow-s) !important;
    margin-top: 2rem !important;
}

.gh-content p  { color: var(--txt) !important; }
.gh-content li { color: var(--txt) !important; }

.gh-content a {
    color: var(--mg-dim) !important;
    border-bottom: 1px dashed var(--mg-dark) !important;
    text-decoration: none !important;
}

.gh-content a:hover {
    color: var(--mg) !important;
    border-bottom-style: solid !important;
}

/* Code blocks */
.gh-content pre,
.gh-content code {
    background: var(--bg-2) !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font) !important;
    color: var(--mg-dim) !important;
}

.gh-content pre {
    padding: 1.25rem !important;
    overflow-x: auto !important;
}

.gh-content code {
    padding: .15em .4em !important;
    font-size: .9em !important;
}

/* Blockquote */
.gh-content blockquote {
    border-left: 3px solid var(--mg-dark) !important;
    padding-left: 1.25rem !important;
    color: var(--txt-dim) !important;
    background: var(--bg-2) !important;
    margin: 1.5rem 0 !important;
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

/* ── Tags ─────────────────────────────────────────────────── */
.gh-tags .tag,
.tag-item {
    background: var(--bg-3) !important;
    color: var(--mg-dim) !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    padding: .2rem .65rem !important;
    font-size: .75rem !important;
    font-family: var(--font) !important;
    transition: all var(--transition) !important;
}

.gh-tags .tag:hover,
.tag-item:hover {
    background: var(--mg-dark) !important;
    color: var(--bg) !important;
    box-shadow: var(--glow-s) !important;
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination,
.gh-pagination {
    display: flex !important;
    justify-content: center !important;
    gap: .75rem !important;
    margin: 3rem 0 !important;
    flex-wrap: wrap !important;
}

.pagination a,
.gh-pagination a,
.older-posts,
.newer-posts {
    background: var(--bg-3) !important;
    color: var(--txt) !important;
    border: 1px solid var(--mg-dark) !important;
    padding: .55rem 1.25rem !important;
    border-radius: var(--radius) !important;
    font-family: var(--font) !important;
    font-size: .82rem !important;
    transition: all var(--transition) !important;
}

.pagination a:hover,
.gh-pagination a:hover,
.older-posts:hover,
.newer-posts:hover {
    background: var(--mg-dark) !important;
    color: var(--bg) !important;
    border-color: var(--mg) !important;
    box-shadow: var(--glow-s) !important;
}

/* ── Search Modal ─────────────────────────────────────────── */
.gh-search-modal {
    background: var(--bg-1) !important;
    border: 2px solid var(--mg-dark) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 60px rgba(0,255,0,.25) !important;
    overflow: hidden !important;
    max-width: 600px !important;
    width: 92% !important;
    margin: 0 auto !important;
}

.gh-search-input {
    background: var(--bg-1) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mg-dark) !important;
    color: var(--mg) !important;
    font-family: var(--font) !important;
    font-size: 1.05rem !important;
    padding: 1rem 1.25rem !important;
    width: 100% !important;
    outline: none !important;
}

.gh-search-input::placeholder { color: var(--txt-muted) !important; }
.gh-search-input:focus { border-bottom-color: var(--mg) !important; }

.gh-search-results {
    background: var(--bg-2) !important;
    max-height: 55vh !important;
    overflow-y: auto !important;
}

.gh-search-result {
    border-bottom: 1px solid var(--bg-3) !important;
    padding: .9rem 1.25rem !important;
    transition: background var(--transition) !important;
}

.gh-search-result:hover { background: rgba(0,255,0,.05) !important; }

/* ── Newsletter / Subscribe ───────────────────────────────── */
.subscribe-form,
.gh-subscribe {
    background: var(--bg-2) !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: 10px !important;
    padding: 2rem !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.subscribe-form::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--mg), transparent) !important;
}

/* ── Generic forms / inputs ───────────────────────────────── */
input:not([class*="ghost"]):not([class*="portal"]):not([class*="gh-search"]),
textarea:not([class*="ghost"]):not([class*="portal"]),
select:not([class*="ghost"]):not([class*="portal"]) {
    background: var(--bg-1) !important;
    color: var(--mg) !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    padding: .55rem .85rem !important;
    font-family: var(--font) !important;
    font-size: .9rem !important;
    width: 100% !important;
}

input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--mg) !important;
    box-shadow: 0 0 10px rgba(0,255,0,.25) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: linear-gradient(0deg, var(--bg) 0%, var(--bg-2) 100%) !important;
    border-top: 1px solid var(--mg-dark) !important;
    padding: 2rem 0 2.5rem 0 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Glowing top border pulse */
.site-footer::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important; left: 15% !important; right: 15% !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--mg), transparent) !important;
    animation: footer-glow 4s ease-in-out infinite !important;
}

@keyframes footer-glow {
    0%, 100% { opacity: .3; }
    50%       { opacity: 1; }
}

.site-footer .inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

/* Copyright */
.copyright,
.copyright a {
    color: var(--txt-muted) !important;
    font-family: var(--font) !important;
    font-size: .78rem !important;
    text-decoration: none !important;
}

/* Footer nav */
.site-footer-nav .nav {
    display: flex !important;
    gap: .5rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer-nav .nav a {
    color: var(--txt-dim) !important;
    font-family: var(--font) !important;
    font-size: .75rem !important;
    border: 1px solid var(--mg-dark) !important;
    padding: .3rem .7rem !important;
    border-radius: var(--radius) !important;
    background: transparent !important;
    transition: all var(--transition) !important;
}

.site-footer-nav .nav a:hover {
    background: var(--mg-dark) !important;
    color: var(--bg) !important;
    box-shadow: var(--glow-s) !important;
}

/* Ghost powered-by — single instance, small and muted */
.gh-powered-by,
.gh-powered-by a {
    color: var(--txt-muted) !important;
    font-family: var(--font) !important;
    font-size: .72rem !important;
    opacity: .7 !important;
    text-decoration: none !important;
}

/* Remove the duplicate "Powered by Ghost" injected by ::after hack (old code) */
.site-footer .inner::after { display: none !important; content: '' !important; }

/* ============================================================
   GHOST PORTAL (signin/subscribe modals)
   ============================================================ */
:root {
    --ghost-accent-color: #00FF00 !important;
}

/* Backdrop */
.gh-portal-backdrop,
.ghost-portal-backdrop {
    background: rgba(0,0,0,.9) !important;
    backdrop-filter: blur(6px) !important;
}

/* The popup frame */
.gh-portal-popup-wrapper,
.ghost-portal-popup-frame,
.gh-portal-popup-frame {
    font-family: var(--font) !important;
}

/* Force font & color cascade into the frame via CSS vars */
.gh-portal-popup-container,
.gh-portal-content {
    background: var(--bg-1) !important;
    border: 2px solid var(--mg-dark) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 60px rgba(0,255,0,.2), 0 0 0 1px rgba(0,255,0,.1) !important;
    font-family: var(--font) !important;
    color: var(--txt) !important;
    overflow: hidden !important;
}

/* ============================================================
   UTILITY COMPONENTS
   ============================================================ */
/* Floating labels / badges */
.gh-badge,
.tag-badge {
    background: var(--bg-3) !important;
    color: var(--mg-dim) !important;
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    padding: .2rem .55rem !important;
    font-size: .72rem !important;
    font-family: var(--font) !important;
}

/* Reading progress bar */
.gh-reading-progress,
.reading-progress-bar {
    background: var(--mg) !important;
    height: 2px !important;
    box-shadow: var(--glow-s) !important;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--mg-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mg); }

/* ── Selection ────────────────────────────────────────────── */
::selection { background: rgba(0,255,0,.25) !important; color: var(--mg) !important; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── Large desktop (1400px+) ──────────────────────────────── */
@media (min-width: 1400px) {
    .site-header-content { max-width: 960px !important; }
    .site-main, .gh-main { max-width: 1280px !important; }
    .post-feed { grid-template-columns: repeat(3, 1fr) !important; gap: 1.8rem !important; }
    .site-header-inner { padding: 4rem 3.5rem !important; }
}

/* ── Medium desktop (1024–1399px) ────────────────────────── */
@media (max-width: 1399px) and (min-width: 1025px) {
    .post-feed { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── Tablet (768–1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .site-header-content { width: calc(100% - 2rem) !important; }
    .site-header-inner { padding: 3rem 2rem !important; }
    .post-feed { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Small tablet / large phone (600–767px) ───────────────── */
@media (max-width: 767px) {
    /* Nav: stack menu below brand */
    .gh-head-inner {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: .5rem 1rem !important;
        row-gap: .4rem !important;
    }

    .gh-head-brand  { order: 1; flex: 1 !important; }
    .gh-head-actions { order: 2; }
    .gh-head-menu   { order: 3; width: 100% !important; }

    .gh-head-menu .nav { gap: .3rem !important; }

    .site-header-content {
        width: calc(100% - 1.5rem) !important;
        margin: 1.5rem auto !important;
    }
    .site-header-inner { padding: 2.25rem 1.5rem !important; }

    /* Shorten terminal prompt on small screens */
    .site-header-inner::before {
        font-size: .65rem !important;
        content: 'zethrus@zethr.us:~$ ./init --secure' !important;
    }

    .post-feed { grid-template-columns: 1fr !important; }

    .site-footer .inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    .site-footer-nav .nav { justify-content: center !important; }
}

/* ── Phone (≤ 479px) ──────────────────────────────────────── */
@media (max-width: 479px) {
    .gh-head-inner { padding: .4rem .75rem !important; }

    .gh-head-logo { font-size: .88rem !important; }

    .gh-head-menu .nav a,
    .gh-search, .gh-icon-btn, .gh-head-button, .gh-head-link {
        padding: .28rem .55rem !important;
        font-size: .72rem !important;
        height: 28px !important;
    }

    .site-header-content { width: 100% !important; border-radius: 0 !important; margin: 0 !important; }
    .site-header-inner { padding: 1.75rem 1rem !important; }

    .site-header-inner::before {
        font-size: .6rem !important;
        padding: .3rem .6rem !important;
        content: 'zethrus@zethr.us:~$' !important;
    }

    .site-title { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; }
    .site-description { font-size: .82rem !important; }

    .site-main, .gh-main { padding: 0 .75rem !important; }
    .gh-post-card-content, .post-card-content { padding: 1.1rem !important; }

    .site-footer .inner { padding: 0 .75rem !important; }
}

/* ── Very small (≤ 360px) ─────────────────────────────────── */
@media (max-width: 360px) {
    .site-title { font-size: 1.3rem !important; }
    .gh-head-menu .nav a { font-size: .68rem !important; padding: .25rem .45rem !important; }
}

/* ============================================================
   MISC OVERRIDES — kill Ghost default purple/blue
   ============================================================ */
:root {
    --ghost-accent-color: #00FF00 !important;
}

/* Ghost default card backgrounds */
.kg-card,
.kg-image-card,
.kg-bookmark-card,
.kg-toggle-card {
    border: 1px solid var(--mg-dark) !important;
    border-radius: var(--radius) !important;
    overflow: hidden !important;
    background: var(--bg-2) !important;
}

/* Kill any leftover white backgrounds */
.viewport,
.site-content,
.gh-main,
.site-main,
.inner,
.inner.posts {
    background: transparent !important;
}

/* Make sure the outer wrappers don't clip */
.outer { overflow: visible !important; }

/* Ensure no horizontal overflow anywhere */
.viewport { overflow-x: hidden !important; }

/* ============================================================
   PATCH — sticky footer, centered hero, nav fix, hide page-number
   ============================================================ */

/* 1. Sticky footer — viewport as full-height flex column */
html, body { height: 100% !important; }

.viewport {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.site-content {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.site-footer {
    flex-shrink: 0 !important;
    position: relative !important;   /* override any sticky/fixed from before */
    width: 100% !important;
    margin-top: auto !important;
}

/* 2. Hide page number */
.page-number,
.pagination .page-number,
nav.pagination .page-number {
    display: none !important;
}

/* Also hide the entire pagination nav if it only has the page-number inside */
nav.pagination:empty,
nav.pagination {
    display: none !important;
}

/* 3. Hero — true center in the available space
   The home template wraps the hero in site-header-content.outer
   then site-main follows. We want hero vertically centered in viewport. */

/* Make site-main fill remaining space and center its children */
.home-template .site-main,
.home-template #site-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Hero box: centered horizontally with equal side margins */
.site-header-content,
.home-template .site-header-content {
    width: calc(100% - 4rem) !important;
    max-width: 820px !important;
    margin: 2.5rem auto !important;  /* 2.5rem top/bottom, auto sides */
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* When page has no posts (empty feed), still center nicely */
.home-template .post-feed:empty { display: none !important; }

/* 4. Navbar — fix the is-head-left-logo layout
   Ghost sets left-logo layout where brand is on left, menu center, actions right.
   The burger + search in .gh-head-brand are ONLY for mobile. Hide them on desktop. */

/* On desktop, the .gh-head-inner should be a clean 3-zone row */
.gh-head-inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    height: 56px !important;
    width: 100% !important;
    gap: 0 !important;
}

.gh-head-brand {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    justify-content: flex-start !important;
}

.gh-head-menu {
    grid-column: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: auto !important;
}

.gh-head-actions {
    grid-column: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .45rem !important;
}

/* Hide burger on desktop — it's for mobile only */
@media (min-width: 768px) {
    .gh-burger { display: none !important; }
}

/* 5. Responsive nav overrides — override the earlier flex-wrap rules */
@media (max-width: 767px) {
    .gh-head-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        height: auto !important;
        padding: .5rem 1rem !important;
        gap: .4rem !important;
        align-items: center !important;
    }

    .gh-head-brand  { order: 1 !important; flex: 1 !important; }
    .gh-head-actions { order: 2 !important; }
    .gh-head-menu   {
        order: 3 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* Hero equal margins on tablet */
    .site-header-content,
    .home-template .site-header-content {
        width: calc(100% - 2rem) !important;
        margin: auto 1rem !important;
    }
}

@media (max-width: 479px) {
    .gh-head-inner { padding: .4rem .75rem !important; }

    .site-header-content,
    .home-template .site-header-content {
        width: 100% !important;
        margin: auto 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
}