/*
The sign-up bar, [gdv_em_signup_bar]: a course's next date, pinned to the bottom
edge and shown while the course article is on screen.

Same shape as the reader bar in gdv-aroma-blog (assets/css/article.css), which
paid for two of the rules here: the background is a literal, and the newsletter
popup is moved up out of the bar's way from this file, never from that plugin.
*/

.gdv-em-signup-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem max( 1rem, env( safe-area-inset-left ) ) max( 0.5rem, env( safe-area-inset-bottom ) ) max( 1rem, env( safe-area-inset-right ) );

	/*
	A literal colour, not var(--nv-site-bg). The theme sets that token to
	`transparent` to overwrite the Neve Customizer, and a var() fallback does
	not help: it applies when the property is undefined, never when it is
	defined as something unwanted. The reader bar's first version used it and
	came out see-through.
	*/
	background: #ffffff;
	border-top: 1px solid var(--gdv-em-color-border-light, #dcdcde);
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.07 );

	opacity: 0;
	visibility: hidden;
	transform: translateY( 100% );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.gdv-em-signup-bar.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

/* min-width: 0 so the text gives up its width before the button does: a flex
item's floor is its content width until it is told otherwise. */
.gdv-em-signup-bar__text {
	min-width: 0;
	flex: 1 1 auto;
}

.gdv-em-signup-bar__title,
.gdv-em-signup-bar__fact {
	margin: 0;
	line-height: 1.3;
	color: var(--gdv-em-color-text, #444444);
}

/* One line, cut at the end: after two screens of scrolling the title is the
only thing on screen that says which course this is, and it must not push the
button off the side of a phone. */
.gdv-em-signup-bar__title {
	font-size: 1rem;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The date and the price are what the visitor decides on, so they are body
text at 1rem, not supporting text. Only the "and 2 other dates" aside and the
state word drop to 0.875rem. */
.gdv-em-signup-bar__fact {
	font-size: 1rem;
	display: flex;
	flex-wrap: wrap;
	/* Baseline, so the two smaller spans sit on the line of the date and the
	price. With the default alignment they formed their own baseline group at
	the top of the row and floated above the text beside them. */
	align-items: baseline;
	column-gap: 0.6rem;
	row-gap: 0.1rem;
}

.gdv-em-signup-bar__time {
	color: var(--gdv-em-color-text-light, #6b6b6b);
}

.gdv-em-signup-bar__price {
	font-weight: 700;
}

.gdv-em-signup-bar__note,
.gdv-em-signup-bar__more,
.gdv-em-signup-bar__proof {
	font-size: 0.9375rem;
	color: var(--gdv-em-color-text-light, #6b6b6b);
}

/* The button keeps its content width and the text column beside it is what
gives way, up to a point: a long label ("Rejoindre la liste d'attente") on a
320px screen wraps to two lines rather than pushing the title to nothing. */
.gdv-em-signup-bar .gdv-em-signup-bar__cta.gdv-ui-btn {
	flex: 0 1 auto;
	max-width: 60%;
	margin-inline: 0;
	min-height: 44px;
}

/* The sheet listing several dates, over the bar rather than beside it: on a
phone there is no beside. Spelled out rather than left to the browser's own
[hidden] rule, because the theme has form for setting display on elements that
carry the attribute. */
.gdv-em-signup-sheet[hidden] {
	display: none !important;
}

.gdv-em-signup-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 16;
	max-height: 70vh;
	overflow-y: auto;
	/* Drawn over the bar, so its foot clears the bar's height or the last date
	sits under the bar's button. */
	padding: 1.25rem max( 1rem, env( safe-area-inset-left ) ) calc( 6.5rem + env( safe-area-inset-bottom ) ) max( 1rem, env( safe-area-inset-right ) );
	background: #ffffff;
	border-top: 1px solid var(--gdv-em-color-border-light, #dcdcde);
	box-shadow: 0 -4px 20px rgba( 0, 0, 0, 0.12 );
}

.gdv-em-signup-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.gdv-em-signup-sheet__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	color: var(--gdv-em-color-text, #444444);
}

/* Qualified with the sheet: Neve styles a bare `button` with the primary
button's background and padding, and a single class does not outrank that. The
negative margins pull the 44px target back out to the sheet's own padding. */
.gdv-em-signup-sheet .gdv-em-signup-sheet__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	margin: -0.5rem -0.5rem -0.5rem 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--gdv-em-color-text, #444444);
	cursor: pointer;
}

.gdv-em-signup-sheet .gdv-em-signup-sheet__close:is(:hover, :active) {
	background: none;
	box-shadow: none;
	color: var(--gdv-em-color-primary-hover, #f0605c);
}

.gdv-em-signup-sheet__close-icon {
	width: 1.4rem;
	height: 1.4rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
}

.gdv-em-signup-sheet__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gdv-em-signup-sheet__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0;
	margin: 0;
	border-top: 1px solid var(--gdv-em-color-border-light, #dcdcde);
}

.gdv-em-signup-sheet__fact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.6rem;
	row-gap: 0.1rem;
	min-width: 0;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--gdv-em-color-text, #444444);
}

.gdv-em-signup-sheet .gdv-em-signup-sheet__cta.gdv-ui-btn {
	flex: 0 1 auto;
	max-width: 60%;
	margin-inline: 0;
	min-height: 44px;
}

/* The focus ring on the two controls that are not the shared button, which
brings its own. 2px, and #f0605c reads 3.2:1 on white and 5.0:1 on the dark
surface. */
.gdv-em-signup-bar__choose:focus-visible,
.gdv-em-signup-sheet .gdv-em-signup-sheet__close:focus-visible {
	outline: 2px solid var(--gdv-em-color-primary-hover, #f0605c);
	outline-offset: 2px;
}

/* The bar covers the foot of the page, so the last lines of a course page would
sit permanently underneath it. The class is set by the script when it builds
the bar, so a page without one pays nothing. */
/* The bar is 1rem of padding plus a 1.3-line title plus a fact line that wraps
to three lines on a 320px screen once the price, the state word and "Join 12
others already registered" are all on it: about 6.2rem at its tallest, and
the button never exceeds that. */
body.has-gdv-em-signup-bar {
	padding-bottom: 7rem;
}

/* The newsletter popup pins itself to the same bottom edge, 320px wide against
the right margin at z-index 9999, and wins: on a phone it covers the whole bar.
The bar owns the bottom of a course page, so the popup starts above it. The rule
lives here and not in gdv-mailjet-sign-up because that plugin ships to sites
with no bar. */
body.has-gdv-em-signup-bar #gdv-mj-popup {
	bottom: 6.5rem;
	border-radius: 12px;
}

/* Neve's "scroll to top" is a fixed button in the bottom-right corner, drawn
over the bar's button once the visitor scrolls, which is the moment the bar
appears. The same call the reader bar makes in neve-child for an article: the
arrow is the more expendable of the pair, and deleting this rule brings it
back. */
body.has-gdv-em-signup-bar #scroll-to-top,
body.has-gdv-em-signup-bar .scroll-to-top {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.gdv-em-signup-bar {
		transition: none;
	}
}

/* Both surfaces are opaque panels laid over the page, so they need the dark
palette spelled out rather than inherited from a page that has none. The text
tokens flip with colors.css; the two literal backgrounds flip here. */
@media (prefers-color-scheme: dark) {
	.gdv-em-signup-bar,
	.gdv-em-signup-sheet {
		background: #212121;
		border-top-color: var(--gdv-em-color-border-light, #3a3a3a);
	}

	.gdv-em-signup-bar {
		box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.5 );
	}

	.gdv-em-signup-sheet {
		box-shadow: 0 -4px 20px rgba( 0, 0, 0, 0.6 );
	}

	.gdv-em-signup-bar__title,
	.gdv-em-signup-bar__fact,
	.gdv-em-signup-sheet__title,
	.gdv-em-signup-sheet__fact,
	.gdv-em-signup-sheet .gdv-em-signup-sheet__close {
		color: var(--gdv-em-color-text, #fcfcfc);
	}

	.gdv-em-signup-bar__time,
	.gdv-em-signup-bar__note,
	.gdv-em-signup-bar__more {
		color: var(--gdv-em-color-text-light, #e0e0e0);
	}
}