/* ==========================================================================
   Main Stylesheet for Founders & Studio Project
   ========================================================================== */

/* --- Global Theme Variables --- */
:root {
  --bg-main:      #13141d;
  --bg-box:       #191e2e;
  --border-box:   #283046;
  --text-main:    #f7f5f5;
  --text-muted:   #b7c5db;
  --accent:       #00e7b1;
  --accent2:      #00b692;
  --accent-hover: #32ffc1;
  --placeholder:  #5a6788;
}

/* --- Global Body & Layout --- */
body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  min-height: 100vh;
}

.gradient-sun-strong {
    background-image: radial-gradient(ellipse 85% 50% at 50% 50%,  rgb(28, 34, 61), #000000);
}
/* xxl */
@media (min-width: 1400px) {
  .gradient-sun-strong {
    background-image: radial-gradient(ellipse 750px 700px at 50% 50%,  rgb(28, 34, 61), #000000);
  }
}


/* ==========================================================================
   Shared Components
   ========================================================================== */

/* --- Main content box for all pages --- */
.form-container,
.confirmation-container {
  background: var(--bg-box);
  border: 1px solid var(--border-box);
}

/* --- Shared Typography --- */
.form-title,
.confirmation-title {
  font-weight: 700;
  color: var(--text-main);
}

.form-subtitle,
.confirmation-subtitle {
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.6;
}


/* ==========================================================================
   Contact Form Specific Styles
   ========================================================================== */

/* --- Founder Image Styles --- */
.founder-images-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.founder-img {
  width: 5.5rem; 
  height: 5.5rem;
  border-radius: 50%; 
  border: 2px solid var(--text-muted);
  object-fit: cover; 
}
.founder-img:last-child {
  margin-left: -0.7rem;
}

.email-accent {
  color: var(--accent2);
  font-weight: 500;
}

/* --- Form Controls & Inputs --- */
.form-container .form-label {
  color: var(--text-main);
  letter-spacing: 0.01em;
  font-weight: 400;
  font-size: 0.9rem; 
}
.form-container .form-control {
  background-color: var(--bg-main);
  color: var(--text-main);
  border: 1px solid var(--border-box);
  border-radius: 0.7rem;
  font-size: 1rem;
  padding: 0.875rem;
  transition: border-color 0.18s, background-color 0.18s;
}
.form-container .form-control:focus {
  background-color: var(--bg-main);
  color: var(--text-main);
  border-color: var(--placeholder);
  box-shadow: none;
}
.form-container .form-control::placeholder {
  color: var(--placeholder);
  opacity: 1;
  font-size: 0.9rem;
}

.form-select {
  background-color: var(--bg-main);
  color: var(--text-main);
  border: 1px solid var(--border-box);
  border-radius: 11px;
  font-size: 0.9em;
  margin-bottom: 2px;
  padding: 14px;
  transition: border 0.18s, background 0.18s;
  cursor: pointer;
}
.form-select:focus {
  outline: none;
  background-color: var(--bg-main);
  color: var(--text-main);
  border-color: var(--placeholder);
  box-shadow: none;
}


/* --- Main Action Button --- */
.btn-accent {
  background: var(--accent);
  border: none;
  color: var(--bg-main);
  font-weight: 500;
  font-size: 1rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-radius: 0.7rem;
  transition: background 0.17s, color 0.17s;
  letter-spacing: 0.01em;
}
.btn-accent:hover,
.btn-accent:focus{
  background: var(--accent-hover) !important;
  color: var(--bg-main) !important;
}

.btn-accent:active {
  background: var(--accent2) !important;
  color: var(--bg-main) !important;
}

/* --- Autofill styles for dark mode  --- */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-main) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
}


/* ==========================================================================
   "Message Sent" Page Specific Styles
   ========================================================================== */

.success-icon-container {
  width: 3.5rem; 
  height: 3.5rem;
  background-color: rgba(2, 203, 157, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.success-icon-container svg {
  width: 1.5rem; 
  height: 1.5rem;
  color: var(--accent);
}

a.my-button, button.my-button{
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px; 
  padding-left: 1rem; 
  padding-right: 1rem; 
  font-size: 14px;  
}

a.discord-link{
    color: #e6e8ee;
    background-color: #3e4b62;
}
a.discord-link:hover {
    background-color: #4d5f7b;
}


/* ==========================================================================
   Responsive Styles (Mobile First)
   ========================================================================== */

@media (max-width: 575.98px) {
  /* --- Shared Typography --- */
  .form-title,
  .confirmation-title {
    font-size: 1.5rem;
  }
  .form-subtitle,
  .confirmation-subtitle {
    font-size: 0.85rem;
  }
  .form-select {
    font-size: 0.85rem;
  }
  ::placeholder{
    font-size: 0.85rem;
  }
  /* --- Form Specific --- */
  .form-container .form-label {
    font-size: 0.85rem;
  }
  .btn-accent {
    font-size: 0.85rem;
  }
  .founder-img {
    width: 4.5rem; 
    height: 4.5rem;
    border: 1px solid var(--text-muted);
  }
  .founder-img:last-child {
    margin-left: -0.5rem; 
  }

  /*--- Message ----*/
  a.my-button, button.my-button {
    height: 44px; 
    padding-left: 1.2rem; 
    padding-right: 1.2rem; 
    font-size: 0.8rem;
  }

}