/*
Theme Name: Trashwyre Block
Theme URI: https://trashwyre.net
Author: OpenAI
Description: A block-editable WordPress theme for Trashwyre, built for visual editing in the WordPress Site Editor. Includes editable About, EPK, Bandcamp, and Contact page layouts.
Version: 2.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trashwyre-block
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, one-column, entertainment
*/

@font-face {
  font-family: 'Glitch Goblin';
  src: url('assets/fonts/GlitchGoblin-2O87v.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --tw-black: #040404;
  --tw-white: #f5f5f0;
  --tw-acid: #d7ff00;
  --tw-purple: #b000ff;
  --tw-static: rgba(255, 255, 255, 0.08);
}

html { scroll-behavior: smooth; }
body {
  background: var(--tw-black);
  color: var(--tw-white);
  font-family: 'Glitch Goblin', 'Arial Black', Impact, system-ui, sans-serif;
  letter-spacing: 0.035em;
  overflow-x: hidden;
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.72)), url('assets/images/trashwyre-glitch-background.png');
  background-size: cover;
  background-position: center;
  filter: contrast(1.15) saturate(1.15);
}
body:after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
  opacity: .36;
}

a { color: var(--tw-acid); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--tw-purple); }

.wp-site-blocks { min-height: 100vh; }
.tw-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(18px, 4vw, 56px); }
.tw-panel {
  border: 2px solid rgba(245,245,240,.86);
  background: rgba(4,4,4,.82);
  box-shadow: 10px 10px 0 rgba(215,255,0,.95), -6px -6px 0 rgba(176,0,255,.75);
  padding: clamp(20px, 4vw, 42px);
}
.tw-panel-soft {
  background: rgba(4,4,4,.72);
  border: 1px dashed rgba(245,245,240,.55);
  padding: clamp(18px, 3vw, 32px);
}
.tw-kicker { color: var(--tw-acid); text-transform: uppercase; letter-spacing: .18em; }
.tw-title {
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: .02em;
  text-shadow: 4px 0 0 var(--tw-purple), -3px 2px 0 var(--tw-acid);
}
.tw-button .wp-block-button__link,
.wp-block-button.tw-button .wp-block-button__link {
  border: 2px solid var(--tw-white);
  background: var(--tw-acid);
  color: var(--tw-black);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--tw-purple);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.tw-button .wp-block-button__link:hover,
.wp-block-button.tw-button .wp-block-button__link:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--tw-purple);
}
.tw-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(16px, 2vw, 28px); }
.tw-span-7 { grid-column: span 7; }
.tw-span-5 { grid-column: span 5; }
.tw-span-4 { grid-column: span 4; }
.tw-span-6 { grid-column: span 6; }
.tw-span-12 { grid-column: span 12; }
.tw-tracklist { list-style: decimal-leading-zero; padding-left: 2.1rem; }
.tw-tracklist li { margin: .55rem 0; border-bottom: 1px dotted rgba(245,245,240,.4); padding-bottom: .35rem; }
.tw-nav { border-bottom: 1px solid rgba(245,245,240,.22); background: rgba(4,4,4,.85); backdrop-filter: blur(4px); }
.tw-footer { border-top: 1px solid rgba(245,245,240,.22); background: rgba(4,4,4,.8); }
.tw-sticker { transform: rotate(-2deg); border: 2px solid var(--tw-white); background: var(--tw-white); color: var(--tw-black); padding: 1rem; box-shadow: 8px 8px 0 var(--tw-purple); }
.tw-form input, .tw-form textarea { width: 100%; background: #0b0b0b; color: var(--tw-white); border: 1px solid var(--tw-white); padding: 12px; font: inherit; }
.tw-form label { display: block; margin: 0 0 14px; }
.tw-form button { background: var(--tw-acid); color: var(--tw-black); border: 2px solid var(--tw-white); padding: 12px 18px; font: inherit; text-transform: uppercase; }

@media (max-width: 760px) {
  .tw-grid { display: block; }
  .tw-span-7, .tw-span-5, .tw-span-4, .tw-span-6, .tw-span-12 { margin-bottom: 18px; }
  .tw-title { font-size: clamp(48px, 16vw, 86px) !important; }
}