/* ================================================================
   EffiQ Theme — Footer
   Four-column footer layout, links, LinkedIn icon, legal bar.
   Loaded on every page.
================================================================ */

/* ── FOOTER WRAPPER ─────────────────────────────────────────────── */
footer { background: #060D18; padding: 0 0 40px; position: relative; }

/* gradient accent line at top of footer */
footer::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(26,115,232,.55) 30%, rgba(107,79,211,.55) 70%, transparent 100%); margin-bottom: 0; }

/* ── FOUR-COLUMN GRID ───────────────────────────────────────────── */
.f-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; padding: 72px 0 56px; }

/* ── BRAND COLUMN ───────────────────────────────────────────────── */
.f-brand .logo { margin-right: 0; }
footer .logo img { filter: brightness(0) invert(1); }

.f-tagline { font-size: 13px; color: rgba(255,255,255,.28); line-height: 1.75; max-width: 260px; margin-top: 18px; margin-bottom: 24px; }

/* ── LINKEDIN BUTTON ────────────────────────────────────────────── */
.f-li { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: rgba(255,255,255,.32); text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.f-li:hover { border-color: rgba(91,153,247,.45); color: #7BAEF8; background: rgba(26,115,232,.08); }

/* ── COLUMN HEADING ─────────────────────────────────────────────── */
.f-col-hdr { font-family: var(--fh); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 18px; }

/* ── NAV LINKS ──────────────────────────────────────────────────── */
.f-links { display: flex; flex-direction: column; gap: 10px; }
.f-links a { font-size: 14px; color: rgba(255,255,255,.4); transition: color .2s, padding-left .2s; padding-left: 0; }
.f-links a:hover { color: rgba(255,255,255,.82); padding-left: 5px; }

/* ── CONTACT COLUMN ─────────────────────────────────────────────── */
.f-email { display: block; font-size: 14px; color: rgba(255,255,255,.48); transition: color .2s; margin-bottom: 16px; }
.f-email:hover { color: rgba(255,255,255,.85); }

.f-addr { font-style: normal; font-size: 12px; color: rgba(255,255,255,.2); line-height: 1.9; }

/* ── LEGAL BAR ──────────────────────────────────────────────────── */
.f-bar { border-top: 1px solid rgba(255,255,255,.07); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.f-copy { font-size: 12px; color: rgba(255,255,255,.2); }
.f-legal { display: flex; gap: 20px; }
.f-legal a { font-size: 12px; color: rgba(255,255,255,.25); transition: color .2s; }
.f-legal a:hover { color: rgba(255,255,255,.6); }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media(max-width:1024px) { .f-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media(max-width:640px)  { .f-grid { grid-template-columns: 1fr; gap: 32px; padding: 56px 0 40px; } .f-bar { flex-direction: column; align-items: flex-start; } }