:root {
	--df-yellow: #ffd331;
	--df-gold: #d9a21b;
	--df-gold-light: #ffec9f;
	--df-gold-deep: #754800;
	--df-bg: #070500;
	--df-bg-soft: #100a01;
	--df-panel: #0c0801;
	--df-panel-raised: #191003;
	--df-border: rgba(255, 199, 48, .34);
	--df-text: #f4efe3;
	--df-text-muted: #b8ac93;
	--df-focus: rgba(255, 211, 49, .46);
	--df-radius: 14px;
	--df-heading-gold: #fada6f;
	--df-font-content: "Sarabun", "Leelawadee UI", Tahoma, Arial, sans-serif;
}

html {
	background: var(--df-bg);
	color-scheme: dark;
}

body {
	min-height: 100vh;
	background:
		linear-gradient(118deg, rgba(255, 211, 49, .12) 0, rgba(255, 211, 49, .025) 23%, transparent 23.2%),
		repeating-linear-gradient(135deg, transparent 0 34px, rgba(217, 162, 27, .025) 34px 35px),
		radial-gradient(circle at 88% 16%, rgba(255, 184, 0, .14), transparent 28rem),
		linear-gradient(155deg, #120b00 0%, #070500 38%, #030303 68%, #100900 100%);
	background-attachment: fixed;
	color: var(--df-text);
	font-family: var(--df-font-content);
}

::selection {
	background: var(--df-gold);
	color: #090909;
}

body a {
	color: var(--df-gold);
	text-decoration-color: rgba(244, 189, 25, .48);
	text-underline-offset: .18em;
	transition: color .18s ease, text-decoration-color .18s ease;
}

body a:hover,
body a:focus-visible {
	color: var(--df-gold-light);
	text-decoration-color: currentColor;
}

body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
	outline: 3px solid var(--df-focus);
	outline-offset: 3px;
}

#content,
main.site-main {
	color: var(--df-text);
	font-family: var(--df-font-content);
}

main.site-main {
	min-height: 56vh;
	padding-block: clamp(30px, 5vw, 64px);
}

/*
 * Hello Elementor leaves singular content full width when a post has the
 * elementor-page body class. Keep imported pages and posts aligned with the
 * 1200px hero banner instead of letting body copy run edge to edge.
 */
body.page main.site-main,
body.single main.site-main {
	box-sizing: border-box;
	width: min(calc(100% - 32px), 1200px);
	max-width: 1200px;
	min-width: 0;
	margin-inline: auto;
}

.page-header {
	margin: 0 auto 28px;
}

.page-header .entry-title,
.site-main .entry-title,
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6,
.elementor-widget-heading .elementor-heading-title {
	color: var(--df-heading-gold);
	font-family: var(--df-font-content);
	font-weight: 750;
	letter-spacing: -.02em;
}

.page-header .entry-title,
.site-main > .page-header > .entry-title,
.site-main article > .entry-title {
	color: var(--df-heading-gold);
	background: none;
	-webkit-text-fill-color: currentColor;
	text-shadow: none;
}

.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	color: var(--df-heading-gold);
	font-family: var(--df-font-content);
}

.site-main .entry-content,
.site-main .entry-content p,
.site-main .entry-content li,
.site-main .entry-content td,
.site-main .entry-content th,
.site-main .entry-content blockquote,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
	font-family: var(--df-font-content);
}

/* Consistent content heading scale across posts, pages, and archives. */
main.site-main h2 {
	font-size: 26px !important;
}

main.site-main h3 {
	font-size: 22px !important;
}

.site-main h2,
.site-main h3 {
	position: relative;
	padding-bottom: .42em;
}

.site-main h2::after,
.site-main h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(76px, 22%);
	height: 2px;
	background: linear-gradient(90deg, var(--df-gold), transparent);
	box-shadow: 0 0 10px rgba(244, 189, 25, .32);
}

body:not([class*="elementor-page-"]) .site-main > article,
body:not([class*="elementor-page-"]) .site-main > .post,
body:not([class*="elementor-page-"]) .site-main > .page {
	margin-bottom: 28px;
	padding: clamp(22px, 4vw, 42px);
	border: 1px solid var(--df-border);
	border-top: 3px solid var(--df-yellow);
	border-radius: var(--df-radius);
	background:
		linear-gradient(120deg, rgba(255, 211, 49, .095), transparent 27%),
		repeating-linear-gradient(135deg, transparent 0 42px, rgba(255, 204, 36, .018) 42px 43px),
		linear-gradient(180deg, var(--df-panel-raised), var(--df-panel));
	box-shadow: 0 24px 62px rgba(0, 0, 0, .42), 0 0 28px rgba(217, 162, 27, .06), inset 0 1px 0 rgba(255, 236, 159, .05);
}

.site-main p,
.site-main li,
.site-main dd,
.site-main dt,
.elementor-widget-text-editor {
	color: var(--df-text);
}

.site-main .entry-meta,
.site-main .entry-footer,
.site-main .post-meta,
.site-main figcaption,
.site-main .wp-caption-text,
.site-main .comment-metadata,
.site-main .navigation,
.site-main .pagination {
	color: var(--df-text-muted);
}

.site-main hr,
.wp-block-separator {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--df-border), transparent);
}

.site-main blockquote,
.wp-block-quote {
	margin-inline: 0;
	padding: 18px 22px;
	border-left: 4px solid var(--df-gold);
	border-radius: 0 10px 10px 0;
	background: linear-gradient(90deg, rgba(255, 211, 49, .11), rgba(217, 162, 27, .025));
	color: #f6f1e4;
}

.site-main code,
.site-main kbd,
.site-main pre {
	border: 1px solid var(--df-border);
	border-radius: 8px;
	background: #080808;
	color: #ffdf76;
}

.site-main pre {
	padding: 18px;
	overflow-x: auto;
}

.site-main table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--df-border);
	border-radius: 10px;
	background: #0d0d0d;
}

.site-main th,
.site-main td {
	padding: 12px 14px;
	border-right: 1px solid rgba(244, 189, 25, .12);
	border-bottom: 1px solid rgba(244, 189, 25, .12);
	color: var(--df-text);
}

.site-main th {
	background: rgba(244, 189, 25, .12);
	color: var(--df-gold-light);
	font-weight: 750;
}

.site-main tr:last-child td,
.site-main tr:last-child th {
	border-bottom: 0;
}

.site-main tr > :last-child {
	border-right: 0;
}

.site-main img,
.site-main .wp-post-image {
	border-radius: 10px;
}

.site-main .wp-post-image,
.entry-content > figure:first-child img,
.entry-content > p:first-child img {
	border: 1px solid rgba(244, 189, 25, .25);
	box-shadow: 0 18px 38px rgba(0, 0, 0, .36);
}

.thaiball-article-banner.alignwide {
	width: 100%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

.thaiball-article-banner__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

body input:not([type="checkbox"]):not([type="radio"]),
body select,
body textarea {
	border: 1px solid rgba(244, 189, 25, .3);
	border-radius: 8px;
	background: #0a0a0a;
	color: var(--df-text);
}

body input::placeholder,
body textarea::placeholder {
	color: #7f7b73;
}

body button:not(.df-menu-toggle),
body input[type="button"],
body input[type="submit"],
body .wp-element-button,
body .wp-block-button__link {
	border: 1px solid #ffcf31;
	border-radius: 9px;
	background: linear-gradient(135deg, #fff09b 0%, #ffd331 46%, #c58a00 100%);
	box-shadow: 0 8px 22px rgba(244, 189, 25, .12);
	color: #090909;
	font-weight: 750;
	text-decoration: none;
}

body button:not(.df-menu-toggle):hover,
body input[type="button"]:hover,
body input[type="submit"]:hover,
body .wp-element-button:hover,
body .wp-block-button__link:hover {
	border-color: #fff0a5;
	background: linear-gradient(135deg, #fff0aa 0%, #ffc91c 100%);
	color: #050505;
}

.site-main .pagination .page-numbers,
.site-main .nav-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 6px 12px;
	border: 1px solid var(--df-border);
	border-radius: 7px;
	background: var(--df-panel);
}

.site-main .pagination .current {
	border-color: var(--df-gold);
	background: var(--df-gold);
	color: #090909;
}

/* Topical-map category hubs. */
.df-category-archive {
	width: min(1200px, calc(100% - 40px));
	margin-inline: auto;
}

.df-category-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 18px;
	color: var(--df-text-muted);
	font-size: .94rem;
}

.df-category-breadcrumb a {
	color: var(--df-gold-light);
}

.df-category-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: clamp(28px, 5vw, 48px);
	padding: clamp(26px, 5vw, 54px);
	border: 1px solid var(--df-border);
	border-top: 3px solid var(--df-yellow);
	border-radius: var(--df-radius);
	background:
		radial-gradient(circle at 92% 4%, rgba(255, 211, 49, .18), transparent 20rem),
		linear-gradient(125deg, rgba(255, 211, 49, .11), transparent 34%),
		linear-gradient(180deg, var(--df-panel-raised), var(--df-panel));
	box-shadow: 0 24px 62px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 236, 159, .06);
}

.df-category-hero__eyebrow {
	margin: 0 0 8px;
	color: var(--df-gold);
	font-size: .83rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.df-category-hero__title {
	max-width: 820px;
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.7rem);
	line-height: 1.12;
}

.df-category-hero__description {
	max-width: 830px;
	margin-top: 18px;
	font-size: clamp(1rem, 1.6vw, 1.14rem);
	line-height: 1.8;
}

.df-category-hero__description p:last-child {
	margin-bottom: 0;
}

.df-category-hero__cta,
.df-category-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 9px;
	font-weight: 750;
	text-decoration: none;
}

.df-category-hero__cta {
	margin-top: 22px;
	padding: 11px 18px;
	border: 1px solid #ffcf31;
	background: linear-gradient(135deg, #fff09b 0%, #ffd331 48%, #c58a00 100%);
	box-shadow: 0 8px 22px rgba(244, 189, 25, .14);
	color: #090909;
}

.df-category-hero__cta:hover,
.df-category-hero__cta:focus-visible {
	color: #050505;
}

.df-category-content__heading {
	margin-bottom: 22px;
}

.df-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.df-category-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 1px solid var(--df-border);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(25, 16, 3, .98), rgba(8, 6, 2, .98));
	box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.df-category-card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 211, 49, .62);
	box-shadow: 0 20px 42px rgba(0, 0, 0, .4), 0 0 24px rgba(217, 162, 27, .08);
}

.df-category-card__media {
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: #050505;
}

.df-category-card__image {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

.df-category-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

.df-category-card__label {
	margin: 0 0 8px;
	color: var(--df-gold);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.site-main .df-category-card__title {
	margin: 0;
	padding: 0;
	font-size: clamp(1.17rem, 2vw, 1.42rem);
	line-height: 1.38;
}

.site-main .df-category-card__title::after {
	display: none;
}

.df-category-card__title a {
	color: var(--df-heading-gold);
	text-decoration: none;
}

.df-category-card__excerpt {
	margin: 14px 0 20px;
	color: var(--df-text-muted);
	line-height: 1.7;
}

.df-category-card__link {
	align-self: flex-start;
	margin-top: auto;
	color: var(--df-gold-light);
}

.df-category-empty {
	padding: 26px;
	border: 1px dashed var(--df-border);
	border-radius: 12px;
	background: rgba(12, 8, 1, .78);
}

.df-category-empty h2 {
	margin-top: 0;
}

/* Editorial ownership and update details on imported content. */
.df-editorial-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	margin: 0 0 24px;
	padding: 13px 16px;
	border: 1px solid var(--df-border);
	border-radius: 10px;
	background: rgba(5, 4, 1, .72);
	color: var(--df-text-muted);
	font-size: .92rem;
	line-height: 1.55;
}

.df-editorial-meta strong {
	color: var(--df-text);
}

.df-editorial-meta a {
	margin-left: auto;
	font-weight: 700;
}

/* Thai, task-oriented 404 page. */
.df-404-main {
	display: grid;
	place-items: center;
}

.df-404 {
	width: min(920px, calc(100% - 40px));
	padding: clamp(28px, 6vw, 64px);
	border: 1px solid var(--df-border);
	border-top: 3px solid var(--df-yellow);
	border-radius: var(--df-radius);
	background:
		radial-gradient(circle at 88% 8%, rgba(255, 211, 49, .16), transparent 22rem),
		linear-gradient(135deg, rgba(255, 211, 49, .08), transparent 34%),
		linear-gradient(180deg, var(--df-panel-raised), var(--df-panel));
	box-shadow: 0 24px 62px rgba(0, 0, 0, .42);
}

.df-404__eyebrow {
	margin: 0;
	color: var(--df-gold);
	font-size: clamp(3.6rem, 11vw, 7.5rem);
	font-weight: 800;
	line-height: .9;
	opacity: .42;
}

.df-404 h1 {
	margin: 20px 0 12px;
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.15;
}

.df-404__intro {
	max-width: 700px;
	color: var(--df-text-muted);
	font-size: 1.05rem;
	line-height: 1.8;
}

.df-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.df-404__button {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--df-border);
	border-radius: 9px;
	color: var(--df-gold-light);
	font-weight: 750;
	text-decoration: none;
}

.df-404__button--primary {
	border-color: #ffcf31;
	background: linear-gradient(135deg, #fff09b 0%, #ffd331 48%, #c58a00 100%);
	color: #090909;
}

.df-404__topics {
	margin-top: 36px;
}

.df-404__topics ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.df-404__topics a {
	display: block;
	padding: 14px 16px;
	border: 1px solid rgba(255, 199, 48, .24);
	border-radius: 9px;
	background: rgba(0, 0, 0, .2);
	text-decoration: none;
}

@media (max-width: 980px) {
	.df-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

#comments .comment .comment-body,
#comments .pingback .comment-body {
	border-color: var(--df-border);
}

.site-footer {
	border-top: 1px solid rgba(244, 189, 25, .22);
	background:
		radial-gradient(circle at 50% 0, rgba(244, 189, 25, .07), transparent 28rem),
		#030303;
	color: var(--df-text-muted);
}

.site-footer .footer-inner,
.site-footer:not(.dynamic-footer) {
	padding-block: 28px;
}

.site-footer a {
	color: var(--df-gold);
}

@media (max-width: 767px) {
	html,
	body {
		max-width: 100%;
		overflow-x: clip;
	}

	main.site-main {
		padding-block: 24px 36px;
	}

	body.page main.site-main,
	body.single main.site-main {
		width: min(calc(100% - 24px), 1200px);
	}

	main.site-main h2 {
		font-size: 24px !important;
	}

	main.site-main h3 {
		font-size: 20px !important;
	}

	body:not([class*="elementor-page-"]) .site-main > article,
	body:not([class*="elementor-page-"]) .site-main > .post,
	body:not([class*="elementor-page-"]) .site-main > .page {
		padding: 20px 16px;
		border-radius: 11px;
	}

	.site-main table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		contain: inline-size;
		white-space: nowrap;
	}

	.df-category-archive {
		width: min(100% - 24px, 1200px);
	}

	.df-category-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.df-category-hero,
	.df-category-card__body {
		padding: 20px 16px;
	}

	.df-editorial-meta {
		align-items: flex-start;
		flex-direction: column;
	}

	.df-editorial-meta a {
		margin-left: 0;
	}

	.df-404 {
		width: min(100% - 24px, 920px);
		padding: 28px 18px;
	}

	.df-404__topics ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	body *,
	body *::before,
	body *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
	}
}
