/* ==========================================================================
   Laravel additions on top of the design (style.css / inner.css):
   server-side form errors, blog listing search + pagination, blog post body.
   ========================================================================== */

.field-error{ display:block; margin-top:6px; font-size:.85rem; color:#f0a79e; }
.contact-cta .field-error, .modal-box .field-error{ color:#f5b3aa; }

.footer-contact a{ color:inherit; transition: color var(--transition); }
.footer-contact a:hover{ color: var(--gold-light); }

/* ---------------- Blogs listing ---------------- */
.blog-search{ display:flex; gap:12px; max-width:620px; margin:0 auto 46px; }
.blog-search input{
  flex:1; min-width:0; padding:13px 18px; border:1px solid #dcb66b; border-radius: var(--radius);
  background:#fdf8ef; font-family: var(--font-body); font-size:1rem; color: var(--text-dark);
}
.blog-search input:focus{ outline:none; border-color: var(--maroon); }
.blog-search-note{ text-align:center; margin:-26px 0 34px; color: var(--text-muted); }
.blog-search-note a{ color: var(--maroon); text-decoration:underline; }
.blog-empty{ text-align:center; padding:40px 0; color: var(--text-muted); }

.site-pagination{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:46px; }
.site-pagination a, .site-pagination span{
  min-width:42px; height:42px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #dcb66b; border-radius: var(--radius); color: var(--maroon); background:#fdf8ef;
  transition: var(--transition);
}
.site-pagination a:hover, .site-pagination .current{ background: var(--maroon); border-color: var(--maroon); color:#fff; }
.site-pagination .disabled{ opacity:.4; }

/* ---------------- Blog post ---------------- */
.post-body{
  max-width:860px; margin:0 auto; padding:46px 52px; background:#fdf8ef;
  border:1px solid #e6cf9f; border-radius:14px; font-size:1.05rem; line-height:1.8; color: var(--text-dark);
}
.post-body .post-lead{ font-family: var(--font-heading); font-size:1.3rem; line-height:1.6; color: var(--maroon); margin-bottom:26px; }
.post-body h2, .post-body h3, .post-body h4{ color: var(--maroon-dark); margin:30px 0 14px; line-height:1.3; }
.post-body p{ margin-bottom:18px; }
.post-body ul, .post-body ol{ margin:0 0 18px 22px; }
.post-body ul{ list-style: disc; }
.post-body ol{ list-style: decimal; }
.post-body li{ margin-bottom:6px; }
.post-body a{ color: var(--maroon); text-decoration: underline; }
.post-body blockquote{ margin:26px 0; padding:18px 24px; border-left:3px solid var(--gold); background:#f6ecd9; font-style:italic; }
.post-body img{ max-width:100%; height:auto; border-radius:10px; margin:10px 0; }
.post-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; padding-top:24px; border-top:1px solid #e6cf9f; }
.post-tags span{ padding:5px 14px; border:1px solid #dcb66b; border-radius:30px; font-size:.85rem; color: var(--maroon); }
.post-share{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.post-share span{ font-weight:600; color: var(--maroon-dark); }
.post-share a{
  width:38px; height:38px; border-radius:50%; border:1px solid #dcb66b; display:inline-flex; align-items:center; justify-content:center;
  color: var(--maroon); text-decoration:none; transition: var(--transition);
}
.post-share a:hover{ background: var(--maroon); color:#fff; border-color: var(--maroon); }

@media (max-width: 640px){
  .blog-search{ flex-direction:column; }
  .post-body{ padding:28px 20px; }
}