/* footer.css -- Divider, site footer, wordmark, trailing mobile overrides
   Part of the site stylesheet, split out of the former single
   site.css. Load order is significant and is fixed in
   src/view/layout.php -- theme first (tokens), then base, then
   layout, then components. Rules were moved verbatim, in their
   original order, so the cascade is unchanged. */

.divider {
    border: none;
    border-top: 1px dashed var(--border-neutral-default);
    margin: var(--spacing-10) 0;
}

/* footer */

.site-footer {
    flex-shrink: 0;
    margin-top: var(--spacing-20);
    /* .wordmark is position:fixed, out of normal flow entirely -- the
       page's own scrollable length no longer accounts for it at all.
       This forces just enough extra scroll room (roughly the
       wordmark's own rendered height) so the page keeps scrolling past
       it instead of running out of content right as it appears. */
    margin-bottom: 250px;
}

.footer-inner {
    width: min(var(--container-xl), calc(100% - var(--page-offset)));
    margin: 0 0 0 var(--page-offset);
    padding: var(--spacing-8) var(--spacing-5);
    position: relative;
}

.footer-inner::before {
    /* border-top: dashed gives no control over dash length/thickness
       -- a repeating gradient does. */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-image: linear-gradient(to right, var(--border-neutral-default) 70%, transparent 30%);
    background-size: 16px 2px;
    background-repeat: repeat-x;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-8);
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-20);
    margin-bottom: var(--spacing-8);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    min-width: 140px;
}

.footer-column-header {
    font-size: var(--text-size-small);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-muted);
    margin: 0 0 var(--spacing-1);
}

.footer-column a {
    color: var(--fg-neutral-body);
    text-decoration: none;
}

.footer-column a:hover {
    color: var(--fg-neutral-accent);
}

.copyright {
    color: var(--fg-neutral-muted);
    font-size: var(--text-size-small);
    margin: 0;
}

.wordmark {
    /* position:fixed, always at the viewport bottom regardless of
       scroll -- pushed down 40% of its own height via translateY so
       40% of it permanently sits below the viewport edge, cropped.
       No background color of its own -- body::after is the only fade
       layer here, same reasoning as .site-header/body::before.
       backdrop-filter still blurs the footer content scrolling
       underneath it independently of that. */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 100;
    transform: translateY(40%);
    background: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    font-size: clamp(72px, 15vw, 200px);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--heading-tracking);
    color: var(--bg-neutral-section);
    text-align: center;
    line-height: 1;
    padding: var(--spacing-8) var(--spacing-5) var(--spacing-6);
    user-select: none;
}

.wordmark::before {
    /* Mirror of .site-header::after -- the wordmark's own top edge is
       where its backdrop-filter starts, so content scrolling into view
       above it would otherwise snap from sharp to blurred in one row.
       Mask fades from opaque (bottom, seamless with the wordmark's own
       blur) to transparent (top, reveals sharp content). */
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 24px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    mask-image: linear-gradient(to top, black, transparent);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
    pointer-events: none;
}

body::after {
    /* Mirror of body::before, for the wordmark at the bottom edge --
       same separate-overlay/no-plateau reasoning, gradient direction
       and fade ratio flipped since this anchors to the viewport's
       bottom instead of its top. */
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--top-fade-height);
    background: linear-gradient(180deg, transparent 10%, var(--bg-base) 100%);
    pointer-events: none;
    z-index: 90;
}

/* mobile */

@media (max-width: 640px) {
    .site-header nav {
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }

    body:not(.app-layout) .site-header .brand {
        flex: 0 0 auto;
    }

    .wordmark {
        /* clamp()'s 15vw hits the 72px floor on phone widths, leaving
           it small with wide side gaps -- a steeper vw share and
           tighter padding instead keeps it large and flush edge-to-edge. */
        font-size: 22vw;
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }
}