/**
 * DGA Sitemap — Frontend Styles
 * Theme: DGA orange (#F47B20) + DGA navy (#00529C)
 * Layouts: grid | tree | list
 */

.dga-sm {
	/* Brand tokens */
	--dga-orange: #F47B20;
	--dga-orange-dark: #D9651A;
	--dga-orange-light: #FFF4E6;
	--dga-orange-soft: #FFF7EF;
	--dga-blue: #00529C;
	--dga-blue-dark: #003366;
	--dga-blue-light: #E8F0FA;
	--dga-blue-soft: #F0F6FC;

	/* Neutrals */
	--dga-text: #1a1a1a;
	--dga-text-soft: #4a5568;
	--dga-text-mute: #718096;
	--dga-border: #d8dee9;
	--dga-bg: #ffffff;
	--dga-bg-soft: #f7f9fc;

	/* Tokens */
	--dga-radius: 10px;
	--dga-radius-lg: 16px;
	--dga-shadow: 0 4px 16px rgba(0, 51, 102, 0.06), 0 1px 2px rgba(0, 51, 102, 0.04);
	--dga-shadow-hover: 0 10px 28px rgba(0, 51, 102, 0.12), 0 2px 6px rgba(0, 51, 102, 0.08);

	--dga-sm-cols: 3;

	font-family: 'Sarabun', 'IBM Plex Sans Thai', 'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--dga-text);
	max-width: 1180px;
	margin: 2rem auto;
	padding: 0;
	line-height: 1.6;
	position: relative;
}

/* Header */
.dga-sm__header {
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 3px solid transparent;
	background: linear-gradient(90deg, var(--dga-orange) 0%, var(--dga-orange) 32%, var(--dga-blue) 32%, var(--dga-blue) 100%) bottom / 100% 3px no-repeat;
}

.dga-sm__title {
	margin: 0 0 0.45rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	color: var(--dga-blue-dark);
	letter-spacing: -0.015em;
	line-height: 1.25;
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.dga-sm__title::before {
	content: '';
	width: 6px;
	height: 1.5em;
	background: var(--dga-orange);
	border-radius: 3px;
	flex-shrink: 0;
}

.dga-sm__subtitle {
	margin: 0;
	color: var(--dga-text-soft);
	font-size: 1rem;
}

/* Generic link */
.dga-sm__link {
	color: var(--dga-blue-dark);
	text-decoration: none;
	font-weight: 500;
	border-radius: 4px;
	transition: color 0.15s ease, background-color 0.15s ease;
	position: relative;
}

.dga-sm__link:hover,
.dga-sm__link:focus-visible {
	color: var(--dga-orange-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dga-sm__link:focus-visible {
	outline: 2px solid var(--dga-orange);
	outline-offset: 3px;
	text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────
 * Layout: GRID
 * ─────────────────────────────────────────────────────────────── */

.dga-sm__grid {
	display: grid;
	grid-template-columns: repeat(var(--dga-sm-cols), minmax(0, 1fr));
	gap: 1.5rem;
}

.dga-sm__card {
	background: var(--dga-bg);
	border: 1px solid var(--dga-border);
	border-radius: var(--dga-radius-lg);
	padding: 1.5rem 1.5rem 1.4rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
	overflow: hidden;
}

.dga-sm__card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--dga-orange) 0%, var(--dga-orange) 100%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.dga-sm__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--dga-shadow-hover);
	border-color: var(--dga-orange);
}

.dga-sm__card:hover::before {
	transform: scaleX(1);
}

.dga-sm__card-head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--dga-blue-light);
}

.dga-sm__card-icon {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--dga-orange-soft) 0%, var(--dga-orange-light) 100%);
	color: var(--dga-orange-dark);
	border: 1px solid rgba(244, 123, 32, 0.18);
}

.dga-sm__card-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--dga-blue-dark);
	line-height: 1.35;
}

.dga-sm__card-title .dga-sm__link {
	color: var(--dga-blue-dark);
}

.dga-sm__card-title .dga-sm__link:hover {
	color: var(--dga-orange-dark);
}

.dga-sm__card-desc {
	margin: 0 0 0.85rem;
	font-size: 0.875rem;
	color: var(--dga-text-soft);
	line-height: 1.55;
}

.dga-sm__card-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.dga-sm__card-item {
	padding-left: 1.1rem;
	position: relative;
	font-size: 0.92rem;
	line-height: 1.55;
}

.dga-sm__card-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dga-orange);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.dga-sm__card-item:hover::before {
	transform: scale(1.4);
	background: var(--dga-blue);
}

.dga-sm__card-sublist {
	list-style: none;
	margin: 0.4rem 0 0;
	padding: 0 0 0 0.9rem;
	border-left: 2px dashed var(--dga-blue-light);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.dga-sm__card-sublist li {
	font-size: 0.85rem;
	color: var(--dga-text-soft);
	padding-left: 0.5rem;
	position: relative;
}

.dga-sm__card-sublist li::before {
	content: '›';
	position: absolute;
	left: -0.45rem;
	color: var(--dga-orange);
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
 * Layout: TREE (collapsible)
 * ─────────────────────────────────────────────────────────────── */

.dga-sm__tree {
	background: var(--dga-bg);
	border: 1px solid var(--dga-border);
	border-radius: var(--dga-radius-lg);
	box-shadow: var(--dga-shadow);
	padding: 1.5rem 1.75rem;
}

.dga-sm__tree-ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dga-sm__tree-ul--root > .dga-sm__tree-item {
	border-bottom: 1px solid var(--dga-blue-light);
	padding-bottom: 0.85rem;
	margin-bottom: 0.85rem;
}

.dga-sm__tree-ul--root > .dga-sm__tree-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.dga-sm__tree-ul:not(.dga-sm__tree-ul--root) {
	padding-left: 1.6rem;
	border-left: 2px dashed var(--dga-blue-light);
	margin-left: 0.5rem;
}

.dga-sm__tree-item {
	list-style: none;
}

.dga-sm__tree-row {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.45rem 0.5rem;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.dga-sm__tree-row:hover {
	background: var(--dga-blue-soft);
}

.dga-sm__tree-toggle {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--dga-bg-soft);
	color: var(--dga-blue);
	border: 1px solid var(--dga-border);
	border-radius: 6px;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.dga-sm__tree-toggle:hover {
	background: var(--dga-orange-soft);
	border-color: var(--dga-orange);
	color: var(--dga-orange-dark);
}

.dga-sm__tree-toggle:focus-visible {
	outline: 2px solid var(--dga-orange);
	outline-offset: 2px;
}

.dga-sm__tree-toggle[aria-expanded="true"] .dga-sm__tree-chevron {
	transform: rotate(90deg);
}

.dga-sm__tree-chevron {
	transition: transform 0.2s ease;
}

.dga-sm__tree-bullet {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin: 0 9px;
	border-radius: 50%;
	background: var(--dga-orange);
}

.dga-sm__tree-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dga-blue);
}

.dga-sm__tree-icon svg {
	width: 22px;
	height: 22px;
}

.dga-sm__tree-label {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dga-sm__tree-ul--root > .dga-sm__tree-item > .dga-sm__tree-row .dga-sm__tree-label .dga-sm__link {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--dga-blue-dark);
}

.dga-sm__tree-desc {
	font-size: 0.78rem;
	color: var(--dga-text-mute);
	font-weight: 400;
}

/* Collapsible content — default closed. JS toggles `.is-open` class. */
.dga-sm__tree-children {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
	overflow: hidden;
}

.dga-sm__tree-children > * {
	min-height: 0;
}

.dga-sm__tree-children.is-open {
	grid-template-rows: 1fr;
}

/* Branch items open by default for top-level — they look better expanded.
 * If you prefer all closed, remove this rule. */
.dga-sm__tree-ul--root > .dga-sm__tree-item > .dga-sm__tree-children {
	grid-template-rows: 1fr;
}

.dga-sm__tree-ul--root > .dga-sm__tree-item > .dga-sm__tree-row > .dga-sm__tree-toggle .dga-sm__tree-chevron {
	transform: rotate(90deg);
}

/* On mobile, collapse root by default for compactness — handled via media query toggle below if needed */

/* ─────────────────────────────────────────────────────────────────
 * Layout: LIST
 * ─────────────────────────────────────────────────────────────── */

.dga-sm__list {
	background: var(--dga-bg);
	border: 1px solid var(--dga-border);
	border-left: 4px solid var(--dga-orange);
	border-radius: var(--dga-radius);
	padding: 1.5rem 2rem;
	box-shadow: var(--dga-shadow);
}

.dga-sm__nested,
.dga-sm__list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dga-sm__nested--root > li {
	margin-bottom: 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--dga-blue-light);
}

.dga-sm__nested--root > li:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.dga-sm__nested--root > li > .dga-sm__link {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--dga-blue-dark);
	display: inline-block;
	margin-bottom: 0.4rem;
}

.dga-sm__nested:not(.dga-sm__nested--root) {
	padding-left: 1.4rem;
	margin-top: 0.35rem;
	border-left: 2px dashed var(--dga-blue-light);
}

.dga-sm__nested:not(.dga-sm__nested--root) li {
	position: relative;
	padding: 0.18rem 0 0.18rem 1rem;
	font-size: 0.95rem;
}

.dga-sm__nested:not(.dga-sm__nested--root) li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 8px;
	height: 1px;
	background: var(--dga-orange);
}

/* ─────────────────────────────────────────────────────────────────
 * Footer + Empty state
 * ─────────────────────────────────────────────────────────────── */

.dga-sm__footer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--dga-border);
	text-align: right;
}

.dga-sm__credit {
	color: var(--dga-text-mute);
	font-size: 0.8rem;
}

.dga-sm__credit strong {
	color: var(--dga-orange-dark);
}

.dga-sm--empty {
	background: var(--dga-orange-soft);
	border: 1px dashed var(--dga-orange);
	border-radius: var(--dga-radius);
	padding: 1.5rem 2rem;
	color: var(--dga-orange-dark);
	text-align: center;
	font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────
 * Responsive
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
	.dga-sm__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.dga-sm {
		margin: 1rem;
	}
	.dga-sm__grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.dga-sm__card {
		padding: 1.25rem;
	}
	.dga-sm__tree {
		padding: 1rem 1.1rem;
	}
	.dga-sm__list {
		padding: 1.25rem 1.25rem 1.25rem 1.5rem;
	}
	.dga-sm__tree-ul:not(.dga-sm__tree-ul--root) {
		padding-left: 1.1rem;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.dga-sm *,
	.dga-sm *::before,
	.dga-sm *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* High contrast */
@media (prefers-contrast: more) {
	.dga-sm__card,
	.dga-sm__tree,
	.dga-sm__list {
		border-width: 2px;
		border-color: var(--dga-blue-dark);
	}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.dga-sm {
		--dga-text: #f1f5f9;
		--dga-text-soft: #cbd5e1;
		--dga-text-mute: #94a3b8;
		--dga-border: #334155;
		--dga-bg: #1e293b;
		--dga-bg-soft: #0f172a;
		--dga-blue-light: rgba(0, 82, 156, 0.18);
		--dga-blue-soft: rgba(0, 82, 156, 0.10);
		--dga-orange-soft: rgba(244, 123, 32, 0.10);
		--dga-orange-light: rgba(244, 123, 32, 0.16);
	}
	.dga-sm__title {
		color: #f1f5f9;
	}
	.dga-sm__card-title,
	.dga-sm__card-title .dga-sm__link,
	.dga-sm__tree-ul--root > .dga-sm__tree-item > .dga-sm__tree-row .dga-sm__tree-label .dga-sm__link,
	.dga-sm__nested--root > li > .dga-sm__link {
		color: #93c5fd;
	}
	.dga-sm__link {
		color: #cbd5e1;
	}
	.dga-sm__link:hover {
		color: #fbbf24;
	}
}

/* Print — clean sitemap on paper */
@media print {
	.dga-sm {
		max-width: none;
		margin: 0;
		color: #000;
	}
	.dga-sm__card,
	.dga-sm__tree,
	.dga-sm__list {
		box-shadow: none;
		page-break-inside: avoid;
	}
	.dga-sm__tree-toggle {
		display: none;
	}
	.dga-sm__tree-children {
		grid-template-rows: 1fr !important;
	}
	.dga-sm__footer {
		display: none;
	}
}