/* ========================================================================== */
/*  SEO CONTENT BLOCK — sections below the tool                                */
/*  Bare <h2>, <h3>, <p>, <ul>, <table>, <ol> live inside ecosystem's          */
/*  .tool-description wrapper and inherit its styles. Don't add overrides for  */
/*  typography or colors here — let ecosystem own the look.                    */
/*  Only structural styles for grids/tables (universal "desc-" prefix).        */
/* ========================================================================== */

/* Use-case cards: responsive grid of equal-height cards */
.desc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 12px 0 24px;
}
.desc-card {
	background: #fff;
	border: 1px solid var(--um-border);
	border-radius: 10px;
	padding: 18px;
}
.desc-card h3 {
	margin: 0 0 8px;
	font-size: 16px;
}
.desc-card p {
	font-size: 14px;
	margin: 0;
	line-height: 1.6;
}

/* CRITICAL: <code> inside .tool-description MUST render inline. Ecosystem CSS
   somewhere has `code { display: block }` or `white-space: pre`, causing
   inline <code> tokens like <code>llms.txt</code> to break onto their own
   lines (visible as: "Each line can include\nllms.txt\n,\n..."). Force
   inline + nowrap so each token stays glued together inside the surrounding
   text. !important needed: ecosystem's `code` (element selector) loads later
   than ours. seo-extension landing pages render content inside
   .tool-description (via header.php → landing.php), so we don't need a
   separate landing-article selector here. */
.tool-description code,
.desc-card code,
.faq code {
	display: inline !important;
	white-space: nowrap !important;
	padding: 1px 6px;
	background: #f3f4f6;
	border-radius: 3px;
	font-size: 0.92em;
	color: #1f2937;
	border: 1px solid #e5e7eb;
}

/* Comparison table horizontal-scroll wrapper for narrow viewports.
   Bare <table> inside .tool-description inherits ecosystem table styles. */
.desc-table-wrap {
	overflow-x: auto;
	margin: 12px 0 24px;
}
.desc-table-wrap table {
	min-width: 600px;
}

/* Auto-generated crosslinks at the bottom of every page (rendered by
   landing.php and index.php from se-topic-map.php). Small inline list. */
.desc-links {
	background: #f9fafb;
	padding: 14px 16px;
	border-radius: 8px;
	border: 1px solid var(--um-border);
	font-size: 14px;
	line-height: 1.9;
	margin-top: 32px;
}

/* FAQ section — ecosystem pattern: <ul class="faq"> + <li class="faq-item"> with
   hidden checkbox in <label>. Grid-template-rows transition + :has() open state.
   This CSS will be added globally by ecosystem in the future; we ship it scoped
   to .faq for now so both main tool page and landing pages render correctly.
   NOTE: kept minimal — matches user-provided ecosystem snippet exactly.

   SPECIFICITY: when inside .tool-description, ecosystem's '.tool-description ul'
   selector (specificity 0,1,1) overrides our '.faq' (0,1,0) padding reset.
   Use '.tool-description .faq' (0,2,0) and 'ul.faq' (0,1,1, later) to beat it. */
.tool-description .faq,
ul.faq {
	padding-left: 0;
	margin-left: 0;
}
.faq {
	list-style: none;
	padding: 0;
	margin: 0;
}
.faq .faq-item {
	display: grid;
	grid-template-rows: min-content 0fr;
	border: 1px solid var(--um-border);
	transition: grid-template-rows 0.3s;
	margin-bottom: 1.5em;
}
.faq .faq-item:last-child { margin-bottom: 0; }
.faq .faq-item label {
	cursor: pointer;
	padding: 10px 40px 10px 20px;
	font-weight: 600;
	position: relative;
	transition: color 0.3s;
}
.faq .faq-item label:after {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 50%;
	width: 40px;
	height: 40px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23039669" d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"/></svg>') no-repeat 50% 50%;
	content: "";
	transition: transform .3s;
	transform: translateY(-50%);
}
.faq .faq-item label:hover { color: #039669; }
.faq .faq-item input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.faq .faq-item:has(input:checked) {
	grid-template-rows: min-content 1fr;
}
.faq .faq-item:has(input:checked) label {
	border-bottom: 1px solid var(--um-border);
}
.faq .faq-item:has(input:checked) label:after {
	transform: translateY(-50%) rotate(180deg);
	transform-origin: 50% 50%;
}
.faq .faq-item .faq-item-content {
	overflow: hidden;
	padding-inline: 20px;
}