/**
 * Countries Page Styles
 *
 * Archive and single template styles for Country CPT.
 * Matches wireframe screenshots with status indicators, sections, and metrics.
 *
 * @package CPDC_Sovereign_Debt_Hub
 * @since 0.1.0
 */

/* ==========================================================================
   CSS Custom Properties - Status Colors
   ========================================================================== */

/*
 * Risk/trend status colors removed — no formalised methodology for
 * interpretive classifications. Raw data values remain visible.
 */

/* ==========================================================================
   Countries Archive Header
   ========================================================================== */

.countries-header {
	background-color: #4A7CC6;
	color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--gray-300);
	display: flex;
	align-items: stretch;
}

.countries-header--has-image {
	background-size: cover;
	background-position: center 40%;
}

.countries-header__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 300px;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	width: 100%; /* single flex child — must fill row-direction parent */
}

@media (min-width: 768px) {
	.countries-header__inner {
		min-height: 380px;
	}
}

.countries-header__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255, 255, 255, 0.85);
}

.countries-header__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.countries-header__breadcrumb a:hover {
	text-decoration: underline;
}

.countries-header__title {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	color: #fff;
	margin: 0 0 var(--wp--preset--spacing--xs);
}

.countries-header__subtitle {
	font-size: var(--wp--preset--font-size--md);
	color: rgba(255, 255, 255, 0.85);
	max-width: 480px;
	line-height: 1.5;
	margin: 0;
}

/* ==========================================================================
   Countries Filter Chips
   ========================================================================== */

.countries-filters {
	padding-block: var(--wp--preset--spacing--sm);
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
}

.countries-filters__sort-form {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	flex-shrink: 0;
}

.countries-filters__sort-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
	white-space: nowrap;
}

.countries-filters__sort-select {
	padding: 0.5em 2em 0.5em 0.75em;
	font-size: var(--wp--preset--font-size--sm);
	border: 1px solid var(--wp--preset--color--gray-400);
	border-radius: 4px;
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
}

.countries-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

.countries-filters__chip {
	display: inline-block;
	padding: 0.5em 1em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--gray-700);
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 4px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.countries-filters__chip:hover {
	background-color: var(--wp--preset--color--gray-100);
	border-color: var(--wp--preset--color--gray-400);
}

.countries-filters__chip--active {
	color: #023047;
	background-color: var(--cc-warning, #FB8500);
	border-color: var(--cc-warning, #FB8500);
}

.countries-filters__chip--active:hover {
	background-color: var(--cc-highlight, #FFB703);
	border-color: var(--cc-highlight, #FFB703);
}

/* ==========================================================================
   Metrics Explainer Panel
   ========================================================================== */

.metrics-explainer {
	padding-block: var(--wp--preset--spacing--sm);
}

.metrics-explainer__toggle-row {
	display: flex;
	justify-content: flex-end;
}

.metrics-explainer__toggle {
	display: none; /* Hidden without JS — panel stays visible */
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0;
	background: none;
	border: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	cursor: pointer;
	color: var(--wp--preset--color--gray-600);
	transition: color 0.15s ease;
}

.metrics-explainer__toggle:hover {
	color: var(--wp--preset--color--gray-900);
}

.metrics-explainer__toggle-icon {
	font-size: 1.1em;
}

.metrics-explainer__panel {
	margin-top: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	border: 1px solid var(--wp--preset--color--gray-200);
	border-radius: 8px;
}

.metrics-explainer__panel[hidden] {
	display: none;
}

.metrics-explainer__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--md);
	margin: 0;
}

.metrics-explainer__item {
	margin: 0;
}

.metrics-explainer__term {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm);
	margin-bottom: 0.25em;
}

.metrics-explainer__desc {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
	line-height: 1.5;
	margin: 0;
}

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

/* JS-enabled: show toggle button */
.js-enabled .metrics-explainer__toggle {
	display: inline-flex;
}

/* Countries Legend — removed (no formalised methodology for trend labels) */

/* ==========================================================================
   Countries Archive Grid
   ========================================================================== */

.archive--country .archive__grid,
.archive__grid--countries {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
	margin-block-start: var(--wp--preset--spacing--md);
}

@media (min-width: 640px) {
	.archive--country .archive__grid,
	.archive__grid--countries {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.archive--country .archive__grid,
	.archive__grid--countries {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Country Card
   ========================================================================== */

.country-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
}

.country-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--wp--preset--spacing--md);
	text-decoration: none;
	color: inherit;
}

.country-card__header {
	margin-block-end: var(--wp--preset--spacing--md);
}

.country-card__title-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.country-card__flag {
	object-fit: contain;
	border-radius: 2px;
	flex-shrink: 0;
}

.country-card__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
}

.country-card__membership {
	display: block;
	margin-block-start: 0.25em;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--wp--preset--color--gray-500);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Card Metrics */
.country-card__metrics {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	flex: 1;
}

.country-card__metric {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--sm);
}

.country-card__metric-label {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
}

.country-card__metric-value {
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	color: var(--cc-warning, #FB8500);
	text-align: right;
}

.country-card__metric-change {
	margin-inline-start: 0.25em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

/* Card Footer */
.country-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	margin-block-start: var(--wp--preset--spacing--md);
	padding-block-start: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--wp--preset--color--gray-200);
}

.country-card__cta {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--gray-900);
	transition: color 0.15s ease;
}

.country-card__link:hover .country-card__cta {
	color: var(--cc-warning, #FB8500);
}

.country-card__updated {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gray-500);
}

/* ==========================================================================
   Countries Summary (Regional Summary)
   ========================================================================== */

.countries-summary {
	margin-block-start: var(--wp--preset--spacing--xl);
	padding: var(--wp--preset--spacing--lg);
	background-color: var(--wp--preset--color--gray-100);
	border: 1px solid var(--wp--preset--color--gray-300);
}

.countries-summary__heading {
	margin: 0 0 var(--wp--preset--spacing--xs) 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
}

.countries-summary__description {
	margin: 0 0 var(--wp--preset--spacing--md) 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
}

.countries-summary__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xl);
}

.countries-summary__stat {
	display: flex;
	flex-direction: column;
}

.countries-summary__stat-value {
	font-size: var(--wp--preset--font-size--3xl);
	font-weight: 700;
	color: var(--cc-warning, #FB8500);
	line-height: 1;
}

.countries-summary__stat-label {
	margin-block-start: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-600);
}

.countries-summary__action {
	margin-block-start: var(--wp--preset--spacing--md);
}

.countries-summary__link {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--gray-900);
}

/* ==========================================================================
   Country Single - Hero
   ========================================================================== */

.country-hero {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--gray-300);
	display: flex;
	align-items: stretch;
}

.country-hero--has-image {
	background-size: cover;
	background-position: center;
}

.country-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 300px;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	width: 100%; /* single flex child — must fill row-direction parent */
}

@media (min-width: 768px) {
	.country-hero__inner {
		min-height: 380px;
	}
}

/* Flag in hero */
.country-hero__flag {
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	flex-shrink: 0;
}

.country-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-block-end: var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255, 255, 255, 0.85);
}

.country-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.country-hero__breadcrumb a:hover {
	text-decoration: underline;
}

.country-hero__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-block-end: var(--wp--preset--spacing--sm);
}

.country-hero__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.country-hero__meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	color: rgba(255, 255, 255, 0.85);
}

.country-hero__updated {
	margin: var(--wp--preset--spacing--xs) 0 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255, 255, 255, 0.7);
}

/* Text colors are white only when a hero image is present */
.country-hero:not(.country-hero--has-image) .country-hero__breadcrumb,
.country-hero:not(.country-hero--has-image) .country-hero__breadcrumb a,
.country-hero:not(.country-hero--has-image) .country-hero__meta,
.country-hero:not(.country-hero--has-image) .country-hero__updated {
	color: var(--wp--preset--color--gray-700);
}

/* ==========================================================================
   Country At-a-Glance
   ========================================================================== */

.country-glance {
	margin-block: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--gray-300);
}

.country-glance__heading {
	margin: 0 0 var(--wp--preset--spacing--md) 0;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gray-600);
}

.country-glance__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--sm);
}

@media (min-width: 640px) {
	.country-glance__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.country-glance__grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.country-glance__card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--sm);
	/*background-color: var(--wp--preset--color--white);*/
	border: 1px solid var(--wp--preset--color--gray-300);
}

.country-glance__card-value {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	color: orange;
	line-height: 1.2;
}

.country-glance__card-label {
	margin-block-start: var(--wp--preset--spacing--2xs);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gray-600);
	line-height: 1.3;
}

.country-glance__card-year {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gray-400);
}

/* ==========================================================================
   Country Sections (Detail Page)
   ========================================================================== */

.country-section {
	margin-block: var(--wp--preset--spacing--xl);
	padding-block-start: var(--wp--preset--spacing--lg);
	border-top: 1px solid var(--wp--preset--color--gray-300);
}

.country-section:first-of-type {
	border-top: none;
	margin-block-start: 0;
	padding-block-start: 0;
}

.country-section__heading {
	margin: 0 0 var(--wp--preset--spacing--md) 0;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--gray-700);
}

.country-section__subheading {
	margin: 0 0 var(--wp--preset--spacing--sm) 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--gray-600);
}

.country-section__description {
	margin: 0 0 var(--wp--preset--spacing--md) 0;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--gray-700);
	line-height: 1.6;
}

/* Charts */
.country-section__charts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
	margin-block-end: var(--wp--preset--spacing--md);
}

@media (min-width: 768px) {
	.country-section__charts {
		grid-template-columns: repeat(2, 1fr);
	}
}

.country-section__chart {
	background-color: var(--wp--preset--color--gray-100);
	border: 1px solid var(--wp--preset--color--gray-300);
	padding: var(--wp--preset--spacing--md);
}

.country-section__chart--wide {
	flex: 2;
}

.country-section__chart-title {
	margin: 0 0 var(--wp--preset--spacing--sm) 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--gray-700);
}

.country-section__chart-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background-color: var(--wp--preset--color--white);
	border: 1px dashed var(--wp--preset--color--gray-400);
	color: var(--wp--preset--color--gray-500);
	font-size: var(--wp--preset--font-size--sm);
}

/* Section Metrics */
.country-section__metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--md);
}

.country-section__metrics--wide {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.country-section__metrics--wide {
		grid-template-columns: repeat(4, 1fr);
	}
}

.country-section__metric {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-100);
	border: 1px solid var(--wp--preset--color--gray-300);
}

.country-section__metric-value {
	font-size: var(--wp--preset--font-size--2xl);
	font-weight: 700;
	color: var(--wp--preset--color--gray-900);
	line-height: 1;
}

.country-section__metric-label {
	margin-block-start: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--gray-600);
}

/* Content Row (chart + sidebar) */
.country-section__content-row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

@media (min-width: 768px) {
	.country-section__content-row {
		flex-direction: row;
	}
}

.country-section__main {
	flex: 2;
}

.country-section__sidebar {
	flex: 1;
}

.country-section__sidebar-metrics {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.country-section__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.country-section__links li {
	margin-block-end: var(--wp--preset--spacing--sm);
}

.country-section__links a {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-900);
}

/* ==========================================================================
   Country Callout
   ========================================================================== */

.country-callout {
	margin-block: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--md);
	background-color: var(--wp--preset--color--gray-900);
	color: var(--wp--preset--color--white);
}

.country-callout__heading {
	margin: 0 0 var(--wp--preset--spacing--sm) 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
}

.country-callout__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
}

/* ==========================================================================
   Country Tabs (Detailed Data)
   ========================================================================== */

.country-tabs__content {
	padding-block-start: var(--wp--preset--spacing--md);
}

/* ==========================================================================
   Single Footer
   ========================================================================== */

.single--country .single__footer {
	margin-block-start: var(--wp--preset--spacing--xl);
	padding-block: var(--wp--preset--spacing--md);
	border-top: 1px solid var(--wp--preset--color--gray-300);
}

.single__back-link {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray-700);
	text-decoration: none;
}

.single__back-link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   SECTION HEADING — amber rule + larger text
   ========================================================================== */

.country-section__heading-row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	margin-bottom: var(--wp--preset--spacing--md);
}

.country-section__download-link {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.country-section__heading-rule {
	width: 36px;
	height: 3px;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ==========================================================================
   ALTERNATING SECTION BACKGROUNDS
   ========================================================================== */

.country-section--alt {
	/* Base styles — skin overrides handle colors */
}

/* ==========================================================================
   4-COLUMN AND 3-COLUMN METRIC GRIDS
   ========================================================================== */

.country-section__metrics--4col {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--sm);
}

@media (min-width: 768px) {
	.country-section__metrics--4col {
		grid-template-columns: repeat(4, 1fr);
	}
}

.country-section__metrics--3col {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--wp--preset--spacing--sm);
}

@media (min-width: 768px) {
	.country-section__metrics--3col {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   SDG METRIC SUBTEXT
   ========================================================================== */

.country-section__metric-subtext {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	margin-top: 0.15rem;
}

/* ==========================================================================
   SECTION EXPLAINER TEXT
   ========================================================================== */

.country-section__explainer {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: 60ch;
}

/* ==========================================================================
   DATA TRANSITION
   ========================================================================== */

.country-transition {
	text-align: center;
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
}

.country-transition__rule {
	border: none;
	width: 40px;
	height: 1px;
	margin: 0 auto var(--wp--preset--spacing--sm);
}

.country-transition__heading {
	font-family: var(--wp--preset--font-family--heading-serif, 'Playfair Display', Georgia, serif);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0 0 0.35rem;
}

.country-transition__subtext {
	font-size: var(--wp--preset--font-size--sm);
	margin: 0 0 var(--wp--preset--spacing--sm);
}

.country-transition__rule:last-child {
	margin: 0 auto;
}

/* ==========================================================================
   DATA TABLE WRAPPER (horizontal scroll on mobile)
   ========================================================================== */

.country-tabs__table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.country-tabs__data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.country-tabs__data-table th,
.country-tabs__data-table td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	white-space: nowrap;
}

.country-tabs__data-table th {
	font-weight: 600;
}

.country-tabs__data-table td:first-child {
	white-space: normal;
	min-width: 180px;
}

/* ==========================================================================
   RELATED RESOURCES GRID
   ========================================================================== */

.country-resources__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--wp--preset--spacing--md);
}

.country-resources__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 1024px) {
	.country-resources__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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