/* FILE: CSS/footer.css */

/************************************************
 +      🦶🦶🦶       FOOTER STUFF      🥾🥾🥾     +
 +        These are the government links        +
 ***********************************************/
footer {
background-color: #f0f0f0;
font-family: sans-serif;
min-height: 200px; /* was a fixed height: 200px, which clipped/overflowed
                       when a column (like Government Links) had more list
                       items than 200px could fit. min-height keeps the
                       same minimum footer size but lets it grow with content. */
}

.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}

.footer-column {
flex: 1 1 250px; /* allows columns to shrink or grow */
margin: 1rem;
min-width: 200px;
}

.footer-column h4 {
margin: 0;
margin-top: 10px;
font-size: 10px;
font-weight: bold;
margin-bottom: 10px;
color: #505050;
}

.footer-column p {
margin-right: 50px;
font-size: 10px;
color: #505050;
line-height: 1.5;
}

.footer-column ul {
list-style: none;
margin: 0;
}

.footer-column ul li {
margin: -5px;
padding-bottom: 5px;
padding-left: 5px;
}

.footer-column ul li a {
text-decoration: none;
font-size: 10px;
color: #505050;
}

.footer-column ul li a:hover {
text-decoration: underline;
}

.footer-seal {
display: block;        /* ensures it's treated as a block for margin auto centering */
margin: 0 auto;        /* centers horizontally within its container */
height: 150px;         /* increase as needed, e.g., 150px or more */
}

/* MOBILE VIEW as always 🤷‍♂️ */
@media (max-width: 768px) {
footer {
height: auto; /* Allow footer to expand based on content */
padding: 20px 0;
}

.footer-container {
flex-direction: column;
align-items: center;
}

.footer-column {
max-width: 100%;
text-align: center;
margin: 0.5rem 0; 
flex: 1 1 0px; /* Reduce vertical spacing between columns */
}

.footer-column p {
margin-right: 0;
}

.footer-seal {
height: 120px; /* Usob sa size sa seal sa mobile view */
}

/* Para naay page break sa mobile view after "...structure," 
because I am OCD -.- */
.mobile-break {
display: none; /* Hide by default */
}

@media (max-width: 768px) {
.mobile-break {
display: block; /* Show only on mobile */
    }
}
}