/* Member Area page template: nav rail beside the page content.
   Enqueued by IMC_Member_Area, only on pages using page_member-area.php. */

.imc-member-area {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.imc-member-area .entry-content {
	flex: 1 1 auto;
	min-width: 0; /* let wide tables shrink instead of overflowing the flex row */
	margin: 0;
}

.imc-member-area-nav {
	flex: 0 0 22%;
	box-sizing: border-box;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 8px 20px;
}

.imc-member-area-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.imc-member-area-nav__list li {
	display: block;
	margin: 0;
	list-style-type: none;
	border-top: 1px solid #f0f0f0;
}

.imc-member-area-nav__list li:first-child {
	border-top: 0;
}

.imc-member-area-nav__list a {
	display: block;
	padding: 11px 0;
	line-height: 1.3;
}

.imc-member-area-nav__list a:hover {
	text-decoration: none;
	opacity: 0.7;
}

/* WordPress marks the item matching the current URL. */
.imc-member-area-nav__list .current-menu-item > a,
.imc-member-area-nav__list .current-menu-ancestor > a {
	font-weight: 700;
}

/* Sub-items indent under their parent. */
.imc-member-area-nav__list .sub-menu {
	margin: 0 0 8px 12px;
	padding: 0;
	list-style: none;
}

.imc-member-area-nav__list .sub-menu li {
	border-top: 0;
}

.imc-member-area-nav__list .sub-menu a {
	padding: 6px 0;
	font-size: 16px;
}

@media (max-width: 768px) {
	.imc-member-area {
		display: block;
	}

	/* The stacked rail would push the page content a full screen down, so on narrow
	   screens the items become a wrapping row of pills: everything stays visible and
	   tappable, in roughly half the height. */
	.imc-member-area-nav {
		width: 100%;
		margin-bottom: 24px;
		border: 0;
		padding: 0;
	}

	.imc-member-area-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	/* Flatten the nesting so sub-items wrap in the same row as their parents. */
	.imc-member-area-nav__list li,
	.imc-member-area-nav__list .sub-menu {
		display: contents;
	}

	.imc-member-area-nav__list a,
	.imc-member-area-nav__list .sub-menu a {
		border: 1px solid #ddd;
		border-radius: 999px;
		padding: 8px 11px;
		font-size: 14px;
		line-height: 1.2;
	}

	.imc-member-area-nav__list .current-menu-item > a,
	.imc-member-area-nav__list .current-menu-ancestor > a {
		border-color: #4c2f8d;
		background-color: #4c2f8d;
		color: #fff;
	}
}

/* Message for logged-out visitors, shown in place of the content on pages that opt in. */

/* Keeps the rail's width so the message lines up with member content, without the box. */
.imc-member-area-nav--placeholder {
	border: 0;
	padding: 0;
}

.imc-member-area-guest__login {
	margin-top: 24px;
}

@media (max-width: 768px) {
	.imc-member-area-nav--placeholder {
		display: none;
	}
}

/* Container width
   ---------------------------------------------------------------------------
   .site-inner already matches .wrap, so the container needs no help. What made
   this template look narrow is the theme padding the full-width-content layout
   by 200px a side (110px under 1200px wide) — sized for a single prose column,
   which is not what this layout is. Drop the horizontal half so the rail and
   content span the container, exactly as the theme exempts its own front page
   with .full-width-content.front-page .content.

   Longhand on purpose: the theme varies the bottom padding by breakpoint (50px,
   then 0 below 1023px) and only the horizontal half is the problem here. */

.full-width-content.page-template-page_member-area .content {
	padding-left: 0;
	padding-right: 0;
}