/* ==========================================================================
   FOOTER
   Shared footer across all pages.
   Mobile: logo + copyright only. Desktop: 4-column layout.
   ========================================================================== */

/* Footer: dark background, light text */
.footer {
    background-color: var(--color-primary-dark);
    color: var(--color-pink-light);
    padding: var(--space-md) var(--space-sm);
}

/* Content wrapper */
.footer__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
}

/* Nav and contact: hidden on mobile */
.footer__contact,
.footer__legal {
    display: none;
}

/* Logo image */
.footer__logo-img {
    width: 75px;
    height: auto;
}

/* Links: light color, no underline */
.footer__link {
    color: var(--color-pink-light);
    text-decoration: none;
}

/* Section heading: bold, slightly larger */
.footer__heading {
    color: var(--color-pink-light);
    font-weight: 700;
}

/* Email link with icon: flex layout */
.footer__link--email {
    display: inline-flex;
    align-items: center;
}

/* Email icon: scales with text */
.footer__email-icon {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.4em;
}

/* Copyright: body font */
.footer__copyright {
    font-size: var(--text-body-small);
}

/* Social icons row: Instagram, LinkedIn */
.footer__social {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    line-height: var(--lh-body);   /* ← zmena: namiesto min-height */
}

/* Social icon link */
.footer__social-link {
    color: var(--color-pink-light);
    display: inline-flex;
    align-items: center;
    transition: opacity 0.2s ease;
}

.footer__social-link:hover {
    opacity: 0.7;
}

/* Social icon SVG: scales with font */
.footer__social-link svg {
    width: 1.2em;
    height: 1.2em;
}


/* ==========================================================================
   DESKTOP (768px+): 4-column layout
   ========================================================================== */

@media (min-width: 768px) {
    .footer {
        padding: var(--space-lg) var(--space-2xl);
    }

    .footer__content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xl);
        max-width: var(--max-width);
        margin: 0 auto;
        position: relative;
    }

    .footer__contact,
    .footer__legal {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .footer__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .footer__logo-img {
        width: 140px;
    }

    .footer__copyright {
        margin-left: auto;
        font-size: var(--text-body);
    }
    
}