/* ==========================================================================
   NFCR blog article (0.9.21)   templates/single-post.php, [nfcr_article_points],
   [nfcr_quote layout="article"], [nfcr_term]
   Design: "Blog: Article".
   ========================================================================== */

.nfcr-art { font-family: var(--nfcr-font); }

/* ---- Frame: 1120px column inside the page gutters ---- */
.nfcr-art__wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--nfcr-article-w) + 2 * var(--nfcr-gutter));
	margin: 0 auto;
	padding-left: var(--nfcr-gutter);
	padding-right: var(--nfcr-gutter);
}

/* ---- Reading progress (top edge) and sticky bar ---- */
.nfcr-art-progress {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 120;
	height: 4px;
	pointer-events: none;
}
.nfcr-art-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--nfcr-accent);
	transform-origin: 0 50%;
	transform: scaleX(0);
}

.nfcr-art-mini {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 110;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 18px rgba(2, 20, 60, .1);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-100%);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nfcr-art-mini.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nfcr-art-mini__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	max-width: var(--nfcr-page-max);
	margin: 0 auto;
	padding: 10px var(--nfcr-gutter);
}
.nfcr-art-mini__trail { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nfcr-art-mini__title {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--nfcr-fs-ui);
	font-weight: 600;
	color: var(--nfcr-navy);
}
.nfcr-art-mini__donate { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
	.nfcr-art-mini { transition: none; }
}

/* ---- Back link, dot separator, topic ---- */
.nfcr-art .nfcr-art-back,
.nfcr-art-mini .nfcr-art-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-size: var(--nfcr-fs-small);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--nfcr-text-2) !important;
	text-decoration: none !important;
}
.nfcr-art .nfcr-art-back:hover,
.nfcr-art-mini .nfcr-art-back:hover { color: var(--nfcr-navy) !important; }
.nfcr-art-sep {
	flex-shrink: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--nfcr-line-soft);
}

.nfcr-art__head { padding-top: calc(var(--nfcr-section-gap) + 8px); }
.nfcr-art__trail { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0 0 26px; }
.nfcr-art .nfcr-art__topic {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--nfcr-fs-small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--nfcr-navy);
}
.nfcr-art .nfcr-art__topic::before {
	content: "";
	flex-shrink: 0;
	width: var(--nfcr-dot);
	height: var(--nfcr-dot);
	border-radius: 50%;
	background: var(--nfcr-accent);
}

/* Title (Section Header, size XL, one colour) and the intro line */
.nfcr-art .nfcr-art__titlebox .nfcr-sh__title { max-width: 920px; text-wrap: pretty; }
.nfcr-art .nfcr-art__titlebox .nfcr-sh__intro { margin-top: 20px; max-width: 760px; }

/* ---- Wide photo ---- */
.nfcr-art__hero-wrap { padding-top: 36px; }
.nfcr-art .nfcr-art__hero {
	position: relative;
	height: 380px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--nfcr-r-section);
	background: var(--nfcr-navy);
}
.nfcr-art .nfcr-art__hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.nfcr-art .nfcr-art__caption {
	position: absolute;
	left: 20px;
	bottom: 20px;
	max-width: calc(100% - 40px);
	padding: 7px 16px;
	border-radius: var(--nfcr-r-chip);
	background: color-mix(in srgb, var(--nfcr-navy) 85%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: var(--nfcr-fs-label);
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
}

/* Sticky side column: Goodwish's page wrappers can clip overflow, which switches position: sticky off.
   "clip" hides sideways overflow without making the wrapper a scroll container. */
body.nfcr-article-page .edgtf-wrapper,
body.nfcr-article-page .edgtf-wrapper-inner,
body.nfcr-article-page .edgtf-content,
body.nfcr-article-page .edgtf-content-inner,
body.nfcr-article-page .edgtf-full-width,
body.nfcr-article-page .edgtf-full-width-inner {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* ---- Side column + text ---- */
.nfcr-art__zone { padding-top: calc(var(--nfcr-section-gap) - 8px); }
.nfcr-art__grid {
	position: relative;
	display: grid;
	grid-template-columns: var(--nfcr-article-rail) minmax(0, 1fr);
	gap: var(--nfcr-article-gap);
	align-items: start;
}

.nfcr-art__rail { display: flex; flex-direction: column; gap: 16px; }
/* Fixed places, so the text keeps its column when the side column is lifted out to follow the scroll */
@media (min-width: 1025px) {
	.nfcr-art__rail { grid-column: 1; grid-row: 1; }
	.nfcr-art__text { grid-column: 2; grid-row: 1; }
}
/* Desktop: the column is kept in view by assets/js/article.js (position: fixed with a hand-over at the end of the text; CSS sticky is switched off by some theme wrappers). */

.nfcr-art__card {
	box-sizing: border-box;
	background: var(--nfcr-white);
	border-radius: var(--nfcr-r-card);
	box-shadow: var(--nfcr-shadow);
}
.nfcr-art__card--author,
.nfcr-art__toc { padding: 24px 26px; }

.nfcr-art__who { display: flex; align-items: center; gap: 14px; }
.nfcr-art__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--nfcr-navy);
	font-size: var(--nfcr-fs-ui);
	font-weight: 700;
	color: #fff;
}
.nfcr-art .nfcr-art__author { margin: 0; font-size: var(--nfcr-fs-ui); font-weight: 600; line-height: 1.4; color: var(--nfcr-navy); }
.nfcr-art .nfcr-art__role { margin: 0; font-size: var(--nfcr-fs-label); font-weight: 500; line-height: 1.4; color: var(--nfcr-text-2); }

.nfcr-art .nfcr-art__meta {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--nfcr-track);
	font-size: var(--nfcr-fs-meta);
	font-weight: 500;
	line-height: 1.4;
	color: var(--nfcr-text-2);
}

.nfcr-art__share { position: relative; display: flex; gap: 8px; margin-top: 16px; }
.nfcr-art .nfcr-art__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--nfcr-surface);
	color: var(--nfcr-navy);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.nfcr-art .nfcr-art__copy:hover { background: var(--nfcr-navy); color: #fff; }
.nfcr-art .nfcr-art__copied {
	position: absolute;
	left: 19px;
	bottom: 46px;
	z-index: 60;
	padding: 5px 11px;
	border-radius: 8px;
	background: var(--nfcr-navy);
	font-size: var(--nfcr-fs-label);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	color: #fff;
	transform: translateX(-50%);
}
.nfcr-art .nfcr-art__copied:empty { display: none; }

/* In this article */
.nfcr-art .nfcr-art__toc-title {
	margin: 0 0 14px;
	font-size: var(--nfcr-fs-label);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--nfcr-text-2);
}
.nfcr-art .nfcr-art__toc-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nfcr-art .nfcr-art__toc-list li { margin: 0; padding: 0; list-style: none; }
.nfcr-art .nfcr-art__toc-list a {
	display: block;
	margin: 0 -12px;
	padding: 8px 12px;
	border-radius: var(--nfcr-r-callout);
	font-size: var(--nfcr-fs-small);
	font-weight: 500;
	line-height: 1.4;
	color: var(--nfcr-text-nav) !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.nfcr-art .nfcr-art__toc-list a:hover { background: var(--nfcr-surface); color: var(--nfcr-navy) !important; }
.nfcr-art .nfcr-art__toc-list a[aria-current="true"] {
	background: var(--nfcr-surface);
	font-weight: 600;
	color: var(--nfcr-navy) !important;
	box-shadow: inset 3px 0 0 var(--nfcr-accent);
}

/* 73% card */
.nfcr-art .nfcr-art__stat { padding: 26px; border-radius: var(--nfcr-r-card); background: var(--nfcr-navy); }
.nfcr-art .nfcr-art__stat-num { margin: 0; font-size: var(--nfcr-fs-figure); font-weight: 700; letter-spacing: -1px; line-height: 1.2; color: #fff; }
.nfcr-art .nfcr-art__stat-text { margin: 6px 0 16px; font-size: var(--nfcr-fs-small); line-height: 1.55; color: var(--nfcr-on-dark-soft); }
.nfcr-art .nfcr-art__stat-btn { display: flex; width: 100%; }

/* ---- The text card ---- */
.nfcr-art .nfcr-art__text { padding: 52px 60px 56px; border-radius: var(--nfcr-r-section); }

.nfcr-art__body { font-family: var(--nfcr-font); font-size: var(--nfcr-fs-body); line-height: 1.8; color: var(--nfcr-text-2); }

/* WPBakery rows inside the article: no page width, no gutters, no extra space */
.nfcr-art__body .vc_row,
.nfcr-art__body .wpb_row { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0; padding-left: 0 !important; padding-right: 0 !important; }
.nfcr-art__body .vc_row[data-vc-full-width] { left: 0 !important; width: auto !important; }
.nfcr-art__body .wpb_column,
.nfcr-art__body .vc_column_container > .vc_column-inner { padding: 0 !important; }
.nfcr-art__body .wpb_content_element,
.nfcr-art__body .wpb_text_column { margin-bottom: 0; }
.nfcr-art__body .wpb_text_column > .wpb_wrapper > :last-child { margin-bottom: 0; }
.nfcr-art__body .wpb_wrapper > p:empty,
.nfcr-art__body .wpb_wrapper > br { display: none; }

/* Text */
.nfcr-art__body p { margin: 18px 0 0; font-size: inherit; line-height: inherit; color: inherit; }
/* only the very first line of the article loses its space above */
.nfcr-art__body > :first-child,
.nfcr-art__body > .vc_row:first-child .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child > .wpb_wrapper > :first-child,
.nfcr-art__body .nfcr-lead:first-child > p:first-child { margin-top: 0; }
.nfcr-art__body .nfcr-lead,
.nfcr-art__body .nfcr-lead p { font-size: var(--nfcr-fs-intro); font-weight: 500; line-height: 1.75; color: var(--nfcr-text); }
.nfcr-art__body h2 {
	margin: 44px 0 0;
	padding: 0;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-h3-xl);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.6px;
	text-transform: none;
	color: var(--nfcr-navy);
}
.nfcr-art__body h2 + p,
.nfcr-art__body h2 + .nfcr-points { margin-top: 14px; }
.nfcr-art__body h3 {
	margin: 32px 0 0;
	font-family: var(--nfcr-font);
	font-size: var(--nfcr-fs-h3);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.3px;
	text-transform: none;
	color: var(--nfcr-navy);
}
.nfcr-art__body strong,
.nfcr-art__body b { font-weight: 600; color: var(--nfcr-navy); }
.nfcr-art__body a { font-weight: 600; color: var(--nfcr-orange); text-decoration: none; }
.nfcr-art__body a:hover { color: var(--nfcr-navy); }
.nfcr-art__body ul,
.nfcr-art__body ol:not(.nfcr-points) { margin: 18px 0 0; padding-left: 1.3em; }
.nfcr-art__body li { margin: 8px 0 0; }
.nfcr-art__body img { max-width: 100%; height: auto; border-radius: var(--nfcr-r-callout); }
.nfcr-art__body blockquote:not(.nfcr-quote__text) {
	margin: 30px 0;
	padding: 4px 0 4px 24px;
	border: 0;
	border-left: 3px solid var(--nfcr-accent);
	font-size: var(--nfcr-fs-intro);
	font-style: normal;
	font-weight: 500;
	color: var(--nfcr-text);
}
.nfcr-art__body iframe { max-width: 100%; border: 0; border-radius: var(--nfcr-r-callout); }

/* Topics (tags) */
.nfcr-art .nfcr-art__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--nfcr-track);
}
.nfcr-art .nfcr-art__tags-label { font-size: var(--nfcr-fs-label); font-weight: 600; color: var(--nfcr-text-2); }
.nfcr-art .nfcr-art__tag {
	padding: 8px 16px;
	border-radius: var(--nfcr-r-chip);
	background: var(--nfcr-surface);
	font-size: var(--nfcr-fs-meta);
	font-weight: 600;
	line-height: 1.3;
	color: var(--nfcr-navy) !important;
	text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.nfcr-art .nfcr-art__tag:hover { background: var(--nfcr-navy); color: #fff !important; }

/* ---- [nfcr_article_points] ---- */
.nfcr-art__body .nfcr-points { margin: 20px 0 0; padding: 0; list-style: none; }
.nfcr-art__body .nfcr-points--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nfcr-art__body .nfcr-points--list { display: flex; flex-direction: column; gap: 12px; }
.nfcr-art__body .nfcr-point { margin: 0; padding: 0; list-style: none; border-radius: var(--nfcr-r-chip); background: var(--nfcr-surface); }
.nfcr-art__body .nfcr-points--grid .nfcr-point { padding: 24px 26px; }
.nfcr-art__body .nfcr-points--list .nfcr-point { display: flex; align-items: flex-start; gap: 18px; padding: 20px 24px; }
.nfcr-art__body .nfcr-point__n {
	display: block;
	flex-shrink: 0;
	margin: 0 0 8px;
	font-size: var(--nfcr-fs-label);
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 1.4;
	color: var(--nfcr-orange);
}
.nfcr-art__body .nfcr-points--list .nfcr-point__n { margin: 3px 0 0; }
.nfcr-art__body .nfcr-point__text { margin: 0; font-size: var(--nfcr-fs-body); line-height: 1.7; color: var(--nfcr-text-2); }
.nfcr-art__body .nfcr-point__lead { display: block; margin-bottom: 4px; font-weight: 600; color: var(--nfcr-navy); }

/* ---- [nfcr_quote layout="article"] ---- */
.nfcr-art__body .nfcr-quote--article {
	margin: 40px 0;
	padding: 34px 38px;
	border: 0;
	border-radius: var(--nfcr-r-card);
	background: var(--nfcr-navy);
}
.nfcr-quote--article blockquote.nfcr-quote__text {
	font-size: var(--nfcr-fs-h3-lg);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -.2px;
	text-wrap: initial;
}
.nfcr-quote--article .nfcr-quote__cite { flex-direction: row; align-items: center; gap: 12px; margin-top: 16px; }
.nfcr-quote--article .nfcr-quote__bar { flex-shrink: 0; width: 38px; height: 3px; border-radius: 2px; background: var(--nfcr-accent); }
.nfcr-quote--article .nfcr-quote__name { font-size: var(--nfcr-fs-small); font-weight: 600; color: var(--nfcr-on-dark-soft); }

/* ---- [nfcr_term] ---- */
.nfcr-term { position: relative; cursor: help; }
.nfcr-term .nfcr-term__word { border-bottom: 1.5px dotted var(--nfcr-orange); }
.nfcr-term .nfcr-term__tip {
	position: absolute;
	left: 50%;
	bottom: 100%;
	z-index: 50;
	display: none;
	box-sizing: border-box;
	width: 250px;
	padding: 12px 15px;
	border-radius: var(--nfcr-r-callout);
	background: var(--nfcr-navy);
	box-shadow: var(--nfcr-shadow-raised);
	font-size: var(--nfcr-fs-meta);
	font-weight: 400;
	line-height: 1.55;
	color: #fff;
	text-align: left;
	transform: translate(-50%, -8px);
}
.nfcr-term:hover .nfcr-term__tip,
.nfcr-term:focus .nfcr-term__tip,
.nfcr-term:focus-within .nfcr-term__tip { display: block; }
.nfcr-term.is-dismissed .nfcr-term__tip { display: none; } /* Escape closes it */
/* Keep a tooltip at the left or right edge of the card inside the screen */
.nfcr-term.is-left .nfcr-term__tip { left: 0; transform: translate(0, -8px); }
.nfcr-term.is-right .nfcr-term__tip { left: auto; right: 0; transform: translate(0, -8px); }

/* ---- Closing band and previous / next ---- */
.nfcr-art__cta { padding-top: calc(var(--nfcr-section-gap) + 8px); }
.nfcr-art__more { padding-top: 44px; }
.nfcr-art__more .nfcr-sh { margin-bottom: 24px; }
.nfcr-feed--related .nfcr-feed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.nfcr-feed .nfcr-post__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 9px; }
.nfcr-feed .nfcr-post__head .nfcr-post__topic { margin: 0; }
.nfcr-feed .nfcr-post__dir {
	flex-shrink: 0;
	font-size: var(--nfcr-fs-label);
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--nfcr-text-2);
}

/* Short desktop windows (set by article.js): the 73% card makes way so author card and contents can stay in view */
.nfcr-art--compact .nfcr-art__stat { display: none; }

/* ---- Tablet / phone (proposed: the design has desktop only) ---- */
@media (max-width: 1024px) {
	.nfcr-art__grid { grid-template-columns: minmax(0, 1fr); }
	.nfcr-art__rail { position: static; }
	.nfcr-art__stat { display: none; } /* the closing band below carries the same Donate button */
	.nfcr-art .nfcr-art__text { padding: 40px; }
	.nfcr-art .nfcr-art__hero { height: 320px; }
	.nfcr-art__rail .nfcr-art__card--author .nfcr-art__meta { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
}
@media (max-width: 767px) {
	.nfcr-art__head { padding-top: var(--nfcr-section-gap); }
	.nfcr-art__hero-wrap { padding-top: 26px; }
	.nfcr-art .nfcr-art__hero { height: 240px; }
	.nfcr-art .nfcr-art__text { padding: 28px 22px 32px; }
	.nfcr-art__body .nfcr-points--grid { grid-template-columns: minmax(0, 1fr); }
	.nfcr-art__body .nfcr-points--list .nfcr-point { gap: 14px; padding: 18px 20px; }
	.nfcr-art__body .nfcr-quote--article { margin: 30px 0; padding: 26px 24px; }
	.nfcr-art-mini__inner { gap: 16px; }
	.nfcr-art-mini .nfcr-art-back { display: none; }
	.nfcr-art-mini .nfcr-art-sep { display: none; }
	.nfcr-feed--related .nfcr-feed__grid { grid-template-columns: minmax(0, 1fr); }
	.nfcr-art__trail { gap: 12px; }
}

@media print {
	.nfcr-art-progress,
	.nfcr-art-mini,
	.nfcr-art__stat,
	.nfcr-art__share { display: none !important; }
	.nfcr-art__grid { grid-template-columns: minmax(0, 1fr); }
	.nfcr-art__rail { position: static; }
}
