/* ============================================================
   CLARITY QUIZ — PLUGIN STYLESHEET
   Version: 1.1.0
   Description: All styles for the [clarity_quiz] shortcode.
   To customise colors, search for the hex codes below:
     Primary purple  → #7C6FF7
     Light blue      → #5BACE0
     Dark text       → #1A1A1A
     Grey text       → #6B6B6B
   ============================================================ */


/* ------------------------------------------------------------
   1. QUIZ CARD WRAPPER
   The outer white card that contains the entire quiz.
   Adjust max-width to control how wide the quiz appears.
   ------------------------------------------------------------ */
.cq-wrap {
  background: #ffffff;             /* Card background — white */
  border-radius: 20px;             /* Rounded corners */
  padding: 2.5rem 2.5rem 2rem;     /* Inner spacing */
  /* max-width: 620px;                Max width of the card */
  max-width: 75%;                /* Revised Max width of the card */
  width: 100%;
  margin: 2rem auto;               /* Centre the card on the page */
  box-shadow: 0 2px 40px rgba(0,0,0,0.07); /* Soft drop shadow */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1A1A1A;                  /* Default text colour */
}


/* ------------------------------------------------------------
   2. QUIZ HEADER — EYEBROW, TITLE, SUBTITLE
   ------------------------------------------------------------ */

/* Small uppercase label above the title e.g. "Free self-assessment" */
.cq-eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7C6FF7;                  /* Primary purple — change to rebrand */
  margin: 0 0 10px;
}

/* Main quiz heading */
.cq-title {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #9C3E00 !important;       /* Dark near-black Changed to Dark Red */
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
  border: none !important;         /* Override WordPress theme borders */
  padding: 0 !important;
  Text-transform: uppercase;
}

/* Instruction text below the title */
.cq-subtitle {
  font-size: 14px;
  color: #6B6B6B;                  /* Medium grey */
  line-height: 1.6;
  margin: 0 0 1.75rem;
}


/* ------------------------------------------------------------
   3. PROGRESS BAR
   Fills left-to-right as the user answers each question.
   ------------------------------------------------------------ */

/* Background track (unfilled part) */
.cq-prog-track {
  height: 5px;
  background: #F0EEF8;             /* Very light purple-grey */
  border-radius: 99px;
  margin-bottom: 2rem;
  overflow: hidden;
}

/* Filled portion — controlled by JavaScript */
.cq-prog-fill {
  height: 100%;
  background: #7C6FF7;             /* Primary purple — matches brand */
  border-radius: 99px;
  transition: width .4s ease;      /* Smooth animation as it fills */
  width: 0%;                       /* Starts empty */
}


/* ------------------------------------------------------------
   4. QUESTION BLOCK
   Wraps each individual question and its answer options.
   ------------------------------------------------------------ */
.cq-q-block {
  margin-bottom: 1.75rem;          /* Space between questions */
}

/* "Question X of 6" counter above each question */
.cq-counter {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5BACE0;                  /* Light blue — change to recolour counter */
  margin: 0 0 5px;
}

/* The question text itself */
.cq-q-text {
/*  font-size: 15px;  */
 font-size: 21px;
 text-transform: uppercase;
  font-weight: 700;
/*   color: #1A1A1A;                  Dark near-black */
  color: #BD2A2E; 
  line-height: 1.5;
  margin: 0 0 12px;
}


/* ------------------------------------------------------------
   5. ANSWER OPTION BUTTONS (RADIO STYLE)
   Each clickable answer choice below a question.
   ------------------------------------------------------------ */

/* Default (unselected) state */
.cq-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #F2F2F2 !important;  /* Radio button background — light grey */
  border: 1.5px solid #E0E0E0 !important; /* Slightly darker grey border */
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 7px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;                 /* Answer label font size */
  color: #000000 !important;       /* Answer label text colour — black */
  transition: all .15s;
  line-height: 1.5;
}

/* Hover state */
.cq-opt:hover {
  border-color: #A78BFA !important; /* Soft purple border on hover */
  background: #EAEAEA !important;   /* Slightly darker grey on hover */
  color: #000000 !important;
}

/* Selected / active state */
.cq-opt.cq-sel {
  border-color: #7C6FF7 !important; /* Primary purple border when selected */
  background: #F2F2F2 !important;   /* Light grey background when selected */
  color: #000000 !important;        /* Black text when selected */
}


/* ------------------------------------------------------------
   6. RADIO DOT (the circle indicator inside each option)
   ------------------------------------------------------------ */

/* The circular dot container */
.cq-dot {
  width: 17px;
  height: 17px;
  min-width: 17px;                 /* Prevents shrinking in flex layout */
  border-radius: 50%;
  border: 1.5px solid #CCC;        /* Grey border — unselected */
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}

/* Dot when its parent option is selected — fills with purple */
.cq-opt.cq-sel .cq-dot {
  border-color: #7C6FF7;           /* Purple border */
  background: #7C6FF7;             /* Purple fill */
}

/* White inner circle (checkmark effect) when selected */
.cq-opt.cq-sel .cq-dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;                /* White inner dot */
}


/* ------------------------------------------------------------
   7. DIVIDER LINE
   Horizontal rule between questions and the submit button.
   ------------------------------------------------------------ */
.cq-divider {
  border: none !important;
  border-top: 1px solid #F0EEF8 !important; /* Very light purple-grey line */
  margin: 1.5rem 0 !important;
}


/* ------------------------------------------------------------
   8. SUBMIT BUTTON ("See my clarity score")
   Locked/greyed until all questions are answered.
   ------------------------------------------------------------ */

/* Default active state */
.cq-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #7C6FF7;             /* Primary purple */
  color: #fff !important;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}

/* Hover — slightly darker purple + subtle lift */
.cq-submit:hover:not(:disabled) {
  background: #6558E8;
  transform: translateY(-1px);
}

/* Disabled state — shown until all questions answered */
.cq-submit:disabled {
  background: #D4CFF8;             /* Washed-out purple when locked */
  cursor: not-allowed;
  transform: none;
}


/* ------------------------------------------------------------
   9. RESULT VIEW
   Shown after the user submits. Hidden by default.
   ------------------------------------------------------------ */
.cq-result {
  display: none;                   /* Toggled to block via JavaScript */
}

/* Coloured score pill e.g. "Clarity Score: 3 / 5" */
.cq-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 99px;             /* Full pill shape */
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 1.25rem;
  /* Background and text colour set dynamically by JavaScript */
}

/* Result heading e.g. "So close to clicking" */
.cq-res-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
  border: none !important;         /* Override WordPress theme borders */
  padding: 0 !important;
}

/* Result description paragraph */
.cq-res-desc {
  font-size: 14px;
  color: #5A5A5A;                  /* Medium grey */
  line-height: 1.7;
  margin: 0 0 1.75rem;
}


/* ------------------------------------------------------------
   10. CTA CARD (Call-to-Action box at the bottom of results)
   ------------------------------------------------------------ */

/* Card container */
.cq-cta-card {
  background: #F5F3FF;             /* Very light purple background */
  border: 1.5px solid #C4BBFA;     /* Soft purple border */
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

/* Bold heading inside CTA card */
.cq-cta-title {
  font-size: 15px;
  font-weight: 700;
  color: #3D2FBF;                  /* Deep purple */
  margin: 0 0 5px;
}

/* Supporting text inside CTA card */
.cq-cta-sub {
  font-size: 13px;
  color: #6A5FCC;                  /* Medium purple */
  margin: 0 0 1.25rem;
  line-height: 1.6;
}

/* "Build my message" CTA button */
.cq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: #7C6FF7 !important;  /* Primary purple */
  color: #fff !important;
  border: none !important;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none !important;
  transition: all .2s;
}

/* CTA button hover */
.cq-cta-btn:hover {
  background: #6558E8 !important;  /* Slightly darker purple */
  transform: translateY(-1px);
  color: #fff !important;
}


/* ------------------------------------------------------------
   11. RETAKE LINK
   Small text link to reset and retake the quiz.
   ------------------------------------------------------------ */
.cq-retry {
  font-size: 13px;
  color: #9B9B9B;                  /* Light grey */
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 0;
}

.cq-retry:hover {
  color: #5A5A5A;                  /* Darker grey on hover */
}


/* ------------------------------------------------------------
   12. RESPONSIVE — MOBILE (under 500px)
   Tightens padding and reduces title size on small screens.
   ------------------------------------------------------------ */
@media (max-width: 500px) {
  .cq-wrap  { padding: 1.75rem 1.25rem 1.5rem; }
  .cq-title { font-size: 20px !important; }
}