:root{
  --bg: #f6fbff;
  --soft-blue: #cfeafd;
  --white: #ffffff;
  --gold: #d4af37;
  --muted:#6b7280;
  --accent:#a2d2ff;
  --max-width:1100px;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#0b2438;line-height:1.6;font-family:var(--font-family, 'Segoe UI', Roboto, Arial, sans-serif)}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{background:linear-gradient(90deg,var(--white),var(--soft-blue));border-bottom:1px solid rgba(11,87,164,0.06);box-shadow:0 1px 0 rgba(11,87,164,0.02);position:relative}
.nav-row{display:flex;align-items:center;gap:1rem}
.logo{font-weight:800;color:#0b57a4;font-size:1.25rem;letter-spacing:0.2px}
.nav{margin-left:auto;display:flex;gap:0.5rem;align-items:center}
.nav a{color:#0b57a4;text-decoration:none;padding:.5rem .6rem;border-radius:6px;transition:background .18s, color .18s}
.nav a:hover{background:rgba(10,80,150,0.06)}
.nav-toggle{display:none}

/* icon styles */
.nav .icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:8px;vertical-align:middle}
.nav a .icon svg{width:100%;height:100%;fill:currentColor;opacity:0.95}
.admin .icon{width:16px;height:16px;margin-right:6px;vertical-align:middle}
.btn-icon{display:inline-flex;align-items:center;gap:.4rem}
.hero{padding:3rem 0;background:linear-gradient(135deg,var(--accent),var(--soft-blue));color:#05345a}
.hero h1{margin:0;font-size:2rem}
.hero .tagline{margin:.5rem 0 1rem;color:#024}
.cta{background:var(--gold);color:#fff;padding:.6rem 1rem;border-radius:8px;text-decoration:none;box-shadow:0 4px 10px rgba(212,175,55,0.12)}
.intro{padding:2rem 0}
.site-footer{padding:1rem 0;background:transparent;border-top:1px solid rgba(0,0,0,0.04);color:var(--muted)}

.posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.post-card{background:var(--white);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(9,30,66,0.06);transition:transform .18s,box-shadow .18s;overflow:hidden}
.post-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(9,30,66,0.08)}
.post-image{width:100%;height:160px;overflow:hidden;border-radius:10px;margin-bottom:.75rem}
.post-image img{width:100%;height:100%;object-fit:cover;display:block}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.card{background:var(--white);border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(9,30,66,0.05);transition:transform .15s}
.card:hover{transform:translateY(-4px)}
.card img{width:100%;height:180px;object-fit:cover}
.card-body{padding:.75rem}

.verse pre{white-space:pre-wrap;background:var(--white);padding:1rem;border-radius:8px}

.admin{padding:2rem}
.admin .admin-item{display:flex;align-items:center;gap:.75rem;padding:.6rem;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.9),#fff);box-shadow:0 2px 6px rgba(9,30,66,0.03);margin-bottom:.5rem}
.admin .admin-item img{width:64px;height:48px;object-fit:cover;border-radius:6px}
.admin .admin-item button{margin-left:auto;background:#0b57a4;padding:.4rem .6rem;border-radius:6px}

form label{display:block;margin:.5rem 0}
input,textarea,button{font:inherit}
input,textarea{width:100%;padding:.6rem;border:1px solid #e6eef7;border-radius:8px;background:#fff}
input:focus,textarea:focus{outline:none;border-color:#a2d2ff;box-shadow:0 4px 12px rgba(162,210,255,0.14)}
button{background:var(--gold);border:none;color:#fff;padding:.6rem 1rem;border-radius:8px;cursor:pointer;transition:transform .12s,box-shadow .12s}
button:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(212,175,55,0.14)}

.muted{color:var(--muted);font-size:.95rem}
.small{font-size:.9rem;color:var(--muted)}

@media (max-width:900px){
  .nav{display:none}
  .nav-toggle{display:block;margin-left:auto;background:transparent;border:none;font-size:1.25rem}
  .posts-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .post-image{height:140px}

  /* Mobile dropdown nav behaviour: when JS toggles nav to `display:flex`, make it a vertical dropdown */
  .nav{
    flex-direction:column;
    position:absolute;
    top:calc(100% + 8px);
    right:1rem;
    background:var(--white);
    padding:0.5rem;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(9,30,66,0.12);
    z-index:50;
    min-width:160px;
    align-items:flex-end;
  }
  .nav a{display:block;width:100%;padding:.6rem .8rem;border-radius:6px;text-align:right}
}

@media (max-width:480px){
  .container{padding:.75rem}
  .card img, .post-image{height:120px}
}