/*
Theme Name: I3L Sidebar Cards
Theme URI: https://example.com/
Author: Copilot
Description: Left navigation layout with rounded post cards, banner header, pagination and optional infinite scroll.
Version: 1.0.0
License: GPLv2 or later
Text Domain: i3l
*/

:root{
  --i3l-bg: #ffffff;
  --i3l-surface: #fdfcfa;
  --i3l-text: #222222;
  --i3l-accent: #f8edd5;
  --i3l-accent-2: #fcef8d;
  --i3l-radius: 18px;
  --i3l-radius-banner: 24px;
  --i3l-shadow: 0 4px 14px rgba(0,0,0,.10);
  --i3l-shadow-banner: 0 6px 20px rgba(0,0,0,.08);
  --i3l-gap: 20px;
  --i3l-sidebar-w: 240px;
  --i3l-border: 1px solid rgba(0,0,0,.06);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--i3l-bg);
  color: var(--i3l-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
}

a{ color: inherit; }
a:hover{ color: var(--i3l-accent); }

/* Banner header: 90% width, rounded border */
.site-header-banner{
  width: 100%;
  padding: 22px 0 10px;
  display: flex;
  justify-content: center;
}
.site-header-banner a{
  width: 90%;
  max-width: 1200px;
  display: block;
}
.site-header-banner img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--i3l-radius-banner);
  box-shadow: var(--i3l-shadow-banner);
  border: var(--i3l-border);
  background: #fff;
}

/* Layout */
.layout-wrapper{
  display: flex;
  gap: var(--i3l-gap);
  padding: 18px 18px 36px;
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar-nav{
  width: var(--i3l-sidebar-w);
  flex: 0 0 var(--i3l-sidebar-w);
  background: var(--i3l-surface);
  border-radius: var(--i3l-radius);
  box-shadow: var(--i3l-shadow);
  border: var(--i3l-border);
  padding: 16px;
  position: sticky;
  top: 16px;
  height: fit-content;
}

.sidebar-nav .menu{ list-style: none; padding: 0; margin: 0; }
.sidebar-nav .menu li{ margin: 10px 0; }
.sidebar-nav .menu a{
  text-decoration: none;
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
}
.sidebar-nav .menu a:hover,
.sidebar-nav .current-menu-item > a{
  background: rgba(0,0,0,.04);
  outline: 2px solid rgba(0,0,0,.03);
}

.content-area{ flex: 1; min-width: 0; }

.post-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.post-card{
  background: var(--i3l-surface);
  border-radius: var(--i3l-radius);
  box-shadow: var(--i3l-shadow);
  border: var(--i3l-border);
  padding: 18px 18px 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.post-card .thumb{ margin: -18px -18px 12px; }
.post-card .thumb img{ width: 100%; height: auto; display: block; }

.post-card h2{ margin: 0 0 8px; font-size: 1.1rem; }

.post-meta{ font-size: .85rem; opacity: .75; margin-bottom: 10px; }

.pagination{ margin-top: 22px; }

/* Infinite scroll */
#i3l-sentinel{ height: 1px; }
.i3l-loading{ padding: 16px; text-align: center; opacity: .8; }

/* Responsive */
@media (max-width: 900px){
  .layout-wrapper{ flex-direction: column; }
  .sidebar-nav{ width: auto; position: relative; top: 0; }
}