/*
 * rm-mbre-newsletter-full-width.css
 * Newsletter issues, the hub and the archive page are full width pages with no
 * sidebar (D49, D57), padded at the sides on tablets and phones only (D56).
 *
 * The body loses Avada's sidebar classes on these pages (rm-mbre-newsletter-v1.php),
 * which stops Avada narrowing the content. These rules catch the rest: any sidebar
 * element Avada still prints, whichever of its ids or classes it carries, and any
 * width a layout setting puts on the content column.
 *
 * WHY !important
 * Avada's sidebar and content widths come from its own stylesheet and from inline
 * styles it writes on the content column. A plain rule cannot beat an inline style.
 *
 * SCOPE
 * Every rule sits under mbre-nl-full-width, a body class only these pages carry.
 * No bare h1 to h6, p or a.
 */

.mbre-nl-full-width #main #sidebar,
.mbre-nl-full-width #main #sidebar-2,
.mbre-nl-full-width #main .fusion-sidebar,
.mbre-nl-full-width #main .fusion-widget-area.fusion-content-widget-area,
.mbre-nl-full-width #main aside.sidebar {
	display: none !important;
}

/* Avada's page title bar. The page shell already cuts it from the header (D50);
 * this only covers a header that was flushed before the shell could. */
.mbre-nl-full-width .fusion-tb-page-title-bar,
.mbre-nl-full-width .avada-page-titlebar-wrapper {
	display: none !important;
}

.mbre-nl-full-width #main #content {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Side padding on tablets and phones only, on the whole newsletter column
 * rather than on .nl-wrap. Custom HTML blocks such as the Matt commentary sit
 * between sections, outside any .nl-wrap, so padding only the wrap left their
 * border and text 24px left of the section text above them. Desktop has none.
 * See D56.
 *
 * 24px IN TOTAL. Avada pads #main as well: 30px at the sides, and 10px below
 * 480px with !important (measured on the live archive, 17 September). On top of
 * the column's 24px that put content 54px from the edge on a tablet and 34px on
 * a phone. So on these pages #main gives up its side padding at 768px and below,
 * the column keeps its 24px, and the AIO card, which sits above the column,
 * takes the same 24px as margins so it lines up. See D59. */
@media (max-width: 768px) {
	.mbre-nl-full-width #main {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.mbre-nl-full-width .mbre-nl-sections {
		padding-left: 24px;
		padding-right: 24px;
	}

	.mbre-nl-full-width .mbre-aio-card {
		margin-left: 24px;
		margin-right: 24px;
	}
}