/*
Theme Name: Graphic Handler
Theme URI: https://graphichandler.com
Author: Graphic Handler
Description: Tema untuk studio cetak Risograph Graphic Handler. Kalender jadwal studio, publikasi, dan tampilan dwibahasa ID/EN.
Version: 1.2
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: graphichandler
*/
/* Graphic Handler — graphichandler.com
   Tokens: riso inks on white paper. */
:root{
  --paper:#ffffff;
  --ink:#000000;
  --yellow:#ffe800;   /* Riso Yellow */
  --pink:#ff48b0;     /* Riso Fluorescent Pink */
  --blue:#0078bf;     /* Riso Blue */
  --grey:#88898a;     /* Riso Light Gray-ish, for closed days */
  --rule:2px solid var(--ink);
  --gutter:clamp(16px,3vw,32px);
  --max:1200px;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;font-variation-settings:"wdth" 100}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{background:var(--yellow)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* bilingual: default Bahasa Indonesia */
html[data-lang="id"] [lang="en"]:not(html){display:none!important}
html[data-lang="en"] [lang="id"]:not(html){display:none!important}

/* header */
.site-header{border-bottom:var(--rule);background:var(--paper);position:sticky;top:0;z-index:10}
.site-header .in{max-width:var(--max);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.logo{font-weight:900;font-variation-settings:"wdth" 125;font-size:20px;letter-spacing:-.01em;text-decoration:none;line-height:1}
.logo:hover{background:none;color:var(--pink)}
.nav{display:flex;gap:4px 18px;flex-wrap:wrap;margin-left:auto;font-weight:600}
.nav a{text-decoration:none;padding:2px 0}
.nav a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--pink)}
.lang{display:flex;border:var(--rule);font-weight:700;font-size:14px}
.lang button{all:unset;cursor:pointer;padding:3px 9px}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lang button:focus-visible{outline:3px solid var(--blue)}
.menu-btn{display:none}
@media (max-width:760px){
  .menu-btn{display:block;all:unset;cursor:pointer;font-weight:700;border:var(--rule);padding:3px 10px;order:2}
  .lang{order:1;margin-left:auto}
  .nav{display:none;order:3;width:100%;flex-direction:column;margin:0;font-size:22px}
  .nav.open{display:flex}
}

/* misregistered two-ink type: the one loud element */
.overprint{position:relative;display:inline-block;font-weight:900;font-variation-settings:"wdth" 125;line-height:.86;letter-spacing:-.02em;color:transparent}
.overprint::before,.overprint::after{content:attr(data-text);position:absolute;inset:0;mix-blend-mode:multiply}
.overprint::before{color:var(--pink);transform:translate(-.04em,.02em)}
.overprint::after{color:var(--blue);transform:translate(.03em,-.015em)}
@media (prefers-reduced-motion:no-preference){
  .hero .overprint::after{animation:register 1.1s cubic-bezier(.2,.7,.2,1) both}
  @keyframes register{from{transform:translate(.22em,-.12em)}}
}

/* home hero */
.hero{background:var(--yellow);border-bottom:var(--rule)}
.hero .in{max-width:var(--max);margin:0 auto;padding:clamp(40px,8vw,96px) var(--gutter) clamp(28px,5vw,56px)}
.hero h1{margin:0;line-height:.9;font-size:clamp(56px,14.5vw,188px)}
.hero p{max-width:34em;font-size:clamp(18px,2vw,22px);margin:28px 0 0;font-weight:500}

/* page title band */
.band{border-bottom:var(--rule)}
.band .in{max-width:var(--max);margin:0 auto;padding:clamp(32px,6vw,72px) var(--gutter) 24px}
.band h1{margin:0;line-height:.9;font-size:clamp(48px,10vw,128px)}
.band p{max-width:36em;margin:18px 0 0;font-size:19px;font-weight:500}
.band.yellow{background:var(--yellow)}
.band.pink{background:#ffd6ec}
.band.blue{background:#cfe6f5}

main .wrap{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,56px) var(--gutter)}
h2{font-weight:800;font-variation-settings:"wdth" 112;font-size:clamp(26px,3.2vw,36px);line-height:1.1;margin:0 0 16px;letter-spacing:-.01em}
h3{font-size:20px;margin:0 0 6px;font-weight:800}
p,li{max-width:40em}
.section{padding:clamp(28px,4vw,48px) 0;border-top:var(--rule)}
.section:first-child{border-top:0;padding-top:0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gutter)}
@media (max-width:760px){.two{grid-template-columns:1fr}}

/* index list (home + footer-ish) */
.index{list-style:none;margin:0;padding:0;border-top:var(--rule)}
.index li{max-width:none;border-bottom:var(--rule)}
.index a{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1.4fr);gap:18px;align-items:baseline;padding:18px 0;text-decoration:none}
.index a:hover{background:var(--yellow)}
.index .dot{width:20px;height:20px;border-radius:50%;align-self:center;mix-blend-mode:multiply}
.index strong{font-size:clamp(24px,3.4vw,40px);font-weight:900;font-variation-settings:"wdth" 125;line-height:1}
.index span.d{font-size:17px}
@media (max-width:600px){.index a{grid-template-columns:24px 1fr}.index span.d{grid-column:2}}

.next{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;border:var(--rule);padding:16px 18px;margin-top:28px;background:var(--paper);max-width:36em}
.next b{font-weight:800}

/* tables / spec lists */
.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--ink);vertical-align:top}
.spec th{width:38%;font-weight:700}
.table-scroll{overflow-x:auto}

.inks{display:flex;flex-wrap:wrap;gap:14px;list-style:none;padding:0;margin:0}
.inks li{display:flex;align-items:center;gap:8px;font-weight:600}
.inks i{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);display:block}

.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;padding:14px 0 14px 52px;position:relative;border-bottom:1px solid var(--ink)}
.steps li::before{content:counter(s);position:absolute;left:0;top:12px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:grid;place-items:center}

.btn{display:inline-block;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none;padding:12px 20px;border:var(--rule)}
.btn:hover{background:var(--pink);color:var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}

.note{border-left:6px solid var(--pink);padding:4px 0 4px 16px}

/* workshop + publications */
.rows{list-style:none;padding:0;margin:0;border-top:var(--rule)}
.rows li{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:var(--gutter);padding:22px 0;border-bottom:var(--rule);align-items:start}
.rows .meta{font-weight:600}
@media (max-width:760px){.rows li{grid-template-columns:1fr}}

.pubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:32px var(--gutter);list-style:none;padding:0;margin:0}
.pubs li{max-width:none}
.cover{aspect-ratio:3/4;border:var(--rule);position:relative;overflow:hidden;background:var(--paper);margin-bottom:12px}
.cover::before,.cover::after{content:"";position:absolute;mix-blend-mode:multiply;border-radius:50%}
.cover::before{width:80%;height:60%;left:-10%;top:12%;background:var(--c1)}
.cover::after{width:70%;height:55%;right:-12%;bottom:6%;background:var(--c2)}
.pubs .status{font-size:15px;font-weight:600}

/* calendar */
.cal-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cal-head h2{margin:0;min-width:9ch}
.cal-head button{all:unset;cursor:pointer;border:var(--rule);font-weight:800;width:40px;height:40px;display:grid;place-items:center;font-size:20px}
.cal-head button:hover{background:var(--yellow)}
.cal-head button:focus-visible{outline:3px solid var(--blue)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:0 0 18px;font-size:15px;font-weight:600}
.legend li{display:flex;align-items:center;gap:7px}
.chip{width:16px;height:16px;display:inline-block;border:2px solid var(--ink)}
.t-open{background:var(--blue)}
.t-workshop{background:var(--pink)}
.t-event{background:var(--yellow)}
.t-closed{background:repeating-linear-gradient(45deg,var(--grey) 0 3px,transparent 3px 7px)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:var(--rule);border-left:var(--rule)}
.cal .dow{font-weight:800;font-size:14px;padding:6px 8px;border-right:var(--rule);border-bottom:var(--rule);background:var(--ink);color:var(--paper)}
.cal .day{min-height:104px;padding:6px 8px;border-right:var(--rule);border-bottom:var(--rule);font-size:13px;line-height:1.3;display:flex;flex-direction:column;gap:4px}
.cal .day.out{background:repeating-linear-gradient(0deg,transparent 0 9px,#eee 9px 10px)}
.cal .day .n{font-weight:800;font-size:16px}
.cal .day.today .n{background:var(--ink);color:var(--paper);width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.cal .ev{padding:3px 5px;border:1.5px solid var(--ink);font-weight:600}
.cal .ev.t-open{color:#fff}
.cal .ev.t-closed{background:#fff;color:var(--grey);border-style:dashed}
@media (max-width:760px){
  .cal{display:none}
}
.agenda{list-style:none;padding:0;margin:28px 0 0;border-top:var(--rule)}
.agenda li{max-width:none;display:grid;grid-template-columns:110px 18px minmax(0,1fr);gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--ink)}
.agenda .when{font-weight:800}
.agenda .chip{align-self:center}
.agenda .what b{display:block}
.agenda .empty{display:block;grid-template-columns:none}

/* footer */
.site-footer{border-top:var(--rule);background:var(--ink);color:var(--paper);margin-top:0}
.site-footer .in{max-width:var(--max);margin:0 auto;padding:40px var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.site-footer h3{font-size:16px}
.site-footer p,.site-footer ul{margin:0;font-size:15px}
.site-footer ul{list-style:none;padding:0}
.site-footer a:hover{background:var(--pink);color:var(--ink)}
.site-footer .big{font-weight:900;font-variation-settings:"wdth" 125;font-size:28px;line-height:1}

/* ---------- WordPress additions ---------- */
html[data-lang="id"] .lang-en{display:none!important}
html[data-lang="en"] .lang-id{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.hero .entry p{max-width:34em;font-size:clamp(18px,2vw,22px);margin:28px 0 0;font-weight:500}
.entry{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,56px) var(--gutter)}
.entry>*{max-width:46em}
.entry>.wp-block-group{max-width:none}
.entry>.wp-block-group>*{max-width:46em}
.entry h2{border-top:var(--rule);padding-top:clamp(24px,3vw,36px);margin-top:clamp(28px,4vw,48px)}
.entry>h2:first-child,
.entry>.wp-block-group:first-child>*>h2:first-child,
.entry>.wp-block-group:first-child+.wp-block-group>*>h2:first-child{border-top:0;padding-top:0;margin-top:0}
.entry figure{margin:0 0 1.2em}
.entry table{width:100%;border-collapse:collapse}
.entry .wp-block-table td,.entry .wp-block-table th,.entry td,.entry th{border:0;text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--ink);vertical-align:top}
.entry td:first-child{font-weight:700;width:38%}
.entry .wp-block-table{overflow-x:auto}
.entry ol{counter-reset:s;list-style:none;padding:0;margin:0 0 1.2em}
.entry ol>li{counter-increment:s;padding:14px 0 14px 52px;position:relative;border-bottom:1px solid var(--ink)}
.entry ol>li::before{content:counter(s);position:absolute;left:0;top:12px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:grid;place-items:center}
.entry .wp-block-image img,.cover img{width:100%;height:100%;object-fit:cover}
.cover img{position:absolute;inset:0;z-index:1}
.pubs .spec-line{margin:0}
.gh-placeholder{border:2px dashed var(--ink);padding:28px;min-height:140px}
.entry>.pubs,.entry>.calendar-wrap{max-width:none}
.entry .cal-head h2{border:0;padding:0;margin:0}

.entry>.gh-estimator,.entry .gh-estimator{display:block;width:100%;max-width:none;border:0;min-height:480px;margin:8px 0 24px}

/* mode satu bahasa: semua blok konten tampil */
html.gh-mono[data-lang] .lang-id,html.gh-mono[data-lang] .lang-en{display:revert!important}