/* Core Styles for Christ Faith Link Blogs */
:root {
  --bg: #f9f6f1;
  --bg-alt: #fffdfa;
  --text: #2d261f;
  --accent: #8c4c24;
  --accent-alt: #c66928;
  --border: #e2d5c4;
  --shadow: rgba(0,0,0,0.06);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --gradient: linear-gradient(135deg, #fff9f0 0%, #f2e6d8 100%);
  font-family: 'Cinzel', serif;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--gradient); color: var(--text); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { line-height: 1.6; }

header { background: #ffffffcc; backdrop-filter: blur(6px); border-bottom:1px solid var(--border); position: sticky; top:0; z-index:50; }
.navbar { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:0.75rem 1.25rem; }
.nav-left { display:flex; align-items:center; gap:1rem; }
.brand { font-family:'Cinzel', serif; font-size:1.4rem; font-weight:600; letter-spacing:.5px; display:flex; align-items:center; gap:.5rem; color:var(--accent); text-decoration:none; }
.brand img { width:40px; height:40px; object-fit:contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); border-radius:var(--radius-md); }

.nav-links { list-style:none; display:flex; gap:1.1rem; margin:0; padding:0; }
.nav-links a { text-decoration:none; color:var(--text); font-weight:500; padding:.55rem .85rem; border-radius:var(--radius-sm); position:relative; transition:background .25s,color .25s; }
.nav-links a:hover, .nav-links a:focus { background:var(--bg-alt); color:var(--accent); }
.nav-links a.active { color:var(--accent-alt); font-weight:600; }

.actions { display:flex; gap:.75rem; align-items:center; }
.btn { background:var(--accent); color:#fff; border:none; padding:.6rem 1rem; border-radius:var(--radius-md); font-weight:500; font-size:.95rem; cursor:pointer; box-shadow:0 2px 4px var(--shadow); transition:background .25s, transform .25s; }
.btn:hover { background:var(--accent-alt); }
.btn:active { transform:scale(.96); }
.btn.outline { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn.outline:hover { background:var(--accent); color:#fff; }

main { max-width:1200px; margin:2.2rem auto 3rem; padding:0 1.2rem; }
.hero { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:center; margin-bottom:2.5rem; }
.hero-text h1 { font-family:'Cinzel', serif; font-size:clamp(2.15rem,4vw,3.1rem); line-height:1.1; margin:0 0 1rem; background:linear-gradient(90deg,#8c4c24,#c66928); -webkit-background-clip:text; color:transparent; }
.hero-text p { font-size:1.05rem; max-width:580px; }
.hero-visual { position:relative; }
.hero-visual img { width:100%; height:auto; max-height:none; object-fit:contain; border-radius:var(--radius-lg); box-shadow:0 12px 28px -6px rgba(0,0,0,0.18); border:4px solid #fff; background:#fff; }

.grid { display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-bottom:2.5rem; }
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.1rem 1.1rem 1.25rem; position:relative; overflow:hidden; box-shadow:0 4px 10px -2px var(--shadow); display:flex; flex-direction:column; gap:.75rem; }
.card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 10%,rgba(198,105,40,0.12),transparent 60%); pointer-events:none; }
.card h3 { margin:.2rem 0 .35rem; font-size:1.15rem; font-family:'Cinzel', serif; }
.card p { margin:0; font-size:.92rem; }
.card a.read-more { margin-top:auto; text-decoration:none; font-weight:600; color:var(--accent); font-size:.85rem; letter-spacing:.5px; display:inline-flex; align-items:center; gap:.3rem; }
.card a.read-more:hover { text-decoration:underline; }

.section-title { font-family:'Cinzel', serif; font-size:1.9rem; margin:0 0 1.2rem; display:flex; align-items:center; gap:.65rem; }
.section-title span { font-size:1.1rem; color:var(--accent); font-weight:600; }

.article { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem 1.6rem 2.4rem; box-shadow:0 8px 20px -5px var(--shadow); position:relative; overflow:hidden; }
.article:after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,244,234,0.4),transparent 55%); pointer-events:none; mix-blend-mode:overlay; }
.article header { position:static; background:none; border:none; padding:0; margin-bottom:1.4rem; }
.article h1 { font-family:'Cinzel', serif; font-size:clamp(1.95rem,3.2vw,2.75rem); margin:0 0 .8rem; line-height:1.12; }
.meta { font-size:.8rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; color:#7a6553; display:flex; gap:1rem; flex-wrap:wrap; }

.prose { font-size:1.02rem; max-width:780px; }
.prose p { margin:0 0 1.15rem; }
.prose h2, .prose h3 { font-family:'Cinzel', serif; line-height:1.2; margin:2.2rem 0 1rem; }
.prose h2 { font-size:1.55rem; }
.prose h3 { font-size:1.2rem; }
blockquote { margin:1.6rem 0; padding:1.1rem 1rem 1.1rem 1.2rem; background:var(--bg-alt); border-left:4px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic; position:relative; }
blockquote:before { content:"\201C"; position:absolute; left:8px; top:-10px; font-size:3rem; color:var(--accent); opacity:.18; }

.inline-callout { background:#fff6e9; border:1px solid #f5d9b1; padding:.75rem 1rem; border-radius:var(--radius-md); font-size:.9rem; box-shadow:0 2px 4px var(--shadow); }

.flex-list { list-style:none; padding:0; margin:1.2rem 0 1.5rem; display:grid; gap:.5rem; }
.flex-list li { background:var(--bg-alt); padding:.55rem .75rem; border-radius:var(--radius-sm); font-size:.85rem; display:flex; align-items:center; gap:.5rem; }
.flex-list li:before { content:"✶"; color:var(--accent); font-size:.8rem; }

.footer { border-top:1px solid var(--border); background:#ffffffc7; backdrop-filter:blur(4px); margin-top:3rem; padding:2.2rem 1.2rem 3rem; }
.footer .cols { max-width:1200px; margin:0 auto; display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.footer h4 { margin:0 0 .85rem; font-size:1rem; font-family:'Cinzel', serif; }
.footer a { color:var(--text); text-decoration:none; font-size:.86rem; display:block; margin:.4rem 0; }
.footer a:hover { color:var(--accent); }
.footer .brand { font-size:1.2rem; margin-bottom:.75rem; }
.footer small { display:block; margin-top:2rem; font-size:.7rem; opacity:.7; }

.theme-toggle { background:var(--bg-alt); border:1px solid var(--border); padding:.5rem .75rem; border-radius:var(--radius-md); cursor:pointer; font-size:.85rem; display:flex; gap:.4rem; align-items:center; }
.theme-toggle:hover { background:#fff; }

/* Dark Theme */
.dark { --bg:#1f1d1b; --bg-alt:#26231f; --text:#efe9e4; --border:#3a332c; --shadow:rgba(0,0,0,0.4); --gradient:linear-gradient(135deg,#322a23,#1f1d1b); }
.dark body, .dark main { background:var(--gradient); color:var(--text); }
.dark header, .dark .footer { background:#1f1d1bcc; }
.dark .card, .dark .article { background:#26231f; border-color:#3a332c; }
.dark blockquote { background:#322a23; }
.dark .btn.outline { color:var(--accent); }

/* Responsive tweaks */
@media (max-width: 850px) { .nav-links { display:none; } .hamburger { display:flex; } }
@media (max-width: 680px) { .hero { grid-template-columns:1fr; } footer .cols { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); } }

/* Mobile menu */
.hamburger { width:40px; height:40px; border-radius:var(--radius-md); border:1px solid var(--border); display:none; align-items:center; justify-content:center; background:#fff; cursor:pointer; position:relative; }
.hamburger span, .hamburger span:before, .hamburger span:after { content:""; position:absolute; width:18px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }
.hamburger span:before { transform:translateY(-6px); }
.hamburger span:after { transform:translateY(6px); }
.hamburger.active span { background:transparent; }
.hamburger.active span:before { transform:rotate(45deg); }
.hamburger.active span:after { transform:rotate(-45deg); }

.mobile-drawer { position:fixed; inset:0 0 0 60%; background:#fff; z-index:200; padding:5.5rem 1.2rem 2rem; display:flex; flex-direction:column; gap:.35rem; transform:translateX(100%); transition:transform .4s cubic-bezier(.4,.0,.2,1); border-left:1px solid var(--border); }
.mobile-drawer.open { transform:translateX(0); }
.mobile-drawer a { padding:.9rem .8rem; border-radius:var(--radius-sm); font-weight:500; text-decoration:none; color:var(--text); }
.mobile-drawer a:hover { background:var(--bg-alt); color:var(--accent); }
.backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity .35s; z-index:150; backdrop-filter:blur(2px); }
.backdrop.show { opacity:1; pointer-events:auto; }

/* Utility */
.center { text-align:center; }
.muted { color:#756454; }
.badge { display:inline-block; padding:.25rem .55rem; background:var(--accent); color:#fff; font-size:.65rem; font-weight:600; letter-spacing:.5px; border-radius:var(--radius-sm); text-transform:uppercase; }
.separator { height:1px; background:var(--border); margin:2.4rem 0; }