/*
 * Veton Guides Index — block styling.
 * Deliberately thin: it leans on the theme's grid/button classes and only adds
 * what the theme has no equivalent for. Bump VGI_VERSION after every change or
 * the five cache layers keep serving the old file.
 */

.veton-guides-block .veton-guides-heading {
	margin-bottom: 15px;
}

.veton-guides-block .veton-guides-intro {
	max-width: 46em;
	margin-bottom: 30px;
}

.veton-guides-block .veton-guide-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.veton-guides-block .veton-guide-card:hover,
.veton-guides-block .veton-guide-card:focus {
	border-color: rgba(0, 0, 0, 0.35);
	transform: translateY(-2px);
	text-decoration: none;
}

.veton-guides-block .veton-guide-title {
	margin: 0 0 5px;
	font-size: 1.15rem;
}

.veton-guides-block .veton-guide-audience {
	display: block;
	margin-bottom: 12px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.veton-guides-block .veton-guide-summary {
	margin: 0 0 15px;
	flex: 1 1 auto;
}

.veton-guides-block .veton-guide-meta {
	display: block;
	font-size: 0.8rem;
	opacity: 0.7;
}

.veton-guides-block .veton-guide-meta > span + span::before {
	content: " · ";
}

.veton-guides-block .veton-guides-all {
	margin-top: 10px;
}

/* Every link in this block leaves veton.be. The note says so in words, below
   the list and below the fallback button. */
.veton-guides-block .veton-guides-offsite {
	margin-top: .5rem;
	font-size: .875rem;
	opacity: .75;
}

/* ⚠️ NOTHING EMITS THIS CLASS ANY MORE. The per-card screen-reader copy of the
   off-site note went when the cards started pointing at veton.be — a card that
   does not leave the site must not announce that it does — and this rule
   documented it as present for a round afterwards. The visually-hidden pattern
   is kept because it is the one this stylesheet would reach for next, and
   because `display: none` hides content from assistive technology too, which
   is the mistake it exists to avoid. */
.veton-guides-block .veton-guides-offsite-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * The guide pages at /guides/ and /guides/<slug>/.
 *
 * Same restraint as above: the theme owns the grid, the buttons, the type scale
 * and the colours, so this only styles the things the theme has no equivalent
 * for — the callouts, the figure, the table of contents. Bump VGI_VERSION after
 * every change here or the five cache layers keep serving the old file.
 * ------------------------------------------------------------------------- */

.veton-guide-page .veton-guide-breadcrumb {
	margin-bottom: 10px;
	font-size: 0.875rem;
	opacity: 0.75;
}

.veton-guide-page .veton-guide-meta {
	font-size: 0.875rem;
	opacity: 0.75;
}

.veton-guide-page .veton-guide-meta > span + span::before {
	content: " · ";
}

.veton-guide-page .veton-guide-audience {
	display: inline;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.veton-guide-toc {
	margin: 0 0 30px;
	padding: 15px 20px;
	background: rgba(0, 0, 0, 0.03);
	border-left: 3px solid rgba(0, 0, 0, 0.2);
}

.veton-guide-toc .veton-guide-toc-title {
	margin: 0 0 8px;
	font-weight: 600;
}

.veton-guide-toc ul {
	margin: 0;
	padding-left: 18px;
}

.veton-guide-body .veton-guide-h2 {
	margin: 40px 0 15px;
	/* An in-page anchor must not land under the theme's fixed navbar. */
	scroll-margin-top: 100px;
}

.veton-guide-body .veton-guide-h3 {
	margin: 25px 0 10px;
	font-size: 1.1rem;
}

.veton-guide-body .veton-guide-p,
.veton-guide-body .veton-guide-list {
	margin: 0 0 15px;
}

.veton-guide-body .veton-guide-list {
	padding-left: 20px;
}

.veton-guide-body .veton-guide-figure {
	margin: 20px 0 25px;
}

/* The images are hot-linked from v2 (see inc/guide-document.php). Reserving the
   box keeps the text from jumping when they arrive, and keeps the page readable
   when they do not arrive at all. */
.veton-guide-body .veton-guide-figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.veton-guide-note,
.veton-guide-warning {
	margin: 20px 0;
	padding: 15px 20px;
	border-left: 3px solid;
}

.veton-guide-note {
	background: rgba(0, 0, 0, 0.03);
	border-left-color: rgba(0, 0, 0, 0.3);
}

.veton-guide-warning {
	background: rgba(200, 60, 0, 0.06);
	border-left-color: rgba(200, 60, 0, 0.6);
}

.veton-guide-note p:last-child,
.veton-guide-warning p:last-child {
	margin-bottom: 0;
}

.veton-guide-body .veton-guide-link {
	margin: 0 0 15px;
}

/*
 * The off-site hint after a link inside a guide. It is words, not an icon:
 * "opens on another site" has to survive a screen reader and a printed page,
 * and this site has no icon font to reach for.
 */
.veton-guide-offsite-hint {
	font-size: 0.85em;
	opacity: 0.75;
	white-space: nowrap;
}

/*
 * The one sentence above the list, printed when EVERY guide on it fell back to
 * another language. See the note in `Veton_Guides_Index::shortcode()`: it
 * replaces ten copies of the same chip, so it has to read as a sentence, not
 * as a label.
 */
.veton-guides-langnote {
	margin-bottom: 20px;
	font-size: 0.95em;
}

/*
 * The installer signpost at the foot of /guides/. Set apart from the cards but
 * not styled as a warning: it is a direction, not a problem.
 */
.veton-guides-installer {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	font-size: 0.95em;
}