/* Free Website Audit tool. Extends the site's own design tokens
   (:root vars in style.css) rather than introducing a new palette. */

.audit-hero { position: relative; overflow: hidden; text-align: center; padding-top: 64px; }
.glow-orb--audit-1 { top: -120px; left: -80px; background: radial-gradient(circle, var(--blue), transparent 70%); }
.glow-orb--audit-2 { bottom: -140px; right: -100px; background: radial-gradient(circle, var(--orange), transparent 70%); }

.audit-hero__lede { max-width: 640px; margin: 14px auto 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }

.audit-form { max-width: 620px; margin: 36px auto 0; padding: 22px; border-radius: var(--radius); text-align: left; }
.audit-form__label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.audit-form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.audit-form__row input {
	flex: 1 1 280px; min-width: 0; padding: 14px 16px; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); font-size: 1rem;
}
.audit-form__row input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(91,124,255,0.25); }
.audit-form__row .btn { flex: 0 0 auto; white-space: nowrap; }
.audit-form__hint { margin: 10px 2px 0; font-size: 0.82rem; color: var(--muted); }
.audit-form__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.audit-scanning { max-width: 620px; margin: 32px auto 0; text-align: center; }
.audit-scanning__ring {
	width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
	border: 3px solid var(--border); border-top-color: var(--orange);
	animation: audit-spin 0.9s linear infinite;
}
@keyframes audit-spin { to { transform: rotate(360deg); } }

.audit-scanning__progress {
	max-width: 380px; margin: 0 auto 6px; height: 8px; border-radius: 999px;
	background: var(--bg-alt); border: 1px solid var(--border); overflow: hidden;
}
.audit-scanning__progress-fill {
	height: 100%; width: 0%; border-radius: 999px;
	background: linear-gradient(90deg, var(--orange), var(--blue));
	transition: width 0.25s ease-out;
}
.audit-scanning__percent {
	max-width: 380px; margin: 0 auto 18px; font-family: var(--font-mono); font-size: 0.8rem;
	color: var(--muted); text-align: right;
}
.audit-scanning__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; max-width: 380px; margin-inline: auto; }
.audit-scanning__steps li {
	font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted);
	padding-left: 26px; position: relative; opacity: 0.5; transition: opacity 0.3s, color 0.3s;
}
.audit-scanning__steps li::before {
	content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
	border-radius: 50%; border: 2px solid var(--border);
}
.audit-scanning__steps li.is-active { opacity: 1; color: var(--text); }
.audit-scanning__steps li.is-active::before { border-color: var(--orange); background: var(--orange); }
.audit-scanning__steps li.is-done { opacity: 0.85; color: var(--success); }
.audit-scanning__steps li.is-done::before { border-color: var(--success); background: var(--success); }
.audit-scanning__note {
	max-width: 380px; margin: 16px auto 0; font-size: 0.78rem; color: var(--muted);
	text-align: left; opacity: 0.75;
}

.audit-error {
	max-width: 620px; margin: 20px auto 0; padding: 14px 18px; border-radius: var(--radius-sm);
	background: rgba(255,80,80,0.1); border: 1px solid rgba(255,80,80,0.3); color: #ffb3b3; font-size: 0.92rem;
}

/* Radial score dial. The "unique" centerpiece: a conic-gradient ring
   animated via a CSS custom property (--score, 0–100) rather than a
   canvas/JS chart library. */
.audit-dial-wrap { text-align: center; padding-top: 20px; }
.audit-dial { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.audit-dial__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.audit-dial__track { fill: none; stroke: var(--border); stroke-width: 12; }
.audit-dial__fill {
	fill: none; stroke: url(#audit-gradient); stroke-width: 12; stroke-linecap: round;
	stroke-dasharray: 553; stroke-dashoffset: 553;
	transition: stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1);
}
.audit-dial__center {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.audit-dial__number { font-size: 3rem; font-weight: 700; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.audit-dial__label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.audit-dial__url { margin-top: 18px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--blue); word-break: break-word; }
.audit-dial__verdict { margin-top: 6px; color: var(--muted); font-size: 0.95rem; }

/* Cooldown note injected by JS right after the verdict line. Made
   deliberately large and block-level (not a small pill) -- the
   earlier pill version (0.8rem, inline-block) was easy to miss
   entirely against the dark background. This is meant to be the
   second-most-visible thing on the results screen after the score
   itself. */
.audit-cooldown-note {
	max-width: 420px; margin: 16px auto 0; padding: 12px 20px; border-radius: 10px;
	background: rgba(250,184,44,0.16); border: 1.5px solid rgba(250,184,44,0.55);
	color: var(--orange); font-family: var(--font-mono); font-size: 1rem; font-weight: 700;
	text-align: center; letter-spacing: 0.01em;
}

.audit-subscores {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px;
	max-width: 720px; margin: 40px auto 0;
}
.audit-subscore { padding: 18px; border-radius: var(--radius-sm); text-align: center; }
.audit-subscore__label { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.audit-subscore__value { display: block; margin-top: 8px; font-size: 1.6rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.audit-subscore.is-good .audit-subscore__value { color: var(--success); }
.audit-subscore.is-ok .audit-subscore__value { color: var(--orange); }
.audit-subscore.is-bad .audit-subscore__value { color: #ff6b6b; }

.audit-issues { max-width: 680px; margin: 48px auto 0; }
.audit-issues h2 { text-align: center; margin-bottom: 18px; }
.audit-issues__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.audit-issues__list li {
	padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
	background: var(--surface); color: var(--text); font-size: 0.95rem; line-height: 1.5;
}

.audit-gate {
	max-width: 680px; margin: 48px auto 0; padding: 32px; border-radius: var(--radius); text-align: center;
}
.audit-gate__copy h2 { margin: 10px 0 8px; }
.audit-gate__copy p { color: var(--muted); max-width: 520px; margin-inline: auto; }
.audit-gate__form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.audit-gate__form input {
	flex: 1 1 260px; padding: 14px 16px; border-radius: var(--radius-sm);
	border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); font-size: 1rem;
}
.audit-gate__sent { margin-top: 16px; color: var(--success); font-weight: 600; }
.audit-gate__error { margin-top: 16px; color: #ff6b6b; font-weight: 600; }

.audit-rescan { text-align: center; margin-top: 32px; }

.audit-other-tools__lede { text-align: center; color: var(--muted); }
.audit-other-tools__lede a { color: var(--blue); }

@media (max-width: 640px) {
	.audit-dial { width: 180px; height: 180px; }
	.audit-dial__number { font-size: 2.4rem; }
	.audit-gate__form { flex-direction: column; }
	.audit-gate__form .btn { width: 100%; }
	.audit-hero { padding-top: 40px; }
	.audit-form { padding: 16px; }
	.audit-form__row { flex-direction: column; align-items: stretch; }
	.audit-form__row .btn { width: 100%; justify-content: center; }
	.audit-subscores { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.audit-subscore { padding: 14px; }
	.audit-subscore__value { font-size: 1.3rem; }
	.audit-gate { padding: 22px 18px; }
	.audit-issues__list li { font-size: 0.9rem; padding: 12px 14px; }
}

@media (max-width: 400px) {
	.audit-dial { width: 150px; height: 150px; }
	.audit-dial__number { font-size: 2rem; }
	.audit-subscores { grid-template-columns: 1fr 1fr; }
}

/* The shared .section--cta background is a radial glow that bleeds all
   the way to the section's top edge. That's fine when the section above
   is already dark, but this page's CTA follows the light "Coming Soon"
   section, so the glow collided visibly with the flat divider color
   right at the curve. A solid band for the first ~110px keeps the top
   flat (matching the divider) before the glow fades in underneath.
   NOTE: .section--cta itself sets `background` (the shorthand), not
   `background-image`/`background-color` separately, so overriding just
   background-image here leaves that shorthand's background-color still
   in play only if this uses the shorthand too, so it's targeted with a class
   on the section itself (.audit-final-cta) rather than a body class,
   since WordPress doesn't emit a "page-{slug}" body class by default. */
.audit-final-cta.section--cta {
	background: linear-gradient(to bottom, var(--bg-alt) 0, var(--bg-alt) 40px, transparent 110px),
		radial-gradient(110% 120% at 18% 55%, rgba(91,124,255,.3), transparent 58%),
		radial-gradient(110% 120% at 82% 60%, rgba(250,184,44,.3), transparent 58%),
		var(--bg-alt);
}

/* Trust counter under the scan form (only rendered server-side once
   the real count is large enough to read as a genuine signal). */
.audit-form__trust {
	margin: 10px 0 0; text-align: center; font-family: var(--font-mono);
	font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted);
}

/* Tailored "fix your weakest score" CTA, shown once a scan has a real
   PageSpeed category to point at. */
.audit-recommend {
	max-width: 680px; margin: 28px auto 0; padding: 20px 24px; border-radius: var(--radius-sm);
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.audit-recommend__text { margin: 0; color: var(--text); font-size: 0.95rem; }
.audit-recommend__text strong { color: var(--white); }
/* display:flex above beats the browser's default [hidden]{display:none}
   rule on specificity, so a hidden recommend/share/nudge box was
   rendering visible (with empty text) instead of staying hidden. These
   three elements are toggled purely via the hidden attribute from JS,
   so give [hidden] the explicit last word here. */
.audit-recommend[hidden], .audit-share[hidden], .audit-nudge[hidden], .audit-gate__form[hidden] { display: none; }

/* Reassurance line inside the email gate, right above the form. */
.audit-gate__reassure { margin-top: 10px; font-size: 0.84rem; color: var(--muted); opacity: 0.9; }

/* Share-link button, sits between the issue list and the email gate. */
.audit-share { text-align: center; margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.audit-share__confirm { font-size: 0.85rem; color: var(--success); font-weight: 600; }

/* Small button variant, used only by the scroll nudge below. */
.btn--small { padding: 0.6em 1.2em; font-size: 0.74rem; }

/* Bottom-fixed nudge bar: appears once a visitor scrolls past the email
   gate without submitting, offering a second chance without blocking
   anything. Dismissible, and never shown again once dismissed or once
   the report is actually sent. */
.audit-nudge {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
	display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
	padding: 14px 18px; border-radius: 999px; background: var(--surface-solid);
	border: 1px solid var(--border-strong); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.audit-nudge span { font-size: 0.88rem; color: var(--text); white-space: nowrap; }
.audit-nudge__dismiss {
	background: none; border: none; color: var(--muted); font-size: 1.3rem; line-height: 1;
	cursor: pointer; padding: 0 2px;
}
.audit-nudge__dismiss:hover { color: var(--white); }

@media (max-width: 640px) {
	.audit-recommend { flex-direction: column; text-align: center; }
	.audit-nudge { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: var(--radius); }
	.audit-nudge span { white-space: normal; }
}