/* =========================
   GLOBAL STYLES (ENTIRE PAGE)
   ========================= */

/* Removes the default white gap the browser adds around the edge of the page */
body {
    margin: 0;
    padding: 0;
}

/* The wrapper holds everything — header, main, and footer — in one column */
#wrapper {
    width: 100%;
}

/* =========================
   HEADER (TOP PURPLE BAR)
   ========================= */

header {
    background-color: #A57CC1;        /* purple background */
    display: flex;                     /* puts your name and the nav links side by side */
    justify-content: space-between;   /* pushes name to the far left, links to the far right */
    align-items: center;              /* vertically centers both in the bar */
    padding: 20px 40px;               /* space inside the header: top/bottom, left/right */
}

/* "Katie Gould" name in the top left */
header h1 {
    color: #000000;                   /* black text */
    font-family: 'Battambang', sans-serif;
    font-size: 45px;
    font-weight: bold;
    margin: 0;                        /* removes extra space the browser adds above/below h1 */
}

/* The row of navigation links */
nav {
    display: flex;                    /* puts all the links in a horizontal row */
    gap: 30px;                        /* space between each link */
}

/* Each individual navigation link */
nav a {
    color: #000000;                   /* black text */
    font-family: 'Battambang', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;            /* removes the default blue underline */
}

/* Hover effect: what happens when the mouse moves over a link */
nav a:hover {
    text-decoration: underline;
    color: white;
}

/* =========================
   MAIN (PINK BACKGROUND AREA)
   ========================= */

main {
    background-color: #D19AB3;        /* pink background */
    padding: 40px 60px;               /* breathing room around the content */
    min-height: 700px;                /* keeps the pink area tall even if content is short */
}

/* =========================
   PAGE TITLE — "Contact Me" (bold white, top left)
   ========================= */

.page-title h2 {
    color: #FFFFFF;                   /* white text */
    font-family: 'Battambang', sans-serif;
    font-size: 45px;
    font-weight: bold;
    margin-top: 0;                    /* removes gap above the title */
}

/* =========================
   CONTACT FORM SECTION
   ========================= */

/* This centers the whole form box horizontally on the page */
.contact-section {
    display: flex;
    justify-content: center;          /* centers left-to-right */
}

/* The box that wraps the banner + all the form fields */
.contact-form-box {
    width: 460px;                     /* controls how wide the form is */
}

/* =========================
   FORM BANNER — the light pink "Contact Me" box at the top
   ========================= */

.form-banner {
    background-color: #E8C8D8;        /* light pink box */
    text-align: center;               /* centers the text inside */
    padding: 30px;                    /* space inside the banner */
    margin-bottom: 12px;              /* gap between banner and first field */
}

/* The "Contact Me" text inside the banner */
.form-banner p {
    color: #FFFFFF;                   /* white text */
    font-family: 'Battambang', sans-serif;
    font-size: 32px;
    margin: 0;                        /* removes default spacing around the <p> tag */
}

/* =========================
   FORM LAYOUT
   Inside the <form> tag we stack labels and inputs top to bottom
   ========================= */

form {
    display: flex;
    flex-direction: column;           /* stacks label, input, label, input, etc. vertically */
    gap: 8px;                         /* small gap between each element */
}

/* =========================
   LABELS — "First name:", "Last name:", "Message"
   ========================= */

label {
    color: #FFFFFF;                   /* grey text, matching the design */
    font-family: 'Battambang', sans-serif;
    font-size: 18px;
}

/* =========================
   TEXT INPUT FIELDS — the single-line boxes for first and last name
   ========================= */

input[type="text"] {
    width: 100%;                      /* stretches to fill the full form width */
    padding: 10px;                    /* space inside the box so text isn't cramped */
    border: none;                     /* no border, clean look matching the design */
    background-color: #FFFFFF;        /* white box */
    font-size: 16px;
    box-sizing: border-box;           /* makes sure padding doesn't make the box overflow */
}

/* =========================
   MESSAGE TEXTAREA — the bigger multi-line text box
   ========================= */

textarea {
    width: 100%;                      /* stretches to fill the full form width */
    height: 70px;                     /* how tall the message box is */
    padding: 10px;                    /* space inside the box */
    border: none;                     /* no border */
    background-color: #FFFFFF;        /* white box */
    font-size: 16px;
    box-sizing: border-box;           /* prevents overflow */
    resize: none;                     /* stops the user from dragging to resize it */
}

/* =========================
   SUBMIT BUTTON
   ========================= */

button {
    width: 120px;                     /* width of the button */
    padding: 10px;                    /* space inside the button */
    background-color: #FFFFFF;        /* white background */
    border: none;                     /* no border */
    font-family: 'Battambang', sans-serif;
    font-size: 16px;
    cursor: pointer;                  /* shows a hand icon when hovering, so it feels clickable */
    align-self: flex-start;           /* keeps the button left-aligned instead of stretching full width */
}

/* What happens when you hover over the Submit button */
button:hover {
    background-color: #A57CC1;        /* turns purple to match your header color */
    color: white;
}

/* =========================
   FOOTER (BOTTOM PURPLE BAR)
   ========================= */

footer {
    background-color: #A57CC1;        /* same purple as the header */
    padding: 20px;
    text-align: center;               /* centers the name */
}

/* "Katie Gould" text in the footer */
footer h4 {
    color: #000000;                   /* black text */
    font-family: 'Battambang', sans-serif;
    margin: 0;                        /* removes extra space above/below */
}