/* Google preferred source button (single posts, byline area) */

/* Row wrapper: button sits next to byline text on larger screens */
.apb-byline-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
}

/* Cancel the top padding and bottom margin so both flex items align on centre */
.apb-byline-row .byline.pad-top-20 {
	padding-top: 0 !important;
}

.apb-byline-row .byline {
	margin-bottom: 0 !important;
}

/* Positioning anchor for the popover */
.apb-gnb-outer {
	position: relative;
	flex-shrink: 0;
}

/* Button: 30px tall, no border, 2px radius; right padding reserves room for the i circle */
.apb-gnb-btn {
	display: inline-flex !important;
	align-items: center;
	height: 30px;
	padding: 0 28px 0 10px;
	position: relative;
	background: #f8f9fa;
	border: 0 none;
	border-radius: 2px;
	text-decoration: none !important;
	color: #70757a !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.apb-gnb-btn:hover {
	background: #eef0f1;
	text-decoration: none !important;
	color: #3c4043 !important;
}

/* Google G logo */
.apb-gnb-icon {
	width: 16px;
	height: 16px;
	display: block;
	margin: 0 7px 0 0;
	padding: 0;
	align-self: center;
	flex-shrink: 0;
}

/* i-circle: absolute inside the button, vertically centered on the right; SVG draws the shape */
.apb-gnb-info {
	position: absolute;
	right: 7px;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	color: #9aa0a6;
	cursor: pointer;
	transition: color 0.15s ease;
}

.apb-gnb-info:hover {
	color: #3c4043;
}

/* Dark dropdown popover */
.apb-gnb-popover {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 340px;
	max-width: min(340px, 90vw);
	padding: 14px 16px;
	background: #093850;
	color: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
	z-index: 9999;
}

.apb-gnb-popover__arrow {
	position: absolute;
	top: -6px;
	right: 8px;
	width: 12px;
	height: 12px;
	background: #093850;
	transform: rotate(45deg);
	border-radius: 2px 0 0 0;
}

.apb-gnb-popover p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #fff;
}

@media only screen and (max-width: 768px) {
	/* Keep on one line when it fits; wrap to the next line only when it doesn't fit. */
	.apb-byline-row {
		flex-wrap: wrap;
		row-gap: 12px;
		column-gap: 12px;
	}

	.apb-gnb-popover {
		right: auto;
		left: 0;
		width: min(340px, calc(100vw - 20px));
	}

	.apb-gnb-popover__arrow {
		right: auto;
		left: 2px;
	}
}