/**
 * single-monograph.css
 *
 * Styles for single-monograph.php.
 * Deliberately built on Astra's own CSS custom properties
 * (--ast-global-color-*, font vars, container widths) rather than
 * hard-coded values, so it automatically follows Customizer > Global
 * changes made to the site.
 *
 * Astra reference variables used (defined by the theme on :root):
 *   --ast-global-color-0   Primary/brand color
 *   --ast-global-color-1   Secondary/link-hover color
 *   --ast-global-color-2   Body text color
 *   --ast-global-color-3   Usually near-white background
 *   --ast-global-color-4   Usually white/lightest background
 *   --ast-border-color     Astra's default border color (falls back below)
 */

.tftsg-monograph-container {
	--tftsg-accent: var( --ast-global-color-0, #4b824b );
	--tftsg-accent-hover: var( --ast-global-color-1, #259dbb );
	--tftsg-accent-hover-2: #d7991a;
	--tftsg-text: var( --ast-global-color-3, #3a3a3a );
	--tftsg-text-alt: var( --ast-global-color-2, #14a7cc );
	--tftsg-surface: var( --ast-global-color-4, #ded2b4 );
	--tftsg-surface-tint-light: var( --ast-global-color-4, #ded2b4 );
	--tftsg-surface-tint: var( --ast-global-color-6, #133649 );
	--tftsg-border: var( --ast-border-color, #e2e5e4 );
	--tftsg-radius: 10px;
	color: var( --tftsg-text );
}

.tftsg-monograph {
	margin: 0 auto;
	padding: 2.5rem 0 4rem;
}

/* ============ Header ============ */

.tftsg-monograph__header {
	margin-bottom: 2rem;
}

.tftsg-monograph__eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem!important;
}

.tftsg-pill {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: var(--tftsg-radius);
	background: var( --tftsg-surface-tint );
	color: var( --tftsg-text-alt );
	border: 1px solid var( --tftsg-border );
	text-decoration: none;
}

.tftsg-pill--accent {
	background: var( --tftsg-accent );
	border-color: var( --tftsg-accent );
	color: #fff;
}

a.tftsg-pill--accent:hover {
	background: var( --tftsg-accent-hover );
	color: #fff;
}

.tftsg-pill--accent-2 {
	background: #d7991a;
	border-color: #d7991a;
	color: #fff;
}

a.tftsg-pill--accent2:hover {
	background: var( --tftsg-accent-hover );
	color: #fff;
}

.tftsg-monograph__title {
	font-family: "source-serif-4", serif;
	font-size: clamp( 1.9rem, 4vw, 2.75rem );
	line-height: 1.2;
	margin: 0 0 0.5rem;
	text-transform: none;
}

.tftsg-monograph__clade {
	font-family: "nunito-sans", sans-serif;
	font-size: clamp( 1.5rem, 3vw, 2rem );
	line-height: 1.2;
	margin: 0 0 0.5rem;
	text-transform: none;
}

.tftsg-monograph__title em {
	font-style: italic;
}

.tftsg-monograph__described-by {
	font-size: 0.55em;
	font-weight: 400;
	color: var( --tftsg-text );
	opacity: 0.65;
	margin-left: 0.5rem;
	display: inline-block;
	overflow-wrap: break-word;
	word-break: break-word;
}

.tftsg-monograph__clade-members {
	font-size: 1.25rem;
	color: var( --tftsg-text-alt );
	opacity: 0.8;
	margin: 0 0 1rem;
	font-family: "source-serif-4", serif;
}

.tftsg-monograph__common-names {
	font-size: 1.15rem;
	color: var( --tftsg-text );
	opacity: 0.8;
	margin: 0 0 1rem;
}

.tftsg-monograph__byline {
	font-size: 0.9rem;
	opacity: 0.75;
	margin-bottom: 1.5rem;
}

.tftsg-monograph__byline em {
	font-style: italic;
}

.tftsg-monograph__meta-sep {
	margin: 0 0.4rem;
}

.tftsg-monograph__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.tftsg-monograph__pdf-note {
	font-size: 0.82rem;
	opacity: 0.6;
}

/* ============ Buttons (styled to sit alongside Astra's own buttons) ============ */

.tftsg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.7rem 1.4rem;
	border-radius: 6px;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.tftsg-btn--primary {
	background: var( --tftsg-accent );
	color: #fff;
}

.tftsg-btn--primary:hover,
.tftsg-btn--primary:focus {
	background: var( --tftsg-accent-hover-2 );
	color: #fff;
	transform: translateY( -1px );
}

.tftsg-btn--secondary {
	background: transparent;
	color: var( --tftsg-accent );
	border: 2px solid var( --tftsg-accent );
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

.tftsg-btn--secondary:hover,
.tftsg-btn--secondary:focus {
	background: var( --tftsg-accent );
	color: #fff;
	transform: translateY( -1px );
}

.tftsg-btn--block {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 1.25rem;
}

/* ============ Hero image ============ */

.ast-article-single figure, .ast-article-single img:not(figure img) {
	box-shadow: none;
	-webkit-box-shadow: none;
}

.tftsg-monograph__hero-image {
	margin: 0 0 2.5rem;
}

.tftsg-monograph__hero-img {
	width: 100%;
	height: auto;
	border-radius: var( --tftsg-radius );
	display: block;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.08 );
}

.tftsg-monograph__hero-image figcaption {
	font-size: 0.85rem;
	opacity: 0.7;
	margin-top: 0.6rem;
	line-height: 1.4;
}

/* ============ Layout: content + sidebar ============ */

.tftsg-monograph__layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 300px;
	gap: 3rem;
	align-items: start;
}

@media ( max-width: 921px ) {
	.tftsg-monograph__layout {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.tftsg-monograph__section {
	margin-bottom: 2.25rem;
	padding-bottom: 2.25rem;
	border-bottom: 1px solid var( --tftsg-border );
}

.tftsg-monograph__section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.tftsg-monograph__section h2 {
	font-family: var( --ast-heading-font-family, inherit );
	font-size: 1.35rem;
	color: var( --tftsg-accent );
	margin: 0 0 0.9rem;
}

.tftsg-monograph__prose {
	font-size: 1rem;
	line-height: 1.75;
}

.tftsg-monograph__prose p:first-child {
	margin-top: 0;
}

.tftsg-monograph__prose em {
	font-style: italic;
}

.tftsg-monograph__caption {
	font-size: 0.85rem;
	opacity: 0.7;
	line-height: 1.5;
	margin-top: 0.75rem;
}

.tftsg-monograph__updated-note {
	font-size: 0.85rem;
	font-weight: 700;
	font-style: italic;
	opacity: 0.75;
	margin: 0.75rem 0 0;
}

.tftsg-monograph__citation .tftsg-monograph__prose {
	background: color-mix( in srgb, var( --tftsg-surface-tint-light ), white 60%);
	border-left: 3px solid var( --tftsg-accent );
	border-radius: 0 6px 6px 0;
	padding: 1rem 1.25rem;
	font-size: 0.92rem;
}

/* ============ Distribution image gallery ============ */

.tftsg-dist-gallery {
	display: grid;
	gap: 0.75rem;
	margin-top: 1rem;
	grid-template-columns: repeat( 2, 1fr );
}

.tftsg-dist-gallery--count-1 {
	grid-template-columns: 1fr;
	max-width: 480px;
}

@media ( min-width: 600px ) {
	.tftsg-dist-gallery--count-4 {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.tftsg-dist-gallery__item {
	position: relative;
	padding: 0;
	border: 1px solid var( --tftsg-border );
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: zoom-in;
	line-height: 0;
}

.tftsg-dist-gallery__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

.tftsg-dist-gallery__item:hover img {
	transform: scale( 1.03 );
}

/* Magnifying glass overlay -- signals the image is clickable/zoomable.
   Dark translucent circle behind a white glyph so it reads clearly
   whether the underlying photo is light or dark. */
.tftsg-dist-gallery__zoom-icon {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.55 );
	color: #ffffff;
	pointer-events: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.tftsg-dist-gallery__item:hover .tftsg-dist-gallery__zoom-icon {
	background: rgba( 0, 0, 0, 0.7 );
	transform: scale( 1.08 );
}

/* ============ Sidebar / info card ============ */

.tftsg-monograph__sidebar {
	position: sticky;
	top: 100px;
}

@media ( max-width: 921px ) {
	.tftsg-monograph__sidebar {
		position: static;
	}
}

.tftsg-info-card {
	background: var( --tftsg-surface-tint );
	border: 1px solid var( --tftsg-border );
	border-radius: var( --tftsg-radius );
	padding: 1.5rem;
}

.tftsg-info-card h3 {
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 0 0 1rem;
	color: var( --ast-global-color-5 );
	opacity: 0.9;
}

.tftsg-info-card__list {
	margin: 0;
	color: var( --tftsg-text-alt );
}

.tftsg-info-card__list dt {
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-top: 0.9rem;
	font-weight: 700;
	color: var( --ast-global-color-5 );
	opacity: 0.9;
}

.tftsg-info-card__list dt:first-child {
	margin-top: 0;
}

.tftsg-info-card__list dd {
	margin: 0.15rem 0 0;
	font-size: 0.95rem;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.45 );
}

.tftsg-info-card__list dd a {
	color: var( --tftsg-text-alt );
	font-weight: 700;
	text-decoration: none;
}

.tftsg-info-card__list dd a:hover {
	text-decoration: underline;
}

/* ============ Conservation Status Badge ============ */

.tftsg-status-badge-block {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var( --tftsg-border );
}

.tftsg-status-badge-block__heading {
	margin: 0;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
	color: #DA2A1C; /* Red List red -- this heading is "IUCN Red List Status" specifically */
}

.tftsg-status-badge-block__heading--cites {
	margin-top: 1.25rem;
	color: var( --ast-global-color-5 );
	opacity: 0.9;
}

.tftsg-updated-flag {
	display: inline-block;
	margin-left: 0.4rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 1;
	color: var( --tftsg-accent-hover-2 );
	border: 2px solid var( --tftsg-accent-hover-2 );
	border-radius: 999px;
	vertical-align: middle;
}

.tftsg-status-badge-block__badge-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.tftsg-status-badge-block__label {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: #DA2A1C;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.45 );
}

/* Circle badge, squared off at the top-right corner to form a point. */
.tftsg-status-badge {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50% 0 50% 50%;
	font-family: "nunito-sans", sans-serif;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.45 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tftsg-status-badge:hover {
	transform: scale( 1.05 );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.2 );
	color: #ffffff;
}

.tftsg-status-badge-block__cites {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --tftsg-text-alt );
	text-decoration: none;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.45 );
}

.tftsg-status-badge-block__cites:hover {
	text-decoration: underline;
}

/* IUCN Red List category colors. */
.tftsg-status-badge--na { background: #C1B5A5; }
.tftsg-status-badge--dd { background: #D1D1C6; }
.tftsg-status-badge--lc { background: #60C659; }
.tftsg-status-badge--nt { background: #CCE226; }
.tftsg-status-badge--vu { background: #F9E814; }
.tftsg-status-badge--en { background: #FC7F3F; }
.tftsg-status-badge--cr { background: #D81E05; }
.tftsg-status-badge--re { background: #9B4F96; }
.tftsg-status-badge--ew { background: #542344; }
.tftsg-status-badge--ex {
	background: #000000;
	color: #D81E05; /* Same red as CR, per spec */
	font-weight: 900;
	text-shadow: none;
}

.tftsg-status-badge--ex:hover {
	color: #D81E05;
}

/* ============ Prev / Next navigation ============ */

.tftsg-monograph__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var( --tftsg-border );
}

@media ( max-width: 600px ) {
	.tftsg-monograph__nav {
		grid-template-columns: 1fr;
	}
}

.tftsg-monograph__nav-link {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem 1.25rem;
	border: 1px solid var( --tftsg-border );
	border-radius: var( --tftsg-radius );
	text-decoration: none;
	color: var( --tftsg-text );
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tftsg-monograph__nav-link:hover {
	border-color: var( --tftsg-accent );
	background: var( --tftsg-surface-tint );
}

.tftsg-monograph__nav-link--next {
	text-align: right;
	align-items: flex-end;
}

.tftsg-monograph__nav-label {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var( --tftsg-accent );
	font-weight: 700;
}

.tftsg-monograph__nav-title {
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 700;
}

/* ============ Gallery / hero link resets ============ */
/* .tftsg-dist-gallery__item and the hero image link are now <a> tags
   that trigger the site's existing prettyPhoto lightbox (rel="prettyPhoto"),
   so no custom lightbox styles are needed here. */

.tftsg-dist-gallery__item,
.tftsg-monograph__hero-image a {
	display: block;
}