/* assets/css/post-layout.css
   Extracted scoped styles for _layouts/post.html — add this file to your assets/css/ folder
   This file is namespaced under .post-layout-root to avoid conflicts with your global styles.
*/
.post-layout-root{--bg:#ffffff; --muted:#6b7280; --text:#0f172a; --radius:14px; --card-shadow:0 6px 20px rgba(16,24,40,0.06); font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.post-layout-root *{box-sizing:border-box}
.post-layout-root .site-header{position:sticky;top:0;backdrop-filter: blur(6px);background:rgba(255,255,255,0.7);border-bottom:1px solid rgba(15,23,42,0.04);z-index:40}
.post-layout-root .wrap{max-width:var(--max-width);margin:0 auto;}

.post-layout-root .site-title{font-weight:600}
.post-layout-root main.content{padding:28px 0}

.post-layout-root article.post {
  background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,255,255,0.98));
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto; /* centers it horizontally */
}

.post-layout-root .post-header{padding:12px 6px 6px}
.post-layout-root .post-header h1{margin:8px 0 4px;font-size:1.45rem;line-height:1.18}
.post-layout-root .meta{color:var(--muted);font-size:0.9rem}
.post-layout-root .post-body{padding:6px 6px 18px}
.post-layout-root .post-body :where(h2,h3){margin-top:1.4em;margin-bottom:.6em}
.post-layout-root .post-body p{line-height:1.65;margin:0 0 1em}
.post-layout-root .post-body img{max-width:100%;height:auto;border-radius:8px}
.post-layout-root .post-body figure{margin:0}
.post-layout-root .post-body blockquote{border-left:4px solid var(--primary);padding:10px 14px;margin:0 0 1rem;background:#fbfcff;border-radius:6px}
.post-layout-root .post-body table{width:100%;border-collapse:collapse;margin:1rem 0}
.post-layout-root .post-body table th,.post-layout-root .post-body table td{border:1px solid #e6e9ef;padding:8px;text-align:left}
.post-layout-root .post-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:12px}

.post-layout-root .post-footer{padding-top:12px;border-top:1px dashed rgba(15,23,42,0.04);display:flex;justify-content:space-between;align-items:center}
.post-layout-root .back-link{font-size:0.95rem;text-decoration:none;color:var(--primary)}
.post-layout-root .bottom-nav{position:fixed;left:0;right:0;bottom:12px;display:flex;justify-content:center;pointer-events:none}
.post-layout-root .bottom-nav .nav-inner{pointer-events:auto;background:rgba(255,255,255,0.98);border-radius:999px;padding:6px 10px;box-shadow:0 10px 30px rgba(12,15,30,0.08);display:flex;gap:6px}
.post-layout-root .bottom-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:600}
.post-layout-root .bottom-nav a.active{background:var(--primary);color:white}
@media (min-width:900px){.post-layout-root .wrap{padding:0}.post-layout-root .header-inner{height:72px}.post-layout-root main.content{padding:36px 0}.post-layout-root article.post{padding:28px}.post-layout-root .post-header h1{font-size:2rem}.post-layout-root .bottom-nav{bottom:24px}}
.post-layout-root .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.post-layout-root :where(a,button,input,textarea,select):focus{outline:3px solid color-mix(in srgb,var(--primary) 20%,white);outline-offset:2px}


/* --- Modernize the existing .search-form (keeps your HTML) --- */
.search-form{
  --ring: rgba(51,104,198,0.25); /* tune to your theme */
  display:flex; gap:.5rem; align-items:center;justify-content: space-between;
  border-radius:999px; padding:.35rem .4rem; background:var(--card,#fff);
  border:1px solid rgba(0,0,0,.06); box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.search-form .input{
  border:none; outline:none; box-shadow:none;
  border-radius:999px; padding:.6rem 1rem .6rem 2.25rem; /* room for icon */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>")
    no-repeat 12px center / 18px 18px,
    var(--card,#fff);
}
.search-form:focus-within{
  border-color: var(--primary-600,#2f5fb7);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Base: horizontal card layout */
.post-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-radius: 16px;
  padding: .9rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  margin-bottom: 1rem;
  background: #fff;
}

/* Thumbnail area */
.post-item .thumb {
  flex: 0 0 200px; /* fixed width on desktop */
  border-radius: 12px;
  overflow: hidden;
}

.post-item .thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Content area */
.post-item .post-meta {
  flex: 1;
  min-width: 0;
}

/* Hover effect */
.post-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.08);
}

/* --- Responsive behavior --- */
@media (max-width: 720px) {
  .post-item {
    flex-direction: column;       /* Stack vertically */
    gap: 12px;
    align-items: stretch;
  }

  .post-item .thumb {
    width: 100%;
    flex: 0 0 auto;
  }

  .post-item .thumb img {
    width: 100%;
    height: auto;
    max-height: 240px;           /* optional — prevents huge images */
    object-fit: cover;
  }

  .post-item .post-meta {
    width: 100%;
  }
}
/* Pagination — chip style */
.pagination{ gap:.5rem; }
.pagination .btn{ padding:.5rem .85rem; }
.pagination .btn.is-disabled{ opacity:.45; pointer-events:none }


.post-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.post-tag{
  display:inline-flex; align-items:center; padding:.3rem .6rem;
  border:1px solid var(--primary-100, #dbe7ff); border-radius:999px;
  text-decoration:none; font-size:.875rem; line-height:1; cursor:pointer;
  background:rgba(51,104,198,.06); color:var(--primary-dark, #264a94);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.post-tag:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(51,104,198,.12); }
.post-tag:active{ transform:none; }

.post-tag mark{ background:transparent; color:inherit; text-decoration:underline }


@media (max-width: 768px) {
  .post-body ul,
  .post-body ol {
    margin-left: 0;
    padding-left: 0; /* or 0 if you want it fully flush with edge */
    list-style-position: inside;
  }
}