/* PDFit download button.
 *
 * Shape, weight and emphasis are chosen by class; only color arrives as a
 * value, through the custom properties below. That split is what keeps this
 * file from growing a rule every time the settings screen grows a control:
 * the seven things a site can choose are seven small classes here, and the
 * three it can type are three properties PDFit prints in the page head.
 *
 * A class is left out wherever a choice is the default, so the button a site
 * that has configured nothing gets is `pdfit-button pdfit-button--outline`.
 */

.pdfit-button-wrap {
	margin: 1.25em 0;
}

.pdfit-button {
	/* Color follows the surrounding text unless a site says otherwise, so an
	   unconfigured button is legible on whatever background it lands on. */
	--pdfit-accent: currentColor;
	/* The gradient's far stop: the near one lightened, so choosing a single
	   color still gives a gradient that reads as one color with depth.
	   Defaults to the near stop, which is not decoration — a custom property
	   holding a function the browser cannot resolve still parses, and only
	   fails once it is substituted into the gradient, taking the whole
	   background with it and leaving white text on nothing. The @supports
	   block below upgrades it where color-mix exists; everywhere else the
	   gradient quietly becomes a solid. */
	--pdfit-accent-2: var(--pdfit-accent);
	--pdfit-fg: #fff;
	--pdfit-radius: 4px;
	--pdfit-shadow: none;
	--pdfit-pad-y: 0.55em;
	--pdfit-pad-x: 1.1em;
	--pdfit-gap: 0.5em;
	--pdfit-icon: var(--pdfit-icon-download);

	display: inline-flex;
	align-items: center;
	gap: var(--pdfit-gap);
	padding: var(--pdfit-pad-y) var(--pdfit-pad-x);
	border: 1px solid transparent;
	border-radius: var(--pdfit-radius);
	box-shadow: var(--pdfit-shadow);
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: filter 0.15s ease, background-color 0.15s ease;
}

.pdfit-button:focus-visible {
	outline: 2px solid var(--pdfit-accent);
	outline-offset: 2px;
}

/* The icon is a masked shape rather than markup, so the anchor stays a plain
   anchor — nothing for a theme's link styling to trip over — and the glyph
   takes the label's color without being told what it is. */
.pdfit-button {
	--pdfit-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 11 5 5 5-5'/%3E%3Cpath d='M4 19h16'/%3E%3C/svg%3E");
	--pdfit-icon-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M12 12v5'/%3E%3Cpath d='m9.5 14.5 2.5 2.5 2.5-2.5'/%3E%3C/svg%3E");
}

/* Guarded, because a browser without mask support would draw the fallback
   background as a solid square where the glyph should be. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
	.pdfit-button::before {
		content: "";
		flex: none;
		width: 1em;
		height: 1em;
		background-color: currentColor;
		-webkit-mask: var(--pdfit-icon) center / contain no-repeat;
		mask: var(--pdfit-icon) center / contain no-repeat;
	}
}

.pdfit-button--icon-doc {
	--pdfit-icon: var(--pdfit-icon-doc);
}

/* Content: the label with its icon by default, the label alone, or the icon
   alone. Icon-only squares the padding; the label it no longer shows moves to
   an aria-label in the markup, so the link still announces what it does. */
.pdfit-button--text-only::before {
	display: none;
}

.pdfit-button--icon-only {
	padding: var(--pdfit-pad-y);
	aspect-ratio: 1;
	justify-content: center;
	gap: 0;
}

/* --- Presets -------------------------------------------------------- *
 *
 * These carry more specificity than the rest of this file, deliberately.
 * Themes and page builders set link colours through a descriptor with a
 * class in it — `.elementor-kit-6 a`, `.entry-content a` — which at 0,1,1
 * beats a bare `.pdfit-button--solid` at 0,1,0 and repaints the label in the
 * theme's link colour. A site that had chosen white text on a black button
 * got the theme's maroon instead.
 *
 * `a.pdfit-button.pdfit-button--solid` is 0,2,1, which clears those without
 * reaching for !important — so a site can still restyle the button through
 * the class attribute the shortcode accepts, which !important would have
 * taken away.
 */

/* Outline: the default, and the only one that needs no color of its own. */
a.pdfit-button.pdfit-button--outline {
	color: var(--pdfit-accent);
	background: transparent;
	border-color: var(--pdfit-accent);
}

a.pdfit-button.pdfit-button--outline:hover,
a.pdfit-button.pdfit-button--outline:focus {
	background: rgba(128, 128, 128, 0.12);
	background: color-mix(in srgb, var(--pdfit-accent) 12%, transparent);
}

a.pdfit-button.pdfit-button--solid {
	color: var(--pdfit-fg);
	background: var(--pdfit-accent);
}

a.pdfit-button.pdfit-button--solid:hover,
a.pdfit-button.pdfit-button--solid:focus {
	filter: brightness(1.08);
}

a.pdfit-button.pdfit-button--gradient {
	color: var(--pdfit-fg);
	background: linear-gradient(135deg, var(--pdfit-accent), var(--pdfit-accent-2));
}

a.pdfit-button.pdfit-button--gradient:hover,
a.pdfit-button.pdfit-button--gradient:focus {
	filter: brightness(1.06) saturate(1.05);
}

/* --- Size ----------------------------------------------------------- */

/* Minimal trims the padding to the least the wording needs, so the button is
   as wide as its text and no wider. The type size is deliberately untouched:
   this shrinks the box, not the label. */
.pdfit-button--minimal {
	--pdfit-pad-y: 0.12em;
	--pdfit-pad-x: 0.34em;
	--pdfit-gap: 0.3em;
	font-weight: 500;
}

.pdfit-button--sm {
	--pdfit-pad-y: 0.45em;
	--pdfit-pad-x: 0.9em;
	font-size: 0.8em;
}

.pdfit-button--lg {
	--pdfit-pad-y: 0.72em;
	--pdfit-pad-x: 1.5em;
	font-size: 1em;
}

/* --- Corners -------------------------------------------------------- */

.pdfit-button--square {
	--pdfit-radius: 0;
}

.pdfit-button--rounded {
	--pdfit-radius: 10px;
}

.pdfit-button--pill {
	--pdfit-radius: 999px;
}

/* --- Drop shadow ---------------------------------------------------- */

.pdfit-button--shadow-soft {
	--pdfit-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pdfit-button--shadow-lifted {
	--pdfit-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 10px 24px rgba(0, 0, 0, 0.16);
}

/* Tinted with the button's own color rather than black, because a black
   shadow is invisible on a dark theme, which is where a glow is wanted. The
   untinted value is the one that survives without color-mix; see the note on
   --pdfit-accent-2 for why this cannot be two plain declarations. */
.pdfit-button--shadow-glow {
	--pdfit-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.pdfit-button {
		--pdfit-accent-2: color-mix(in oklab, var(--pdfit-accent) 72%, #fff);
	}

	.pdfit-button--shadow-glow {
		--pdfit-shadow: 0 4px 18px color-mix(in srgb, var(--pdfit-accent) 45%, transparent);
	}
}

/* --- Width ---------------------------------------------------------- */

.pdfit-button--block {
	display: flex;
	width: 100%;
	justify-content: center;
}

/* --- Floating button ------------------------------------------------ *
 *
 * Held in a corner of the window rather than placed in the content, which
 * is what makes it land the same way on every theme. Printed at wp_footer
 * as a child of body: a transform on any ancestor would otherwise turn
 * position:fixed into position:absolute, and builders transform containers
 * routinely.
 */

.pdfit-float {
	position: fixed;
	z-index: var(--pdfit-float-z, 9999);
	margin: 0;
}

.pdfit-float .pdfit-button-wrap {
	margin: 0;
}

.pdfit-float--br {
	right: var(--pdfit-float-x, 24px);
	bottom: var(--pdfit-float-y, 24px);
}

.pdfit-float--bl {
	left: var(--pdfit-float-x, 24px);
	bottom: var(--pdfit-float-y, 24px);
}

.pdfit-float--tr {
	right: var(--pdfit-float-x, 24px);
	top: var(--pdfit-float-y, 24px);
}

.pdfit-float--tl {
	left: var(--pdfit-float-x, 24px);
	top: var(--pdfit-float-y, 24px);
}

/* The script only ever lifts this clear of the footer; it never hides it, so
   a reader whose JavaScript never arrives keeps a working button. */
.pdfit-float {
	transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.pdfit-float {
		transition: none;
	}
}

/* Small screens: out of the way of sticky navigation and browser chrome,
   and down to the icon alone, which is all there is room for. */
@media (max-width: 782px) {
	.pdfit-float--compact {
		right: var(--pdfit-float-x, 16px);
		left: auto;
		top: var(--pdfit-float-y, 16px);
		bottom: auto;
	}

	.pdfit-float--compact .pdfit-button {
		padding: var(--pdfit-pad-y);
		aspect-ratio: 1;
		justify-content: center;
		gap: 0;
	}

	.pdfit-float--compact .pdfit-button-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media print {
	.pdfit-float {
		display: none;
	}
}