/* ================================
   FocusSoc Contact Us PAGE STYLES
   ================================ */

/* Hero */
.contact-hero-section {
  margin-top: var(--space-12);
  text-align: center;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.contact-hero-section h1 { margin-bottom: var(--space-2); word-break: break-word; }
.contact-hero-summary {
  font-size: var(--font-size-lg);
  color: var(--color-gray-200);
  margin-bottom: var(--space-8);
  margin-inline: auto;
  max-width: 58ch;
}

/* Main layout */
.main-contact-section {
  display: flex;
  margin: 0 auto;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.contact-form-card { margin-bottom: 34px;justify-self: center; width: 50%; }
.help-center-aside { justify-self: center; }
@media (max-width: 1024px) {
  .main-contact-section { grid-template-columns: 1fr; gap: var(--space-6); }
  .contact-form-card { max-width: 530px; width: 100%; }
}

/* Contact Form */
.contact-form {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2);
  text-align: left;
  margin-left: auto; margin-right: auto;
}
.form-row { display: flex; flex-direction: column; margin-bottom: var(--space-2); }
.contact-form label { color: var(--color-gray-200); margin-bottom: 2px; font-weight: 500; font-size: var(--font-size-sm); }
.contact-form input, .contact-form select, .contact-form textarea { background: var(--color-background); margin-bottom: 0; font-size: var(--font-size-base); }
.optional-label { color: var(--color-gray-400); font-size: var(--font-size-xs); margin-left: var(--space-2); }
.contact-form input[type="file"] { border: none; padding-left: 0; padding-right: 0; color: var(--color-gray-200); }
.form-success { margin-top: var(--space-2); color: var(--color-success); font-size: var(--font-size-lg); text-align: center; }
.form-error { margin-top: var(--space-2); color: var(--color-danger); font-size: var(--font-size-base); text-align: center; }

/* Help Center */
.help-center-card {
  padding: var(--space-6);
  background: var(--color-background);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.help-links { margin-bottom: var(--space-4); padding-left: 0; }
.help-links li { margin-bottom: var(--space-2); }
.help-links a { color: var(--color-primary); display: flex; flex-direction: column; font-weight: 600; }
.help-desc { color: var(--color-gray-400); font-size: var(--font-size-xs); font-weight: 400; }
.help-prompt { margin-top: var(--space-3); color: var(--color-gray-200); font-size: var(--font-size-sm); }

/* Community Feedback Wall */
.community-feedback-section {
  margin: 0 auto 37px auto;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  text-align: center;
  padding: var(--space-6);
}
.feedback-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-left: 0;
  justify-items: center;
}
.feedback-wall li {
  width: 100%;
  background: var(--color-background); color: var(--color-text);
  padding: var(--space-4);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  position: relative; text-align: left;
}
.feedback-quote { font-style: italic; color: var(--color-warning); }
.feedback-author { color: var(--color-gray-400); font-size: var(--font-size-sm); margin-top: var(--space-2); }
.feedback-prompt-block { margin-top: var(--space-2); align-items: center; gap: var(--space-2); font-size: var(--font-size-base); }
.feedback-prompt-icon { font-size: 1.8em; color: var(--color-primary); }
.feedback-link { color: var(--color-primary); text-decoration: underline; }
.feedback-link:focus, .feedback-link:hover { color: var(--color-warning); }

/* Social */
.social-connect-section {margin: 0 auto;}
.connect-social-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  background: var(--color-background);
  border: 1px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  text-align: center;
  padding: var(--space-6);
}
.social-content h2 { margin-bottom: var(--space-2); }
.social-links { display: flex; gap: var(--space-4); margin-top: var(--space-2); justify-content: center; }
.social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; font-size: 2rem; border-radius: 50%;
  background: var(--color-gray-800); color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
  border: 2px solid transparent;
}
.social-icon:hover, .social-icon:focus-visible { background: var(--color-primary); color: var(--color-background); border-color: var(--color-warning); outline: none; }
.facebook { background: #1a223d; }
.twitter  { background: #15202b; }
.instagram { background: linear-gradient(135deg,#f44336 20%,#e91e63 50%,#ffb915 95%); color: #fff; }
.discord  { background: #5865f2; color: #fff; }

/* Responsible gaming */
.responsible-gaming-section {
  margin: 37px auto;
  background: var(--color-background);
  border-left: 4px solid var(--color-warning);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-base);
  padding: var(--space-6);
}
.safety-list {
  margin: 0 auto var(--space-3) auto;
  padding-left: var(--space-4);
}
.safety-list li { margin-bottom: var(--space-2); }
.safety-last { margin-bottom: var(--space-4); }
.entertainment-statement { font-style: italic; color: var(--color-warning); font-size: var(--font-size-base); }

/* Partnership & media */
.media-partner-section {margin: 37px auto;}
.media-partner-section .partner-card {
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  margin-bottom: var(--space-12);
  text-align: center;
  padding: var(--space-6);
}
.contact-media-list { margin-bottom: var(--space-3); margin-left: var(--space-3); }
.contact-media-list li { margin-bottom: var(--space-2); }

/* Business info */
.business-info-section { margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.business-card {
  background: var(--color-background);
  box-shadow: var(--shadow-md);
  text-align: left;
  padding: var(--space-6);
}
.business-details { text-align: center;max-width: 60ch; margin: 0 auto; }
.business-list { text-align: center;margin-bottom: var(--space-2); font-size: var(--font-size-base); padding-left: var(--space-4); }
.business-list li { list-style: none;margin-bottom: var(--space-2); }
.legal-small-print { font-size: var(--font-size-xs); color: var(--color-gray-400); }
.business-map-fake { margin: 43px auto 0 auto; justify-self: center; }
.business-map-fake img { border-radius: var(--radius-lg); object-fit: cover; width: 100%; max-width: 210px; min-width: 120px; }
@media (max-width: 1024px) {

  .community-feedback-section {
    max-width: 520px;
    width: 100%;
  }

  .main-contact-section {
    display: block;
  } 

}
@media (max-width: 800px) {
  .feedback-wall {display: flex;flex-direction: column;}
  .business-card { grid-template-columns: 1fr; gap: var(--space-4); }
  .business-map-fake { margin-left: 0; max-width: 100%; }
}

/* Accessibility */
@media (max-width: 540px) {
  .feedback-wall { grid-template-columns: 1fr; gap: 18px; }
}