/* Contact page stylesheet. Shared design is inherited from the homepage stylesheet. */
@import url("../homepage/style.css");

.contact-page { padding-top: 55px; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0 22px;
}
.contact-card {
  padding: 21px;
  min-height: 210px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(22,33,27,.98), rgba(15,23,19,.98));
}
.contact-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 17px;
  border-radius: 11px;
  color: var(--green);
  background: rgba(183,243,107,.09);
  font-size: 21px;
}
.contact-card h2 {
  margin: 0 0 9px;
  font: 700 16px 'Space Grotesk', sans-serif;
}
.contact-card p {
  min-height: 65px;
  margin: 0 0 15px;
  color: #9aa99d;
  font-size: 10px;
  line-height: 1.75;
}
.contact-label {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 20px;
  color: #bce98f;
  background: rgba(183,243,107,.08);
  font-size: 9px;
  font-weight: 700;
}
.contact-main {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  align-items: center;
  gap: 24px;
  padding: 26px;
  border: 1px solid rgba(183,243,107,.18);
  border-radius: 16px;
  background: linear-gradient(110deg, rgba(48,76,39,.25), rgba(17,26,22,.85) 63%);
}
.contact-main-copy h2 {
  margin: 0 0 8px;
  font: 700 23px 'Space Grotesk', sans-serif;
}
.contact-main-copy p {
  margin: 0;
  color: #9aa99d;
  font-size: 10px;
  line-height: 1.8;
}
.contact-email-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(7,13,9,.45);
}
.email-symbol {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--green);
  background: rgba(183,243,107,.09);
  font-size: 19px;
}
.contact-email-card strong, .contact-email-card small { display: block; }
.contact-email-card strong { margin-bottom: 5px; font-size: 11px; }
.contact-email-link { color: var(--green); font-size: 10px; overflow-wrap: anywhere; }
.contact-email-card small {
  display: block;
  margin-top: 7px;
  color: #829085;
  font-size: 8px;
  line-height: 1.5;
}
.email-button { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.contact-note {
  margin-top: 15px;
  color: #77857a;
  font-size: 9px;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .contact-main { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .contact-page { padding-top: 40px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card { min-height: 0; }
  .contact-card p { min-height: 0; }
  .contact-main { padding: 18px; }
  .contact-email-card { align-items: flex-start; flex-wrap: wrap; }
  .email-button { margin-left: 51px; }
}

/* Sponsorship information merged into the contact page */
.sponsorship-section {
  margin: 34px 0 26px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.sponsorship-heading {
  max-width: 720px;
  margin-bottom: 19px;
}
.sponsorship-heading h2 {
  margin: 0 0 8px;
  font: 700 25px 'Space Grotesk', sans-serif;
  letter-spacing: -.7px;
}
.sponsorship-heading p,
.sponsorship-details p {
  margin: 0;
  color: #9aa99d;
  font-size: 10px;
  line-height: 1.8;
}
.sponsorship-details {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  align-items: start;
  margin-top: 18px;
  padding: 21px;
  border: 1px solid rgba(183,243,107,.16);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(48,76,39,.2), rgba(17,26,22,.82) 65%);
}
.sponsorship-details h3 {
  margin: 0 0 8px;
  font: 700 16px 'Space Grotesk', sans-serif;
}
.sponsorship-checklist {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(7,13,9,.32);
}
.sponsorship-checklist h3 {
  font-size: 13px;
}
.sponsorship-checklist .check-list {
  gap: 8px;
}
.sponsorship-transparency {
  margin: 12px 0 0;
  color: #849187;
  font-size: 9px;
  line-height: 1.6;
}
@media (max-width: 680px) {
  .sponsorship-section { margin-top: 27px; padding-top: 23px; }
  .sponsorship-heading h2 { font-size: 21px; }
  .sponsorship-details { grid-template-columns: 1fr; padding: 16px; }
}


/* Slightly increase smaller contact-page headings */
.contact-card h2 { font-size: 18px; }
.contact-main-copy h2 { font-size: 24px; }
.sponsorship-heading h2 { font-size: 27px; }
.sponsorship-details h3 { font-size: 18px; }
.sponsorship-checklist h3 { font-size: 15px; }

@media (max-width: 680px) {
  .sponsorship-heading h2 { font-size: 22px; }
}


/* Developer sponsorship enquiry form */
.sponsor-inquiry-form {
  margin-top: 18px;
  padding: 22px;
  border: 1px solid rgba(183,243,107,.18);
  border-radius: 14px;
  background: rgba(13,21,17,.88);
}
.sponsor-form-heading {
  margin-bottom: 17px;
}
.sponsor-form-heading h3 {
  margin: 6px 0;
  color: var(--text);
  font: 700 20px 'Space Grotesk',sans-serif;
}
.sponsor-form-heading p {
  margin: 0;
  color: #9aa99d;
  font-size: 10px;
  line-height: 1.7;
}
.sponsor-form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
}
.sponsor-form-field {
  display: grid;
  gap: 6px;
  color: #d5e0d6;
  font-size: 10px;
  font-weight: 650;
}
.sponsor-form-field input,
.sponsor-form-field select,
.sponsor-form-field textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  color: #eaf2e9;
  background: #0a100d;
  font: 10px 'Inter',sans-serif;
}
.sponsor-form-field input:focus,
.sponsor-form-field select:focus,
.sponsor-form-field textarea:focus {
  border-color: rgba(183,243,107,.5);
  box-shadow: 0 0 0 3px rgba(183,243,107,.07);
}
.sponsor-form-field textarea {
  min-height: 95px;
  resize: vertical;
}
.sponsor-form-wide {
  grid-column: 1 / -1;
}
.sponsor-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}
.sponsor-form-legal {
  max-width: 510px;
  margin: 0;
  color: #879589;
  font-size: 9px;
  line-height: 1.65;
}
.sponsor-form-legal a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sponsor-form-footer button:disabled {
  opacity: .55;
  cursor: wait;
}
.sponsor-form-message {
  margin: 13px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(183,243,107,.18);
  border-radius: 8px;
  color: #c8eea6;
  background: rgba(183,243,107,.05);
  font-size: 10px;
  line-height: 1.6;
}
.sponsor-form-message.error {
  color: #f0b5a9;
  border-color: rgba(239,145,130,.2);
  background: rgba(239,145,130,.05);
}
.sponsor-form-message[hidden] { display:none !important; }
.sponsor-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
@media (max-width: 680px) {
  .sponsor-inquiry-form { padding: 15px; }
  .sponsor-form-grid { grid-template-columns: 1fr; }
  .sponsor-form-wide { grid-column: auto; }
  .sponsor-form-footer { align-items: flex-start; flex-direction: column; }
}