/*
Theme Name: Quicksportz Fencing
Version: 1.0.0
Author: quicksportz
Description: คู่มือกีฬาและเกมภาษาไทย ออกแบบจากสนามฟันดาบเอเป้
Text Domain: quicksportz-fencing
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root {
    --ink: #101820;
    --night: #101820;
    --panel: #fff;
    --paper: #f5f6f7;
    --pearl: #f1f4fa;
    --cobalt: #1948db;
    --sky: #b7ccff;
    --steel: #48566a;
    --line: #cbd3dc;
    --body: "Fahkwang", "Leelawadee UI", "Noto Sans Thai", Tahoma, Arial, sans-serif;
    --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.65 var(--body); overflow-wrap: break-word; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { line-height: 1.34; }
a { color: inherit; text-decoration: none; }
img,picture,svg { display: block; }
img { max-width: 100%; }
button,select { font: inherit; }
button,select,label[for] { cursor: pointer; }
a,button,select,label[for] { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #cd7600; outline-offset: 3px; }
.frame { width: min(1320px, calc(100% - clamp(35px,7.5vw,138px))); margin-inline: auto; }
.skip { position: fixed; top: 5px; left: 5px; z-index: 10; transform: translateY(-170%); background: white; padding: 8px 15px; }
.skip:focus { transform: none; }
.ui-icon { width: 18px; height: 18px; flex: none; }
.mast { position: relative; z-index: 5; background: var(--night); color: var(--pearl); border-bottom: 1px solid #3b4655; }
.mast-inner,.wordmark,.main-menu ul,.mast-actions,.action,.text-link { display: flex; align-items: center; }
.mast-inner { min-height: 68px; gap: clamp(20px,3.2vw,55px); }
.wordmark { width: fit-content; flex: none; gap: 9px; }
.wordmark img { width: 31px; height: 31px; }
.wordmark span { font: italic 800 clamp(1.12rem,1.5vw,1.48rem)/1 var(--display); letter-spacing: -.045em; }
.main-menu ul,.closing ul { list-style: none; padding: 0; margin: 0; }
.main-menu ul { gap: clamp(13px,1.8vw,29px); }
.main-menu a,.desk-login { display: inline-flex; align-items: center; min-height: 44px; font-size: .92rem; font-weight: 650; }
.main-menu a:hover,.main-menu a[aria-current],.desk-login:hover { color: #d3e1ff; text-decoration: underline; text-underline-offset: 5px; }
.mast-actions { margin-left: auto; gap: 17px; }
.main-menu .drawer-login,.nav-toggle { display: none; }
.action,.text-link { display: inline-flex; width: fit-content; gap: .55em; }
.action { justify-content: center; min-height: 45px; border: 1px solid transparent; border-radius: 4px; padding: 8px 17px; font-size: .94rem; font-weight: 700; }
.primary-action { background: #d3dfff; color: #11284c; }
.primary-action:hover { background: white; }
.ink-action { background: var(--cobalt); color: white; }
.ink-action:hover { background: #1239b4; }
.outline-action { background: #1134a8; color: white; border-color: #adc7ff; }
.outline-action:hover { background: #142f80; }
.text-link { min-height: 38px; color: #163ead; font-weight: 650; font-size: .94rem; }
.text-link:hover,.read-body a:hover,.prose a:hover,.desk-links a:hover,.closing a:hover,.crumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero { padding: clamp(17px,2.1vw,34px) 0; background: var(--night); color: white; }
.hero-inner { isolation: isolate; display: grid; grid-template-columns: minmax(0,.87fr) minmax(0,1.13fr); background: #193dc4; position: relative; }
.hero-copy { position: relative; z-index: 1; display: grid; align-content: center; padding: clamp(28px,3.8vw,62px) clamp(20px,2.7vw,47px); }
.hero-copy::after { content: ""; z-index: -1; position: absolute; inset: 0 -8% 0 0; clip-path: polygon(0 0,100% 0,93% 100%,0 100%); background: linear-gradient(125deg,#2d59ee,#123bac 78%); }
.hero-brand { display: block; width: fit-content; white-space: nowrap; font: italic 850 clamp(2.5rem,4.5vw,5.65rem)/1.02 var(--display); letter-spacing: -.075em; padding: 0 .13em .08em 0; }
.hero-brand i { color: #d1ddff; font-style: inherit; }
.hero h1 { font-size: clamp(1.45rem,2.28vw,2.55rem); font-weight: 700; }
.hero h1 > span { display: block; }
.hero-intro { margin: 12px 0 19px; max-width: 31em; font-size: clamp(.96rem,1.04vw,1.16rem); line-height: 1.63; color: #f1f5ff; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-actions .primary-action { color: #133186; background: white; }
.hero-actions .primary-action:hover { background: #e4ecff; }
.hero-visual { position: relative; display: block; isolation: isolate; min-height: clamp(310px,26vw,450px); overflow: hidden; background: #161c2c; }
.cover-art { position: absolute; inset: 0; }
.cover-art img { width: 100%; height: 100%; object-fit: cover; object-position: 73% 48%; }
.visual-caption { position: absolute; bottom: 0; right: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 18px; background: #101820eb; color: #fff; font-size: .85rem; }
.hero-visual:hover .visual-caption { background: #183ca3; }

.directory { padding-block: clamp(22px,2.45vw,41px) clamp(28px,3.1vw,49px); }
.section-head,.journal-heading { display: flex; gap: 15px; align-items: baseline; margin-bottom: 16px; }
.section-head h2,.journal-heading h2,.lesson-copy h2 { font-size: clamp(1.4rem,1.9vw,2.1rem); letter-spacing: -.035em; }
.section-head > .text-link,.journal-controls { margin-left: auto; }
.topic-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(8px,1.07vw,17px); }
.topic { display: grid; grid-template-rows: auto 1fr; min-width: 0; position: relative; background: white; border: 1px solid var(--line); border-bottom: 3px solid var(--cobalt); }
.topic-photo { overflow: hidden; background: #d3d8df; aspect-ratio: 1.72; }
.topic-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.topic:hover .topic-photo img { transform: scale(1.045); }
.topic-caption { min-width: 0; padding: 10px 11px 12px; }
.topic-caption h3 { font-size: clamp(1.05rem,1.22vw,1.42rem); padding-right: 23px; }
.topic-caption p { max-width: 17em; font-size: clamp(.75rem,.84vw,.95rem); line-height: 1.45; margin-top: 3px; color: var(--steel); }
.topic-arrow { position: absolute; display: grid; place-items: center; top: 9px; right: 9px; width: 27px; height: 27px; border-radius: 50%; color: white; background: #0d1622dd; }
.topic-arrow .ui-icon { width: 15px; height: 15px; }
.topic:focus-visible,.topic:hover { border-color: var(--cobalt); }

.practice { padding: clamp(22px,2.7vw,44px) 0; background: #e0e6f0; border-block: 1px solid #ced7e5; }
.practice-inner { display: grid; grid-template-columns: minmax(0,.93fr) minmax(0,1.07fr); align-items: center; gap: clamp(20px,5vw,90px); }
.lesson-copy p { margin-top: 7px; max-width: 36em; color: #364559; }
.lesson-copy .text-link { margin-top: 3px; }
.score-panel { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 0; padding: 12px clamp(12px,1.4vw,22px) 13px; border: 1px solid #39495e; color: #f6f8fd; background: var(--night); border-radius: 5px; }
.score-panel legend { padding: 4px 10px; border-radius: 3px; color: white; background: #263b54; font-size: .83rem; font-weight: 650; }
.score-panel input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.score-panel label { display: grid; place-items: center; min-height: 39px; line-height: 1.4; text-align: center; border: 1px solid #68768b; background: #22303f; font-size: .92rem; font-weight: 650; }
.score-panel input:checked + label { background: #d4dfff; color: #152849; }
.score-panel input:focus-visible + label { outline: 2px solid #fcb43b; outline-offset: -3px; }
.score-result { display: none; grid-column: 1/-1; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: clamp(12px,1.6vw,27px); padding-top: 12px; }
#touch-1:checked ~ #result-1, #touch-2:checked ~ #result-2, #touch-3:checked ~ #result-3 { display: grid; }
.score-result strong { white-space: nowrap; display: block; font: 600 clamp(2rem,3vw,3.4rem)/1 "IBM Plex Mono",Consolas,monospace; letter-spacing: -.075em; color: #e7f0ff; }
.score-result p { font-size: .91rem; line-height: 1.5; color: #d7e0ee; }

.journal,.archive-body,.missing { padding-block: clamp(26px,3.1vw,48px); }
.journal-controls { display: flex; align-items: center; gap: 9px; color: var(--steel); font-size: .88rem; }
.journal-controls select { padding: 6px 10px; min-height: 40px; color: var(--ink); border: 1px solid #9eacb9; background: white; border-radius: 4px; }
.journal-list,.read-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(12px,1.5vw,24px); }
.read-card { min-width: 0; border-bottom: 1px solid var(--line); }
.read-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 1.85; background: #d4dce7; }
.read-cover img,.desk-photo img { width: 100%; height: 100%; object-fit: cover; }
.read-body { padding: 11px 0 14px; }
.read-meta,.article-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; font-size: .82rem; color: var(--steel); }
.read-meta span { color: #173faa; font-weight: 700; }
.read-body h2,.read-body h3 { margin: 4px 0 6px; font-size: clamp(1.06rem,1.32vw,1.45rem); }
.read-body p { color: var(--steel); font-size: .91rem; }
.clubhouse { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: start; gap: clamp(22px,5vw,92px); padding-block: clamp(22px,2.6vw,43px); border-top: 1px solid var(--line); }
.feature-copy h2,.desk-links h2 { font-size: clamp(1.2rem,1.6vw,1.83rem); margin-bottom: 8px; }
.feature-copy a,.prose a:not(.action) { color: #173faa; text-decoration: underline; text-underline-offset: 3px; }
.feature-copy p + p { margin-top: .85em; }
.member-panel { display: grid; grid-template-columns: 34% minmax(0,1fr); align-items: stretch; background: white; border: 1px solid var(--line); }
.desk-photo { min-height: 130px; overflow: hidden; }
.desk-links { padding: 12px 16px; }
.desk-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; border-top: 1px solid var(--line); }
.inner-head { background: #152335; color: white; padding-block: clamp(24px,3.4vw,54px); border-bottom: 5px solid var(--cobalt); }
.inner-head h1 { font-size: clamp(1.74rem,3vw,3.32rem); max-width: 31em; overflow-wrap: anywhere; }
.inner-head p { color: #e1e7f1; max-width: 52em; margin-top: 8px; }
.crumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; font-size: .84rem; color: #dce6fb; margin-bottom: 10px; }
.article-byline { color: #d2e1ff; margin-bottom: 8px; }
.reading { display: grid; grid-template-columns: minmax(0,1fr) minmax(160px,27%); align-items: start; gap: clamp(18px,3.6vw,62px); padding-block: clamp(20px,3.3vw,52px); }
.prose { min-width: 0; overflow-wrap: anywhere; padding: clamp(16px,2.7vw,44px); color: #1c2634; background: white; border: 1px solid var(--line); line-height: 1.82; }
.prose h2,.prose h3 { margin: 1.07em 0 .43em; }
.prose h2 { font-size: clamp(1.23rem,1.82vw,1.9rem); }
.prose h3 { font-size: 1.15rem; }
.prose p,.prose ul,.prose ol { margin: 0 0 .95em; }
.prose ul,.prose ol { padding-inline-start: 1.5em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 15px 0 19px; }
.prose td,.prose th { border: 1px solid var(--line); padding: 6px 9px; text-align: start; }
.prose th { background: #e5eafa; }
.outbound { padding: 4px 0 4px 16px; border-left: 3px solid var(--cobalt); margin-bottom: 20px; }
.outbound p { margin: 6px 0 0; font-size: .88rem; color: var(--steel); }
.reading-side { min-width: 0; background: white; border: 1px solid var(--line); }
.reading-side img { width: 100%; height: auto; }
.reading-side .text-link { margin: 5px 12px; }
.post-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 13px; padding-top: 13px; margin-top: 16px; border-top: 1px solid var(--line); font-size: .9rem; }
.archive-intro { margin-bottom: 23px; }
.navigation.pagination,.missing .action { margin-top: 16px; }
.closing { background: #101820; color: #edf1f7; border-top: 4px solid var(--cobalt); }
.closing-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(20px,5vw,74px); padding-block: 27px; }
.closing h2 { font-size: 1.1rem; color: #bed2ff; margin-bottom: 7px; }
.closing p { margin-top: 10px; color: #d1d9e4; max-width: 30em; font-size: .94rem; }
.closing li a { display: inline-flex; align-items: center; min-height: 35px; font-size: .92rem; }
.colophon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid #405064; color: #cad4e0; font-size: .8rem; padding-block: 11px; }
@media (max-width:900px) {
    .mast-inner { min-height: 58px; flex-wrap: wrap; gap: 8px; }
    .mast-actions { gap: 8px; }
    .desk-login { display: none; }
    .main-menu { order: 3; width: 100%; }
    .main-menu ul { flex-wrap: wrap; gap: 2px 18px; }
    .main-menu .drawer-login { display: inline-flex; gap: 7px; color: #d4e3ff; }
    .nav-ready .main-menu { display: none; position: absolute; inset: 100% 0 auto; padding: 8px 5% 11px; background: var(--night); color: white; border-block: 1px solid #41506a; box-shadow: 0 9px 14px #0c162b24; }
    .nav-ready .menu-open .main-menu { display: block; }
    .nav-ready .nav-toggle { display: grid; place-content: center; gap: 4px; width: 42px; height: 42px; border: 1px solid #889aae; border-radius: 3px; background: transparent; color: #eef3f9; }
    .nav-toggle span { width: 17px; height: 2px; background: currentColor; }
    .hero-inner { grid-template-columns: 49% minmax(0,1fr); }
    .hero-copy { padding: 24px 18px; }
    .hero-visual { min-height: 306px; }
    .hero-brand { font-size: clamp(2.37rem,4.6vw,3.35rem); }
    .hero-actions { gap: 5px; }
    .hero-actions .action { padding-inline: 9px; font-size: .84rem; }
    .topic-caption { padding: 9px 7px; }
    .topic-caption h3 { padding: 0; }
    .topic-arrow { top: 6px; right: 6px; }
    .journal-list,.read-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:680px) {
    .frame { width: calc(100% - 28px); }
    .mast-inner { min-height: 54px; }
    .mast-actions > .action { min-height: 39px; padding: 6px 9px; font-size: .81rem; }
    .wordmark { gap: 6px; }
    .wordmark img { width: 27px; height: 27px; }
    .wordmark span { font-size: 1.02rem; }
    .hero { padding: 0 0 13px; }
    .hero-inner { display: flex; flex-direction: column-reverse; }
    .hero-visual { min-height: 0; height: clamp(158px,46vw,265px); }
    .cover-art img { object-position: 50% 7%; }
    .visual-caption { font-size: .74rem; padding: 5px 9px; }
    .hero-copy { padding: 16px 16px 18px; }
    .hero-copy::after { inset: 0; clip-path: none; }
    .hero h1 { font-size: clamp(1.25rem,4.5vw,1.81rem); }
    .hero-brand { font-size: clamp(2.34rem,9.3vw,3.55rem); }
    .hero-intro { margin: 6px 0 11px; font-size: .89rem; line-height: 1.48; }
    .hero-actions { gap: 6px; }
    .hero-actions .action { padding: 7px 10px; min-height: 39px; }
    .directory { padding: 17px 0 22px; }
    .section-head,.journal-heading { gap: 8px; margin-bottom: 10px; }
    .section-head h2,.journal-heading h2 { font-size: 1.35rem; }
    .section-head > .text-link { font-size: .8rem; }
    .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .topic-photo { aspect-ratio: 2.3; }
    .topic-caption { padding: 7px 9px; }
    .topic-caption h3 { font-size: 1.04rem; }
    .topic-caption p { font-size: .75rem; }
    .topic-arrow { width: 22px; height: 22px; }
    .topic-lottery { grid-column: 1/-1; display: grid; grid-template-columns: 37% minmax(0,1fr); align-items: center; }
    .topic-lottery .topic-photo { aspect-ratio: 2; }
    .topic-lottery .topic-arrow { top: 6px; right: 6px; }
    .practice-inner,.reading,.clubhouse { grid-template-columns: minmax(0,1fr); gap: 15px; }
    .score-panel { padding: 8px 10px 12px; }
    .lesson-copy p,.score-result p { font-size: .91rem; }
    .journal-heading { flex-wrap: wrap; align-items: center; }
    .journal-controls { gap: 5px; font-size: .79rem; }
    .journal-controls select { min-height: 37px; }
    .journal-list,.read-grid { grid-template-columns: minmax(0,1fr); }
    .read-card { display: grid; grid-template-columns: 31% minmax(0,1fr); gap: 10px; align-items: center; padding-bottom: 10px; }
    .read-cover { aspect-ratio: 1.23; }
    .read-body { padding: 0; }
    .read-body h2,.read-body h3 { margin-block: 3px; font-size: 1rem; }
    .read-body p,.read-meta,.post-links { font-size: .8rem; }
    .read-meta { gap: 3px 7px; }
    .prose { padding: 14px 12px; }
    .reading-side img { max-height: 230px; object-fit: cover; }
    .closing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding-block: 22px; }
    .closing-brand { grid-column: 1/-1; }
    .closing h2 { font-size: .99rem; }
    .closing li a,.closing p { font-size: .84rem; }
    .colophon { font-size: .76rem; }
}
@media (max-width:360px) {
    .frame { width: calc(100% - 22px); }
    .mast-inner,.mast-actions { gap: 5px; }
    .mast-actions .action .ui-icon { display: none; }
    .hero-copy { padding-inline: 11px; }
    .hero-actions .action { padding-inline: 8px; font-size: .79rem; }
    .score-panel label { font-size: .83rem; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
}