/* assets/css/style.css
   Attractive visual theme — dark, modern, slightly mystical.
   Drop into assets/css/style.css
*/

/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --bg-0: #071026;   /* very dark blue */
  --bg-1: #0b1220;   /* deep navy surface */
  --card: #081125;   /* card base */
  --muted: #9aa6b2;  /* muted text */
  --text: #e6eef6;   /* main text */
  --accent1: #7c3aed;/* violet */
  --accent2: #06b6d4;/* teal */
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
  --radius: 14px;
  --max-width: 1180px;
  --transition: 220ms cubic-bezier(.22,.9,.3,1);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial;
  background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:20px}

/* Header */
.site-header{
  border-bottom:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(6,182,212,0.03));
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.brand a{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:700;font-size:1.25rem}
.brand .logo{
  width:46px;height:46px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,var(--accent1),var(--accent2));font-weight:800;color:white;
  box-shadow: 0 8px 30px rgba(7,10,20,0.55);
}
.top-menu{display:flex;gap:10px;align-items:center}
.top-menu a{
  padding:8px 12px;border-radius:10px;color:var(--text);opacity:0.95;transition:var(--transition);
}
.top-menu a:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(4,6,18,0.45)}
.menu-toggle{display:none;background:transparent;border:1px solid var(--glass);padding:8px 10px;border-radius:10px;color:var(--text)}

/* Layout */
.site-wrap{display:grid;grid-template-columns:280px 1fr;gap:24px;margin-top:22px;padding-bottom:40px}
.left-nav{position:sticky;top:24px}
.left-nav .widget{
  background: linear-gradient(180deg,var(--glass),var(--glass-2));
  padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);
  box-shadow:0 12px 40px rgba(2,6,23,0.5);
  margin-bottom:14px;
}
.widget h3{margin:0 0 10px 0;color:var(--muted);font-weight:600}
.widget ul{list-style:none;padding:0;margin:0}
.widget li{margin-bottom:8px}
.widget a{color:var(--text);text-decoration:none;opacity:0.95}

/* Hero slider */
.hero-slider{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 18px 60px rgba(4,6,18,0.6)}
.slides{display:flex;transition:transform .6s cubic-bezier(.22,.9,.3,1)}
.slide{min-width:100%;position:relative;height:420px;overflow:hidden}
.slide img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.56);transform:scale(1.02);transition:transform 8s linear}
.slide:hover img{transform:scale(1.06)}
.slide-caption{
  position:absolute;left:36px;bottom:36px;color:white;max-width:60%;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.45));
  padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);
}
.slide-caption h2{margin:0;font-size:1.9rem;line-height:1.1}
.slide-caption p{margin:8px 0 0;color:var(--muted);font-size:0.95rem}

/* slider controls */
.slider-controls{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;gap:10px}
.slider-controls button{
  background:var(--glass);border:none;padding:10px 12px;border-radius:10px;color:var(--text);cursor:pointer;
  box-shadow:0 8px 20px rgba(8,12,24,0.45);
}

/* Posts grid */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.post-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);
  transition: transform .22s ease, box-shadow .22s ease;
}
.post-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(4,6,18,0.5)}
.post-card img{width:100%;height:180px;object-fit:cover;border-radius:10px;margin-bottom:10px}
.post-card .meta{font-size:0.85rem;color:var(--muted);margin-bottom:6px}
.post-card h3{margin:6px 0 8px 0}
.post-card p{color:var(--muted);line-height:1.45;font-size:0.95rem}

/* Main content styles */
.main-content h1{font-size:2rem;margin:6px 0}
.meta{color:var(--muted);font-size:0.95rem;margin-bottom:12px}
.post-full{margin-top:6px}
.post-feature{width:100%;height:480px;object-fit:cover;border-radius:14px;margin-bottom:18px}
.post-content{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);line-height:1.85;color:var(--text);
}
.post-content p{color:var(--muted);margin:10px 0}
.post-content h2,h3{color:var(--text)}
.post-content blockquote{
  border-left:4px solid rgba(124,58,237,0.25);
  padding:12px 16px;margin:14px 0;border-radius:8px;background:rgba(255,255,255,0.02);
}

/* share buttons */
.share{margin-top:16px}
.share a{
  display:inline-block;padding:8px 10px;margin-right:8px;border-radius:8px;background:rgba(255,255,255,0.03);
  text-decoration:none;color:var(--text);font-weight:600;transition:var(--transition);
}
.share a:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(4,6,18,0.45)}

/* Footer */
.site-footer{
  margin-top:28px;padding:22px 0;background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.18));
  border-top:1px solid rgba(255,255,255,0.02);
}
.site-footer .container{display:flex;justify-content:space-between;align-items:center}
.site-footer a{color:var(--muted);text-decoration:none}

/* Small utility */
.btn{
  display:inline-block;background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:white;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:600;transition:var(--transition);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(7,10,30,0.5)}

/* Responsive */
@media (max-width:1000px){
  .posts-grid{grid-template-columns:repeat(2,1fr)}
  .site-wrap{grid-template-columns:220px 1fr}
  .slide-caption{max-width:70%}
}
@media (max-width:800px){
  .site-wrap{grid-template-columns:1fr}
  .left-nav{display:none}
  .slide{height:260px}
  .hero-slider .slide-caption{left:16px;right:16px;bottom:16px;max-width:unset}
  .top-menu{display:none}
  .menu-toggle{display:inline-flex}
  .posts-grid{grid-template-columns:1fr}
  .post-feature{height:320px}
}

/* small animations on load for cards */
@keyframes fadeUp {
  from {opacity:0; transform: translateY(10px);}
  to {opacity:1; transform: translateY(0);}
}
.post-card, .widget{animation: fadeUp .6s ease both}

/* Accessibility tweaks */
:focus{outline:2px solid rgba(124,58,237,0.35);outline-offset:2px}












/* === CONTACT FORM LAYOUT FIX === */
.contact-panel {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}

.contact-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(2,6,23,0.4);
  padding: 30px;
  width: 100%;
  max-width: 720px;
}

.contact-head {
  text-align: center;
  margin-bottom: 24px;
}
.contact-head h2 { margin-bottom: 6px; font-size: 1.8rem; }
.contact-head .muted { font-size: 0.95rem; }

.contact-form {
  display: block;
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
}
.form-group.full-width {
  grid-column: 1 / -1;
}

.contact-form label {
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-size: 1rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent2);
  transform: translateY(-2px);
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}

.form-actions .btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color: white;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.form-actions .btn:hover {
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
}