/* ==========================================================================
   AsYouNeed Security Onion Checker — front-end styles
   --------------------------------------------------------------------------
   Mirrors the pricing-calculator visual language:
     - Container max-width 960px
     - White cards, 2px #e0e4ec border, 12px radius
     - Teal accent #54c6cb (headings, primary actions, badges)
     - Proxima Nova body text on #555 / #343d46
     - Heavy !important use to beat the AYN theme's aggressive overrides
   ========================================================================== */

#ayn-so.ayn-so {
	max-width: 960px !important;
	margin: 0 auto !important;
	padding: 0 20px 40px !important;
	font-family: "Proxima Nova", sans-serif !important;
	color: #555 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	box-sizing: border-box !important;
}

#ayn-so.ayn-so *,
#ayn-so.ayn-so *::before,
#ayn-so.ayn-so *::after {
	box-sizing: border-box !important;
}

/* ---------- Progress bar ---------- */
.ayn-so .ayn-so__progress {
	width: 100% !important;
	height: 6px !important;
	background: #f0f3f6 !important;
	border-radius: 3px !important;
	overflow: hidden !important;
	margin: 8px 0 6px !important;
	display: block !important;
}
.ayn-so .ayn-so__progress-fill {
	height: 100% !important;
	background: #54c6cb !important;
	transition: width 280ms ease !important;
}
.ayn-so .ayn-so__progress-label {
	color: #777 !important;
	font-size: 13px !important;
	margin: 0 0 24px !important;
	font-weight: 600 !important;
}

/* ---------- Headings ---------- */
.ayn-so .ayn-so__heading {
	display: block !important;
	color: #54c6cb !important;
	font-size: 32px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-family: "Proxima Nova", sans-serif !important;
}
.ayn-so .ayn-so__subheading {
	display: block !important;
	color: #555 !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	margin: 0 0 28px !important;
	padding: 0 !important;
}
.ayn-so .ayn-so__section-tag {
	display: inline-block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #2a8a8f !important;
	background: rgba( 84, 198, 203, 0.12 ) !important;
	padding: 4px 12px !important;
	border-radius: 999px !important;
	margin: 0 0 12px !important;
}

/* ---------- Cards / panels ---------- */
.ayn-so .ayn-so__panel {
	background: #ffffff !important;
	border: 2px solid #e0e4ec !important;
	border-radius: 12px !important;
	padding: 28px !important;
	margin: 0 0 20px !important;
}
.ayn-so .ayn-so__panel--muted {
	background: #f7fafa !important;
}

/* ---------- Intro bullet list ---------- */
.ayn-so .ayn-so__bullets {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 28px !important;
}
.ayn-so .ayn-so__bullets li {
	padding: 8px 0 8px 28px !important;
	position: relative !important;
	color: #343d46 !important;
	font-size: 15px !important;
}
.ayn-so .ayn-so__bullets li::before {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	top: 14px !important;
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	background: rgba(84,198,203,0.18) !important;
	border: 2px solid #54c6cb !important;
}

/* ---------- Good / Bad example pair ---------- */
.ayn-so .ayn-so__examples {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
	margin: 0 0 24px !important;
}
.ayn-so .ayn-so__example {
	background: #ffffff !important;
	border: 2px solid #e0e4ec !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
}
.ayn-so .ayn-so__example--good { border-left: 5px solid #54c6cb !important; }
.ayn-so .ayn-so__example--bad  { border-left: 5px solid #d97a6c !important; }
.ayn-so .ayn-so__example-label {
	display: inline-block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	margin: 0 0 6px !important;
}
.ayn-so .ayn-so__example--good .ayn-so__example-label { color: #2a8a8f !important; }
.ayn-so .ayn-so__example--bad  .ayn-so__example-label { color: #b8543f !important; }
.ayn-so .ayn-so__example p {
	margin: 0 !important;
	color: #343d46 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* ---------- Questions ---------- */
.ayn-so .ayn-so__question {
	display: block !important; /* AYN theme hides .docs-content-wrap h2/h3 — must override. */
	margin: 0 0 12px !important;
	color: #343d46 !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}
.ayn-so .ayn-so__help {
	color: #777 !important;
	font-size: 14px !important;
	margin: 0 0 20px !important;
	background: rgba(84,198,203,0.08) !important;
	padding: 10px 14px !important;
	border-radius: 8px !important;
}

/* ---------- Answer choices ---------- */
.ayn-so .ayn-so__answers {
	display: grid !important;
	grid-template-columns: 1fr !important;
	gap: 10px !important;
	margin: 0 0 8px !important;
}
.ayn-so .ayn-so__answer {
	display: block !important;
	background: #ffffff !important;
	border: 2px solid #e0e4ec !important;
	border-radius: 8px !important;
	padding: 14px 16px !important;
	text-align: left !important;
	cursor: pointer !important;
	width: 100% !important;
	font-family: "Proxima Nova", sans-serif !important;
	color: #343d46 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	transition: border-color 150ms ease, background 150ms ease !important;
}
.ayn-so .ayn-so__answer:hover { border-color: #54c6cb !important; }
.ayn-so .ayn-so__answer--selected {
	border-color: #54c6cb !important;
	background: rgba(84,198,203,0.08) !important;
	box-shadow: inset 0 0 0 1px #54c6cb !important;
}

/* ---------- Navigation buttons ---------- */
.ayn-so .ayn-so__nav {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin: 24px 0 0 !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}
.ayn-so .ayn-so__btn {
	display: inline-block !important;
	font-family: "Proxima Nova", sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	border: none !important;
	cursor: pointer !important;
	padding: 14px 28px !important;
	border-radius: 20px !important;
	text-decoration: none !important;
	transition: background 150ms ease, color 150ms ease !important;
}
.ayn-so .ayn-so__btn--primary {
	background: #54c6cb !important;
	color: #ffffff !important;
}
.ayn-so .ayn-so__btn--primary:hover {
	background: #41b1b6 !important;
	color: #ffffff !important;
}
.ayn-so .ayn-so__btn--ghost {
	background: transparent !important;
	color: #777 !important;
	padding: 14px 0 !important;
}
.ayn-so .ayn-so__btn--ghost:hover { color: #54c6cb !important; }
.ayn-so .ayn-so__btn:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* ---------- Results ---------- */
.ayn-so .ayn-so__results-hero {
	display: grid !important;
	grid-template-columns: 240px 1fr !important;
	gap: 28px !important;
	align-items: center !important;
	background: #f7fafa !important;
	border: 2px solid #e0e4ec !important;
	border-radius: 16px !important;
	padding: 28px !important;
	margin: 0 0 24px !important;
}
.ayn-so .ayn-so__onion-wrap { display: flex !important; justify-content: center !important; }
.ayn-so .ayn-so__onion-wrap svg { width: 220px !important; height: 220px !important; }

.ayn-so .ayn-so__score-num {
	font-size: 56px !important;
	font-weight: 800 !important;
	color: #54c6cb !important;
	line-height: 1 !important;
	margin: 0 !important;
}
.ayn-so .ayn-so__score-label {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #343d46 !important;
	margin: 6px 0 4px !important;
}
.ayn-so .ayn-so__score-meaning {
	color: #555 !important;
	font-size: 15px !important;
	margin: 0 !important;
}
.ayn-so .ayn-so__confidence {
	display: inline-block !important;
	margin-top: 12px !important;
	background: rgba(84,198,203,0.12) !important;
	color: #2a8a8f !important;
	padding: 4px 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: 999px !important;
}

.ayn-so .ayn-so__layers-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 12px !important;
	margin: 0 0 24px !important;
}
.ayn-so .ayn-so__layer {
	background: #ffffff !important;
	border: 2px solid #e0e4ec !important;
	border-radius: 10px !important;
	padding: 14px 16px !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	width: 100% !important;
	text-align: left !important;
	font-family: "Proxima Nova", sans-serif !important;
}
.ayn-so .ayn-so__layer-icon { font-size: 22px !important; }
.ayn-so .ayn-so__layer-name { flex: 1 !important; font-weight: 600 !important; color: #343d46 !important; font-size: 15px !important; }
.ayn-so .ayn-so__layer-bar {
	width: 90px !important; height: 8px !important;
	background: #f0f3f6 !important; border-radius: 4px !important; overflow: hidden !important;
	display: inline-block !important;
}
.ayn-so .ayn-so__layer-fill { height: 100% !important; background: #54c6cb !important; display: block !important; }
.ayn-so .ayn-so__layer-score { font-weight: 700 !important; color: #54c6cb !important; min-width: 44px !important; text-align: right !important; }

/* "Context" variant — used on Business Profile (unscored layer).
 * Visually identical to the scored cards apart from a faint dash in
 * place of the numeric score. The bar renders empty (width 0% on
 * .ayn-so__layer-fill from the regular markup) so it looks like a
 * scored card the user hasn't filled in yet, not a broken element. */
.ayn-so .ayn-so__layer-score--context {
	color: #b0b8c0 !important;
	font-weight: 700 !important;
}

/* Clickable variant — used on the results page to jump back to that layer's section. */
.ayn-so button.ayn-so__layer--clickable {
	cursor: pointer !important;
	transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}
.ayn-so button.ayn-so__layer--clickable:hover,
.ayn-so button.ayn-so__layer--clickable:focus-visible {
	border-color: #54c6cb !important;
	transform: translateY( -1px ) !important;
	box-shadow: 0 4px 14px rgba( 84, 198, 203, 0.18 ) !important;
	outline: none !important;
}
.ayn-so .ayn-so__layer-chevron {
	color: #c4cad3 !important;
	font-size: 22px !important;
	line-height: 1 !important;
	margin-left: 4px !important;
	transition: color 150ms ease, transform 150ms ease !important;
}
.ayn-so button.ayn-so__layer--clickable:hover .ayn-so__layer-chevron,
.ayn-so button.ayn-so__layer--clickable:focus-visible .ayn-so__layer-chevron {
	color: #54c6cb !important;
	transform: translateX( 3px ) !important;
}

.ayn-so .ayn-so__layers-hint {
	color: #777 !important;
	font-size: 13px !important;
	font-style: italic !important;
	margin: 0 0 14px !important;
}

/* "Reviewing your answers" banner shown when the user jumped back from results. */
.ayn-so .ayn-so__review-banner {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	background: rgba( 84, 198, 203, 0.10 ) !important;
	border: 1px solid rgba( 84, 198, 203, 0.35 ) !important;
	border-radius: 999px !important;
	padding: 8px 18px !important;
	margin: 0 0 18px !important;
	color: #2a8a8f !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}
.ayn-so .ayn-so__review-back {
	background: transparent !important;
	color: #2a8a8f !important;
	border: 0 !important;
	padding: 4px 8px !important;
	font-family: "Proxima Nova", sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	text-decoration: underline !important;
}
.ayn-so .ayn-so__review-back:hover { color: #1d6a6e !important; }

.ayn-so .ayn-so__section-title {
	display: block !important; /* AYN theme hides .docs-content-wrap h2/h3 — must override. */
	font-size: 22px !important;
	color: #54c6cb !important;
	font-weight: 700 !important;
	margin: 28px 0 12px !important;
}
.ayn-so .ayn-so__action-list { list-style: none !important; padding: 0 !important; margin: 0 0 8px !important; }
.ayn-so .ayn-so__action {
	background: #ffffff !important;
	border: 2px solid #e0e4ec !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
	margin: 0 0 10px !important;
}
.ayn-so .ayn-so__action-tag {
	display: inline-block !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.06em !important; text-transform: uppercase !important;
	color: #2a8a8f !important;
	background: rgba(84,198,203,0.12) !important;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	margin-right: 8px !important;
}
.ayn-so .ayn-so__action--strategic .ayn-so__action-tag {
	color: #6c4eb8 !important;
	background: rgba(108,78,184,0.12) !important;
}
.ayn-so .ayn-so__action-text { color: #343d46 !important; font-size: 15px !important; }

/* Security Foundations Toolkit "starter template" pill — appears on the
 * right side of an action when that layer has a recommended policy
 * template, and as a standalone pill in the .ayn-so__tpl-extra block. */
.ayn-so .ayn-so__tpl-pill {
	display: inline-block !important;
	margin-left: 10px !important;
	margin-top: 4px !important;
	padding: 4px 10px !important;
	background: #eaf7f7 !important;
	color: #2a8a8e !important;
	border: 1px solid #54c6cb !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}
.ayn-so .ayn-so__tpl-pill:hover,
.ayn-so .ayn-so__tpl-pill:focus {
	background: #54c6cb !important;
	color: #ffffff !important;
	text-decoration: none !important;
}
.ayn-so .ayn-so__tpl-extra {
	margin: 12px 0 18px !important;
	padding: 12px 14px !important;
	background: rgba(84, 198, 203, 0.06) !important;
	border-left: 4px solid #54c6cb !important;
	border-radius: 6px !important;
}
.ayn-so .ayn-so__tpl-extra-lead {
	margin: 0 0 8px !important;
	color: #343d46 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}
.ayn-so .ayn-so__tpl-extra-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}
.ayn-so .ayn-so__tpl-pill--standalone {
	margin-left: 0 !important;
}

/* Weakest detail card */
.ayn-so .ayn-so__weak-card {
	background: #ffffff !important;
	border: 2px solid #e0e4ec !important;
	border-radius: 12px !important;
	padding: 18px 20px !important;
	margin: 0 0 14px !important;
}
.ayn-so .ayn-so__weak-card h4 {
	margin: 0 0 8px !important;
	color: #343d46 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	display: block !important; /* AYN theme hides h4 sometimes — be safe. */
}
.ayn-so .ayn-so__weak-card .ayn-so__impact {
	color: #555 !important;
	font-size: 14px !important;
	margin: 8px 0 12px !important;
}
/* "Clean" variant when no layers fell below the weak threshold. */
.ayn-so .ayn-so__weak-card--clean {
	border-color: #54c6cb !important;
	border-left-width: 5px !important;
	background: rgba(84,198,203,0.06) !important;
}

/* ---------- Next-steps actions (v1.0.6+) ---------- */
.ayn-so .ayn-so__next-steps {
	background: #f7fafa !important;
	border: 2px solid #e0e4ec !important;
	border-radius: 16px !important;
	padding: 24px !important;
	margin: 8px 0 12px !important;
}
.ayn-so .ayn-so__next-steps p {
	color: #343d46 !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	margin: 0 0 18px !important;
}
.ayn-so .ayn-so__next-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 14px !important;
	align-items: center !important;
}
/* Make ANCHOR styled as a button look identical to button siblings. */
.ayn-so a.ayn-so__btn { display: inline-block !important; text-decoration: none !important; line-height: 1 !important; }
.ayn-so a.ayn-so__btn--primary:hover { color: #ffffff !important; }

/* LinkedIn share CTA on the results page. Matches the Security Foundations
   Toolkit "Share on LinkedIn" treatment so the two tools feel consistent. */
.ayn-so .ayn-so__share {
	margin: 22px 0 0 !important;
	padding: 16px !important;
	background: #f5f9fa !important;
	border-radius: 8px !important;
	text-align: center !important;
}
.ayn-so .ayn-so__share-label {
	font-size: 14px !important;
	color: #555 !important;
	margin: 0 0 10px !important;
}
.ayn-so .ayn-so__btn--share {
	display: inline-block !important;
	background: #0a66c2 !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	padding: 10px 20px !important;
	border-radius: 999px !important;
	text-decoration: none !important;
	transition: background 0.15s ease !important;
}
.ayn-so .ayn-so__btn--share:hover {
	background: #084d96 !important;
	color: #ffffff !important;
	text-decoration: none !important;
}

.ayn-so .ayn-so__disclaimer {
	color: #888 !important;
	font-size: 12px !important;
	font-style: italic !important;
	margin: 24px 0 0 !important;
}

/* Honeypot — never visible to humans. */
.ayn-so .ayn-so__hp {
	position: absolute !important;
	left: -9999px !important;
	height: 0 !important; width: 0 !important;
	overflow: hidden !important;
}

/* ---------- Responsive ---------- */
@media ( max-width: 720px ) {
	.ayn-so .ayn-so__examples { grid-template-columns: 1fr !important; }
	.ayn-so .ayn-so__results-hero { grid-template-columns: 1fr !important; text-align: center !important; }
	.ayn-so .ayn-so__layers-grid { grid-template-columns: 1fr !important; }
	.ayn-so .ayn-so__lead-row { grid-template-columns: 1fr !important; }
	.ayn-so .ayn-so__heading { font-size: 26px !important; }
	.ayn-so .ayn-so__question { font-size: 18px !important; }
	#ayn-so.ayn-so { padding: 0 14px 30px !important; }
	.ayn-so .ayn-so__score-num { font-size: 44px !important; }
}

/* ---------- Print / "Save as PDF" styling ----------
   Hides page chrome that isn't an ancestor of the tool.
   The tool lives inside `<section class="high-light">` — so we do NOT
   hide that or any of `.docs-content-wrap` / `.wrap-service` / `#section2`.
   Confirmed elements to hide:
     - The site `<footer>` (cloud icons, nav, copyright)
     - GHL `<chat-widget>` custom element
     - The fixed burger overlay `#section1m` and `.section1-polygon`
     - WP admin bar
     - Common chat / launcher / leadconnector selectors
     - Tool's own interactive UI (nav buttons, lead form, progress)
   ------------------------------------------------------- */
@media print {

	/* Page chrome — ONLY non-ancestor elements. */
	footer, .footer, .site-footer, #footer,
	#section1m, .section1-polygon,
	#wpadminbar,
	chat-widget, [id*="chat-widget"], [class*="chat-widget"],
	.lc-widget, .lc-launcher, [class*="leadconnector"], [id*="leadconnector"],
	#claude-agent-glow-border {
		display: none !important;
		visibility: hidden !important;
	}

	/* Reset page width so the tool sits clean on A4. We touch ONLY the
	   ancestors of #ayn-so plus html/body — never `display: none` on
	   anything that contains the tool. */
	html, body,
	section.high-light,
	#section2,
	.wrap-service,
	.docs-content-wrap,
	.entry-content,
	main, #main, #content {
		background: #ffffff !important;
		margin: 0 !important;
		padding: 0 !important;
		max-width: 100% !important;
		width: auto !important;
		box-shadow: none !important;
		float: none !important;
	}

	body { color: #343d46 !important; }

	/* Tool: hide interactive UI, keep the printable results. */
	.ayn-so .ayn-so__nav,
	.ayn-so .ayn-so__next-steps,
	.ayn-so .ayn-so__progress,
	.ayn-so .ayn-so__progress-label,
	.ayn-so .ayn-so__hp,
	.ayn-so .ayn-so__review-banner,
	.ayn-so .ayn-so__layers-hint,
	.ayn-so .ayn-so__layer-chevron {
		display: none !important;
	}

	/* Keep important blocks together on a page. */
	.ayn-so .ayn-so__results-hero,
	.ayn-so .ayn-so__weak-card,
	.ayn-so .ayn-so__action,
	.ayn-so .ayn-so__layer { break-inside: avoid !important; }

	/* Make sure card borders & teal accents survive the print. */
	.ayn-so .ayn-so__results-hero,
	.ayn-so .ayn-so__weak-card,
	.ayn-so .ayn-so__action,
	.ayn-so .ayn-so__layer,
	.ayn-so .ayn-so__example { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}