/**
 * The author box under a blog post, in Zuriyat's colours.
 *
 * The theme paints the box on a mint ground (#f5fcf9) with a 5px left rule in
 * its own #659833 green. Neither is in the palette: the accent is amber, the
 * ground is the cream the rest of the site's quiet surfaces use. Colours come
 * from the site's tokens, with the value written beside each so the box still
 * reads correctly if a token is ever missing from a page.
 *
 * Sizes are the theme's own (a 103px round avatar, its spacing classes); what
 * changes is the colour, the weight of the rule and the measure of the text.
 *
 * Every selector carries `.single-post` in front. The theme sets the same rules at
 * the same specificity from a stylesheet that loads after this one, so on equal
 * footing it won; the extra class makes the result independent of load order.
 */

.single-post .blog-single .blog-author {
	background: var(--sui-ivory, #f8f6ef);
	border-left: 4px solid var(--zf-amber, #ffbf00);
	padding: 32px 36px;
}

/* The site icon is a square mark; fill the circle with it rather than letting
   it sit small in the middle. A hairline keeps its edge on the cream. */
.single-post .blog-single .blog-author .media-image {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(35, 35, 35, 0.08);
}

.single-post .blog-single .blog-author .media-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-post .blog-single .blog-author .author-name {
	margin-bottom: 8px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

.single-post .blog-single .blog-author .author-name a {
	color: var(--sui-ink, #1d211b);
	text-decoration: none;
	transition: color 0.2s ease;
}

.single-post .blog-single .blog-author .author-name a:hover,
.single-post .blog-single .blog-author .author-name a:focus {
	color: var(--bg-dark, #2a491d);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Charcoal at the site's body leading, and held to a readable line. */
.single-post .blog-single .blog-author .author-text {
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.75;
	color: #3f4039;
}

@media (max-width: 575px) {

	.single-post .blog-single .blog-author {
		padding: 26px 22px;
	}

	.single-post .blog-single .blog-author .author-name {
		font-size: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.single-post .blog-single .blog-author .author-name a {
		transition: none;
	}
}

/* ------------------------------------------------------------------------
   The same box under a knowledge-base article.

   The knowledge base has no theme box to restyle, so this is the plugin's own
   markup, appended to the article. It sits straight under the WhatsApp order
   box and speaks the knowledge base's card language — 12px corners, a hairline
   edge, the ivory ground — without the order box's forest top bar, so the two
   read as separate things.

   It sits inside .skb-focus__content, where the knowledge base styles p, a and
   img. Each rule here is built to outrank those: two classes beat the content
   paragraph margin, `aside.` beats its image radius, and the link carries a
   class so the content's `a:not([class])` underline never matches it.
   ------------------------------------------------------------------------ */

aside.zf-author-box {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 1.5em 0 1em;
	padding: 1.4em 1.6em;
	background: var(--sui-ivory, #f8f6ef);
	border: 1px solid #e3e1d6;
	border-radius: 12px;
}

aside.zf-author-box .zf-author-box__mark {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(35, 35, 35, 0.08);
}

aside.zf-author-box .zf-author-box__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}

aside.zf-author-box .zf-author-box__body {
	min-width: 0;
}

/* Small text on a light ground: the deep gold the design keeps for exactly
   this, since the amber accent is only about 1.6:1 against it. */
aside.zf-author-box .zf-author-box__label {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a6a0f;
}

aside.zf-author-box .zf-author-box__name {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

aside.zf-author-box .zf-author-box__link {
	color: var(--sui-ink, #1d211b);
	text-decoration: none;
	transition: color 0.2s ease;
}

aside.zf-author-box .zf-author-box__link:hover,
aside.zf-author-box .zf-author-box__link:focus {
	color: var(--bg-dark, #2a491d);
	text-decoration: underline;
	text-underline-offset: 4px;
}

aside.zf-author-box .zf-author-box__bio {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3f4039;
}

@media (max-width: 575px) {

	aside.zf-author-box {
		gap: 14px;
		padding: 1.2em 1.1em;
	}

	aside.zf-author-box .zf-author-box__mark {
		flex-basis: 56px;
		width: 56px;
		height: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {

	aside.zf-author-box .zf-author-box__link {
		transition: none;
	}
}