/*
Theme Name: Pokebeans
Theme URI: https://pokebeans.com
Author: Marlon and Carlos
Description: Pokemon singles, conditioned by hand. Classic theme for pokebeans.com — dark and light, no block editor dependency.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: pokebeans
*/

/* ---- everything below is generated from pokebeans.css ----
   Do not edit this file directly. Edit pokebeans.css and re-run
   build-theme.ps1, or the next build silently discards your changes. */
/* ============================================================
   POKEBEANS — shared shell
   Becomes the theme's style.css. Page-specific rules stay in
   each page's own <style> block.
   ============================================================ */

/* ---------- palette tokens ----------
   Charcoal is dark mode and the default: it applies with no
   data-palette attribute and no JavaScript. Warm Light is light
   mode and comes on by itself when the visitor's OS asks for light
   (see the prefers-color-scheme block below).
   Espresso and Slate are comparison-only, reachable by setting
   data-palette by hand. Nothing sets it automatically. */
:root,
[data-palette="charcoal"]{
  color-scheme:dark;
  --bg:#0E0E10;      --bg-2:#17171A;   --panel:#1E1E22;
  --line:#3A3A41;    --line-soft:#2A2A30;
  --ink:#EDEDEF;     --muted:#94949E;
  /* Accent, measured 2026-09-12 against every surface it lands on, not
     just the page background — which is how the previous value passed
     review and still failed in three places.
       #D93B22 (logo)  3.8:1 on --bg   — fails
       #E0432A          4.60 on --bg, 3.96 on --panel — fails on panels,
                        where the prices and .eyebrow actually sit
       #EC5439          5.41 on --bg, 4.66 on --panel — clears both
     So one accent is safe on every dark surface, rather than one that is
     safe on the darkest and quietly fails on the rest. */
  --accent:#EC5439;  --accent-ink:#FFFFFF;
  /* Filled buttons and accent text on cream need the opposite direction:
     white on #EC5439 is only 3.4:1. This deeper red carries white at
     5.54:1 and reads 4.90:1 on a cream card. Same value in both themes. */
  --accent-deep:#C3321B;
  --card:#F2F1EE;    --card-ink:#1A1A1D;
  /* --muted is tuned for the page background; on a cream card it drops to
     2.66:1. This is the muted for text sitting on --card. */
  --card-muted:#5C5C64;
  --glow:rgba(200,200,220,.10);
  --shadow:rgba(0,0,0,.9);
}
[data-palette="espresso"]{
  --bg:#140E0B;      --bg-2:#241A14;   --panel:#2B211A;
  --line:#4A3A2C;    --line-soft:#38291F;
  --ink:#EFE7D6;     --muted:#9D8A7C;
  --accent:#D93B22;  --accent-ink:#FFFFFF;
  --card:#EFE7D6;    --card-ink:#241812;
  --glow:rgba(255,200,140,.13);
  --shadow:rgba(0,0,0,.85);
}
[data-palette="slate"]{
  --bg:#0A0F14;      --bg-2:#131C24;   --panel:#19232D;
  --line:#32444F;    --line-soft:#22303A;
  --ink:#E6EDF2;     --muted:#8AA0AF;
  --accent:#D93B22;  --accent-ink:#FFFFFF;
  --card:#EEF2F5;    --card-ink:#16212A;
  --glow:rgba(120,190,230,.12);
  --shadow:rgba(0,0,0,.9);
}
[data-palette="light"]{
  color-scheme:light;
  --bg:#F4F0E6;      --bg-2:#EAE4D5;   --panel:#FFFFFF;
  --line:#D8CDB8;    --line-soft:#E5DCCB;
  --ink:#241812;     --muted:#7D6754;
  /* darker than the charcoal accent: #E0432A only reaches ~3.1:1 on
     this cream ground. #C3321B measures 4.87:1. */
  --accent:#C3321B;  --accent-ink:#FFFFFF;
  /* on cream/white the base accent already carries white at 5.54:1 */
  --accent-deep:#C3321B;
  --card:#FFFFFF;    --card-ink:#241812;
  --card-muted:#7D6754;
  --glow:rgba(180,140,90,.14);
  --shadow:rgba(80,55,35,.22);
}

/* Light mode = Warm Light, on by itself when the OS asks for light.
   :not([data-palette]) so an explicit palette still wins.
   KEEP IN SYNC with [data-palette="light"] above. */
@media (prefers-color-scheme:light){
  :root:not([data-palette]){
    color-scheme:light;
    --bg:#F4F0E6;      --bg-2:#EAE4D5;   --panel:#FFFFFF;
    --line:#D8CDB8;    --line-soft:#E5DCCB;
    --ink:#241812;     --muted:#7D6754;
    --accent:#C3321B;  --accent-ink:#FFFFFF;
    --accent-deep:#C3321B;
    --card:#FFFFFF;    --card-ink:#241812;
    --card-muted:#7D6754;
    --glow:rgba(180,140,90,.14);
    --shadow:rgba(80,55,35,.22);
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  /* transition background-color, not the `background` shorthand — the
     shorthand animates every sub-property, which is wasted work here */
  background-color:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* clip trims overflow without making body a scroll container the way
     hidden does (it forces overflow-y:auto). Sticky survives either way
     here because html is the scroller, but clip removes the hazard.
     hidden first as the fallback for Safari < 16. */
  overflow-x:hidden;
  overflow-x:clip;
  transition:background-color .35s ease,color .35s ease;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

/* ---------- focus ----------
   One ring for everything focusable. Before this, only the two icon
   buttons and the form fields had a focus style, so tabbing through the
   nav, the footer or any button left no visible trace of where you were.
   :focus-visible keeps it off mouse clicks. The offset is what makes it
   readable against a filled button, where an inset ring disappears. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,44px);}

/* ---------- show banner ---------- */
.showbar{
  display:none;
  background:var(--accent-deep);color:var(--accent-ink);
  text-align:center;font-size:13.5px;font-weight:600;
  padding:9px 18px;
}
body.show-mode .showbar{display:block;}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.navrow{display:flex;align-items:center;gap:28px;height:68px;}
.brand{font-weight:800;letter-spacing:.06em;font-size:18px;flex:0 0 auto;}
.brand span{color:var(--accent);}
nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap;}
nav a{font-size:14px;color:var(--muted);padding:4px 0;border-bottom:1.5px solid transparent;
  transition:color .2s ease,border-color .2s ease;}
nav a:hover,nav a.here{color:var(--ink);border-bottom-color:var(--accent);}
.navcta{
  flex:0 0 auto;background:var(--accent-deep);color:var(--accent-ink);
  font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:3px;
}
.navcta:hover{filter:brightness(1.08);}
.menubtn{
  display:none;flex:0 0 auto;cursor:pointer;padding:0;
  width:40px;height:36px;border:1px solid var(--line);border-radius:4px;
  background:transparent;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.menubtn span{display:block;width:17px;height:2px;background:var(--ink);}

/* ---------- theme toggle ----------
   Ships. Sets data-palette on <html>; with no stored choice the CSS
   follows the visitor's OS instead. The inline snippet in each page's
   <head> applies the stored choice before first paint — without it the
   page flashes the OS theme first. */
.themebtn{
  flex:0 0 auto;cursor:pointer;padding:0;
  width:36px;height:36px;border:1px solid var(--line);border-radius:4px;
  background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.themebtn:hover{border-color:var(--accent);color:var(--accent);}
.themebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.themebtn svg{width:17px;height:17px;display:block;}
/* only one of the two icons is ever in the DOM flow */
.themebtn .i-sun{display:none;}
.themebtn[data-shows="sun"] .i-sun{display:block;}
.themebtn[data-shows="sun"] .i-moon{display:none;}
.menubtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.navcta .cta-short{display:none;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  padding:13px 24px;border-radius:3px;border:1.5px solid transparent;
}
.btn-primary{background:var(--accent-deep);color:var(--accent-ink);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- sections ---------- */
section.band{padding:clamp(52px,7vw,88px) 0;border-bottom:1px solid var(--line-soft);}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:30px;flex-wrap:wrap;}
.sechead h2{font-size:clamp(24px,3.3vw,33px);letter-spacing:-.022em;font-weight:800;}
.sechead p{font-size:14.5px;color:var(--muted);margin-top:5px;}
.seclink{font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap;}
.seclink:hover{text-decoration:underline;}
.eyebrow{
  font-size:11.5px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}

/* interior page header */
.pagehead{
  position:relative;padding:clamp(46px,6.5vw,78px) 0 clamp(34px,4.5vw,52px);
  border-bottom:1px solid var(--line-soft);overflow:hidden;
}
.pagehead::before{
  content:'';position:absolute;left:50%;top:-40%;
  width:820px;height:520px;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--glow),transparent 72%);
  pointer-events:none;
}
.pagehead .wrap{position:relative;}
.pagehead h1{
  font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:-.028em;
  font-weight:800;margin-bottom:16px;max-width:18ch;
}
.pagehead h1 em{font-style:normal;color:var(--accent);}
.pagehead .lede{font-size:clamp(15.5px,1.5vw,18px);color:var(--muted);max-width:58ch;}

/* ---------- featured card tiles ---------- */
.cards{display:grid;gap:clamp(14px,2.2vw,22px);grid-template-columns:repeat(4,1fr);}
.fcard{
  background:var(--panel);border:1px solid var(--line-soft);border-radius:6px;
  overflow:hidden;display:block;transition:transform .25s ease,border-color .25s ease;
}
.fcard:hover{transform:translateY(-4px);border-color:var(--line);}
.fcard .shot{
  aspect-ratio:2.5/3.5;background:var(--card);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.fcard .shot img{width:100%;height:100%;object-fit:cover;display:block;}
.fcard .blob{width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--c1),var(--c2));}
.fcard .meta{padding:12px 13px 14px;}
.fcard .nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
.fcard .se{font-size:11.5px;color:var(--muted);margin-top:2px;}
.fcard .row{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);}
.fcard .cond{font-size:11.5px;color:var(--muted);}
.fcard .price{font-size:16px;font-weight:800;color:var(--accent);}
.langpip{
  position:absolute;top:8px;right:8px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  font-size:9px;font-weight:800;letter-spacing:.1em;padding:2px 6px;border-radius:2px;
}

/* ---------- show rows ---------- */
.shows{display:grid;gap:12px;}
.show{
  display:grid;grid-template-columns:92px 1fr auto;gap:20px;align-items:center;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:5px;
  padding:16px 18px;
}
.show .when{text-align:center;border-right:1px solid var(--line-soft);padding-right:16px;}
.show .when b{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.show .when span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-top:4px;}
.show h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em;}
.show p{font-size:13.5px;color:var(--muted);margin-top:2px;}
.show .tablenum{
  font-size:12px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px;white-space:nowrap;
}
.show.past{opacity:.62;}
.show.past .when span{color:var(--muted);}

/* ---------- panels & lists ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:8px;padding:clamp(22px,3.4vw,34px);
}
.ticks{list-style:none;display:grid;gap:10px;}
.ticks li{position:relative;padding-left:26px;font-size:14.5px;color:var(--muted);}
.ticks li b{color:var(--ink);font-weight:600;}
.ticks li::before{
  content:'';position:absolute;left:0;top:9px;width:11px;height:2px;background:var(--accent);
}
.ticks.no li::before{background:var(--muted);opacity:.5;}

.steps{list-style:none;counter-reset:s;display:grid;gap:18px;}
.steps li{position:relative;padding-left:46px;}
.steps li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;
  background:var(--accent-deep);color:var(--accent-ink);
  font:800 13px/30px "Segoe UI",system-ui,sans-serif;text-align:center;
}
.steps h3{font-size:16px;font-weight:700;margin-bottom:3px;letter-spacing:-.01em;}
.steps p{font-size:14.5px;color:var(--muted);}

/* ---------- forms ---------- */
.field{display:grid;gap:6px;margin-bottom:16px;}
.field label{font-size:13px;font-weight:700;letter-spacing:.01em;}
.field .help{font-size:12px;color:var(--muted);}
.field input,.field textarea,.field select{
  font:inherit;font-size:15px;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line);border-radius:4px;
  padding:11px 13px;width:100%;
}
.field textarea{min-height:120px;resize:vertical;}
/* a border-colour shift alone is invisible in Windows High Contrast and
   too subtle on low-contrast screens — WCAG 2.4.7 wants a real ring */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted);
  margin-bottom:16px;}
.check input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent);}
.formnote{
  font-size:12.5px;color:var(--muted);margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft);
}

/* ---------- footer ---------- */
footer{padding:clamp(46px,6vw,68px) 0 30px;font-size:14px;}
.footgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:clamp(20px,3vw,38px);}
.footbrand .brand{font-size:17px;margin-bottom:11px;display:inline-block;}
.footbrand p{color:var(--muted);font-size:13.5px;max-width:34ch;}
.footcol h2{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;}
.footcol a{display:block;color:var(--ink);padding:4px 0;font-size:13.5px;}
.footcol a:hover{color:var(--accent);}
.footbase{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  color:var(--muted);font-size:12.5px;
}
.footbase a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line);}
.footbase a:hover{color:var(--accent);text-decoration-color:var(--accent);}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .footgrid{grid-template-columns:1fr 1fr;}
  /* nav collapses behind the menu button rather than vanishing */
  .navrow{position:relative;}
  /* the button sits after the CTA visually; ordering here avoids
     moving it in every page's markup */
  .navcta{order:2;margin-left:auto;font-size:12.5px;padding:8px 13px;}
  .menubtn{order:3;display:flex;margin-left:10px;}
  nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:4px clamp(18px,5vw,44px) 14px;
    box-shadow:0 18px 30px -18px rgba(0,0,0,.9);
  }
  nav.open{display:flex;}
  nav a{padding:12px 0;font-size:15px;border-bottom:1px solid var(--line-soft);
    border-left:none;}
  nav a:last-child{border-bottom:none;}
  nav a.here{border-bottom-color:var(--line-soft);color:var(--accent);}
}
@media (max-width:620px){
  /* "Enter the Display Case" + wordmark + menu button will not fit a phone */
  .navrow{gap:12px;}
  .brand{font-size:16px;}
  .navcta .cta-long{display:none;}
  .navcta .cta-short{display:inline;}
}
@media (max-width:560px){
  .show{grid-template-columns:64px 1fr;}
  .show .tablenum{grid-column:2;justify-self:start;}
  .footgrid{grid-template-columns:1fr;}
  .field2{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  /* the old rule killed transitions only — smooth scrolling and any
     keyframes in a page's own <style> block still ran */
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ---------- upload feedback ---------- */
.uploadmsg{font-size:12.5px;line-height:1.45;margin-top:2px;}
.uploadmsg:empty{display:none;}
.uploadmsg.ok{color:var(--muted);}
.uploadmsg.bad{
  color:var(--accent);font-weight:600;
  border-left:2px solid var(--accent);padding-left:9px;
}

/* ---------- .entry: WordPress content we did not write ----------
   The legal pages come out of a plugin as ordinary post content, so we
   never control their markup — only how it renders. Everything here is
   element-level on purpose, because the plugin's classes will change
   without warning and ours would stop matching.
   A measure of ~72ch: policies are long, and full-width legal text at
   1180px is unreadable. */
.entry{max-width:72ch;}
.entry > * + *{margin-top:16px;}
.entry p,.entry li{font-size:15.5px;line-height:1.65;color:var(--muted);}
.entry h2{
  font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.02em;
  color:var(--ink);margin-top:38px;line-height:1.15;
}
.entry h3{
  font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin-top:28px;
}
.entry h2:first-child,.entry h3:first-child{margin-top:0;}
.entry strong,.entry b{color:var(--ink);font-weight:600;}
.entry a{color:var(--ink);border-bottom:1px solid var(--accent);}
.entry a:hover{color:var(--accent);}
.entry ul,.entry ol{padding-left:22px;}
.entry li + li{margin-top:7px;}
.entry hr{border:0;border-top:1px solid var(--line-soft);margin:32px 0;}
.entry blockquote{
  border-left:2px solid var(--accent);padding-left:16px;
  color:var(--ink);
}
/* consent tools and policy generators both like tables; they overflow on a
   phone unless the wrapper is allowed to scroll on its own */
.entry table{
  width:100%;border-collapse:collapse;font-size:14px;
  display:block;overflow-x:auto;
}
.entry th,.entry td{
  text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line-soft);color:var(--muted);
}
.entry th{color:var(--ink);font-weight:700;white-space:nowrap;}
/* ---------- how we grade ----------
   Deliberately not boxed. This is the shop talking plainly, so it is set
   as text with a rule, not as another row of cards. */
.grading .gradegrid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(26px,4.5vw,64px);align-items:start;
}
.gradelead h2{
  font-size:clamp(25px,3.6vw,36px);font-weight:800;letter-spacing:-.026em;
  line-height:1.08;margin-bottom:14px;
}
.gradelead p{color:var(--muted);font-size:15.5px;max-width:40ch;}
.gradelead a{color:var(--ink);border-bottom:1px solid var(--accent);}
.gradelead a:hover{color:var(--accent);}

.gradepoints{display:grid;gap:clamp(18px,2.6vw,26px);}
.gradepoint{
  padding-left:clamp(16px,2vw,22px);
  border-left:2px solid var(--line);
}
.gradepoint h3{
  font-size:16.5px;font-weight:800;letter-spacing:-.012em;margin-bottom:6px;
}
.gradepoint p{color:var(--muted);font-size:14.5px;}

.graderemedy{
  grid-column:1 / -1;
  margin-top:clamp(8px,1.6vw,18px);padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line-soft);
  font-size:15px;color:var(--muted);max-width:78ch;
}
.graderemedy b{color:var(--ink);font-weight:700;}

@media (max-width:860px){
  .grading .gradegrid{grid-template-columns:1fr;}
}