/* Blog nav 1.0.0 */
/* Pill navigation bar above the listing. Not real tabs — each item is a link to
   another page. Mirrors the iTabs pill look using the same --lvd-cc-tab-* tokens,
   but is a standalone component (no block, no panels). Rendered from a WP menu, so
   the markup is <ul class="lvd-blog-nav"><li class="menu-item"><a>…</a></li></ul>
   and the active item carries WordPress's own current-* classes. */

/* Scroll container — horizontal scroll on overflow, scrollbar hidden. The
   edge-fade classes are toggled by blog-nav.js when there is more to scroll. */
.lvd-blog-nav-wrap                  {position:relative; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-bottom:32px; padding-inline:8px; scroll-padding-inline:8px;}
.lvd-blog-nav-wrap::-webkit-scrollbar {display:none;}
.lvd-blog-nav-wrap.lvd-fade-left.lvd-fade-right  {-webkit-mask-image:linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);}
.lvd-blog-nav-wrap.lvd-fade-left:not(.lvd-fade-right)  {-webkit-mask-image:linear-gradient(to right, transparent 0, #000 32px); mask-image:linear-gradient(to right, transparent 0, #000 32px);}
.lvd-blog-nav-wrap.lvd-fade-right:not(.lvd-fade-left)  {-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent 100%); mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);}

/* The pill track — a rounded translucent background holding the items. */
.lvd-blog-nav                       {position:relative; display:flex; flex-wrap:nowrap; width:max-content; box-sizing:border-box; margin:0; padding:4px; list-style:none; background:var(--lvd-cc-tabs-bg); border-radius:999px; gap:4px;}
.lvd-blog-nav-center .lvd-blog-nav  {margin-inline:auto;}
.lvd-blog-nav-start .lvd-blog-nav   {margin-inline:0 auto;}

.lvd-blog-nav li                    {margin:0; padding:0; list-style:none;}

/* Item — reuses the pill button look. Whole pill is the click target. */
.lvd-blog-nav a                     {display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; white-space:nowrap; padding:10px 24px; border-radius:999px; font-weight:700; line-height:1; color:var(--lvd-cc-tab-text); text-decoration:none; scroll-snap-align:center; transition:color var(--lvd-transition), background-color var(--lvd-transition), opacity var(--lvd-transition);}
.lvd-blog-nav a:hover               {opacity:0.7; color:var(--lvd-cc-tab-text);}
.lvd-blog-nav a:focus-visible       {outline:2px solid var(--lvd-color-primary); outline-offset:2px;}

/* Active item — WordPress marks the current page's item with these classes on
   the <li>. current-menu-item = exact page; the -parent/-ancestor variants cover
   a category whose child term is being viewed. */
.lvd-blog-nav .current-menu-item > a,
.lvd-blog-nav .current-menu-parent > a,
.lvd-blog-nav .current-menu-ancestor > a,
.lvd-blog-nav .current-cat > a      {background:var(--lvd-color-white); color:var(--lvd-cc-tab-text-active); opacity:1; box-shadow:var(--lvd-shadow-100);}


/* Bm */
@media (min-width:1px) and (max-width:767px)
{
.lvd-blog-nav-wrap                  {margin-bottom:24px;}
.lvd-blog-nav a                     {padding:8px 18px;}
.lvd-blog-nav                       {scroll-snap-type:x proximity;}
}


/* Reduced motion — no smooth scroll on activation. */
@media (prefers-reduced-motion: reduce)
{
.lvd-blog-nav-wrap                  {scroll-behavior:auto;}
}