/*
 * Shared components: buttons and the small uppercase eyebrow above section
 * headings. Markup: template-parts/components/.
 */

/* Eyebrow (decision 9: Libre Baskerville, letter-spaced capitals). */
.hf-eyebrow
{
	margin: 0;
	color: var(--hf-color-eyebrow);
	font-family: var(--hf-font-display);
	font-size: var(--hf-text-eyebrow);
	letter-spacing: var(--hf-tracking-eyebrow);
	line-height: 1.4;
	text-transform: uppercase;
}

/* Short line under a section heading (sections from docs/preview/new_home7_2.png). */
.hf-title-rule::after
{
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: var(--hf-space-s);
	background: var(--hf-color-primary);
	content: "";
}

/* The same line above a heading without an eyebrow (docs/preview/miejsce1_2.png). */
.hf-title-rule-above::before
{
	display: block;
	width: 3rem;
	height: 2px;
	margin-bottom: var(--hf-space-m);
	background: var(--hf-color-primary);
	content: "";
}

/* Buttons (decision 9: Georgia 400). */
.hf-button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	min-height: var(--hf-button-height);
	padding: var(--hf-button-padding);
	border: var(--hf-button-border) solid transparent;
	border-radius: var(--hf-radius-s);
	font-family: var(--hf-font-text);
	font-size: var(--hf-button-text);
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--hf-transition), border-color var(--hf-transition), color var(--hf-transition);
}

.hf-button__icon
{
	flex: none;
	width: 1.1em;
	height: 1.1em;
	transition: transform var(--hf-transition);
}

.hf-button:hover .hf-button__icon
{
	transform: translateX(3px);
}

.hf-button:hover .hf-button__icon--down
{
	transform: translateY(3px);
}

/* Theme icon before the label: as tall as the label line, still. */
.hf-button__icon--lead
{
	width: 1.2em;
	height: 1.2em;
}

.hf-button:hover .hf-button__icon--lead
{
	transform: none;
}

.hf-button:hover .hf-button__icon--external
{
	transform: translate(2px, -2px);
}

.hf-button--primary
{
	background: var(--hf-color-primary);
	border-color: var(--hf-color-primary);
	color: var(--hf-color-on-dark);
}

.hf-button--primary:hover
{
	background: var(--hf-color-primary-hover);
	border-color: var(--hf-color-primary-hover);
	color: var(--hf-color-on-dark);
}

/* Outline on the light page background (e.g. „Poznaj miejsce”). */
.hf-button--outline
{
	background: transparent;
	border-color: var(--hf-color-outline);
	color: var(--hf-color-heading);
}

.hf-button--outline:hover
{
	background: var(--hf-color-primary);
	border-color: var(--hf-color-primary);
	color: var(--hf-color-on-dark);
}

/* Outline on a dark background (e.g. over a photo). */
.hf-button--outline-light
{
	background: transparent;
	border-color: var(--hf-color-on-dark);
	color: var(--hf-color-on-dark);
}

.hf-button--outline-light:hover
{
	background: var(--hf-color-on-dark);
	color: var(--hf-color-heading);
}

/* „Kadr w nagłówku wpisu” chosen per photo in the media library
   (inc/image-focus.php): the part of a cropped photo that stays. No class
   means the middle. */
.hf-focus-top
{
	object-position: 50% 0%;
}

.hf-focus-upper
{
	object-position: 50% 25%;
}

.hf-focus-lower
{
	object-position: 50% 75%;
}

.hf-focus-bottom
{
	object-position: 50% 100%;
}