/*
 * CSS for Spacing & Layout Optimization
 * Focuses on margins, padding, and basic layout structures.
 * Author: Your AI Assistant
 * Date: 2023-10-27
 */

/* --- 1. Basic Reset for Margin & Padding --- */
/* A common practice to remove default browser margins/paddings from most elements.
   This gives you full control. You might adjust this based on your needs. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width/height */
}

/* --- 2. Global Body Spacing --- */
/* Ensures there's no unnecessary default margin on the body,
   and sets a consistent line height for text readability. */
body {
    line-height: 1.6; /* Improves spacing between lines of text */
}

/* --- 3. Container for Page Content --- */
/* This is crucial for controlling the main width of your content and centering it. */
.container {
    max-width: 1200px; /* Adjust this to your preferred maximum content width */
    margin-left: auto; /* Centers the container horizontally */
    margin-right: auto; /* Centers the container horizontally */
    padding-left: 20px; /* Padding on the left side inside the container */
    padding-right: 20px; /* Padding on the right side inside the container */
}

/* --- 4. Spacing for Headings (H1-H6) --- */
/* Provides consistent vertical spacing around titles. */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;    /* Space above the heading */
    margin-bottom: 0.8em; /* Space below the heading */
    /* You can adjust 'em' values relative to the font size of the heading */
}

/* --- 5. Spacing for Paragraphs --- */
/* Adds space between paragraphs to prevent them from looking cramped. */
p {
    margin-bottom: 1em; /* Space below each paragraph */
}

/* --- 6. Spacing for Lists (Unordered and Ordered) --- */
/* Ensures lists have proper indentation and spacing. */
ul, ol {
    margin-left: 20px;   /* Indentation for list items */
    margin-bottom: 1em; /* Space below the entire list */
    padding-left: 0;     /* Some browsers add default padding, resetting it for consistency */
}

ul li, ol li {
    margin-bottom: 0.5em; /* Space between list items */
}

/* --- 7. Spacing for Images --- */
/* Ensures images have some breathing room and are responsive. */
img {
    max-width: 100%; /* Makes images responsive */
    height: auto;    /* Maintains aspect ratio */
    display: block;  /* Prevents extra space below images (especially important in flow) */
    margin-top: 1em;    /* Space above images */
    margin-bottom: 1em; /* Space below images */
}

/* --- 8. Spacing for Form Elements --- */
/* Provides clear separation between form inputs and labels. */
label {
    display: block;      /* Ensures label takes its own line */
    margin-bottom: 5px;  /* Space between label and input */
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;          /* Makes inputs take full width of their container */
    padding: 10px 12px;   /* Internal spacing inside input fields */
    margin-bottom: 15px;  /* Space below each input field */
}

/* --- 9. Spacing for Buttons --- */
.btn {
    margin-top: 1em;      /* Space above buttons */
    margin-bottom: 1em;   /* Space below buttons */
    padding: 12px 25px;   /* Internal spacing within buttons */
    /* If you have multiple buttons in a row, you might add margin-right: 10px; for example */
}

/* --- 10. Utility Classes for Quick Spacing Adjustments --- */
/* These classes can be added directly to your HTML elements for quick spacing. */
.mt-1 { margin-top: 10px !important; } /* Margin Top Small */
.mt-2 { margin-top: 20px !important; } /* Margin Top Medium */
.mt-3 { margin-top: 30px !important; } /* Margin Top Large */

.mb-1 { margin-bottom: 10px !important; } /* Margin Bottom Small */
.mb-2 { margin-bottom: 20px !important; } /* Margin Bottom Medium */
.mb-3 { margin-bottom: 30px !important; } /* Margin Bottom Large */

.pt-1 { padding-top: 10px !important; } /* Padding Top Small */
.pt-2 { padding-top: 20px !important; } /* Padding Top Medium */
.pt-3 { padding-top: 30px !important; } /* Padding Top Large */

.pb-1 { padding-bottom: 10px !important; } /* Padding Bottom Small */
.pb-2 { padding-bottom: 20px !important; } /* Padding Bottom Medium */
.pb-3 { padding-bottom: 30px !important; } /* Padding Bottom Large */

.mx-auto { /* For centering block elements that have a defined width */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 11. Media Queries for Responsive Spacing --- */
/* Adjusts spacing on smaller screens for better mobile experience. */
@media (max-width: 768px) {
    .container {
        padding-left: 15px; /* Reduce side padding on tablets/smaller screens */
        padding-right: 15px;
    }

    h1 { margin-top: 1em; margin-bottom: 0.6em; } /* Slightly less space on mobile */
    h2 { margin-top: 1.2em; margin-bottom: 0.7em; }

    .btn {
        padding: 10px 20px; /* Smaller buttons on mobile */
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 10px; /* Further reduce side padding on very small phones */
        padding-right: 10px;
    }

    /* You might want to reduce top/bottom margins on sections or main divs here */
}