/*
Theme Name: Devout Craziness
Theme URI: https://devoutcraziness.us
Author: Trevor Markiw
Description: A minimalist Christian tech theme blending art, writing, and technology.
Version: 1.0
License: GPL-2.0+
Text Domain: devout-craziness
*/

:root {
  --bg: #f7f7f7;
  --text: #111;
  --content-bg: #fff;
  --accent: #222428;
  --muted: #777;
  --max-width: 1200px;
}

/* Basic reset */
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); background:var(--bg); line-height:1.5; transition: background 0.4s, color 0.4s; }
a { color: var(--accent); text-decoration:none; }

/* Header / banner */
.site-header { position:relative; background: url('header.jpg') no-repeat center center/cover; color:#000; padding: 36px 20px 20px; border-radius:6px; overflow:hidden; margin:18px; }
.site-title { font-family: Oswald, sans-serif; font-size:clamp(28px, 4.5vw, 48px); margin:0; text-transform:uppercase; color:#000; }
.site-sub { margin-top:6px; color:#000; font-size:16px; }

/* Banner overlay scripture */
.banner-overlay { position:absolute; left:0; right:0; bottom:18px; text-align:center; z-index:2; }
.banner-overlay h2 { margin:0; font-family:Oswald, sans-serif; font-size:18px; color:#000; background: rgba(255,255,255,0.6); display:inline-block; padding:8px 14px; border-radius:6px; }

/* Layout grid: left sidebar, main, right sidebar */
.layout-grid { display:grid; grid-template-columns: 260px 1fr 260px; gap:20px; max-width:var(--max-width); margin: 20px auto; padding: 0 18px; }
.sidebar { background: var(--content-bg); padding:14px; border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,0.05); }
.main-content { background: var(--content-bg); padding:20px; border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,0.06); }

/* Featured area within main */
.featured { display:grid; grid-template-columns: 1fr 320px; gap:16px; margin-bottom:18px; }
.featured .lead { padding:14px; border-radius:8px; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,245,245,0.9)); }
.featured .aside { background: #fafafa; padding:10px; border-radius:8px; }

/* Posts */
.post { margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid #eee; }
.post h2 { font-family: Oswald, sans-serif; margin:0 0 8px; font-size:20px; }

/* Dark mode */
body.dark { --bg: #0f1112; --text: #e9eef2; --content-bg: #121416; --accent: #e9eef2; --muted: #9aa3ab; }
body.dark .banner-overlay h2 { background: rgba(0,0,0,0.5); color: #fff; }

/* Dark toggle button */
.dark-toggle { position: fixed; right:16px; bottom:16px; width:52px; height:52px; border-radius:50%; background:var(--accent); color:#fff; border:none; font-size:20px; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,0.15); }

/* Responsive */
@media (max-width: 980px) {
  .layout-grid { grid-template-columns: 1fr; padding: 0 12px; }
  .featured { grid-template-columns: 1fr; }
  .site-header { margin:12px; padding:20px; }
}