/* Comfortside Trainings — Log in / Create account / Log out menu links.
   Loaded on every page (tiny): header menus show them as buttons, other menus as coloured links. */

/* Header menu: buttons sized to sit next to the theme's CONTACT button. */
header .menu-item.cs-tr-menu-login > a,
header .menu-item.cs-tr-menu-register > a,
header .menu-item.cs-tr-menu-logout > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 20px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Buttons sit close together and keep some air before the theme's CONTACT button. */
header .menu-item.cs-tr-menu-login + .menu-item.cs-tr-menu-register {
	margin-left: -34px;
}
header .menu-item.cs-tr-menu-register:last-child,
header .menu-item.cs-tr-menu-logout:last-child {
	margin-right: 20px;
}
header .menu-item.cs-tr-menu-calendar > a,
header .menu-item.cs-tr-menu-request > a,
header .menu-item.cs-tr-menu-dashboard > a {
	white-space: nowrap;
}

/* No "current page" underline on buttons. */
header .menu-item.cs-tr-menu-login > a::after,
header .menu-item.cs-tr-menu-register > a::after,
header .menu-item.cs-tr-menu-logout > a::after {
	display: none !important;
}

/* Log in: outlined teal. */
header .menu-item.cs-tr-menu-login > a {
	background: #fff;
	border-color: #2bc3d0;
	color: #1b9ba6 !important;
}
header .menu-item.cs-tr-menu-login > a:hover,
header .menu-item.cs-tr-menu-login > a:focus-visible {
	background: #2bc3d0;
	color: #fff !important;
}

/* Create account: solid navy. */
header .menu-item.cs-tr-menu-register > a {
	background: #3a4a5c;
	border-color: #3a4a5c;
	color: #fff !important;
}
header .menu-item.cs-tr-menu-register > a:hover,
header .menu-item.cs-tr-menu-register > a:focus-visible {
	background: #2bc3d0;
	border-color: #2bc3d0;
}

/* Log out: red. */
header .menu-item.cs-tr-menu-logout > a {
	background: #d63638;
	border-color: #d63638;
	color: #fff !important;
}
header .menu-item.cs-tr-menu-logout > a:hover,
header .menu-item.cs-tr-menu-logout > a:focus-visible {
	background: #a8282a;
	border-color: #a8282a;
}

/* Mobile and footer menus: keep the list layout, colour the links. */
.menu-item.cs-tr-menu-login > a,
.menu-item.cs-tr-menu-register > a {
	font-weight: 600;
}
.menu-item.cs-tr-menu-logout > a {
	color: #d63638 !important;
	font-weight: 600;
	white-space: nowrap;
}
header .menu-item.cs-tr-menu-logout > a {
	color: #fff !important;
}

/* Medium screens: the extra buttons need the header menu to be tighter. */
@media (max-width: 1400px) {
	header ul:has(> .cs-tr-menu-login, > .cs-tr-menu-logout) {
		gap: 26px !important;
	}
	header .menu-item.cs-tr-menu-login + .menu-item.cs-tr-menu-register {
		margin-left: -16px;
	}
}
@media (max-width: 1200px) {
	header ul:has(> .cs-tr-menu-login, > .cs-tr-menu-logout) {
		gap: 18px !important;
	}
	header .menu-item.cs-tr-menu-login + .menu-item.cs-tr-menu-register {
		margin-left: -8px;
	}
	header .menu-item.cs-tr-menu-login > a,
	header .menu-item.cs-tr-menu-register > a,
	header .menu-item.cs-tr-menu-logout > a {
		height: 38px;
		padding: 0 14px;
	}
	header .menu-item.cs-tr-menu-calendar > a,
	header .menu-item.cs-tr-menu-request > a,
	header .menu-item.cs-tr-menu-dashboard > a {
		white-space: normal;
	}
}
@media (max-width: 1100px) {
	header ul:has(> .cs-tr-menu-login, > .cs-tr-menu-logout) {
		gap: 14px !important;
	}
	header .menu-item.cs-tr-menu-login + .menu-item.cs-tr-menu-register {
		margin-left: -6px;
	}
	header .menu-item.cs-tr-menu-register:last-child,
	header .menu-item.cs-tr-menu-logout:last-child {
		margin-right: 12px;
	}
	header .menu-item.cs-tr-menu-login > a,
	header .menu-item.cs-tr-menu-register > a,
	header .menu-item.cs-tr-menu-logout > a {
		height: 34px;
		padding: 0 10px;
		font-size: 12px !important;
	}
}
/* Tablets: no room for both buttons — keep "Log in" (its page links to sign-up). */
@media (max-width: 1100px) {
	header .menu-item.cs-tr-menu-register:has(~ .cs-tr-menu-login),
	header .menu-item.cs-tr-menu-login ~ .menu-item.cs-tr-menu-register {
		display: none;
	}
	header .menu-item.cs-tr-menu-login:nth-last-child(2) {
		margin-right: 12px;
	}
}