/**
 * site-footer.css — styles for the one wellew.ai footer.
 *
 * The footer's markup lives in partials/footer.html and is stamped into
 * every page by scripts/sync-footer.js; that partial also links this file
 * and site-footer.js (the ghost's eyes). Pages carry no footer CSS of
 * their own.
 *
 * Every rule is scoped to .site-footer-container so page styles (link
 * underlines, resets, line heights) can't leak in and these can't leak
 * out. Colors are set on the footer itself for the same reason.
 * Needs Readex Pro (400, 700), which every page already loads.
 *
 * Mobile first; desktop layout from 801px.
 */

.site-footer-container {
    --brand-dark: #172b39;
    --primary-color: #ffffff;
    --footer-text-color: var(--brand-dark);
    --accent-color: #1e84f3;
    --calories-color: #f99191;
    --protein-color: #b880eb;
    --fat-color: #80eba1;
    --carbs-color: #1e84f3;

    background-color: var(--primary-color);
    color: var(--footer-text-color);
    padding: 60px 5% 0;
    font-family: 'Readex Pro', sans-serif;
    line-height: normal;
    position: relative;
    overflow: hidden;
    /* Above .main-content-wrap (5), below the header (1000) and modals (2000). */
    z-index: 6;
}
.site-footer-container * { margin: 0; padding: 0; box-sizing: border-box; }

/* Journal, tools and comparison pages are white, so space the footer off and mark its top. */
.topbar ~ .site-footer-container { margin-top: 60px; border-top: 1px solid #e7e8ea; }

.site-footer-container .footer-content-wrapper { position: relative; z-index: 2; padding-bottom: 100px; }

.site-footer-container .footer-top {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
    text-align: left;
}

.site-footer-container .footer-description { font-size: 1.1rem; line-height: 1.7; }

/* Phones: the four link columns as a 2x2 grid; a single row from 801px. */
.site-footer-container .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
}

.site-footer-container .footer-column { flex: 1; min-width: 0; }
.site-footer-container .footer-column h3 { font-size: 1.17em; font-weight: 700; margin-bottom: 20px; }
.site-footer-container .footer-column ul { list-style: none; }
.site-footer-container .footer-column ul li { margin-bottom: 10px; }
.site-footer-container .footer-column a {
    text-decoration: none;
    border-bottom: none;
    color: var(--footer-text-color);
    font-size: 1rem;
    transition: color 0.3s ease;
}
.site-footer-container .footer-column a:hover { color: var(--accent-color); background-color: transparent; }

.site-footer-container .footer-bottom {
    border-top: 1px solid #e0e0e0;
    padding-top: 40px;
    text-align: left;
    position: relative;
    z-index: 2;
    background-color: var(--primary-color);
}

.site-footer-container .footer-copyright .tagline { margin-top: 5px; }

.site-footer-container .footer-logo {
    position: absolute; bottom: 0; left: 50%; width: 100%; text-align: center;
    transform: translateX(-50%) translateY(15%); font-size: clamp(4.5rem, 20vw, 8rem);
    font-weight: 900; line-height: 1; color: var(--brand-dark); white-space: nowrap;
    z-index: 1; letter-spacing: -0.05em;
}
.site-footer-container .footer-logo .char-e1 { color: var(--calories-color); }
.site-footer-container .footer-logo .char-l1 { color: var(--fat-color); }
.site-footer-container .footer-logo .char-l2 { color: var(--carbs-color); }
.site-footer-container .footer-logo .char-e2 { color: var(--protein-color); }
.site-footer-container .footer-logo .char-w2 { color: var(--accent-color); }

/* nowrap: the underline is drawn by ::after, which breaks when a phrase wraps across lines. */
.site-footer-container .keyword { position: relative; font-weight: 700; white-space: nowrap; }
.site-footer-container .keyword::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 100%; height: 3px; transition: all 0.3s ease-out; opacity: 1;
}
.site-footer-container .keyword:hover::after { height: 60%; bottom: -5%; opacity: 0.8; border-radius: 2px; }
.site-footer-container .keyword-1::after { background-color: var(--calories-color); }
.site-footer-container .keyword-2::after { background-color: var(--fat-color); }
.site-footer-container .keyword-3::after { background-color: var(--carbs-color); }
.site-footer-container .keyword-4::after { background-color: var(--protein-color); }

/* Peeking ghost: hidden on phones, peeks over the bottom rule on desktop. */
.site-footer-container .ghost-footer-box { display: none; }
.site-footer-container .ghost-container {
    position: absolute; bottom: 0; left: 50%; z-index: -1; width: 120px;
    height: auto; pointer-events: auto; transition: transform 0.2s ease-out; transform: translateX(-50%);
}
.site-footer-container .ghost-img { display: inline; width: 100%; height: auto; user-select: none; opacity: 0.89; }
.site-footer-container .ghost-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.site-footer-container .eye {
    font-weight: 200; position: absolute; width: 11px; height: 23px;
    background-color: transparent; border-radius: 50%; top: 30%; left: 37%;
}
.site-footer-container .right-eye { left: 62%; }
.site-footer-container .eye-highlight {
    width: 6px; height: 6px; background-color: #ffffff; border-radius: 50%; position: absolute;
    top: 50%; left: 50%; margin-top: -3px; margin-left: -3px;
}

@media (min-width: 801px) {
    .site-footer-container .footer-content-wrapper { padding-bottom: 250px; }
    .site-footer-container .footer-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding-bottom: 80px;
        gap: 40px;
    }
    .site-footer-container .footer-description { flex: 1 1 45%; min-width: 300px; }
    .site-footer-container .footer-links { display: flex; flex: 1 1 50%; justify-content: flex-end; gap: 60px; min-width: 400px; }
    .site-footer-container .footer-column { flex: 0 1 auto; }
    .site-footer-container .footer-logo { font-size: clamp(8rem, 25vw, 22rem); }
    .site-footer-container .ghost-footer-box {
        display: block;
        position: relative;
        width: 350px;
        height: 100px;
        background-color: #ffffff;
        margin: 0 auto -101px auto;
        z-index: 1;
    }
    .site-footer-container .ghost-container { width: 150px; }
}