/* ModPool Theme – FULL DROP-IN stylesheet */

/* ===== Root & Theme ===== */
:root {
  --primary: #3b82f6;     /* blue accent */
  --primary-700: #2563eb;
  --bg: #0b0f1a;          /* dark bg */
  --bg-soft: #0f172a;     /* cards */
  --border: rgba(255,255,255,0.08);
  --text: #e5e7eb;        /* light text */
  --text-dim: #cbd5e1;
  --shadow: 0 6px 20px rgba(0,0,0,.25);
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --border: rgba(17,24,39,0.08);
  --text: #111827;
  --text-dim: #374151;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Layout ===== */
.mp-container { max-width: 1180px; margin: 0 auto; padding: 1.5rem; }
.mp-main { min-height: 60vh; }

/* ===== Header / Nav ===== */
.mp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.mp-header .mp-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.mp-logo img { height: 40px; width: auto; display: block; }

.mp-nav { display: flex; gap: 1rem; }
.mp-nav a {
  color: var(--text);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: .5rem;
  opacity: .85;
}
.mp-nav a:hover { opacity: 1; background: var(--border); }

.mp-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  padding: .4rem .6rem;
  border-radius: .5rem;
  cursor: pointer;
}

/* ===== Hero ===== */
.hero {
  text-align: center;
  padding: 6rem 1rem 3rem;
  background: linear-gradient(180deg, #0b0f1a 0%, #10275f 60%, #0b0f1a 100%);
  border-bottom: 1px solid var(--border);
}
.container.center { max-width: 960px; margin: 0 auto; }
.hero-logo { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 1rem; display: block; }
.hero h1 {
  font-size: clamp(1.8rem, 3vw, 3rem);
  margin: .5rem 0;
}
.hero p { color: var(--text-dim); margin: 0 0 1.25rem; }

/* ===== Buttons ===== */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: .78rem 1.25rem;
  border-radius: .6rem;
  text-decoration: none;
  line-height: 1;
  pointer-events: auto;  /* ensure clickable */
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary {
  background-color: var(--primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-primary:hover { filter: brightness(.96); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); filter: brightness(.9); }

.btn-secondary {
  margin-left: .75rem;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
}
.btn-secondary:hover {
  background: rgba(59,130,246,.08);
  border-color: var(--primary-700);
  color: var(--primary-700);
}
.btn-secondary:active { transform: translateY(0); }

/* ===== Features ===== */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  padding: 2rem 1rem 3rem;
}
.feature {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: .9rem;
}
.feature h3 { margin: .25rem 0 .5rem; }

/* ===== Cards / Grid ===== */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.mp-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: .9rem;
  overflow: hidden;
  transition: transform .1s ease, border-color .15s ease;
}
.mp-card:hover { transform: translateY(-2px); border-color: rgba(59,130,246,.35); }
.mp-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.mp-card h3 { margin: .75rem; font-size: 1rem; }
.mp-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 .75rem 1rem; font-size: .9rem; color: var(--text-dim);
}

/* ===== Panels / Two-column ===== */
.mp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .mp-grid-2 { grid-template-columns: 1fr; } }
.mp-panel {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 1rem;
}

/* ===== Single / Content ===== */
.mp-single h1, .mp-page h1 { margin-top: 0; }
.mp-content img { max-width: 100%; height: auto; border-radius: .5rem; }
.mp-gallery { margin: .75rem 0 1rem; }
.mp-related ul { margin: .5rem 0 0; padding: 0; list-style: none; }
.mp-related li { margin: .25rem 0; }

/* ===== Pagination ===== */
.mp-pagination, .navigation, .nav-links {
  display: flex; gap: .5rem; align-items: center; justify-content: center; margin: 1.25rem 0;
}
.page-numbers, .nav-links a, .nav-links span {
  padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .5rem;
  color: var(--text); text-decoration: none; background: var(--bg-soft);
}
.page-numbers.current, .nav-links span.current {
  border-color: var(--primary); color: #fff; background: var(--primary);
}

/* ===== Footer ===== */
.mp-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-dim);
}
.mp-footer nav a { color: var(--text-dim); margin: 0 .35rem; }
.mp-footer nav a:hover { color: var(--text); }

/* ===== Forms ===== */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], select, textarea {
  width: 100%; max-width: 100%;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: .5rem;
  padding: .6rem .75rem;
}
button, input[type="submit"] {
  background: var(--primary); color: #fff; border: none;
  padding: .6rem 1rem; border-radius: .5rem; cursor: pointer;
}
button:hover, input[type="submit"]:hover { filter: brightness(.96); }

/* ===== Utilities ===== */
.hidden { display: none !important; }
.center { text-align: center; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }

/* ===== Fixes ===== */
/* Ensure hero buttons are always clickable (no overlay blocks) */
.hero .cta-buttons { position: relative; z-index: 2; }
.btn-primary, .btn-secondary { pointer-events: auto; }

/* Make images responsive in posts/comments */
img { max-width: 100%; height: auto; }

/* ===== WP Specific Tweaks ===== */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin-right: 1rem; }
.alignright { float: right; margin-left: 1rem; }
.wp-caption { max-width: 100%; }

/* ===== Small screens ===== */
@media (max-width: 640px) {
  .btn-secondary { margin-left: .5rem; }
  .hero { padding-top: 4rem; }
  .mp-nav { display: none; } /* simple: hide menu on tiny screens unless you add a burger */
}