/* Footer General */
.footer {
    color: white;
    font-family: Arial, sans-serif;
    /* On the home page, #webgl (the 3D canvas) is position:fixed with an
       explicit z-index — since .footer has no positioning of its own, it
       falls into CSS's "non-positioned content" paint layer, which renders
       BELOW any positioned element with z-index >= 0 regardless of DOM
       order. The canvas is transparent (alpha:true) so the footer still
       shows through visually, but clicks were landing on the canvas
       instead of passing through to the links underneath. Giving the
       footer its own stacking context above the canvas (same approach
       already used for <main>) fixes that; harmless on every other page
       since there's nothing else there for it to out-stack. */
    position: relative;
    z-index: 1;
}

/* Top Footer */
.footer-top {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    background-color: #adadad; /* lighter shade */
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 200px;
}

.footer-section h3 {
    margin-bottom: 0.6rem;
    font-size: 1.2rem;
}

.footer-section p {
    margin-bottom: 1rem;
    line-height: 1.4;
}

.read-more-btn {
    display: inline-block;     /* makes <a> behave like a button */
    width: auto;
    align-self: flex-start;
    padding: 0.5rem 1rem;
    background-color: #1a8f3c;
    color: white;
    text-decoration: none;     /* removes underline from link */
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.read-more-btn:hover {
    background-color: #156e2e;
}

.footer.footer-section.categories {
    align-items: center;
}

/* Categories Links */
.footer-section.categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section.categories ul li {
    margin-bottom: 0.5rem;
}

.footer-section.categories ul li a {
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
}

.footer-section.categories ul li a:hover {
    color: #156e2e;
}

.footer-section.media {
    gap: 0.8rem;
}

.subscribe form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Subscribe */
.subscribe input[type="email"] {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #ccc;
    flex: 1;
}

.subscribe button {
    padding: 0.5rem 1rem;
    background-color: #1a8f3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.subscribe button:hover {
    background-color: #156e2e;
}

/* Social Media Icons */
.social-icons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0;
    list-style: none;
}

.social-icons li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    color: #262626;
    position: relative;
    overflow: hidden;
    border: 2px solid #fff;
    transition: all 0.3s ease;
}

.social-icons li a .icon {
    font-size: 18px;
    transition: 0.5s;
}

.social-icons li a:hover .icon {
    color: #fff;
    transform: rotateY(360deg);
}

.social-icons li a:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    z-index: 2;
}

.social-icons li:nth-child(1) a:before { background: #3b5999; }
.social-icons li:nth-child(2) a:before { background: #55acee; }
.social-icons li:nth-child(3) a:before { background: #0077b5; }
.social-icons li:nth-child(4) a:before { background: #dd4b39; }

.social-icons li a:hover:before {
    top: 0;
}

/* Bottom Footer */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: gray; /* darker shade */
    padding: 1rem 2rem;
    flex-wrap: wrap;
}

.footer-bottom-right .footer-links {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

.footer-bottom-right .footer-links li a {
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
}

.footer-bottom-right .footer-links li a:hover {
    color: #156e2e;
}

/* Logo size in bottom footer */
.footer-logo {
    max-width: 150px;
    height: 40px;
}

/* The footer keeps its desktop row orientation (both .footer-top and
   .footer-bottom) at every viewport — no mobile-specific restacking.
   Mobile only gets a shorter, more compact .footer-bottom: less padding,
   a smaller logo, and the Terms/Privacy/Compliances links pulled closer
   together. */
@media (max-width: 768px) {
    .footer-bottom {
        padding: 0.6rem 1.25rem;
    }

    .footer-logo {
        max-width: 105px;
        height: 28px;
    }

    .footer-bottom-right .footer-links {
        gap: 0.6rem;
    }
}