/* ==========================================================
   Bottom Brand Bar
========================================================== */

/* About, Terms and Privacy don't load base.css, so these links showed in the browser's
   default blue underlined style. Same reset as base.css's "a", kept at the same low
   specificity (:where) so the classes below still win. */
:where(.bottom-brand-bar) a{
    color:inherit;
    text-decoration:none;
}

.bottom-brand-bar{
    background:var(--bg-main-light);
    border-top:1px solid var(--border-card);
    padding:30px 24px;
    transition:background-color var(--transition-speed),
               border-color var(--transition-speed);
}

/* ==========================================================
   Container
========================================================== */

.bottom-brand-container{
    max-width:1280px;
    margin:0 auto;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    flex-wrap:wrap;
}

/* ==========================================================
   Column 1
 ========================================================== */

.bottom-brand-left{
    flex:0 0 340px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
}

/* Logo */




/* The name logo is black text: invert it on the dark theme. This rule used to live
   only in style.css (home page), so every other page showed it black on dark. */

/* Desktop: the column is left-aligned; centre the shared logo within it */
@media (min-width:1025px){
    .bottom-brand-left .nav-logo{
        align-self:center;
    }
}

/* Content */

.bottom-brand-content{
    max-width:340px;

    font-size:13px;
    line-height:1.7;

    color:var(--text-secondary);
}

.bottom-brand-content p{
    margin:0;
}

/* ==========================================================
   Social Icons
 ========================================================== */

.bottom-brand-social{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.bottom-social-icon{
    /* 44x44 minimum tap target (was 36x36) — icon inside stays 20x20, box
       just gets more padding around it, same visual weight. */
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:8px;

    background:var(--bg-card);
    border:1px solid var(--border-card);

    transition:all .2s ease;
}

.bottom-social-icon:hover{
    transform:translateY(-2px);
    border-color:var(--border-hover);
}

.bottom-social-icon img{
    width:20px;
    height:20px;
    object-fit:contain;
}

.bottom-social-icon i{
    font-size:20px;
    color:var(--text-primary);
}

/* ==========================================================
   Column 2
 ========================================================== */

.bottom-brand-quicklinks{
    flex:1;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    gap:8px;

    margin-top:22px;
}

.bottom-section-title{
    margin:0 0 8px;

    font-size:18px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:.5px;

    color:var(--color-primary);
}

.bottom-quicklink-item{
    color:var(--text-secondary);
    text-decoration:none;
    font-size:13px;
    transition:color .2s ease;

    /* 44px minimum tap target height (was ~21px, just the text line-height) */
    display:inline-block;
    padding:2px 4px;
}

.bottom-quicklink-item:hover{
    color:var(--color-primary);
}

/* ==========================================================
   Column 3 & 4 Wrapper (Right Column)
 ========================================================== */

.bottom-brand-right{
    flex:0 0 auto;
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
    gap:60px;
    margin-top:22px;
}

.bottom-brand-company{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:8px;
}


/* ==========================================================
   App Store Buttons
 ========================================================== */

.bottom-brand-download{
    display:flex;
    align-items:flex-start;
}

.bottom-brand-apps{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.bottom-app-icon{
    /* 44px minimum tap target height — badge image itself stays 120x36
       (official app-store badge proportions), just vertically centered in
       a taller clickable box instead of visually growing the badge. */
    display:flex;
    align-items:center;
    width:120px;
    height:44px;
    padding:0;
    margin:0;
    background:none;
    border:none;
}

/* Placeholder badge: blurred, inert, no image or link. */
.bottom-app-icon-wrap{
    position:relative;
    display:block;
    width:120px;
    height:44px;
}

.bottom-app-icon-wrap .coming-soon-label{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    color:var(--text-primary);
    text-shadow:none;
    white-space:nowrap;
}

.bottom-brand-apps .bottom-app-icon-blurred{
    display:block;
    flex:none;
    width:120px;
    height:36px;
    background:var(--neutral-alpha-45);
    border-radius:8px;
    margin:4px 0;
    filter:blur(6px);
    pointer-events:none;
    user-select:none;
}

.bottom-app-icon img{
    display:block;
    width:120px;
    height:36px;
    object-fit:contain;
}

/* ==========================================================
   Responsive
 ========================================================== */

@media (max-width:1024px){

    .bottom-brand-container{
        gap:36px;
    }

    .bottom-brand-left{
        flex:1 1 100%;
        align-items:center;
        text-align:center;
        margin-bottom:12px;
    }


    .bottom-brand-content{
        max-width:100%;
    }

    .bottom-brand-social{
        justify-content:center;
    }

    .bottom-brand-quicklinks{
        flex:0 0 auto;
        align-items:flex-start;
        text-align:left;
        margin-top:0;
    }

    .bottom-brand-right{
        flex:1;
        margin-top:0;
        gap:20px;
        justify-content:space-between;
    }

    .bottom-brand-company{
        flex:1;
        align-items:center;
        text-align:center;
    }

    .bottom-brand-download{
        flex:0 0 auto;
        justify-content:flex-end;
    }

}

@media (max-width:768px){

    .bottom-brand-container{
        gap:32px 24px;
    }

    .bottom-brand-right{
        display:contents;
    }

    .bottom-brand-left{
        flex:1 1 100%;
        align-items:center;
        text-align:center;
        margin-bottom:0;
    }


    .bottom-brand-content{
        max-width:100%;
    }

    .bottom-brand-social{
        justify-content:center;
    }

    .bottom-brand-quicklinks{
        flex:1 1 calc(50% - 12px);
        align-items:flex-start;
        text-align:left;
        margin-top:0;
    }

    .bottom-brand-company{
        flex:1 1 calc(50% - 12px);
        align-items:flex-end;
        text-align:right;
        margin-top:0;
    }

    .bottom-brand-download{
        flex:1 1 100%;
        width:100%;
        margin-top:0;
        justify-content:center;
    }

    .bottom-brand-apps{
        width:100%;
        flex-direction:row;
        gap:8px;
        justify-content:center;
    }

    .bottom-app-icon{
        width:120px;
        height:44px;
    }

    .bottom-app-icon img{
        width:120px;
        height:36px;
    }

}