/* ============================================================
   EMANACE BLOG + ADMIN — Bootstrap layer
   Built on top of assets/css/style.css design tokens (--gold,
   --navy, --cream, --serif/--sans, --radius, etc). Bootstrap 5
   supplies the grid, components (navbar, dropdown, modal,
   pagination, badges, forms); this file themes them to match
   the main Emanace site and adds the handful of custom pieces
   (cards, prose, sidebar widgets) that Bootstrap doesn't cover.
   ============================================================ */

body{ font-weight: 300; }
body.blog-body{ background: var(--cream-dim); }

/* ---------- gradient helpers (unchanged names, used across blog) -------- */
.gradient-text{
  background: var(--gradient-feather, linear-gradient(100deg,#4f3ee0 0%,#a855f7 100%));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gradient-bg{ background: var(--gradient-feather, linear-gradient(100deg,#4f3ee0 0%,#a855f7 100%)); }
.gradient-btn{ background: var(--gradient-feather, linear-gradient(100deg,#4f3ee0 0%,#a855f7 100%)); color:#fff; border:0; transition: opacity .25s, transform .25s; }
.gradient-btn:hover{ opacity:.88; transform: scale(1.02); color:#fff; }

/* ---------- Bootstrap dropdown themed to match site nav ----------------- */
.dropdown-menu{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(27,31,59,0.1);
  padding: 8px;
  margin-top: 10px;
}
.dropdown-item{
  border-radius: calc(var(--radius) - 2px);
  padding: 8px 14px;
  font-size: 0.85rem;
  color: var(--ink);
}
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active{
  background: #f1effc;
  color: var(--gold);
}

/* ---------- blog cards --------------------------------------------------- */
.blog-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  transition: box-shadow .3s, transform .3s;
  height:100%;
}
.blog-card:hover{ box-shadow: 0 16px 40px rgba(79,62,224,.12); transform: translateY(-5px); }
.blog-card .card-img-wrap{ height:176px; overflow:hidden; }
.blog-card .card-img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .3s; }
.blog-card:hover .card-img-wrap img{ transform: scale(1.05); }
.blog-card .card-img-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:2.25rem; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.cat-pill{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .75rem; border-radius:99px; background:#f1effc; color: var(--gold);
}

.sidebar-widget{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:1.5rem; margin-bottom:1.5rem; border-top:3px solid var(--gold);
}
.sidebar-widget .widget-title{ font-weight:700; color: var(--navy); margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; font-size:1rem; }
.sidebar-list a{
  display:flex; justify-content:space-between; align-items:center;
  padding:.4rem .6rem; border-radius: .75rem; font-size:.9rem; color: var(--navy-soft);
}
.sidebar-list a:hover{ background:#f1effc; color: var(--gold); }
.sidebar-list a.active{ background:#f1effc; color: var(--gold); font-weight:600; }
.sidebar-list .count-pill{ background:#f1f1f5; color:#8b8fa3; font-size:.72rem; padding:.1rem .5rem; border-radius:99px; }

.section-badge{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.35rem 1rem; border-radius:99px; background:rgba(255,255,255,.2); color:#fff; margin-bottom:1rem;
}

/* ---------- article body -------------------------------------------------- */
.prose{ max-width:100%; line-height:1.85; }
.prose h1,.prose h2,.prose h3,.prose h4{ font-family: var(--serif); font-weight:400; margin-top:1.6em; margin-bottom:.5em; color: var(--navy); }
.prose h1{font-size:2em;} .prose h2{font-size:1.5em;} .prose h3{font-size:1.2em;}
.prose p{margin-bottom:1.3em;}
.prose ul,.prose ol{padding-left:1.5em;margin-bottom:1em;}
.prose li{margin-bottom:.4em;}
.prose a{color:var(--gold);text-decoration:underline;}
.prose blockquote{border-left:4px solid var(--gold);background:var(--cream-dim);padding:1rem 1.25rem;border-radius:0 .75rem .75rem 0;color:#555;font-style:italic;margin:1.5em 0;}
.prose code{background:#f3f4f6;border-radius:.25rem;padding:.1em .4em;font-size:.88em;}
.prose pre{background:var(--navy-deep);color:#e5e7eb;border-radius:.75rem;padding:1.5rem;overflow-x:auto;margin-bottom:1.5em;}
.prose img{border-radius:.75rem;max-width:100%;margin:1.5em auto;display:block;}

/* ---------- floating CTA --------------------------------------------------- */
.cta-float{
  position:fixed; bottom:1.75rem; right:1.75rem; display:flex; align-items:center; gap:.5rem;
  padding:.85rem 1.35rem; background: var(--gold); color:#fff; border-radius:99px; font-size:.85rem;
  font-weight:500; box-shadow:0 8px 24px rgba(79,62,224,.35); z-index:1000; transition:transform .25s, opacity .25s;
}
.cta-float:hover{ transform:scale(1.04); opacity:.92; color:#fff; }

/* ---------- pagination themed ---------------------------------------------- */
.pagination .page-link{ color: var(--navy); border-color: var(--line); border-radius: var(--radius) !important; margin: 0 3px; }
.pagination .page-item.active .page-link{ background: var(--gold); border-color: var(--gold); }
.pagination .page-link:hover{ color: var(--gold); background: #f1effc; }

/* ---------- generic buttons on blog pages ----------------------------------- */
.btn-emanace{ background: var(--gold); color:#fff; border:1px solid var(--gold); border-radius: 99px; }
.btn-emanace:hover{ background: var(--gold-light); border-color: var(--gold-light); color:#fff; }
.btn-emanace-outline{ background:transparent; color: var(--navy); border:1px solid var(--line); border-radius: 99px; }
.btn-emanace-outline:hover{ border-color: var(--gold); color: var(--gold); }

.form-control:focus, .form-select:focus{ border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(79,62,224,.15); }

/* ---------- resource type gradients (resources.php) -------------------------- */
.type-grad-brochure{ background: linear-gradient(135deg,#3b82f6,#4338ca); }
.type-grad-case_study{ background: linear-gradient(135deg,#a855f7,#7c3aed); }
.type-grad-whitepaper{ background: linear-gradient(135deg,#22c55e,#059669); }
.type-grad-ebook{ background: linear-gradient(135deg,#f97316,#d97706); }
.type-grad-other{ background: linear-gradient(135deg,#6b7280,#475569); }

/* ---------- filter chips / breadcrumb --------------------------------------- */
.filter-chip{ background:#f1effc; color: var(--gold); font-size:.85rem; font-weight:600; padding:.3rem .8rem; border-radius:99px; }

/* ============================================================
   ADMIN PANEL
   ============================================================ */
.admin-body{ background: var(--cream-dim); font-weight:300; min-height:100vh; }

.admin-sidebar{
  width: 260px; flex-shrink:0; background: var(--gradient-feather, linear-gradient(100deg,#4f3ee0 0%,#a855f7 100%));
  color:#fff; display:flex; flex-direction:column; min-height:100vh;
}
.admin-sidebar .brand-block{ padding: 1.5rem; border-bottom:1px solid rgba(255,255,255,.2); }
.admin-sidebar .brand-icon{ background: rgba(255,255,255,.2); border-radius:.75rem; width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
.admin-nav{ padding: 1rem; flex:1; }
.admin-nav .nav-link{
  color: rgba(255,255,255,.9); border-radius: .75rem; padding: .7rem 1rem; margin-bottom:.25rem;
  display:flex; align-items:center; gap:.75rem; font-size:.92rem; transition: background .2s;
}
.admin-nav .nav-link:hover{ color:#fff; background: rgba(255,255,255,.15); }
.admin-nav .nav-link.active{ color:#fff; background: rgba(255,255,255,.2); border-left:3px solid #fff; }
.admin-nav hr{ border-color: rgba(255,255,255,.2); margin: .75rem 0; }
.admin-user-block{ padding:1rem 1.5rem; border-top:1px solid rgba(255,255,255,.2); }
.admin-avatar{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }

.admin-main{ flex:1; min-width:0; }
.admin-topbar{ background:#fff; box-shadow: 0 1px 3px rgba(27,31,59,.06); padding: 1rem 1.5rem; }
.admin-content{ padding: 1.5rem; }

.stat-card{ background:#fff; border:1px solid var(--line); border-radius: 1rem; padding:1.5rem; display:flex; align-items:center; gap:1rem; }
.stat-icon{ width:52px; height:52px; border-radius:.9rem; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.25rem; flex-shrink:0; }
.stat-value{ font-size:1.5rem; font-weight:700; color: var(--navy); line-height:1.1; }
.stat-label{ color: var(--navy-soft); font-size:.85rem; }

.admin-card{ background:#fff; border:1px solid var(--line); border-radius:1rem; }
.admin-card .admin-card-header{ padding:1.25rem 1.5rem; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.admin-card .admin-card-body{ padding:1.5rem; }

.admin-table thead{ background: var(--cream-dim); }
.admin-table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color: var(--navy-soft); font-weight:600; border-bottom:1px solid var(--line); white-space:nowrap; }
.admin-table td{ vertical-align:middle; color: var(--ink); }
.admin-table tbody tr:hover{ background: var(--cream-dim); }

.thumb-sm{ width:48px; height:36px; object-fit:cover; border-radius:.5rem; flex-shrink:0; }
.thumb-placeholder{ width:48px; height:36px; border-radius:.5rem; background: var(--cream-dim); display:flex; align-items:center; justify-content:center; color:#c7c9d9; flex-shrink:0; }

.status-pill{ font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:99px; }
.status-published{ background:#dcfce7; color:#15803d; }
.status-draft{ background:#fef9c3; color:#a16207; }
.status-active{ background:#dcfce7; color:#15803d; }
.status-inactive{ background:#f1f1f5; color:#8b8fa3; }

.type-badge-brochure{ background:#dbeafe; color:#1d4ed8; }
.type-badge-case_study{ background:#f3e8ff; color:#7e22ce; }
.type-badge-whitepaper{ background:#dcfce7; color:#15803d; }
.type-badge-ebook{ background:#ffedd5; color:#c2410c; }
.type-badge-other{ background:#f1f1f5; color:#475569; }

.sidebar-link{ transition: all .2s ease; }

#editor-container{ height:400px; background:#fff; }
.ql-toolbar{ border-radius:.5rem .5rem 0 0 !important; border-color:#e5e7eb !important; }
.ql-container{ border-radius:0 0 .5rem .5rem !important; border-color:#e5e7eb !important; font-family: var(--sans); font-size:15px; }

.drop-zone{ border:2px dashed var(--line); border-radius: 1rem; padding:1.5rem; text-align:center; cursor:pointer; transition: border-color .2s, background .2s; }
.drop-zone:hover, .drop-zone.dragover{ border-color: var(--gold); background: #f8f7fe; }

@media (max-width: 991.98px){
  .admin-sidebar{ position:fixed; left:-260px; top:0; z-index:1050; transition:left .25s ease; }
  .admin-sidebar.open{ left:0; }
}
