/* ==========================================================
   Arena Times — Author Box widget
   Only what the theme's own .arena-author-box (assets/css/main.css)
   does not already cover: the meta row and the story count.
   ========================================================== */

.arena-author-box__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
}

.arena-author-box__meta:empty {
	display: none;
}

.arena-author-box__count {
	font-size: 13px;
	color: var(--arena-ink-soft, #5b6472);
}

.arena-author-box__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--arena-ink-soft, #5b6472);
}

/* The theme's own box is a row; the widget lets it become a column, and a
   column needs its own text alignment or the name sits off to one side of
   a centred avatar. */
.arena-author-box {
	display: flex;
}

.arena-author-box__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* ── The initial, when an author has no photo ───────────────────────── */

.arena-author-box__initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* Square, always. Set the width and the height follows, so a padding or
	   a font-size can never stretch the circle into an egg. */
	aspect-ratio: 1;
	/* The size arrives as a property from the template, so the widget's
	   Size control - an ordinary rule - can still override it. */
	width: var(--arena-initial-size, 64px);
	font-size: var(--arena-initial-font, 28px);
	/* Padding insets the letter instead of growing the circle. */
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 50%;
	/* Defaults only: the widget's Initial section overrides all three, and
	   the derived-from-the-name option writes its colour on the element. */
	background-color: var(--arena-accent, #c8102e);
	color: var(--arena-accent-ink, #fff);
	font-family: var(--arena-font-head, Georgia, serif);
	font-weight: 600;
	line-height: 1;
	/* The letter is centred optically, not by the font's own metrics. */
	user-select: none;
}

.arena-author-box__tagline {
	margin: 2px 0 0;
	color: var(--arena-ink-soft, #5b6472);
	font-size: 15px;
	line-height: 1.35;
}

/* ── The widget is not the template's author box ─────────────────────
   main.css gives .arena-author-box a rule and 32px below it, because in
   single.php it separates the author from the comments underneath. In a
   builder that is somebody else's decision: the editor places the widget
   and sets its own spacing, and an unexplained margin it cannot find a
   control for just looks like a bug. So the widget starts from nothing
   and the Box section supplies whatever is wanted.

   Same specificity as the rule it undoes (0,2,0); this stylesheet depends
   on arena-main, so WordPress prints it second and later wins. */
.arena .arena-author-box--widget {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
	/* main.css lets the box wrap, so in a narrow column the text dropped
	   under the picture even with "Avatar beside" chosen. Beside means
	   beside; for stacked, Layout has a per-device "Avatar above". */
	flex-wrap: nowrap;
}

/* Spacing between the lines comes from the body's gap alone - the Space
   Between Lines control. main.css put 6px under the name, and this sheet
   2px over the role and 4px over the meta row, all on top of the gap, so
   no setting could close it. (0,3,0): above main.css's (0,2,0), below the
   widget's own controls. */
.arena .arena-author-box--widget .arena-author-box__name,
.arena .arena-author-box--widget .arena-author-box__label,
.arena .arena-author-box--widget .arena-author-box__tagline,
.arena .arena-author-box--widget .arena-author-box__bio,
.arena .arena-author-box--widget .arena-author-box__meta {
	margin: 0;
}

/* A name with nothing under it has no second line for the top edge to
   line up with, so it centres against the picture instead. Anything below
   the name - a role, a bio, a story count - and top alignment is right
   again. The widget's Vertical Alignment control overrides either way. */
.arena .arena-author-box--name-only {
	align-items: center;
}

/* Picture only: the picture is the link, and nothing beside it. */
.arena-author-box .arena-author-box__avatar-link {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	border-radius: 50%;
	text-decoration: none;
}

.arena-author-box .arena-author-box__avatar-link:focus-visible {
	outline: 2px solid var(--arena-accent, #c8102e);
	outline-offset: 3px;
}

/* A hidden name still read out once, by screen readers only. */
.arena-author-box .arena-author-box__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}