@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

:root {
	--light-bg:#efefef;
	--light-text:#000000;
	--dark-bg-all:#111111;
	--dark-bg:#333333;
	--dark-text:#ffffff;
	--dark-link:#C8D7FF;
}

body {
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-weight: 400;
  font-style: normal;
	background-color:var(--light-bg);
	color:var(--light-text);
}

.dark-mode {
	background-color:var(--dark-bg-all);
	color:var(--dark-text);
}

.dark-mode a {
	color:var(--dark-link);
}

.toggle-dark-mode {
	padding:10px 0;
	text-align:center;
}
#toggle-theme {
	background: url(/sites/default/files/apps/imgs/toggle-dark-light-mode_0.png) no-repeat;
	background-size: auto;
  background-size: 100% 100%;
  text-indent: -5000px;
  width: 50px;
  height: 25px;
  z-index: 1000;
  margin:0;
  padding:0;
  line-height:0;
}

#block-thex-mainnavigation ul.menu {
	display: flex;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
#block-thex-mainnavigation ul.menu li {
	margin: 0.25em;
  background: #fff;
  padding: 0.25em 0.5em;
}
#block-thex-mainnavigation ul.menu li a {
	color:#000;
}

.site-slogan {
	font-size:0.5em;
}

.container {
	max-width:100%;
	padding:20px;
}

.main-wrapper {
	padding:0;
}

.header,
.header .container {
	padding:0;
}


.site-name a {
	color:#fff;
	font-weight:700;
	font-size:1.5em;
}

.content-top {
  color:#fff;
  background:#000;
  padding:10px 20px;
}

.node-content,
.content-bottom {
  background:#fff;
  padding:10px 20px;
}

.page-title {
	font-size: 1.5em;
  line-height: 1.2em;
  margin: 0.5em 0;
}
.homepage .page-title {
	font-size:1.4em;
}

article .node-content {
	padding:0;
}

article h2 { font-size:1.5em; }
article h3 { font-size:1.4em; }
article h4 { font-size:1.3em; }
article h5 { font-size:1.2em; }
article h6 { font-size:1.1em; }

article #block-thex-googleadsensetop {
	margin: 0 0 1.5em 0;
}
#block-thex-googleadsensefooter {
	margin: 0 0 1.5em 0;
}

article ul,
article ol {
	margin:0 0 1.2rem 0;
}

article tr th {
	border:1px solid #ccc;
	background-color:#999;
}
article tr td {
	border:1px solid #ccc;
}

article iframe {
	max-width:100%;
}

.block-term-under-content,
.block-term-info-content {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
  margin:0 0 20px 0;
}
.block-term-under-content .views-field-field-logo img,
.block-term-info-content .views-field-field-profile img {
	width:100%;
	height:auto;
}
.block-term-under-content .views-field-name,
.block-term-info-content .views-field-name {
	font-size:1em;
	font-weight:700;
	text-align:center;
}
.block-term-under-content .views-field-description__value,
.block-term-info-content .views-field-description__value {
	font-size:0.8em;
	color:#333;
}



.page-club-list {
	display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.page-club-list .contextual,
.page-club-list h3 {
	grid-column: span 2;
	text-align:center;
}
.page-club-list .views-row {
	text-align:center;
}
.page-club-list .views-row .views-field-name h4 {
	font-size:1em;
}



.page-node-preview {
	display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 20px;
}
.node-preview-cover {
	position:relative;
}
.node-preview-image img {
	margin:0;
}
.node-preview-created {
	position:absolute;
	top:0;
	left:0;
	background:#000;
	padding:5px 10px;
	color:#fff;
	font-weight:700;
	font-size:0.8em;
}
.node-preview-title {
	background-color:#333;
	padding:10px 20px;
	font-weight:700;
}
.node-preview-title a {
	color:#fff;
}
.node-preview-tags {
	background:#ccc;
	padding:5px 20px;
	font-weight:700;
	font-size:0.8em;
}
.node-preview-tags a {
	color:#000;
}



.page-term-detail {
	margin:0 0 100px 0;
}

.page-term-detail .views-field-field-logo,
.page-term-detail .views-field-field-profile {
	text-align:center;
}
.page-term-detail .views-field-field-logo img,
.page-term-detail .views-field-field-profile img {
	margin:0;
}
.page-term-detail .views-field-name {
	text-align:center;
	font-size:1.6em;
	font-weight:700;
}
.page-term-detail .views-field-field-league-tournament,
.page-term-detail .views-field-field-player-club {
	text-align:center;
	font-size:1.2em;
}


.page-term-detail h2 { font-size:1.25em; }
.page-term-detail h3 { font-size:1.2em; }
.page-term-detail h4 { font-size:1.15em; }
.page-term-detail h5 { font-size:1.1em; }
.page-term-detail h6 { font-size:1.05em; }



.block-term-recent-update {
	display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.block-term-recent-update header {
	grid-column: span 2;
	background: #000;
  padding: 10px 20px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  margin: 0 0 20px 0;
}
.block-term-recent-update .views-field-field-profile img,
.block-term-recent-update .views-field-field-logo img {
	width:100%;
	height:auto;
}
.block-term-recent-update .views-field-name {
	font-size:1.1em;
	font-weight:bold;
	text-align:center;
}
.block-term-recent-update .views-field-description__value {
	font-size:0.8em;
	color:#333;
}

.table-standings table th,
.table-standings table td {
	border:1px solid #ccc;
}

.views-field-field-goals-for-for,
.views-field-field-goals-against-against,
.views-field-field-goals-diff {
	display:none;
}


#comments {
	background:#eee;
	padding:10px 20px;
}
#comments .comment {
	background:#fff;
}
#comments .comment-header,
#comments .comment-meta {
	padding:0;
}
#comments .comment-title {
	display:none;
}


/** login with google **/

#edit-openid-connect-client-google-login {
  background: url('/sites/default/files/apps/imgs/Google__G__logo.svg') #fff no-repeat 16px 8px;
  color: #000;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 24px 10px 52px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#edit-openid-connect-client-google-login:hover {
  background-color: #f7f9fa;
}



/* ----- dark mode ----- */

.dark-mode .node-content,
.dark-mode .content-bottom {
	background-color:var(--dark-bg);
	color:var(--dark-text);
}
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
	color:var(--dark-text);
}
.dark-mode #block-thex-mainnavigation ul.menu li {
  background: #666;
}
.dark-mode #block-thex-mainnavigation ul.menu li a {
	color:#fff;
}
.dark-mode .footer {
	background-color:var(--dark-bg);
}
.dark-mode .node-preview-title {
	background-color:var(--dark-bg-all);
}
.dark-mode #comments {
	background:#666;
	color:var(--dark-text);
}
.dark-mode #comments .comment {
	background:var(--dark-bg);
}


.comment-login-prompt {
  width: 100%;
  margin: 0;
  font-family: Arial, sans-serif; /* ใช้ฟอนต์ที่อ่านง่าย */
  background: #eee;
  padding: 10px 20px;
}

.fake-comment-box {
  width: 100%;
  box-sizing: border-box; /* ทำให้ padding ไม่กระทบความกว้าง */
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f5f5f5; /* สีพื้นหลังเทาอ่อนๆ ดู 'disabled' */
  cursor: not-allowed; /* เปลี่ยนเมาส์เป็นรูป "ห้าม" เมื่อชี้ */
  resize: vertical; /* อนุญาตให้ย่อขยายเฉพาะแนวตั้ง */
}

/* จัดสไตล์ข้อความ placeholder ภายในกล่อง */
.fake-comment-box::placeholder {
  color: #777;
  font-style: italic;
}

/* สไตล์ปุ่มสำหรับล็อกอิน */
.login-button-for-comment {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #007bff; /* สีปุ่ม (สีฟ้า) */
  color: #ffffff; /* สีตัวอักษร */
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}

.login-button-for-comment:hover {
  background-color: #0056b3; /* สีปุ่มเมื่อเมาส์ชี้ */
}



.feed-icon {
	display:none;
}

@media screen and (min-width:768px) {

	.main-content {
	  display: grid;
	  grid-template-columns: minmax(100px, 50%) minmax(100px, 50%);
	  grid-template-rows: auto auto auto;
	  gap: 20px;
	  width: 100%;
	}
	
	.content-top {
	  grid-column: 2;
	  grid-row: 1;
	}
	
	.node-content {
	  grid-column: 1;
	  grid-row: 1 / 4;
	}
	
	.content-bottom {
	  grid-column: 2;
	  grid-row: 2;
	}

	.page-club-list {
		display: grid;
	  grid-template-columns: repeat(4,minmax(0,1fr));
	  gap: 20px;
	}
	.page-club-list .contextual,
	.page-club-list h3 {
		grid-column: span 4;
	}

	.views-field-field-goals-for-for,
	.views-field-field-goals-against-against,
	.views-field-field-goals-diff {
		display:revert;
	}

}



@media screen and (min-width:990px) {


	.page-node-preview {
		display: grid;
	  grid-template-columns: repeat(2,minmax(0,1fr));
	  gap: 20px;
	}
	.page-node-preview header,
	.page-node-preview .pager {
		grid-column: span 2;
	}


	.block-term-under-content,
	.block-term-info-content {
	  display: grid;
	  grid-template-columns: repeat(4,minmax(0,1fr));
	  gap: 20px;
	}


	.block-term-recent-update {
		display: grid;
	  grid-template-columns: repeat(3,minmax(0,1fr));
	  gap: 20px;
	}
	.block-term-recent-update header {
		grid-column: span 3;
	}

}


@media screen and (min-width:1200px) {

	.block-term-recent-update {
		display: grid;
	  grid-template-columns: repeat(4,minmax(0,1fr));
	  gap: 20px;
	}
	.block-term-recent-update header {
		grid-column: span 4;
	}

	.block-term-under-content,
	.block-term-info-content {
	  display: grid;
	  grid-template-columns: repeat(4,minmax(0,1fr));
	  gap: 20px;
	}

}