/* Override this file to customise the theme's CSS for your site */

/* Give headings an actual size/weight hierarchy instead of relying on the
   "#" prefix alone -- the theme default renders every level at the same
   1rem size. */
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.175rem; font-weight: 700; }
h4 { font-size: 1.075rem; font-weight: 600; }
h5 { font-size: 1.025rem; font-weight: 600; }
h6 { font-size: 1rem; font-weight: 600; }

/* Centre Gutenberg-aligned images -- the "aligncenter" class carried over
   from WordPress does nothing without WordPress's own theme CSS. */
figure.wp-block-image.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Photo captions should read as captions, not body text. Use --off-fg
   rather than --muted: --muted is designed for small decorative marks
   (hash prefixes, blockquote markers) and is too low-contrast against
   --bg for actual caption text to stay readable. */
figcaption {
    font-size: 0.85rem;
    color: var(--off-fg);
    margin-top: 0.5rem;
}

/* Sidebar "Recent Posts" / "Categories" widgets. */
.aside__widget {
    margin-bottom: 1.5rem;
}

.aside__widget:last-child {
    margin-bottom: 0;
}

.aside__widget-title {
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
}

.aside__widget-title::before {
    content: none;
}

.aside__widget ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* "Projects" dropdown in the top nav. Pure CSS: shows on hover (mouse) or
   focus-within (keyboard, since tabbing onto the parent link or any child
   link keeps focus inside the <li>). */
.main-nav__item--has-children {
    position: relative;
}

.main-nav .main-nav__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    gap: 0;
    min-width: 14rem;
    margin: 0;
    padding: 0.5rem 0;
    background: var(--bg);
    border: 1px solid var(--muted);
    z-index: 10;
}

.main-nav__item--has-children:hover .main-nav__dropdown,
.main-nav__item--has-children:focus-within .main-nav__dropdown {
    display: flex;
}

.main-nav__dropdown li {
    display: block;
}

.main-nav__dropdown a {
    display: block;
    padding: 0.25rem 1rem;
    white-space: nowrap;
}

/* Decorative owl mark after each post's text, bottom-right. clear: both
   first, so it starts below any float: right images already in the post
   (several migrated posts float an image beside a paragraph); then float
   it and pull it up part-way, so it sits near the end of the text rather
   than in its own empty row underneath.

   Deliberately *not* pulled up by its full height + margin (which did
   land pixel-exact against a long closing paragraph, but reaches back
   far enough to overlap whatever comes before a short one -- confirmed
   on the front page, where a two-line closing paragraph let the owl
   creep up into the bullet list above it). 60px is short enough to stay
   clear of anything but a very short closing line, at the cost of a
   small, harmless gap under the text on longer posts instead of an
   exact 0px join. */
.content__body .post-owl {
    display: block;
    clear: both;
    float: right;
    width: 100px;
    height: 100px;
    margin-top: -60px;
}

@media (max-width: 600px) {
    .content__body .post-owl {
        float: none;
        margin: 1.5rem auto 0;
    }
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.site-logo img {
    width: 300px;
    height: 300px;
    flex-shrink: 0;
}

.site-logo__text {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 600;
}

@media (max-width: 600px) {
    .site-logo {
        flex-direction: column;
        text-align: center;
    }

    .site-logo img {
        width: 200px;
        height: 200px;
    }

    .site-logo__text {
        font-size: 2.25rem;
    }
}

/* Pagefind's search widget, themed to match the site's flat,
   monospace look (see https://pagefind.app/docs/ui/#styling-with-css).
   The widget's JS/CSS assets (pagefind-ui.js/css) and the search index
   itself don't exist until the post-build `pagefind` step runs -- see
   README.md -- so this has no effect in plain `hugo server` dev mode. */
#search {
    --pagefind-ui-primary: var(--fg);
    --pagefind-ui-text: var(--fg);
    --pagefind-ui-background: var(--off-bg);
    --pagefind-ui-border: var(--muted);
    --pagefind-ui-tag: var(--inner-bg);
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 0;
    --pagefind-ui-font: var(--font-monospace);
}

.comments {
    clear: both;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--muted);
}

.comment {
    margin-top: 1.5rem;
}

.comment--reply {
    margin-left: 2rem;
}

.comment__meta {
    font-size: 0.9em;
    color: var(--off-fg);
}

.comment__meta strong {
    color: var(--fg);
}

.comment__meta a {
    color: var(--off-fg);
    text-decoration: none;
}

.comment__body {
    margin-top: 0.25rem;
}

.comment__body p {
    margin: 0.5rem 0;
}