/* ============================================================
   Premium Developer Portfolio - Contact Section Stylesheet
   ------------------------------------------------------------
   Sections in this file:
     1.  Contact Section (full-width wrapper, background depth)
     2.  Container Layout (1200px max width, centered)
     3.  Section Header (subtitle, heading, description)
     4.  Two-column Structure (Flexbox, desktop layout)
     5.  Typography (headings, subtitle, description, message)
     6.  Contact Cards (icon, title, info, hover effect)
     7.  Availability Badge (premium pill with status dot)
     8.  Contact Form (glassmorphism panel, spacing)
     9.  Form Fields (labels, inputs, textarea, spacing)
     10. Input Fields (rounded, glassmorphism, large click area)
     11. Focus States (primary border, soft glow, shadow)
     12. Button Styling (Send Message, accent gradient, glow)
     13. Glassmorphism Effect (blur + transparency)
     14. Hover Effects (cards, inputs, button)
     15. Responsive Design (media queries for tablet & mobile)
   ------------------------------------------------------------
   NOTE: This file does NOT redefine the color palette, fonts, or
   spacing variables. It reuses the CSS variables already defined
   in style.css (--color-bg, --color-surface, --color-primary,
   --color-accent, --color-text, --color-muted, --color-border,
   --font-heading, --font-body, --space-*, --transition-*).
   This keeps the whole portfolio on one cohesive theme and
   matches the design language of the Hero, About, Skills, and
   Projects sections.
   ============================================================ */


/* ============================================================
   1. CONTACT SECTION
   ------------------------------------------------------------
   The .contact section is a full-width wrapper. It uses a
   subtle radial-gradient overlay on the background to add
   gentle depth and separate it visually from the Projects
   section above, without being overly bright. position:
   relative lets any future decorative layers anchor to it.
   Generous vertical padding (96px) gives the section premium
   breathing room and matches the other sections' rhythm.
   ============================================================ */
.contact {
  position: relative;
  width: 100%;
  padding: var(--space-8) var(--space-4); /* REFINED: 128px top/bottom for premium breathing room */

  /* Layered radial gradients for subtle, premium depth */
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.06), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.05), transparent 45%),
    var(--color-bg);
}


/* ============================================================
   2. CONTAINER LAYOUT
   ------------------------------------------------------------
   .contact-container caps the content at a 1200px maximum
   width and centers it horizontally with auto margins. This
   matches the hero, navbar, about, skills, and projects widths
   so the whole portfolio aligns on a consistent grid. The
   container uses Flexbox with a column direction to stack the
   header and the two-column grid with a consistent gap.
   ============================================================ */
.contact-container {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--space-6);              /* 64px gap between header and columns */
}


/* ============================================================
   3. SECTION HEADER
   ------------------------------------------------------------
   The header groups the subtitle, main heading, and short
   description. It is left-aligned on desktop and center-aligned
   on tablet/mobile (handled in media queries). A consistent
   vertical gap (16px) creates a calm, premium rhythm between
   the three text elements. This mirrors the other section
   headers so the whole portfolio feels cohesive.
   ============================================================ */
.contact-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);              /* 16px between subtitle, heading, description */
  max-width: 42rem;                 /* Cap width so the description stays readable */
}

/* Small subtitle - muted with an accent-colored label dot */
.contact-subtitle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);              /* 8px between dot and text */

  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* A small accent-colored dot before the subtitle for a handcrafted touch */
.contact-subtitle::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

/* Main heading - Space Grotesk Bold, the focal point of the header */
.contact-heading {
  font-family: var(--font-heading);
  font-weight: 700;                 /* Space Grotesk Bold */
  font-size: clamp(2rem, 4vw, 2.75rem); /* Responsive: ~32px to ~44px */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

/* Short description - muted, readable supporting copy */
.contact-description {
  font-family: var(--font-body);
  font-size: 1.0625rem;             /* 17px - comfortable reading size */
  line-height: 1.7;                 /* Generous line height for readability */
  color: var(--color-muted);
}


/* ============================================================
   4. TWO-COLUMN STRUCTURE
   ------------------------------------------------------------
   Flexbox creates the two-column layout: the left contact
   information panel and the right contact form. On desktop they
   sit side by side with a generous 48px gap; on tablet/mobile
   they stack vertically (handled in the media queries below).
   The columns take equal space (1:1) so the form has room to
   breathe and the info panel stays balanced.
   ============================================================ */
.contact-grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);              /* 48px gap between columns */
}

.contact-info-panel {
  flex: 1;                          /* Left column - contact info */
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-4);              /* 32px vertical rhythm */
}

.contact-form-panel {
  flex: 1;                          /* Right column - contact form */
  min-width: 0;
}


/* ============================================================
   5. TYPOGRAPHY
   ------------------------------------------------------------
   The friendly message uses Inter in muted color for a warm,
   inviting tone. The contact card titles use Space Grotesk for
   a premium, modern feel. This hierarchy mirrors the rest of
   the portfolio so everything feels cohesive.
   ============================================================ */

/* Friendly welcoming message above the contact cards */
.contact-message {
  font-family: var(--font-body);
  font-size: 1.0625rem;             /* 17px - comfortable reading size */
  line-height: 1.7;
  color: var(--color-muted);
  max-width: 30rem;                 /* Cap width for readability */
}


/* ============================================================
   6. CONTACT CARDS
   ------------------------------------------------------------
   A vertical stack of premium contact cards (Email, Phone,
   Location, GitHub, LinkedIn). Each card is a glassmorphism
   surface with an icon, a title, and the contact info. On
   hover the card lifts gently and its border picks up a hint
   of the primary color. The cards use a 16px gap so they feel
   grouped but not cramped.
   ============================================================ */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);              /* 16px between cards */
}

/* REFINED: Contact cards now have a left accent border for a unique
   identity distinct from the About info cards. The icon container
   also gets a gradient tint to feel more premium. */
.contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);              /* 24px between icon and text */

  padding: var(--space-3);          /* 24px padding */
  border-radius: 16px;              /* Rounded corners */
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);  /* REFINED: left accent border */

  /* Glassmorphism: semi-transparent surface + blur */
  background-color: rgba(30, 41, 59, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

  text-decoration: none;            /* Cards are links but styled as cards */
  color: inherit;

  transition:
    transform var(--transition-speed) var(--transition-ease),
    border-color var(--transition-speed) var(--transition-ease),
    box-shadow var(--transition-speed) var(--transition-ease);
}

/* The circular icon container on each card */
.contact-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                    /* Don't shrink the icon */

  width: 48px;
  height: 48px;
  border-radius: 12px;              /* Rounded square for a modern look */
  background-color: rgba(56, 189, 248, 0.10); /* Subtle primary tint */
  border: 1px solid var(--color-border);
}

/* The SVG icon inside the container - inherits the primary color */
.contact-card-icon svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  display: block;
}

/* Card text group - title and info stacked */
.contact-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;                     /* Allow text to wrap/truncate correctly */
}

/* Card title - small, muted, uppercase for a premium label look */
.contact-card-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;             /* 13px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* Card info - the actual contact value, slightly bolder */
.contact-card-info {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  word-break: break-word;           /* Long emails wrap gracefully */
}


/* ============================================================
   7. AVAILABILITY BADGE
   ------------------------------------------------------------
   A premium pill badge that signals the developer's current
   availability. It uses a soft surface, a subtle border, and a
   small green status dot to feel inviting and professional.
   The dot has a soft glow to draw the eye gently.
   ============================================================ */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);              /* 8px between dot and text */

  font-family: var(--font-body);
  font-size: 0.9375rem;             /* 15px */
  font-weight: 600;
  color: var(--color-text);

  padding: var(--space-1) var(--space-3); /* 8px vertical, 24px horizontal */
  border-radius: 999px;             /* Fully rounded pill */
  border: 1px solid var(--color-border);
  background-color: rgba(30, 41, 59, 0.5);

  align-self: flex-start;           /* Don't stretch the badge */
}

/* The green status dot with a soft glow */
.availability-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #22C55E;        /* Green for "available" */
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.6); /* Soft green glow */
}


/* ============================================================
   8. CONTACT FORM
   ------------------------------------------------------------
   The form is wrapped in a premium glassmorphism panel with
   rounded corners, a soft border, and an elegant shadow. The
   panel has generous internal padding (32px) so the inputs
   feel comfortable and uncramped. The form uses a column
   Flexbox layout with a consistent 24px gap between fields.
   ============================================================ */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);              /* 24px between form fields */

  padding: var(--space-4);          /* 32px internal padding */
  border-radius: 24px;              /* Rounded corners */
  border: 1px solid var(--color-border);

  /* Glassmorphism: semi-transparent surface + blur */
  background-color: rgba(30, 41, 59, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari support */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

/* A two-column row for the name and email fields on desktop */
.form-row {
  display: flex;
  gap: var(--space-3);              /* 24px between the two fields */
}


/* ============================================================
   9. FORM FIELDS
   ------------------------------------------------------------
   Each field groups a label and its input. Labels use Inter,
   are slightly small, and use muted color for a calm, premium
   look. The fields stack vertically with a small 8px gap
   between the label and the input. The .form-row groups the
   name and email fields side by side on desktop.
   ============================================================ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);              /* 8px between label and input */
  flex: 1;                          /* Fields in a row share equal width */
}

/* Elegant labels - small, muted, with a subtle weight */
.form-label {
  font-family: var(--font-body);
  font-size: 0.875rem;              /* 14px */
  font-weight: 500;
  color: var(--color-muted);
}


/* ============================================================
   10. INPUT FIELDS
   ------------------------------------------------------------
   Inputs and the textarea use rounded corners (16px), a soft
   border, a glassmorphism background, comfortable padding, and
   a large click area. The textarea is taller than the inputs
   for comfortable message writing. All form controls share the
   same base styling for consistency.
   ============================================================ */
.form-input,
.form-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);

  padding: var(--space-2) var(--space-3); /* 16px vertical, 24px horizontal */
  border-radius: 16px;              /* Rounded corners */
  border: 1px solid var(--color-border);

  /* Glassmorphism background */
  background-color: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Smooth transitions for the focus state */
  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 - muted and elegant */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.7;
}

/* The textarea is taller for comfortable message writing */
.form-textarea {
  min-height: 140px;
  resize: vertical;                 /* Allow vertical resizing only */
  line-height: 1.6;
}


/* ============================================================
   11. FOCUS STATES
   ------------------------------------------------------------
   When an input is focused, its border changes to the primary
   color and a soft primary glow appears. This gives a premium,
   tactile feel and clearly shows the user which field is
   active. The focus state is also visible for keyboard users,
   supporting accessibility.
   ============================================================ */
.form-input:focus,
.form-textarea:focus {
  outline: none;                    /* Remove default outline; we use a glow */
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15); /* Soft primary glow */
  background-color: rgba(15, 23, 42, 0.7);        /* Slightly more opaque */
}


/* ============================================================
   12. BUTTON STYLING
   ------------------------------------------------------------
   The "Send Message" button is a premium pill button filled
   with the accent gradient and a soft glow. It has comfortable
   padding, a large click area, and lifts gently on hover with
   an intensified glow. It uses the same 300ms easing curve as
   the rest of the portfolio for a cohesive feel.
   ============================================================ */
.form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);              /* 8px between icon and text */

  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-bg);           /* Dark text on bright button for contrast */

  padding: var(--space-2) var(--space-4); /* 16px vertical, 32px horizontal */
  border-radius: 999px;             /* Fully rounded pill */
  border: none;

  /* Accent gradient background for a premium look */
  background: linear-gradient(135deg, var(--color-accent), #FBBF24);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.30);

  cursor: pointer;
  transition:
    transform var(--transition-speed) var(--transition-ease),
    box-shadow var(--transition-speed) var(--transition-ease);
}

/* Button icon - small SVG that inherits the current text color */
.form-button-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* Hover: lift the button and intensify the glow */
.form-button:hover {
  transform: translateY(-2px);      /* Subtle lift */
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.45);
}

/* Active/pressed state: button sinks slightly for feedback */
.form-button:active {
  transform: translateY(0);
}


/* ============================================================
   13. GLASSMORPHISM EFFECT
   ------------------------------------------------------------
   Glassmorphism is created by combining a semi-transparent
   surface color with a backdrop blur. This lets the subtle
   background gradients show through softly, giving the cards
   and form a premium, frosted-glass depth. The effect is
   applied on .contact-card and .contact-form above and
   documented here for clarity. We keep the opacity moderate
   (0.45) so text contrast stays high for accessibility.
   ============================================================ */


/* ============================================================
   14. HOVER EFFECTS
   ------------------------------------------------------------
   On hover, each contact card lifts gently (-2px) and its
   border picks up a hint of the primary color. The form button
   lifts (-2px) with an intensified glow. All transitions use
   the shared 300ms easing curve so the whole portfolio feels
   cohesive and responsive. These effects are subtle and
   premium, never excessive.
   ============================================================ */
/* REFINED: Hover now lifts higher, shifts the accent border to primary,
   and adds a softer shadow for a more premium feel */
.contact-card:hover {
  transform: translateY(-4px);      /* REFINED: higher lift */
  border-color: rgba(56, 189, 248, 0.3);
  border-left-color: var(--color-primary);  /* REFINED: accent shifts to primary */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);  /* REFINED: softer shadow */
}

/* Visible focus state for keyboard users on contact cards (accessibility) */
.contact-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Visible focus state for the submit button (accessibility) */
.form-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}


/* ============================================================
   15. RESPONSIVE DESIGN - MEDIA QUERIES
   ------------------------------------------------------------
   We use two breakpoints:
     - Tablet  (max-width: 900px): stack the two columns
       vertically, center-align the header, and stack the
       name/email form row.
     - Mobile  (max-width: 600px): reduce padding, make form
       controls full width, and tighten spacing for comfort.
   ============================================================ */

/* ---- Tablet and smaller: stack vertically ---- */
@media (max-width: 900px) {
  .contact {
    padding: var(--space-6) var(--space-3); /* 64px top/bottom, 24px sides */
  }

  .contact-container {
    gap: var(--space-5);             /* 48px gap on tablet */
  }

  /* Center-align the header on tablet/mobile */
  .contact-header {
    align-items: center;
    text-align: center;
    margin: 0 auto;                  /* Center the header block */
  }

  /* Stack the two columns vertically */
  .contact-grid {
    flex-direction: column;
    gap: var(--space-5);             /* 48px gap between stacked columns */
  }

  /* Center the friendly message on tablet/mobile */
  .contact-message {
    margin: 0 auto;
    text-align: center;
  }

  /* Center the availability badge on tablet/mobile */
  .availability-badge {
    align-self: center;
  }
}

/* ---- Mobile: comfortable spacing and full-width controls ---- */
@media (max-width: 600px) {
  .contact {
    padding: var(--space-5) var(--space-2); /* 48px top/bottom, 16px sides */
  }

  .contact-container {
    gap: var(--space-5);             /* 48px gap on mobile */
  }

  .contact-grid {
    gap: var(--space-4);             /* 32px gap on mobile */
  }

  /* Stack the name and email fields vertically on mobile */
  .form-row {
    flex-direction: column;
    gap: var(--space-3);             /* 24px gap between stacked fields */
  }

  /* Reduce form padding on mobile for comfortable spacing */
  .contact-form {
    padding: var(--space-3);         /* 24px padding on mobile */
  }

  /* Reduce card padding on mobile */
  .contact-card {
    padding: var(--space-2);         /* 16px padding on mobile */
  }

  /* Make the button full width on mobile for a comfortable tap target */
  .form-button {
    width: 100%;
  }
}