/* ============================================================
   Blog Sub-Navigation
   Sticky bar that appears below the main header on blog posts
   ============================================================ */

.blog-subnav {
  --subnav-height: 48px;
  --subnav-bg: #ffffff;
  --subnav-border: rgba(0, 0, 0, 0.08);
  --subnav-text: #52525b;
  --subnav-text-hover: #1a4d2e;
  --subnav-active-color: #1a4d2e;
  --subnav-link-size: 0.8125rem; /* 13px */

  position: sticky;
  top: var(--sd-header-height-desktop, 88px);
  z-index: calc(var(--sd-z-index-sticky, 1020) - 1);
  background: var(--subnav-bg);
  border-bottom: 1px solid var(--subnav-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  /* Push down below the fixed header on initial page load */
  margin-top: var(--sd-header-height-desktop, 88px);
}

/* Admin bar offset */
.admin-bar .blog-subnav {
  top: calc(var(--sd-header-height-desktop, 88px) + 32px);
  margin-top: calc(var(--sd-header-height-desktop, 88px) + 32px);
}

/* Inner layout */
.blog-subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1800px;
  width: 95%;
  margin: 0 auto;
  padding: 0 20px;
  height: var(--subnav-height);
  overflow: hidden;
}

/* ---- Links ---- */
.blog-subnav__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 1;
  min-width: 0;
}

.blog-subnav__links::-webkit-scrollbar {
  display: none;
}

.blog-subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  font-size: var(--subnav-link-size);
  font-weight: 500;
  color: var(--subnav-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease, background 150ms ease;
  line-height: 1;
}

.blog-subnav__link:hover {
  color: var(--subnav-text-hover);
  background: rgba(26, 77, 46, 0.06);
  text-decoration: none;
}

.blog-subnav__link--active {
  color: var(--subnav-active-color);
  font-weight: 600;
  background: rgba(26, 77, 46, 0.08);
}

/* ---- Category dots ---- */
.blog-subnav__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.blog-subnav__dot--green  { background: #22c55e; }
.blog-subnav__dot--teal   { background: #14b8a6; }
.blog-subnav__dot--amber  { background: #f59e0b; }
.blog-subnav__dot--slate  { background: #64748b; }
.blog-subnav__dot--rose   { background: #f43f5e; }

/* ---- Vertical divider ---- */
.blog-subnav__divider {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  margin: 0 0.25rem;
}

/* ---- Actions ---- */
.blog-subnav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Search button */
.blog-subnav__search {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  background: transparent;
  color: var(--subnav-text);
  font-size: var(--subnav-link-size);
  font-weight: 500;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  line-height: 1;
  font-family: inherit;
}

.blog-subnav__search:hover {
  color: var(--subnav-text-hover);
  border-color: rgba(26, 77, 46, 0.3);
  background: rgba(26, 77, 46, 0.04);
}

.blog-subnav__search svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

.blog-subnav__search kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  font-size: 0.6875rem; /* 11px */
  font-family: var(--sd-font-family-mono, monospace);
  color: var(--subnav-text);
  line-height: 1;
}

/* CTA button */
.blog-subnav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: #1a4d2e;
  color: #ffffff !important;
  border-radius: 4px;
  font-size: var(--subnav-link-size);
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease;
  line-height: 1;
  white-space: nowrap;
}

.blog-subnav__cta:hover {
  background: #2d6a3e;
  text-decoration: none;
  transform: translateY(-1px);
}

.blog-subnav__cta svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ============================================================
   Content-area offset override for sd-post template
   (subnav takes the place of content-area's padding-top)
   ============================================================ */
body.single .blog-subnav ~ #main-content #content-area {
  padding-top: 2rem !important;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 767px) {
  .blog-subnav {
    top: var(--sd-header-height-mobile, 72px);
    margin-top: var(--sd-header-height-mobile, 72px);
  }

  .admin-bar .blog-subnav {
    /* WP admin bar is hidden on mobile below 600px by WP core */
    top: var(--sd-header-height-mobile, 72px);
    margin-top: var(--sd-header-height-mobile, 72px);
  }

  .blog-subnav__inner {
    padding: 0 12px;
    gap: 0.5rem;
  }

  /* Hide "Search" label and kbd on mobile — icon only */
  .blog-subnav__search span,
  .blog-subnav__search kbd {
    display: none;
  }

  .blog-subnav__search {
    padding: 0.35rem;
    border-radius: 4px;
  }

  .blog-subnav__search svg {
    width: 16px;
    height: 16px;
    opacity: 1;
  }
}

/* Tablet: hide CTA label on very narrow viewports */
@media (max-width: 480px) {
  .blog-subnav__cta span {
    display: none;
  }

  .blog-subnav__cta {
    padding: 0.35rem;
  }

  .blog-subnav__cta svg {
    width: 15px;
    height: 15px;
  }
}