/* ==========================================================================
   Components — reusable UI pieces (BEM). Figma component set "CTA".
   ========================================================================== */

/* ---------- Button (CTA) ----------
   Primary:   cherry pill, light text        (Type=Primary)
   Secondary: outlined pill, body text       (Type=Secondary)
   Tertiary:  text + arrow with underline    (Type=Tertiary)
   Figma: padding 18/36, Nunito Sans 24/140%, radius 100.            */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.75em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
	background: var(--color-cherry);
	color: var(--color-bg);
}

.btn--primary:hover {
	background: var(--color-line-strong);
}

.btn--secondary {
	background: transparent;
	border-color: var(--color-body);
	color: var(--color-body);
}

.btn--secondary:hover {
	background: var(--color-heading);
	border-color: var(--color-heading);
	color: var(--color-bg);
}

/* Over dark imagery (transparent header) */
.btn--secondary.btn--on-dark {
	background: var(--color-bg);
	border-color: var(--color-bg);
	color: var(--color-body);
}

.btn--tertiary {
	padding: 0 0 0.5em;
	border: 0;
	border-bottom: 2px solid currentColor;
	border-radius: 0;
	font-size: 1.75rem;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.btn--sm {
	font-size: var(--fs-small);
}

@media (min-width: 1200px) {
	.btn {
		padding: 1.125rem 2.25rem;
	}
}

/* Header "Rezerviraj posjet" — Figma CTA Secondary → hover "Type4" (577:1778): no fill, outline and text
   in the header colour; on hover a beige fill with dark text (cream over the hero photo, accent beige
   on the solid cream header so the fill shows). */
.site-header__cta.btn--secondary {
	--btn-fill: var(--color-bg-accent);
	border-color: currentColor;
	color: var(--header-fg);
}

.site-header__cta.btn--secondary:hover,
.site-header__cta.btn--secondary:focus-visible {
	background: var(--color-bg-accent);
	border-color: var(--color-bg-accent);
	color: var(--color-heading);
}

.site-header--transparent:not(.is-solid) .site-header__cta.btn--secondary {
	--btn-fill: var(--color-bg);
}

.site-header--transparent:not(.is-solid) .site-header__cta.btn--secondary:hover,
.site-header--transparent:not(.is-solid) .site-header__cta.btn--secondary:focus-visible {
	background: var(--color-bg);
	border-color: var(--color-bg);
}