/*
Theme Name: Bigboss28 Ringside
Description: Thai guides to boxing, baccarat, slots and lottery results, with original ringside photography.
Version: 1.0.0
Author: Bigboss28
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: bigboss28-ringside
License: GNU General Public License v2 or later
*/
:root {
    --ink: #101c30;
    --navy: #0b172a;
    --panel: #14243b;
    --blue: #234bc6;
    --lightblue: #b8cbff;
    --red: #b23846;
    --paper: #f5f4ef;
    --white: #fffef9;
    --line: #d3d7df;
    --muted: #505e70;
    --body: "Fahkwang", "Noto Sans Thai", Tahoma, sans-serif;
    --display: "Archivo Black", "Arial Black", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.72 var(--body); overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.36; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; }
button, select, summary { cursor: pointer; }
svg, img, picture { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #ec8f33; outline-offset: 3px; }
.frame { width: min(calc(100% - clamp(36px,7vw,112px)),1450px); margin-inline: auto; }
.ui-icon { flex: none; width: 17px; height: 17px; }
.skip { position: fixed; top: 10px; left: 7px; z-index: 35; transform: translateY(-165%); color: white; background: var(--blue); padding: 7px 14px; }
.skip:focus { transform: none; }
.sr-only, .decision-switch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.mast { border-top: 4px solid var(--blue); border-bottom: 1px solid var(--line); background: var(--white); }
.mast-inner, .mast-actions, .main-menu ul, .wordmark, .action, .text-link, .score-link { display: flex; align-items: center; }
.mast-inner { min-height: 72px; gap: clamp(20px,4.7vw,73px); }
.wordmark { gap: 8px; flex: none; }
.wordmark img { width: 33px; height: 33px; border-radius: 4px; }
.wordmark > span { color: inherit; font: italic 900 clamp(1.33rem,1.96vw,2rem)/1 var(--display); white-space: nowrap; letter-spacing: -.075em; }
.word-finish { color: var(--blue); }
.main-menu ul, .closing ul { list-style: none; padding: 0; margin: 0; }
.main-menu ul { gap: clamp(15px,2.1vw,34px); flex-wrap: wrap; }
.main-menu a, .desk-login { min-height: 44px; display: inline-flex; align-items: center; font-size: .91rem; font-weight: 700; }
.main-menu a:hover, .main-menu a[aria-current], .desk-login:hover { color: var(--blue); }
.mast-actions { margin-left: auto; gap: clamp(13px,2.1vw,33px); }
.action { display: inline-flex; justify-content: center; min-height: 42px; padding: 9px 18px; gap: 7px; border-radius: 5px; font-size: .91rem; font-weight: 700; line-height: 1.5; border: 1px solid transparent; }
.blue-action, .ink-action { color: white; background: var(--blue); }
.blue-action:hover, .ink-action:hover { background: #1b3eaa; }
.outline-action { color: white; border-color: #acb9d0; background: #071226ca; }
.outline-action:hover { background: #182846; border-color: white; }
.action .ui-icon { width: 14px; }
.nav-toggle, .main-menu .drawer-login { display: none; }
.ringside { background: linear-gradient(var(--navy) 0 350px,var(--paper) 350px); }
.arena { display: grid; grid-template-columns: minmax(0,2.66fr) minmax(250px,.96fr); grid-template-areas: "cover score" "topics topics"; gap: clamp(17px,1.55vw,27px); padding-top: clamp(19px,2.3vw,35px); }
.cover { grid-area: cover; position: relative; display: flex; align-items: end; min-height: clamp(395px,32vw,510px); isolation: isolate; overflow: hidden; border: 1px solid #51627c; border-radius: 7px; color: #fffdf5; background: var(--navy); }
.cover-art, .cover-art img { width: 100%; height: 100%; position: absolute; inset: 0; }
.cover-art { z-index: -2; }
.cover-art img { object-fit: cover; object-position: 73% 42%; }
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#071123ed 0%,#101d35b0 36%,transparent 72%),linear-gradient(0deg,#081329bd,transparent 46%); }
.cover-copy { padding: clamp(28px,3.4vw,56px); width: min(66%,690px); }
.cover h1 { font-size: clamp(1.24rem,2.2vw,2.35rem); line-height: 1.4; }
.cover-brand { display: block; margin: 0 0 .16em -.052em; font: italic 900 clamp(3rem,6.1vw,6.65rem)/.98 var(--display); letter-spacing: -.087em; white-space: nowrap; }
.cover-brand span { color: #a4bfff; }
.cover-subjects { display: block; max-width: 17em; }
.cover-copy p { max-width: 32em; margin-top: 12px; font-size: clamp(.92rem,1.12vw,1.05rem); color: #e4e9f3; line-height: 1.65; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(18px,2.1vw,28px); }
.scorecard { grid-area: score; position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; color: var(--ink); border: 1px solid #c1cad8; border-top: 5px solid var(--blue); border-radius: 6px; padding: clamp(17px,1.7vw,29px); background: var(--white); }
.score-head { position: relative; }
.score-mark { display: grid; place-items: center; width: 39px; height: 35px; margin-bottom: 15px; border: 1px solid #bdcafa; border-radius: 4px; background: #eaf0ff; color: var(--blue); }
.score-mark .ui-icon { width: 19px; height: 19px; }
.score-head h2 { font-size: clamp(1.3rem,1.65vw,1.88rem); }
.score-head p { font-size: .82rem; line-height: 1.52; color: var(--muted); margin-top: 5px; }
.decision-switch { position: relative; min-width: 0; width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 15px 0 4px; padding: 0; border: 0; }
.decision-switch label { padding: 7px 4px; border: 1px solid #b7bdc9; background: #f5f6fa; color: #36465b; cursor: pointer; text-align: center; font-weight: 700; font-size: .78rem; line-height: 1.7; }
label[for="score-unanimous"] { border-radius: 4px 0 0 4px; }
label[for="score-split"] { border-radius: 0 4px 4px 0; }
.decision-switch input:checked + label { background: var(--ink); color: white; border-color: var(--ink); }
.decision-switch input:focus-visible + label { outline: 3px solid #da7d13; outline-offset: 2px; z-index: 1; }
.decision-result { grid-column: 1/-1; display: none; }
#score-unanimous:checked ~ .result-unanimous, #score-split:checked ~ .result-split { display: block; }
.decision-result table { width: 100%; border-collapse: collapse; font-size: .84rem; margin-top: 12px; text-align: left; }
.decision-result th, .decision-result td { padding: 3px 4px; }
.decision-result th:first-child { padding-left: 0; }
.decision-result thead { border-bottom: 1px solid #a7b2c3; }
.decision-result thead th { font-weight: 700; font-size: .79rem; }
.decision-result tbody th { font-weight: 400; color: var(--muted); }
.decision-result td, .decision-result thead th:not(:first-child) { text-align: right; }
.decision-result td { font: 700 1.06rem/1.55 "IBM Plex Mono", Consolas, monospace; }
.decision-result tbody tr { border-bottom: 1px solid var(--line); }
.red-corner { color: #a3293a; }
.blue-corner { color: var(--blue); }
.verdict { margin: 12px 0 3px; font-size: .94rem; font-weight: 700; }
.score-link, .text-link { width: fit-content; gap: 7px; color: var(--blue); font-weight: 700; font-size: .85rem; min-height: 34px; }
.score-link:hover, .text-link:hover { text-decoration: underline; }
.score-link .ui-icon, .text-link .ui-icon { width: 15px; }
.categories { grid-area: topics; margin-top: clamp(13px,1.45vw,27px); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 17px; }
.section-heading h2 { position: relative; padding-left: 14px; font-size: clamp(1.37rem,2vw,2.12rem); }
.section-heading h2::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 4px; background: var(--blue); }
.topic-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(10px,1.3vw,21px); }
.topic-card { position: relative; min-width: 0; isolation: isolate; display: flex; align-items: end; height: clamp(148px,14.9vw,242px); color: white; background: var(--navy); overflow: hidden; border-radius: 6px; }
.topic-photo, .topic-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.topic-photo { z-index: -2; }
.topic-photo img { object-fit: cover; transition: transform .25s ease; }
.topic-card:hover img { transform: scale(1.035); }
.topic-card::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,#081220f7 0%,#0a1725c7 24%,#0813232e 61%,transparent 90%); }
.topic-caption { padding: 14px clamp(13px,1.45vw,23px); padding-right: 36px; }
.topic-caption h3 { font-size: clamp(1.12rem,1.75vw,1.65rem); }
.topic-caption p { color: #e4e9f6; font-size: .82rem; line-height: 1.57; margin-top: 2px; }
.topic-arrow { position: absolute; right: 13px; bottom: 16px; border: 1px solid #c2ccdc; border-radius: 50%; padding: 4px; }
.topic-arrow .ui-icon { width: 11px; height: 11px; }
.notebook { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); align-items: stretch; gap: clamp(16px,2vw,31px); margin-top: clamp(27px,3.15vw,51px); }
.feature-copy { padding: clamp(18px,2.25vw,35px); background: #e8edf6; border-left: 4px solid var(--blue); }
.feature-copy h2, .account-body h2 { font-size: clamp(1.13rem,1.5vw,1.58rem); margin-bottom: 7px; }
.feature-copy p { line-height: 1.75; color: #2f3e53; font-size: .95rem; }
.feature-copy a, .prose a { text-decoration: underline; text-underline-offset: 3px; color: #203faa; }
.account-panel { display: grid; grid-template-columns: minmax(80px,33%) minmax(0,1fr); align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--white); }
.account-photo { position: relative; min-height: 115px; background: var(--navy); }
.account-photo img { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; }
.account-body { padding: 14px clamp(13px,1.6vw,24px); align-self: center; }
.account-body a { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .86rem; min-height: 35px; border-top: 1px solid var(--line); }
.account-body a:hover { color: var(--blue); }
.account-body a .ui-icon { width: 14px; }
.journal { padding-block: clamp(30px,3.6vw,60px) clamp(44px,5vw,78px); }
.journal-controls { margin: -3px 0 17px; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: .85rem; }
.journal-controls select { padding: 4px 7px; color: var(--ink); background: var(--white); border: 1px solid #aeb8c8; border-radius: 3px; }
.journal-list, .read-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(13px,1.8vw,27px); }
.read-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: var(--white); border-radius: 5px; }
.read-cover { display: block; aspect-ratio: 2; overflow: hidden; background: var(--panel); }
.read-cover img { width: 100%; height: 100%; object-fit: cover; }
.read-body { padding: 13px clamp(14px,1.45vw,23px) 17px; }
.read-meta, .article-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: .79rem; margin-bottom: 7px; }
.read-meta span { color: var(--blue); font-weight: 700; }
.read-body h2, .read-body h3 { font-size: clamp(1.05rem,1.38vw,1.44rem); margin-bottom: 4px; }
.read-body h2 a:hover, .read-body h3 a:hover { color: var(--blue); }
.read-body p { font-size: .9rem; color: var(--muted); }
.inner-head { background: var(--navy); color: #f8f8f2; padding-block: clamp(24px,3.65vw,58px); border-bottom: 4px solid var(--blue); }
.crumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; color: #bac9e2; font-size: .8rem; }
.crumb a:hover, .article-byline a:hover { text-decoration: underline; }
.inner-head h1 { font-size: clamp(1.65rem,3.4vw,3.37rem); max-width: 29em; }
.inner-head p { margin-top: 9px; color: #dce4f2; font-size: clamp(.96rem,1.23vw,1.13rem); max-width: 67em; }
.article-byline { color: #e4e9f5; }
.article-byline a { color: #b7ccff; }
.reading { display: grid; grid-template-columns: minmax(0,1fr) minmax(195px,25%); align-items: start; gap: clamp(20px,3vw,48px); padding-block: clamp(24px,3.25vw,53px) clamp(40px,5vw,75px); }
.prose { min-width: 0; padding: clamp(18px,3.05vw,47px); background: var(--white); border: 1px solid var(--line); border-radius: 5px; font-size: 1rem; line-height: 1.85; overflow-wrap: anywhere; }
.prose p, .prose ol, .prose ul { margin: 0 0 .95em; }
.prose h2, .prose h3 { margin: 1.25em 0 .42em; }
.prose h2 { font-size: clamp(1.23rem,1.8vw,1.76rem); }
.prose h3 { font-size: 1.12rem; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose ol, .prose ul { padding-left: 1.45em; }
.prose li + li { margin-top: .25em; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.prose table caption { text-align: left; font-weight: 700; padding-block: 5px; }
.prose :is(th,td) { text-align: start; vertical-align: top; border: 1px solid var(--line); padding: 7px 10px; }
.prose th { background: #e7ecf7; }
.prose .action { color: white; text-decoration: none; }
.outbound { padding: 16px; margin-bottom: 20px; background: #eaf0fb; border-left: 4px solid var(--blue); }
.outbound p { color: var(--muted); font-size: .87rem; margin: 6px 0 0; }
.reading-side { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--white); }
.reading-side img { width: 100%; aspect-ratio: 1.55; height: auto; object-fit: cover; }
.reading-side .text-link { margin: 8px 15px; }
.post-links { display: grid; gap: 6px; margin-top: 25px; border-top: 1px solid var(--line); padding-top: 15px; }
.pagination { margin-top: 25px; }
.nav-links { display: flex; gap: 12px; flex-wrap: wrap; }
.archive-body { padding-block: clamp(23px,3.4vw,55px) clamp(43px,5vw,77px); }
.archive-intro { margin-bottom: 24px; }
.missing { padding-block: 68px; }
.missing .action { margin-top: 16px; }
.closing { color: #ecf1ff; background: var(--navy); border-top: 5px solid var(--blue); }
.closing-grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: clamp(22px,5vw,85px); padding-block: clamp(29px,3.8vw,62px); }
.closing-brand p { max-width: 23em; color: #b6c4d9; font-size: .9rem; margin-top: 13px; }
.closing h2 { color: #c4d4ff; font-size: 1rem; margin-bottom: 7px; }
.closing li a { display: inline-block; color: #ecf1f8; font-size: .89rem; padding-block: 3px; }
.closing li a:hover { text-decoration: underline; }
.colophon { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #3c4b62; padding-block: 14px; color: #b2c0d5; font-size: .78rem; }
@media (max-width:1100px) {
    .arena { grid-template-columns: minmax(0,2fr) minmax(230px,.84fr); }
    .cover-copy { width: 75%; padding: 25px; }
    .scorecard { padding: 17px; }
    .score-head h2 { font-size: 1.28rem; }
    .score-mark { margin-bottom: 10px; }
    .topic-caption { padding-left: 12px; }
}
@media (max-width:860px) {
    .frame { width: calc(100% - 36px); }
    .mast-inner { min-height: 61px; flex-wrap: wrap; gap: 0; }
    .mast-actions { gap: 9px; }
    .desk-login { display: none; }
    .main-menu { order: 3; width: 100%; }
    .main-menu ul { flex-wrap: wrap; gap: 14px; }
    .main-menu .drawer-login { display: inline-flex; gap: 6px; color: var(--blue); }
    .drawer-login .ui-icon { width: 13px; }
    .nav-ready .main-menu { display: none; }
    .nav-ready .menu-open .main-menu { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; border-top: 1px solid var(--line); padding-block: 4px; }
    .nav-ready .nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; gap: 5px; border: 1px solid #a4b1c5; color: var(--ink); background: transparent; border-radius: 4px; }
    .nav-toggle span { width: 16px; height: 2px; background: currentColor; }
    .arena { grid-template-columns: minmax(0,1.65fr) minmax(224px,.85fr); gap: 13px; }
    .cover-copy { width: 88%; padding: 20px; }
    .cover { min-height: 355px; }
    .cover-brand { font-size: clamp(2.75rem,6vw,3.75rem); }
    .cover-copy p { font-size: .89rem; }
    .cover-actions .action { padding-inline: 11px; font-size: .81rem; }
    .scorecard { padding: 14px; }
    .score-mark { width: 30px; height: 28px; margin-bottom: 7px; }
    .score-head p { font-size: .78rem; }
    .topic-grid { gap: 9px; }
    .topic-arrow { display: none; }
    .topic-caption { padding: 11px; }
    .topic-caption p { font-size: .76rem; }
    .notebook { grid-template-columns: minmax(0,1.42fr) minmax(0,1fr); gap: 13px; }
    .reading { grid-template-columns: minmax(0,1fr) minmax(145px,23%); gap: 17px; }
}
@media (max-width:680px) {
    .frame { width: calc(100% - 26px); }
    .ringside { background: linear-gradient(var(--navy) 0 285px,var(--paper) 285px); }
    .mast-inner { min-height: 59px; }
    .wordmark { gap: 6px; }
    .wordmark img { width: 28px; height: 28px; }
    .wordmark > span { font-size: 1.34rem; }
    .mast-actions { gap: 6px; }
    .mast-actions .action { font-size: .8rem; min-height: 39px; padding: 7px 9px; gap: 4px; }
    .mast-actions .ui-icon { width: 11px; }
    .nav-ready .menu-open .main-menu { display: block; }
    .main-menu a { font-size: .84rem; }
    .arena { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "cover" "topics" "score"; gap: 0; padding-top: 12px; }
    .cover { min-height: clamp(410px,110vw,580px); }
    .cover-art img { object-position: center 30%; }
    .cover::before { background: linear-gradient(0deg,#071222fb 1%,#091629e8 25%,#0a182d9e 48%,transparent 76%); }
    .cover-copy { width: 100%; padding: clamp(166px,43vw,275px) clamp(15px,4.5vw,26px) 23px; }
    .cover-brand { font-size: clamp(2.9rem,11.4vw,4.85rem); margin-bottom: 7px; }
    .cover h1 { font-size: clamp(1.26rem,5.15vw,1.96rem); line-height: 1.45; }
    .cover-copy p { margin-top: 6px; font-size: .87rem; }
    .cover-actions { margin-top: 13px; }
    .cover-actions .action { min-height: 39px; padding: 7px 9px; font-size: .79rem; }
    .categories { margin: 24px 0; }
    .section-heading { margin-bottom: 12px; gap: 10px; }
    .section-heading h2 { font-size: 1.28rem; padding-left: 10px; }
    .topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .topic-card { height: clamp(139px,34vw,210px); }
    .topic-caption { padding: 10px; }
    .topic-caption p { font-size: .76rem; }
    .scorecard { padding: 16px; }
    .score-mark { float: right; margin: 0 0 0 8px; width: 32px; height: 32px; }
    .decision-switch { margin-top: 12px; }
    .decision-switch label { padding: 6px; }
    .decision-result table { margin-top: 9px; }
    .notebook { grid-template-columns: 1fr; margin-top: 14px; }
    .feature-copy { padding: 16px; }
    .feature-copy p { font-size: .9rem; }
    .account-panel { grid-template-columns: 29% minmax(0,1fr); }
    .journal-list, .read-grid { grid-template-columns: minmax(0,1fr); gap: 11px; }
    .read-card { display: grid; grid-template-columns: minmax(80px,29%) minmax(0,1fr); align-items: stretch; }
    .read-cover { height: 100%; aspect-ratio: auto; min-height: 107px; }
    .read-body { padding: 10px 11px; }
    .read-meta { font-size: .73rem; margin-bottom: 4px; }
    .read-body h2, .read-body h3 { font-size: .99rem; }
    .read-body p { font-size: .82rem; line-height: 1.55; }
    .reading { grid-template-columns: minmax(0,1fr); }
    .reading-side { display: grid; grid-template-columns: 32% minmax(0,1fr); align-items: center; }
    .reading-side .text-link { margin-inline: 12px; }
    .prose { padding: 16px 13px; font-size: .94rem; }
    .prose :is(th,td) { font-size: .85rem; padding: 5px 6px; }
    .inner-head { padding-block: 24px; }
    .outbound { padding: 12px; }
    .closing-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .closing-brand { grid-column: 1/-1; }
    .closing-brand p { margin-top: 7px; }
    .colophon { flex-wrap: wrap; }
}
@media (max-width:350px) {
    .frame { width: calc(100% - 20px); }
    .mast-actions .ui-icon { display: none; }
    .wordmark > span { font-size: 1.2rem; }
    .cover-copy { padding-inline: 12px; }
    .cover-actions { gap: 4px; }
    .cover-actions .action { font-size: .75rem; padding-inline: 7px; }
    .topic-grid { gap: 7px; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}