@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

/* =========================
   VARIABLES
========================= */
:root {
    --main-color: hsl(210, 70%, 40%);
    --accent-color: color-mix(in srgb, blue 60%, white 40%);
    --fallback-color: orange;
}

/* ========================
   BASE SETUP
======================== */
* {
    box-sizing: border-box;
    font-family: "Inter", Arial, sans-serif;
}

body {
    margin: 10px 15px 20px 25px;
    padding: 1rem 2em 3vw 4vh;
    background-color: #f5f5f5;
    color: rgb(30, 30, 30);
    font-size: 1rem;
}

#page {
    position: relative;
}

/* =========================
   TEXT
========================= */
h1, h2, h3 {
    font-family: Georgia, serif;
    letter-spacing: 1px;
}

h1 {
    color: var(--main-color, blue);
    text-align: center;
}

h2 {
    color: hsl(200, 70%, 40%);
}

h3 {
    color: blue;
}

p {
    color: navy;
    text-align: left;
    text-decoration: none;
}

/* =========================
   SELECTORS DEMO
========================= */
.card {
    border: 2px solid black;
    border-radius: 10px;
    padding: 10px 15px 20px 25px;
    margin: auto;
    background-color: white;
}

input[type="text"] {
    border: 1px solid gray;
}

input[type="date"] {
    border: 1px solid blue;
}

/* selector list */
h1, h2, h3 {
    font-style: normal;
}

/* combinators */
section p {
    font-style: italic;
}

section > h2 {
    text-decoration: underline;
}

h2 + ol {
    background-color: #eee;
}

h2 ~ p {
    font-weight: bold;
}

/* pseudo-class */
button:hover {
    background-color: blue;
    color: white;
}

button:active {
    transform: scale(0.95);
}

p:hover {
    color: darkred;
}

/* :has() */
section:has(ul) {
    border-color: red;
}

/* combining selectors */
header.title {
    text-align: center;
}

/* =========================
   NAVIGATION (FIXED - NO NESTING ERROR)
========================= */
.nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background-color: lightblue;
}

.nav a {
    text-transform: uppercase;
    font-weight: bold;
    color: black;
}

/* =========================
   GRID
========================= */
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    justify-items: stretch;
    align-items: start;
    gap: 10px;
}

/* =========================
   DISPLAY TYPES
========================= */
.block-example {
    display: block;
    width: 200px;
}

.inline-example {
    display: inline;
}

.inline-block-example {
    display: inline-block;
    width: 150px;
    height: 80px;
}

.none-example {
    display: none;
}

/* =========================
   POSITION
========================= */
#main-header {
    position: relative;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--accent-color);
    padding: 10px;
    text-align: center;
}

/* =========================
   SIZING + UNITS
========================= */
img {
    max-width: 100%;
    min-width: 50px;
    width: 100%;
    height: auto;
}

/* relative + absolute units demo */
.unit-demo {
    font-size: 2rem;
    margin: 2em;
    width: 50vw;
    height: 10vh;
}

.absolute-demo {
    margin: 10px;
    padding: 5mm;
    border: 0.2cm solid black;
}

/* =========================
   COLORS
========================= */
.hex-demo {
    color: #ff5733;
}

.rgb-demo {
    color: rgb(100, 50, 200);
}

.hsl-demo {
    color: hsl(120, 60%, 40%);
}

.hsla-demo {
    color: hsla(200, 70%, 40%, 0.8);
}

/* FIXED: wide-gamut safe fallback */
.color-gamut {
    color: rgb(50, 120, 220);
}

/* =========================
   VARIABLES + FALLBACK
========================= */
.fallback-demo {
    color: var(--does-not-exist, var(--fallback-color));
}

/* =========================
   BOX MODEL
========================= */
.box-demo {
    margin: 10px 20px 30px 40px;
    padding: 5px 10px 15px 20px;
    border: 2px solid black;
}

/* =========================
   FLEXBOX
========================= */
.nav {
    display: flex;
}

/* =========================
   RESPONSIVENESS
========================= */
@media (max-width: 768px) {
    .nav {
        flex-direction: column;
    }

    body {
        background-color: white;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }
}