/* Project-owned homepage/sidebar/card styles for the vendored CleanWhite
   baseline (loaded via the theme's own custom_css hook; no new JS).
   Shared tokens live in :root below: --overlay-shadow holds the layered
   dark text shadow used over bright covers (banner panel plus featured
   overlay), so the two stay identical through one definition. Duplicated
   declarations are merged into combined selectors throughout, which only
   restates shared values once and never changes the computed render. */

/* Shared overlay shadow: tighter crisp edge plus mid soft halo plus wider
   soft glow, keeping overlaid headings readable in light and dark modes. */
:root {
    --overlay-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.7), 0 8px 32px rgba(0,0,0,.65);
}

/* Banner: one fixed height everywhere (home, post, and static pages
   share the same shell so no heading content changes the height).
   Derivation: theme desktop stacks 150px top plus 150px bottom padding
   with about an 80px title plus about a 20px slogan, about 400px total,
   so the shell pins a 400px desktop height and 260px under 768px.
   Flex column centering keeps shorter content centered, overflow hidden
   keeps taller content inside the shell, and the inner heading vertical
   paddings are zeroed so they never add to the fixed height. */
.intro-header {
    height: 400px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.intro-header .site-heading,
.intro-header .post-heading,
.intro-header .page-heading {
    padding-top: 0;
    padding-bottom: 0;
}
@media only screen and (max-width: 767px) {
    .intro-header {
        height: 260px;
    }
}

/* Banner legibility: deeper layered dark shadow (via --overlay-shadow,
   defined once in :root) plus a centered semi-transparent tinted panel
   behind every banner-overlaid heading
   (homepage site-heading, post post-heading, page page-heading).
   The panel shrink wraps the text through fit content plus auto side
   margins with padding and rounded corners, so titles, slogans, and
   meta stay readable over the bright cover in both light and dark
    modes. The rgba(0,0,0,.55) background lives only on this banner
    panel, never on the featured overlay. */
.intro-header .site-heading,
.intro-header .post-heading,
.intro-header .page-heading {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(0,0,0,.55);
    padding: 12px 20px;
    border-radius: 8px;
    text-shadow: var(--overlay-shadow);
}

/* Unified sidebar rail: the homepage sidebar and the post sidebar share
   the same slim column, so they also share one 13px base size and one
   1.6 line height here (the theme leaves the homepage rail at 15px while
   the post rail pinned 13px, which read as a size jump when navigating).
   Scoped to the sidebar columns only, so post body type never matches. */
.sidebar-container {
    font-size: 13px;
    line-height: 1.6;
}

/* Sidebar author links: handle-visible rows under the About bio. Long
   handles such as huggingface.co/esatapedico wrap cleanly inside the
   slim column through overflow-wrap anywhere instead of break-all, so
   rows break only when they must and never spill past the column edge.
   Scoped to author links only, so post content links keep theme wrapping. */
.author-links {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}
.author-links li {
    margin: 6px 0;
    min-width: 0;
}
.author-links a {
    margin-left: 6px;
}
/* Shared author-links wrapping: rows and links break only when they must
   through overflow-wrap anywhere, merged here so the value is stated once. */
.author-links li,
.author-links a {
    overflow-wrap: anywhere;
}

/* Dark-mode icon-stack contrast: the sidebar author links pair a
   fa-circle disc with a fa-inverse glyph, which washes out against the
   dark sidebar tone. Scope the fix to dark mode only (light untouched):
   the disc takes the theme primary and the glyph takes the theme
   background, so both stay readable. */
[data-theme="dark"] .author-links .fa-stack .fa-circle {
    color: var(--color-primary, #7fb4ff);
}
[data-theme="dark"] .author-links .fa-stack .fa-inverse {
    color: var(--color-bg, #040b1b);
}

/* Homepage row headers: visible small-caps labels styled like the theme's
   own sidebar section headers (same tone via --sidebar-heading; no new
   fonts, no JS). width/flex-basis keep the label on its own line inside
   the featured row's flex track. */
.home-row-header {
    width: 100%;
    flex-basis: 100%;
    margin: 0 0 6px;
    font-size: .85em;
    font-weight: 700;
    letter-spacing: .08em;
    font-variant: small-caps;
    text-transform: lowercase;
    color: var(--sidebar-heading, #808080);
}

/* Homepage top-tags row: distinct slim strip (subtle top/bottom rule)
   above the post list, separated from the banner and the featured row.
   The 10px top margin keeps the strip close under the banner while the
   20px bottom rhythm below the rows stays (featured-posts margin-bottom
   plus the theme intro-header margin). */
.home-top-tags {
    margin: 10px 0 16px;
    padding: 6px 0;
    border-top: 1px solid var(--color-border, #eee);
    border-bottom: 1px solid var(--color-border, #eee);
    white-space: nowrap;
    overflow-x: auto;
}
.home-top-tags .tags a {
    display: inline-block;
    margin: 0 6px 6px 0;
}

/* Homepage featured-posts row: square cards, image cover when the page
   carries .Params.image, themed title tile otherwise. */
.featured-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.featured-card {
    flex: 1 1 0;
    min-width: 140px;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border, #eee);
}
.featured-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Flush featured cover: the theme's .post-container img rule (margin
   1.5em auto plus height auto, specificity 0,1,1) beats the plain
   .featured-card img rule on margin, so this higher-specificity
   override keeps the image flush to the tile top. Featured cards render
   only inside .post-container (see layouts/home.html), so this single
   override covers every featured cover and the base rule carries no
   margin of its own. (display block already removes the inline baseline
   gap, so no vertical-align is needed.) */
.post-container .featured-card img {
    margin: 0;
    height: 100%;
}
.featured-tile {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    background-color: var(--bg-catalog-active, #f5f5f5);
    color: var(--color-text-main, #404040);
}
/* Featured overlay title: banner-style centered overlay sharing the
   --overlay-shadow token (defined once in :root). No background here:
   the vendored theme sets no background on this project-owned class and
   spans default to transparent, so the overlay reads through the cover
   image directly. */
.featured-title {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    color: #fdfdfd;
    font-size: 19px;
    text-align: center;
    text-shadow: var(--overlay-shadow);
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    max-height: 6em;
}
.featured-title-text {
    display: block;
    font-size: 19px;
    line-height: 1.2;
    margin-bottom: 6px;
}
/* Shared overlay small type: date and excerpt both sit smaller than the
   title at the same size and leading, merged here so the shared values
   are stated once while each block below keeps its own extras. */
.featured-date,
.featured-excerpt {
    font-size: 12px;
    line-height: 1.3;
}
.featured-date {
    display: block;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.featured-excerpt {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* Linked-card affordance: the theme renders a zoom cursor over linked
   images, so featured cards and Latest card thumbs force the pointer. */
.featured-card,
.featured-card img,
.post-preview a,
.post-thumb {
    cursor: pointer;
}

/* Zoom-cursor override: the vendored theme's hugo-theme-cleanwhite.css
   rule `a img:hover, a img:focus` (specificity 0,1,2) beats the plain
   .featured-card img and .post-thumb affordance rules on hover, so the
   magnifier survived on featured covers and Latest card thumbnails (the
   thumb img is wrapped in an anchor in post_list.html). This single
   merged rule restores the pointer on every covered hover and focus
   state without !important: featured selectors carry specificity 0,3,2
   and thumb selectors 0,2,2, each beating 0,1,2 on its own. */
.post-container a.featured-card img:hover,
.post-container a.featured-card img:focus,
.post-container a img.post-thumb:hover,
.post-container a img.post-thumb:focus,
.post-container a:hover img.post-thumb,
.post-container a:focus img.post-thumb {
    cursor: pointer;
}

/* Light-mode contrast: the vendored theme's light defaults render tag
   pills white-on-white and sidebar body text near-white; scope readable
   values to every non-dark state (default/unset/light) without touching
   dark mode. */
:root:not([data-theme="dark"]) {
    --tag-text: #404040;
    --tag-border: rgba(0,0,0,.25);
    --tag-border-hover: #0085a1;
    --sidebar-text: #505050;
}

/* Post sidebar: single slim right column on post pages (nav on top,
   About below). Grid column is col-lg-2, unified with the homepage
   sidebar at the same slim width; the 13px rail type comes from the
   shared .sidebar-container rule above so both rails match, and colors
   come from existing theme variables only, so
   light and dark modes follow the theme. */
.post-nav-list {
    list-style: none;
    padding-left: 0;
    margin-top: 6px;
}
.post-nav-list li {
    margin: 4px 0;
    word-break: break-all;
}
.post-sidebar a {
    color: var(--link-color, #404040);
}
.post-sidebar a:hover {
    color: var(--link-hover, #0085a1);
}

/* Post-list cards: left-side square thumbnail, only when the page
   carries .Params.image (text-only otherwise). */
.post-preview {
    overflow: hidden;
}
.post-thumb {
    float: left;
    width: 160px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 15px 10px 0;
    border: 1px solid var(--color-border, #eee);
    padding: 2px;
    background-color: var(--color-bg, #fff);
}

/* Thumb gap guard: the theme's .post-container img rule (margin 1.5em
   auto, specificity 0,1,1) beats the plain .post-thumb rule (0,1,0)
   and collapses the text gap, so this higher-specificity override
   restores the 15px right gap with the frame intact. */
.post-container .post-thumb {
    margin: 0 15px 10px 0;
}

/* Row-header rhythm: the theme's .post-container h1..h6 rule
   (margin 30px 0 10px, specificity 0,1,1) beats the plain
   .home-row-header rule (0,1,0), so row headers and the in-body post
   title kept a 30px top gap. These higher-specificity overrides restore
   the 10px top rhythm to match the rows. */
.post-container .home-row-header,
.post-container > h2:first-of-type {
    margin-top: 10px;
}

/* Post in-body opener: the topics chips row sits directly above the
   repeated in-body title, so the row carries a 12px bottom gap. Scoped
   to direct children of the post content column, so banner chips
   (inside .post-heading) and sidebar tag blocks never match. */
.post-container > .tags {
    margin-bottom: 12px;
}

/* Content gutters: modest 15px side padding on the content and
   sidebar columns of the homepage and post pages only. Scoped to
   the content column and sidebar column classes, so the navbar
   and footer grids keep their gutters. */
.post-container[class*="col-"],
.sidebar-container[class*="col-"],
.post-sidebar[class*="col-"] {
    padding-left: 15px;
    padding-right: 15px;
}

/* Post sidebar nav groups: the OTHER TOPICS heading sat tight against
   the THIS POST tag block, so the heading carries a 14px top gap. */
.post-sidebar-nav .tags + .home-row-header {
    margin-top: 14px;
}

/* Sidebar rules: the content columns above keep a modest 15px side
   padding, which already holds dividers off the right edge, so the
   sidebar section dividers need no extra inset. Covers both
   sidebars at every viewport where they render. */
.sidebar-container hr,
.post-sidebar hr {
    margin-right: 0;
}

/* Link focus flash guard: the vendored bootstrap.css rule `a:focus`
   (specificity 0,1,1) paints a dotted outline between click and page
   load, so this higher-specificity override (0,1,2) suppresses the
   mouse-click flash without !important. Only the outline is touched,
   so the theme color and underline states on hover and focus stay.
   Keyboard users keep a thin theme-primary focus-visible ring, which
   follows light and dark modes through the theme variable. */
body a:focus {
    outline: none;
}
body a:focus-visible {
    outline: 1px solid var(--color-primary, #0085a1);
    outline-offset: 2px;
}

/* Persona byline avatar: small round picture before the byline name.
   Renders only when the post's website version records a persona with a
   picture (author_image param); name-only bylines are unaffected. */
.byline-avatar {
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    vertical-align: -0.35em;
    margin-right: 0.3em;
}

/* Home-card byline specificity fix: home cards render inside a
   .post-container ancestor, so the vendored theme rule `.post-container img`
   (specificity 0,1,1, site/_vendor/.../hugo-theme-cleanwhite.css:804-809:
   display block + centered auto margins) beats the plain .byline-avatar rule
   (0,1,0) and forces the tiny card avatar onto its own centered row. This
   0,3,1 override wins regardless of order; values mirror the base rule so
   only display/margin change. The base rule stays for the banner avatar
   outside .post-container. */
.post-preview .post-meta img.byline-avatar {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    vertical-align: -0.35em;
    margin: 0 0.3em 0 0;
}

/* Banner credit right-aligned: the banner span.meta block ("Posted by
   NAME on DATE" plus optional counter/Last-Modified) renders right-aligned
   inside the centered banner panel. Alignment only — title, subtitle, and
   chips stay centered. No colors set here, so light and dark modes follow
   the theme. */
.intro-header .post-heading .meta {
    display: block;
    text-align: right;
}

/* List-card credit right-aligned: each Home / All-posts card's
   p.post-meta block ("Posted by <tiny avatar> NAME on DATE" plus
   optional Last-Modified) renders as a single right-aligned line under
   the preview, matching the banner-credit style. Alignment only —
   avatar, name, date, links, and the metadata-override path untouched.
   Scoped to .post-preview so the theme-wide .post-meta uses elsewhere
   (vendored .one-tag-list archive/tag rule, search-algolia span) never
   match; project emits .post-preview > p.post-meta only from
   layouts/partials/post_list.html (home.html + taxonomy/topic.html).
   No colors set, so light and dark modes follow the theme. Single line
   by construction (no wrapping change; very long names/dates wrap
   naturally rather than truncate). */
.post-preview .post-meta {
    display: block;
    text-align: right;
    margin-top: 12px;
    margin-bottom: 0;
}

/* Body byline: centered vertical stack below the in-body post title
   (layouts/post/single.html). The in-body title centers unconditionally;
   the avatar + posted-by line + separator render only on the default
   banner path. Column flex centers every child, so the stack stays
   centered at narrow widths. Colors come from existing theme variables
   only, so light and dark modes follow the theme. */
.byline-body-title {
    text-align: center;
}
.byline-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 12px 0 16px;
}
.byline-body-avatar {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 10px;
}
.byline-body a {
    color: var(--link-color, #404040);
}
.byline-body a:hover {
    color: var(--link-hover, #0085a1);
}
.byline-body-line {
    font-weight: 400;
}
.byline-body-line a {
    font-weight: 600;
}