/**
 * What Swiss Biotech Day's header and footer do differently from SBA's,
 * after the prototype's SbdHeader.tsx and SbdFooter.tsx. Loaded after
 * assets/css/header-footer.css, whose classes sites/sbd/header.php and
 * footer.php reuse; everything not named here is the same on both sites.
 */

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------ */

/* The wide wordmark: h-5, h-6 from 1024px. */
.sbd-header .sba-header-logo img {
	height: 20px;
}

@media (min-width: 1025px) {
	.sbd-header .sba-header-logo img {
		height: 24px;
	}

	/* `justify-between gap-4`: 16px between the row's parts; the Register
	   button sits 16px from the account icon, which the actions' 12px gap
	   and 4px of margin make up. */
	.sbd-header .sba-header-inner {
		gap: 16px;
	}

	.sbd-header .sba-header-actions .sbd-header-register {
		margin-left: 4px;
	}

	/* `lg:ml-auto lg:mr-4`: the navigation sits right, beside the actions,
	   not centered between logo and actions. */
	.sbd-header .sba-header-nav {
		justify-content: flex-end;
		margin-right: 16px;
	}

	/* The top-level items: `gap-1`, `px-2 py-2 text-sm` in the foreground
	   color, regular weight, and an accent background on hover instead of
	   SBA's red text; `xl:px-3 xl:text-base` from 1280px. */
	.sbd-header .sba-nav {
		gap: 4px;
	}

	.sbd-header .sba-nav > li > a {
		padding: 8px;
		border-radius: var(--sba-radius-md);
		color: var(--sba-charcoal);
		font-weight: 400;
		transition: background-color var(--sba-duration-hover) ease;
	}

	.sbd-header .sba-nav > li > a:hover,
	.sbd-header .sba-nav > li > a:focus,
	.sbd-header .sba-nav > li.is-open > a,
	.sbd-header .sba-nav > li:hover > a {
		background-color: var(--sba-accent);
		color: var(--sba-charcoal);
	}

	.sbd-header .sba-nav > li.current-menu-item > a,
	.sbd-header .sba-nav > li.current-menu-ancestor > a {
		color: var(--sba-charcoal);
	}

	/* The chevron turns while the dropdown is open. */
	.sbd-header .sba-nav > li:hover > a .sba-nav-chevron,
	.sbd-header .sba-nav > li.is-open > a .sba-nav-chevron {
		transform: rotate(180deg);
	}
}

@media (min-width: 1280px) {
	.sbd-header .sba-nav > li > a {
		padding: 8px 12px;
		font-size: 16px;
		line-height: 24px;
	}
}

/* Separators inside a longer dropdown (the menu item class
   sbd-nav-separator-after): `<hr class="my-2">` after the entry. */
.sbd-header .sba-nav-sub .sbd-nav-separator-after {
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sba-border);
}

/* The prototype's dropdown is at least 260px wide. */
.sbd-header .sba-nav-sub {
	min-width: 260px;
}

/* Register: the primary button, `px-4 py-2 text-sm font-medium` in red-dark,
   always "Register" while registration is closed. */
.sbd-header-register {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: var(--sba-radius-md);
	background-color: var(--sba-red-dark);
	color: var(--sba-red-contrast);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color var(--sba-duration-hover) ease;
}

.sbd-header a.sbd-header-register:hover,
.sbd-header a.sbd-header-register:focus {
	background-color: var(--sba-red-darker);
	color: var(--sba-red-contrast);
}

.sbd-header-register:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

/* The panel's own Register and Log in buttons exist below 1025px only. */
.sbd-header-register-panel,
.sbd-header-login-panel {
	display: none;
}

@media (max-width: 1024px) {
	/* In the row, only the toggle: account and Register move into the
	   panel, as in the prototype's drawer. */
	.sbd-header .sba-header-actions .sba-header-account,
	.sbd-header .sba-header-actions .sbd-header-register {
		display: none;
	}

	/* Register heads the panel: full width, `py-3`, `mb-2`. */
	.sbd-header .sbd-header-register-panel {
		display: flex;
		margin-bottom: 8px;
		padding: 12px 16px;
	}

	/* Log in closes it: `mt-4`, a bordered button with the user icon. */
	.sbd-header .sbd-header-login-panel {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: 16px;
		padding: 12px 16px;
		border: 1px solid var(--sba-border);
		border-radius: var(--sba-radius-md);
		color: var(--sba-charcoal);
		font-size: 14px;
		line-height: 20px;
		font-weight: 500;
		transition: background-color var(--sba-duration-hover) ease;
	}

	.sbd-header .sbd-header-login-panel:hover,
	.sbd-header .sbd-header-login-panel:focus {
		background-color: var(--sba-accent);
		color: var(--sba-charcoal);
	}

	.sbd-header .sbd-header-login-panel .sba-i {
		font-size: 16px;
	}

	/* `mb-2 border-b pb-2` under a separated entry. */
	.sbd-header .sba-nav-sub .sbd-nav-separator-after {
		margin-bottom: 8px;
		padding-bottom: 8px;
	}
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------ */

/* `grid md:grid-cols-2 lg:grid-cols-6 gap-8 lg:gap-10`: the brand column
   spans two, four link columns. */
@media (min-width: 1024px) {
	.sbd-footer .sba-footer-main > .sba-footer-inner {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 40px;
	}
}

/* The white logo at h-12. In the prototype the image sits on the text
   baseline of its link, which leaves 7px under it before the `mb-6`. */
.sbd-footer .sba-footer-brand img {
	height: 48px;
	max-width: 100%;
	margin-bottom: 31px;
}

/* The edition: dates bright and medium, the venue below in text-sm with a
   map pin. The description above keeps its mb-6. */
.sbd-footer .sba-footer-brand .sbd-footer-dates {
	max-width: none;
	margin-bottom: 0;
	color: var(--sba-footer-text-bright);
	font-weight: 500;
}

.sbd-footer .sba-footer-brand .sbd-footer-venue {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: none;
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 20px;
}

/* The bottom row's left group: the resources menu's links, the mail address
   and LinkedIn, one wrapping row `gap-x-6 gap-y-3`. The menu's list and
   items step aside so its links are items of that row. */
.sbd-footer .sba-footer-contact {
	gap: 12px 24px;
}

.sbd-footer .sbd-footer-resources,
.sbd-footer .sbd-footer-resources li {
	display: contents;
}

.sbd-footer .sba-footer-contact .sba-i {
	font-size: 16px;
}