/*
Theme Name: NickThai v2
Theme URI: https://nickthai.com
Author: NickThai Team
Author URI: https://nickthai.com
Description: Standalone theme for NickThai — fonts/fancy-text tool, greetings and special characters. No jQuery, no Bootstrap, pure vanilla JS. Ships homepage (font tool), archive, single, page, search and 404 templates matching the design.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nickthai-v2
Tags: blog, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  --nt-red: #ed1c24;
  --nt-red-dark: #cf161d;
  --nt-ink: #2d2a4a;
  --nt-ink2: #3a3654;
  --nt-bg: #f6f4f8;
  --nt-footer: #211f38;
  --nt-green: #1f9d55;
  --nt-line: rgba(45, 42, 74, .08);
  --nt-line2: rgba(45, 42, 74, .1);
  --nt-line3: rgba(45, 42, 74, .15);
  --nt-muted: rgba(45, 42, 74, .6);
  --nt-muted2: rgba(45, 42, 74, .5);
  --nt-shadow-card: 0 16px 34px rgba(45, 42, 74, .12);
  --nt-maxw: 1180px;
  --nt-head: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nt-body: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--nt-bg);
  color: var(--nt-ink);
  font-family: var(--nt-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nt-red); }
::selection { background: var(--nt-red); color: #fff; }

@keyframes nt-caret { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes nt-toast {
  0% { transform: translate(-50%, 18px); opacity: 0; }
  12%, 88% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, 18px); opacity: 0; }
}

/* Skip link (a11y) */
.nt-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--nt-ink); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
}
.nt-skip:focus { left: 0; }

/* Utility container */
.nt-container { max-width: var(--nt-maxw); margin: 0 auto; padding: 0 20px; }

/* =========================================================
   HEADER
   ========================================================= */
.nt-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nt-line);
}
.nt-header-inner {
  position: relative; max-width: var(--nt-maxw); margin: 0 auto; padding: 0 20px;
  height: 70px; display: flex; align-items: center; gap: 20px;
}
.nt-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nt-logo-mark {
  width: 38px; height: 38px; border-radius: 11px; background: var(--nt-red);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-family: var(--nt-head); font-weight: 800; font-size: 20px;
  box-shadow: 0 6px 16px rgba(237, 28, 36, .35); flex-shrink: 0;
}
.nt-logo-text { font-family: var(--nt-head); font-weight: 700; font-size: 22px; letter-spacing: -.5px; }
.nt-logo-text .a { color: var(--nt-ink); }
.nt-logo-text .b { color: var(--nt-red); }

.nt-nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.nt-nav a {
  text-decoration: none; color: var(--nt-ink); font-weight: 600; font-size: 15px;
  padding: 8px 12px; border-radius: 9px; transition: background .12s, color .12s;
}
.nt-nav a:hover { background: rgba(45, 42, 74, .06); }
.nt-nav a.current, .nt-nav a[aria-current] {
  color: var(--nt-red); font-weight: 700; background: rgba(237, 28, 36, .08);
}

.nt-burger {
  display: none; margin-left: auto; width: 42px; height: 42px;
  border: 1px solid var(--nt-line3); background: #fff; border-radius: 11px;
  cursor: pointer; align-items: center; justify-content: center; font-size: 20px; color: var(--nt-ink);
}
.nt-cta-top {
  text-decoration: none; background: var(--nt-red); color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: 10px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(237, 28, 36, .3); transition: background .12s;
}
.nt-cta-top:hover { background: var(--nt-red-dark); }

@media (max-width: 768px) {
  .nt-nav { display: none !important; }
  .nt-nav.open {
    display: flex !important; flex-direction: column !important; align-items: stretch !important;
    position: absolute; left: 0; right: 0; top: 100%; background: #fff; padding: 8px 14px 14px;
    gap: 2px; box-shadow: 0 16px 30px rgba(20, 16, 40, .14); border-bottom: 1px solid var(--nt-line2);
  }
  .nt-nav.open a { padding: 13px 12px !important; border-radius: 10px; font-size: 16px !important; }
  .nt-burger { display: flex !important; }
  .nt-cta-top { display: none !important; }
}

/* =========================================================
   SECTION HELPERS
   ========================================================= */
.nt-section { max-width: var(--nt-maxw); margin: 0 auto; padding: 64px 20px 16px; }
.nt-section--first { padding-top: 72px; }
.nt-head-center { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.nt-head-center.sm { max-width: 640px; }
.nt-h2 {
  font-family: var(--nt-head); font-weight: 700; font-size: clamp(26px, 3.5vw, 36px);
  margin: 0 0 12px; letter-spacing: -.5px;
}
.nt-lead { font-size: 17px; color: rgba(45, 42, 74, .65); line-height: 1.6; margin: 0; }

/* =========================================================
   HERO / TYPE-SPECIMEN TOOL
   ========================================================= */
.nt-tool { background: #fff; border-bottom: 1px solid var(--nt-line); position: relative; }
.nt-tool-bar { height: 4px; background: linear-gradient(90deg, var(--nt-red), var(--nt-ink)); }
.nt-tool-intro { max-width: 980px; margin: 0 auto; padding: 46px 20px 10px; text-align: center; }
.nt-pill-badge {
  display: inline-block; background: rgba(237, 28, 36, .08); color: var(--nt-red);
  border: 1px solid rgba(237, 28, 36, .25); font-weight: 700; font-size: 13px;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.nt-h1 {
  font-family: var(--nt-head); font-weight: 700; font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.25; letter-spacing: -.5px; margin: 0 0 8px;
}
.nt-h1 .red { color: var(--nt-red); }
.nt-tool-sub { font-size: 16px; color: rgba(45, 42, 74, .6); margin: 0 0 26px; }
.nt-tool-sub b { color: var(--nt-ink); }

.nt-input-wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; position: relative; }
.nt-input-line { position: relative; border-bottom: 3px solid var(--nt-red); padding: 4px 0 10px; }
.nt-input {
  display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0;
  text-align: center; border: 0; background: transparent;
  -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; box-shadow: none;
  font-family: var(--nt-head); font-weight: 700; font-size: clamp(32px, 6.4vw, 62px);
  color: var(--nt-ink); outline: none; padding: 0; letter-spacing: -1.5px; line-height: 1.1;
}
.nt-input:focus { outline: none; box-shadow: none; }
.nt-input::placeholder { color: rgba(45, 42, 74, .3); opacity: 1; }
.nt-input::-webkit-search-decoration,
.nt-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nt-input-meta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin: 14px 2px 0;
}
.nt-input-meta .count { font-size: 13px; color: rgba(45, 42, 74, .5); }
.nt-btn-clear {
  border: 1px solid var(--nt-line3); background: #fff; color: var(--nt-ink); font-weight: 600;
  font-size: 13px; font-family: var(--nt-body); padding: 7px 14px; border-radius: 999px;
  cursor: pointer; transition: border-color .12s, color .12s;
}
.nt-btn-clear:hover { border-color: var(--nt-red); color: var(--nt-red); }

/* deco palette */
.nt-deco-wrap { max-width: 900px; margin: 16px auto 0; padding: 0 20px; }
.nt-deco {
  background: #fbfafd; border: 1px solid var(--nt-line2); border-radius: 16px; padding: 16px 18px;
}
.nt-deco-title { font-family: var(--nt-head); font-weight: 600; font-size: 15px; color: var(--nt-ink); margin-bottom: 5px; }
.nt-deco-hint { font-size: 13px; color: rgba(45, 42, 74, .55); line-height: 1.55; margin-bottom: 14px; }
.nt-deco-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-deco-btn {
  min-width: 44px; height: 44px; border: 1.5px solid var(--nt-line3); background: #fff; color: var(--nt-ink);
  border-radius: 11px; font-size: 19px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: transform .1s, border-color .12s, background .12s;
}
.nt-deco-btn:hover { border-color: var(--nt-red); background: rgba(237, 28, 36, .06); transform: translateY(-2px); }

/* specimen rows */
.nt-specimens { max-width: 1100px; margin: 18px auto 0; padding: 0 20px 56px; }
.nt-row {
  cursor: pointer; border-top: 1px solid var(--nt-line2); padding: 20px 10px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border-radius: 10px;
  transition: background .12s; background: none; width: 100%; text-align: left; font-family: var(--nt-body);
}
.nt-row:hover { background: rgba(237, 28, 36, .045); }
.nt-row-label { width: 150px; flex-shrink: 0; }
.nt-row-name { font-family: var(--nt-head); font-weight: 600; font-size: 15px; color: var(--nt-ink); }
.nt-row-hint { font-size: 12px; color: rgba(45, 42, 74, .45); }
.nt-row-value {
  flex: 1; min-width: 200px; font-size: clamp(22px, 3.4vw, 38px); color: var(--nt-ink);
  line-height: 1.3; word-break: break-word;
}
.nt-row-btn {
  flex-shrink: 0; font-weight: 700; font-size: 13px; font-family: var(--nt-body); color: #fff;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap; background: var(--nt-red);
}
.nt-row.copied .nt-row-btn { background: var(--nt-green); }

/* toast */
.nt-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 90; background: var(--nt-green); color: #fff;
  font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 12px 30px rgba(20, 16, 40, .35); animation: nt-toast 1.3s ease forwards; pointer-events: none;
}

/* =========================================================
   OCCASIONS
   ========================================================= */
.nt-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.nt-occ {
  text-decoration: none; background: #fff; border: 1px solid var(--nt-line); border-radius: 18px;
  padding: 22px; display: block; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.nt-occ:hover { transform: translateY(-4px); box-shadow: var(--nt-shadow-card); }
.nt-occ-tag {
  position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; color: var(--nt-red);
  background: rgba(237, 28, 36, .1); padding: 4px 9px; border-radius: 999px;
}
.nt-occ-emoji { font-size: 40px; margin-bottom: 14px; }
.nt-occ-name { font-family: var(--nt-head); font-weight: 600; font-size: 19px; color: var(--nt-ink); margin-bottom: 4px; }
.nt-occ-desc { font-size: 14px; color: var(--nt-muted); }

/* =========================================================
   SYMBOLS
   ========================================================= */
.nt-sym-list { display: flex; flex-direction: column; gap: 24px; }
.nt-sym-group { background: #fff; border: 1px solid var(--nt-line); border-radius: 18px; padding: 20px 22px; }
.nt-sym-title { font-family: var(--nt-head); font-weight: 600; font-size: 16px; color: var(--nt-ink); margin-bottom: 14px; }
.nt-sym-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.nt-sym-btn {
  min-width: 58px; height: 58px; padding: 0 14px; border: 1px solid var(--nt-line2); background: #fbfafd;
  border-radius: 13px; font-size: 24px; color: var(--nt-ink); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: transform .12s, border-color .12s;
}
.nt-sym-btn:hover { border-color: var(--nt-red); transform: translateY(-2px); }

/* =========================================================
   GAMES
   ========================================================= */
.nt-grid-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.nt-game { background: var(--nt-ink); border-radius: 18px; padding: 24px; color: #fff; display: flex; flex-direction: column; gap: 14px; }
.nt-game-name { font-family: var(--nt-head); font-weight: 700; font-size: 20px; }
.nt-game-th { font-size: 13px; color: rgba(255, 255, 255, .6); }
.nt-game-sample {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  padding: 16px; font-size: 22px; text-align: center; word-break: break-word; min-height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.nt-game-btn {
  border: none; color: #fff; font-weight: 700; font-size: 14px; font-family: var(--nt-body);
  padding: 11px; border-radius: 11px; cursor: pointer; background: var(--nt-red); transition: filter .12s;
}
.nt-game-btn:hover { filter: brightness(1.08); }
.nt-game.copied .nt-game-btn { background: var(--nt-green); }

/* =========================================================
   ARTICLES (cards)
   ========================================================= */
.nt-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px;
}
.nt-sec-head h2 { font-family: var(--nt-head); font-weight: 700; font-size: clamp(26px, 3.5vw, 36px); margin: 0 0 8px; letter-spacing: -.5px; }
.nt-sec-head p { font-size: 17px; color: rgba(45, 42, 74, .65); margin: 0; }
.nt-link-more { text-decoration: none; color: var(--nt-red); font-weight: 700; font-size: 15px; white-space: nowrap; }

.nt-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.nt-grid-cards.fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.nt-card {
  text-decoration: none; background: #fff; border: 1px solid var(--nt-line); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s;
}
.nt-card:hover { box-shadow: var(--nt-shadow-card); }
.nt-card-thumb {
  aspect-ratio: 16 / 10; background: repeating-linear-gradient(45deg, #efeaf3, #efeaf3 11px, #e7e1ec 11px, #e7e1ec 22px);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.nt-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nt-card-thumb .ph { font-family: monospace; font-size: 12px; color: var(--nt-muted2); padding: 8px; text-align: center; }
.nt-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.nt-cat {
  font-size: 12px; font-weight: 700; color: var(--nt-red); text-transform: uppercase; letter-spacing: .5px;
}
.nt-card h3 { font-family: var(--nt-head); font-weight: 600; font-size: 18px; color: var(--nt-ink); margin: 8px 0 6px; line-height: 1.35; }
.nt-card-excerpt { font-size: 14px; color: var(--nt-muted); line-height: 1.6; margin: 0 0 14px; flex: 1; }
.nt-card-date { font-size: 13px; color: var(--nt-muted2); }

/* =========================================================
   E-E-A-T
   ========================================================= */
.nt-eeat {
  background: linear-gradient(135deg, var(--nt-ink), #3b3766); border-radius: 24px;
  padding: clamp(28px, 5vw, 52px); color: #fff;
}
.nt-eeat .nt-head-center h2 { color: #fff; font-family: var(--nt-head); font-weight: 700; font-size: clamp(26px, 3.5vw, 34px); margin: 0 0 12px; letter-spacing: -.5px; }
.nt-eeat .nt-head-center p { font-size: 17px; color: rgba(255, 255, 255, .75); line-height: 1.6; margin: 0; }
.nt-eeat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.nt-eeat-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 22px; }
.nt-eeat-card .ic { font-size: 30px; margin-bottom: 12px; }
.nt-eeat-card .t { font-family: var(--nt-head); font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.nt-eeat-card .d { font-size: 14px; color: rgba(255, 255, 255, .7); line-height: 1.55; }

/* =========================================================
   FOOTER
   ========================================================= */
.nt-footer { background: var(--nt-footer); color: #fff; margin-top: 64px; padding: 56px 20px 28px; }
.nt-footer-grid { max-width: var(--nt-maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.nt-footer-brand { grid-column: span 1; min-width: 200px; }
.nt-footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.nt-footer-logo .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--nt-red); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--nt-head); font-weight: 800; font-size: 18px; }
.nt-footer-logo .name { font-family: var(--nt-head); font-weight: 700; font-size: 20px; }
.nt-footer-brand p { font-size: 14px; color: rgba(255, 255, 255, .6); line-height: 1.6; margin: 0; max-width: 280px; }
.nt-footer-col .h { font-family: var(--nt-head); font-weight: 600; font-size: 15px; margin-bottom: 14px; }
.nt-footer-col .links { display: flex; flex-direction: column; gap: 9px; }
.nt-footer-col .links a { text-decoration: none; color: rgba(255, 255, 255, .62); font-size: 14px; transition: color .12s; }
.nt-footer-col .links a:hover { color: #fff; }
.nt-footer-bottom { max-width: var(--nt-maxw); margin: 36px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.nt-footer-bottom .disc { font-size: 12px; color: rgba(255, 255, 255, .45); line-height: 1.6; margin: 0 0 12px; }
.nt-footer-bottom .copy { font-size: 13px; color: rgba(255, 255, 255, .55); margin: 0; }

/* =========================================================
   PAGE HERO (blog / generic)
   ========================================================= */
.nt-page-hero { background: linear-gradient(180deg, #fff, var(--nt-bg)); border-bottom: 1px solid rgba(45, 42, 74, .06); }
.nt-page-hero-inner { max-width: var(--nt-maxw); margin: 0 auto; padding: 34px 20px 30px; }
.nt-breadcrumb { font-size: 13px; color: rgba(45, 42, 74, .55); margin-bottom: 14px; }
.nt-breadcrumb a { color: rgba(45, 42, 74, .55); text-decoration: none; }
.nt-breadcrumb a:hover { color: var(--nt-red); }
.nt-breadcrumb .sep { margin: 0 6px; }
.nt-breadcrumb .cur { color: var(--nt-red); font-weight: 600; }
.nt-page-hero h1 {
  font-family: var(--nt-head); font-weight: 700; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.6px;
  margin: 0 0 10px; max-width: 760px; line-height: 1.2;
}
.nt-page-hero p { font-size: 17px; color: rgba(45, 42, 74, .65); line-height: 1.6; margin: 0; max-width: 640px; }

/* =========================================================
   BLOG: filter + featured + pagination
   ========================================================= */
.nt-blog { max-width: var(--nt-maxw); margin: 0 auto; padding: 28px 20px 16px; }
.nt-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.nt-filter {
  border: 1.5px solid var(--nt-line3); background: #fff; color: var(--nt-ink); font-family: var(--nt-body);
  font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  text-decoration: none; transition: border-color .12s, background .12s, color .12s;
}
.nt-filter:hover { border-color: var(--nt-red); }
.nt-filter.active { border-color: var(--nt-red); background: var(--nt-red); color: #fff; }

.nt-featured {
  text-decoration: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0;
  background: #fff; border: 1px solid var(--nt-line); border-radius: 22px; overflow: hidden; margin-bottom: 34px;
  transition: box-shadow .15s;
}
.nt-featured:hover { box-shadow: 0 20px 44px rgba(45, 42, 74, .14); }
.nt-featured-thumb {
  aspect-ratio: 16 / 11; background: repeating-linear-gradient(45deg, #efeaf3, #efeaf3 12px, #e7e1ec 12px, #e7e1ec 24px);
  display: flex; align-items: center; justify-content: center; min-height: 240px; overflow: hidden;
}
.nt-featured-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nt-featured-thumb .ph { font-family: monospace; font-size: 13px; color: var(--nt-muted2); }
.nt-featured-body { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.nt-featured-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.nt-badge-red { font-size: 11px; font-weight: 700; color: #fff; background: var(--nt-red); padding: 5px 11px; border-radius: 999px; letter-spacing: .4px; }
.nt-featured h2 { font-family: var(--nt-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); color: var(--nt-ink); margin: 0 0 12px; line-height: 1.3; }
.nt-featured p { font-size: 16px; color: rgba(45, 42, 74, .65); line-height: 1.65; margin: 0 0 18px; }
.nt-featured-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--nt-muted2); flex-wrap: wrap; }

.nt-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 42px 0 10px; flex-wrap: wrap; }
.nt-pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; background: #fff; border: 1px solid var(--nt-line2); color: var(--nt-ink);
  text-decoration: none; font-weight: 600; font-size: 15px; transition: border-color .12s;
}
.nt-pagination .page-numbers:hover { border-color: var(--nt-red); }
.nt-pagination .page-numbers.current { background: var(--nt-red); color: #fff; border-color: var(--nt-red); font-weight: 700; }
.nt-pagination .page-numbers.dots { border: none; background: none; }
.nt-pagination .next, .nt-pagination .prev { padding: 0 16px; font-size: 14px; }

.nt-empty { background: #fff; border: 1px solid var(--nt-line); border-radius: 18px; padding: 48px 24px; text-align: center; }
.nt-empty h2 { font-family: var(--nt-head); font-weight: 700; font-size: 24px; margin: 0 0 8px; }
.nt-empty p { color: var(--nt-muted); margin: 0 0 18px; }

/* =========================================================
   SINGLE ARTICLE
   ========================================================= */
.nt-article { max-width: 760px; margin: 0 auto; padding: 32px 20px 0; }
.nt-article-tag {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--nt-red); background: rgba(237, 28, 36, .08);
  padding: 5px 12px; border-radius: 999px; letter-spacing: .5px; margin-bottom: 16px; text-decoration: none;
}
.nt-article h1.nt-article-title {
  font-family: var(--nt-head); font-weight: 700; font-size: clamp(28px, 4.4vw, 44px); letter-spacing: -.6px;
  line-height: 1.2; margin: 0 0 18px;
}
.nt-article-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: rgba(45, 42, 74, .55); margin-bottom: 24px; }
.nt-author-chip { display: flex; align-items: center; gap: 8px; }
.nt-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--nt-ink); color: #fff; display: flex;
  align-items: center; justify-content: center; font-family: var(--nt-head); font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.nt-feature-img {
  aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; margin-bottom: 28px;
  background: repeating-linear-gradient(45deg, #efeaf3, #efeaf3 13px, #e7e1ec 13px, #e7e1ec 26px);
  display: flex; align-items: center; justify-content: center;
}
.nt-feature-img img { width: 100%; height: 100%; object-fit: cover; }
.nt-feature-img .ph { font-family: monospace; font-size: 13px; color: var(--nt-muted2); }

/* prose (post + page content) */
.nt-prose { font-size: 17px; line-height: 1.8; color: var(--nt-ink2); }
.nt-prose > *:first-child { margin-top: 0; }
.nt-prose p { margin: 0 0 16px; }
.nt-prose .lead, .nt-prose > p:first-of-type { font-size: 18px; }
.nt-prose h2 { font-family: var(--nt-head); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.4px; margin: 28px 0 14px; }
.nt-prose h3 { font-family: var(--nt-head); font-weight: 600; font-size: clamp(19px, 2.4vw, 23px); margin: 24px 0 12px; }
.nt-prose h4 { font-family: var(--nt-head); font-weight: 600; font-size: 18px; margin: 20px 0 10px; }
.nt-prose a { color: var(--nt-red); text-decoration: underline; text-underline-offset: 2px; }
.nt-prose b, .nt-prose strong { color: var(--nt-ink); }
.nt-prose ul, .nt-prose ol { margin: 0 0 16px; padding-left: 22px; }
.nt-prose li { margin: 0 0 8px; }
.nt-prose img { border-radius: 14px; margin: 18px 0; }
.nt-prose blockquote {
  margin: 18px 0; padding: 14px 20px; border-left: 4px solid var(--nt-red); background: #fff;
  border-radius: 0 12px 12px 0; color: var(--nt-ink2);
}
.nt-prose blockquote p:last-child { margin-bottom: 0; }
.nt-prose code { background: #efeaf3; padding: 2px 6px; border-radius: 6px; font-size: .92em; }
.nt-prose pre { background: var(--nt-ink); color: #fff; padding: 18px; border-radius: 14px; overflow: auto; margin: 18px 0; }
.nt-prose pre code { background: none; padding: 0; }
.nt-prose table { width: 100%; border-collapse: collapse; margin: 18px 0; background: #fff; border-radius: 12px; overflow: hidden; }
.nt-prose th, .nt-prose td { padding: 10px 14px; border: 1px solid var(--nt-line2); text-align: left; }
.nt-prose figure { margin: 18px 0; }
.nt-prose figcaption { font-size: 13px; color: var(--nt-muted2); text-align: center; margin-top: 8px; }

/* embedded copy tool (article + page) */
.nt-embed-tool { max-width: 860px; margin: 8px auto 0; padding: 0 20px; }
.nt-embed-card { background: #fff; border: 1px solid var(--nt-line2); border-radius: 20px; padding: 22px; box-shadow: 0 16px 40px rgba(20, 16, 40, .08); }
.nt-embed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.nt-embed-head .t { font-family: var(--nt-head); font-weight: 600; font-size: 17px; color: var(--nt-ink); }
.nt-embed-head .tip { font-size: 12px; font-weight: 600; color: var(--nt-green); background: rgba(31, 157, 85, .1); padding: 4px 10px; border-radius: 999px; }
.nt-embed-input-line { position: relative; border-bottom: 3px solid var(--nt-red); padding: 2px 0 8px; margin-bottom: 14px; }
.nt-embed-input {
  display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0;
  text-align: center; border: 0; background: transparent;
  -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; box-shadow: none;
  font-family: var(--nt-head); font-weight: 700; font-size: clamp(26px, 5vw, 42px); color: var(--nt-ink);
  outline: none; padding: 0; letter-spacing: -1px; line-height: 1.15;
}
.nt-embed-input:focus { outline: none; box-shadow: none; }
.nt-embed-input::placeholder { color: rgba(45, 42, 74, .3); opacity: 1; }
.nt-embed-deco { background: #fbfafd; border: 1px solid var(--nt-line2); border-radius: 14px; padding: 13px 15px; margin-bottom: 16px; }
.nt-embed-deco .hint { font-size: 13px; color: rgba(45, 42, 74, .55); line-height: 1.5; margin-bottom: 10px; }
.nt-embed-deco-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.nt-embed-deco-btn {
  min-width: 40px; height: 40px; border: 1.5px solid var(--nt-line3); background: #fff; color: var(--nt-ink);
  border-radius: 10px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .12s, background .12s;
}
.nt-embed-deco-btn:hover { border-color: var(--nt-red); background: rgba(237, 28, 36, .06); }
.nt-embed-rows { display: flex; flex-direction: column; gap: 9px; }
.nt-embed-row {
  cursor: pointer; border: 1px solid var(--nt-line2); border-radius: 13px; padding: 12px 14px; display: flex;
  align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; width: 100%; text-align: left; font-family: var(--nt-body);
  transition: border-color .12s, background .12s;
}
.nt-embed-row:hover { border-color: var(--nt-red); background: rgba(237, 28, 36, .03); }
.nt-embed-row .lab { width: 130px; flex-shrink: 0; }
.nt-embed-row .lab .n { font-family: var(--nt-head); font-weight: 600; font-size: 14px; color: var(--nt-ink); }
.nt-embed-row .lab .h { font-size: 11px; color: rgba(45, 42, 74, .45); }
.nt-embed-row .val { flex: 1; min-width: 180px; font-size: clamp(20px, 3vw, 28px); color: var(--nt-ink); line-height: 1.3; word-break: break-word; }
.nt-embed-row .btn { flex-shrink: 0; font-weight: 700; font-size: 12px; color: #fff; padding: 8px 13px; border-radius: 999px; white-space: nowrap; background: var(--nt-red); }
.nt-embed-row.copied .btn { background: var(--nt-green); }

/* tips / FAQ blocks (used by content + author) */
.nt-stack { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.nt-tip { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--nt-line); border-radius: 14px; padding: 16px; }
.nt-tip .ic { font-size: 22px; flex-shrink: 0; }
.nt-tip b { display: block; margin-bottom: 2px; }
.nt-tip span { font-size: 15px; color: rgba(45, 42, 74, .65); line-height: 1.6; }
.nt-faq { display: flex; flex-direction: column; gap: 10px; }
.nt-faq-item { background: #fff; border: 1px solid var(--nt-line); border-radius: 14px; padding: 16px 18px; }
.nt-faq-item b { display: block; font-family: var(--nt-head); font-size: 16px; margin-bottom: 6px; }
.nt-faq-item span { font-size: 15px; color: rgba(45, 42, 74, .65); line-height: 1.7; }

.nt-authorbox { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--nt-line2); border-radius: 18px; padding: 22px; margin: 32px 0 0; }
.nt-authorbox .av { width: 54px; height: 54px; border-radius: 50%; background: var(--nt-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--nt-head); font-weight: 800; font-size: 22px; flex-shrink: 0; overflow: hidden; }
.nt-authorbox .av img { width: 100%; height: 100%; object-fit: cover; }
.nt-authorbox .nm { font-family: var(--nt-head); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.nt-authorbox p { font-size: 14px; color: rgba(45, 42, 74, .65); line-height: 1.65; margin: 0; }

.nt-related { max-width: var(--nt-maxw); margin: 0 auto; padding: 44px 20px 0; }
.nt-related > h2 { font-family: var(--nt-head); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.4px; margin: 0 0 22px; }

/* tags list on single */
.nt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.nt-tags a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--nt-ink); background: #fff; border: 1px solid var(--nt-line3); padding: 6px 12px; border-radius: 999px; }
.nt-tags a:hover { border-color: var(--nt-red); color: var(--nt-red); }

/* =========================================================
   COMMENTS
   ========================================================= */
.nt-comments { max-width: 760px; margin: 0 auto; padding: 40px 20px 0; }
.nt-comments h2 { font-family: var(--nt-head); font-weight: 700; font-size: clamp(22px, 3vw, 28px); margin: 0 0 20px; }
.nt-comments ol { list-style: none; margin: 0; padding: 0; }
.nt-comments .comment-body { background: #fff; border: 1px solid var(--nt-line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.nt-comments .children { list-style: none; margin: 0 0 0 24px; padding: 0; }
.nt-comments .comment-author { font-family: var(--nt-head); font-weight: 600; }
.nt-comments .comment-meta { font-size: 12px; color: var(--nt-muted2); margin-bottom: 8px; }
.nt-comment-form { margin-top: 20px; }
.nt-comment-form input, .nt-comment-form textarea {
  width: 100%; font-family: var(--nt-body); font-size: 15px; padding: 12px 14px; border: 1px solid var(--nt-line3);
  border-radius: 12px; margin-bottom: 12px; background: #fff;
}
.nt-comment-form textarea { min-height: 120px; }
.nt-btn-primary {
  display: inline-block; background: var(--nt-red); color: #fff; font-weight: 700; font-size: 15px;
  font-family: var(--nt-body); padding: 12px 22px; border-radius: 11px; border: none; cursor: pointer;
  text-decoration: none; box-shadow: 0 6px 16px rgba(237, 28, 36, .3); transition: background .12s;
}
.nt-btn-primary:hover { background: var(--nt-red-dark); color: #fff; }

/* =========================================================
   404
   ========================================================= */
.nt-404 { max-width: 760px; margin: 0 auto; padding: 80px 20px 40px; text-align: center; }
.nt-404 .code { font-family: var(--nt-head); font-weight: 800; font-size: clamp(72px, 16vw, 140px); line-height: 1; color: var(--nt-red); letter-spacing: -3px; }
.nt-404 h1 { font-family: var(--nt-head); font-weight: 700; font-size: clamp(24px, 4vw, 34px); margin: 8px 0 12px; }
.nt-404 p { font-size: 17px; color: var(--nt-muted); margin: 0 0 26px; }
.nt-404-search { max-width: 440px; margin: 0 auto 28px; }

/* search form */
.nt-searchform { display: flex; gap: 8px; }
.nt-searchform input[type="search"], .nt-searchform input[type="text"] {
  flex: 1; font-family: var(--nt-body); font-size: 15px; padding: 12px 16px; border: 1px solid var(--nt-line3);
  border-radius: 11px; background: #fff; outline: none;
}
.nt-searchform input[type="search"]:focus, .nt-searchform input[type="text"]:focus { border-color: var(--nt-red); }
.nt-searchform button { border: none; }

/* =========================================================
   WP alignment / caption / gallery helpers
   ========================================================= */
.alignleft { float: left; margin: 6px 20px 14px 0; }
.alignright { float: right; margin: 6px 0 14px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: 13px; color: var(--nt-muted2); text-align: center; margin-top: 6px; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* Homepage restored SEO copy (legacy content, shortcodes stripped) */
.nt-home-seo .nt-prose { max-width: 900px; margin-left: auto; margin-right: auto; }
.nt-home-seo .nt-prose h2 { margin-top: 32px; }

@media (max-width: 600px) {
  .nt-row-label, .nt-embed-row .lab { width: 100%; }
  .nt-section { padding-top: 48px; }
}