/* Short thoughts (_data/thoughts.yml): sidebar widget, homepage block,
   and the /thoughts/ list page.
   Deliberately OUTSIDE the PDF-hashed stylesheet set (blog-post.css,
   styles.css): the latest thought changes between deploys and must not
   disturb the PDF cache key — see _plugins/pdf_pages.rb. */

/* --- sidebar widget ----------------------------------------------------- */

.thought-widget {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* The widget heading links to /thoughts/ but must still read as a
   heading: inherit the h3 colour, underline only on hover. */
.thought-widget h3 .thought-heading-link {
    color: inherit;
    text-decoration: none;
}

.thought-widget h3 .thought-heading-link:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

.thought-widget .thought-text {
    margin: 0 0 0.5rem;
    overflow-wrap: break-word;
}

.thought-widget .thought-permalink {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: underline;
}

.thought-widget .thought-permalink:hover {
    color: var(--accent-secondary);
}

.thought-images {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}

.thought-images img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.thought-widget .thought-images img {
    max-height: 8rem;
    width: auto;
}

/* --- homepage block ------------------------------------------------------ */

/* The feature-book band below pulls itself up by var(--slope-v) with a
   diagonal clip (see styles.css), so — like .stories — the bottom
   padding must include the slope or the band swallows the text. */
.home-thought {
    padding: 0 0 calc(2.5rem + var(--slope-v));
}

.home-thought-kicker {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.4rem;
    text-decoration: none;
}

a.home-thought-kicker:hover {
    color: var(--kicker-red);
    text-decoration: underline;
}

.home-thought-text {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 42rem;
    margin: 0 0 0.4rem;
    overflow-wrap: break-word;
}

.home-thought-link {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
}

.home-thought-link:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

.home-thought-sep {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* --- /thoughts/ list page ------------------------------------------------ */

/* Sibling-page switch (/thoughts/ <-> /til/), styled like the month nav. */
.thoughts-crosslink {
    max-width: 42rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin: 0 0 1rem;
}

.thoughts-crosslink a {
    color: var(--text-muted);
    text-decoration: none;
}

.thoughts-crosslink a:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

.thoughts-search {
    max-width: 42rem;
    margin-bottom: 1rem;
}

.thoughts-search input {
    width: 100%;
    padding: 0.6rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-secondary);
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-color, #d9d4cc);
    border-radius: 6px;
}

.thoughts-search input:focus {
    outline: none;
    border-color: var(--accent-secondary, #8c0d20);
}

.thoughts-search-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

.thoughts-months {
    max-width: 42rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 2;
    margin-bottom: 1.5rem;
}

.thoughts-months a {
    color: var(--text-secondary);
    text-decoration: none;
}

.thoughts-months a:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

.thoughts-months a[aria-current="true"] {
    color: var(--accent-secondary);
    font-weight: 700;
}

.thoughts-months-sep {
    color: var(--text-muted);
}

.thoughts-month-title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--text-secondary);
    padding-bottom: 0.35rem;
    margin: 2rem 0 1rem;
    scroll-margin-top: 5rem;
}

.thoughts-month:first-child .thoughts-month-title {
    margin-top: 0;
}

.thoughts-month {
    scroll-margin-top: 5rem;
}

.thoughts-list {
    max-width: 42rem;
}

/* Card treatment, echoing the sidebar-widget idiom (bg-primary, 1px
   border, 1rem radius) so entries read as distinct items. */
.thought-entry {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color, #d9d4cc);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem;
    box-shadow: var(--shadow-sm);
}

.thought-entry:target {
    border-color: var(--accent-secondary);
}

.thought-entry .thought-text {
    margin: 0 0 0.5rem;
    overflow-wrap: break-word;
}

.thought-entry .thought-images img {
    max-height: 20rem;
    width: auto;
}

.thought-meta {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.thought-meta a {
    color: var(--text-muted);
    text-decoration: underline;
}

.thought-meta a:hover {
    color: var(--accent-secondary);
}

.thoughts-more {
    display: block;
    margin: 1.5rem auto;
    padding: 0.6rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-color, #d9d4cc);
    border-radius: 6px;
    cursor: pointer;
}

.thoughts-more:hover {
    color: var(--accent-secondary);
    border-color: var(--accent-secondary, #8c0d20);
}

/* The widget heading row: title left, the /thoughts path right in the
   mono idiom. The container query drops the path when the widget is
   too narrow to carry both comfortably. */
.thought-widget {
    container-type: inline-size;
}

.thought-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.thought-heading-url {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.thought-heading-url:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

@container (max-width: 15rem) {
    .thought-heading-url {
        display: none;
    }
}