/*
 * chatsifieds.css
 * Global stylesheet for Chatsifieds.com
 * Shared across all ESL guide pages.
 *
 * Depends on:
 *   - Tailwind CSS (CDN)
 *   - Google Fonts: Sora + Playfair Display
 *
 * Usage:  <link rel="stylesheet" href="chatsifieds.css"/>
 */

/* ── Typography ─────────────────────────────────────────── */
body                { font-family: 'Sora', sans-serif; }
.font-playfair      { font-family: 'Playfair Display', serif; }

/* ── Brand colour helpers ───────────────────────────────── */
.text-brand         { color: #0D7C66; }
.bg-brand           { background-color: #0D7C66; }
.border-brand       { border-color: #0D7C66; }
.bg-brand-pale      { background-color: #E6F7F4; }
.border-brand-light { border-color: #A8DDD6; }

/* ── Gradient backgrounds ───────────────────────────────── */
.hero-grad {
  background: #0D7C66;
  background-image:
    radial-gradient(ellipse at 78% 12%, rgba(82,201,181,0.32) 0%, transparent 55%),
    radial-gradient(ellipse at 8%  88%, rgba(217,119,6,0.20)  0%, transparent 50%);
}
.footer-grad {
  background: #0D7C66;
  background-image:
    radial-gradient(ellipse at 80% 50%, rgba(126,239,217,0.15) 0%, transparent 55%);
}
.esl-grad {
  background: #0D7C66;
  background-image:
    radial-gradient(ellipse at 88% 8%, rgba(126,239,217,0.22) 0%, transparent 50%);
}
.score-grad {
  background: #0D7C66;
  background-image:
    radial-gradient(ellipse at 70% 20%, rgba(126,239,217,0.25) 0%, transparent 55%);
}
.cert-grad {
  background: #0D7C66;
  background-image:
    radial-gradient(ellipse at 60% 0%, rgba(126,239,217,0.38) 0%, transparent 55%);
}

/* ── Quiz option buttons ────────────────────────────────── */
.qopt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.76rem 0.95rem;
  border-radius: 12px;
  border: 2px solid #E5E7EB;
  cursor: pointer;
  background: #FAFAF7;
  width: 100%;
  text-align: left;
  font-family: 'Sora', sans-serif;
  font-size: 0.89rem;
  font-weight: 600;
  color: #374151;
}
.qdot {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2.5px solid #D1D5DB;
  flex-shrink: 0;
  display: inline-block;
}

/* ── FAQ accordion ──────────────────────────────────────── */
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* ── Print: show certificate inline ────────────────────── */
@media print {
  #csf-cert {
    display: flex !important;
    position: static !important;
    background: none !important;
    padding: 0 !important;
  }
}