body {
  cursor: auto;
}
/*
 * Page-Specific Styles for the Contact Page (contact/index.html)
 *
 * This file contains styles for the contact form and its elements.
 */

/* ------------------- */
/* Contact Section     */
/* ------------------- */
/*
 * Styles the main container for the contact form content.
 */
.contact-section {
    /* Sets a maximum width to keep the form from becoming too wide on large screens. */
    max-width: 700px;
    /* Centers the section horizontally. */
    margin: 0 auto;
    /* Adds padding around the section. */
    padding: 2rem;
    /* A subtle background color to differentiate the form area. */
    background-color: rgba(0, 0, 0, 0.05);
    /* Adds a border with rounded corners. */
    border: 2px solid var(--color-text);
    border-radius: 8px;
}

/*
 * Styles the main heading of the contact page.
 */
.contact-section h1 {
    /* Centers the heading. */
    text-align: center;
    /* Adds space below the heading. */
    margin-bottom: 1rem;
    /* Uses a prominent accent color. */
    color: var(--color-secondary-accent);
}

/*
 * Styles the introductory paragraph.
 */
.contact-intro {
    /* Centers the introductory text. */
    text-align: center;
    /* Adds significant space below the intro text before the form starts. */
    margin-bottom: 2.5rem;
}

/* ------------------- */
/* Form Styling        */
/* ------------------- */
/*
 * Styles for the form element itself.
 */
#contact-form {
    /* Uses a grid layout for easy alignment of form fields. */
    display: grid;
    /* Sets the gap between grid rows. */
    gap: 1.5rem;
}

/*
 * Styles for each group of a label and an input field.
 */
.form-group {
    /* No specific styles needed here with grid layout, but it's a useful hook for spacing. */
}

/*
 * Styles for form labels.
 */
.form-group label {
    /* Makes the label a block element to sit on its own line. */
    display: block;
    /* Heavier font weight for clarity. */
    font-weight: bold;
    /* Adds space below the label. */
    margin-bottom: 0.5rem;
    /* Sets the color of the label text. */
    color: var(--color-text);
}

/*
 * General styles for all text input fields and the textarea.
 */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    /* Makes the input field span the full width of its container. */
    width: 100%;
    /* Adds padding inside the input field for text entry. */
    padding: 0.8rem;
    /* Sets the font size to be consistent with body text. */
    font-size: 1rem;
    /* Inherits the body font family. */
    font-family: var(--font-body);
    /* Sets a solid border around the input field. */
    border: 2px solid var(--color-text);
    /* Sets the background color of the input field. */
    background-color: var(--color-background);
    /* Sets the color of the text entered by the user. */
    color: var(--color-text);
    /* Smooth transition for focus effects. */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/*
 * Styles for the focus state of input fields.
 * This provides visual feedback to the user about which field is active.
 */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    /* Removes the default browser outline. */
    outline: none;
    /* Changes the border color to the primary accent color. */
    border-color: var(--color-primary-accent);
    /* Adds a subtle glow effect to indicate focus. */
    box-shadow: 0 0 5px var(--color-primary-accent);
}

/*
 * Specific styling for the textarea to allow vertical resizing.
 */
.form-group textarea {
    resize: vertical;
}

/*
 * Styles for the submit button.
 * It inherits from the global .btn class and adds specific alignment.
 */
#contact-form .btn {
    /* Sets the width of the button. */
    width: 100%;
    /* A larger font size for the submit button. */
    font-size: 1.2rem;
    /* Removes the top margin that might be inherited from the global .btn style. */
    margin-top: 0;
}

/* ------------------- */
/* Spam Prevention     */
/* ------------------- */
/*
 * Honeypot Field: This field is hidden from users but visible to bots.
 * If it's filled out, the form submission can be identified as spam.
 */
.honeypot-field {
    /* Hides the field from view. */
    position: absolute;
    left: -5000px;
    /* Ensures it doesn't affect the layout. */
    visibility: hidden;
}

/*
 * Styles for the simple captcha group.
 */
.captcha-group {
    /* You can add specific styles here if needed, for example, to align the label and input differently. */
}