/* ==========================================================================
   TDSH Giallo 1.1.0-dev11: Evidence Locker PLUS.
   Additive dressing for the off-canvas Locker. Loaded after giallo-locker.css
   (which is untouched), scoped to body.tdsh-giallo .tg-drawer, and switched off
   with add_filter( 'tdsh_giallo_locker_plus', '__return_false' ).
   Hard edges only: solid rules, taped label strips, file-tab edges, a CLASSIFIED
   stamp, Courier evidence labels and red ink on drawer tags. Motion sits behind
   prefers-reduced-motion:no-preference and uses transform and opacity only.
   Decorative text is generated with an empty alt so screen readers skip it.
   ========================================================================== */

/* ---------- the box: yellow spine, black section rules ---------- */
body.tdsh-giallo .tg-drawer .tg-drawer__panel{box-sizing:border-box;border-left:7px solid var(--tg-y)}
body.tdsh-giallo .tg-drawer .tg-drawer__art{border-bottom:5px solid var(--tg-k)}
body.tdsh-giallo .tg-drawer .tg-drawer__search{border-bottom:5px solid var(--tg-k)}

/* ---------- CLASSIFIED stamp (art corner) ---------- */
body.tdsh-giallo .tg-drawer .tg-drawer__art::after{
  content:"Classified";content:"Classified" / "";
  position:absolute;right:18px;bottom:24px;z-index:4;pointer-events:none;
  font-family:var(--tg-display);font-weight:400;font-size:26px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tg-r2);background:var(--tg-cr);border:3px solid var(--tg-r2);outline:2px solid var(--tg-r2);outline-offset:3px;
  padding:6px 10px 4px 13px;transform:rotate(-9deg);transform-origin:50% 50%
}

/* ---------- case number under the heading ---------- */
body.tdsh-giallo .tg-drawer .tg-drawer__head::after{
  content:"Case no. DSH-0666";content:"Case no. DSH-0666" / "";
  display:inline-block;margin-top:12px;padding:5px 8px 4px;
  font-family:var(--tg-mono);font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tg-y);background:var(--tg-k)
}

/* ---------- SEARCH THE FILES: taped label strip + square cream field ---------- */
body.tdsh-giallo .tg-drawer .tg-drawer__search>label{
  position:relative;display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;
  font-family:var(--tg-display);font-weight:400;font-size:30px;line-height:1;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tg-y);background:var(--tg-k);padding:9px 14px 7px;transform:rotate(-1.2deg)
}
body.tdsh-giallo .tg-drawer .tg-drawer__search>label::before{
  content:"";position:absolute;left:-12px;top:-9px;width:46px;height:17px;pointer-events:none;
  background:rgba(242,237,216,.78);border-left:2px dashed rgba(10,10,10,.25);border-right:2px dashed rgba(10,10,10,.25);transform:rotate(-14deg)
}
body.tdsh-giallo .tg-drawer .tg-drawer__search>label .tg-kbd{color:var(--tg-cr);font-size:13px}
body.tdsh-giallo .tg-drawer .tg-drawer__field input{font-size:24px;font-weight:700;border-width:4px;padding:15px 16px 14px}
body.tdsh-giallo .tg-drawer .tg-drawer__field button{border-width:4px;font-size:26px}
/* focus: the field fills yellow like the nav's current section; a dashed cut line marks the caret box */
body.tdsh-giallo .tg-drawer .tg-drawer__field input:focus{background:var(--tg-y);outline:2px dashed var(--tg-k);outline-offset:-9px}
body.tdsh-giallo .tg-drawer .tg-drawer__field input:focus::placeholder{color:#4a3f00}

/* ---------- Courier section labels with a hard rule ---------- */
body.tdsh-giallo .tg-drawer .tg-drawer__qh{display:flex;align-items:center;gap:12px;margin:24px 0 12px;font-size:14px;letter-spacing:.2em;color:var(--tg-k)}
body.tdsh-giallo .tg-drawer .tg-drawer__qh::after{content:"";flex:1 1 auto;height:3px;background:var(--tg-k)}

/* ---------- drawer tags: heavier edge + red ink on hover ---------- */
body.tdsh-giallo .tg-drawer .tg-drawer__quick a{position:relative;border-width:3px;border-left-width:7px}
body.tdsh-giallo .tg-drawer .tg-drawer__quick a::after{
  content:"";position:absolute;right:-7px;top:-9px;width:26px;height:26px;pointer-events:none;
  background:url(../img/ink-splat-2.svg) 50% 50%/contain no-repeat;opacity:0;transform:scale(.35) rotate(-24deg)
}
body.tdsh-giallo .tg-drawer .tg-drawer__quick li:nth-child(3n+1) a::after{background-image:url(../img/ink-splat-1.svg)}
body.tdsh-giallo .tg-drawer .tg-drawer__quick li:nth-child(3n) a::after{background-image:url(../img/ink-splat-3.svg)}
body.tdsh-giallo .tg-drawer .tg-drawer__quick a:hover::after,
body.tdsh-giallo .tg-drawer .tg-drawer__quick a:focus-visible::after{opacity:1;transform:none}
body.tdsh-giallo .tg-drawer .tg-drawer__quick a:focus-visible{outline:3px solid var(--tg-y);outline-offset:2px}

/* ---------- ledger nights as evidence tags ---------- */
body.tdsh-giallo .tg-drawer .tg-drawer__ledgers{border-bottom:5px solid var(--tg-k)}
body.tdsh-giallo .tg-drawer .tg-drawer__ledgers ol{counter-reset:tgp-ev}
body.tdsh-giallo .tg-drawer .tg-drawer__ledgers li>a{position:relative;border-top:4px solid var(--tg-k);counter-increment:tgp-ev}
body.tdsh-giallo .tg-drawer .tg-drawer__ledgers li>a::before{
  content:"Evidence #" counter(tgp-ev,decimal-leading-zero);content:"Evidence #" counter(tgp-ev,decimal-leading-zero) / "";
  display:block;margin:0 0 5px;font-family:var(--tg-mono);font-weight:700;font-size:11px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--tg-r2)
}
/* the tag's eyelet */
body.tdsh-giallo .tg-drawer .tg-drawer__ledgers li>a::after{content:"";position:absolute;top:9px;right:9px;width:8px;height:8px;border:2px solid var(--tg-k);background:var(--tg-k2);pointer-events:none}

/* ---------- THE FILES / FOLLOW: yellow file tabs hanging from a yellow rule ---------- */
body.tdsh-giallo .tg-drawer .tg-drawer__nav,
body.tdsh-giallo .tg-drawer .tg-drawer__social{border-top:4px solid var(--tg-y)}
body.tdsh-giallo .tg-drawer .tg-drawer__nav>h3,
body.tdsh-giallo .tg-drawer .tg-drawer__social>h3{display:inline-block;margin:-22px 0 12px;padding:7px 12px 6px;font-size:14px;letter-spacing:.2em;color:var(--tg-k);background:var(--tg-y)}
body.tdsh-giallo .tg-drawer .tg-drawer__social>h3{margin-top:-18px}
body.tdsh-giallo .tg-drawer .tg-drawer__menu>li{border-bottom-style:solid;border-bottom-color:rgba(242,237,216,.16)}
body.tdsh-giallo .tg-drawer .tg-drawer__foot{border-top:4px solid var(--tg-y)}

/* ---------- phones ---------- */
@media (max-width:600px){
  body.tdsh-giallo .tg-drawer .tg-drawer__panel{border-left-width:5px}
  body.tdsh-giallo .tg-drawer .tg-drawer__art::after{font-size:18px;right:12px;bottom:20px;padding:5px 7px 3px 9px;border-width:2px;outline-width:1.5px;outline-offset:2px}
  body.tdsh-giallo .tg-drawer .tg-drawer__head::after{font-size:11px;letter-spacing:.1em;margin-top:10px}
  body.tdsh-giallo .tg-drawer .tg-drawer__search>label{font-size:25px;gap:10px;padding:8px 12px 6px}
  body.tdsh-giallo .tg-drawer .tg-drawer__field input{font-size:20px;padding:13px 12px 12px}
  body.tdsh-giallo .tg-drawer .tg-drawer__field button{font-size:22px}
}
@media (max-width:340px){
  body.tdsh-giallo .tg-drawer .tg-drawer__search>label{font-size:22px}
  body.tdsh-giallo .tg-drawer .tg-drawer__art::after{font-size:15px}
  body.tdsh-giallo .tg-drawer .tg-drawer__field input{font-size:18px;padding:12px 10px 11px}
  body.tdsh-giallo .tg-drawer .tg-drawer__field button{font-size:19px;padding:0 10px}
  body.tdsh-giallo .tg-drawer .tg-drawer__quick a{border-left-width:5px;padding-left:8px;padding-right:8px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* the stamp slams once each time the Locker opens, after the panel has landed */
  body.tdsh-giallo .tg-drawer.is-open .tg-drawer__art::after,
  body.tdsh-giallo .tg-drawer:target .tg-drawer__art::after{animation:tgp-stamp .3s cubic-bezier(.3,.6,.35,1) .44s both}
  body.tdsh-giallo .tg-drawer .tg-drawer__quick a::after{transition:opacity .12s steps(2,end),transform .2s cubic-bezier(.2,.9,.3,1.4)}
}
@keyframes tgp-stamp{
  0%{opacity:0;transform:rotate(-9deg) scale(2.6)}
  55%{opacity:1;transform:rotate(-9deg) scale(.9)}
  100%{opacity:1;transform:rotate(-9deg) scale(1)}
}