/* Page-specific styles for the Contact page */

/*
 * CONTACT CONTAINER
 * Main container for all content on the contact page.
 */
.contact-container {
    /* Sets a maximum width for the form for better aesthetics. */
    max-width: 600px;
    /* Centers the container on the page. */
    margin: 2rem auto;
    /* Adds padding for smaller screens. */
    padding: 2rem;
    /* Adds a background color to distinguish the form area. */
    background-color: #f4f7f6;
    /* Rounds the corners of the container. */
    border-radius: 8px;
    /* Adds a subtle shadow for depth. */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.contact-container h1 {
    /* Centers the main heading. */
    text-align: center;
    /* Sets the color to the primary accent color. */
    color: var(--primary-accent);
}

.contact-container p {
    /* Centers the introductory paragraph. */
    text-align: center;
    /* Adds space below the paragraph. */
    margin-bottom: 2rem;
}

/*
 * FORM GROUP
 * Styles for the container of each form field (label + input).
 */
.form-group {
    /* Adds space below each form group. */
    margin-bottom: 1.5rem;
}

/*
 * FORM LABELS
 * Styling for the text labels of form fields.
 */
.form-group label {
    /* Makes the label a block element, so it appears on its own line. */
    display: block;
    /* Adds a little space below the label. */
    margin-bottom: 0.5rem;
    /* Uses the heading font for labels. */
    font-family: var(--heading-font);
    /* Makes the font weight bold. */
    font-weight: bold;
}

/*
 * FORM INPUTS AND TEXTAREA
 * General styling for all text input fields and the textarea.
 */
.form-group input[type="text"],
.form-group textarea {
    /* Makes the input field span the full width of its container. */
    width: 100%;
    /* Adds padding inside the input field for comfortable typing. */
    padding: 0.75rem;
    /* Adds a subtle border. */
    border: 1px solid #ccc;
    /* Rounds the corners of the input field. */
    border-radius: 4px;
    /* Sets the font to the body font. */
    font-family: var(--body-font);
    /* A subtle transition for the focus effect. */
    transition: border-color 0.3s ease;
}

/*
 * FOCUS STATE FOR INPUTS
 * Changes the border color when an input field is focused (clicked on).
 */
.form-group input[type="text"]:focus,
.form-group textarea:focus {
    /* Removes the default browser outline. */
    outline: none;
    /* Changes the border color to the primary accent color. */
    border-color: var(--primary-accent);
}

/*
 * CHECKBOX-SPECIFIC STYLING
 * Adjusts the layout for the checkbox group.
 */
.form-group-checkbox {
    /* Uses flexbox to align the checkbox and its label on the same line. */
    display: flex;
    /* Aligns items vertically to the center. */
    align-items: center;
}

.form-group-checkbox input[type="checkbox"] {
    /* Adds space to the right of the checkbox. */
    margin-right: 0.5rem;
}

.form-group-checkbox label {
    /* Resets the margin-bottom for the checkbox label since it's now inline. */
    margin-bottom: 0;
    /* Makes the font weight normal instead of bold. */
    font-weight: normal;
}

/*
 * SUBMIT BUTTON
 * The main button for submitting the form.
 */
.btn {
    /* Makes the button span the full width of its container. */
    width: 100%;
    /* Makes the text uppercase. */
    text-transform: uppercase;
    /* Increases the font size slightly. */
    font-size: 1rem;
    /* Adds a letter spacing for style. */
    letter-spacing: 1px;
}