/* -------------------------
   GLOBAL PAGE STYLING
   ------------------------- */

body {
    /* Removes default browser spacing */
    margin: 0;

    /* Ensures no internal spacing around the body */
    padding: 0;

    /* Soft off-white background for a clean eco-friendly look */
    background-color: #F6F8F5;

    /* Sets the main readable font across the site */
    font-family: 'Poppins', sans-serif;

    /* Dark gray text for better readability than pure black */
    color: #2B2B2B;

    /* Improves readability by adding space between lines */
    line-height: 1.6;
}

/* -------------------------
   TYPOGRAPHY STYLES
   ------------------------- */

h1,
h2,
h3 {
    /* Serif font for headings to give a premium and elegant feel */
    font-family: 'Playfair Display', serif;

    /* Consistent green shade used across branding */
    color: #2F5D50;

    /* Adds subtle spacing between letters for elegance */
    letter-spacing: 0.64px;
}

h1 {
    /* Responsive font size that adapts to screen width */
    font-size: clamp(28.8px, 2.5vw, 35.2px);
}

h2 {
    /* Slightly smaller than h1 but still responsive */
    font-size: clamp(22.4px, 2vw, 28.8px);
}

h3 {
    /* Fixed size for smaller section headings */
    font-size: 20px;
}

/* -------------------------
   HEADER AND NAVIGATION BAR
   ------------------------- */

header {
    /* Solid green background matching the EcoMart theme */
    background-color: rgba(31, 95, 77, 1);

    /* Adds horizontal breathing space inside the header */
    padding: 0px 96px;

    /* Places logo and navigation on the same row */
    display: flex;

    /* Pushes logo to the left and navigation to the right */
    justify-content: space-between;

    /* Vertically aligns items in the header */
    align-items: center;

    /* Keeps the header visible while scrolling */
    position: sticky;

    /* Ensures header stays above other elements */
    z-index: 1000;

    /* Sticks header to the top of the viewport */
    top: 0;
}

/* Logo text inside the header */
header h1 {
    /* Light text color for contrast on dark background */
    color: #F6F8F5;

    /* Slightly bolder weight to emphasize brand name */
    font-weight: 600;

    /* Extra spacing to make the logo feel premium */
    letter-spacing: 1.28px;
}

/* Navigation container */
nav {
    /* Aligns links horizontally */
    display: flex;

    /* Creates space between navigation links */
    gap: 24px;
}

/* Navigation links */
nav a {
    /* White text for visibility on dark header */
    color: #F6F8F5;

    /* Comfortable size for readability */
    font-size: 16.8px;

    /* Removes default underline */
    text-decoration: none;

    /* Slightly bold for clarity */
    font-weight: 500;

    /* Required for positioning the hover underline */
    position: relative;

    /* Creates space for the underline animation */
    padding-bottom: 3.2px;
}

/* Underline animation effect */
nav a::after {
    /* Creates a decorative line element */
    content: "";

    /* Allows precise positioning under the text */
    position: absolute;

    /* Aligns underline from the left */
    left: 0;

    /* Places underline at the bottom of the link */
    bottom: 0;

    /* Starts hidden */
    width: 0%;

    /* Thickness of the underline */
    height: 2px;

    /* Soft green highlight color */
    background-color: #A8C3A0;

    /* Smooth animation when hovering */
    transition: width 0.3s ease;
}

/* Expands underline on hover */
nav a:hover::after {
    width: 100%;
}

/* -------------------------
   CART ICON
   ------------------------- */

#cart {
    /* Allows sizing and transformations */
    display: inline-block;

    /* Controls icon width */
    width: 28px;

    /* Controls icon height */
    height: 28px;

    /* Loads cart image */
    background-image: url('../images/shopping-cart.png');

    /* Ensures image fits properly */
    background-size: contain;

    /* Prevents image repetition */
    background-repeat: no-repeat;

    /* Centers the icon inside the box */
    background-position: center;

    /* Enables smooth hover animation */
    transition: transform 0.3s ease;

    /* Adds space between icon and text */
    margin-left: 5px;

    /* Smooth opacity change on hover */
    transition: opacity 0.3s ease;
}

/* Hover interaction for cart */
#cart:hover {
    /* Slight fade effect */
    opacity: 0.8;

    /* Subtle upward movement for interactivity */
    transform: translateY(-5px);
}

/* -------------------------
   FOOTER SECTION
   ------------------------- */

footer {
    /* Same green tone as header for consistency */
    background: rgba(31, 95, 77, 1);

    /* Light text for contrast */
    color: #F6F8F5;

    /* Creates internal spacing */
    padding: 40px 15px 20px;

    /* Pushes footer away from main content */
    margin-top: 60px;

    /* Allows decorative background effects */
    position: relative;

    /* Hides overflow from decorative elements */
    overflow: hidden;

    /* Slightly smaller text size */
    font-size: 14px;

    /* Adds airy spacing to footer text */
    letter-spacing: 0.64px;
}

/* Decorative abstract background */
footer::before {
    /* Generates a visual element without extra HTML */
    content: "";

    /* Positions element freely */
    position: absolute;

    /* Places decoration slightly above footer */
    top: -50px;

    /* Stretches decoration horizontally */
    left: 0;
    right: 0;

    /* Controls decoration height */
    height: 100px;

    /* Soft radial gradients for elegance */
    background:
        radial-gradient(circle at 20% 80%, rgba(168, 195, 160, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(168, 195, 160, 0.1) 0%, transparent 50%);

    /* Places decoration behind content */
    z-index: 0;
}

/* Footer layout container */
.footer-container {
    /* Restricts footer width */
    max-width: 1200px;

    /* Centers footer horizontally */
    margin: 0 auto;

    /* Uses flexbox for layout */
    display: flex;

    /* Allows wrapping on smaller screens */
    flex-wrap: wrap;

    /* Distributes sections evenly */
    justify-content: space-between;

    /* Space between footer sections */
    gap: 40px;

    /* Keeps content above background */
    position: relative;

    z-index: 1;
}

/* Individual footer sections */
.footer-section {
    /* Allows flexible resizing */
    flex: 1;

    /* Prevents sections from becoming too narrow */
    min-width: 250px;

    /* Adds spacing below each section */
    margin-bottom: 20px;
}

/* Footer section headings */
.footer-section h3 {
    /* Accent color for emphasis */
    color: #A8C3A0;

    /* Slightly larger text */
    font-size: 18px;

    /* Spacing below heading */
    margin-bottom: 15px;

    /* Makes headings stand out */
    font-weight: 600;

    /* Needed for underline positioning */
    position: relative;

    display: inline-block;

    /* Keeps typography consistent with headings */
    font-family: 'Playfair Display', serif;
}

/* Decorative underline below footer headings */
.footer-section h3::after {
    content: "";

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 40px;

    height: 2px;

    background-color: #A8C3A0;
}

/* Footer links list */
.footer-links {
    /* Removes default bullets */
    list-style: none;

    /* Removes default spacing */
    padding: 0;
    margin: 0;
}

/* Individual link spacing */
.footer-links li {
    margin-bottom: 10px;
}

/* Footer links */
.footer-links a {
    /* Soft white color */
    color: #e0e0e0;

    /* Removes underline */
    text-decoration: none;

    /* Smooth hover transition */
    transition: all 0.3s ease;

    display: inline-block;

    /* Small vertical padding */
    padding: 2px 0;

    font-size: 14px;
}

/* Hover effect for footer links */
.footer-links a:hover {
    /* Highlights link */
    color: #A8C3A0;

    /* Slight slide effect */
    padding-left: 5px;
}

/* -------------------------
   SOCIAL MEDIA ICONS
   ------------------------- */

.social-links {
    /* Places icons in a row */
    display: flex;

    /* Space between icons */
    gap: 12px;

    /* Space above icons */
    margin-top: 20px;
}

.social-icon {
    /* Centers icon inside circle */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Creates circular shape */
    width: 44px;
    height: 44px;

    background-color: rgba(31, 95, 77, 1);

    border-radius: 50%;

    text-decoration: none;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;
}

/* Hover interaction */
.social-icon:hover {
    transform: translateY(-5px);
    background-color: rgba(168, 195, 160, 0.3);
}

.social-icon:hover img {
    transform: scale(1.1);
}

/* -------------------------
   NEWSLETTER FORM
   ------------------------- */

.newsletter-form {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 15px;
}

.newsletter-form input {
    padding: 12px 15px;

    border: none;

    border-radius: 4px;

    background-color: rgba(255, 255, 255, 0.1);

    color: #F6F8F5;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-form button {
    padding: 12px 20px;

    background-color: #A8C3A0;

    color: #2F5D50;

    border: none;

    border-radius: 4px;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 14px;
}

/* Button hover effect */
.newsletter-form button:hover {
    background-color: #8fb385;

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* -------------------------
   FOOTER BOTTOM
   ------------------------- */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);

    margin-top: 35px;

    padding-top: 20px;

    text-align: center;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 15px;
}

/* Copyright text */
.copyright {
    color: rgba(255, 255, 255, 0.7);

    font-size: 13px;
}