/* ==========================================================
   FOOTER.CSS — Camille Market Insight
   White 4-column footer, newsletter, bottom bar
   ========================================================== */

.site-footer {
    background:  #fff;
    color:       #000;
    font-family: var(--font-sans);
    border-top:  3px solid var(--crimson);
}

/* ── Main grid ── */
.footer-grid {
    display:               grid;
    grid-template-columns: 2.4fr 1fr 1fr 1fr;
    gap:                   52px;
    padding:               72px 64px 52px;
    border-bottom:         .5px solid rgba(0,0,0,.1);
}

/* ── Brand column ── */
.f-logo-wrap { display: inline-flex; text-decoration: none; margin-bottom: 16px; }
.f-logo-wrap .custom-logo,
.f-logo-img {
    height:     60px !important;
    max-height: 60px !important;
    width:      auto !important;
    max-width:  180px !important;
    display:    block;
    object-fit: contain;
}

.f-tagline { font-size: 14px; font-weight: 400; color: #000; line-height: 1.85; max-width: 260px; margin: 16px 0 22px; }

/* ── Contact links ── */
.f-contacts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.f-contact { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 400; color: #000; text-decoration: none; transition: color .25s; }
.f-contact:hover { color: var(--crimson); }
.f-ci { color: var(--crimson); flex-shrink: 0; }

/* ── Socials ── */
.f-socials { display: flex; gap: 8px; }
.f-soc {
    width:           34px;
    height:          34px;
    border:          .5px solid rgba(0,0,0,.15);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #000;
    text-decoration: none;
    transition:      border-color .25s, color .25s, background .25s;
}
.f-soc:hover { border-color: var(--crimson); color: #fff; background: var(--crimson); }

/* ── Column title ── */
.f-col-title { font-family: var(--font-sans); font-size: 9px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: #000; margin-bottom: 20px; }

/* ── Nav list ── */
.f-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.f-links a { font-size: 14px; font-weight: 400; color: #000; letter-spacing: .04em; text-decoration: none; transition: color .2s, padding-left .2s; }
.f-links a:hover { color: var(--crimson); padding-left: 4px; }

/* ── Newsletter form ── */
.f-newsletter-form { display: flex; flex-direction: column; gap: .5rem; }
.f-newsletter-form input {
    padding:     .6rem .875rem;
    border:      1.5px solid rgba(0,0,0,.15);
    background:  rgba(0,0,0,.03);
    color:       #0a0a0a;
    font-family: var(--font-sans);
    font-size:   .875rem;
}
.f-newsletter-form input::placeholder { color: rgba(0,0,0,.35); }
.f-newsletter-form input:focus { outline: none; border-color: var(--crimson); background: rgba(227,24,55,.04); }
.f-newsletter-btn {
    align-self:      flex-start;
    background:      var(--crimson);
    color:           #fff;
    border:          none;
    padding:         .65rem 1.5rem;
    font-family:     var(--font-sans);
    font-size:       10px;
    font-weight:     600;
    letter-spacing:  .18em;
    text-transform:  uppercase;
    cursor:          pointer;
    transition:      background .3s;
}
.f-newsletter-btn:hover { background: var(--crimson-dark); }

/* ── Bottom bar ── */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 24px 64px; }
.f-copy { font-size: 11px; font-weight: 400; color: #000; letter-spacing: .06em; margin: 0; }
.f-copy span { color: var(--crimson); margin: 0 6px; }
.f-legal { display: flex; gap: 24px; }
.f-legal a { font-size: 11px; font-weight: 400; color: #000; letter-spacing: .06em; text-decoration: none; transition: color .2s; }
.f-legal a:hover { color: var(--crimson); }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding: 52px 40px 40px; }
    .f-col--brand { grid-column: span 2; }
    .f-tagline { max-width: 100%; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; padding: 40px 24px 32px; }
    .f-col--brand { grid-column: span 1; }
    .footer-bottom { flex-direction: column; text-align: center; padding: 20px 24px; }
    .f-legal { justify-content: center; flex-wrap: wrap; gap: 16px; }
}