/*
bareBones2.css
Purpose: first-step CSS for layout and spacing fundamentals.

Teaching focus in this file:
1) Layout width (so lines are easier to read)
2) Spacing rhythm (consistent margin and padding)
3) Basic structure cues (header/section/footer boundaries)
4) Simple responsive behavior (nav wraps on smaller screens)

Keep this intentionally small and readable.
*/

/*
Rule 1: box-sizing border-box
This makes width and height easier to reason about for beginners.
Padding and border stay inside declared width.
*/
* {
    box-sizing: border-box;
}

/*
Rule 2: Base page defaults
- Remove default body margin so we can control spacing ourselves.
- Set a readable font stack and line-height.
*/
body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #1f2937;
    background-color: #f7f9fc;
}

/*
Rule 3: Center major page regions with a readable max width.
This is the first key layout concept: line length control.
*/
header,
main,
footer {
    width: min(100% - 2rem, 900px);
    margin-inline: auto;
}

/*
Rule 4: Vertical page spacing between major regions.
margin-block gives top/bottom spacing in one declaration.
*/
header,
main,
footer {
    margin-block: 1rem;
}

/*
Rule 5: Skip link pattern
Hidden off-screen by default, appears when keyboard-focused.
*/
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #111827;
    color: #ffffff;
    padding: 0.5rem 0.75rem;
}

.skip-link:focus {
    left: 0.75rem;
    top: 0.5rem;
    z-index: 1000;
}

/*
Rule 6: Header spacing and boundary
A subtle border helps students see region boundaries.
*/
header {
    padding: 1rem;
    border: 1px solid #d7dce5;
    background: #ffffff;
}

/*
Rule 7: Simple nav layout with flexbox
- Remove bullets/padding from list.
- Display items in a row with gaps.
- Allow wrapping on narrow screens.
*/
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/*
Rule 8: Main content spacing
Each section gets a card-like container so layout is easy to scan.
*/
main > section {
    background: #ffffff;
    border: 1px solid #d7dce5;
    padding: 1rem;
    margin-bottom: 1rem;
}

/*
Rule 9: Heading spacing
Tighten heading top margins to avoid large gaps at section start.
*/
h1,
h2,
h3 {
    line-height: 1.25;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
pre,
figure,
blockquote,
details,
table,
form {
    margin-top: 0;
}

/*
Rule 10: Media should not overflow parent containers.
*/
img {
    max-width: 100%;
    height: auto;
}

/*
Rule 11: Code block readability
Adds breathing room and horizontal scrolling if needed.
*/
pre {
    padding: 0.75rem;
    overflow-x: auto;
    border: 1px solid #d7dce5;
    background: #f3f5f9;
}

/*
Rule 12: Table fundamentals
collapse removes double borders; padding improves readability.
*/
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #cbd3df;
    padding: 0.5rem;
    text-align: left;
}

caption {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/*
Rule 13: Form spacing and basic control sizing.
*/
fieldset {
    border: 1px solid #cbd3df;
    padding: 0.75rem;
}

legend {
    padding: 0 0.35rem;
    font-weight: 600;
}

input,
select,
textarea,
button {
    font: inherit;
}

input[type="text"],
input[type="email"],
select,
textarea {
    width: min(100%, 34rem);
    padding: 0.4rem;
}

/*
Rule 14: Footer spacing and boundary
*/
footer {
    padding: 1rem;
    border: 1px solid #d7dce5;
    background: #ffffff;
}

/*
Rule 15: Responsive adjustment
On smaller screens, reduce horizontal padding slightly.
*/
@media (max-width: 640px) {
    header,
    main,
    footer {
        width: min(100% - 1rem, 900px);
    }

    header,
    main > section,
    footer {
        padding: 0.8rem;
    }
}