/**
 * OGEEAT Google Preferred Sources button.
 *
 * The button takes the fonts and colors of the theme. Lines and tints are
 * mixed from the text color, so the same rules fit light and dark themes;
 * only the Google "G" keeps fixed colors. Each color-mix() value follows a
 * plain rgba() fallback for browsers without it.
 *
 * Custom properties a site can set (Appearance > Customize > Additional CSS):
 *   --ogeeat-preferred-source-accent       hover border and preview badge (text color by default)
 *   --ogeeat-preferred-source-radius       corners of the button (999px by default, a pill)
 *   --ogeeat-preferred-source-card-radius  corners of the card (14px by default)
 *
 * @since 2.7.0
 */

.ogeeat-preferred-source {
	--ogeeat-ps-line: color-mix(in srgb, currentColor 16%, transparent);
	--ogeeat-ps-line-strong: color-mix(in srgb, var(--ogeeat-preferred-source-accent, currentColor) 55%, transparent);
	--ogeeat-ps-tint: color-mix(in srgb, currentColor 4%, transparent);
	--ogeeat-ps-muted: color-mix(in srgb, currentColor 74%, transparent);
	box-sizing: border-box;
	margin-block: 2em;
}

/* A custom property cannot fall back by repetition: it is checked only once
   used, so browsers without color-mix() get plain values here. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.ogeeat-preferred-source {
		--ogeeat-ps-line: rgba(127, 127, 127, 0.3);
		--ogeeat-ps-line-strong: rgba(127, 127, 127, 0.6);
		--ogeeat-ps-tint: rgba(127, 127, 127, 0.07);
		--ogeeat-ps-muted: currentColor;
	}
}

.ogeeat-preferred-source *,
.ogeeat-preferred-source *::before,
.ogeeat-preferred-source *::after {
	box-sizing: inherit;
}

/* Compact: one sentence, then the button. ------------------------------- */

.ogeeat-preferred-source--compact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.25em;
}

.ogeeat-preferred-source .ogeeat-preferred-source__prompt {
	margin: 0;
	font-size: 0.9375em;
	line-height: 1.5;
	color: var(--ogeeat-ps-muted);
}

/* The button. Selectors carry an element and two classes to stay ahead of
   theme rules such as `.entry-content a`. ------------------------------- */

.ogeeat-preferred-source a.ogeeat-preferred-source__btn,
.ogeeat-preferred-source a.ogeeat-preferred-source__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 0.625em;
	max-width: 100%;
	margin: 0;
	padding: 0.6875em 1.25em;
	border: 1px solid var(--ogeeat-ps-line);
	border-radius: var(--ogeeat-preferred-source-radius, 999px);
	background: transparent;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 0.9375em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: start;
	text-decoration: none;
	text-transform: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
	.ogeeat-preferred-source a.ogeeat-preferred-source__btn:hover {
		border-color: var(--ogeeat-ps-line-strong);
		background-color: var(--ogeeat-ps-tint);
		color: inherit;
		text-decoration: none;
	}
}

.ogeeat-preferred-source a.ogeeat-preferred-source__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	text-decoration: none;
}

/* A mouse click focuses the link too: themes then draw their own outline
   (dotted under Astra) until the next click. The keyboard keeps the one
   above. */
.ogeeat-preferred-source a.ogeeat-preferred-source__btn:focus:not(:focus-visible) {
	outline: none;
}

/* !important: themes size every svg of the content (width: 100%). */
.ogeeat-preferred-source .ogeeat-preferred-source__icon {
	display: block;
	flex-shrink: 0;
	width: 1.125em !important;
	height: 1.125em !important;
	max-width: none;
}

.ogeeat-preferred-source .ogeeat-preferred-source__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Card: invitation, explanation, button, and a preview when wide enough. */

.ogeeat-preferred-source--card {
	container-type: inline-size;
	padding: clamp(1.25em, 4vw, 1.75em);
	border: 1px solid var(--ogeeat-ps-line);
	border-radius: var(--ogeeat-preferred-source-card-radius, 14px);
}

.ogeeat-preferred-source__grid {
	display: grid;
	gap: 2em;
	align-items: center;
}

.ogeeat-preferred-source__body {
	min-width: 0;
}

/* A paragraph styled as a title: a real heading would end up in tables of
   contents. Block themes expose their heading font as a preset. */
.ogeeat-preferred-source .ogeeat-preferred-source__title {
	margin: 0 0 0.5em;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.ogeeat-preferred-source .ogeeat-preferred-source__text {
	max-width: 60ch;
	margin: 0 0 1.25em;
	font-size: 0.9375em;
	line-height: 1.6;
	color: var(--ogeeat-ps-muted);
}

.ogeeat-preferred-source .ogeeat-preferred-source__note {
	margin: 0.875em 0 0;
	font-size: 0.8125em;
	line-height: 1.5;
	color: var(--ogeeat-ps-muted);
}

/* Preview: the site first, marked, the other results faded. Hidden until
   the card itself is wide enough, whatever the window does (a sidebar
   narrows the article column). */
.ogeeat-preferred-source__preview {
	display: none;
	min-width: 0;
	padding: 1.1em;
	border: 1px solid var(--ogeeat-ps-line);
	border-radius: calc(var(--ogeeat-preferred-source-card-radius, 14px) - 4px);
	font-size: 0.75em;
}

/* 520px: the content column of most block themes (645px for Twenty
   Twenty-Five, less the padding of the card) still gets the preview. */
@container (min-width: 520px) {
	.ogeeat-preferred-source__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
		gap: 2em;
	}

	/* Two lines for the invitation beside the preview. */
	.ogeeat-preferred-source .ogeeat-preferred-source__title {
		font-size: 1.125em;
	}

	.ogeeat-preferred-source__preview {
		display: block;
	}
}

/* Narrow card (phone, sidebar): a smaller title keeps the invitation on two
   lines, and the button spans the card instead of wrapping inside a pill. */
@container (max-width: 400px) {
	.ogeeat-preferred-source .ogeeat-preferred-source__title {
		font-size: 1.125em;
	}

	.ogeeat-preferred-source--card a.ogeeat-preferred-source__btn {
		display: flex;
		justify-content: center;
		width: 100%;
		text-align: center;
	}
}

.ogeeat-preferred-source__result {
	padding: 0.9em 1em;
	border: 1px solid rgba(127, 127, 127, 0.45);
	border: 1px solid color-mix(in srgb, var(--ogeeat-preferred-source-accent, currentColor) 30%, transparent);
	border-radius: 10px;
	background: var(--ogeeat-ps-tint);
}

.ogeeat-preferred-source__result-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4em 0.5em;
	margin-bottom: 0.8em;
}

.ogeeat-preferred-source__domain {
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ogeeat-preferred-source__badge {
	flex-shrink: 0;
	padding: 0.2em 0.65em;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.15);
	background: color-mix(in srgb, var(--ogeeat-preferred-source-accent, currentColor) 13%, transparent);
	color: var(--ogeeat-preferred-source-accent, currentColor);
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
}

.ogeeat-preferred-source__bar {
	display: block;
	width: 75%;
	height: 0.55em;
	margin-top: 0.5em;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.3);
	background: color-mix(in srgb, currentColor 22%, transparent);
}

.ogeeat-preferred-source__result .ogeeat-preferred-source__bar--strong {
	width: 85%;
	margin-top: 0;
	background: rgba(127, 127, 127, 0.7);
	background: color-mix(in srgb, currentColor 72%, transparent);
}

.ogeeat-preferred-source__bar--short {
	width: 58%;
}

.ogeeat-preferred-source__bar--faint {
	width: 70%;
	background: rgba(127, 127, 127, 0.15);
	background: color-mix(in srgb, currentColor 11%, transparent);
}

.ogeeat-preferred-source__others {
	margin-top: 0.9em;
	padding-inline: 0.25em;
	opacity: 0.55;
}

.ogeeat-preferred-source__others .ogeeat-preferred-source__bar:nth-child(3) {
	margin-top: 1.1em;
}

/* Under the Share with AI buttons: one line in the colors of that block,
   whose light grey background is fixed. ------------------------------- */

.ogeeat-preferred-source--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-block: 14px 0;
	padding-block-start: 14px;
	border-block-start: 1px solid #e2e4e7;
	color: #1d2327;
}

.ogeeat-preferred-source--inline .ogeeat-preferred-source__prompt {
	font-size: 13px;
	color: #50575e;
}

.ogeeat-preferred-source--inline a.ogeeat-preferred-source__btn,
.ogeeat-preferred-source--inline a.ogeeat-preferred-source__btn:visited {
	padding: 8px 14px;
	border-color: #dcdde1;
	border-radius: var(--ogeeat-preferred-source-radius, 6px);
	background: #fff;
	color: #1d2327;
	font-size: 13px;
	font-weight: 500;
}

@media (hover: hover) {
	.ogeeat-preferred-source--inline a.ogeeat-preferred-source__btn:hover {
		border-color: #949ca5;
		background-color: #f0f0f1;
		color: #1d2327;
	}
}

.ogeeat-preferred-source--inline .ogeeat-preferred-source__icon {
	width: 18px !important;
	height: 18px !important;
}

@media (prefers-reduced-motion: reduce) {
	.ogeeat-preferred-source a.ogeeat-preferred-source__btn {
		transition: none;
	}
}

@media print {
	.ogeeat-preferred-source {
		display: none !important;
	}
}