/**
 * Mauritius Finance — news archive presentation.
 *
 * Loaded on the post-related archives only (category, tag, author, date and
 * the posts index). Replaces the theme's flat grey archive header with the
 * navy hero used across the site, and turns the loop entries into the same
 * card the Team and Technical Committees sections use.
 *
 * Markup is untouched — this restyles what Kadence already outputs, so
 * deactivating the plugin restores the stock archive exactly.
 */

body.archive,
body.blog {
	--mfa-navy:  #001030;
	--mfa-navy2: #0a1c44;
	--mfa-gold:  #f0b000;
	--mfa-ink:   #1d2534;
	--mfa-muted: #5a6478;
	--mfa-line:  #e6eaf1;
	--mfa-light: #f4f7fb;
}

/* ---------- Hero ---------- */

body.archive .entry-hero-container-inner,
body.blog .entry-hero-container-inner {
	background: linear-gradient(135deg, #001030 0%, #0a1c44 58%, #12305f 100%) !important;
}
body.archive .hero-section-overlay,
body.blog .hero-section-overlay { background: none !important; }

body.archive .hero-container,
body.blog .hero-container {
	max-width: 1180px;
	padding: 64px 24px 60px !important;
}

/* The theme lays the header out as a centred flex column. */
body.archive .entry-hero .entry-header,
body.blog .entry-hero .entry-header {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left !important;
}

body.archive .entry-hero .entry-header::before,
body.blog .entry-hero .entry-header::before {
	content: "Mauritius Finance";
	display: block;
	margin-bottom: 12px;
	color: var(--mfa-gold);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
}

body.archive h1.page-title,
body.blog h1.page-title {
	margin: 0 !important;
	color: #fff !important;
	text-align: left !important;
	font-size: clamp(2rem, 3.4vw, 2.8rem) !important;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: none !important;
}
body.archive h1.page-title::after,
body.blog h1.page-title::after {
	content: "";
	display: block;
	width: 96px;
	height: 3px;
	margin: 22px 0 0;
	border-radius: 3px;
	background: var(--mfa-gold);
}

/* Category archives get a strapline; author and date archives don't, since
   a generic news line would read oddly there. */
body.category .entry-hero .entry-header::after {
	content: "News, updates and insight from Mauritius Finance and its Members.";
	display: block;
	margin-top: 18px;
	max-width: 640px;
	color: #dbe5f2;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Page ground ---------- */

/* The theme leaves a gap between the hero and the content area that shows
   the body colour, so the gradient goes on the wrapper rather than on
   .content-area, and the body is painted white beneath it. */
body.archive,
body.blog { background: #ffffff !important; }

body.archive main.wrap,
body.blog main.wrap {
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 22%, #f7fafd 100%);
}
body.archive .content-area,
body.blog .content-area { background: none !important; }

body.archive .content-container,
body.blog .content-container {
	padding-top: 16px;
	padding-bottom: 76px;
}

/* ---------- Cards ---------- */

body.archive #archive-container,
body.blog #archive-container { gap: 28px !important; }

body.archive .loop-entry,
body.blog .loop-entry {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff !important;
	border: 1px solid var(--mfa-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 16, 48, .06);
	transition: transform .22s ease, box-shadow .22s ease;
}
body.archive .loop-entry:hover,
body.blog .loop-entry:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 38px rgba(0, 16, 48, .13);
}

/* Kadence's 2:3 thumbnail ratio is far too tall for a card grid. */
body.archive .loop-entry .post-thumbnail,
body.blog .loop-entry .post-thumbnail {
	padding-bottom: 62% !important;
	border-radius: 0;
	overflow: hidden;
}
body.archive .loop-entry .post-thumbnail img,
body.blog .loop-entry .post-thumbnail img { transition: transform .5s ease; }
body.archive .loop-entry:hover .post-thumbnail img,
body.blog .loop-entry:hover .post-thumbnail img { transform: scale(1.045); }

body.archive .loop-entry .entry-content-wrap,
body.blog .loop-entry .entry-content-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 22px 24px !important;
	border-top: 3px solid var(--mfa-gold);
}

body.archive .loop-entry .entry-taxonomies a,
body.blog .loop-entry .entry-taxonomies a {
	color: #c08000 !important;
	font-size: .7rem !important;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
}
body.archive .loop-entry .entry-taxonomies a:hover,
body.blog .loop-entry .entry-taxonomies a:hover { color: var(--mfa-navy) !important; }

body.archive .loop-entry h2.entry-title,
body.blog .loop-entry h2.entry-title {
	margin: 10px 0 0 !important;
	font-size: 20px !important;
	line-height: 1.32 !important;
	letter-spacing: -.01em;
}
body.archive .loop-entry h2.entry-title a,
body.blog .loop-entry h2.entry-title a {
	color: var(--mfa-navy) !important;
	text-decoration: none;
}
body.archive .loop-entry h2.entry-title a:hover,
body.blog .loop-entry h2.entry-title a:hover { color: var(--mfa-navy2) !important; }

/* Posts are published from a shared admin account, so the byline is noise. */
body.archive .loop-entry .posted-by,
body.blog .loop-entry .posted-by { display: none !important; }

body.archive .loop-entry .entry-meta,
body.blog .loop-entry .entry-meta {
	margin-top: 10px !important;
	color: var(--mfa-muted) !important;
	font-size: .78rem !important;
	letter-spacing: .04em;
}
body.archive .loop-entry .entry-meta *,
body.blog .loop-entry .entry-meta * { color: var(--mfa-muted) !important; }

body.archive .loop-entry .entry-summary,
body.blog .loop-entry .entry-summary {
	flex: 1;
	margin-top: 14px;
	color: #3b465a;
	font-size: 15px;
	line-height: 1.7;
}

body.archive .loop-entry .entry-footer,
body.blog .loop-entry .entry-footer {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--mfa-line);
}
body.archive .loop-entry .post-more-link,
body.blog .loop-entry .post-more-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mfa-navy2) !important;
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
}
body.archive .loop-entry .post-more-link::after,
body.blog .loop-entry .post-more-link::after {
	content: "\2192";
	transition: transform .18s ease;
}
body.archive .loop-entry .post-more-link:hover,
body.blog .loop-entry .post-more-link:hover { color: var(--mfa-gold) !important; }
body.archive .loop-entry .post-more-link:hover::after,
body.blog .loop-entry .post-more-link:hover::after { transform: translateX(3px); }

/* ---------- Pagination ---------- */

body.archive .pagination .page-numbers,
body.blog .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--mfa-line);
	border-radius: 10px;
	background: #fff;
	color: var(--mfa-navy2);
	font-weight: 700;
	text-decoration: none;
}
body.archive .pagination .page-numbers:hover,
body.blog .pagination .page-numbers:hover { border-color: var(--mfa-gold); }
body.archive .pagination .page-numbers.current,
body.blog .pagination .page-numbers.current {
	background: var(--mfa-navy);
	border-color: var(--mfa-navy);
	color: #fff;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
	body.archive .hero-container,
	body.blog .hero-container { padding: 44px 24px 42px !important; }
	body.archive .content-container,
	body.blog .content-container { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	body.archive .loop-entry,
	body.archive .loop-entry .post-thumbnail img,
	body.blog .loop-entry,
	body.blog .loop-entry .post-thumbnail img { transition: none; }
	body.archive .loop-entry:hover,
	body.blog .loop-entry:hover { transform: none; }
	body.archive .loop-entry:hover .post-thumbnail img,
	body.blog .loop-entry:hover .post-thumbnail img { transform: none; }
}