/* ==========================================================================
   CONTACT PAGE STYLES — Udet Jasso Artist Portfolio
   ==========================================================================

   Styles specific to the contact page (contact.html). This page features:

   1. A two-column layout: contact form on the left, circular portrait
      on the right
   2. Form inputs styled to match the dark gothic aesthetic
   3. Privacy note below the form
   4. Responsive stacking on mobile

   HTML structure:
   <main id="main-content">
     <div class="contact-container">
       <h1 class="page-title">Contact Me!</h1>
       <div class="contact-grid">
         <div class="contact-form-wrapper">
           <form class="contact-form">
             <div class="form-group">
               <label>Name</label>
               <input type="text">
             </div>
             ...
             <button class="btn submit-btn">Send Message</button>
           </form>
           <p class="form-privacy">...</p>
         </div>
         <div class="contact-portrait"><img ...></div>
       </div>
     </div>
   </main>

   Design goals:
   - Form inputs feel integrated with the dark theme
   - The circular portrait adds a personal, human touch
   - Full-width submit button on mobile for easy tapping

   This file builds on top of css/styles.css which must be loaded first.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION 1: Contact Container
   --------------------------------------------------------------------------
   The outer wrapper for the entire contact page content. Max-width
   constrains the panel, auto margins center it, and padding provides
   vertical breathing room.
   -------------------------------------------------------------------------- */

.contact-container {
   max-width: var(--max-width-narrow);
   margin: 0 auto;
   padding: var(--space-xl) var(--space-lg);
   position: relative;
   z-index: 1;
   flex: 1;
}


/* --------------------------------------------------------------------------
   SECTION 2: Page Title
   -------------------------------------------------------------------------- */

.page-title {
   font-family: var(--font-heading);
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   color: var(--color-text);
   text-align: center;
   margin-bottom: var(--space-xl);
   text-shadow: 0 0 20px rgba(216, 167, 177, 0.2);
}


/* --------------------------------------------------------------------------
   SECTION 3: Contact Grid — Two-Column Layout
   --------------------------------------------------------------------------
   Two-column layout on desktop: form on the left, portrait on the right.
   Uses CSS Grid for clean, responsive alignment.

   Desktop: two columns (form wider, portrait narrower)
   Mobile (<768px): single column, portrait above form
   -------------------------------------------------------------------------- */

.contact-grid {
   display: grid;
   grid-template-columns: 1.3fr 0.7fr;
   gap: var(--space-xl);
   align-items: start;    /* Top-align so portrait doesn't push form down */
}


/* --------------------------------------------------------------------------
   SECTION 4: Contact Form Panel
   --------------------------------------------------------------------------
   The left column wrapper containing the contact form and privacy note.
   Uses a translucent dark panel with midnight-purple border for
   consistency with other page panels.
   -------------------------------------------------------------------------- */

.contact-form-wrapper {
   background-color: var(--color-panel);
   border: 1px solid var(--color-accent-primary);
   border-radius: var(--border-radius-lg);
   padding: var(--space-xl);
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}


/* --------------------------------------------------------------------------
   SECTION 5: Form Elements
   --------------------------------------------------------------------------
   All form elements (inputs, textareas, labels) are styled to integrate
   seamlessly with the dark gothic aesthetic.

   Key design decisions:
   - Dark background on inputs for clear visual boundaries
   - Midnight-purple borders that transition to dusty-pink glow on focus
   - Labels in dusty pink with slightly smaller size
   - Generous padding for comfortable input interaction
   -------------------------------------------------------------------------- */

.contact-form {
   display: flex;
   flex-direction: column;
   gap: var(--space-lg);
}

/* Individual form field group (label + input) */
.form-group {
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
}

/* Form labels */
.form-group label {
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: var(--color-text);
   opacity: 0.8;
   letter-spacing: 0.03em;
}

/* Text inputs and email fields */
.contact-form input[type="text"],
.contact-form input[type="email"] {
   background-color: rgba(26, 20, 35, 0.6);
   border: 1px solid var(--color-accent-primary);
   border-radius: var(--border-radius);
   padding: 0.85rem var(--space-md);
   color: var(--color-text);
   font-family: var(--font-body);
   font-size: 1.05rem;
   transition:
      border-color var(--transition-speed) var(--transition-ease),
      box-shadow var(--transition-speed) var(--transition-ease),
      background-color var(--transition-speed) var(--transition-ease);
}

/* Placeholder text */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
   color: var(--color-text);
   opacity: 0.4;
}

/* Focus state: border glows dusty pink with the signature illumination */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus {
   outline: none;
   border-color: var(--color-text);
   background-color: rgba(26, 20, 35, 0.8);
   box-shadow: 0 0 15px rgba(216, 167, 177, 0.2);
}

/* Textarea (message field) — taller than regular inputs */
.contact-form textarea {
   background-color: rgba(26, 20, 35, 0.6);
   border: 1px solid var(--color-accent-primary);
   border-radius: var(--border-radius);
   padding: 0.85rem var(--space-md);
   color: var(--color-text);
   font-family: var(--font-body);
   font-size: 1.05rem;
   min-height: 180px;
   resize: vertical;        /* Allow vertical resize only */
   line-height: 1.7;
   transition:
      border-color var(--transition-speed) var(--transition-ease),
      box-shadow var(--transition-speed) var(--transition-ease),
      background-color var(--transition-speed) var(--transition-ease);
}

.contact-form textarea:focus {
   outline: none;
   border-color: var(--color-text);
   background-color: rgba(26, 20, 35, 0.8);
   box-shadow: 0 0 15px rgba(216, 167, 177, 0.2);
}

/* Hidden honeypot field — must be invisible to real users */
.contact-form .honeypot {
   position: absolute;
   left: -9999px;
   opacity: 0;
   height: 0;
   width: 0;
   overflow: hidden;
}


/* --------------------------------------------------------------------------
   SECTION 6: Submit Button
   --------------------------------------------------------------------------
   The form submit button uses the shared .btn base style from styles.css
   with form-specific overrides. Full width on mobile for easier tapping.
   -------------------------------------------------------------------------- */

.submit-btn {
   margin-top: var(--space-sm);
}


/* --------------------------------------------------------------------------
   SECTION 7: Privacy Note
   --------------------------------------------------------------------------
   A small note below the form about data privacy. Styled subtly so it
   doesn't compete with the form but is still readable.
   -------------------------------------------------------------------------- */

.form-privacy {
   margin-top: var(--space-lg);
   padding-top: var(--space-md);
   border-top: 1px solid rgba(55, 37, 73, 0.3);
   font-family: var(--font-body);
   font-size: 0.85rem;
   color: var(--color-text);
   opacity: 0.5;
   line-height: 1.6;
   font-style: italic;
}


/* --------------------------------------------------------------------------
   SECTION 8: Contact Portrait
   --------------------------------------------------------------------------
   The right column containing a circular portrait of the artist.
   Matches the bio page portrait styling for consistency.

   The portrait image is circular with a midnight-purple border and
   the floating animation for visual interest.
   -------------------------------------------------------------------------- */

.contact-portrait {
   display: flex;
   justify-content: center;
   align-items: center;
}

.contact-portrait img {
   width: 280px;
   height: 280px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid var(--color-accent-primary);
   box-shadow:
      0 0 20px rgba(216, 167, 177, 0.15),
      0 0 40px rgba(216, 167, 177, 0.05);
   /* Matching floating animation from bio page */
   animation: contact-portrait-float 6s ease-in-out infinite;
}

@keyframes contact-portrait-float {
   0%, 100% {
      transform: translateY(0);
      box-shadow:
         0 0 20px rgba(216, 167, 177, 0.15),
         0 0 40px rgba(216, 167, 177, 0.05);
   }
   50% {
      transform: translateY(-8px);
      box-shadow:
         0 0 30px rgba(216, 167, 177, 0.25),
         0 0 60px rgba(216, 167, 177, 0.1);
   }
}


/* --------------------------------------------------------------------------
   SECTION 9: Responsive Layout
   -------------------------------------------------------------------------- */

/* ---- Tablet (768px) ---- */
@media screen and (max-width: 768px) {
   .contact-grid {
      /* Stack to single column */
      grid-template-columns: 1fr;
      gap: var(--space-lg);
   }

   /* Portrait moves above the form */
   .contact-portrait {
      order: -1;
   }

   .contact-portrait img {
      width: 200px;
      height: 200px;
   }

   .contact-form-wrapper {
      padding: var(--space-lg);
   }

   .contact-container {
      padding: var(--space-lg) var(--space-md);
   }

   /* Full-width submit button on mobile for easier tapping */
   .submit-btn {
      width: 100%;
   }
}

/* ---- Small mobile (480px) ---- */
@media screen and (max-width: 480px) {
   .contact-portrait img {
      width: 160px;
      height: 160px;
   }

   .contact-form-wrapper {
      padding: var(--space-md);
   }
}


/* --------------------------------------------------------------------------
   SECTION 10: prefers-reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
   .contact-portrait img {
      animation: none;
   }
}