/* ==========================================================================
   Diary of a Blind American — shared stylesheet
   Used by index.php, support.php, search.php, links.php, and any future pages.
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #000000;
    --text: #d0d0d0;
    --text-dim: #a0a0a0;
    --accent: #007fff;
    --accent-dim: #005fcc;
    --accent-soft: rgba(0, 127, 255, 0.15);
    --visited: #4169e1;
    --success: #22c55e;
    --success-dim: #16a34a;
    --success-soft: rgba(34, 197, 94, 0.15);
    --warning: #ff5252;
    --warning-soft: rgba(255, 82, 82, 0.12);
    --panel: #0a0a0a;
    --panel-raised: #111111;
    --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono-font: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
}

html,
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--ui-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    /* Top padding leaves room for the fixed top nav.
       Bottom padding leaves room for the fixed bottom nav. */
    padding: 5.5rem 1rem 7rem;
    text-align: center;
}

.container {
    max-width: 820px;
    margin: 0 auto;
}

/* ==========================================================================
   Top navigation bar (Gruver.tech + Diary home link)
   ========================================================================== */

.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--accent-dim);
    padding: calc(0.65rem + env(safe-area-inset-top)) 0.75rem 0.65rem;
    z-index: 100;
}

.top-nav-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.top-nav-button {
    flex: 1 1 0;
    max-width: 280px;
    background-color: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    font-family: var(--ui-font);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-nav-button:hover,
.top-nav-button:focus {
    background-color: var(--accent);
    color: #000;
    outline: none;
    transform: translateY(-1px);
}

/* ==========================================================================
   Site title (large monospaced)
   ========================================================================== */

.site-title {
    font-family: var(--mono-font);
    font-size: clamp(1.8rem, 6vw, 3.2rem);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
    margin-bottom: 1.75rem;
    line-height: 1.15;
}

/* Profile image (round) */
.profile-image {
    width: 180px;
    height: 180px;
    max-width: 50vw;
    max-height: 50vw;
    border-radius: 50%;
    border: 3px solid var(--accent);
    object-fit: cover;
    display: block;
    margin: 0 auto 1.75rem;
    box-shadow: 0 0 20px rgba(0, 127, 255, 0.25);
}

/* ==========================================================================
   Intro section
   ========================================================================== */

.intro {
    margin-bottom: 3rem;
    font-size: 1.05rem;
    color: var(--text);
}

.intro p {
    margin-bottom: 1rem;
}

.intro p:last-child {
    margin-bottom: 0;
}

.intro a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-dim);
    transition: all 0.2s ease;
}

.intro a:hover,
.intro a:focus {
    border-bottom-color: var(--accent);
    background-color: var(--accent-soft);
    outline: none;
}

.intro a:visited {
    color: var(--visited);
    border-bottom-color: var(--visited);
}

.intro .highlight {
    color: var(--accent);
    font-weight: 600;
}

/* ==========================================================================
   RSS link
   ========================================================================== */

.rss-link {
    margin-bottom: 2.5rem;
}

.rss-link a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.rss-link a:hover,
.rss-link a:focus {
    background-color: var(--accent-soft);
    outline: none;
}

/* ==========================================================================
   Section headings
   ========================================================================== */

.section-heading {
    font-family: var(--ui-font);
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* ==========================================================================
   Blog list (entry list view)
   ========================================================================== */

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.blog-entry {
    background-color: var(--panel);
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    padding: 1.4rem 1.2rem;
    transition: all 0.2s ease;
}

.blog-entry:hover,
.blog-entry:focus-within {
    border-color: var(--accent);
    background-color: var(--panel-raised);
    transform: translateY(-2px);
}

.blog-entry h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.blog-entry h3 a {
    color: var(--accent);
    text-decoration: none;
}

.blog-entry h3 a:visited {
    color: var(--visited);
}

.blog-entry h3 a:hover,
.blog-entry h3 a:focus {
    text-decoration: underline;
    outline: none;
}

.blog-meta {
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* ==========================================================================
   Single entry view
   ========================================================================== */

.blog-post {
    background-color: var(--panel);
    border: 1px solid var(--accent-dim);
    border-radius: 12px;
    padding: 2rem 1.75rem;
    text-align: center;
}

.blog-title {
    font-family: var(--mono-font);
    color: var(--accent);
    font-size: clamp(1.5rem, 4.5vw, 2.2rem);
    margin-bottom: 0.4rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent-dim);
    line-height: 1.25;
}

/* Entry metadata: "Entry #39 | May 4, 2026" */
.blog-date {
    font-family: var(--ui-font);
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
}

.blog-date-num,
.blog-date-when {
    color: var(--text-dim);
}

.blog-date-sep {
    color: var(--accent-dim);
    font-weight: 700;
    user-select: none;
}

/* MD content — the only left-aligned part, monospaced */
.blog-content {
    font-family: var(--mono-font);
    font-size: 1rem;
    line-height: 1.7;
    text-align: left;
    color: var(--text);
}

.blog-content p {
    margin-bottom: 1.1rem;
    white-space: pre-wrap;
}

.blog-content h2 {
    font-family: var(--mono-font);
    color: var(--accent);
    font-size: 1.4rem;
    margin: 1.8rem 0 0.8rem;
    font-weight: 700;
}

.blog-content h3 {
    font-family: var(--mono-font);
    color: var(--accent);
    font-size: 1.15rem;
    margin: 1.4rem 0 0.6rem;
    font-weight: 700;
}

.blog-content a {
    color: var(--accent);
    text-decoration: underline;
}

.blog-content a:visited {
    color: var(--visited);
}

/* ==========================================================================
   In-content link tokens (=linkKey= replacement)
   These come from links.md and appear inside blog entries or addendums.
   ========================================================================== */

.md-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.md-link:hover,
.md-link:focus {
    background-color: var(--accent-soft);
    outline: none;
}

.md-link:visited {
    color: var(--visited);
}

/* Figure (image + caption) */
.entry-figure {
    margin: 1.5rem 0;
    text-align: center;
}

.entry-image {
    max-width: 100%;
    height: auto;
    border: 2px solid var(--accent-dim);
    border-radius: 10px;
    margin: 0 auto;
    display: block;
}

.entry-caption {
    font-family: var(--ui-font);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--accent);
    margin-top: 0.5rem;
    text-align: center;
    line-height: 1.4;
}

/* Italic markdown — single asterisks */
.md-italic {
    font-family: var(--ui-font);
    font-style: italic;
    font-size: 0.92em;
    color: var(--accent);
}

/* ==========================================================================
   Addendums (appended below the parent entry's body)
   ========================================================================== */

.addendum {
    margin-top: 2rem;
    padding: 1.25rem 1.25rem 1rem;
    background-color: var(--panel-raised);
    border: 1px solid var(--accent-dim);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    text-align: left;
}

.addendum + .addendum {
    margin-top: 1rem;
}

.addendum-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed var(--accent-dim);
}

.addendum-thumb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(0, 127, 255, 0.25);
}

.addendum-byline {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.addendum-label {
    font-family: var(--ui-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
}

.addendum-date {
    font-family: var(--ui-font);
    font-size: 0.85rem;
    color: var(--text-dim);
    font-style: italic;
}

.addendum-body {
    font-family: var(--mono-font);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
    text-align: left;
}

.addendum-body p {
    margin-bottom: 0.9rem;
    white-space: pre-wrap;
}

.addendum-body p:last-child {
    margin-bottom: 0;
}

.addendum-body a {
    color: var(--accent);
    text-decoration: underline;
}

.addendum-body a:visited {
    color: var(--visited);
}

.addendum-body .md-italic {
    color: var(--accent);
}

/* ==========================================================================
   Navigation buttons (entry navigation)
   ========================================================================== */

.blog-nav-buttons {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

.nav-button {
    background-color: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    font-family: var(--ui-font);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.nav-button:hover,
.nav-button:focus {
    background-color: var(--accent);
    color: #000;
    outline: none;
    transform: translateY(-1px);
}

.share-button {
    background-color: var(--accent);
    color: #000;
    border: 1.5px solid var(--accent);
}

.share-button:hover,
.share-button:focus {
    background-color: var(--accent-dim);
    border-color: var(--accent-dim);
    color: #fff;
}

/* ==========================================================================
   Search page
   ========================================================================== */

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin: 0 auto 2rem;
    max-width: 600px;
}

.search-input {
    flex: 1 1 260px;
    background-color: var(--panel);
    border: 1.5px solid var(--accent-dim);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-family: var(--ui-font);
    font-size: 1rem;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s ease;
    min-width: 0;
}

.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-input::placeholder {
    color: var(--text-dim);
}

.search-submit {
    background-color: var(--accent);
    color: #000;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    padding: 0.85rem 1.4rem;
    font-family: var(--ui-font);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-submit:hover,
.search-submit:focus {
    background-color: var(--accent-dim);
    border-color: var(--accent-dim);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.search-status {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.search-status.has-matches {
    color: var(--success);
    font-weight: 600;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    text-align: left;
}

.result-card {
    background-color: var(--panel);
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    padding: 1.25rem 1.2rem;
    transition: all 0.2s ease;
}

.result-card:hover,
.result-card:focus-within {
    border-color: var(--accent);
    background-color: var(--panel-raised);
    transform: translateY(-2px);
}

/* Addendum search results get a subtle left-bar cue so readers can see
   at a glance that this match came from an addendum, not an entry */
.result-card.is-addendum {
    border-left: 3px solid var(--accent);
    background-color: var(--panel-raised);
}

.result-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.result-card h3 a {
    color: var(--accent);
    text-decoration: none;
}

.result-card h3 a:visited {
    color: var(--visited);
}

.result-card h3 a:hover,
.result-card h3 a:focus {
    text-decoration: underline;
    outline: none;
}

.result-meta {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.result-snippet {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.result-snippet mark {
    background-color: var(--accent);
    color: #000;
    padding: 0 0.2em;
    border-radius: 3px;
    font-weight: 600;
}

.no-results {
    background-color: var(--panel);
    border: 1px dashed var(--accent-dim);
    border-radius: 10px;
    padding: 1.75rem 1rem;
    color: var(--text-dim);
}

/* ==========================================================================
   Support page
   ========================================================================== */

section.support-section {
    background-color: var(--panel);
    border: 1px solid var(--accent-dim);
    border-radius: 12px;
    padding: 2rem 1.75rem;
    margin-bottom: 2rem;
    text-align: center;
}

section.support-section h2 {
    color: var(--accent);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

section.support-section h3 {
    color: var(--accent);
    font-size: 1.15rem;
    margin: 1.5rem 0 0.75rem;
    font-weight: 600;
}

section.support-section p {
    margin-bottom: 1rem;
}

section.support-section ul {
    list-style: none;
    text-align: left;
    display: inline-block;
    margin: 0.5rem 0 1rem;
    padding: 0;
}

section.support-section ul li {
    margin-bottom: 0.55rem;
    padding-left: 1.4rem;
    position: relative;
}

section.support-section ul li:before {
    content: "▸";
    color: var(--accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.price-display {
    font-family: var(--mono-font);
    font-size: 1.35rem;
    color: var(--accent);
    font-weight: 700;
    margin: 1.25rem 0;
}

.price-change-up {
    color: var(--success);
}

.price-change-down {
    color: var(--warning);
}

.chart-image {
    max-width: 100%;
    height: auto;
    border: 2px solid var(--accent-dim);
    border-radius: 10px;
    margin: 1rem auto;
    display: block;
}

.qr-image {
    max-width: 320px;
    width: 100%;
    height: auto;
    margin: 1.25rem auto;
    display: block;
    border: 3px solid #ffffff;
    border-radius: 10px;
}

.wallet-address {
    background-color: #050505;
    border: 1px solid var(--accent-dim);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem auto;
    font-family: var(--mono-font);
    font-size: 0.85rem;
    word-break: break-all;
    color: var(--accent);
    max-width: 100%;
}

.btn {
    background-color: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    padding: 0.75rem 1.4rem;
    font-family: var(--ui-font);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    margin: 0.4rem 0.3rem;
}

.btn:hover,
.btn:focus {
    background-color: var(--accent);
    color: #000;
    outline: none;
    transform: translateY(-1px);
}

.btn-filled {
    background-color: var(--accent);
    color: #000;
}

.btn-filled:hover,
.btn-filled:focus {
    background-color: var(--accent-dim);
    border-color: var(--accent-dim);
    color: #fff;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin: 1rem 0;
}

.copy-feedback {
    color: var(--success);
    font-weight: 600;
    margin-top: 0.6rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    min-height: 1.2rem;
}

.copy-feedback.show {
    opacity: 1;
}

.warning {
    background-color: var(--warning-soft);
    border: 1px solid var(--warning);
    color: var(--warning);
    padding: 1rem;
    border-radius: 8px;
    margin: 1.25rem auto;
    font-weight: 500;
    text-align: left;
    max-width: 100%;
}

/* ==========================================================================
   Bottom navigation bar (Search + Links + Support)
   ========================================================================== */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--accent-dim);
    padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
    z-index: 100;
}

.bottom-nav-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.bottom-nav-button {
    flex: 1 1 0;
    max-width: 280px;
    background-color: transparent;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    padding: 0.75rem 0.75rem;
    font-family: var(--ui-font);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottom-nav-button:hover,
.bottom-nav-button:focus {
    background-color: var(--accent);
    color: #000;
    outline: none;
    transform: translateY(-1px);
}

.bottom-nav-button.is-current {
    background-color: var(--accent);
    color: #000;
}

/* ==========================================================================
   Mobile polish
   ========================================================================== */

@media (max-width: 600px) {
    body {
        padding: 5rem 0.75rem 6.5rem;
    }

    .blog-post {
        padding: 1.5rem 1rem;
    }

    .blog-entry {
        padding: 1.1rem 1rem;
    }

    .nav-button {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    .blog-content {
        font-size: 0.95rem;
    }

    .entry-caption {
        font-size: 0.8rem;
    }

    .profile-image {
        width: 140px;
        height: 140px;
    }

    section.support-section {
        padding: 1.5rem 1rem;
    }

    .btn {
        width: 100%;
        margin: 0.35rem 0;
    }

    .bottom-nav-button {
        font-size: 0.8rem;
        padding: 0.65rem 0.5rem;
    }

    .top-nav-button {
        font-size: 0.85rem;
        padding: 0.55rem 0.7rem;
    }

    .addendum {
        padding: 1rem 1rem 0.85rem;
    }

    .addendum-thumb {
        width: 40px;
        height: 40px;
    }

    .addendum-label {
        font-size: 0.9rem;
    }

    .addendum-date {
        font-size: 0.8rem;
    }

    .addendum-body {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Focus visibility for accessibility
   ========================================================================== */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}