/*
 * custom.css — site-specific style overrides
 *
 * Dark mode:  [data-theme="dark"]  on <html>
 * Light mode: [data-theme="light"] on <html>
 *
 * This example colors the .accent class differently per theme.
 * Used in site_overview_html: Welcome to my <span class="accent">photo gallery</span>.
 */

[data-theme="light"] .accent {
    color: #1a7f4b;
}

[data-theme="dark"] .accent {
    color: #4ade80;
}

/* Grid overlay: don't underline links.
 *
 * The [href] is load-bearing. Svelte compiles the built-in rule to
 * `.photo-caption.svelte-<hash> a`, which is (0,2,1); a plain `.photo-caption a`
 * is (0,1,1) and loses, so the underline stays. The attribute selector ties the
 * built-in at (0,2,1) and custom.css is loaded last, so source order wins it.
 *
 * Grid only -- lightbox captions keep their underline, which is the only thing
 * marking them as clickable (grid captions are inert). */
.photo-caption a[href] {
    text-decoration: none;
}

/* Hero: center the logo (site_title_html) over the hero, both ways.
 *
 * The built-in overlay is pinned to the bottom of the hero. Stretching it to the
 * top and making it a flex column lets justify-content center it vertically;
 * the h1 stretches full width and the block <img> centers in it with auto margins.
 * `.hero .hero-overlay` ties the Svelte-scoped `.hero-overlay.svelte-<hash>` at
 * (0,2,0) and custom.css loads last, so these win -- including over the
 * built-in mobile padding-bottom tweak. */
.hero .hero-overlay {
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Uneven top/bottom padding nudges the logo 0.75rem below true center: the
     * logo is exactly centered without it, but its heavy top line reads as high. */
    padding: 2.25rem 2rem 0.75rem;
}

.hero .hero-overlay h1 img {
    margin: 0 auto;
}