/*
 * Footer Styles – Märsta Forever 2024
 *
 * Följer samma token-system som front-page.css.
 * Bakgrund: --mc-charcoal (kolsvart)
 * Accent:   --mc-yellow (gul topplistel + rubriker)
 * Text:     --mc-white / rgba(255,255,255,0.7)
 */

/* ── WRAPPER ─────────────────────────────────────── */
.mc-footer {
    background: var(--mc-charcoal);
    color: var(--mc-white);
    border-top: 4px solid var(--mc-yellow);
    font-family: var(--font-body);
}

/* ── TOP BAR: KONTAKTA OSS ───────────────────────── */
.mc-footer__top {
    padding: 3.5rem 0 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mc-footer__top-heading {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-solid);
    text-transform: uppercase;
    color: var(--mc-white);
    margin: 0 0 0.75rem;
}
.mc-footer__top-sub {
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 60ch;
}

/* ── 4-COLUMN INFO GRID ──────────────────────────── */
.mc-footer__grid-wrap {
    padding: 3rem 0 3.5rem;
}
.mc-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
}
.mc-footer__col-heading {
    font-family: var(--font-display);
    font-size: var(--fs-ui);
    line-height: var(--lh-display);
    text-transform: uppercase;
    color: var(--mc-yellow);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(249, 178, 51, 0.25);
}
.mc-footer__col-body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mc-footer__col-body p { margin: 0; }
.mc-footer__col-body strong {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--mc-white);
    font-weight: 400;
}
.mc-footer__col-body a {
    color: var(--mc-yellow);
    text-decoration: none;
    transition: var(--transition-fast);
}
.mc-footer__col-body a:hover {
    color: var(--mc-white);
    text-decoration: underline;
}

/* ── FASTPARTNER BAR ─────────────────────────────── */
.mc-footer__fastpartner {
    background: var(--mc-blue);
    border-top: none;
    padding: 1.5rem 0;
}
.mc-footer__fastpartner-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}
.mc-footer__fp-label {
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
}
.mc-footer__fp-link {
    display: flex;
    align-items: center;
    opacity: 0.85;
    transition: var(--transition-fast);
}
.mc-footer__fp-link:hover { opacity: 1; }
.mc-footer__fp-logo {
    height: 28px;
    width: auto;
    /* SVG contains orange #ff410f – pop mot svart bakgrund */
    filter: brightness(1);
}
.mc-footer__copyright {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.35);
    margin-left: auto;
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 1024px) {
    .mc-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .mc-footer__top-heading { font-size: var(--fs-h3); }
}
@media (max-width: 600px) {
    .mc-footer__grid { grid-template-columns: 1fr; }
    .mc-footer__copyright { margin-left: 0; }
    .mc-footer__fastpartner-inner { justify-content: flex-start; }
}

/* ── WCAG: REDUCED MOTION ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-footer__fp-link,
    .mc-footer__col-body a { transition: none; }
}