/*
 * Theme 2026-10 — aligns Publish with QuizPro (quizpro.kruchiangrai.net).
 *
 * Loaded right after assets/styles.css on every page. It only redefines
 * tokens and refines components; it does not use a blanket !important layer.
 * Values come from QuizPro's source, verified against the live site on
 * 2026-10-28. Contrast for every text/background pair here was computed:
 * see the comment beside each colour.
 *
 * Rollback: delete the <link> to this file (or this file). styles.css is
 * unchanged.
 */

/* Sarabun — SIL Open Font License 1.1, see assets/fonts/Sarabun-OFL.txt.
   Only the weights actually needed: 400 body, 600 labels, 700 headings and
   buttons (heavier declared weights such as 800/850/900 resolve to 700). */
@font-face{font-family:"Sarabun";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/sarabun-400.ttf") format("truetype")}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/sarabun-600.ttf") format("truetype")}
@font-face{font-family:"Sarabun";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/sarabun-700.ttf") format("truetype")}

:root{
  /* QuizPro palette */
  --color-brand:#159b9f;        /* decorative only: 3.38:1 on white, never text */
  --color-primary:#087f87;      /* white text on it 4.78:1; 4.78:1 against white page */
  --color-primary-hover:#066c73;/* white text 6.18:1 */
  --color-brand-dark:#045565;   /* links 8.43:1 */
  --color-text:#123d48;         /* 11.75:1 */
  --color-muted:#526b73;        /* 5.66:1 on white, 5.33:1 on soft */
  --color-border:#dce8e9;       /* decorative card borders */
  --color-input-border:#66969a; /* form field boundary 3.28:1 (WCAG 1.4.11) */
  --color-soft:#f0fafa;
  --color-pale:#d7f4f3;
  --color-focus:#087f87;        /* focus ring 4.78:1 (QuizPro's #45bfc2 is 2.21:1) */
  --radius-button:12px;
  --radius-card:18px;
  --shadow-card:0 6px 26px rgba(18,61,72,.06);
  --shadow-card-hover:0 12px 32px rgba(18,61,72,.10);

  /* Map onto the token names styles.css already uses, so every existing
     var() follows without touching its selectors. */
  --text:var(--color-text);
  --muted:var(--color-muted);
  --line:var(--color-border);
  --brand:var(--color-primary);
  --brand-dark:var(--color-brand-dark);
  --brand-2:var(--color-text);
  --soft:var(--color-soft);
  --radius:var(--radius-button);
  --shadow:var(--shadow-card);
  /* --accent (amber) stays as a highlight colour only. */
}

body{
  font-family:"Sarabun","Leelawadee UI",Tahoma,system-ui,sans-serif;
  font-size:1.0625rem;          /* 17px, like QuizPro; set on body, not html, so rem-based layout is unchanged */
  line-height:1.75;
  color:var(--color-text);
}
h1,h2,h3{color:var(--color-text);font-weight:700;letter-spacing:0}
a{color:var(--color-brand-dark)}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.button,button.button{border-radius:var(--radius-button);font-weight:600}
.button.primary,button.button.primary{
  background:var(--color-primary);border-color:var(--color-primary);color:#fff;
}
.button.primary:hover,button.button.primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}

/* ── Form fields ───────────────────────────────────────────────────────── */
input,select,textarea{border-color:var(--color-input-border);border-radius:var(--radius-button)}

/* One visible focus style everywhere, for keyboard users only. */
a:focus-visible,button:focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--color-focus);outline-offset:2px;
}
input:focus,select:focus,textarea:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(8,127,135,.16)}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.panel,.paper-card,.article,.author-box,.stat-card,.policy-card,.admin-item,.category-card,.user-card{
  border-radius:var(--radius-card);border-color:var(--color-border);box-shadow:var(--shadow-card);
}
.paper-card{transition:box-shadow .2s ease}
.paper-card:hover{box-shadow:var(--shadow-card-hover)}
.panel{border-top-color:var(--color-brand)}
h1:after{background:linear-gradient(90deg,var(--color-brand),var(--accent))}

/* ── Home search (bug fix) ─────────────────────────────────────────────────
   styles.css's  body input:not([type=checkbox]):not([type=radio]):not([type=hidden])
   (specificity 0,3,2) beat index.php's .search-form input{padding-left:44px}, so the
   placeholder ran under the magnifier icon for everyone. This selector is 0,3,3. */
body form.search-form input[type="search"][name="q"]{padding-left:46px;padding-right:104px;min-height:52px;border-radius:999px}

/* ── Small text that failed contrast ───────────────────────────────────── */
.urow,.uemail{color:var(--color-muted)} /* was #9baab3 = 2.39:1 */

/* ── Category chips: show that the row scrolls sideways ───────────────── */
@media (max-width:1280px){
  .filter-chips{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
}

@media print{
  body{font-family:"Sarabun","Leelawadee UI",Tahoma,serif;font-size:12pt;line-height:1.6}
  .panel,.paper-card,.article,.policy-card{box-shadow:none}
}

/* ── Page-level colours that failed contrast (measured 2026-10-28) ──────────
   Each was a hard-coded value in a page's own <style>; `body` raises the
   selector one step so this file wins without !important. */
body .kf-bottom{color:var(--color-muted)}                       /* footer ©: #9ca3af 2.54:1 → 5.66:1, every page */
body .rg-terms a,body .rg-login a{color:var(--color-brand-dark)} /* register links: #0d9488 3.74:1 → 8.43:1 */
body .rg-submit-btn{background:var(--color-primary)}            /* white on #0d9488 3.74:1 → 4.78:1 */
body .rg-submit-btn:hover{background:var(--color-primary-hover)}
body .rg-f label > span{color:var(--color-muted)}               /* field hint #94a3b8 2.56:1 */
body .rg-ferr{color:#b42318}                                    /* validation error #ef4444 3.76:1 → 6.54:1 */
body .rg-f input:focus{border-color:var(--color-primary)}
body .opt-tag{color:var(--color-muted)}                         /* account "ไม่บังคับ" 2.31:1 */
body .field-hint{color:var(--color-muted)!important}            /* account hint 2.01:1 — source rule is !important */
body .feat-no{color:#7a8d92}                                    /* pricing ✕ icon 1.60:1 → 3.27:1 (non-text, 3:1) */
body .uz-cta-free{color:var(--color-muted)}                     /* dashboard link on grey 4.39:1 → 5.1:1 */
/* Payment page "คัดลอก" (copy account number): #16a34a 3.30:1 → 5.02:1 */
body .inline-copy-btn{border-color:#15803d;color:#15803d}
body .inline-copy-btn:hover{background:#15803d;color:#fff}