/**
 * HMT Client Portal - layout only.
 *
 * There is deliberately no colour, background, border-colour, font-family or
 * font-size here. The visual layer lives in the child theme
 * (Avada-Child-Theme/css/client-portal.css), loaded on the
 * hmt_client_portal_enqueue hook. Keep it that way, so the portal's structure
 * and its look can change independently.
 */

/* The portal spans the viewport and sets its own gutters, so Avada's column
   padding does not stack on top of them on phones. The page wrapper clips
   horizontal overflow, so 100vw cannot cause a sideways scroll. */
.hmt-portal {
	--hmt-portal-width: 1140px;
	--hmt-portal-gutter: 20px;
	--hmt-portal-side: 300px;
	--hmt-portal-gap: 28px;

	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.hmt-portal p,
.hmt-portal h1,
.hmt-portal h2,
.hmt-portal h3 {
	margin: 0;
}

.hmt-portal ul,
.hmt-portal ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hmt-portal__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--hmt-portal-width) + 2 * var(--hmt-portal-gutter));
	margin-inline: auto;
	padding-inline: var(--hmt-portal-gutter);
}

.hmt-portal__band {
	box-sizing: border-box;
	width: 100%;
}

.hmt-portal__icon {
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------ login --- */

.hmt-portal__band--login {
	padding-block: clamp(40px, 7vw, 84px);
}

.hmt-portal__login-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}

.hmt-portal__login-copy {
	display: grid;
	gap: 18px;
}

.hmt-portal .hmt-portal__inside {
	display: grid;
	gap: 14px;
	margin-top: 10px;
}

.hmt-portal__inside-item {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 14px;
	align-items: center;
	margin: 0;
}

.hmt-portal__inside-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.hmt-portal__inside-text {
	display: grid;
}

.hmt-portal__card {
	box-sizing: border-box;
	min-width: 0;
}

.hmt-portal__login-card {
	display: grid;
	gap: 18px;
	padding: clamp(24px, 4vw, 36px);
}

.hmt-portal__error {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
}

.hmt-portal__form {
	display: grid;
	gap: 16px;
	margin: 0;
}

.hmt-portal__field {
	display: grid;
	gap: 6px;
}

.hmt-portal__field input[type="text"],
.hmt-portal__field input[type="email"],
.hmt-portal__field input[type="password"] {
	box-sizing: border-box;
	width: 100%;
}

.hmt-portal__field--inline {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hmt-portal__field--inline input {
	width: auto;
	margin: 0;
}

.hmt-portal__submit .fusion-button,
.hmt-portal__help-button.fusion-button {
	box-sizing: border-box;
	width: 100%;
	justify-content: center;
	text-align: center;
}

.hmt-portal__help {
	padding-top: 16px;
	text-align: center;
}

/* ------------------------------------------------------------------- hero --- */

.hmt-portal__band--hero {
	padding-block: clamp(32px, 5vw, 56px) clamp(56px, 7vw, 88px);
}

.hmt-portal__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px 40px;
	align-items: end;
}

.hmt-portal__hero-text {
	display: grid;
	gap: 12px;
}

.hmt-portal__dates {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hmt-portal__countdown {
	display: grid;
	justify-items: center;
	gap: 2px;
	min-width: 168px;
	padding: 18px 22px;
	text-align: center;
}

/* ------------------------------------------------------------------- body --- */

.hmt-portal__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--hmt-portal-side);
	gap: var(--hmt-portal-gap);
	align-items: start;
	position: relative;
	margin-top: -28px;
	padding-bottom: 72px;
}

.hmt-portal__main {
	display: grid;
	gap: var(--hmt-portal-gap);
	min-width: 0;
}

.hmt-portal__side {
	display: grid;
	gap: 20px;
	position: sticky;
	top: 120px;
}

.hmt-portal__note {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 18px;
	padding: clamp(22px, 3.5vw, 32px);
}

.hmt-portal__note-mark {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
}

.hmt-portal__note-body {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.hmt-portal__welcome {
	display: grid;
	gap: 12px;
}

.hmt-portal__section {
	display: grid;
	gap: 18px;
	padding: clamp(22px, 3.5vw, 32px);
}

.hmt-portal__section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
}

.hmt-portal__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.hmt-portal__link-item {
	display: flex;
	margin: 0;
}

.hmt-portal__link {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	width: 100%;
	padding: 14px 16px;
	text-decoration: none;
}

.hmt-portal__link-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
}

.hmt-portal__link-text {
	display: grid;
	min-width: 0;
}

.hmt-portal__link-text strong {
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- sidebar --- */

.hmt-portal__side-card {
	display: grid;
	gap: 14px;
	padding: 22px;
}

.hmt-portal__switcher-group {
	display: grid;
	gap: 8px;
}

.hmt-portal__switcher-group + .hmt-portal__switcher-group {
	padding-top: 12px;
}

.hmt-portal__switcher-list {
	display: grid;
	gap: 6px;
}

.hmt-portal__switcher-item {
	margin: 0;
}

.hmt-portal__switcher-link {
	display: grid;
	gap: 1px;
	padding: 10px 12px;
	text-decoration: none;
}

.hmt-portal__logout a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px;
	text-decoration: none;
}

/* ------------------------------------------------------------------ empty --- */

.hmt-portal__empty-card {
	display: grid;
	justify-items: center;
	gap: 14px;
	padding: clamp(28px, 5vw, 48px);
	text-align: center;
}

.hmt-portal__empty-badge {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
}

.hmt-portal__empty-badge .hmt-portal__icon {
	width: 34px;
	height: 34px;
}

.hmt-portal .hmt-portal__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	margin-top: 10px;
	text-align: left;
}

.hmt-portal__step {
	display: grid;
	align-content: start;
	gap: 6px;
	margin: 0;
	padding: 16px;
}

.hmt-portal__step-number {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.hmt-portal__step-number .hmt-portal__icon {
	width: 16px;
	height: 16px;
	stroke-width: 3;
}

/* ------------------------------------------------------------------ staff --- */

.hmt-portal--staff {
	padding-block: 48px;
}

.hmt-portal__staff-card {
	display: grid;
	gap: 12px;
	max-width: 640px;
	margin-inline: auto;
	padding: 28px;
}

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 980px) {
	.hmt-portal__body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Lift the sidebar's cards into the page grid so the trip list, which is
	   navigation, can sit above the documents. */
	.hmt-portal__side {
		display: contents;
	}

	.hmt-portal__switcher {
		order: -1;
	}
}

@media (max-width: 820px) {
	.hmt-portal__login-grid,
	.hmt-portal__hero-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hmt-portal__hero-grid {
		align-items: start;
	}

	.hmt-portal__countdown {
		justify-self: start;
		grid-auto-flow: column;
		align-items: baseline;
		gap: 10px;
		min-width: 0;
		padding: 12px 16px;
	}
}

@media (max-width: 640px) {
	.hmt-portal__links,
	.hmt-portal .hmt-portal__steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.hmt-portal__note {
		grid-template-columns: minmax(0, 1fr);
	}

	.hmt-portal__note-mark {
		width: 44px;
		height: 44px;
	}
}