﻿:root {
    --footer-bg-color: #1E3A8A; /* bg-blue-800 */
    --footer-text-color: #FFFFFF;
    --footer-link-hover-color: #d1d5db;
    --footer-padding-y: 3rem;
    --footer-padding-x: 1.25rem;
    --divider-color: #FFFFFF; /* Adjust as needed */
    --divider-width: 1px; /* Equivalent to Tailwind's divide-x */
}

/* Footer.css */
p {
    margin: 0;
}

.custom-footer {
    background-color: var(--color-mork-bla); /* Equivalent to bg-blue-800 */
    padding-top: 3rem; /* py-12 */
    padding-bottom: 3rem; /* py-12 */
    color: #FFFFFF; /* text-white */
    font-family: 'filson-pro', sans-serif; /* As per provided styles */
    box-sizing: border-box;
}

.footer-container {
    max-width: 1200px; /* Assuming container width */
    margin: 0 auto;
    padding-left: 1.25rem; /* px-5 */
    padding-right: 1.25rem; /* px-5 */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem; /* gap-6 */
    color: #FFFFFF;
}

.footer-logo img {
    width: 180px;
    /*    height: 120px;*/
}

.footer-address {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* space-y-1 */
    font-style: normal; /* not-italic */
}

.footer-title {
    font-weight: 500; /* font-medium */
}

.footer-link {
    font-size: 1rem;
    color: #FFFFFF;
    text-decoration: none;
    margin-top: 0.0rem;
    display: block;
}

/*    .footer-link:hover {
        text-decoration: underline;
    }*/

.footer-social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0rem; /* mt-4 */
    height: fit-content; /* Ensures the container height matches its content */
}

    .footer-social a {
        color: #FFFFFF;
        text-decoration: none;
        padding: 0.0rem; /* Adjust padding as needed */
        display: flex; /* Ensures SVG icons are centered vertically */
        align-items: center;
        justify-content: center;
    }

        .footer-social a:hover {
            color: #d1d5db; /* Slight color change on hover */
        }

    .footer-social.divide-x a:not(:first-child) {
        border-left: var(--divider-width) solid var(--divider-color);
        margin-left: 1.5rem; /* Space between border and icon */
        padding-left: 1.5rem; /* Adjust padding to ensure icons aren't too close */
        height: 100%; /* Ensure the border spans the full height of the container */
    }
    
    /* Optional: If the dividers are still too high, adjust the line height or padding */
    .footer-social.divide-x a {
        line-height: 0.5;
    }

@media (min-width: 1024px) {
    .footer-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 1024px;
    }

    .footer-social {
        justify-self: end; /* lg:justify-self-end */
        margin-top: 0; /* sm:mt-0 */
    }
}

.footer-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 640px) {
    .footer-container {
        max-width: 640px
    }
}

@media (min-width: 768px) {
    .footer-container {
        max-width: 768px
    }
}

@media (min-width: 1024px) {
    .footer-container {
        grid-template-columns: repeat(4, 1fr); /* Four columns */
        max-width: 1024px
    }
}

@media (min-width: 1280px) {
    .footer-container {
        max-width: 1280px
    }
}

@media (min-width: 1536px) {
    .footer-container {
        max-width: 1536px
    }
}

@media (min-width: 1024px) {
    p {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

blockquote, dl, dd, hr, figure, pre {
    margin: 0;
}
