@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    background: #181818;
    color: #F8F8F2;
    font-family: 'Press Start 2P', Courier, monospace;
    margin: 0;
    padding: 0;
}

header, nav, .pdf-link, footer {
    border: 4px solid #2B7FFF;
    padding: 16px;
    margin: 16px 0;
    background: #232323;
    text-align: center;
}

nav a {
    color: #FFD600;
    text-decoration: underline;
    font-weight: bold;
    margin-right: 24px;
    padding: 2px 8px;
    border: 2px solid #2B7FFF;
    background: #181818;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
}

nav a:hover {
    color: #232323;
    background: #FFD600;
    border-color: #F8F8F2;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 60vh;
}

.left-column, .right-column {
    background: #232323;
    color: #2B7FFF;
    border: 4px solid #FFD600;
    padding: 16px;
    min-width: 180px;
    max-width: 220px;
    font-size: 0.8em;
    flex: 0 0 200px;
    box-sizing: border-box;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.left-column {
    border-right: none;
    border-radius: 0 0 0 0;
}

.right-column {
    border-left: none;
    border-radius: 0 0 0 0;
}

.center-column {
    background: #181818;
    color: #F8F8F2;
    border-top: 4px solid #2B7FFF;
    border-bottom: 4px solid #2B7FFF;
    border-left: none;
    border-right: none;
    padding: 32px 24px;
    min-width: 320px;
    max-width: 900px;
    flex: 1 1 600px;
    box-sizing: border-box;
    margin: 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pdf-link a {
    color: #FFD600;
    font-weight: bold;
    border: 2px solid #2B7FFF;
    padding: 8px 12px;
    display: inline-block;
    margin: 8px 0;
    background: #232323;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.pdf-link a:hover {
    background: #FFD600;
    color: #232323;
    border-color: #F8F8F2;
}

footer {
    background: #232323;
    color: #FFD600;
    border-top: 4px solid #2B7FFF;
    margin-top: 32px;
}

@media (max-width: 1100px) {
    .container {
        flex-direction: column;
        gap: 8px;
    }
    .left-column, .right-column, .center-column {
        min-width: unset;
        max-width: unset;
        border-radius: 0;
    }
    .left-column, .right-column {
        border: 4px solid #FFD600;
        border-bottom: none;
        border-top: none;
    }
    .center-column {
        border-left: 4px solid #2B7FFF;
        border-right: 4px solid #2B7FFF;
    }
}

.sidebar-box {
    background: #181818;
    border: 2px solid #2B7FFF;
    margin-bottom: 16px;
    padding: 12px;
    border-radius: 4px;
}
.sidebar-box h3 {
    margin-top: 0;
}
.sidebar-box a {
    display: block;
    margin: 8px 0;
    color: #FFD600;
}

.left-column nav a,
.right-column a {
    margin-bottom: 12px;
    margin-top: 4px;
}

.post-preview {
    border: 2px solid #FFD600;
    background: #232323;
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 4px;
}
.post-preview h4 {
    margin: 0 0 8px 0;
}
.post-preview p {
    margin: 0 0 8px 0;
    color: #F8F8F2;
}
.post-preview a {
    color: #2B7FFF;
    text-decoration: underline;
    font-weight: bold;
}

/* Legal Footer Styles */
.legal-footer {
    background: #181818;
    border-top: 2px solid #FFD600;
    padding: 16px;
    margin-top: 16px;
    font-size: 0.7em;
    line-height: 1.4;
}

.legal-footer p {
    margin: 8px 0;
    color: #F8F8F2;
}

.legal-footer a {
    color: #2B7FFF;
    text-decoration: underline;
}

.legal-footer a:hover {
    color: #FFD600;
}

.legal-footer strong {
    color: #FFD600;
}

/* Blog Post Styles */
.blog-post {
    max-width: 100%;
}

.blog-post h2 {
    color: #FFD600;
    margin-bottom: 8px;
}

.blog-post h3 {
    color: #2B7FFF;
    margin-top: 24px;
    margin-bottom: 12px;
}

.blog-post .post-date {
    color: #F8F8F2;
    font-size: 0.8em;
    margin-bottom: 16px;
    opacity: 0.8;
}

.blog-post p {
    margin-bottom: 16px;
    line-height: 1.6;
}

/* Hub Cards (main page sub-page navigation) */
.hub-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
}

.hub-card {
    display: block;
    background: #232323;
    border: 2px solid #2B7FFF;
    padding: 16px 20px;
    text-decoration: none;
    color: #F8F8F2;
    transition: border-color 0.2s, background 0.2s;
}

.hub-card:hover {
    border-color: #FFD600;
    background: #1e1e1e;
}

.hub-card h3 {
    color: #FFD600;
    margin: 0 0 8px 0;
    font-size: 0.85em;
}

.hub-card p {
    color: #F8F8F2;
    margin: 0;
    font-size: 0.7em;
    line-height: 1.7;
    opacity: 0.85;
}

/* Section divider headings */
.section-heading {
    color: #2B7FFF;
    font-size: 0.85em;
    border-bottom: 2px solid #2B7FFF;
    padding-bottom: 8px;
    margin: 0 0 20px 0;
}

/* Inline Blog Articles (main page) */
.blog-article {
    border: 2px solid #FFD600;
    background: #232323;
    margin-bottom: 32px;
    padding: 20px 24px;
}

.blog-article h3 {
    color: #FFD600;
    margin: 0 0 8px 0;
    font-size: 0.85em;
}

.blog-article .post-date {
    color: #F8F8F2;
    font-size: 0.65em;
    margin-bottom: 16px;
    opacity: 0.65;
    display: block;
}

.blog-article p {
    color: #F8F8F2;
    line-height: 1.9;
    margin-bottom: 12px;
    font-size: 0.72em;
}

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

/* Document Post Cards (sub-page JSON feed) */
.doc-post {
    border: 2px solid #2B7FFF;
    background: #232323;
    margin-bottom: 20px;
    padding: 16px 20px;
}

.doc-post h4 {
    color: #FFD600;
    margin: 0 0 6px 0;
    font-size: 0.8em;
}

.doc-post .post-date {
    color: #F8F8F2;
    font-size: 0.62em;
    opacity: 0.6;
    display: block;
    margin-bottom: 10px;
}

.doc-post p {
    color: #F8F8F2;
    margin: 0 0 14px 0;
    font-size: 0.72em;
    line-height: 1.7;
}

.doc-post a.doc-link {
    color: #2B7FFF;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.72em;
    border: 1px solid #2B7FFF;
    padding: 4px 10px;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
}

.doc-post a.doc-link:hover {
    background: #2B7FFF;
    color: #181818;
}

.no-posts {
    color: #F8F8F2;
    opacity: 0.5;
    font-size: 0.72em;
}

/* Announcement Post Cards (homepage feed) */
.announcement-post {
    border: 2px solid #FFD600;
    border-left: 6px solid #FFD600;
    background: #1a1a0e;
    margin-bottom: 20px;
    padding: 16px 20px;
}

.announcement-post h4 {
    color: #FFD600;
    margin: 0 0 6px 0;
    font-size: 0.8em;
}

.announcement-post .post-date {
    color: #F8F8F2;
    font-size: 0.62em;
    opacity: 0.6;
    display: block;
    margin-bottom: 10px;
}

.announcement-post p {
    color: #F8F8F2;
    margin: 0 0 14px 0;
    font-size: 0.72em;
    line-height: 1.7;
}

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

.announcement-post a.doc-link {
    color: #FFD600;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.72em;
    border: 1px solid #FFD600;
    padding: 4px 10px;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
}

.announcement-post a.doc-link:hover {
    background: #FFD600;
    color: #181818;
}

/* Resource category label pill */
.resource-category-label {
    display: inline-block;
    font-size: 0.6em;
    padding: 2px 8px;
    border: 1px solid #2B7FFF;
    color: #2B7FFF;
    background: #181818;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* About blurb on homepage */
.about-blurb {
    border: 2px solid #FFD600;
    background: #232323;
    padding: 20px 24px;
    margin-bottom: 32px;
    font-size: 0.72em;
    line-height: 1.9;
    color: #F8F8F2;
}

.about-blurb p {
    margin: 0 0 12px 0;
}

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

/* Tag pills — small labels on post cards and post pages */
.post-tags {
    margin-bottom: 10px;
}

.tag-pill {
    display: inline-block;
    font-size: 0.55em;
    padding: 2px 7px;
    border: 1px solid #2B7FFF;
    color: #2B7FFF;
    background: #181818;
    margin-right: 4px;
    text-transform: lowercase;
    letter-spacing: 0.03em;
}

/* Tag filter buttons — above the blog/resource listings */
.tag-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.tag-filter {
    font-family: 'Press Start 2P', Courier, monospace;
    font-size: 0.6em;
    padding: 4px 10px;
    border: 1px solid #2B7FFF;
    color: #2B7FFF;
    background: #181818;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tag-filter:hover,
.tag-filter.active {
    background: #2B7FFF;
    color: #181818;
}

/* Session report badge — appears on session-type post cards */
.session-badge {
    display: inline-block;
    font-size: 0.55em;
    padding: 2px 8px;
    border: 1px solid #FFD600;
    color: #FFD600;
    background: #181818;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Session meta info row (system / players / duration) */
.session-meta {
    font-size: 0.6em;
    color: #F8F8F2;
    opacity: 0.65;
    margin-bottom: 10px;
    line-height: 1.8;
}

.session-meta span {
    margin-right: 14px;
}

/* Rendered markdown post body (post.html) */
.post-body {
    font-size: 0.75em;
    line-height: 2;
    color: #F8F8F2;
}

.post-body h2 {
    color: #FFD600;
    margin: 32px 0 12px 0;
    font-size: 1em;
}

.post-body h3 {
    color: #2B7FFF;
    margin: 24px 0 10px 0;
    font-size: 0.9em;
}

.post-body p {
    margin-bottom: 16px;
}

.post-body a {
    color: #2B7FFF;
    text-decoration: underline;
}

.post-body a:hover {
    color: #FFD600;
}

.post-body ul,
.post-body ol {
    margin: 0 0 16px 1.5em;
    padding: 0;
}

.post-body li {
    margin-bottom: 6px;
}

.post-body blockquote {
    border-left: 4px solid #FFD600;
    margin: 16px 0;
    padding: 8px 16px;
    background: #232323;
    color: #F8F8F2;
    opacity: 0.85;
}

.post-body code {
    background: #232323;
    padding: 1px 5px;
    font-family: Courier, monospace;
    font-size: 0.95em;
}

.post-body hr {
    border: none;
    border-top: 2px solid #2B7FFF;
    margin: 24px 0;
}

/* Post page header (title + date + tags on a rendered markdown post) */
.post-header {
    margin-bottom: 28px;
}

.post-header h2 {
    color: #FFD600;
    margin: 0 0 8px 0;
    font-size: 0.9em;
}

.post-header .post-date {
    color: #F8F8F2;
    font-size: 0.65em;
    opacity: 0.65;
    display: block;
    margin-bottom: 10px;
}

/* Google Drive / doc link button used inside blog post body */
a.post-doc-link {
    display: inline-block;
    color: #FFD600;
    background: #232323;
    border: 2px solid #FFD600;
    padding: 8px 16px;
    text-decoration: none;
    font-size: 0.72em;
    margin: 12px 0;
    transition: background 0.2s, color 0.2s;
}

a.post-doc-link:hover {
    background: #FFD600;
    color: #181818;
}