/* ==========================================================================
   SAVING AN OPPORTUNITY

   Two shapes of the same control. The icon sits over a card's thumbnail; the
   button carries a label and sits in a row of other buttons.

   Both are a <button> inside a <form> - see
   template-parts/favourite-button.php for why it is a form and not a link.
   ========================================================================== */

.fav--icon,
.fav--button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid var(--color-border, #E2E8EC);
	background: #fff;
	color: var(--color-text-muted, #5C6B7A);
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s, transform .15s;
}

.fav--icon svg,
.fav--button svg { flex: 0 0 auto; }

/* The heart fills in when it is saved. fill:currentColor on the path rather
   than a second icon, so there is one mark and it only changes colour. */
.fav.is-saved { color: #D6336C; border-color: #F3C4D4; }
.fav.is-saved svg { fill: currentColor; }

.fav:hover { color: #D6336C; border-color: #F3C4D4; }

.fav:focus-visible {
	outline: 2px solid var(--color-primary, #028B93);
	outline-offset: 2px;
}

/* --- Over a card ---------------------------------------------------------- */

.opportunity-card-wrap {
	position: relative;
	/* The grid stretches its children; the card inside has to stretch too or
	   a short card would leave the wrapper's cell half empty. */
	display: flex;
}
.opportunity-card-wrap > .opportunity-card {
	flex: 1 1 auto;
	/* min-height rather than height: the card is the thing that decides how
	   tall the row is. */
	min-height: 100%;
}

/* Positioned by context, not by the control itself: signed in it is a form
   wrapping a button, signed out it is a bare link to sign in, and both have
   to land in the same corner. */
.opportunity-card-wrap > .fav--icon,
.opportunity-card-wrap > .fav--icon__form {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	margin: 0;
}

.fav--icon {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(1, 34, 79, .14);
}
.fav--icon:hover { transform: scale(1.06); }

/* --- In a row of buttons -------------------------------------------------- */

.fav--button__form { margin: 0; }
.fav--button {
	padding: 8px 15px;
	border-radius: 999px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.fav--icon,
	.fav--button { transition: none; }
	.fav--icon:hover { transform: none; }
}

/* ==========================================================================
   MY FAVOURITES
   ========================================================================== */

.fav-closing { border-color: var(--color-accent-dark, #B9770E); }

.fav-list {
	display: grid;
	gap: 12px;
}

.fav-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 18px;
	padding: 16px 18px;
	border: 1px solid var(--color-border, #E2E8EC);
	border-radius: var(--radius-lg, 14px);
	background: #fff;
}
/* A closed one keeps its place and steps back, rather than disappearing. */
.fav-item.is-closed { background: #FAFBFC; }
.fav-item.is-closed .fav-item__title a { color: var(--color-text-muted, #5C6B7A); }

.fav-item__body { flex: 1 1 320px; min-width: 0; }

.fav-item__meta {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-muted, #5C6B7A);
}
.fav-item__title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
}
.fav-item__title a {
	color: var(--color-navy-900, #01224F);
	text-decoration: none;
}
.fav-item__title a:hover { text-decoration: underline; }

.fav-item__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
}
.fav-item__state {
	padding: 3px 10px;
	border-radius: 999px;
	background: #F1F5F7;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--color-text-muted, #5C6B7A);
}
.fav-item__state.is-soon {
	background: var(--color-accent-soft, #FDF3E2);
	color: var(--color-accent-dark, #B9770E);
}
.fav-item__state.is-closed {
	background: #EEF1F4;
	color: #6B7785;
}

.fav-item__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 0 auto;
}
.fav-item__actions .btn { font-size: 13.5px; padding: 8px 15px; }

@media (max-width: 599px) {
	.fav-item__actions { width: 100%; }
	.fav-item__actions .btn,
	.fav-item__actions .fav--button { flex: 1 1 auto; justify-content: center; }
}

.fav-empty { margin-top: 0; }