/* ███████╗███╗   ███╗ █████╗ ██╗██╗          ██████╗███████╗███████╗ */
/* ██╔════╝████╗ ████║██╔══██╗██║██║         ██╔════╝██╔════╝██╔════╝ */
/* █████╗  ██╔████╔██║███████║██║██║         ██║     ███████╗███████╗ */
/* ██╔══╝  ██║╚██╔╝██║██╔══██║██║██║         ██║     ╚════██║╚════██║ */
/* ███████╗██║ ╚═╝ ██║██║  ██║██║███████╗    ╚██████╗███████║███████║ */
/* ╚══════╝╚═╝     ╚═╝╚═╝  ╚═╝╚═╝╚══════╝     ╚═════╝╚══════╝╚══════╝ */
/**************************************************************
 * EMAIL CARD STYLES
 * Layout and input styling for the Contact / Email form card.
 **************************************************************/
/* ==========================================================
   MAIN CONTENT AREA
   Wraps all form elements inside the email card.
   ========================================================== */
.content {
  padding: 20px 20px 24px;
  color: var(--text);
  font-size: large;
  line-height: 1.6;
}
/* ==========================================================
   FORM GRID (two columns on wide screens)
   ========================================================== */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  gap: 16px;
}
/* ==========================================================
   FORM FIELDS & LABELS
   ========================================================== */
.field {
  margin-bottom: 16px;
}
label {
  display: block;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text);
}
/* ==========================================================
   INPUTS & TEXTAREAS (default state)
   Pixel-art inspired with strong border + drop shadow.
   ========================================================== */
input,
textarea {
  width: 100%;
  padding: 12px;
  border: 3px solid var(--black);
  background: var(--white);
  color: var(--input);
  outline: none;
  filter: drop-shadow(6px 6px 0 var(--black));
  font-family: 'Press Start 2P', cursive;
  font-size: large;
}
/* ==========================================================
   FOCUS STATE
   Highlight the active field with neon border + brighter text.
   ========================================================== */
input:focus,
textarea:focus {
  border-color: var(--neon-blue);
  color: var(--text);
}
/* ==========================================================
   TEXTAREA ADJUSTMENTS
   ========================================================== */
textarea {
  min-height: 160px;
  resize: vertical; /* allow manual resizing */
}
/* ==========================================================
   MESSAGE BOXES (error / success)
   Used to display form feedback messages.
   ========================================================== */
.msg {
  display: none; /* hidden by default */
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 3px solid var(--black);
  filter: drop-shadow(4px 4px 0 var(--black));
  font-weight: 800;
}
/* Error state message */
.msg.error {
  background: var(--red-muted);
  color: var(--text);
}
/* Success / OK message */
.msg.ok {
  background: var(--white);
  color: var(--text);
}
/* ==========================================================
   PLACEHOLDER FADE ON FOCUS
   Makes placeholders disappear when the user types.
   ========================================================== */
.field input:focus::placeholder,
.field textarea:focus::placeholder {
  color: transparent;
}