/*
 * Copy as Markdown Button - Frontend Styles
 * Dynamic colours are applied via inline style from PHP settings.
 */

/* ── Wrapper ─────────────────────────────────────────────────────── */
.copy_as_markdown-wrap {
	display: block;
	margin: 0 0 1.25em;
	line-height: 1;
}

.copy_as_markdown-wrap--below {
	margin: 1.25em 0 0;
}

.copy_as_markdown-block-wrapper {
	margin: 0;
}

.copy_as_markdown-block-wrapper .copy_as_markdown-wrap {
	margin: 0;
}

/* ── Button base ─────────────────────────────────────────────────── */
/*
 * Prefixed with .copy_as_markdown-wrap (specificity 0,2,0) to beat
 * Elementor/theme rules like `.page-content button` (0,1,1) that would
 * otherwise override background-color, color, and border.
 */
.copy_as_markdown-wrap .copy_as_markdown-copy-btn {
	/* Layout */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	/* Prevent collapsing during state transition */
	min-width: 0;

	/* Typography */
	font-family: inherit;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;

	/* Appearance - colours injected via inline style */
	background-color: #2563EB; /* fallback */
	color: #FFFFFF;            /* fallback */
	border: none;
	border-radius: 6px;        /* fallback */
	outline: none;

	/* Interaction */
	cursor: pointer;
	transition: background-color .18s ease, opacity .15s ease, transform .1s ease;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;

	/* Prevent the button from jumping size during state switch */
	overflow: hidden;
}

/* ── Split button group ──────────────────────────────────────────── */
.copy_as_markdown-btn-group {
	position: relative;
	display: inline-flex;
}

/* When inside a group, flatten the right side of the copy button */
.copy_as_markdown-btn-group .copy_as_markdown-copy-btn--split {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* ── Dropdown chevron toggle ─────────────────────────────────────── */
.copy_as_markdown-wrap .copy_as_markdown-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-weight: 600;
	line-height: 1;
	background-color: #2563EB; /* fallback — overridden by inline style */
	color: #FFFFFF;
	border: none;
	border-top-right-radius: 6px;  /* fallback */
	border-bottom-right-radius: 6px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	cursor: pointer;
	transition: background-color .18s ease, opacity .15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	flex-shrink: 0;
}

.copy_as_markdown-wrap .copy_as_markdown-dropdown-toggle.copy_as_markdown-btn--small  { padding: 6px 9px; }
.copy_as_markdown-wrap .copy_as_markdown-dropdown-toggle.copy_as_markdown-btn--medium { padding: 9px 11px; }
.copy_as_markdown-wrap .copy_as_markdown-dropdown-toggle.copy_as_markdown-btn--large  { padding: 12px 13px; }

.copy_as_markdown-wrap .copy_as_markdown-dropdown-toggle:hover { opacity: .9; }
.copy_as_markdown-wrap .copy_as_markdown-dropdown-toggle:active { transform: scale(.97); }

.copy_as_markdown-wrap .copy_as_markdown-dropdown-toggle:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .4);
	outline-offset: 3px;
}
.copy_as_markdown-wrap .copy_as_markdown-dropdown-toggle:focus:not(:focus-visible) { outline: none; }

/* ── Sizes ───────────────────────────────────────────────────────── */
.copy_as_markdown-wrap .copy_as_markdown-copy-btn.copy_as_markdown-btn--small  { padding: 6px 14px;  font-size: 12px; }
.copy_as_markdown-wrap .copy_as_markdown-copy-btn.copy_as_markdown-btn--medium { padding: 9px 18px;  font-size: 14px; }
.copy_as_markdown-wrap .copy_as_markdown-copy-btn.copy_as_markdown-btn--large  { padding: 12px 24px; font-size: 16px; }

/* ── Hover / Focus ───────────────────────────────────────────────── */
.copy_as_markdown-wrap .copy_as_markdown-copy-btn:hover {
	opacity: .9;
}

.copy_as_markdown-wrap .copy_as_markdown-copy-btn:active {
	transform: scale( .97 );
}

.copy_as_markdown-wrap .copy_as_markdown-copy-btn:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .4);
	outline-offset: 3px;
}

.copy_as_markdown-wrap .copy_as_markdown-copy-btn:focus:not(:focus-visible) {
	outline: none;
}

/* ── Dropdown panel ──────────────────────────────────────────────── */
.copy_as_markdown-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	z-index: 9999;
	padding: 4px;
	white-space: nowrap;
	overflow: hidden;
}

/* ── Dropdown items ──────────────────────────────────────────────── */
.copy_as_markdown-dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	background: none;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #111827;
	line-height: 1;
	text-align: left;
	white-space: nowrap;
	transition: background-color .12s ease;
}

.copy_as_markdown-dropdown-item:hover,
.copy_as_markdown-dropdown-item:focus-visible {
	background-color: #F3F4F6;
	outline: none;
}

.copy_as_markdown-dropdown-item svg {
	flex-shrink: 0;
	color: #6B7280;
}

/* <a> items inherit the same look as <button> items */
a.copy_as_markdown-dropdown-item {
	text-decoration: none !important;
	color: #111827;
}

/* ── Inner content slots ─────────────────────────────────────────── */

/*
 * Both "default" and "success" states live inside the same button.
 * We use max-width + opacity so the element never fully collapses
 * to 0×0, preventing any layout jump (the blink the user reported).
 *
 * Default state:  .copy_as_markdown-btn__content visible, .copy_as_markdown-btn__success hidden.
 * Success state:  vice-versa, triggered by JS adding .is-success.
 *
 * Selectors are nested under .copy_as_markdown-copy-btn (specificity 0,2,0) to
 * win over common theme rules like `.entry-content * { max-width: 100% }` (0,1,0).
 */

.copy_as_markdown-copy-btn .copy_as_markdown-btn__content,
.copy_as_markdown-copy-btn .copy_as_markdown-btn__success-content {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: opacity .15s ease, max-width .15s ease;
	max-width: 400px;
	overflow: hidden;
}

/* Default: success slot hidden */
.copy_as_markdown-copy-btn .copy_as_markdown-btn__success-content {
	max-width: 0;
	opacity: 0;
	gap: 0;
	pointer-events: none;
}

/* Success state: swap visibility */
.copy_as_markdown-copy-btn.is-success .copy_as_markdown-btn__content {
	max-width: 0;
	opacity: 0;
	gap: 0;
}

.copy_as_markdown-copy-btn.is-success .copy_as_markdown-btn__success-content {
	max-width: 400px;
	opacity: 1;
	gap: 7px;
}

/* ── Icons ───────────────────────────────────────────────────────── */
.copy_as_markdown-btn__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	pointer-events: none;
}

.copy_as_markdown-btn__icon svg {
	display: block;
}

/* ── Accessibility: live status region ───────────────────────────── */
.copy_as_markdown-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.copy_as_markdown-copy-btn.copy_as_markdown-btn--large {
		padding: 10px 18px;
		font-size: 14px;
	}

	.copy_as_markdown-dropdown {
		min-width: 0;
		right: 0;
		left: auto;
	}
}

/* ── Reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.copy_as_markdown-copy-btn,
	.copy_as_markdown-dropdown-toggle,
	.copy_as_markdown-dropdown-item,
	.copy_as_markdown-btn__content,
	.copy_as_markdown-btn__success-content {
		transition: none;
	}
}