/*
Theme Name: Clipxx Theme
Author: Cascade
Description: Custom WordPress theme 
Version: 0.1.0
Text Domain: clipxx
*/

/* Base resets and variables */
:root{
  --bg-color: #0f1115;
  --card-bg: #1a1d29;
  --text-color: #e5e7eb;
  --muted-text: #9ca3af;
  --primary: #3b82f6;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;
  --border: #2d3748;
  --hover-bg: #252a3a;
}

html, body { background: var(--bg-color); color: var(--text-color); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
img{ max-width:100%; height:auto; }

/***** Layout *****/
.container { max-width: 1344px; margin: 0 auto; padding: 0 12px; }
.site-header { margin-bottom: 0; }
.site-header .site-branding { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; }
.site-header .navbar { background: transparent; padding: 0.75rem 1rem; }
.navbar-item, .menu-item { 
  color: var(--text-color); 
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.navbar-item:hover, .menu-item:hover { 
  background: var(--hover-bg); 
  color: #fff; 
}

.search-container { max-width: 489px; }
.search-container .input { 
  background: var(--card-bg); 
  color: var(--text-color); 
  border-color: var(--border);
  border-radius: 4px;
}
.search-container .button { 
  background: var(--card-bg); 
  border-color: var(--border); 
  color: var(--text-color);
  border-radius: 4px;
}
.search-container .button:hover {
  background: var(--hover-bg);
}

.site-main.box { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); }
.block-title h2, .home-title h1 { color: var(--text-color); }

/***** Post grid *****/
.thumb-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.thumb-block { background: #0e1016; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.thumb-block .post-thumbnail{ position:relative; }
.post-views { position:absolute; left:5px; bottom:5px; background:rgba(0,0,0,.6); color:#fff; padding:2px 6px; border-radius: 6px; font-size:.8rem; display:flex; align-items:center; gap:6px; }
.post-header{ padding:10px 12px; }
.post-header h3{ color:#e8e8e8; font-size:.95rem; line-height:1.3; max-height: 2.6em; overflow:hidden; }

/***** Buttons + tags *****/
.buttons .button{ border:1px solid var(--border); background: transparent; color: var(--text-color); }
.button.is-danger.is-inverted{ color: var(--danger); }
.button.is-info.is-inverted{ color: var(--warning); }

/***** Footer *****/
.site-footer{ color: var(--muted-text); }
.site-footer a{ color: var(--text-color); }

@media (max-width: 1280px){
  .thumb-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px){
  .thumb-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .thumb-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .thumb-grid{ grid-template-columns: 1fr; }
}