/*
  css/contact.css
  Stylesheet for the Contact Page (contact.html)
  Author: Jules
*/

/* ------------------- */
/* --- Page Layout --- */
/* ------------------- */
.contact-content {
  /* Sets a maximum width for the main content area for better readability. */
  max-width: 700px;
  /* Centers the content block on the page. */
  margin: 0 auto;
  /* Centers the text within the content block. */
  text-align: center;
}

.page-title {
  /* The main heading of the page. */
  font-size: 2.5rem;
}

.contact-content p {
  /* The introductory paragraph below the title. */
  font-size: 1.1rem;
  /* Adds significant space below the paragraph, before the form starts. */
  margin-bottom: var(--spacing-large);
}

/* ------------------- */
/* --- Contact Form --- */
/* ------------------- */
.contact-form {
  /* Aligns the form elements' text to the left. */
  text-align: left;
  /* Adds a border around the form for a defined look. */
  border: 1px solid var(--primary-accent-color);
  /* Adds padding inside the form. */
  padding: var(--spacing-large);
  /* A subtle background color to make the form stand out. */
  background-color: rgba(255, 255, 255, 0.02);
}

.form-group {
  /* A container for each label-input pair. */
  margin-bottom: var(--spacing-medium); /* Adds space between form fields. */
}

.form-group label {
  /* The text label for each form field. */
  display: block; /* Makes the label take up its own line. */
  margin-bottom: var(--spacing-small); /* Adds space between the label and the input field. */
  font-family: var(--heading-font); /* Uses the heading font for labels. */
  font-weight: 700; /* Bold text. */
  color: var(--primary-text-color); /* Uses the primary orange color. */
}

/* Base styles for all input and textarea fields */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  /* Makes the input field take up the full width of its container. */
  width: 100%;
  /* Adds padding inside the input field for comfortable typing. */
  padding: var(--spacing-small);
  /* Sets the background color of the input field. */
  background-color: var(--background-color);
  /* Sets the color of the text the user types. */
  color: var(--secondary-text-color);
  /* A subtle border for the input fields. */
  border: 1px solid var(--secondary-accent-color);
  /* Sets the font to match the body text. */
  font-family: var(--body-font);
  /* Sets the font size. */
  font-size: 1rem;
  /* Smooth transition for the focus effect. */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Styles for when an input field is focused (clicked on) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  /* Removes the default browser outline. */
  outline: none;
  /* Changes the border color to the primary orange for visual feedback. */
  border-color: var(--primary-accent-color);
  /* Adds a glow effect to indicate focus, matching the brutalist/sci-fi theme. */
  box-shadow: 0 0 5px var(--primary-accent-color);
}

textarea {
  /* Allows the user to resize the textarea vertically but not horizontally. */
  resize: vertical;
}

/* ------------------- */
/* --- Submit Button --- */
/* ------------------- */
.contact-form .btn {
  /* Overrides the default button styles to make it full-width. */
  width: 100%;
  /* Adds some margin on top to separate it from the last form field. */
  margin-top: var(--spacing-medium);
  /* Increases padding for a larger, more prominent button. */
  padding: var(--spacing-medium);
}