/* ───────────────────────── Site footer ─────────────────────────
   @see private/views/templates/footer.php

   Every var() carries a literal fallback. The footer renders on /terms-of-use/ and /privacy/,
   which are legacy standalone documents that load neither main.css nor the webfonts - so the
   custom properties and the font families are both absent there, and without fallbacks the
   footer would come out as unstyled black text in Times New Roman on the one pair of pages
   nobody would think to check. Same reason it uses no FontAwesome. */

/* The <footer> reset.
   main.css has carried a bare `footer { position: absolute; height: 64px; background: grey100;
   font-size: 10px; line-height: 64px; padding: 0 64px }` since an old design, and privacy.css,
   terms-of-use.css and landing.css each override it again. Left alone, this footer renders as a
   64px white bar taken out of the flow and dropped on top of the page - which is exactly what it
   did on first render, and is the same trap hall-of-fame-week.css documents at .hofw_card_foot.
   A class beats an element selector, so these win wherever they land in the cascade. */
.site_footer {
    /* relative rather than static, so the z-index below takes: /privacy/ and /terms-of-use/ pin
       their contents sidebar with position: fixed, which floats it over whatever is at the
       bottom of the page. The old footer was pinned to bottom: 0 and sat under it. */
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: auto;
    width: auto;
    text-align: left;
    /* clear, because /privacy/ and /terms-of-use/ lay their two columns out with float and give
       the wrapper no clearfix - so .col_container measures 0px tall and the columns overhang it
       by a page. Static, the footer landed level with the top of the text and the floats painted
       straight over it. The old absolutely-positioned footer never met this because it was
       pinned to bottom: 0 and took part in no layout at all. */
    clear: both;

    background-color: var(--green900, #2F4F02);
    color: var(--green300, #CCDF86);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    /* The body gradient is `fixed`, so a footer with any transparency would show the top of the
       gradient rather than the bottom. Solid on purpose. */
    margin-top: 48px;
    padding: 40px 16px 32px;
}

.sf_inner {
    /* Matches the 800px the title bar's link row is capped at, plus its 8px of side padding, so
       the footer's left edge lines up with the nav above it on a wide screen. */
    max-width: 1024px;
    margin: 0 auto;
}

/* ── Brand ── */

.sf_brand {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--green800, #42640C);
}
/* Square PNG, rounded here for the same reason as .logo_mark in titleBar.css - iOS rounds it on
   the home screen and nothing rounds it in a page. */
.sf_mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
}
.sf_name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--green200, #EEF5D1);
}
.sf_blurb {
    margin: 4px 0 0;
    max-width: 46ch;
    color: var(--green300, #CCDF86);
}

/* Signed out only. Light on the dark band rather than the site's usual green700-on-white button:
   green300 behind green900 text is 6.5:1 and the panel it sits on is 6.5:1 away from it too, so
   it reads as a control at a glance. The site's .btn_1 colours would have been a 1.7:1 surface
   here - a button you have to look for. Declared after `.site_footer a` and at the same
   specificity, which is what lets it take that rule's colour and padding back. */
.site_footer .sf_cta {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 18px;
    border-radius: 6px;
    background-color: var(--green300, #CCDF86);
    color: var(--green900, #2F4F02);
    font-weight: 700;
}
.site_footer .sf_cta:hover,
.site_footer .sf_cta:focus {
    background-color: #fff;
    color: var(--green900, #2F4F02);
    text-decoration: none;
}

/* ── Link columns ── */

.sf_cols {
    display: grid;
    /* auto-fit down to the phone breakpoint, where it is pinned to two - see the media query at
       the end of this file. Left to itself, auto-fit gave one column on a 320, 360 or 375px
       screen, which is a Galaxy S, an iPhone SE and an iPhone mini: 160px of track plus the 24px
       gap plus 32px of page padding does not fit twice under 384px, so most phones on the site
       got a single stack of sixteen links. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 28px 24px;
}
.sf_col {
    display: flex;
    flex-direction: column;
    /* Tap targets, not a paragraph of links: 8px vertical on each anchor puts ~36px between the
       centres of two neighbours on a phone, where this list is one column. */
    gap: 2px;
}
.sf_head {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green400, #A6C059);
    margin-bottom: 6px;
}
/* Scoped to the footer rather than inheriting main.css's `a { color: var(--grey500) }`, which is
   3.2:1 against this background and was never meant to sit on a dark one. green200 is 8.3:1.

   font-size, position and bottom are the other half of the <footer> reset above: main.css also
   carries `footer a { font-size: 9px; position: relative; bottom: 1px }` from the same old
   design, and 9px is what these links rendered at before this rule existed. */
.site_footer a {
    color: var(--green200, #EEF5D1);
    font-size: 15px;
    position: static;
    bottom: auto;
    /* privacy.css and terms-of-use.css both set `footer a { margin: 0 20px }` for the row of
       links their old footer held. Here that pushed 20px of air either side of every link,
       including the one inside the credit sentence. */
    margin: 0;
    text-decoration: none;
    padding: 8px 0;
}
.site_footer a:hover,
.site_footer a:focus {
    color: #fff;
    text-decoration: underline;
}

/* ── Credit and small print ── */

.sf_base {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--green800, #42640C);
    font-size: 14px;
}
.sf_credit {
    margin: 0;
}
/* The name is the one link down here that is meant to be found, so it is the one thing that is
   not the same colour as the sentence around it. */
.sf_credit a {
    padding: 0;
    font-size: inherit;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sf_legal {
    margin: 8px 0 0;
    color: var(--green400, #A6C059);
    font-size: 13px;
}

/* ── Clearing the fixed mobile tab bar ──
   Below 900px .mobile_tab_bar is fixed over the bottom 48px of the viewport (plus the home
   indicator inset), so without this the credit line sits underneath it. The breakpoint is
   mobile.css's, not one of ours. */
@media screen and (max-width: 900px) {
    .site_footer {
        padding-bottom: calc(32px + var(--tab-bar-h, 48px));
    }
}

/* ── Two columns on a phone, at every phone width ──
   Fixed tracks rather than auto-fit, because the whole point is that the count must not depend
   on whether the labels happen to fit: 1fr each takes whatever is there and lets the long ones
   wrap, which a footer link may do. The column gap comes down with it - 24px is a quarter of the
   usable width on a 320px screen. */
@media screen and (max-width: 600px) {
    /* Two fixed tracks. Multicol was tried here first, to pack the blocks down each column
       rather than align them into rows, and it balanced worse than grid does: the browser fills
       greedily to a computed target, so it put the two short blocks in one column and the two
       long ones in the other and left ~200px empty at the foot of the first. The thing that
       actually caused the hole was a column with one link in it, and that is fixed in
       footer.php - signed out there is no Play column at all now, and the sign-up sits in the
       brand block where it reads as the page's last call rather than as a stubby list. */
    .sf_cols {
        grid-template-columns: 1fr 1fr;
        gap: 28px 16px;
    }
    /* An odd number of blocks leaves the last one alone in its row with an empty cell beside it -
       three signed out, because there is no Play column then. Rather than pad that out with
       something invented, the odd one takes the whole width and lays its links out as a wrapped
       row instead of a stack, which fills it and shortens the footer by two link-heights.
       :last-child:nth-child(odd) is the whole condition: it matches only when the count is odd,
       so signed in (four blocks) nothing here applies. */
    .sf_col:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 20px;
    }
    .sf_col:last-child:nth-child(odd) .sf_head {
        flex-basis: 100%;
    }
    /* The page padding is the other half of the room. 12px a side gives a 320px screen two 136px
       tracks instead of two 132px ones, which is the difference between "Run a prediction league"
       wrapping onto two lines and onto three. */
    .site_footer {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Nothing here touches the bottom padding the pages above already carry to clear that same fixed
   bar - .main-container's 100px, .info_wrapper's 120px, and so on. It was tempting: on a desktop
   the bar is hidden and the padding is a band of empty gradient above the footer. But the
   selectors that carry it differ per page, so a `:has(+ .site_footer)` rule would have tightened
   the gap on some pages and not others, and an inconsistent gap looks more like a bug than a
   uniformly generous one does. The site floats its cards on that gradient everywhere else. */