/*
 * HTL Villach - buttons.
 *
 * One button style for the whole site: a pill with the label on the left and
 * an icon in a circle on the right. On hover a yellow fill sweeps through the
 * pill from left to right, then the circle fills yellow and grows a little.
 * Same look and animation as the e-mail / phone pills of the person cards
 * (htlv-personen, .htlv-p__btn, e.g. on /kontakt-2/).
 *
 * Output by the Elementor widget "HTLV Button" (inc/class-htlv-widget-button.php).
 *
 * Markup:
 *   <div class="htlv-btns [htlv-btns--stack [htlv-btns--equal]]">
 *     <a class="htlv-btn htlv-btn--grey htlv-btn--download" href="...">
 *       <span class="htlv-btn__text">Antrag auf Förderung Klasse</span>
 *       <span class="htlv-btn__meta">                          (optional)
 *         <span class="htlv-btn__label">PDF</span>             file type or free label, framed
 *         <span class="htlv-btn__size">240 KB</span>           files only, can be switched off
 *       </span>
 *       <span class="htlv-btn__ic" aria-hidden="true"></span>
 *       <span class="screen-reader-text">(PDF, 240 KB, ...)</span>
 *     </a>
 *   </div>
 *
 * Variants (colour of the pill):
 *   htlv-btn--grey   #f2f2f2, for white backgrounds (default)
 *   htlv-btn--white  white, for grey or coloured backgrounds
 *
 * Icons (set by the widget from the link, can be overridden):
 *   htlv-btn--arrow, --down, --mail, --phone, --download, --extern
 *
 * Tokens from the Customizer: --htlv-accent, --htlv-ink, --htlv-sweep-time,
 * --htlv-sweep-ease. Fallbacks are given.
 */

/* ---------- Group ---------- */

.htlv-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.htlv-btns--stack {
	flex-direction: column;
	align-items: flex-start;
}

/*
 * Stacked buttons of equal width: the group shrinks to its widest button
 * (inline-flex) and every button is stretched to that width. Label left,
 * file info and icon stay on the right.
 */
.htlv-btns--stack.htlv-btns--equal {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
}

/*
 * Inside the info boxes (.htlv-box, Customizer) the buttons sit 16 px below
 * the text, as the old .htlv-pill buttons did. The box itself sets no gap.
 */
.htlv-box .elementor-widget-htlv-button {
	margin-top: 16px;
}

/* ---------- Pill ---------- */

.htlv-btn {
	--htlv-btn-ink: var(--htlv-ink, #1A1814);
	--htlv-btn-pill: #f2f2f2;
	/* File type / free label and file size. #6b6b6b is about the lightest grey
	   that keeps WCAG AA (4.5:1) on the grey pill (4.8:1) and on white (5.3:1). */
	--htlv-btn-meta: #6b6b6b;
	--htlv-btn-acc: var(--htlv-accent, #FFE843);
	--htlv-btn-time: var(--htlv-sweep-time, .8s);
	--htlv-btn-ease: var(--htlv-sweep-ease, cubic-bezier(.65, 0, .35, 1));

	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: 100%;
	min-width: var(--htlv-btn-min, 110px);
	min-height: 36px;
	margin: 0;
	padding: 3px 3px 3px 14px;
	border: 0;
	border-radius: 36px;
	background: var(--htlv-btn-pill);
	color: var(--htlv-btn-ink);
	font-family: inherit;
	text-decoration: none;
	transition: background-color .4s cubic-bezier(0, 0, .3642, 1);
}

.htlv-btn--white {
	--htlv-btn-pill: #fff;
}

.htlv-btn:hover,
.htlv-btn:focus {
	color: var(--htlv-btn-ink);
	text-decoration: none;
}

.htlv-btn:focus-visible {
	outline: 2px solid var(--htlv-btn-ink);
	outline-offset: 2px;
}

/* Yellow starts at the left inside the pill and travels to the circle. */
.htlv-btn::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 3px;
	bottom: 3px;
	left: 3px;
	right: calc(100% - 3px);
	border-radius: 30px;
	background: var(--htlv-btn-acc);
	opacity: 0;
	pointer-events: none;
}

.htlv-btn:hover::before,
.htlv-btn:focus-visible::before {
	animation: htlvBtnSweep var(--htlv-btn-time) var(--htlv-btn-ease) forwards;
}

@keyframes htlvBtnSweep {
	0%   { opacity: 0; left: 3px; right: calc(100% - 33px); }
	15%  { opacity: 1; left: 3px; right: calc(100% - 33px); }
	70%  { opacity: 1; left: 3px; right: 3px; }
	100% { opacity: 0; left: calc(100% - 33px); right: 3px; }
}

/* ---------- Label and file info ---------- */

.htlv-btn__text {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--htlv-btn-ink);
}

.htlv-btn__meta {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	color: var(--htlv-btn-meta);
}

/* File type (PDF, DOCX) or free label (e.g. "Insta") in a thin frame. */
.htlv-btn__label {
	display: inline-block;
	padding: 3px 5px;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 9px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.htlv-btn__size {
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* ---------- Icon circle ---------- */

.htlv-btn__ic {
	position: relative;
	z-index: 1;
	display: block;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .08);
	background-image: radial-gradient(circle closest-side, var(--htlv-btn-acc) 97%, transparent 100%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0% 0%;
	transition: background-color .25s ease, background-size .45s var(--htlv-btn-ease), transform .45s var(--htlv-btn-ease);
	transition-delay: 0s;
}

.htlv-btn:hover .htlv-btn__ic,
.htlv-btn:focus-visible .htlv-btn__ic {
	background-size: 100% 100%;
	transform: scale(1.15);
	transition-delay: 0s, calc(var(--htlv-btn-time) * .45), calc(var(--htlv-btn-time) * .45);
}

.htlv-btn__ic::before {
	content: "";
	position: absolute;
	inset: 7px;
	background: var(--htlv-btn-ink);
	-webkit-mask: var(--ico) center / contain no-repeat;
	        mask: var(--ico) center / contain no-repeat;
}

/* Icons: thin line drawings (stroke 1.2), same family as the person cards. */
.htlv-btn--arrow {
	--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Jump to a section on the same page (#anchor). */
.htlv-btn--down {
	--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");
}

.htlv-btn--mail {
	--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='M3.6 6.6 12 13l8.4-6.4'/%3E%3C/svg%3E");
}

.htlv-btn--phone {
	--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.htlv-btn--download {
	--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v12M6.5 10l5.5 5.5 5.5-5.5M4.5 20h15'/%3E%3C/svg%3E");
}

.htlv-btn--extern {
	--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}

/* ---------- Screen reader text (in case the theme does not define it) ---------- */

.htlv-btn .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.htlv-btn:hover::before,
	.htlv-btn:focus-visible::before {
		animation: none;
	}

	.htlv-btn,
	.htlv-btn__ic {
		transition: none;
	}
}