/* ============================================================
   Free SEO & AI Health Check — scan form + live log + results
   Website Energizers

   Three states in one mount point:
     1. form    — enter domain, start scan
     2. running — live progress log from /audit/status
     3. results — the scored results panel, real data

   Scoped under .we-audit-widget rather than body/* — this ships
   inside a Divi page via [we_seo_audit_widget], not as a
   standalone page, so it must not touch global element styles.
   ============================================================ */

.we-audit-widget {
  --we-navy: #2B4593;
  --we-navy-dark: #1E2952;
  --we-yellow: #FFBE0B;
  --we-btn: #4997D0;
  --sev-critical: #E4572E;
  --sev-warning: #FFBE0B;
  /* Status colours for the score ring + band pill. Lightened rather than
     saturated: on this navy a stock green (#4CAF50) hits only 3.2:1 and the
     critical red 2.4:1, so the ring arc all but disappears. These clear
     4.5:1 / 3.7:1 against the navy and take the same dark ink as the amber
     pill, so all three badges are one consistent treatment.
     The deeper --sev-critical stays as-is for the issue chips, which sit on
     a light translucent row rather than directly on the navy. */
  --status-good: #6ECF74;
  --status-warn: #FFBE0B;
  --status-poor: #FF8563;
  --font-head: 'Avenir-Black', 'Avenir Next', Helvetica, Arial, sans-serif;
  --font-body: 'Avenir-Roman', 'Avenir Next', Helvetica, Arial, sans-serif;

  font-family: var(--font-body);
  background: var(--we-navy);
  color: #fff;
  padding: 24px;
  line-height: 1.45;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
}

.we-audit-widget *,
.we-audit-widget *::before,
.we-audit-widget *::after {
  box-sizing: border-box;
}

.we-step1__heading {
  font-family: var(--font-head);
  font-size: clamp(24px, 2.4vw, 32px);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 6px;
  color: #fff;
}

.we-step1__tagline {
  text-align: center;
  font-size: 14px;
  opacity: .85;
  margin-bottom: 18px;
}

/* Score row */

.we-step1__scorewrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
}

.we-ring {
  --pct: 60;
  /* No --status declared here on purpose: the band class sits on the
     parent .we-step1__scorewrap, and re-declaring it locally would
     shadow the inherited value. The fallback lives at the point of use
     below, so an unbanded ring still draws in brand yellow. */
  width: 92px;
  height: 92px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--status, var(--we-yellow)) calc(var(--pct)*1%), rgba(255, 255, 255, .18) 0);
  position: relative;
}

/* Status band. Set on the scorewrap so the ring arc and the pill below it
   always agree — they're driven by one class, not two separate decisions. */

.we-status--good {
  --status: var(--status-good)
}

.we-status--needs-work {
  --status: var(--status-warn)
}

.we-status--poor {
  --status: var(--status-poor)
}

.we-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--we-navy);
}

.we-ring__inner {
  position: relative;
  text-align: center
}

.we-ring__num {
  font-family: var(--font-head);
  font-size: 30px;
  line-height: 1;
  display: block
}

.we-ring__of {
  font-size: 10px;
  opacity: .75
}

.we-step1__verdict .site {
  font-family: var(--font-head);
  font-size: 16px;
  word-break: break-all;
}

.we-step1__verdict .band {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--status, var(--we-yellow));
  color: var(--status-ink, var(--we-navy-dark));
  padding: 3px 12px;
  border-radius: 50px;
  margin: 5px 0 4px;
}

.we-step1__verdict .meta {
  font-size: 13px;
  opacity: .8
}

/* Issues */

.we-issues {
  list-style: none;
  margin-bottom: 20px
}

.we-issue {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50px;
  padding: 9px 18px 9px 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

.we-issue__sev {
  flex: 0 0 auto;
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 50px;
}

.we-issue--critical .we-issue__sev {
  background: var(--sev-critical);
  color: #fff
}

.we-issue--warning .we-issue__sev {
  background: var(--sev-warning);
  color: var(--we-navy-dark)
}

.we-issue--more {
  background: transparent;
  border-style: dashed;
  color: var(--we-yellow);
  padding-left: 18px;
}

.we-issue--more svg {
  flex: 0 0 auto
}

.we-issue__title {
  font-family: var(--font-head)
}

/* "on 3 pages" — shows a finding is systemic, not a one-off. Pushed right
   so it reads as metadata rather than part of the issue title. */

.we-issue__count {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
  font-size: 12px;
  opacity: .75;
  white-space: nowrap;
}

/* Clean bill of health, when nothing critical came back */

.we-issue--clean {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  padding-left: 18px;
}

.we-issue--clean svg {
  flex: 0 0 auto;
  color: var(--we-yellow)
}

/* Band explainer — the plain-English reading of the score.
   Left accent takes the band colour from .we-status--*, so it agrees with
   the ring and the pill without a second colour decision. Body text sits at
   .85 opacity so the lead line and the CTA below still out-rank it. */

.we-verdict {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--status, var(--we-yellow));
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  text-align: left;
  font-size: 13.5px;
}

.we-verdict__lead {
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--status, var(--we-yellow));
  margin-bottom: 8px;
}

/* Every paragraph after the lead, not just the second onwards — a `p + p`
   rule would leave the first body paragraph at full opacity and only dim
   the ones below it. */

.we-verdict__lead~p {
  margin-top: 8px;
  opacity: .85;
}

.we-verdict__next {
  font-family: var(--font-head);
  color: var(--we-yellow)
}

/* CTA */

.we-step1__cta {
  text-align: center
}

.we-step1__cta p+p {
  margin-top: 12px
}

.we-step1__cta p {
  font-size: 15px;
  max-width: 460px;
  margin: 0 auto 16px;
}

.we-step1__cta p strong {
  font-family: var(--font-head);
  color: var(--we-yellow)
}

.we-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 16px;
  color: #fff;
  background: var(--we-btn);
  border: 0;
  border-radius: 50px;
  padding: 13px 32px;
  cursor: pointer;
  transition: background .15s ease;
}

.we-btn:hover {
  background: #3c86bd
}

.we-btn:focus-visible {
  outline: 3px solid var(--we-yellow);
  outline-offset: 2px
}

.we-btn[disabled] {
  opacity: .55;
  cursor: not-allowed
}

.we-btn[disabled]:hover {
  background: var(--we-btn)
}

.we-step1__sub {
  font-size: 12px;
  opacity: .8;
  margin-top: 10px
}

/* ---- Scan form ---------------------------------------------- */

.we-scan {
  max-width: 460px;
  margin: 0 auto;
  text-align: center
}

.we-scan__field {
  display: flex;
  background: #fff;
  border-radius: 50px;
  padding: 5px 5px 5px 6px;
  margin-bottom: 14px;
  gap: 6px;
}

.we-scan__field:focus-within {
  outline: 3px solid var(--we-yellow);
  outline-offset: 2px
}

.we-scan__prefix {
  display: flex;
  align-items: center;
  padding-left: 14px;
  font-size: 15px;
  color: #7a869a;
  flex: 0 0 auto;
}

.we-scan input[type=text] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--we-navy-dark);
  border: 0;
  background: transparent;
  padding: 11px 4px;
}

.we-scan input[type=text]:focus {
  outline: none
}

.we-scan .we-btn {
  flex: 0 0 auto;
  padding: 11px 26px;
  font-size: 15px
}

.we-scan__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
  font-size: 13px;
  opacity: .85;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 11px 15px;
  margin-top: 16px;
}

.we-scan__note svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--we-yellow)
}

.we-error {
  background: rgba(228, 87, 46, .18);
  border: 1px solid var(--sev-critical);
  border-radius: 14px;
  padding: 11px 15px;
  font-size: 14px;
  margin-bottom: 14px;
  text-align: left;
}

/* ---- Live log ------------------------------------------------ */

.we-log {
  background: rgba(0, 0, 0, .20);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 14px 16px;
  max-height: 260px;
  overflow-y: auto;
  margin-bottom: 16px;
  text-align: left;
}

.we-log__line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  padding: 4px 0;
  animation: we-fade .25s ease both;
}

.we-log__line+.we-log__line {
  border-top: 1px solid rgba(255, 255, 255, .07)
}

.we-log__icon {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  margin-top: 1px
}

.we-log__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.we-log__line--done .we-log__icon {
  color: var(--we-yellow)
}

.we-log__line--active {
  opacity: .9
}

.we-log__line--skip {
  opacity: .6
}

.we-log__score {
  flex: 0 0 auto;
  font-family: var(--font-head);
  font-size: 11px;
  opacity: .8;
}

.we-log__line--prep .we-log__text {
  font-family: var(--font-head);
  color: var(--we-yellow);
}

@keyframes we-fade {
  from {
    opacity: 0;
    transform: translateY(-3px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.we-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-top-color: var(--we-yellow);
  border-radius: 50%;
  animation: we-rot .7s linear infinite;
}

@keyframes we-rot {
  to {
    transform: rotate(360deg)
  }
}

.we-progress {
  height: 5px;
  background: rgba(255, 255, 255, .15);
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 14px;
}

.we-progress__bar {
  height: 100%;
  width: 0;
  background: var(--we-yellow);
  border-radius: 50px;
  transition: width .5s ease;
}

.we-running__hint {
  text-align: center;
  font-size: 12.5px;
  opacity: .75
}

/* Step 2 — details form (matches the live WPForms styling) */

.we-form {
  max-width: 420px;
  margin: 0 auto;
  text-align: left
}

.we-form label {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  margin-bottom: 14px;
}

.we-form .req {
  color: var(--we-yellow)
}

.we-form .opt {
  font-family: var(--font-body);
  font-size: 12px;
  opacity: .75
}

.we-form input[type=text],
.we-form input[type=email],
.we-form input[type=tel] {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--we-navy-dark);
  background: #fff;
  border: 0;
  border-radius: 50px;
  padding: 12px 20px;
}

.we-form input:focus-visible {
  outline: 3px solid var(--we-yellow);
  outline-offset: 2px
}

.we-consent {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.45;
}

.we-consent input {
  margin-top: 3px;
  accent-color: var(--we-yellow)
}

.we-form .we-btn {
  display: block;
  width: 100%;
  margin-top: 4px
}

.we-form .we-step1__sub {
  text-align: center
}

.we-form .we-error {
  margin-bottom: 14px;
}

/* WPForms' real form does the actual submitting (see we-seo-audit-widget.js) —
   it stays in the DOM for its validation/honeypot/nonce to work, but is never
   shown; the widget's own .we-form fields are what the visitor sees. */
.we-audit-widget .wpforms-container {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width:480px) {
  .we-scan__field {
    flex-wrap: wrap;
    border-radius: 22px
  }

  .we-scan .we-btn {
    width: 100%
  }
}

@media (max-height:700px) {
  .we-step1__heading {
    margin-bottom: 12px
  }

  .we-issue {
    padding: 7px 16px 7px 8px;
    margin-bottom: 6px
  }

  .we-step1__scorewrap {
    margin-bottom: 14px
  }

  .we-log {
    max-height: 190px
  }
}

@media (prefers-reduced-motion:reduce) {
  .we-btn {
    transition: none
  }

  .we-log__line {
    animation: none
  }

  .we-spin {
    animation-duration: 2s
  }

  .we-progress__bar {
    transition: none
  }
}