/* Rozwijane zapisy w nagłówku.

   Osobny, mały arkusz, bo nagłówek jest na każdej podstronie, także tam,
   gdzie nie ma naszych shortcode'ów. Nie chcemy ciągnąć całego frre.css
   tylko po to, żeby ostylować jedno menu. */

.frre-zapisy { position: relative; display: inline-block; }

.frre-zapisy__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 999;
	margin: 0;
	padding: .4rem;
	list-style: none;
	min-width: 15rem;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(23, 23, 23, .16);
}
.frre-zapisy__menu[hidden] { display: none; }

.frre-zapisy__menu li { margin: 0; }

.frre-zapisy__menu a {
	display: block;
	padding: .7rem .9rem;
	border-radius: 8px;
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	/* Widget przycisku w nagłówku bywa wyrównany do prawej i dziedziczy to
	   na listę - pozycje czyta się lepiej od lewej. */
	text-align: left;
	/* Ciemny atrament na białym: 16,6:1. Żółty na żółtym z kitu dawał 1,66:1. */
	color: #171717;
	text-decoration: none;
}
.frre-zapisy__menu a:hover,
.frre-zapisy__menu a:focus-visible {
	background: #036CD6;
	color: #fff;
}
.frre-zapisy__menu a:focus-visible { outline: 2px solid #171717; outline-offset: 2px; }

/* Strzałka przy napisie, żeby było widać, że to rozwijana lista.

   Przycisk Elementora trzyma tekst w zagnieżdżonym spanie z `display: flex`,
   który zajmuje całą linię - bez przestawienia samego odnośnika na flex
   strzałka spadała pod napis. Selektor z nazwą znacznika, żeby przebić
   `.elementor-button { display: inline-block }`. */
a.frre-zapisy__przycisk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
}
.frre-zapisy__przycisk::after {
	content: '';
	display: inline-block;
	width: .5em;
	height: .5em;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .18s ease;
}
.frre-zapisy--otwarte .frre-zapisy__przycisk::after {
	transform: translateY(1px) rotate(-135deg);
}

@media (max-width: 767px) {
	.frre-zapisy__menu { right: auto; left: 0; min-width: 13rem; }
}