/* _static/custom.css */

/* Format ABlog's list node so it behaves like a standard full-width layout box */
ul.postlist {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Clear list bullet indent defaults out of the card items */
li.ablog-post {
    list-style-type: none !important;
    background-color: #f4f7f9 !important; /* Soft high-contrast light blue/gray */
    border: 1px solid #d1dbe0 !important;
    border-top: 4px solid var(--color-brand-primary) !important; /* Xen brand color accent line */
    border-radius: 8px;
    padding: 2.2rem;
    margin-top: 1.5rem;
    margin-bottom: 3.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: block; /* Suppress standard list indentation defaults */
}

/* Explicit color overrides for Dark Mode navigation look */
[data-theme="dark"] li.ablog-post {
    background-color: #1e2630 !important; /* Deep dark slate card background */
    border: 1px solid #2d3846 !important;
    border-top: 4px solid var(--color-brand-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Same dark-card styling for "auto" mode when the OS/browser prefers dark.
   Without this, [data-theme="dark"] above never matches in auto mode, so the
   card keeps its light background while Furo's own variables (e.g.
   --color-foreground-primary) already switch the text to light-mode-for-dark
   colors -- light text on a light card. */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] li.ablog-post {
        background-color: #1e2630 !important;
        border: 1px solid #2d3846 !important;
        border-top: 4px solid var(--color-brand-primary) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
}

/* Format the post header elements inside the cards.
   ablog renders each entry as a single <p class="ablog-post-title"> containing
   the title link followed by a bare date text node (no wrapping element for the
   date), so the date's italic/right-aligned styling below relies on inheriting
   from this paragraph while the link overrides its own styling. */
.ablog-post-title {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-foreground-muted);
    text-align: right;
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;
}

.ablog-post-title a {
    display: block;
    text-align: left;
    font-style: normal;
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--color-brand-primary) !important;
    text-decoration: none;
}
.ablog-post-title a:hover {
    text-decoration: underline;
}

/* Alignment layout rules for our metadata summary row */
.ablog-post-meta {
    font-size: 0.95rem;
    color: var(--color-foreground-muted);
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 0.8rem;
    margin-bottom: 1.6rem;
}

/* Capsule badge style for the Author fields */
.ablog-post-meta .author {
    font-weight: bold;
    color: var(--color-brand-primary);
    background-color: rgba(45, 125, 154, 0.12);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Content paragraph text layout */
.planet-post-content {
    line-height: 1.65;
    margin-top: 1.2rem;
    margin-bottom: 1.5rem;
}

/* --- MIXED / AUTO MODE TRANSITION BUGFIXES --- */

/* Force all text blocks inside the card to respect Furo's adaptive font color variables */
li.ablog-post, 
.planet-post-content, 
.planet-post-content p, 
.planet-post-content li,
.planet-post-content td {
    color: var(--color-foreground-primary) !important;
}

/* Fix headers inside card contents so they don't stay dark-gray in dark mode */
.planet-post-content h1, 
.planet-post-content h2, 
.planet-post-content h3, 
.planet-post-content h4 {
    color: var(--color-brand-primary) !important;
}

/* Ensure native ablog title links change font color correctly based on active theme states */
.ablog-post-title a {
    color: var(--color-brand-primary) !important;
}

/* Safe layout contrast wrapper for code injection blocks inside raw summaries */
.planet-post-content pre, 
.planet-post-content code {
    background-color: var(--color-background-secondary) !important;
    color: var(--color-foreground-primary) !important;
    border: 1px solid var(--color-border) !important;
}