/* ===== Report Abuse Page ===== */

/* Hero Section - reuses faq-page from final-page.css */
.faq-page .eyebrow-wrapper {
  text-align: center;
}

.faq-page .eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.08);
  border: 1px solid rgba(13, 110, 253, 0.15);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
}

.faq-page .hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 16px;
}

.faq-page .highlight-blue {
  color: #0d6efd;
}

.faq-page .hero-sub {
  font-size: 1.05rem;
  color: #475569;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Abuse accordion section container */
.abuse-accordion-section {
  padding: 30px 0 100px;
}

.abuse-accordion-section .container {
  max-width: 1600px;
}

/* FAQ list for abuse (stacked layout) */
.abuse-accordion-section .faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Abuse-specific: add description below title in faq-card-header */
.abuse-acc-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.abuse-acc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(13, 110, 253, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0d6efd;
}

.abuse-acc-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 4px;
}

.abuse-acc-desc {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* Form Grid inside faq-card-body */
.abuse-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.abuse-field-wide {
  grid-column: 1 / -1;
}

/* Form Fields */
.abuse-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.abuse-field input,
.abuse-field textarea {
  width: 100%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  color: #0f172a;
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

.abuse-field input:focus,
.abuse-field textarea:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.abuse-field input::placeholder,
.abuse-field textarea::placeholder {
  color: #94a3b8;
}

.abuse-field textarea {
  resize: vertical;
  min-height: 100px;
}

/* Legal Text */
.abuse-legal-text {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.6;
  margin: 20px 0 16px;
  padding: 14px 16px;
  background: #f1f5f9;
  border-radius: 10px;
  border-left: 3px solid rgba(13, 110, 253, 0.3);
}

/* Submit Button */
.abuse-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #0d6efd, #3b82f6);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 8px;
}

.abuse-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(13, 110, 253, 0.3);
}

.abuse-submit-btn:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
  .abuse-form-grid {
    grid-template-columns: 1fr;
  }

  .abuse-acc-desc {
    display: none;
  }

  .abuse-acc-icon {
    width: 38px;
    height: 38px;
  }
}

/* Extracted from report-abuse.html hero section */
.abuse-hero-grid {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            align-items: center;
                            gap: 40px;
                            margin-bottom: 80px;
                        }

                        .abuse-hero-content {
                            text-align: left;
                        }

                        .abuse-hero-content .faq-subtitle {
                            margin: 0;
                            display: inline-block;
                        }

                        .abuse-hero-content .faq-title {
                            text-align: left;
                            font-size: clamp(2.5rem, 5vw, 4rem);
                            line-height: 1.1;
                            margin: 20px 0;
                            color: #0f172a;
                            font-weight: 800;
                        }

                        .abuse-hero-content .hero-sub {
                            text-align: left;
                            margin: 0;
                            max-width: 90%;
                            font-size: 1.1rem;
                            color: #475569;
                        }

                        .abuse-hero-image img {
                            width: 100%;
                            max-width: 600px;
                            height: auto;
                            border-radius: 20px;
                            /* animation removed */
                        }

                        @keyframes float-hero {
                            0% {
                                transform: translateY(0px);
                            }

                            50% {
                                transform: translateY(-15px);
                            }

                            100% {
                                transform: translateY(0px);
                            }
                        }

                        .faq-page .faq-section {
                            background: linear-gradient(180deg, #f0f7ff 0%, #e2effd 40%, #ffffff 100%);
                            border-bottom: 1px solid #e2effd;
                        }

                        @media (max-width: 992px) {
                            .abuse-hero-grid {
                                grid-template-columns: 1fr;
                                text-align: center;
                                gap: 30px;
                                margin-bottom: 50px;
                            }

                            .abuse-hero-content {
                                text-align: center;
                            }

                            .abuse-hero-content .faq-title,
                            .abuse-hero-content .hero-sub {
                                text-align: center;
                                margin-left: auto;
                                margin-right: auto;
                            }
                        }


/* Override any dark body background from contact-us.css */
body.home {
  background: #ffffff !important;
}
