/*
 * rm-mbre-newsletter-archive.css
 * The archive index (spotlight, filter, ledger) and the hub section (cards).
 *
 * SCOPE
 * Every rule is prefixed with a plugin class, so nothing on any other page is
 * affected. No bare h1-h6, p or a selectors anywhere: Avada's globals must keep
 * applying everywhere else.
 *
 * DESIGN SOURCE
 * Naples Archive Page Design, revision 2, approved 14 September 2026. Card and
 * toggle rules originate in MBRE_Newsletter_Hub_Archive_Section.html.
 *
 * TOKENS
 * The 13 token palette is defined by mbre-newsletter-front.css. Each var() here
 * carries the locked hex as a fallback, because that stylesheet is not loaded on
 * the archive page. No radius. No gold. No navy.
 */

/* ─────────────────────────────────────────────────────────────────── */
/* 1. PAGE                                                             */
/* ─────────────────────────────────────────────────────────────────── */

/* Full width of the content row. rm-nl-archive is on the hub as well as the
 * archive, so a narrower cap here narrowed every V1 section on the hub. See D53.
 * No side padding: on tablets and phones the whole newsletter column is padded
 * instead, in rm-mbre-newsletter-full-width.css, so blocks between sections line
 * up with the sections. See D56. */
.rm-nl-archive .nl-wrap { max-width: 100%; margin: 0 auto; padding: 0; }
.rm-nl-archive .nl-section { padding-bottom: 70px; }

/* The archive page's own heading, eyebrow and intro.
 *
 * These classes are styled by the newsletter stylesheet, which never loads on
 * the archive, so without this block they fall through to the theme's bare h1
 * and p rules. On the local stand in theme that produced a 60px heading; Avada
 * styles h1 just as heavily.
 *
 * Scoped to .mbre-archive-page, not to .rm-nl-archive, on purpose. The hub page
 * also carries .rm-nl-archive, and its own content styles .nl-h2 its own way.
 * Scoping wider would override the hub's headings everywhere on that page. */
/* No top padding: the intro card above already ends with its own margin (D64). */
.mbre-archive-page { padding-top: 0px; }

.mbre-archive-page .nl-eyebrow {
	font-size: 13px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--blue, #00A3E0);
	font-weight: 700;
	margin: 0 0 10px;
}

.mbre-archive-page .nl-h2 {
	font-size: 30px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink, #1c1c1c);
	margin: 0 0 14px;
}

/* The measure is counted in characters of the intro's own 17px type. Without
 * the font size here, ch followed Avada's 20px body and the intro ran 974px
 * wide at 1440px instead of the design's measure. See D58. */
.mbre-archive-page .nl-body { max-width: 74ch; font-size: 17px; }
.mbre-archive-page .nl-body p {
	font-size: 17px;
	line-height: 1.62;
	color: var(--ink, #1c1c1c);
	margin: 0;
}
.mbre-archive-page .nl-body a {
	color: var(--blue, #00A3E0);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 560px) {
	.mbre-archive-page .nl-h2 { font-size: 22px; }
}

/* TYPEFACE AND WEIGHT, AS REVISION 2 SETS THEM
 * On Avada the H1, the spotlight title and the year numbers took the theme's
 * heading face, Playfair Display, and every line of text the theme's 300 body
 * weight. The design sets Montserrat throughout, and 400 for text. Scoped to
 * the archive page, so the hub and the rest of the site keep Avada's type.
 * See D58. */
.mbre-archive-page {
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.mbre-archive-page .nl-h2,
.mbre-archive-page .mbre-lead-title,
.mbre-archive-page .mbre-lead-title a,
.mbre-archive-page .mbre-ledger-yr {
	font-family: Montserrat, Arial, Helvetica, sans-serif;
}

.mbre-archive-page .nl-body p,
.mbre-archive-page .nl-body a,
.mbre-archive-page .mbre-lead-note,
.mbre-archive-page .mbre-ledger-fact,
.mbre-archive-page .mbre-ledger-meta,
.mbre-archive-page .mbre-filter-count,
.mbre-archive-page .mbre-filter-option,
.mbre-archive-page .mbre-filter-summary,
.mbre-archive-page .mbre-archive-empty,
.mbre-archive-page .mbre-filter .mbre-filter-input,
.mbre-archive-page .mbre-filter .mbre-filter-control {
	font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 2. SPOTLIGHT                                                        */
/* The newest issue. Hidden while filtering, back when filters clear.    */
/* ─────────────────────────────────────────────────────────────────── */

.mbre-lead {
	display: flex;
	gap: 28px;
	align-items: stretch;
	margin: 26px 0 0;
	padding-top: 26px;
	border-top: 2px solid var(--black, #000000);
}

.mbre-lead-figure { flex: 0 0 44%; min-width: 0; margin: 0; }
.mbre-lead-figure img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 262px;
	object-fit: cover;
	display: block;
}

.mbre-lead-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mbre-lead-label {
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--blue, #00A3E0);
	font-weight: 700;
	margin: 0 0 10px;
}

.mbre-lead-title {
	font-size: 26px;
	line-height: 1.28;
	font-weight: 700;
	margin: 0 0 13px;
	color: var(--ink, #1c1c1c);
	text-transform: none;
	letter-spacing: normal;
}
.mbre-lead-title a { color: var(--ink, #1c1c1c); text-decoration: none; }
.mbre-lead-title a:hover { color: var(--blue-dk, #007fb0); }

.mbre-lead-note {
	font-size: 18px;
	line-height: 1.55;
	color: var(--muted, #5a5a5a);
	margin: 0 0 18px;
}

.mbre-lead-cta {
	align-self: flex-start;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--blue, #00A3E0);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 3. FILTER                                                           */
/* Labelled fields on a grid, then a result bar. Hidden until the script */
/* removes the hidden attribute, so a reader without JavaScript never    */
/* sees controls that would do nothing.                                  */
/* ─────────────────────────────────────────────────────────────────── */

.mbre-filter {
	background: var(--off, #f7f7f7);
	border-top: 3px solid var(--blue, #00A3E0);
	margin: 30px 0 0;
}
.mbre-filter[hidden] { display: none; }

.mbre-filter-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
	gap: 15px;
	padding: 22px 22px 8px;
}

.mbre-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }

.mbre-filter-label {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--faint, #8a8a8a);
	font-weight: 700;
}

/* Scoped under .mbre-filter so these outrank theme rules such as
 * input[type=search], which otherwise replace the 1px border with a heavy one. */
.mbre-filter .mbre-filter-input,
.mbre-filter .mbre-filter-control {
	width: 100%;
	min-height: 44px;
	padding: 11px 13px;
	font-size: 15px;
	line-height: 1.3;
	border: 1px solid var(--rule-md, #c8c8c8);
	background: #fff;
	color: var(--ink, #1c1c1c);
	box-sizing: border-box;
	font-family: inherit;
}
.mbre-filter-input::placeholder { color: var(--faint, #8a8a8a); }
.mbre-filter-input:focus-visible,
.mbre-filter-control:focus-visible { outline: 2px solid var(--blue, #00A3E0); outline-offset: 1px; }

.mbre-filter-facet { position: relative; }

.mbre-filter-control {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
}
.mbre-filter-control::-webkit-details-marker { display: none; }

.mbre-filter-summary {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--faint, #8a8a8a);
}
.mbre-filter-facet.is-active .mbre-filter-summary { color: var(--ink, #1c1c1c); }
.mbre-filter-facet.is-active .mbre-filter-control { border-color: var(--blue, #00A3E0); }

.mbre-filter-tally:empty { display: none; }
.mbre-filter-tally {
	background: var(--blue, #00A3E0);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 1px 7px;
}

.mbre-filter-caret::after {
	content: "+";
	color: var(--blue, #00A3E0);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}
/* U+2212 minus, not U+2013 en dash, which the compliance list bans. */
.mbre-filter-facet[open] .mbre-filter-caret::after { content: "\2212"; }

.mbre-filter-panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 3px);
	left: 0;
	min-width: 100%;
	width: 240px;
	max-height: 300px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--rule-md, #c8c8c8);
	padding: 9px 13px;
	box-sizing: border-box;
}

.mbre-filter-option {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	min-height: 36px;
	padding: 7px 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ink, #1c1c1c);
	cursor: pointer;
}
.mbre-filter-option input { margin-top: 3px; flex: none; accent-color: var(--blue, #00A3E0); }

.mbre-filter-results {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 22px;
	margin-top: 12px;
	border-top: 1px solid var(--rule, #e2e2e2);
}

.mbre-filter-count {
	margin: 0;
	font-size: 13px;
	color: var(--muted, #5a5a5a);
	font-variant-numeric: tabular-nums;
}
.mbre-filter-count b { color: var(--ink, #1c1c1c); }

/* A text link that happens to be a button.
 *
 * !important on purpose, and only on the properties themes restyle. Theme
 * button rules are built to win: the local stand in theme uses
 * .site button:not(:hover):not(:active):not(.has-background), which scores
 * higher than any sane class selector and painted this as a dark filled button.
 * Avada styles buttons just as hard. Escalating specificity to beat each theme
 * in turn is a race this control would lose on the next theme update. */
.mbre-filter .mbre-filter-clear {
	min-height: 44px;
	padding: 8px 4px !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	font-family: inherit;
	line-height: 1.3;
	color: var(--blue, #00A3E0) !important;
	text-decoration: underline !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-underline-offset: 3px;
	cursor: pointer;
}
.mbre-filter .mbre-filter-clear:hover { color: var(--blue-dk, #007fb0) !important; }
.mbre-filter-clear:focus-visible { outline: 2px solid var(--blue, #00A3E0); outline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────────── */
/* 4. LEDGER                                                           */
/* Each row leads with the fact. Years sit in the gutter as anchors.     */
/* ─────────────────────────────────────────────────────────────────── */

.mbre-ledger { margin-top: 8px; }

.mbre-ledger-year {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	padding: 26px 0 10px;
	border-top: 1px solid var(--rule, #e2e2e2);
}
.mbre-ledger-year[hidden] { display: none; }

/* The year, the month and the row's first line start on one line, so the three
   columns read as one row rather than three things at three heights.

   The numbers align the tops of the letters, not the boxes around them. Three
   sizes of Montserrat carry three different amounts of space above the cap
   inside their own line box, so boxes that start together still look a few
   pixels apart. Measured on the rendered page: 34px, 20px and 12px put their
   caps 9px, 5px and 3px below their line box, which is where 16 and 1 come
   from, on top of the first row's own 14px of padding. See D77. */
.mbre-ledger-mark {
	flex: 0 0 108px;
	padding-top: 16px;
}

.mbre-ledger-yr {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--ink, #1c1c1c);
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}

.mbre-ledger-count {
	display: block;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--faint, #8a8a8a);
	font-weight: 700;
	margin-top: 6px;
}

.mbre-ledger-list { flex: 1; min-width: 0; }

.mbre-ledger-row {
	display: flex;
	gap: 22px;
	/* Top, not baseline: on a baseline the month label sank below the label it
	   belongs to, and a row with a note sank further still. See D76. */
	align-items: flex-start;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule, #e2e2e2);
}
.mbre-ledger-row[hidden] { display: none; }
.mbre-ledger-list > .mbre-ledger-row:last-child { border-bottom: 0; }

.mbre-ledger-month {
	flex: 0 0 94px;
	/* 1px, so the month's cap meets the label's beside it. See D77. */
	padding-top: 1px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--faint, #8a8a8a);
	font-weight: 700;
}

.mbre-ledger-main { flex: 1; min-width: 0; }

.mbre-ledger-fact {
	font-size: 20px;
	line-height: 1.42;
	color: var(--ink, #1c1c1c);
	margin: 0 0 5px;
}
.mbre-ledger-fact em { font-style: normal; color: var(--blue, #00A3E0); font-weight: 700; }

/* The note under the label. It runs the full width of the row: the measure it
   had was removed on request. See D75. */
.mbre-ledger-note {
	font-size: 18px;
	line-height: 1.75;
	color: var(--muted, #5a5a5a);
	margin: 0 0 7px;
}
.mbre-ledger-note em { font-style: normal; color: var(--blue, #00A3E0); font-weight: 700; }

.mbre-ledger-meta { font-size: 13px; color: var(--muted, #5a5a5a); margin: 0; }
.mbre-ledger-place::after { content: " \00B7 "; color: var(--faint, #8a8a8a); }

/* The focus segment, first in the meta line and in the brand blue, so the row
   reads as topic, then places, then the link. */
.mbre-ledger-focus {
	color: var(--blue-dk, #007fb0);
	font-weight: 700;
}
.mbre-ledger-focus::after { content: " \00B7 "; color: var(--faint, #8a8a8a); font-weight: 400; }
.mbre-ledger-meta a {
	color: var(--blue, #00A3E0);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 5. CARDS, for the hub                                               */
/* 2 up rather than 3, because 4 cards across 3 columns strands one.    */
/* ─────────────────────────────────────────────────────────────────── */

.mbre-archive { margin-top: 26px; }
.mbre-archive-recent { margin-bottom: 34px; }
.mbre-archive-recent[hidden] { display: none; }
.mbre-archive-recent .nl-h3 { padding-bottom: 10px; margin-top: 0; }

.mbre-archive-grid { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }

/* min-width:0 and box-sizing are load bearing: without them a long label
   forces a full width column and the grid collapses to one across. */
.mbre-archive-card {
	flex: 1 1 calc(50% - 9px);
	max-width: calc(50% - 9px);
	min-width: 0;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--rule, #e2e2e2);
	border-top: 3px solid var(--blue, #00A3E0);
	display: flex;
	flex-direction: column;
}
.mbre-archive-card[hidden] { display: none; }

.mbre-archive-figure { margin: 0; }
.mbre-archive-figure img { width: 100%; max-width: 100%; height: 190px; object-fit: cover; display: block; }

.mbre-archive-body { padding: 16px 18px 18px; box-sizing: border-box; }

.mbre-archive-date {
	display: block;
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--faint, #8a8a8a);
	margin-bottom: 7px;
	font-weight: 700;
}

/* The focus segment above the label, when the issue has one. Same size as the
   date it sits under, in the brand blue rather than the faint grey. See D74. */
.mbre-archive-focus {
	display: block;
	font-size: 12px;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--blue-dk, #007fb0);
	margin-bottom: 6px;
}

.mbre-archive-link { font-size: 16px; font-weight: 700; line-height: 1.35; display: block; color: var(--blue, #00A3E0); }
.mbre-archive-note { font-size: 15px; line-height: 1.5; color: var(--muted, #5a5a5a); margin: 8px 0 0; }

/* Native details: ships its content in the HTML whether open or closed. */
.mbre-archive-year { border-bottom: 1px solid var(--rule, #e2e2e2); }
.mbre-archive-year[hidden] { display: none; }
.mbre-archive-year[open] { padding-bottom: 26px; }

.mbre-archive-toggle {
	cursor: pointer;
	list-style: none;
	min-height: 44px;
	padding: 16px 4px;
	display: flex;
	align-items: center;
	gap: 14px;
}
.mbre-archive-toggle::-webkit-details-marker { display: none; }
.mbre-archive-toggle::after {
	content: "+";
	margin-left: auto;
	font-size: 24px;
	line-height: 1;
	color: var(--blue, #00A3E0);
	font-weight: 700;
}
.mbre-archive-year[open] .mbre-archive-toggle::after { content: "\2212"; }

.mbre-archive-yr { font-size: 22px; font-weight: 700; color: var(--ink, #1c1c1c); }
.mbre-archive-count { font-size: 14px; color: var(--muted, #5a5a5a); }
.mbre-archive-more { margin-top: 30px; }

/* The archive heading on the hub. Its ids are the section's and the H2's own,
   the ones the hub's contents list links to, so this rule reaches that heading
   and no other. Asked for on 23 September. See D78. */
#newsletter-archive #archive {
	margin-bottom: 20px;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 6. EMPTY STATE                                                      */
/* ─────────────────────────────────────────────────────────────────── */

.mbre-archive-empty { padding: 34px 0; font-size: 16px; color: var(--muted, #5a5a5a); }
.mbre-archive-empty[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────── */
/* 7. BREAKPOINTS                                                      */
/* 1024 and 768 are the defaults. 560 is documented: it is where the     */
/* ledger gutter and a two up card grid stop fitting a phone.           */
/* ─────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.mbre-lead { gap: 22px; }
	.mbre-lead-title { font-size: 23px; }
}

@media (max-width: 768px) {
	.mbre-lead { flex-direction: column; gap: 16px; padding-top: 20px; }
	.mbre-lead-figure { flex: none; }
	.mbre-lead-figure img { min-height: 0; height: 220px; }

	.mbre-filter-fields { grid-template-columns: 1fr; gap: 12px; padding: 16px 16px 6px; }
	.mbre-filter-panel { position: static; width: auto; margin-top: 4px; }
	.mbre-filter-results { padding: 12px 16px; }
}

@media (max-width: 560px) {
	.mbre-lead { padding-top: 18px; }
	.mbre-lead-title { font-size: 19px; }
	.mbre-lead-note { font-size: 16px; }
	.mbre-lead-figure img { height: 170px; }

	/* The gutter goes inline: no horizontal space spent on a label. Nothing sits
	   beside the year here, so the nudge that lines it up with the first row on
	   a wider screen comes off. See D76. */
	.mbre-ledger-year { flex-direction: column; gap: 10px; padding: 20px 0 6px; }
	.mbre-ledger-mark { flex: none; display: flex; align-items: baseline; gap: 10px; padding-top: 0; }
	.mbre-ledger-yr { font-size: 24px; }
	.mbre-ledger-count { margin-top: 0; }
	.mbre-ledger-row { flex-direction: column; gap: 4px; padding: 12px 0; }
	.mbre-ledger-month { flex: none; padding-top: 0; }
	.mbre-ledger-fact { font-size: 17px; }

	.mbre-archive-card { flex: 1 1 100%; max-width: 100%; }
	.mbre-archive-figure img { height: 160px; }
	.mbre-archive-body { padding: 14px 15px 16px; }
	.mbre-archive-yr { font-size: 19px; }
}