/**
 * Digital Garden — hand-written additions
 *
 * The Tailwind build in main.css is compiled ahead of time, so any new
 * utility combination used here wouldn't be included in it. Rather than
 * depend on rebuilding that pipeline, the homepage highlights/sort/pagination
 * and the post reading layout/typography are written as plain CSS here,
 * layered on top of main.css. Dark mode mirrors the rest of the theme:
 * driven by the `dark` class on <html>, not a media query.
 */

/* main.css sets `html { scroll-behavior: smooth }`. That makes every
   #hash jump (TOC links, direct links to a heading) animate over ~1-2s
   instead of jumping instantly. While that animation is mid-flight, the
   table-of-contents' IntersectionObserver correctly fires for every
   heading it passes through en route — which reads as the active heading
   rapidly swapping/scrolling back and forth. Forcing instant jumps removes
   the transit window entirely, so there's nothing for the observer to
   flicker through. (digital-garden-custom loads after digital-garden-main,
   so this wins on source order at equal specificity.) */
/* Safety-net page background. header.php/footer.php close the page's main
   bg-stone-50/950 wrapper <div> before the <footer>, and the footer's
   mt-20 is a margin (margins never paint background) — so the ~80px gap
   between the wrapper ending and the footer's own background starting
   shows nothing but the browser's default white, tinted by the fixed
   decorative gradient overlay above it. That's the odd pale/grey band
   visible between sections, most noticeable in dark mode. Giving <body>
   itself the same background as the theme's wrapper means any such gap
   shows the correct theme color instead of white by default. */
body {
    background-color: #fafaf9;
}

html.dark body {
    background-color: #0c0a09;
}

html {
    scroll-behavior: auto;
}

:root {
    --dg-surface: rgba(255, 255, 255, 0.72);
    --dg-surface-solid: #ffffff;
    --dg-fg: #1c1917;
    --dg-fg-strong: #1c1917;
    --dg-fg2: #44403c;
    --dg-muted: #57534e;
    --dg-faint: #78716c;
    --dg-border: #d6d3d1;
    --dg-brand: #047857;
    --dg-brand-border: rgba(4, 120, 87, 0.28);
    --dg-badge-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.85), rgba(4, 120, 87, 0.85));
    --dg-graph-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.09), rgba(4, 120, 87, 0.1));
    --dg-graph-icon-bg: rgba(4, 120, 87, 0.1);
}

html.dark {
    --dg-surface: rgba(28, 25, 23, 0.55);
    --dg-surface-solid: #1c1917;
    --dg-fg: #f5f5f4;
    --dg-fg-strong: #fef3c7;
    --dg-fg2: #d6d3d1;
    --dg-muted: #a8a29e;
    --dg-faint: #78716c;
    --dg-border: #292524;
    --dg-brand: #fbbf24;
    --dg-brand-border: rgba(251, 191, 36, 0.3);
    --dg-badge-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(52, 211, 153, 0.85));
    --dg-graph-bg: linear-gradient(135deg, rgba(147, 51, 234, 0.14), rgba(5, 150, 105, 0.14));
    --dg-graph-icon-bg: rgba(251, 191, 36, 0.12);
}

/* ---------- Utilities ---------- */

.dg-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dg-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Homepage: Highlights ---------- */

.dg-highlights-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
}

@media (max-width: 900px) {
    .dg-highlights-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    .dg-spotlight-card,
    .dg-side-card {
        padding: 22px !important;
    }
}

.dg-highlight-side-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dg-highlight-badge {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 12px;
    background: var(--dg-badge-bg);
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

.dg-highlight-badge svg {
    fill: var(--dg-brand);
}

.dg-highlight-badge span {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dg-brand);
}

/* ---------- Homepage: sort & density controls ---------- */

.dg-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .dg-controls {
        width: 100%;
    }

    /* Fixed pixel widths (chosen to stop labels reflowing the button on
       desktop) are too wide for narrow phones — let these two grow/shrink
       to share the row instead. */
    .dg-sort-toggle,
    .dg-dir-toggle {
        width: auto;
        flex: 1 1 120px;
    }
}

.dg-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    font-size: 12px;
    color: var(--dg-fg2);
    background: transparent;
    border: 1px solid var(--dg-border);
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    text-decoration: none;
    line-height: 1.2;
}

.dg-control-btn:hover {
    opacity: 0.8;
}

.dg-control-btn.dg-control-btn--icon {
    width: 34px;
    height: 34px;
    padding: 0;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.dg-sort {
    position: relative;
}

.dg-sort-toggle {
    width: 152px;
    justify-content: space-between;
}

.dg-sort-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    min-width: 168px;
    z-index: 20;
    background: var(--dg-surface-solid);
    border: 1px solid var(--dg-border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    display: none;
}

.dg-sort.is-open .dg-sort-menu {
    display: block;
}

.dg-sort-menu a {
    display: block;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--dg-fg2);
    text-decoration: none;
}

.dg-sort-menu a:hover {
    color: var(--dg-brand);
}

.dg-sort-menu a.is-active {
    color: var(--dg-brand);
    font-weight: 700;
}

.dg-dir-toggle {
    width: 118px;
}

.dg-dir-toggle svg {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.dg-dir-toggle.is-asc svg {
    transform: rotate(180deg);
}

.dg-density-toggle svg {
    display: none;
}

.dg-density-toggle .dg-icon-compact {
    display: block;
}

.dg-controls[data-density="compact"] .dg-density-toggle .dg-icon-compact {
    display: none;
}

.dg-controls[data-density="compact"] .dg-density-toggle .dg-icon-comfortable {
    display: block;
}

.dg-density-toggle .dg-icon-comfortable {
    display: none;
}

/* Notes grid density */

.notes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.notes-grid.is-compact {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.notes-grid .note-card {
    position: relative;
}

.notes-grid.is-compact .note-card {
    padding: 16px !important;
}

.notes-grid.is-compact .note-card .note-excerpt,
.notes-grid.is-compact .note-card .note-tags {
    display: none;
}

.notes-grid.is-compact .note-card .note-title {
    font-size: 14px !important;
    line-height: 1.32 !important;
    margin-bottom: 10px !important;
}

.notes-grid.is-compact .note-card .note-emoji {
    font-size: 17px !important;
}

.notes-grid .note-card.dg-density-extra {
    display: none;
}

.notes-grid.is-compact .note-card.dg-density-extra {
    display: block;
}

@media (max-width: 640px) {
    .notes-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .notes-grid .note-card {
        padding: 22px !important;
    }

    .notes-grid.is-compact {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .notes-grid.is-compact .note-card {
        padding: 14px !important;
    }
}

@media (max-width: 380px) {
    .notes-grid.is-compact {
        grid-template-columns: 1fr;
    }
}

/* ---------- Pagination ---------- */

.dg-pagination {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* paginate_links() prints a flat run of <a>/<span> elements with no
   wrapper — without this, they inherit .dg-pagination's column direction
   and stack one per line instead of forming a row */
.dg-pagination-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dg-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--dg-fg2);
    border: 1px solid var(--dg-border);
    transition: opacity 0.15s ease;
}

.dg-pagination .page-numbers:hover {
    opacity: 0.8;
}

.dg-pagination .page-numbers.dots {
    border: none;
    color: var(--dg-faint);
    padding: 0 6px;
}

.dg-pagination .page-numbers:not(.prev):not(.next):not(.dots) {
    width: 38px;
    height: 38px;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.dg-pagination .page-numbers.prev,
.dg-pagination .page-numbers.next {
    padding: 9px 18px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.dg-pagination .page-numbers.next {
    color: var(--dg-surface-solid);
    background: var(--dg-brand);
    border-color: var(--dg-brand);
}

.dg-pagination .page-numbers.current {
    color: var(--dg-surface-solid);
    background: var(--dg-brand);
    border-color: var(--dg-brand);
}

.dg-pagination-info {
    font-size: 12px;
    color: var(--dg-faint);
}

/* ---------- Knowledge Graph closing section ---------- */

.dg-graph-section {
    position: relative;
    display: block;
    margin-top: 80px;
    padding: 52px 40px;
    text-align: center;
    overflow: hidden;
    background: var(--dg-graph-bg);
    border: 1px solid var(--dg-brand-border);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
    text-decoration: none;
}

.dg-graph-section .dg-graph-motif {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    pointer-events: none;
}

.dg-graph-icon {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dg-graph-icon-bg);
    color: var(--dg-brand);
}

.dg-graph-section h3 {
    position: relative;
    font-size: 28px;
    margin: 0 0 12px;
    color: var(--dg-fg-strong);
}

.dg-graph-section p {
    position: relative;
    max-width: 480px;
    margin: 0 auto 28px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--dg-fg2);
}

.dg-graph-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--dg-surface-solid);
    background: var(--dg-brand);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* ---------- Post detail: reading layout ---------- */

.dg-post-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, 640px) 1fr;
    column-gap: 56px;
}

@media (max-width: 1024px) {
    .dg-post-layout {
        display: block;
    }
}

.dg-post-content-col {
    grid-column: 2;
    min-width: 0;
}

.dg-post-sidebar-col {
    grid-column: 3;
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 1024px) {
    .dg-post-sidebar-col {
        display: none;
    }
}

.dg-post-sidebar {
    width: 100%;
    max-width: 190px;
}

/* ---------- Post detail: prose typography ---------- */

.dg-prose {
    color: var(--dg-fg2);
    font-size: 18px;
    line-height: 1.9;
    letter-spacing: 0.1px;
}

.dg-prose > * + * {
    margin-top: 1.6em;
}

.dg-prose h2 {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 29px;
    line-height: 1.32;
    font-weight: 700;
    color: var(--dg-fg-strong);
    margin-top: 2.7em;
    margin-bottom: 0;
    scroll-margin-top: 96px;
}

.dg-prose h2:first-child {
    margin-top: 0;
}

.dg-prose h3 {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--dg-fg-strong);
    margin-top: 2.1em;
    margin-bottom: 0;
    scroll-margin-top: 96px;
}

.dg-prose h2 + p,
.dg-prose h3 + p {
    margin-top: 0.9em;
}

.dg-prose p {
    /* margin-bottom only — margin-top is deliberately left to the
       .dg-prose > * + * rule below; setting it here too would win the
       cascade over that lower-specificity rule and silently cancel it */
    margin-bottom: 0;
}

.dg-prose a {
    color: var(--dg-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--dg-brand-border);
}

.dg-prose a:hover {
    text-decoration-color: var(--dg-brand);
}

.dg-prose blockquote {
    position: relative;
    margin: 2.4em 0;
    padding: 26px 32px 26px 56px;
    background: var(--dg-surface);
    border: none; /* WordPress core's .wp-block-quote ships its own border-left;
                     this must be explicitly cancelled, not just omitted */
    font-style: italic;
    font-size: 19px;
    line-height: 1.75;
    color: var(--dg-fg);
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

.dg-prose blockquote::before {
    content: "\201C";
    position: absolute;
    top: 6px;
    left: 20px;
    font-size: 42px;
    line-height: 1;
    font-family: Georgia, serif;
    font-style: normal;
    color: var(--dg-brand);
    opacity: 0.55;
}

.dg-prose blockquote p {
    margin: 0;
}

.dg-prose blockquote p + p {
    margin-top: 0.9em;
}

.dg-prose ul,
.dg-prose ol {
    margin: 1.6em 0;
    padding-left: 1.4em;
}

.dg-prose li {
    padding-left: 0.2em;
}

.dg-prose li + li {
    margin-top: 0.7em;
}

.dg-prose li::marker {
    color: var(--dg-brand);
}

.dg-prose code {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.84em;
    background: var(--dg-surface);
    border: 1px solid var(--dg-border);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--dg-fg-strong);
}

.dg-prose pre {
    margin: 2.2em 0;
    padding: 22px 24px;
    background: var(--dg-surface);
    border: 1px solid var(--dg-border);
    overflow-x: auto;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.dg-prose pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--dg-fg2);
}

.dg-prose hr {
    border: none;
    height: 1px;
    background: var(--dg-border);
    margin: 3em 0;
}

.dg-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2.2em 0;
}

/* ---------- Sticky-positioning fix for a site-wide Customizer rule ----------
   Appearance -> Customize -> Additional CSS on this site sets
   `main.pt-20 { overflow-x: hidden }`. Per the CSS overflow spec, setting
   only one axis to a non-visible value makes browsers auto-resolve the
   OTHER axis from "visible" to "auto" — turning <main> into a scroll
   container. That breaks position:sticky for everything inside it,
   including the post's table of contents. `overflow: clip` avoids that
   axis-coupling behavior while still preventing horizontal overflow from
   the decorative background blobs, so it's used here instead. The extra
   `body` ancestor in the selector gives this enough specificity to win
   over the Customizer rule regardless of stylesheet load order. */
body main.pt-20 {
    overflow-x: clip;
    overflow-y: visible;
}

/* ---------- Post detail: table of contents ---------- */

.dg-toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-right: 4px;
}

.dg-toc::-webkit-scrollbar {
    width: 5px;
}

.dg-toc::-webkit-scrollbar-track {
    background: transparent;
}

.dg-toc::-webkit-scrollbar-thumb {
    background: var(--dg-border);
    border-radius: 3px;
}

.dg-toc {
    scrollbar-width: thin;
    scrollbar-color: var(--dg-border) transparent;
}

.dg-toc-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-faint);
    margin-bottom: 16px;
}

.dg-toc-link {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 7px 0 7px 10px;
    color: var(--dg-fg2);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.dg-toc-link[data-level="3"] {
    margin-left: 16px;
}

.dg-toc-link:hover {
    color: var(--dg-brand);
}

.dg-toc-link.is-active {
    color: var(--dg-brand);
    font-weight: 700;
    border-left-color: var(--dg-brand);
}

/* ---------- Post detail: quiet sidebar widgets ---------- */

.dg-sidebar-quiet {
    margin-top: 40px;
    opacity: 0.62;
    transition: opacity 0.2s ease;
}

.dg-sidebar-quiet:hover {
    opacity: 1;
}

.dg-sidebar-quiet-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dg-faint);
    margin-bottom: 10px;
}

.dg-sidebar-quiet a {
    color: var(--dg-muted);
    text-decoration: none;
}

.dg-sidebar-quiet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.dg-sidebar-quiet-list a {
    font-size: 12px;
    line-height: 1.5;
}

.dg-sidebar-related-item {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 8px;
    align-items: start;
}

.dg-sidebar-related-item span {
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Search results ---------- */

.dg-search-result {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: var(--dg-surface);
    border: 1px solid var(--dg-border);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dg-search-result:hover,
.dg-search-result.is-active {
    border-color: var(--dg-brand);
    background: var(--dg-surface-solid);
}

.dg-search-result-emoji {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.dg-search-result-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dg-search-result-title {
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--dg-fg-strong);
}

.dg-search-result-title mark {
    background: none;
    color: var(--dg-brand);
    padding: 0;
}

.dg-search-result-excerpt {
    font-size: 13px;
    line-height: 1.5;
    color: var(--dg-fg2);
}

.dg-search-result-meta {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dg-faint);
}
