/*
 * gogo-app.css - layer 5 of 5 (foundation, tokens, theme, components, APP).
 *
 * The page shell only: the sticky nav slot, the main column, section rhythm, the reading
 * column and the footer. Components belong in gogo-custom.css, not here (the off-kit lint
 * fails on a component-like class defined in this layer).
 */

.gogo-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
}

/* The nav floats: sticky, and its height is taken back out of the flow so the first band of
   a page can run up underneath it. */
.gogo-nav {
    position: sticky;
    top: 0;
    z-index: var(--gogo-z-nav);
    padding-top: var(--gogo-nav-offset);
    margin-bottom: calc(-1 * var(--gogo-nav-clear));
    height: var(--gogo-nav-clear);
    box-sizing: border-box;
}

.gogo-main {
    flex: 1 0 auto;
    padding-top: var(--gogo-nav-clear);
}

.gogo-section {
    padding-top: var(--gogo-section-gap);
    padding-bottom: var(--gogo-section-gap);
}

/* The first section of a page starts the same distance under the bar on every page. */
.gogo-main > .gogo-section:first-child {
    padding-top: var(--gogo-nav-after);
}

.gogo-section-tight {
    padding-top: var(--gogo-space-12);
}

/* A section that follows another one directly: the previous section's bottom gap is enough. */
.gogo-section-flush-top {
    padding-top: 0;
}

/* An inner page that opens on the home page's sunrise: the wash runs full width up under the
   floating nav, as the home hero band does, and melts into the grey over its last 200px. It
   covers the page head's height only, so the rest of the page sits on the grey. */
.gogo-page-wash {
    margin-top: calc(-1 * var(--gogo-nav-clear));
    padding-top: var(--gogo-nav-clear);
    background: var(--gogo-hero-fade), var(--gogo-hero-wash);
    background-size: 100% var(--gogo-page-wash-height);
    background-repeat: no-repeat;
}

.gogo-page-wash > .gogo-section:first-child {
    padding-top: var(--gogo-nav-after);
}

.gogo-reading {
    max-width: var(--gogo-measure);
}

/* ---- Footer ------------------------------------------------------------------------------- */
.gogo-footer {
    position: relative;
    background: var(--gogo-footer-bg);
    box-shadow: var(--gogo-shadow-up);
    border-top: var(--gogo-hairline-width) solid var(--gogo-border);
    padding-top: var(--gogo-space-8);
    padding-bottom: var(--gogo-space-8);
    font-size: var(--gogo-small-size);
    color: var(--gogo-text-muted);
}

.gogo-footer-row {
    display: flex;
    flex-direction: column;
    gap: var(--gogo-space-4);
}

.gogo-footer-name {
    font-weight: var(--gogo-weight-semibold);
    color: var(--gogo-text-strong);
}

.gogo-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--gogo-space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Each link is a full 44px tall. It has no minimum width: one on "Blog" padded that link's right
   side and left the gaps between links uneven, and the shortest word is still wider than
   WCAG's 24px target. The gap carries the spacing. */
.gogo-footer-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--gogo-touch);
    color: var(--gogo-text-muted);
    text-decoration: none;
}

.gogo-footer-link:hover {
    color: var(--gogo-text-strong);
    text-decoration: underline;
}

@media (min-width: 960px) {
    .gogo-footer-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}