/*
Theme Name: Misanthropolis
Theme URI: https://example.com/misanthropolis
Author: Ed Casey + ChatGPT
Description: A readable cyberpunk blog theme with glitzy grime, translucent floating panels, and a dystopian desert-city hero.
Version: 0.1.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: misanthropolis
*/

:root {
  --misan-bg: #071014;
  --misan-panel: rgba(9, 20, 28, 0.84);
  --misan-panel-strong: rgba(7, 14, 20, 0.92);
  --misan-text: #e8f6f8;
  --misan-muted: #a8bdc5;
  --misan-cyan: #66e6ff;
  --misan-amber: #f4a64f;
  --misan-pink: #ff4fd8;
  --misan-border: rgba(102, 230, 255, 0.32);
  --misan-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), 0 0 28px rgba(102, 230, 255, 0.08);
}

html { scroll-behavior: smooth; }
body {
  color: var(--misan-text);
  background:
    radial-gradient(circle at 18% 12%, rgba(102,230,255,.13), transparent 24rem),
    radial-gradient(circle at 82% 20%, rgba(255,79,216,.10), transparent 22rem),
    linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px),
    linear-gradient(45deg, rgba(102,230,255,.035) 0 1px, transparent 1px 26px),
    var(--misan-bg);
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(102,230,255,.04) 12% 12.4%, transparent 12.4% 44%, rgba(244,166,79,.035) 44% 44.25%, transparent 44.25%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  opacity: .52;
}

.wp-site-blocks { padding: clamp(16px, 3vw, 36px); }

a { color: var(--misan-cyan); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: #ffffff; text-shadow: 0 0 10px rgba(102,230,255,.55); }

.site-shell,
.floating-panel,
.wp-block-post,
.wp-block-query-pagination,
.wp-block-comments,
.comment-respond,
.wp-block-search,
.wp-block-group.is-style-floating-panel {
  background: var(--misan-panel);
  border: 1px solid var(--misan-border);
  border-radius: 18px;
  box-shadow: var(--misan-shadow);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.site-shell { max-width: 1180px; margin-inline: auto; overflow: hidden; }
.site-header, .site-footer { padding: 20px clamp(18px, 3vw, 34px); }
.site-header { border-bottom: 1px solid rgba(102,230,255,.22); }
.site-footer { border-top: 1px solid rgba(102,230,255,.18); color: var(--misan-muted); }

.misanthropolis-hero {
  min-height: clamp(260px, 42vw, 520px);
  margin: 0;
  padding: clamp(22px, 5vw, 64px);
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(180deg, rgba(3,8,12,.18), rgba(3,8,12,.68) 75%, rgba(3,8,12,.92)), url('./assets/misanthropolis-banner.png');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(102,230,255,.20);
}

.hero-copy {
  max-width: 760px;
  padding: clamp(18px, 3vw, 32px);
  background: rgba(4, 12, 18, .72);
  border: 1px solid rgba(102, 230, 255, .35);
  border-radius: 16px;
  box-shadow: 0 0 28px rgba(102,230,255,.12);
}

.wp-block-site-title a,
.wp-block-post-title a { text-decoration: none; }
.wp-block-site-title { letter-spacing: .06em; text-transform: uppercase; }
.wp-block-post-title { line-height: 1.12; }

.content-grid { padding: clamp(18px, 3vw, 34px); }
.wp-block-query ul { gap: 24px; }
.wp-block-post { padding: clamp(20px, 3vw, 34px); position: relative; }
.wp-block-post::before,
.floating-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(102,230,255,.11), transparent 32%, rgba(244,166,79,.06));
}
.wp-block-post > * { position: relative; }
.wp-block-post-excerpt, .wp-block-post-content, p { color: var(--misan-text); }
.wp-block-post-date, .wp-block-post-terms, .taxonomy-category, .wp-block-comment-date { color: var(--misan-muted); font-size: .92rem; }

.wp-block-button__link, .wp-block-read-more {
  border: 1px solid rgba(102,230,255,.45);
  border-radius: 999px;
  background: rgba(102,230,255,.10);
  color: var(--misan-text);
  padding: .62em 1em;
  text-decoration: none;
}
.wp-block-button__link:hover, .wp-block-read-more:hover { background: rgba(102,230,255,.18); }

input, textarea, select, .wp-block-search__input {
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(102,230,255,.28);
  color: var(--misan-text);
  border-radius: 10px;
  padding: .7em .85em;
}
.wp-block-search__button { border-radius: 10px; border: 1px solid rgba(102,230,255,.45); background: rgba(102,230,255,.16); color: var(--misan-text); }

hr { border-color: rgba(102,230,255,.18); }
img { border-radius: 12px; }

@media (max-width: 720px) {
  .wp-site-blocks { padding: 10px; }
  .site-header .wp-block-group { gap: 12px; }
  .misanthropolis-hero { min-height: 320px; }
}