/**
 * Location: /assets/css/sidebar.css
 * Purpose: Global sidebar layout system (Woo LEFT sidebar, Blog RIGHT sidebar) with ONE consistent sidebar width across the entire site.
 * Related JS: None (CSS-only layout).
 * Linkage/Loader: Enqueued from /inc/enqueue/frontend.php only when an active sidebar exists in the current page scope.
 * Notes:
 * - Performance-first: pure CSS.
 * - Adds .stm-layout__top (full-width row) so headers/hero can sit above content+sidebar.
 */

/* Single source of truth */
:root{
  --stm-sidebar-width: 280px;
  --stm-layout-gap: 22px;
}

/* Global layout wrapper */
.stm-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stm-layout-gap);
}

/* ✅ New: full-width top row inside layout */
.stm-layout__top{
  grid-column: 1 / -1;
  min-width: 0;
}

/* Desktop layout */
@media (min-width: 992px){

  .stm-layout--right{
    grid-template-columns: minmax(0, 1fr) var(--stm-sidebar-width);
    align-items: start;
  }

  .stm-layout--left{
    grid-template-columns: var(--stm-sidebar-width) minmax(0, 1fr);
    align-items: start;
  }
}

/* Content area */
.stm-layout__content{
  min-width: 0;
}

/* Sidebar shell */
.stm-sidebar{
  min-width: 0;
  width: 100%;
}

/* Sticky only on desktop */
@media (min-width: 992px){
  .stm-sidebar__inner{
    position: sticky;
    top: 18px;
  }
}

/* Widgets — clean flat */
.stm-widget{
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0 0 18px;
}
.stm-widget:last-child{ margin-bottom: 0; }

.stm-widget__title{
  margin: 0 0 10px;
  padding: 0 0 10px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.2px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.stm-widget a{ text-decoration: none; }
.stm-widget a:hover{ text-decoration: underline; }

.stm-widget p{ margin: 0 0 10px; }
.stm-widget p:last-child{ margin-bottom: 0; }

.stm-widget ul{ margin: 0; padding-left: 18px; }
.stm-widget li{ margin: 7px 0; line-height: 1.35; }

.stm-widget.widget_archive ul,
.stm-widget.widget_categories ul,
.stm-widget.widget_meta ul,
.stm-widget.widget_pages ul,
.stm-widget.widget_recent_entries ul,
.stm-widget.widget_recent_comments ul,
.stm-widget.widget_nav_menu ul{
  padding-left: 18px;
}

.stm-widget input[type="text"],
.stm-widget input[type="search"],
.stm-widget input[type="email"],
.stm-widget input[type="number"],
.stm-widget select{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.14);
  padding: 10px 10px;
  border-radius: 10px;
  outline: none;
  background: #fff;
}
.stm-widget input[type="text"]:focus,
.stm-widget input[type="search"]:focus,
.stm-widget input[type="email"]:focus,
.stm-widget input[type="number"]:focus,
.stm-widget select:focus{
  border-color: rgba(0,0,0,0.28);
}

.stm-widget button,
.stm-widget input[type="submit"],
.stm-widget .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Woo wrappers padding moved from inline styles */
.stm-woo-wrap{ padding: 22px 16px; }

/* Mobile sidebar removed */
@media (max-width: 991px){

  .stm-layout--left,
  .stm-layout--right{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stm-layout--left > aside.stm-sidebar,
  .stm-layout--right > aside.stm-sidebar{
    display: none !important;
  }

  aside.stm-sidebar--shop,
  aside.stm-sidebar--blog{
    display: none !important;
  }

  .stm-layout{ gap: 16px; }
  .stm-widget{ margin-bottom: 16px; }
  .stm-widget__title{ padding-bottom: 9px; }
}

/* ======================================================
   BLOG SIDEBAR — WIDTH OVERRIDE (BLOG ONLY)
   Applies to:
   - Blog index
   - Blog archives (category/tag/author/date)
   - Single blog post
====================================================== */

/* Blog index + archives */
body.blog,
body.archive{
  --stm-sidebar-width: 330px; /* 280px + 50px */
}

/* Single blog post */
body.single-post{
  --stm-sidebar-width: 330px; /* 280px + 50px */
}

/* ======================================================
   FIX: Allow blog/post sidebar column to stretch full height
   so SMP sticky widget can travel to content bottom
====================================================== */
@media (min-width: 992px){

  /* Only blog + single-post sidebars */
  aside.stm-sidebar--blog,
  aside.stm-sidebar--post{
    align-self: stretch;        /* ✅ override grid align-items:start */
    position: relative;         /* ✅ safe pin context */
  }

  aside.stm-sidebar--blog .stm-sidebar__inner,
  aside.stm-sidebar--post .stm-sidebar__inner{
    min-height: 100%;           /* ✅ inner can span full column height */
    position: relative;         /* ✅ absolute pin uses this context too */
  }
}