/*
 * Barebones theme: intentionally feels like there is no stylesheet.
 * Browser defaults for fonts, colors, and spacing. The only additions:
 * classic link colors pinned explicitly, and the site nav laid out as a
 * left sidebar column with the content column to its right.
 */

a:link {
    color: #0000ee;
    text-decoration: underline;
}

a:visited {
    color: #551a8b;
}

/*
 * Dark variant: same bare look, inverted. color-scheme: dark lets the
 * browser render form controls (buttons, inputs) in its native dark
 * style, keeping the "no stylesheet" feel. Link colors match what
 * browsers use for links in forced-dark documents.
 */
:root[data-theme="simple-dark"] {
    color-scheme: dark;
}

:root[data-theme="simple-dark"] body {
    background: #1c1c1c;
    color: #e2e2e2;
    /* Twitter-feed-like type: 15px system sans-serif. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
}

:root[data-theme="simple-dark"] a:link {
    color: #9e9eff;
}

:root[data-theme="simple-dark"] a:visited {
    color: #a678d4;
}

/* Dates recede: darker than the body text so they draw less attention. */
:root[data-theme="simple-dark"] .post-card-date,
:root[data-theme="simple-dark"] .post-detail-meta {
    color: #848484;
}

:root[data-theme="simple-dark"] hr {
    border: none;
    border-top: 1px solid #3a3a3a;
}

:root[data-theme="simple-dark"] h1 {
    font-size: 1.4em;
}

/* No divider between the article header and body (content hrs keep it). */
:root[data-theme="simple-dark"] .post-detail > hr {
    display: none;
}

/* Larger than the browser default (usually 16px -> 19px). */
html {
    font-size: 118.75%;
}

/* Two columns: nav sidebar on the left, content on the right. The
   wrapper is centered and shares its width with the admin bar inner. */
body {
    margin: 0;
}

/* Shared layout width so the admin bar and the columns align exactly,
   in px because the bar's smaller font would skew em math.
   45em at the light theme's 19px base / the dark theme's 15px base. */
:root {
    --layout-max: 1127px;
    /* left sidebar column (5.5em) + gap (2em) at the theme's base font */
    --content-offset: 143px;
    --content-min: 646px;
}

:root[data-theme="simple-dark"] {
    --layout-max: 953px;
    --content-offset: 113px;
    --content-min: 510px;
}

.site-layout {
    display: flex;
    align-items: flex-start;
    gap: 0 2em;
    max-width: var(--layout-max);
    margin: 1em auto 1em;
    padding: 0 16px;
}

/* Staff tool bar: consistent dark strip across themes. */
.admin-bar {
    width: 100%;
    margin-bottom: 1em;
    background: #141414;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.admin-bar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* text spans the content column: outer box matches the layout's
       (offset+content+gutters), text starts at the content column edge */
    padding: 6px 16px 6px calc(16px + var(--content-offset));
    max-width: calc(var(--layout-max) - var(--content-offset));
    margin: 0 auto;
}

.admin-bar a:link,
.admin-bar a:visited {
    color: #a0a0a0;
    text-decoration: none;
}

.admin-bar a:hover {
    color: #fff;
}

.admin-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-bar-version {
    color: #707070;
}

.admin-bar .theme-toggle {
    font-size: 12px;
}

.site-header {
    flex: 0 0 5.5em;
}

.site-header nav a {
    display: block;
}

/* Flatten the nav and reorder: Home first, then the brand link. */
.site-header nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.nav-links {
    display: contents;
}

/* Site title in the sidebar: reads as a heading, not a link. */
a.nav-brand:link,
a.nav-brand:visited {
    display: block;
    font-size: 1.15em;
    font-weight: bold;
    color: #6b6b6b;
    text-decoration: none;
    margin-bottom: 0.6em;
}

:root[data-theme="simple-dark"] a.nav-brand:link,
:root[data-theme="simple-dark"] a.nav-brand:visited {
    color: #848484;
}

/* Highlights column on the right. */
.sidebar-right {
    /* proportioned like Twitter's 350px rail beside its 600px feed;
       shrinks before the content column does */
    flex: 0 1 300px;
    min-width: 0;
    overflow: hidden;
    font-size: 0.85em;
}

/* Once the rail would be crushed, drop it and let content flex. */
@media (max-width: 900px) {
    .sidebar-right {
        display: none;
    }

    .site-container {
        min-width: 0;
    }
}

.sidebar-right-title {
    font-weight: bold;
    color: #6b6b6b;
    margin-bottom: 0.4em;
}

:root[data-theme="simple-dark"] .sidebar-right-title {
    color: #848484;
}

.sidebar-right a {
    display: block;
    margin-bottom: 0.35em;
}

.site-container {
    flex: 1;
    /* hold the designed reading width; the rail shrinks first */
    min-width: var(--content-min);
}

/* Post list titles are h2s; keep them close to body text size. */
.post-card {
    margin-bottom: 1.5em;
}

.post-card-title {
    display: inline;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
}

.post-card-date {
    font-weight: normal;
    font-size: 1em;
}

/* Article body only: slightly roomier line spacing than the default. */
.post-content {
    line-height: 1.4;
}

/* Embedded videos scale to the column. */
.post-content div[data-youtube-video] iframe {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: none;
}

.post-content blockquote.quote-embed {
    border-left: 3px solid #555;
    padding-left: 1em;
    margin: 1.25em 0;
}

.post-content blockquote.quote-embed footer {
    margin-top: 0.4em;
    font-size: 0.85em;
    opacity: 0.75;
}

.person-links a {
    margin-right: 1em;
}

.person-bio {
    margin: 0.75em 0 1.25em;
}

.quote-meta {
    margin-top: 1.25em;
    font-size: 0.9em;
    opacity: 0.85;
}

/* Footer: separated by a rule, dimmer than body text. */
.site-footer {
    margin-top: 2.5em;
    padding-top: 0.75em;
    border-top: 1px solid #c9c9c9;
    color: #6b6b6b;
    font-size: 0.9em;
}

:root[data-theme="simple-dark"] .site-footer {
    border-top-color: #3a3a3a;
    color: #848484;
}

/* Homepage title: present but subdued, top-aligned with the sidebar nav. */
.home-title {
    color: #6b6b6b;
    margin-top: 0;
    line-height: 1.2;
    margin-bottom: 0.75em;
}

:root[data-theme="simple-dark"] .home-title {
    color: #848484;
}

/* Admin dropdown menu (far right of the bar) */
.admin-menu {
    position: relative;
}

.admin-menu-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #a0a0a0;
    cursor: pointer;
}

.admin-menu-btn:hover {
    color: #fff;
}

.admin-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 300;
    min-width: 12rem;
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    padding: 0.25rem 0;
}

.admin-menu-panel[hidden] {
    display: none;
}

.admin-menu-panel a:link,
.admin-menu-panel a:visited {
    display: block;
    padding: 0.4rem 0.75rem;
    color: #c9c9c9;
    text-decoration: none;
}

.admin-menu-panel a:hover {
    background: #2a2a2a;
    color: #fff;
}

.admin-menu-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    color: #8a8a8a;
    border-top: 1px solid #2e2e2e;
    border-bottom: 1px solid #2e2e2e;
    margin: 0.25rem 0;
}

/* Any leading page heading aligns with the top of the sidebar. */
.site-main > h1:first-child {
    margin-top: 0;
    line-height: 1.2;
}

/* Main nav links read as plain text (no link color, no visited color,
   no underline, no hover underline); the Recent list below keeps
   normal link styling. */
.nav-links a:link,
.nav-links a:visited,
.nav-links a:hover {
    color: #6b6b6b;
    text-decoration: none;
}

:root[data-theme="simple-dark"] .nav-links a:link,
:root[data-theme="simple-dark"] .nav-links a:visited,
:root[data-theme="simple-dark"] .nav-links a:hover {
    color: #848484;
}

/* First element of any page content aligns with the sidebar top,
   including nested post-detail leading elements. */
.site-main > :first-child,
.post-detail > :first-child {
    margin-top: 0;
}

.post-detail > header:first-child h1 {
    margin-top: 0;
    line-height: 1.2;
}

/* Excerpt as a standfirst: dimmer than body, sits between date and text. */
.post-subtitle {
    color: #555;
    font-size: 1.05em;
    margin: 0.4em 0 1.1em;
}

:root[data-theme="simple-dark"] .post-subtitle {
    color: #a0a0a0;
}