/*=================================================================================*/
/*        START OF Footer Bottom Navigation / Bottom Menu STYLESHEET               */
/*=================================================================================*/

/* Footer styles */
footer {
    background: #333; 					/* Sets the background color of the footer to dark grey */
    color: white; 					/* Sets the text color to white */
    padding: 3rem 0; 					/* Adds vertical padding of 3rem (top and bottom) */
    margin-top: 4rem; 					/* Adds margin to the top of the footer */
}

/* Footer content container */
.footer-content {
    max-width: 1200px; 					/* Limits the maximum width of the footer content */
    margin: 0 auto; 					/* Centers the content horizontally */
    padding: 0 1rem; 					/* Adds padding of 1rem on left and right */
}

/* Footer navigation container */
.footer-nav {
    display: grid; 					/* Uses grid layout */
    grid-template-columns: repeat(3, 1fr); 		/* Creates three equal columns */
    gap: 2rem; 						/* Adds a gap of 2rem between columns */
    margin-bottom: 2rem; 				/* Adds a bottom margin of 2rem */
}

/* Footer section headings */
.footer-section h5 {
    margin-bottom: 1rem; 				/* Adds a bottom margin of 1rem to section headings */
}

/* Links inside footer sections */
.footer-section a {
    display: block; 					/* Makes each link block-level (taking full width) */
    color: #ddd; 					/* Sets link color to light grey */
    text-decoration: none; 				/* Removes underlines from links */
    margin-bottom: 0.5rem; 				/* Adds a bottom margin of 0.5rem to links */
}

/* Social media links container */
.social-links {
    display: flex; 					/* Uses flexbox to arrange social media icons */
    gap: 1rem; 						/* Adds a gap of 1rem between each icon */
    margin-bottom: 2rem; 				/* Adds a bottom margin of 2rem */
}

/* Individual social media icon styles */
.social-icon {
    color: white; 					/* Sets the icon color to white */
    text-decoration: none; 				/* Removes text decoration (no underlines) */
}

/* Copyright section styles */
.copyright {
    text-align: center; 				/* Centers the text */
    color: #ddd; 					/* Sets the text color to light grey */
    padding-top: 2rem; 					/* Adds top padding of 2rem */
    border-top: 1px solid #555; 			/* Adds a top border with a medium grey color */
}

/*=================================================================================*/
/*                             Responsive adjustments                              */
/*=================================================================================*/

/* Media query for devices with a max width of 480px (mobile) */
@media (max-width: 480px) {
    .footer-nav {
        grid-template-columns: 1fr; 			/* Stacks footer navigation items into a single column */
    }
}

/* Media query for devices with a max width of 768px (tablet and smaller) */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 0; 					/* Removes padding from content wrapper */
    }

    .footer-nav {
        grid-template-columns: 1fr 1fr; 		/* Changes to two equal-width columns */
    }
}

/*=================================================================================*/
/*          END OF Footer Bottom Navigation / Bottom Menu STYLESHEET               */
/*=================================================================================*/