/* blog_styles.css
   UPDATED: floating controls on desktop, sticky controls on mobile,
   admin moved to top-left on small screens, spacing reserved so controls
   do not cover content. Also image/banner improvements added.
*/

/* --- variables --- */
:root{
  --controls-height: 72px;     /* adjust if you change control sizing */
  --controls-gap: 16px;
  --controls-max-width: 1000px;
  --controls-bg: rgba(255,255,255,0.95);
}

/* copy the style block from your file exactly */
* { margin:0; padding:0; box-sizing:border-box; }

/* Header / Body base (keeps previous look) */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-height:100vh;
}

/* Controls (primary selector uses #mainContent .controls for specificity) */
#mainContent .controls {
  max-width: 1000px;
  margin: 1.5rem auto;
  padding: 0 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  background: transparent;
}

/* Search box grows but has sensible limits so it stays centered */
#mainContent .controls .search-box {
  flex: 1 1 420px;
  min-width: 220px;
  max-width: 700px;
  position: relative;
}

#mainContent .controls .search-box input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #a0a6c2;
  border-radius: 28px;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
}

/* Sort dropdown should remain a tight control next to the search input */
#mainContent .controls .sort-dropdown {
  flex: 0 0 auto;
  padding: 0.65rem 1rem;
  border: 2px solid #868daf;
  border-radius: 28px;
  background: white;
  color: #46515e;
  font-size: 0.98rem;
  cursor: pointer;
  min-width: 160px;
  box-sizing: border-box;
}

/* --- Blog Grid --- */
.blog-grid {
  max-width:1200px;
  margin:2rem auto;
  padding:0 1rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
}

/* grid breakpoints */
@media (min-width:768px) { .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .blog-grid { grid-template-columns:repeat(3,1fr); } }

/* Blog Card */
.blog-card { background:white; border-radius:15px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.1); transition:transform 0.3s, box-shadow 0.3s; cursor:pointer; }
.blog-card:hover { transform:translateY(-5px); box-shadow:0 15px 40px rgba(0,0,0,0.15); }
.blog-banner { height:200px; background:linear-gradient(135deg,#d7d8de 0%,#bdb4b4f1 100%); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.blog-banner::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px); animation:slide 20s linear infinite; }
@keyframes slide { 0% { transform:translate(0,0); } 100% { transform:translate(50px,50px); } }

/* Banner content: image or centered icon */
.blog-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-banner .blog-banner-icon { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); font-size:2.5rem; color:white; display:flex; align-items:center; justify-content:center; pointer-events:none; text-shadow:0 2px 8px rgba(0,0,0,0.5); }

.blog-content { padding:1.5rem; }
.blog-title { font-size:1.3rem; color:#2c3e50; margin-bottom:0.5rem; }
.blog-excerpt { color:#7f8c8d; line-height:1.6; margin-bottom:1rem; }
.blog-meta { display:flex; justify-content:space-between; color:#95a5a6; font-size:0.9rem; }

/* Preview banner in editor */
.preview-banner { width:100%; height:160px; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,#dfe6ee,#cfd6df); display:flex; align-items:center; justify-content:center; }
.preview-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.preview-banner .blog-banner-icon { font-size:2rem; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,0.35); }

/* Admin Panel (default: bottom-right) */
.admin-panel { position:fixed; bottom:20px; right:20px; z-index:1000; }
.admin-btn { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; border:none; padding:1rem 2rem; border-radius:50px; font-size:1rem; cursor:pointer; box-shadow:0 4px 15px rgba(0,0,0,0.2); transition:transform 0.3s; }
.admin-btn:hover { transform:scale(1.05); }

/* Modal */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000; align-items:center; justify-content:center; }
.modal-content { background:white; padding:2rem; border-radius:15px; max-width:90%; max-height:90vh; overflow-y:auto; position:relative; }
.close-modal { position:absolute; top:10px; right:10px; background:none; border:none; font-size:2rem; cursor:pointer; color:#95a5a6; }

/* Editor */
.editor-container { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem; }
@media (max-width:768px) { .editor-container { grid-template-columns:1fr; } }
.editor-section { background:white; padding:1.5rem; border-radius:10px; box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.editor-toolbar { position:fixed; bottom:0; left:0; right:0; background:white; padding:1rem; box-shadow:0 -4px 6px rgba(0,0,0,0.1); display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; z-index:100; }
.toolbar-btn { background:#667eea; color:white; border:none; padding:0.5rem 1rem; border-radius:5px; cursor:pointer; font-size:0.9rem; transition:background 0.3s; }
.toolbar-btn:hover { background:#764ba2; }
.editor-input { width:100%; padding:0.75rem; border:1px solid #ddd; border-radius:5px; font-size:1rem; margin-bottom:1rem; }
.editor-textarea { width:100%; min-height:400px; padding:1rem; border:1px solid #ddd; border-radius:5px; font-size:1rem; resize:vertical; }
.preview-content { padding:1rem; border:1px solid #ddd; border-radius:5px; min-height:400px; background:#f9f9f9; }

/* Blog view */
.blog-view-container { max-width:800px; margin:2rem auto; padding:0 1rem; }
.blog-view { background:white; padding:2rem; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,0.1); }
.blog-view-title { font-size:2.5rem; color:#2c3e50; margin-bottom:1rem; }
.blog-view-meta { color:#95a5a6; margin-bottom:2rem; padding-bottom:1rem; border-bottom:2px solid #ecf0f1; }
.blog-view-content { line-height:1.8; color:#34495e; }
.blog-view-content img { max-width:100%; height:auto; margin:1rem 0; border-radius:10px; }

/* Share buttons */
.share-buttons { margin-top:2rem; padding-top:2rem; border-top:2px solid #ecf0f1; display:flex; gap:1rem; align-items:center; }
.share-btn { padding:0.5rem 1rem; background:#3498db; color:white; border:none; border-radius:5px; cursor:pointer; text-decoration:none; transition:background 0.3s; }
.share-btn:hover { background:#2980b9; }

/* Return */
.return-btn { display:inline-block; margin-top:2rem; padding:1rem 2rem; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; text-decoration:none; border-radius:25px; transition:transform 0.3s; }
.return-btn:hover { transform:scale(1.05); }

/* Import/Export */
.data-controls { display:flex; gap:1rem; margin:1rem 0; }
.file-input { display:none; }

/* Login form */
.login-form { max-width:400px; margin:0 auto; }
.login-form input { width:100%; padding:0.75rem; margin-bottom:1rem; border:1px solid #ddd; border-radius:5px; }
.login-btn { width:100%; padding:1rem; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:white; border:none; border-radius:5px; cursor:pointer; font-size:1rem; }

/* Loader */
.loader { border:4px solid #f3f3f3; border-top:4px solid #667eea; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin:2rem auto; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }

/* -------------------------
   Desktop (large screens)
   make controls FLOAT fixed at bottom center
   ------------------------- */
@media (min-width:1024px) {

  #mainContent .controls { /* left as flow by default to avoid covering content on some pages */ }

  /* keep search responsive while controls are fixed */
  #mainContent .controls .search-box { flex: 1 1 420px; min-width: 220px; max-width:700px; }

  /* reserve space at bottom so the last blog cards are not hidden behind fixed controls */
  main#mainContent { padding-bottom: calc(var(--controls-height) + 60px); }
}

/* -------------------------
   Mobile & small screens
   admin -> top-left
   controls -> sticky / floating above blog area without covering
   ------------------------- */
@media (max-width:767px) {
  /* move admin panel to top-left */
  .admin-panel {
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1200;
  }
  .admin-btn { padding: 0.6rem 0.9rem; border-radius: 10px; font-size: 0.95rem; }

  #mainContent .controls .search-box { flex: 1 1 auto; min-width: 0; }
  #mainContent .controls .sort-dropdown { min-width: unset; width: 100%; }

  /* small adjustment to ensure blog-grid has breathing space on the bottom */
  .blog-grid { padding-bottom: 40px; }
}

/* Small-screen visual tweaks */
@media(max-width:768px) {
  .header h1 { font-size:1.8rem; }
  .controls { flex-direction:column; }
  .search-box { width:100%; }
}