/**
 * Foundation styling shared by every faqsnow/* block, front end and
 * editor alike.
 *
 * LAYERING CONTRACT (architectural clarification, Phase 4 → Phase 5):
 * This file is a minimal FALLBACK layer, not a design system. It exists
 * only so a block is readable, accessible, and functional the moment the
 * plugin is activated — including under a theme that isn't FaqsNow's own.
 * It is explicitly NOT allowed to define: brand colors, a typography
 * system, detailed spacing tokens, card styling, visual hierarchy,
 * theme-specific responsive layouts, or decorative effects. Those belong
 * to the FaqsNow theme, which is the authoritative visual design system
 * and is expected to style these same `faqsnow-*` classes directly.
 *
 * What IS in scope here: basic readable layout, the minimum spacing a
 * block needs to not visually collapse, accessible/keyboard-usable
 * controls, functional open/close states (the FAQ accordion), and safe,
 * neutral defaults for sites running a different theme entirely.
 *
 * Every selector below is a single class, specificity (0,1,0), no ID
 * selectors, no `!important` anywhere — the theme can override any rule
 * here with an equally simple selector of its own, no specificity fight
 * required. Class names are stable and are not expected to change when
 * the theme adds its own presentation on top.
 */

.faqsnow-block {
	margin: 1.5em 0;
	padding: 0.75em 1em;
	border: 1px solid #ccc;
}

.faqsnow-quick-answer__label,
.faqsnow-key-takeaway__label,
.faqsnow-warning-info__label,
.faqsnow-related-questions__heading,
.faqsnow-sources__heading,
.faqsnow-faq__heading {
	margin: 0 0 0.5em;
	font-weight: 700;
}

.faqsnow-quick-answer__text,
.faqsnow-key-takeaway__text,
.faqsnow-warning-info__text {
	margin: 0;
}

/* FAQ — functional accordion state only; no color, no card chrome beyond
   the shared .faqsnow-block border above. */

.faqsnow-faq__item {
	padding: 0.5em 0;
	border-top: 1px solid #ccc;
}

.faqsnow-faq__item:first-child {
	border-top: none;
	padding-top: 0;
}

.faqsnow-faq__question {
	cursor: pointer;
	font-weight: 700;
}

.faqsnow-faq__question:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.faqsnow-faq__answer {
	margin-top: 0.5em;
}

/* Sources */

.faqsnow-sources__list {
	margin: 0;
	padding-left: 1.25em;
}

.faqsnow-sources__item {
	margin-bottom: 0.4em;
}

.faqsnow-sources__description {
	display: block;
	font-size: 0.9em;
}

/* Related Questions */

.faqsnow-related-questions__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.faqsnow-related-questions__item {
	padding: 0.4em 0;
	border-top: 1px solid #ccc;
}

.faqsnow-related-questions__item:first-child {
	border-top: none;
	padding-top: 0;
}

/* AI Tool — layout only (a logo needs a bounded box or it can break the
   page); no color, no badge chrome. */

.faqsnow-ai-tool {
	display: flex;
	gap: 1em;
	align-items: flex-start;
}

.faqsnow-ai-tool__logo {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex-shrink: 0;
}

.faqsnow-ai-tool__name {
	margin: 0;
	font-weight: 700;
}

.faqsnow-ai-tool__badge {
	font-size: 0.85em;
}

.faqsnow-ai-tool__company,
.faqsnow-ai-tool__description {
	margin: 0.25em 0 0;
}

/* Comparison — a table needs borders and cell padding to read as a table
   at all; that's a functional minimum, not a styling opinion. No header
   shading, no brand accent. */

.faqsnow-comparison__table {
	width: 100%;
	border-collapse: collapse;
}

.faqsnow-comparison__table th,
.faqsnow-comparison__table td {
	border: 1px solid #ccc;
	padding: 0.5em 0.75em;
	text-align: left;
}

.faqsnow-comparison__table th {
	font-weight: 700;
}

.faqsnow-comparison__caption {
	text-align: left;
	font-weight: 700;
	margin-bottom: 0.5em;
}

/* Warning / Info — semantic role is conveyed by the visible text label
   ("Warning" / "Info"), not by color alone. The border-left accent below
   is a minimal, accessible convention (same pattern as a native <mark> or
   form-validation outline) rather than themed card styling — no
   background fill, no brand hue. A theme is free to replace this
   entirely. */

.faqsnow-warning-info--info {
	border-left: 3px solid #6b7280;
}

.faqsnow-warning-info--warning {
	border-left: 3px solid #6b7280;
	border-left-style: dashed;
}

/* Step-by-Step (Phase 8) — a plain ordered list is already numbered and
   readable with no CSS at all; this only adds the minimum spacing an
   image needs so it doesn't run into the next step. */

.faqsnow-step-by-step__title {
	margin: 0 0 0.5em;
	font-weight: 700;
}

.faqsnow-step-by-step__list {
	margin: 0;
	padding-left: 1.5em;
}

.faqsnow-step-by-step__item {
	margin-bottom: 0.75em;
}

.faqsnow-step-by-step__step-title {
	margin: 0 0 0.25em;
	font-weight: 700;
}

.faqsnow-step-by-step__description {
	margin: 0;
}

.faqsnow-step-by-step__image {
	display: block;
	margin-top: 0.5em;
	max-width: 100%;
	height: auto;
}

/* Pros & Cons (Phase 8) — two plain lists, side by side once there's
   room; no color, no icons, no card chrome. */

.faqsnow-pros-cons__columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.faqsnow-pros-cons__column {
	flex: 1 1 220px;
}

.faqsnow-pros-cons__heading {
	margin: 0 0 0.5em;
	font-weight: 700;
}

.faqsnow-pros-cons__list {
	margin: 0;
	padding-left: 1.25em;
}

/* Editor-only authoring affordances — wp-admin block-editor chrome only;
   never reaches the front end (render.php never outputs these classes),
   so it sits outside the front-end layering contract above. */

.faqsnow-block-edit {
	margin: 1em 0;
	padding: 1em;
	border: 1px dashed #b5b5b5;
	border-radius: 4px;
}

.faqsnow-block-edit__label {
	margin: 0 0 0.75em;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #555;
}

.faqsnow-block-edit__row {
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid #e2e2e2;
}

.faqsnow-block-edit__row:last-of-type {
	border-bottom: none;
}