/**
 * Country API Docs Page Styles
 * Standalone CSS - loaded only on the API docs template
 */

.api-docs-page {
	background: #fff;
}

/* Hero Section */
.api-docs-hero {
	padding: 160px 50px 80px;
	background: linear-gradient(180deg, #fcfaf7 0%, #fff 100%);
}

@media (max-width: 1024px) {
	.api-docs-hero {
		padding: 120px 24px 60px;
	}
}

@media (max-width: 600px) {
	.api-docs-hero {
		padding: 100px 20px 48px;
	}
}

.api-docs-hero-container {
	max-width: 1180px;
	margin: 0 auto;
}

.api-docs-hero-content {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.api-docs-hero-label {
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #9b51e0;
	margin-bottom: 16px;
}

.api-docs-hero-title {
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-size: 56px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -1.5px;
	color: #000;
	margin-bottom: 24px;
}

@media (max-width: 1024px) {
	.api-docs-hero-title {
		font-size: 44px;
	}
}

@media (max-width: 600px) {
	.api-docs-hero-title {
		font-size: 32px;
		letter-spacing: -1px;
	}
}

.api-docs-hero-subtitle {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	color: #656672;
	margin-bottom: 32px;
}

@media (max-width: 600px) {
	.api-docs-hero-subtitle {
		font-size: 16px;
	}
}

.api-docs-base-url {
	display: inline-block;
	background: #1d2327;
	color: #e4e6e8;
	padding: 10px 20px;
	border-radius: 8px;
	font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
	font-size: 14px;
	word-break: break-all;
}

/* Main Content */
.api-docs-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px 80px;
}

/* Navigation */
.api-docs-nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 20px 0 40px;
	border-bottom: 1px solid #eee;
	margin-bottom: 48px;
}

.api-docs-nav a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 6px;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #656672;
	text-decoration: none;
	background: #f6f7f7;
	transition: all 0.15s ease;
}

.api-docs-nav a:hover {
	background: #ede8f5;
	color: #9b51e0;
}

/* Section Headings */
.api-docs-section-title {
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -0.5px;
	color: #000;
	margin: 56px 0 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
}

.api-docs-section-title:first-of-type {
	margin-top: 0;
}

/* Endpoint Cards */
.api-docs-endpoint {
	background: #fff;
	border: 1px solid #e2e4e9;
	border-radius: 12px;
	margin-bottom: 32px;
	overflow: hidden;
}

.api-docs-endpoint-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: #faf9f7;
	border-bottom: 1px solid #e2e4e9;
}

.api-docs-method {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: #9b51e0;
	letter-spacing: 0.5px;
}

.api-docs-path {
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 15px;
	font-weight: 600;
	color: #1d2327;
}

.api-docs-path-param {
	color: #9b51e0;
}

.api-docs-endpoint-body {
	padding: 20px;
}

.api-docs-endpoint-body > p:first-child {
	margin-top: 0;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	color: #656672;
	line-height: 1.6;
}

/* Sub-headings inside cards */
.api-docs-endpoint-body h4 {
	font-family: 'TWK Everett', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #1d2327;
	margin: 24px 0 10px;
}

.api-docs-endpoint-body h4:first-child {
	margin-top: 0;
}

/* Parameter Tables */
.api-docs-params {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 16px;
	font-size: 14px;
}

.api-docs-params th {
	text-align: left;
	padding: 8px 12px;
	background: #f6f7f7;
	border: 1px solid #e2e4e9;
	font-family: 'DM Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #656672;
}

.api-docs-params td {
	padding: 10px 12px;
	border: 1px solid #e2e4e9;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: #1d2327;
	line-height: 1.5;
	vertical-align: top;
}

.api-docs-params code {
	background: #f0f0f1;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 13px;
	color: #1d2327;
}

/* Badges */
.api-docs-badge {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	margin-left: 6px;
	vertical-align: middle;
}

.api-docs-badge--required {
	background: #fcf0f1;
	color: #8c1515;
}

.api-docs-badge--optional {
	background: #f0f6fc;
	color: #1d4ed8;
}

/* Code Blocks */
.api-docs-code {
	background: #1d2327;
	color: #e4e6e8;
	padding: 20px;
	border-radius: 8px;
	overflow-x: auto;
	font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
	font-size: 13px;
	line-height: 1.6;
	margin: 8px 0 16px;
}

.api-docs-code .c-key { color: #9cdcfe; }
.api-docs-code .c-str { color: #ce9178; }
.api-docs-code .c-num { color: #b5cea8; }
.api-docs-code .c-null { color: #569cd6; }
.api-docs-code .c-comment { color: #6a9955; }
.api-docs-code .c-cmd { color: #dcdcaa; }

/* Try It Link */
.api-docs-try {
	display: inline-block;
	margin-top: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #9b51e0;
	text-decoration: none;
}

.api-docs-try:hover {
	text-decoration: underline;
}

/* Info Cards (rate limiting, errors) */
.api-docs-info {
	background: #fff;
	border: 1px solid #e2e4e9;
	border-radius: 12px;
	padding: 24px;
	margin-bottom: 32px;
}

.api-docs-info > p:first-child {
	margin-top: 0;
}

.api-docs-info > p:last-child {
	margin-bottom: 0;
}

.api-docs-info p {
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: #656672;
	line-height: 1.6;
}

/* Countries Grid */
.api-docs-countries-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px;
	margin: 16px 0;
}

.api-docs-country-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f6f7f7;
	border-radius: 6px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: #1d2327;
}

.api-docs-country-item code {
	background: #e2e4e9;
	padding: 1px 6px;
	border-radius: 3px;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 12px;
	color: #656672;
}

.api-docs-country-item .api-docs-state-count {
	margin-left: auto;
	font-size: 12px;
	color: #9b51e0;
	font-weight: 600;
}

/* Inline code in paragraphs */
.api-docs-info code,
.api-docs-endpoint-body > p code {
	background: #f0f0f1;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 13px;
}

/* Status table */
.api-docs-params td:first-child {
	white-space: nowrap;
}

/* Section divider for fields filter */
.api-docs-params .api-docs-group-header td {
	background: #f6f7f7;
	font-weight: 600;
	font-size: 13px;
	color: #1d2327;
}

/* Responsive */
@media (max-width: 600px) {
	.api-docs-content {
		padding: 0 16px 60px;
	}

	.api-docs-section-title {
		font-size: 24px;
		margin: 40px 0 16px;
	}

	.api-docs-endpoint-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.api-docs-path {
		font-size: 13px;
	}

	.api-docs-code {
		padding: 14px;
		font-size: 12px;
	}

	.api-docs-params {
		font-size: 13px;
	}

	.api-docs-params th,
	.api-docs-params td {
		padding: 6px 8px;
	}

	.api-docs-nav {
		gap: 6px;
	}

	.api-docs-nav a {
		font-size: 13px;
		padding: 6px 12px;
	}

	.api-docs-countries-grid {
		grid-template-columns: 1fr;
	}
}