/* Global Stylesheet */

/* ===== Reset & Base ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* Blend of rem (zoom-responsive) + vw (viewport-responsive)
       → ~14.4px at 1440px viewport, scales with screen size AND browser zoom */
    font-size: calc(0.9rem + 0.2vw);
    scrollbar-color: #cc0000 #000000;
}

body {
    background-color: #000000;
    color: #cc0000;
    font-family: 'Courier New', Consolas, 'Lucida Console', monospace;
    line-height: 1.75;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Color ===== */
.green-text {
    color: #00cc00;
}

.red-text {
    color: #cc0000;
}

/* ===== Selection ===== */
/* Red body text → selected as green on white */
::selection {
    background-color: #ffffff;
    color: #00cc00;
}

/* Green links → selected as red on white */
a::selection {
    background-color: #ffffff;
    color: #cc0000;
}

/* Green-text class → selected as red on white */
.green-text::selection {
    background-color: #ffffff;
    color: #cc0000;
}

/* Red-text class → selected as green on white */
.red-text::selection {
    background-color: #ffffff;
    color: #00cc00;
}

/* ===== Scrollbar (Webkit) ===== */
::-webkit-scrollbar {
    width: 0.625rem;
}

::-webkit-scrollbar-track {
    background: #000000;
}

::-webkit-scrollbar-thumb {
    background: #cc0000;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff0000;
}

/* ===== Links ===== */
a {
    color: #00cc00;
    outline: none;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: none;
    color: #000000;
    outline: none;
    text-decoration: none;
    background-color: #00cc00;
    padding: 0.2rem 0.4rem;
    margin: 0 -0.4rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

a:visited {
    color: #009900;
}

a:visited:hover {
    color: #000000;
    background-color: #00cc00;
    padding: 0.2rem 0.4rem;
    margin: 0 -0.4rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.feed-links {
    margin-top: -1.5rem;
    display: flex;
    gap: 1.25rem;
}

.rss-link {
    font-size: 0.805rem;
}

.rss-link:hover,
.rss-link:focus-visible,
.rss-link:visited:hover {
    margin: -0.2rem -0.4rem;
}

/* ===== Lists ===== */
ul {
    padding-left: 2rem;
}

ol {
    padding-left: 3rem;
}

/* ===== Header / Navigation ===== */
header {
    border-bottom: 1px solid #cc0000;
    padding: 1rem 2rem;
}

nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

nav .site-name {
    color: #cc0000;
    font-weight: bold;
    font-size: 1.2rem;
    margin-right: 1rem;
}

nav .nav-options {
    color: #cc0000;
    font-size: 0.95rem;
    box-shadow: none;
}

nav a {
    position: relative;
    z-index: 0;
}

nav a::before {
    content: '';
    position: absolute;
    inset: -0.2rem -0.4rem;
    background-color: transparent;
    z-index: -1;
    pointer-events: none;
}

nav a:hover, nav a:focus-visible, nav a:visited:hover {
    color: #000000;
    text-decoration: none;
    background-color: transparent;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    z-index: 2;
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
}

nav .site-name:hover, nav .site-name:focus-visible, nav .site-name:visited:hover {
    margin-right: 1rem;
}

nav a:hover::before,
nav a:focus-visible::before,
nav a:visited:hover::before {
    background-color: #cc0000;
}

nav a.active {
    color: #cc0000;
    text-decoration: none;
}

/* ===== Main Content ===== */
main {
    flex: 1;
    padding: 2rem;
    max-width: 55%;
    width: 100%;
    margin: 0 auto;
}

body.home main {
    max-width: 56.25rem;
}

body.contact main {
    max-width: 40rem;
}

/* ===== Footer ===== */
footer {
    /* border-top: 1px solid #cc0000; */
    padding: 1rem 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: #cc0000;
}

/* ===== About ===== */
.avatar {
    width: 7.5rem;
    height: 7.5rem;
    /* border: 2px solid #cc0000; */
}

/* ===== Container ===== */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.container h1 {
    font-size: 1.8rem;
}

.container .article-text {
    width: 100%;
    text-align: left;
}

body.home .container .article-text {
    max-width: 37.5rem;
    width: auto;
}

/* ===== Page Headings ===== */
h1, h2, h3 {
    color: #cc0000;
    margin-bottom: 0.5rem;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

/* ===== Blog Listing ===== */
.blog-list {
    width: 100%;
}

.blog-entry {
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

.blog-entry a {
    font-size: 1rem;
}


.blog-entry span {
    margin-left: 1rem;
    font-size: 0.8rem;
}

/* ===== Blog Post ===== */
.container.post h1,
.container.post .post-date {
    width: 100%;
    text-align: left;
}

.container.post .post-date {
    margin-top: -1rem;
}

.post-date {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.article-text blockquote {
    border-left: 3px solid #cc0000;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #999999;
}

.article-text pre {
    background: #080808;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
    position: relative;
}

.article-text pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    font-size: 0.7rem;
    color: #888888;
    text-transform: lowercase;
    pointer-events: none;
}

.article-text code {
    background: #080808;
    padding: 0.1rem 0.3rem;
    color: #cc0000;
}

.article-text pre code {
    background: none;
    padding: 0;
    color: #cc0000;
}

.article-text code .hl-string { color: #cc0000; }
.article-text code .hl-comment { color: #717171; font-style: italic; }
.article-text code .hl-keyword { color: #00cc00; }
.article-text code .hl-punctuation { color: #00cc00; }
.article-text code .hl-number { color: #cc0000; }

.article-text hr {
    border: none;
    border-top: 1px solid #333333;
    margin: 1rem 0;
}

.article-text ul,
.article-text ol {
    margin: 1rem 0;
}

.article-text p {
    margin: 1rem 0;
}

.article-text h1,
.article-text h2,
.article-text h3,
.article-text h4,
.article-text h5,
.article-text h6 {
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
}

/* Headings act as self-anchors: keep them visually like normal headings,
   no hover effect — clicking still navigates to the anchor. */
.article-text h1 a,
.article-text h2 a,
.article-text h3 a,
.article-text h4 a,
.article-text h5 a,
.article-text h6 a,
.article-text h1 a:hover,
.article-text h2 a:hover,
.article-text h3 a:hover,
.article-text h4 a:hover,
.article-text h5 a:hover,
.article-text h6 a:hover,
.article-text h1 a:visited:hover,
.article-text h2 a:visited:hover,
.article-text h3 a:visited:hover,
.article-text h4 a:visited:hover,
.article-text h5 a:visited:hover,
.article-text h6 a:visited:hover,
.article-text h1 a:focus-visible,
.article-text h2 a:focus-visible,
.article-text h3 a:focus-visible,
.article-text h4 a:focus-visible,
.article-text h5 a:focus-visible,
.article-text h6 a:focus-visible {
    color: inherit;
    background-color: transparent;
    padding: 0;
    margin: 0;
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
}

/* The first element inside the post body shouldn't add extra top space
   on top of the container's flex gap between it and the date. */
.article-text > *:first-child {
    margin-top: 0;
}

.container.post .article-text {
    margin-top: -0.5rem;
}

.article-text img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Photoshop Colorize equivalent: brightness() darkens the image (lightness
   offset), then the ::after overlay with mix-blend-mode: color paints uniform
   hue + saturation while preserving the image's luminosity. */
.article-text .img-tint {
    display: block;
    position: relative;
    isolation: isolate;
    margin: 0 auto;
    width: max-content;
    max-width: 100%;
    /* matches page bg so transparent PNG pixels don't pick up the green overlay */
    background: #000000;
}

.article-text .img-tint img {
    filter: brightness(0.35);
}

.article-text .img-tint::after {
    content: '';
    position: absolute;
    inset: 0;
    background: hsl(114, 100%, 50%);
    mix-blend-mode: color;
    pointer-events: none;
}

/* ===== Responsive - Mobile ===== */
@media (max-width: 600px) {

    header {
        padding: 0.75rem 1rem;
    }

    nav {
        gap: 0.75rem;
        justify-content: center;
    }

    nav .site-name {
        width: 100%;
        text-align: center;
        margin-right: 0;
    }

    main {
        padding: 1.5rem 1rem;
        max-width: 90%;
    }

    body.home main {
        max-width: 56.25rem;
    }

    .avatar {
        width: 6.25rem;
        height: 6.25rem;
    }

    .about h1 {
        font-size: 1.4rem;
    }

    footer {
        padding: 0.75rem 1rem;
    }
}