:root {
    --primary-dark: #1e293b;
    --primary-blue: rgb(37, 99, 235);
}

/* Sets the background to a light gray and text to dark gray for easy reading */
/* Inter is loaded from Google Fonts as the 3rd party font */
body {
    background-color: #f5f5f5;
    color: rgb(55, 65, 81);
    font-size: 1rem; /* rem: scales relative to the browser's default font size */
    font-family: 'Inter', sans-serif; /* 3rd party Google Font with system fallback */
}

/* Adds space above and below main content - longhand margin */
main {
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 0;
    margin-right: 0;
    min-width: 320px; /* min-width: prevents the content area from collapsing too narrow */
}

/* Dark background on the header to separate it from the page content */
/* var() uses the variable, and falls back to #1e293b if the variable is missing */
/* position: relative lets it serve as an anchor for any absolutely positioned children */
header {
    background-color: var(--primary-dark, #1e293b);
    color: white;
    padding: 12pt;     /* pt: absolute unit, commonly used in print/typography */
    height: 120px;     /* height: gives the header a fixed height */
    position: relative; /* relative: keeps the element in normal flow but allows offset */
}

/* nav link colors are handled by the nested selector block below */

/* position: sticky keeps the nav visible at the top while scrolling */
nav {
    position: sticky; /* sticky: sticks to the top of the viewport when scrolled past */
    top: 0;
    background-color: #f5f5f5;
    z-index: 10;
}

/* Makes the divider lines subtle so they don't overpower the content */
hr {
    border-color: rgba(0, 0, 0, 19);
}

/* Red color on priority labels to draw attention to task urgency */
span.priority {
    color: red;
}

/* Light tinted background on the collapsible summary to hint it's interactive */
details summary {
    background-color: color-mix(in srgb, #1e293b 15%, white);
}

/* Centers the page horizontally; max-width prevents it stretching on large screens */
.lab2-container {
    width: 80%;        /* width: sets the container to 80% of the viewport */
    max-width: 960px;  /* max-width: caps the container so it doesn't get too wide */
    margin: 0 auto;
}


/* Matches the footer color to the header so the page feels consistent top-to-bottom */
footer {
    background-color: #1e293b;
    color: white;
    padding-top: 0.5cm;     /* longhand: each side set individually */
    padding-bottom: 0.5cm;
    padding-left: 1cm;
    padding-right: 1cm
}

/* Styles the submit button to stand out as the main action on the form */
/* var() uses the variable, and falls back to the rgb value if the variable is missing */
button[type="submit"] {
    background-color: var(--primary-blue, rgb(37, 99, 235));
    color: white;
    padding: 8px 16px; /* px: absolute unit, gives the button a comfortable click area */
}

/* Styled border around each form fieldset to visually group form sections */
fieldset {
    border-style: solid;          /* border-style */
    border-color: #1e293b;        /* border-color */
    border-width: 1px;            /* border-width */
    border-radius: 6px;           /* border-radius: rounds the corners */
    padding: 12px 16px;           /* shorthand padding: top/bottom, left/right */
}

/* ── Text Styling ── */

/* Universal selector - applies a base box-sizing reset to every element */
* {
    box-sizing: border-box;
}

/* Element selector - centers and styles all paragraph text */
p {
    text-align: left;
}

/* Selector list - consistent style across all heading levels */
h1, h2, h3 {
    color: inherit;
    text-decoration: none;
}

/* ── CSS Selectors ── */

/* ID selector - adds a top border to visually separate the feedback section */
#feedback {
    border-top: 2px solid #1e293b;
    padding-top: 16px;
}

/* Class selector - already used above for .priority, adding text style */
.priority {
    text-decoration: underline;
}

/* Attribute selector - styles all text inputs */
input[type="text"] {
    border: 1px solid #1e293b;
}

/* Pseudo-class selector - darkens button on hover for feedback */
button:hover {
    background-color: hsl(221, 83%, 40%);
}

/* Descendant combinator - styles paragraphs inside main */
main p {
    text-align: left;
    color: rgb(55, 65, 81);
}

/* Child combinator - targets the subtitle div directly inside header */
header > div {
    text-align: center;
}

/* Adjacent sibling combinator - styles a paragraph right after a heading */
h2 + p {
    margin-top: 4px;
}

/* General sibling combinator - styles all sections after a heading */
h2 ~ section {
    margin-top: 8px;
}

/* Combining two selectors - targets a span that also has the priority class */
span.priority {
    font-style: italic;
}

/* :has() - highlights a fieldset that contains a checked input */
fieldset:has(input:checked) {
    border-color: hsl(221, 83%, 53%);
}

/* Nested selectors - nav link styles nested inside nav */
nav {
    padding: 0.75em;

    & a {
        color: hsl(221, 83%, 53%);
        text-decoration: none;
    }

    & a:hover {
        color: hsl(221, 83%, 40%);
        text-decoration: underline;
    }
}

/* footer text centered */
footer {
    text-align: center;
}

/* ── Display ── */

/* block: makes each nav link stack on its own line and fill the row */
nav a {
    display: inline-block; /* inline-block: sits inline but can have padding/margin */
    padding: 4px 8px;
}

/* inline: keeps the time element flowing with surrounding text */
time {
    display: inline;
}

/* none: hides the subTitle div class name visually (element still in DOM) */
.subTitle h3 {
    display: block; /* block: makes the date sit on its own line below the subtitle */
}

/* ── Flexbox ── */
/* nav has more than 2 children (the 7 anchor links), laid out horizontally with flex */
nav {
    display: flex;              /* applies flexbox to nav */
    flex-direction: row;        /* children line up left to right */
    align-items: center;        /* vertically centers the links */
    justify-content: center;    /* horizontally centers the group of links */
    gap: 8px;                   /* spacing between each nav link */
    flex-wrap: wrap;            /* wraps links onto next line on small screens */
}

/* ── Grid ── */
/* attendance list has 6 children, displayed in a 2-column grid */
.attendance-list {
    display: grid;                          /* applies grid layout */
    grid-template-columns: 1fr 1fr;        /* two equal-width columns */
    gap: 8px;                              /* spacing between grid items */
    list-style: none;                      /* removes default bullet points */
    padding: 0;
}

/* ── :active pseudo-class ── */
/* gives visual feedback when the button is actively being clicked */
button:active {
    background-color: hsl(221, 83%, 30%);
}

/* ── Responsiveness ── */

/* Tablet: 768px and below - reduce width, shrink header, collapse grid to 1 column */
@media (max-width: 768px) {
    .lab2-container {
        width: 95%;
    }

    header {
        height: auto;       /* let header grow to fit content on smaller screens */
        padding: 16px;
    }

    .attendance-list {
        grid-template-columns: 1fr; /* single column on tablet */
    }

    fieldset {
        padding: 8px 12px;
    }
}

/* Phone: 480px and below - stack nav vertically, shrink font size */
@media (max-width: 480px) {
    body {
        font-size: 0.9rem;  /* slightly smaller text on phones */
    }

    nav {
        flex-direction: column; /* stack nav links vertically on phones */
        align-items: flex-start;
        gap: 4px;
    }

    h1 {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 1.1rem;
    }

    button[type="submit"] {
        width: 100%;        /* full-width button on phones for easy tapping */
    }
}