/*
Theme Name: AVSUBX
Theme URI: https://www.avsubx.com/
Author: AVSUBX
Description: ธีมสำหรับเว็บดูหนัง JAV ซับไทย ทำงานกับ Classic Editor โดยเฉพาะ ใช้ Custom Post Type "movie" พร้อม taxonomy นักแสดง / แนว / ค่าย / ปี เรนเดอร์เลย์เอาต์จากฟิลด์ข้อมูล ไม่ต้องแปะ HTML ในโพสต์
Version: 2.0.6
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avsubx
Tags: dark, custom-menu, custom-logo, grid-layout, translation-ready
*/

/* ============================================================
   Tokens
   Near-black with a blue cast rather than pure black: on phone
   screens #000 swallows card edges, this keeps depth readable.
   ============================================================ */
:root{
  --bg:#0a0c10;
  --surface:#141821;
  --surface-2:#1b2029;
  --line:#252b36;
  --text:#e6e8ee;
  --dim:#8b93a5;
  --mute:#5d6577;
  --accent:#ff4d6d;
  --accent-hover:#ff6b85;
  --accent-2:#8b7cf6;
  --r:14px;
  --max:1240px;
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",Prompt,Tahoma,sans-serif;
  font-size:15px;line-height:1.75;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
h1,h2,h3{color:#fff;line-height:1.45;margin:0 0 14px}
p{margin:0 0 14px;color:#b9c0cd}
.avx-wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.avx-skip{position:absolute;left:-9999px}
.avx-skip:focus{left:8px;top:8px;background:var(--accent);color:#fff;padding:8px 14px;z-index:999}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* ============================================================
   Sticky header. Search lives here because code lookups are the
   single most common action - it must never scroll out of reach.
   ============================================================ */
.avx-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,12,16,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
body.admin-bar .avx-header{top:32px}
.avx-header-inner{
  max-width:var(--max);margin:0 auto;padding:11px 16px;
  display:flex;align-items:center;gap:14px;
}
.avx-brand{font-size:19px;font-weight:800;letter-spacing:-.3px;white-space:nowrap;color:#fff}
.avx-brand:hover{color:#fff}
.avx-brand em{color:var(--accent);font-style:normal}
.avx-brand img{max-height:40px;width:auto}

.avx-search-form{
  flex:1 1 auto;min-width:0;max-width:520px;display:flex;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;overflow:hidden;
}
.avx-search-form input[type="search"]{
  flex:1 1 auto;min-width:0;background:none;border:0;outline:0;box-shadow:none;
  color:var(--text);padding:9px 16px;font:inherit;font-size:13.5px;
}
.avx-search-form input::placeholder{color:var(--mute);opacity:1}
.avx-search-form button{
  flex:0 0 auto;background:var(--accent);border:0;color:#fff;
  font:inherit;font-size:13px;font-weight:700;padding:9px 20px;cursor:pointer;
}
.avx-search-form button:hover{background:var(--accent-hover)}

/* No margin-left:auto here. Pushing the nav to the far right left a dead gap
   between it and the search box, because the search stops growing at its
   max-width. Sitting right after the search keeps the row visually together. */
.avx-nav{margin-left:2px;margin-right:auto}
.avx-nav ul{list-style:none;display:flex;gap:4px;margin:0;padding:0}
.avx-nav a{display:block;color:var(--dim);font-size:13.5px;padding:7px 12px;border-radius:8px}
.avx-nav a:hover,.avx-nav .current-menu-item>a{background:var(--surface-2);color:var(--text)}
.avx-nav-toggle{
  display:none;margin-left:auto;background:var(--surface-2);border:1px solid var(--line);
  color:var(--text);border-radius:8px;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer;
}

/* ============================================================
   Genre rail - horizontal filter strip under the header
   ============================================================ */
.avx-rail{border-bottom:1px solid var(--line);background:var(--bg)}
.avx-rail-inner{
  max-width:var(--max);margin:0 auto;padding:11px 16px;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
}
.avx-rail-inner::-webkit-scrollbar{display:none}
.avx-rail a{
  flex:0 0 auto;font-size:12.5px;padding:6px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--dim);white-space:nowrap;
}
.avx-rail a:hover{color:var(--text);border-color:#39414f}
.avx-rail a.is-active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ============================================================
   Layout
   ============================================================ */
.avx-main{padding:22px 0 34px}
.avx-breadcrumb{font-size:12.5px;color:var(--mute);margin:0 0 14px}
.avx-breadcrumb a{color:var(--dim)}
.avx-page-title{font-size:21px;font-weight:800;margin:0 0 5px}
.avx-page-sub{color:var(--dim);font-size:13.5px;margin:0 0 20px}

.avx-sec-title{
  font-size:15px;font-weight:800;margin:26px 0 14px;
  display:flex;align-items:center;gap:9px;color:#fff;
}
.avx-sec-title::before{content:"";width:3px;height:16px;background:var(--accent);border-radius:2px;flex:0 0 auto}
.avx-sec-title .avx-sec-aside{margin-left:auto;font-size:12px;color:var(--mute);font-weight:500}

/* ============================================================
   Poster grid
   ============================================================ */
.avx-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:0 0 4px}
.avx-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .18s,transform .18s;
}
.avx-card:hover{border-color:#3a4252;transform:translateY(-2px)}
.avx-card-thumb{position:relative;display:block;aspect-ratio:3/4;background:linear-gradient(150deg,#2a3140,#171b24);overflow:hidden}
.avx-card-thumb img{width:100%;height:100%;object-fit:cover}
.avx-card-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,7,10,.92) 0%,rgba(5,7,10,0) 52%);
}
.avx-card-noimg{display:flex;align-items:center;justify-content:center;height:100%;color:#3d4455;font-size:12px}
.avx-card-code{
  position:absolute;top:9px;left:9px;z-index:2;
  background:rgba(5,7,10,.82);border:1px solid rgba(255,255,255,.1);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;padding:3px 8px;border-radius:6px;
}
.avx-card-badge{
  position:absolute;top:9px;right:9px;z-index:2;background:var(--accent);color:#fff;
  font-size:9.5px;font-weight:800;padding:3px 7px;border-radius:5px;
}
.avx-card-dur{position:absolute;bottom:9px;right:9px;z-index:2;font-size:10.5px;color:#cfd4de}
.avx-card-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;background:rgba(255,77,109,.92);
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;
}
.avx-card:hover .avx-card-play{opacity:1}
.avx-card-play::after{
  content:"";border-left:13px solid #fff;
  border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px;
}
.avx-card-body{padding:10px 11px 12px}
.avx-card-title{font-size:12.5px;line-height:1.5;font-weight:600;margin:0}
.avx-card-title a{color:#dfe3ea;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.avx-card-title a:hover{color:var(--accent)}
.avx-card-meta{margin-top:6px;font-size:11px;color:var(--mute);display:flex;gap:9px;flex-wrap:wrap}
.avx-card-meta .avx-card-actress{color:var(--accent-2);font-weight:600}

/* ============================================================
   Actress rail - the biggest long-tail opportunity, so it gets
   its own presentation rather than hiding inside a tag list.
   ============================================================ */
.avx-faces{display:flex;gap:16px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.avx-faces::-webkit-scrollbar{display:none}
.avx-face{flex:0 0 auto;width:92px;text-align:center}
/* display:block is required - this is a <span>, and without it the width,
   height and overflow below are ignored, so the poster spills out of the
   circle instead of being cropped to it. */
.avx-face-av{
  display:block;
  width:74px;height:74px;border-radius:50%;margin:0 auto 7px;overflow:hidden;
  background:linear-gradient(145deg,#2c3342,#1a1f29);border:2px solid var(--line);
}
.avx-face:hover .avx-face-av{border-color:var(--accent-2)}
.avx-face-av img{width:100%;height:100%;object-fit:cover}
.avx-face-name{font-size:11.5px;color:var(--dim);line-height:1.4;display:block}
.avx-face:hover .avx-face-name{color:var(--text)}
.avx-face-count{font-size:10px;color:var(--mute)}

/* ============================================================
   Ad slots - reserved height so they cannot shift layout (CLS)
   ============================================================ */
.avx-ad{
  min-height:90px;display:flex;align-items:center;justify-content:center;
  border:1px dashed #39414f;border-radius:10px;margin:22px 0;
  color:var(--mute);font-size:11.5px;letter-spacing:1px;overflow:hidden;
}

/* ============================================================
   Single movie
   ============================================================ */
.avx-player{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
}
.avx-player video{width:100%;height:100%;display:block;background:#000}
.avx-player-missing{display:flex;align-items:center;justify-content:center;height:100%;color:var(--mute);font-size:14px;text-align:center;padding:20px}
.avx-note{margin:10px 0 0;font-size:12.5px;color:var(--mute);text-align:center}

.avx-title{font-size:21px;font-weight:800;line-height:1.5;margin:18px 0 0}
.avx-title .avx-code{color:var(--accent)}
.avx-spec{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.avx-spec span{
  font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--dim);padding:5px 11px;border-radius:999px;
}

.avx-two{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:22px}
.avx-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.avx-panel h2{font-size:12px;letter-spacing:1.4px;color:var(--accent);margin:0 0 12px;text-transform:uppercase}
.avx-panel p{font-size:13.5px;line-height:1.85}
.avx-panel p:last-child{margin-bottom:0}
.avx-kv{display:flex;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}
.avx-kv:last-child{border-bottom:0}
.avx-kv b{flex:0 0 104px;color:var(--mute);font-weight:500;font-size:12.5px}
.avx-kv span{color:#d4d9e2}
.avx-kv a{color:var(--accent-2)}
.avx-kv a:hover{color:#a99bff}

/* ============================================================
   Pagination
   ============================================================ */
.avx-pagination{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:26px 0 0}
.avx-pagination .page-numbers{
  display:inline-block;padding:8px 14px;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;color:var(--dim);font-size:14px;
}
.avx-pagination .page-numbers:hover{border-color:var(--accent);color:#fff}
.avx-pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ============================================================
   Footer / empty state
   ============================================================ */
.avx-footer{background:var(--surface);border-top:1px solid var(--line);padding:26px 16px;margin-top:38px}
.avx-footer-inner{max-width:var(--max);margin:0 auto;text-align:center;font-size:13px;color:var(--mute)}
.avx-footer-inner p{color:var(--mute);margin:0 0 8px}
.avx-taxlist{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin:0 0 14px;font-size:13px}
.avx-taxlist ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 14px;margin:0;padding:0}
.avx-empty{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:40px 20px;text-align:center;color:var(--dim);
}

/* ============================================================
   Responsive - phone first in practice, most traffic is mobile
   ============================================================ */
@media (max-width:1080px){
  .avx-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .avx-two{grid-template-columns:1fr}
  .avx-grid{grid-template-columns:repeat(3,1fr)}
  .avx-nav-toggle{display:block}
  .avx-nav{flex-basis:100%;margin-left:0;display:none}
  .avx-nav.is-open{display:block}
  .avx-nav ul{flex-direction:column}
  .avx-header-inner{flex-wrap:wrap}
  .avx-search-form{order:3;flex-basis:100%;max-width:none}
}
@media (max-width:600px){
  body{font-size:14.5px}
  .avx-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .avx-title{font-size:17px}
  .avx-page-title{font-size:18px}
  .avx-card-title{font-size:12px}
  .avx-panel{padding:14px}
  .avx-kv{flex-direction:column;gap:2px}
  .avx-kv b{flex-basis:auto}
  .avx-face{width:78px}
  .avx-face-av{width:64px;height:64px}
}