/*
Theme Name: UFA LOGIN
Description: ธีม Landing page ธีมมืด-ทอง สำหรับเว็บเดิมพัน เมนูจัดการผ่าน Appearance > Menus ลิงก์ปุ่มและโลโก้ผ่าน Customizer ส่วนข่าวสารดึงจากโพสต์อัตโนมัติ
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: ufa-login
Tags: landing-page, custom-menu, custom-logo, translation-ready
*/

/* =========================================================
   เขียนขึ้นใหม่ทั้งไฟล์ ไม่มีโค้ดจากที่อื่น
   ต้องการเปลี่ยนธีมทั้งเว็บ: แก้ตัวแปรใน :root ด้านล่างพอ
   ========================================================= */

:root{
  /* ---------- โทนสี (แก้ 4 ค่านี้ = เปลี่ยนทั้งเว็บ) ---------- */
  --bg:          #2a2a2a;   /* พื้นหลังเว็บ */
  --accent:      #e7d39d;   /* สีเน้น (ทองอ่อน) */
  --accent-dark: #b19560;   /* สีเน้นเข้ม ใช้ทำ gradient */
  --text:        #ebc76e;   /* สีตัวอักษรหลัก */
  --text-strong: #ffffff;   /* หัวข้อ/ตัวเน้น */
  --line-green:  #06C755;   /* สีแบรนด์ LINE (ใช้เฉพาะปุ่ม LINE) */
  --kw:          #ff6b6b;   /* สีเน้นคีย์เวิร์ดในบทความ */

  /* ---------- โครงสร้าง ---------- */
  --content-width: 1200px;  /* ความกว้างหน้า */
  --text-width:     820px;  /* ความยาวบรรทัดบทความ ไม่ปล่อยให้ยาวจนหาบรรทัดถัดไปไม่เจอ */
  --nav-width:      120px;  /* คอลัมน์เมนูหมวดด้านซ้าย */
  --gap:             16px;
  --radius:          10px;

  /* ---------- พาเนล (ใช้ซ้ำทั้งบทความ / FAQ / หมวดเกม / การ์ดข่าว) ---------- */
  --panel-bg:     rgba(255,255,255,.035);
  --panel-border: 1px solid rgba(231,211,157,.18);
  --panel-radius: 12px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto,
          "Noto Sans Thai", "Sarabun", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ max-width:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ color:var(--text-strong); line-height:1.3; }

.container{
  width:100%;
  max-width:var(--content-width);
  margin-inline:auto;
  padding-inline:10px;
}

.screen-reader-text{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- ปุ่มหลัก ---------- */
.btn-gold{
  display:inline-block;
  padding:.75em 1.6em;
  border:0;
  border-radius:5em;
  background:linear-gradient(to bottom,var(--accent),var(--accent-dark));
  color:#000;
  font:inherit;
  font-weight:700;
  text-align:center;
  cursor:pointer;
  transition:filter .15s;
}
.btn-gold:hover{ filter:brightness(1.08); }
.btn-gold:active{ filter:brightness(.94); }

:where(button,a,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* =========================================================
   1. HEADER
   ========================================================= */
.site-header{ position:relative; z-index:20; }
.header-bar{ background:rgba(0,0,0,.5); }

.header-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-block:12px;
}

/* ปุ่มแฮมเบอร์เกอร์ (วาดด้วย span 3 อัน) */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px; height:38px;
  padding:0;
  background:none; border:0;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  transition:transform .2s, opacity .2s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.site-logo img{ width:230px; height:auto; }
.site-logo .site-title{ font-size:26px; font-weight:800; color:var(--accent); }

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.header-btn{ padding:.6em 1.35em; font-size:15px; white-space:nowrap; }

/* ปุ่ม LINE — สีแบรนด์ ทับ gradient ทองของ .btn-gold
   ตัวอักษรสีดำ ไม่ใช่ขาว: ดำบนเขียว LINE ได้ contrast 9.3:1 ขาวได้แค่ 2.3:1 (ตก WCAG AA) */
.btn-line{
  background:var(--line-green);
  color:#000;
}
.btn-line:hover{ background:var(--line-green); }

.below-header{
  background:rgba(0,0,0,.35);
  border-bottom:1px solid rgba(231,211,157,.12);
}
.main-menu{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:8px; margin:0; padding-block:4px; list-style:none;
}
.main-menu li{ position:relative; }
.main-menu a{
  display:block;
  padding:11px 22px;
  font-size:16px;
  border-radius:8px;
  transition:background .15s, color .15s;
}
.main-menu a:hover{ color:var(--accent); background:rgba(231,211,157,.08); }
.main-menu .current-menu-item > a{ color:var(--accent); }

/* เมนูย่อยชั้นที่ 2 (ถ้าผู้ใช้สร้างใน Appearance > Menus) */
.main-menu .sub-menu{
  display:none;
  position:absolute; left:0; top:100%;
  min-width:200px;
  margin:0; padding:6px;
  list-style:none;
  background:#1f1f1f;
  border:var(--panel-border);
  border-radius:var(--panel-radius);
  z-index:30;
}
.main-menu li:hover > .sub-menu,
.main-menu li:focus-within > .sub-menu{ display:block; }
.main-menu .sub-menu a{ padding:9px 14px; font-size:15px; text-align:left; }

.mobile-menu{ display:none; background:rgba(0,0,0,.65); }
.mobile-menu.is-open{ display:block; }
.mobile-menu ul{ margin:0; padding:0; list-style:none; }
.mobile-menu a{
  display:block; padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-menu .sub-menu a{ padding-left:32px; font-size:15px; }

/* =========================================================
   2. บทความ — พื้นพาเนล ให้คอลัมน์แคบกลางจอดูตั้งใจ ไม่ใช่ลอย
   ========================================================= */
.page-intro,
.page-section{
  max-width:var(--text-width);
  margin:2.6em auto;
  padding:30px 38px;
  background:var(--panel-bg);
  border:var(--panel-border);
  border-radius:var(--panel-radius);
}
.page-intro{ margin-top:2.2em; }

.page-intro h1{
  font-size:34px;
  line-height:1.45;
  text-align:center;
  margin:0 0 .7em;
}
.page-intro p,
.page-section p{
  margin:0 0 1.15em;
  line-height:1.95;      /* ภาษาไทยมีสระบน-ล่าง ต้องการระยะบรรทัดมากกว่าปกติ */
  text-align:center;
}
.page-intro p:last-child,
.page-section p:last-child{ margin-bottom:0; }

.page-section h2{
  font-size:28px;
  line-height:1.45;
  text-align:center;
  margin:0 0 .7em;
}

/* คีย์เวิร์ดที่ต้องการเน้น — เปลี่ยนสีที่ --kw ด้านบนที่เดียว
   #ff6b6b ไม่ใช่แดงล้วน: บนพื้นดำ #ff0000 ได้ contrast แค่ 3.6:1 ตัวนี้ได้ 5.2:1 */
.kw{
  color:var(--kw);
  font-weight:700;
}

/* =========================================================
   3. ปุ่ม CTA
   ========================================================= */
.cta-row{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:14px;
  margin-block:2em;
}
.cta-row .btn-gold{ font-size:17px; padding:.8em 2.1em; }

/* =========================================================
   5. หมวดเกม — แถบหมวดซ้าย + กริดการ์ดขวา ครอบเป็นพาเนลเดียว
   ========================================================= */
.category-container{
  display:flex;
  max-width:var(--content-width);
  margin:3em auto;
  padding:18px;
  gap:18px;
  background:var(--panel-bg);
  border:var(--panel-border);
  border-radius:var(--panel-radius);
}

/* คอลัมน์เมนูซ้าย */
.nav-container{
  flex:0 0 var(--nav-width);
  width:var(--nav-width);
  border-right:1px solid rgba(231,211,157,.14);
  padding-right:6px;
}

/* ปุ่มหมวดสูง 58px เพื่อให้คอลัมน์ 9 ปุ่ม (586px) สูงใกล้เคียงกริดการ์ด 2 แถว (577px)
   ถ้าเพิ่ม/ลดจำนวนหมวด หรือเปลี่ยนจำนวนการ์ดต่อหมวด ต้องปรับค่านี้ใหม่ */
.menu-left-btn-container{ padding:0 0 8px; }

.menu-left-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100px; height:58px;
  padding:6px 0;
  border:0;
  border-radius:14px;
  background:linear-gradient(to bottom,#393939,#292929);
  box-shadow:0 5px 7px rgba(0,0,0,.55);
  color:var(--text);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s, filter .15s;
}
.menu-left-btn:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.menu-left-btn.active{
  background:linear-gradient(to bottom,var(--accent),var(--accent-dark));
  color:#000;
}

.menu-left-btn img{ width:26px; height:26px; }
.menu-left-btn.active img{ width:32px; height:32px; margin-top:-4px; }

.menu-text{ margin-top:3px; font-size:11px; white-space:nowrap; }
.menu-left-btn.active .menu-text{ margin-top:-2px; }

/* กริดการ์ด — 3 ใบ/แถว: การ์ด 6 ใบ = 3+3 สองแถวเต็ม ไม่มีแถวแหว่ง
   minmax(0,1fr) จำเป็น ไม่งั้นช่องกริดหดต่ำกว่าความกว้างธรรมชาติของรูปไม่ได้ */
.game-container{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
  align-content:start;    /* ไม่งั้นแถวถูกยืดเต็มความสูงพาเนล เกิดช่องโหว่กลางกริด */
  flex:1 1 auto;
  min-width:0;
}
.game-container[hidden]{ display:none; }

.game_card_container{ display:block; }
.game_card_container.is-wide{ grid-column:1 / -1; }

/* การ์ดเกมเป็นรูปเฉย ๆ ไม่ได้ครอบด้วย <a> แต่ให้เอฟเฟกต์เหมือนกดได้
   hover = ยกขึ้น + ขอบทองสว่าง, active = กดยุบลง */
.game_image{
  width:100%;
  aspect-ratio:235/200;   /* บังคับสัดส่วน ทุกใบในแถวจะสูงเท่ากันเป๊ะ */
  object-fit:cover;
  border:1px solid rgba(231,211,157,.14);
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
/* การ์ดเต็มแถว (หวย/อีสปอร์ต) กว้าง ~1020px
   ถ้าคงสัดส่วนเดิม 490x239 จะสูงถึง 500px ครึ่งจอ เลยแบนลงเป็นแบนเนอร์ 1020x300 */
.is-wide .game_image{ aspect-ratio:3.4/1; }
.game_image:hover{
  transform:translateY(-3px);
  border-color:rgba(231,211,157,.5);
  box-shadow:0 8px 16px rgba(0,0,0,.45);
}
.game_image:active{
  transform:translateY(-1px) scale(.985);
  box-shadow:0 3px 7px rgba(0,0,0,.4);
}

/* =========================================================
   7. คำถามที่พบบ่อย (FAQ)
   ========================================================= */
.faq{
  max-width:var(--text-width);
  margin:3em auto;
  padding-inline:14px;
}
.faq > h2{
  font-size:28px;
  line-height:1.45;
  text-align:center;
  margin:0 0 1.1em;
}

.faq-item{
  background:var(--panel-bg);
  border:var(--panel-border);
  border-radius:var(--panel-radius);
  padding:20px 24px;
  margin-bottom:14px;
}
.faq-item:last-child{ margin-bottom:0; }

.faq-item h3{
  font-size:18px;
  line-height:1.5;
  color:var(--accent);
  text-align:center;
  margin:0 0 .6em;
}
.faq-item p{
  margin:0;
  line-height:1.9;
  text-align:center;
}

/* =========================================================
   8. ข่าวสารล่าสุด — ดึงจากโพสต์ WordPress
   ========================================================= */
.news{
  max-width:var(--content-width);
  margin:3em auto 3.5em;
  padding-inline:14px;
}
.news-head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}
.news-head::before{ content:""; }   /* ช่องซ้ายเปล่า ให้หัวข้ออยู่กึ่งกลางจริง */
.news-head h2{ margin:0; font-size:28px; }
.news-all{
  justify-self:end;
  display:inline-flex; align-items:center; gap:7px;
  padding:.6em 1.4em;
  border-radius:5em;
  background:linear-gradient(to bottom,var(--accent),var(--accent-dark));
  color:#000; font-weight:700; font-size:15px; white-space:nowrap;
  transition:filter .15s;
}
.news-all:hover{ filter:brightness(1.08); }

.news-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}
.news-card{
  display:flex;
  gap:14px;
  padding:14px;
  background:var(--panel-bg);
  border:var(--panel-border);
  border-radius:var(--panel-radius);
  transition:transform .15s, border-color .15s;
}
.news-card:hover{ transform:translateY(-3px); border-color:rgba(231,211,157,.45); }

.news-thumb{ flex:0 0 38%; }
.news-thumb img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:9px;
}
.news-body{
  min-width:0;
  display:flex; flex-direction:column;
  text-align:left;      /* การ์ดข่าวชิดซ้าย — กล่องแคบ จัดกลางแล้วขอบเป็นฟันปลา */
}
.news-cat{ color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.3px; }
.news-title{
  margin:.35em 0 .6em;
  font-size:16px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;  /* เกิน 2 บรรทัดตัด … ให้การ์ดสูงเท่ากัน */
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.news-title a:hover{ color:var(--accent); }
.news-date{ margin-top:auto; font-size:12.5px; opacity:.7; }
.news-empty{ text-align:center; opacity:.75; }

/* =========================================================
   9. หน้าบทความ / คลังบทความ (single, archive, page, 404, search)
   ========================================================= */
.content-area{
  max-width:var(--text-width);
  margin:2.6em auto;
  padding:30px 38px;
  background:var(--panel-bg);
  border:var(--panel-border);
  border-radius:var(--panel-radius);
}
.content-area h1{ font-size:32px; line-height:1.45; text-align:center; margin:0 0 .5em; }
.content-area .entry-meta{ text-align:center; font-size:14px; opacity:.72; margin-bottom:1.6em; }
.content-area p{ line-height:1.95; margin:0 0 1.15em; }
.content-area h2{ font-size:24px; margin:1.4em 0 .6em; }
.content-area h3{ font-size:19px; margin:1.2em 0 .5em; }
.content-area ul,
.content-area ol{ line-height:1.95; padding-left:1.6em; }
.content-area img{ border-radius:var(--radius); margin-inline:auto; }
.content-area a{ color:var(--accent); text-decoration:underline; }
.entry-thumb{ margin-bottom:1.6em; }
.entry-thumb img{ width:100%; border-radius:var(--radius); }

.archive-head{ max-width:var(--content-width); margin:2.2em auto 0; padding-inline:14px; }
.archive-head h1{ font-size:30px; text-align:center; margin:0; }

.pagination{
  max-width:var(--content-width);
  margin:2em auto 3em;
  padding-inline:14px;
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
}
.pagination .page-numbers{
  display:inline-block;
  padding:.5em 1em;
  border:var(--panel-border);
  border-radius:8px;
}
.pagination .current{ background:var(--accent); color:#000; font-weight:700; }

.search-form{ display:flex; justify-content:center; gap:8px; margin:1.4em 0; }
.search-form input[type="search"]{
  padding:.6em 1em;
  border:var(--panel-border);
  border-radius:8px;
  background:rgba(0,0,0,.3);
  color:var(--text);
  font:inherit;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  margin-top:2em;
  padding:2.4em 14px;
  border-top:1px solid rgba(231,211,157,.12);
  text-align:center;
  font-size:14px;
}
.footer-menu{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:6px; margin:0 0 1em; padding:0; list-style:none;
}
.footer-menu a{ padding:4px 12px; }
.footer-menu a:hover{ color:var(--accent); }

/* =========================================================
   เรสปอนซีฟ
   ========================================================= */
@media (max-width:1199px){
  /* การ์ดเกมคง 3 ใบ/แถวไว้จนถึง 768 — ลดเหลือ 2 จะกลายเป็น 3 แถว
     สูงกว่าคอลัมน์เมนูมาก แล้วเกิดที่ว่างฝั่งซ้ายแทน */
  .is-wide .game_image{ aspect-ratio:2.6/1; }
  .news-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-intro h1{ font-size:30px; }
  .page-section h2,
  .faq > h2,
  .news-head h2,
  .content-area h1{ font-size:26px; }
}

@media (max-width:921px){
  body{ font-size:16px; }

  .menu-toggle{ display:flex; }
  .below-header{ display:none; }
  .site-logo img{ width:150px; }

  /* 3 ปุ่มไม่พอที่แถวเดียว -> แฮมเบอร์เกอร์+โลโก้แถวบน, ปุ่มแถวล่าง */
  .header-grid{
    display:grid;
    grid-template-columns:38px 1fr 38px;
    align-items:center;
    row-gap:8px;
  }
  .site-logo{ grid-column:2; justify-self:center; }
  .header-actions{
    grid-column:1 / -1;
    justify-content:center;
    flex-wrap:wrap;
  }
  .header-btn{ padding:.45em .95em; font-size:13px; }

  .page-intro,
  .page-section,
  .content-area{ padding:24px 26px; margin-block:2em; }
  .page-intro h1{ font-size:24px; }
  .page-section h2,
  .faq > h2,
  .news-head h2,
  .content-area h1{ font-size:22px; }
  .page-intro p,
  .page-section p{ line-height:1.9; }
  .faq-item h3{ font-size:16px; }
  .cta-row .btn-gold{ font-size:15px; padding:.75em 1.7em; }
}

@media (max-width:767px){
  .game-container{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .is-wide .game_image{ aspect-ratio:490/239; }   /* จอแคบ กลับไปสัดส่วนเดิมได้ */

  .news-grid{ grid-template-columns:minmax(0,1fr); }
  .news-head{ grid-template-columns:1fr auto; gap:12px; }
  .news-head::before{ display:none; }
  .news-head h2{ text-align:left; font-size:20px; }
  .news-all{ padding:.5em 1.1em; font-size:14px; }

  .page-intro,
  .page-section,
  .content-area{ padding:20px 18px; }
  .faq-item{ padding:16px; }

  /* เมนูหมวด 9 อัน: คอลัมน์ซ้าย -> แถบเลื่อนแนวนอนด้านบน */
  .category-container{ flex-direction:column; padding:14px; gap:12px; }
  .nav-container{
    flex:0 0 auto; width:100%;
    display:flex; gap:10px;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid rgba(231,211,157,.14);
    padding:0 0 12px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .menu-left-btn-container{ flex:0 0 auto; padding:0; }
  .menu-left-btn{ width:84px; height:66px; }
  .menu-left-btn img{ width:28px; height:28px; }
  .menu-left-btn.active img{ width:36px; height:36px; }
}

@media (max-width:420px){
  .news-thumb{ flex:0 0 34%; }
  .news-title{ font-size:15px; }
  .game-container{ gap:10px; }
}

/* ลดการเคลื่อนไหวถ้าผู้ใช้ตั้งค่าไว้ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}