/*
Theme Name: Auto982 Floodlight
Description: A Thai football and games guide inspired by the stadium at night.
Version: 1.0.0
Author: Auto982
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: auto982-floodlight
License: GNU General Public License v2 or later
*/
:root {
    --night: #071427;
    --navy: #102442;
    --panel: #162e4c;
    --line: #304761;
    --paper: #f3f5f7;
    --white: #fbfcff;
    --ink: #14253d;
    --slate: #4c5b70;
    --gold: #edcd89;
    --pale: #d5deec;
    --display: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
    --text: "Fahkwang", Tahoma, "Noto Sans Thai", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.68 var(--text); overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.36; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button, select, label[for] { cursor: pointer; }
img, picture, svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #3198c9; outline-offset: 3px; }
.frame { width: min(91%, 1470px); margin-inline: auto; }
.ui-icon { width: 17px; height: 17px; flex: none; }
.skip { position: fixed; top: 6px; left: 8px; z-index: 15; padding: 8px 13px; color: var(--ink); background: white; transform: translateY(-200%); }
.skip:focus { transform: none; }
.sr-only, .line-switch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; white-space: nowrap; overflow: hidden; clip-path: inset(50%); }

.mast { background: var(--night); color: var(--white); border-bottom: 1px solid #d4bd821f; }
.mast-inner, .wordmark, .mast-actions, .main-menu ul { display: flex; align-items: center; }
.mast-inner { gap: clamp(25px, 5vw, 84px); min-height: clamp(62px, 5vw, 80px); }
.wordmark { gap: 8px; flex: none; }
.wordmark img { width: 33px; height: 33px; }
.wordmark > span { font: 800 clamp(1.27rem, 1.8vw, 1.92rem)/1 var(--display); letter-spacing: -.066em; text-transform: uppercase; }
.word-finish { color: var(--gold); font-style: italic; }
.main-menu ul, .closing ul { padding: 0; margin: 0; list-style: none; }
.main-menu ul { gap: clamp(16px,2.32vw,38px); }
.main-menu a, .desk-login { min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; font-weight: 700; }
.main-menu a:hover, .main-menu a[aria-current], .desk-login:hover { color: var(--gold); }
.mast-actions { margin-left: auto; gap: clamp(12px,2.2vw,36px); }
.action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1px solid transparent; border-radius: 5px; font-size: .92rem; font-weight: 700; line-height: 1.45; }
.action .ui-icon { width: 14px; height: 14px; }
.primary-action, .ink-action { background: var(--gold); color: #172136; }
.primary-action:hover, .ink-action:hover { background: #ffdfa2; }
.outline-action { color: white; border-color: #a1afc6; background: #0b1c33cc; }
.outline-action:hover { background: var(--panel); }
.nav-toggle, .main-menu .drawer-login { display: none; }

.cover { isolation: isolate; position: relative; overflow: hidden; background: var(--night); color: var(--white); }
.cover-art, .cover-art img, .cover::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-art { z-index: -2; }
.cover-art img { object-fit: cover; object-position: right 45%; }
.cover::before { content: ""; z-index: -1; background: linear-gradient(90deg,#061323ed 0%,#071528d1 29%,#08132954 49%,transparent 74%),linear-gradient(0deg,#09182bdd,transparent 26%); }
.cover-inner { min-height: clamp(410px, 32.4vw, 560px); display: flex; align-items: center; padding-block: clamp(28px,2.4vw,44px) clamp(48px,4vw,70px); }
.cover-copy { width: min(51%, 620px); }
.cover h1 { font-size: clamp(1.57rem,2.3vw,2.8rem); }
.cover-brand { display: block; font: 800 clamp(4.55rem,6.5vw,7.8rem)/.91 var(--display); text-transform: uppercase; letter-spacing: -.09em; white-space: nowrap; }
.cover-brand span { color: var(--gold); font-style: italic; padding-right: .075em; }
.cover-subjects { display: block; margin-top: 9px; font-weight: 700; }
.cover-copy > p { margin-top: 9px; max-width: 30em; color: #e2e9f3; line-height: 1.64; font-size: clamp(.96rem,1.15vw,1.22rem); }
.cover-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(17px,1.7vw,29px); }
.cover-copy > .member-note { color: #d7e0ec; margin-top: 8px; font-size: .77rem; }
.home-body { padding-bottom: clamp(38px,4vw,75px); }
.category-panel { position: relative; margin-top: -28px; padding: 8px; background: var(--white); border: 1px solid #d9dde3; border-radius: 8px; box-shadow: 0 11px 30px #0a1d3510; }
.topic-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.topic-card { position: relative; isolation: isolate; display: flex; align-items: end; min-height: clamp(115px,10vw,175px); padding: clamp(11px,1.1vw,19px); overflow: hidden; color: var(--white); background: var(--navy); border-radius: 4px; }
.topic-photo, .topic-photo img, .topic-card::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.topic-photo { z-index: -2; }
.topic-photo img { object-fit: cover; object-position: 50% 48%; transition: transform .23s ease; }
.topic-card:hover img { transform: scale(1.04); }
.topic-card::before { z-index: -1; content: ""; background: linear-gradient(0deg,#061327f5 0%,#08192bc2 29%,#09192b20 75%); }
.topic-card h3 { font-size: clamp(1.15rem,1.44vw,1.65rem); }
.topic-caption { min-width: 0; flex: 1; }
.topic-caption p { margin-top: 2px; color: #f1f5fa; line-height: 1.4; font-size: clamp(.72rem,.81vw,.94rem); }
.topic-arrow { margin-left: 5px; color: var(--gold); }
.topic-arrow svg { width: 16px; }

.line-lab { display: grid; grid-template-columns: minmax(0,.76fr) minmax(0,1.55fr); align-items: center; gap: clamp(14px,3vw,50px); margin-block: clamp(22px,2.5vw,43px); padding: clamp(18px,2vw,34px); border: 1px solid #2b4059; background: linear-gradient(108deg,#0d213b,#193652); color: white; border-radius: 7px; }
.lab-intro h2, .section-heading h2, .feature-copy h2, .account-body h2 { font-size: clamp(1.31rem,1.94vw,2.16rem); }
.lab-intro p { margin-top: 5px; color: var(--pale); font-size: .94rem; }
.text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 35px; width: fit-content; font-size: .9rem; font-weight: 700; }
.text-link .ui-icon { width: 15px; }
.text-link:hover, .account-body a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lab-intro .text-link { color: var(--gold); }
.line-switch { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); min-width: 0; padding: 0; margin: 0; border: 0; gap: 5px; }
.line-switch label { min-height: 42px; display: grid; place-items: center; padding: 4px; text-align: center; border: 1px solid #73839b; border-radius: 4px; color: var(--pale); font-size: .87rem; font-weight: 700; }
.line-switch input:checked + label { border-color: var(--gold); background: var(--gold); color: #122239; }
.line-switch input:focus-visible + label { outline: 3px solid white; outline-offset: 2px; }
.line-result { display: none; grid-column: 1/-1; grid-template-columns: minmax(73px,23%) minmax(0,1fr); align-items: center; gap: clamp(10px,1.15vw,19px); margin-top: 5px; }
#scene-line:checked ~ .result-line, #scene-touch:checked ~ .result-touch, #scene-goal:checked ~ .result-goal { display: grid; }
.line-result strong { color: var(--white); font-size: 1.03rem; }
.line-result p { color: var(--pale); font-size: .85rem; line-height: 1.55; }
.pitch-diagram { position: relative; height: 66px; isolation: isolate; overflow: hidden; border-radius: 3px; background: repeating-linear-gradient(90deg,#1d523e 0 17px,#245a45 17px 34px); }
.pitch-diagram::before { content: ""; position: absolute; inset: 0 0 0 50%; background: #1f3b37; }
.boundary { position: absolute; top: 0; left: 50%; transform: translateX(-100%); bottom: 0; width: 4px; background: #f1f3e3; }
.ball { position: absolute; width: 19px; height: 19px; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); border: 2px solid white; background: radial-gradient(circle at 48% 47%,#172b38 0 3px,transparent 3.5px),radial-gradient(circle at 14% 91%,#243644 0 3px,transparent 4px),#e8eef1; box-shadow: 1px 3px 5px #12261d9e; }
.result-touch .ball, .result-goal .ball { left: 71%; }
.result-goal .pitch-diagram::after { content: ""; position: absolute; z-index: 0; left: 50%; right: 8%; top: 15%; bottom: 15%; border: 2px solid #cedde0; border-left: 0; }
.result-goal .ball { z-index: 1; }

.section-heading, .journal-controls, .read-meta, .article-byline { display: flex; gap: 10px; align-items: center; }
.section-heading { flex-wrap: wrap; padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px solid #b9c2cc; }
.section-heading > .text-link { color: var(--navy); }
.journal-controls { margin-left: auto; color: var(--slate); font-size: .82rem; }
.journal-controls select { color: var(--ink); background: white; border: 1px solid #a0acb9; border-radius: 4px; padding: 6px; }
.journal-controls[hidden] + .text-link { margin-left: auto; }
.journal-list, .read-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(12px,1.55vw,26px); }
.read-card { overflow: hidden; background: white; border: 1px solid #d7dfe6; border-radius: 5px; }
.read-cover { display: block; background: #dae1e8; overflow: hidden; }
.read-cover img { width: 100%; height: auto; aspect-ratio: 2.23; object-fit: cover; }
.read-body { padding: clamp(12px,1.4vw,23px); }
.read-meta { flex-wrap: wrap; color: var(--slate); line-height: 1.4; font-size: .76rem; }
.read-meta span { font-weight: 700; color: #574220; }
.read-body h3, .read-body h2 { font-size: clamp(1.06rem,1.46vw,1.55rem); margin-top: 7px; }
.read-body h3 a:hover, .read-body h2 a:hover { text-decoration: underline; }
.read-body p { font-size: .9rem; margin-top: 6px; color: var(--slate); }
.editor-desk { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); margin-top: clamp(22px,2.4vw,40px); gap: clamp(15px,1.8vw,30px); }
.feature-copy { padding: clamp(16px,2vw,33px); border-left: 3px solid #ad8c4d; background: #e9e5dc; }
.feature-copy p { margin-top: 7px; }
.feature-copy a { color: #433512; text-decoration: underline; text-underline-offset: 3px; }
.account-panel { display: grid; grid-template-columns: minmax(70px,37%) minmax(0,1fr); background: var(--navy); color: white; border-radius: 5px; overflow: hidden; }
.account-photo { min-height: 100%; position: relative; }
.account-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.account-body { align-self: center; padding: clamp(14px,1.55vw,26px); }
.account-body h2 { font-size: clamp(1.15rem,1.55vw,1.65rem); }
.account-body a { display: flex; justify-content: space-between; align-items: center; gap: 2px; min-height: 40px; color: var(--pale); border-bottom: 1px solid #40546b; font-size: .9rem; }
.account-body a .ui-icon { color: var(--gold); }

.inner-head { padding-block: clamp(27px,3.85vw,65px); color: var(--white); border-bottom: 3px solid var(--gold); background: linear-gradient(115deg,#0c1c34,#203e5a); }
.inner-head h1 { font-size: clamp(1.75rem,3.4vw,3.8rem); max-width: 28em; overflow-wrap: anywhere; }
.inner-head p { color: var(--pale); margin-top: 9px; max-width: 56em; }
.crumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: .82rem; color: var(--pale); }
.crumb a:hover, .article-byline a:hover { text-decoration: underline; }
.article-byline { flex-wrap: wrap; color: var(--gold); font-size: .82rem; }
.reading { display: grid; grid-template-columns: minmax(0,1fr) minmax(170px,26%); align-items: start; gap: clamp(18px,2.6vw,44px); padding-block: clamp(22px,3vw,52px) clamp(35px,4.7vw,85px); }
.prose { min-width: 0; padding: clamp(18px,2.7vw,46px); border: 1px solid #dbe0e8; border-radius: 5px; background: white; font-size: 1.015rem; line-height: 1.85; overflow-wrap: anywhere; }
.prose h2, .prose h3 { margin: 1.1em 0 .4em; }
.prose h2 { font-size: clamp(1.2rem,1.8vw,1.95rem); }
.prose h3 { font-size: 1.11rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 .88em; }
.prose ul, .prose ol { padding-left: 1.55em; }
.prose li + li { margin-top: .26em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose a { color: #294d75; text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 15px; }
.prose caption { text-align: start; font-weight: bold; padding-block: 5px; }
.prose th, .prose td { text-align: start; vertical-align: top; border: 1px solid #b2bdca; padding: 7px 9px; }
.prose th { background: #edf1f5; }
.outbound { padding: 16px; margin-bottom: 21px; border-left: 3px solid #a4864b; background: #eff2f4; }
.outbound p { margin: 6px 0 0; color: var(--slate); font-size: .88rem; }
.prose a.action { text-decoration: none; color: var(--ink); }
.reading-side { overflow: hidden; min-width: 0; color: var(--white); background: var(--navy); border-radius: 5px; }
.reading-side img { width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; }
.reading-side .text-link { margin: 7px 13px; }
.post-links { display: grid; gap: 7px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #bdc8d1; }
.archive-body, .missing { padding-block: clamp(22px,3.2vw,55px) clamp(38px,4.8vw,80px); }
.archive-intro { margin-bottom: 20px; }
.pagination, .missing .action { margin-top: 17px; }
.nav-links { display: flex; gap: 12px; flex-wrap: wrap; }
.closing { background: var(--night); color: white; border-top: 3px solid #a98c54; }
.closing-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: clamp(18px,4vw,75px); padding-block: clamp(25px,3.5vw,62px); }
.closing-brand p { color: var(--pale); max-width: 28em; margin-top: 10px; font-size: .88rem; }
.closing h2 { color: var(--gold); font-size: 1rem; margin-bottom: 6px; }
.closing li a { display: inline-block; padding-block: 3px; color: #d7dfed; font-size: .88rem; }
.closing li a:hover { text-decoration: underline; }
.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 12px; font-size: .76rem; color: #c9d4e1; border-top: 1px solid var(--line); }

@media (max-width:1050px) {
    .frame { width: 93%; }
    .mast-inner { gap: 22px; }
    .cover-inner { min-height: 370px; }
    .cover-copy { width: 57%; }
    .cover-brand { font-size: clamp(3.9rem,7.1vw,5rem); }
    .topic-card { min-height: 113px; }
    .topic-arrow { display: none; }
    .line-lab { gap: 18px; }
}
@media (max-width:860px) {
    .mast-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 62px; gap: 0 8px; }
    .mast-inner > .wordmark { grid-area: 1/1; justify-self: start; }
    .mast-actions { grid-area: 1/2; gap: 8px; }
    .main-menu { grid-area: 2/1/3/-1; }
    .main-menu ul { flex-wrap: wrap; gap: 0 14px; }
    .main-menu .drawer-login { display: inline-flex; gap: 5px; }
    .drawer-login .ui-icon { width: 14px; }
    .desk-login, .nav-ready .main-menu { display: none; }
    .nav-ready .menu-open .main-menu { display: block; border-top: 1px solid var(--line); }
    .nav-ready .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 41px; height: 41px; gap: 4px; padding: 0; border: 1px solid #697c94; border-radius: 5px; background: var(--navy); color: white; }
    .nav-toggle span { width: 16px; height: 2px; background: currentColor; }
    .cover-inner { min-height: 340px; }
    .cover-copy { width: 60%; }
    .cover-copy > p { font-size: .92rem; }
    .cover-brand { font-size: clamp(3.6rem,7.7vw,4.4rem); }
    .topic-card { padding: 9px; }
    .topic-caption p { font-size: .72rem; }
    .line-lab { grid-template-columns: minmax(0,.75fr) minmax(0,1.35fr); gap: 14px; }
    .line-result { grid-template-columns: 73px minmax(0,1fr); }
    .editor-desk { grid-template-columns: minmax(0,1.18fr) minmax(0,1fr); }
}
@media (max-width:680px) {
    .frame { width: calc(100% - 28px); }
    .mast-inner { min-height: 56px; }
    .wordmark { gap: 5px; }
    .wordmark img { width: 26px; height: 26px; }
    .wordmark > span { font-size: 1.31rem; }
    .mast-actions { gap: 6px; }
    .mast-actions .action { min-height: 38px; padding: 6px 10px; font-size: .78rem; gap: 4px; }
    .nav-ready .nav-toggle { width: 37px; height: 37px; }
    .cover-art img { object-position: center 16%; }
    .cover::before { background: linear-gradient(0deg,#08162afc 0%,#08172af5 21%,#0b182bc7 39%,#0c1e3520 69%,transparent); }
    .cover-inner { min-height: 0; padding-block: clamp(179px,47vw,280px) 35px; }
    .cover-copy { width: 100%; }
    .cover-brand { font-size: clamp(3.3rem,13vw,5.3rem); }
    .cover-subjects { font-size: clamp(1.29rem,5.3vw,1.9rem); margin-top: 5px; }
    .cover-copy > p { font-size: .88rem; line-height: 1.58; margin-top: 6px; }
    .cover-actions { gap: 7px; margin-top: 13px; }
    .cover-actions .action { font-size: .79rem; min-height: 40px; padding: 7px 12px; }
    .cover-copy > .member-note { font-size: .72rem; }
    .category-panel { margin-top: -15px; padding: 5px; border-radius: 6px; }
    .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
    .topic-card { min-height: clamp(98px,27vw,153px); padding: 8px; }
    .topic-caption h3 { font-size: 1.1rem; }
    .line-lab { grid-template-columns: 1fr; padding: 15px; gap: 11px; margin-block: 19px; }
    .lab-intro p { font-size: .86rem; }
    .line-switch label { font-size: .76rem; min-height: 39px; }
    .line-result { grid-template-columns: minmax(58px,24%) minmax(0,1fr); }
    .line-result p { font-size: .8rem; }
    .pitch-diagram { height: 64px; }
    .section-heading { gap: 8px 12px; margin-bottom: 8px; padding-bottom: 8px; }
    .section-heading > .text-link { margin-left: auto; }
    .journal-controls { order: 3; width: 100%; margin-left: 0; }
    .journal-list, .read-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
    .read-card { display: grid; grid-template-columns: minmax(78px,29%) minmax(0,1fr); }
    .read-cover img { height: 100%; aspect-ratio: auto; }
    .read-body { padding: 10px; }
    .read-meta { font-size: .69rem; }
    .read-body h3, .read-body h2 { font-size: 1.01rem; margin-top: 4px; }
    .read-body p { font-size: .81rem; margin-top: 4px; }
    .editor-desk, .reading { grid-template-columns: minmax(0,1fr); gap: 12px; }
    .account-panel { min-height: 120px; }
    .reading-side { display: grid; grid-template-columns: 32% minmax(0,1fr); align-items: center; }
    .prose { padding: 15px; font-size: .95rem; }
    .prose td, .prose th { padding: 5px; font-size: .82rem; }
    .outbound { padding: 10px; }
    .closing-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .closing-brand { grid-column: 1/-1; }
}
@media (max-width:375px) {
    .frame { width: calc(100% - 20px); }
    .cover-actions { gap: 5px; }
    .cover-actions .action { padding-inline: 9px; }
    .mast-actions .ui-icon, .cover-actions .ui-icon { display: none; }
    .wordmark img { width: 24px; height: 24px; }
    .wordmark > span { font-size: 1.22rem; }
    .line-lab { padding: 12px; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}