/* ==========================================================================
   FaithfulBiz — Sidebar & Widgets   v2.0.0
   ========================================================================== */

/* ==========================================================================
   STICKY SIDEBAR

   Why these exact properties are needed:

   position: sticky + top: 80px
     Keeps sidebar anchored 80px below the top of the viewport (below the
     62px fixed header + 18px breathing room) as the user scrolls.

   align-self: start
     Prevents this grid item from stretching to match the content column
     height. Without this, sticky never activates because the element is
     already as tall as the page.

   max-height: calc(100vh - 96px)
     Caps the sidebar at viewport height minus the header. Without this, if
     the sidebar has many widgets it can be taller than the viewport, which
     means it would start partially off-screen and scroll partially off the
     bottom leaving a blank white gap.

   overflow-y: auto
     Lets sidebar content scroll inside its own box when widgets exceed the
     capped height. The user sees all widgets — they just scroll the sidebar.

   NOTE: The parent grid (.content-sidebar-wrap) must also have
   align-items: start set in style.css. Both are required.
   ========================================================================== */

.sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.sidebar::-webkit-scrollbar       { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* ==========================================================================
   WIDGETS
   ========================================================================== */

.widget {
  margin-bottom: 28px;
}

.widget-title {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-dark);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   POPULAR / RECENT POST ITEMS
   ========================================================================== */

.widget-post-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: flex-start;
}

.widget-post-item:last-child {
  border-bottom: none;
}

.widget-post-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-soft);
}

.widget-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.widget-post-info {
  min-width: 0;
  flex: 1;
}

.widget-post-info .widget-post-cat {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.widget-post-info .widget-post-title {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-dark);
  text-decoration: none;
  transition: color var(--transition);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.widget-post-info .widget-post-title:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   CATEGORIES WIDGET
   ========================================================================== */

.widget-categories li {
  border-bottom: 1px solid var(--color-border);
}

.widget-categories li:last-child {
  border-bottom: none;
}

.widget-categories li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

.widget-categories li a:hover {
  color: var(--color-primary);
}

.widget-categories li a .cat-count {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
  padding: 2px 8px;
  border-radius: 100px;
}

/* ==========================================================================
   SOCIAL FOLLOW WIDGET
   ========================================================================== */

.social-follow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-follow a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: #fff;
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition);
}

.social-follow a:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.s-twitter   { background: #000000; }
.s-facebook  { background: #1877f2; }
.s-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.s-linkedin  { background: #0a66c2; }
.s-rss       { background: #f26522; }
.s-youtube   { background: #ff0000; }

/* ==========================================================================
   SEARCH WIDGET
   ========================================================================== */

.widget-search .search-form {
  display: flex;
}

.widget-search .search-field {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--color-bg-soft);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition);
}

.widget-search .search-field:focus {
  border-color: var(--color-primary);
}

.widget-search .search-submit {
  flex-shrink: 0;
  padding: 10px 14px;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}

.widget-search .search-submit:hover {
  background: var(--color-primary-dark);
}