/**
 * Obsium Author Box
 * Update-safe styling for the single-post author box.
 * Uses the aiero theme's link/button gradient variables where available,
 * with neutral fallbacks so it looks correct on any template.
 */

/* Hide the aiero theme's built-in post meta footer on single posts
   ("By {author}" + the site's social links + gradient divider). The author
   box below replaces it, so this removes the duplicate attribution line.
   Loads only on single posts, so pages/other content are unaffected. */
.single-post .post-meta-footer,
body.single .post-meta-footer {
	display: none !important;
}

/* The theme can also print the "By {author}" byline in the TOP meta header.
   Hide the author item wherever it appears so it isn't duplicated with the
   author box. The post date in that header is left intact. */
.single-post .post-meta-item-author,
body.single .post-meta-item-author {
	display: none !important;
}

/* Remove the post meta socials block on single posts (the company LinkedIn
   icon that sat next to the byline). Scoped to .post-meta-item-socials, so the
   site-wide header/footer social links are NOT affected. */
.single-post .post-meta-item-socials,
body.single .post-meta-item-socials {
	display: none !important;
}

.obsium-author-box {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin: 48px 0 8px;
	padding: 28px 32px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	background: #f7f9fb;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	line-height: 1.6;
}

/* Avatar ------------------------------------------------------------------ */
.obsium-author-box__avatar {
	flex: 0 0 auto;
}

.obsium-author-box__avatar a {
	display: block;
	line-height: 0;
}

.obsium-author-box__avatar-img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: #e8edf2;
}

/* Body -------------------------------------------------------------------- */
.obsium-author-box__body {
	flex: 1 1 auto;
	min-width: 0;
}

.obsium-author-box__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7684;
	margin-bottom: 6px;
}

.obsium-author-box__headline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin: 0 0 2px;
}

.obsium-author-box__name {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
	text-decoration: none;
}

.obsium-author-box__name:hover,
.obsium-author-box__name:focus {
	text-decoration: underline;
}

.obsium-author-box__role {
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 500;
	color: #6b7684;
}

.obsium-author-box__bio {
	margin: 12px 0 0;
	font-size: 15px;
	color: #3a434e;
}

.obsium-author-box__bio p:last-child {
	margin-bottom: 0;
}

/* LinkedIn button --------------------------------------------------------- */
/* Selectors are scoped + !important so the theme's link colour can't override
   the white label/icon on the blue pill. */
.obsium-author-box .obsium-author-box__linkedin,
.obsium-author-box .obsium-author-box__linkedin:link,
.obsium-author-box .obsium-author-box__linkedin:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #ffffff !important;
	background: #0a66c2; /* LinkedIn brand blue */
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.obsium-author-box .obsium-author-box__linkedin:hover,
.obsium-author-box .obsium-author-box__linkedin:focus {
	background: #084e97;
	color: #ffffff !important;
	transform: translateY(-1px);
}

.obsium-author-box__linkedin span {
	color: #ffffff !important;
}

.obsium-author-box__linkedin svg {
	flex: 0 0 auto;
	color: #ffffff; /* drives the icon's currentColor fill */
	fill: #ffffff;
}

/* Contact button ---------------------------------------------------------- */
/* Secondary / outlined style so it complements the solid LinkedIn pill.
   Scoped + !important so the theme's link colour can't override it. */
.obsium-author-box .obsium-author-box__contact,
.obsium-author-box .obsium-author-box__contact:link,
.obsium-author-box .obsium-author-box__contact:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #1a2430 !important;
	background: transparent;
	border: 1px solid rgba(0, 0, 0, 0.18);
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.obsium-author-box .obsium-author-box__contact:hover,
.obsium-author-box .obsium-author-box__contact:focus {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.32);
	color: #1a2430 !important;
	transform: translateY(-1px);
}

.obsium-author-box__contact span {
	color: inherit !important;
}

.obsium-author-box__contact svg {
	flex: 0 0 auto;
	color: currentColor;
	fill: currentColor;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 600px) {
	.obsium-author-box {
		flex-direction: column;
		gap: 16px;
		padding: 24px 20px;
		text-align: left;
	}

	.obsium-author-box__avatar-img {
		width: 64px;
		height: 64px;
	}
}

/* Dark backgrounds -------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.obsium-author-box {
		background: rgba(255, 255, 255, 0.04);
		border-color: rgba(255, 255, 255, 0.12);
	}

	.obsium-author-box__eyebrow,
	.obsium-author-box__role {
		color: #9aa5b1;
	}

	.obsium-author-box__bio {
		color: #cdd5de;
	}

	.obsium-author-box .obsium-author-box__contact,
	.obsium-author-box .obsium-author-box__contact:link,
	.obsium-author-box .obsium-author-box__contact:visited {
		color: #e8edf2 !important;
		border-color: rgba(255, 255, 255, 0.24);
	}

	.obsium-author-box .obsium-author-box__contact:hover,
	.obsium-author-box .obsium-author-box__contact:focus {
		background: rgba(255, 255, 255, 0.07);
		border-color: rgba(255, 255, 255, 0.4);
		color: #e8edf2 !important;
	}
}