/**
 * Site footer (footer.php), on every page, plus two header tap-target fixes at the end. Replaces the footer rules in main-final-four-*.css, which still load: the
 * rules here are scoped to .pl-footer.stf so they win. Dark by default, light under [data-theme="light"].
 * Text is at least 8:1 on the background in dark mode and 6.8:1 in light (GPT's review: the old grey was about 3.5:1).
 */

.pl-footer.stf {
    --stf-bg: #070707;
    --stf-text: #f5f5f2;
    --stf-text2: #c9ced6;
    --stf-muted: #a3aab6;
    --stf-line: #232c3b;
    padding: 64px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--stf-bg);
    color: var(--stf-text);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
[data-theme="light"] .pl-footer.stf {
    --stf-bg: #f5f5f5;
    --stf-text: #1a1a1a;
    --stf-text2: #3f444c;
    --stf-muted: #50565f;
    --stf-line: #dfe2e7;
    border-top-color: rgba(0, 0, 0, 0.08);
}
.stf *, .stf *::before, .stf *::after { box-sizing: border-box; }
.pl-footer.stf :where(h2, p, ul, li) { margin: 0; padding: 0; }
.pl-footer.stf :where(p, li, span, div) { color: inherit; font-size: inherit; }
.pl-footer.stf ul { list-style: none; }
.pl-footer.stf :focus-visible { outline: 3px solid #f5c518; outline-offset: 3px; border-radius: 4px; }
.pl-footer.stf .stf-wrap { max-width: 1440px; padding-left: 40px; padding-right: 40px; }

/* Brand on the left; three short link columns */
.stf-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.pl-footer.stf .stf-logo { display: inline-block; margin: 0; }
.pl-footer.stf .stf-logo img { display: block; width: auto; height: 56px; }
.pl-footer.stf .stf-tag { margin-top: 16px; max-width: 30em; font-size: 16px; font-weight: 500; color: var(--stf-text); }
.pl-footer.stf .stf-about { margin-top: 10px; max-width: 34em; font-size: 15px; color: var(--stf-text2); }
.pl-footer.stf .stf-h { margin: 0 0 6px; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stf-muted); }
.pl-footer.stf .stf-col li { margin: 0; }
.pl-footer.stf .stf-col a { display: inline-flex; align-items: center; min-height: 36px; font-size: 15px; color: var(--stf-text2); text-decoration: none; }
.pl-footer.stf .stf-col a:hover { color: var(--stf-text); text-decoration: underline; }

.pl-footer.stf .stf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--stf-line); font-size: 14px; color: var(--stf-text2); }
.pl-footer.stf .stf-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pl-footer.stf .stf-legal a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--stf-text2); text-decoration: none; }
.pl-footer.stf .stf-legal a:hover { color: var(--stf-text); text-decoration: underline; }
.pl-footer.stf .stf-disc { margin-top: 16px; font-size: 13px; line-height: 1.6; text-align: left; color: var(--stf-muted); }

/* Tablets: the brand above the three columns */
@media (max-width: 1024px) {
    .stf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
    .stf-brand { grid-column: 1 / -1; }
}
/* Phones: Research and Membership side by side, Company below; tighter spacing */
@media (max-width: 760px) {
    .pl-footer.stf { padding: 48px 0 32px; }
    .pl-footer.stf .stf-wrap { padding-left: 18px; padding-right: 18px; }
    .stf-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
    .stf-grid > .stf-col:last-child { grid-column: 1 / -1; }
    .pl-footer.stf .stf-logo img { height: 48px; }
    .pl-footer.stf .stf-col a { min-height: 40px; }
    .pl-footer.stf .stf-legal a { min-height: 44px; }
    .pl-footer.stf .stf-bottom { margin-top: 32px; padding-top: 20px; }
}
/* Header on phones and tablets: the menu button and Join Premium are 44px tap targets */
@media (max-width: 1150px) {
    .pl-nav .pl-mobile-toggle { width: 44px !important; height: 44px !important; }
    .pl-nav .pl-mobile-controls .pl-btn { min-height: 44px; }
}