/* Home subnav: story-circle rail below the header, components/subnav.blade.php */

.home-subnav {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: 10px 12px 12px; scroll-padding-inline: 12px;
    background: #fff;
}
.home-subnav::-webkit-scrollbar { display: none; }

.home-subnav-item {
    flex: 0 0 auto; min-width: 64px; padding: 0 2px; white-space: nowrap; text-align: center;
    font-size: 13px; font-weight: 600; line-height: 16px; letter-spacing: -.01em; color: #2D2F31;
    outline: none; transition: color 150ms ease-out;
    -webkit-tap-highlight-color: transparent;
}
.home-subnav-item:hover { color: #2F68C5; }

/* Ring: grey hairline by default, its background shows through the 2px padding around the disc */
.home-subnav-ring {
    position: relative; display: block;
    width: 55px; height: 55px; margin: 0 auto 11px; padding: 2px; border-radius: 50%;
    background-color: #E4E8EB;
    transition: background-color 150ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}
/* Pearl disc: light from top-left, soft blue depth at the bottom */
.home-subnav-disc {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%;
    border: 2px solid #fff; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 32% 22%, #FFFFFF 0%, #F5F9FF 40%, #D8E6FD 100%);
    box-shadow: inset 0 -3px 8px rgba(47, 104, 197, .14);
}
.home-subnav-disc::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 32% 22%, #EBF2FE 0%, #B1CDFB 100%);
    transition: opacity 200ms ease-out;
}
.home-subnav-ic { position: relative; z-index: 1; font-size: 22px; line-height: 1; color: #2F68C5; }

.home-subnav-item:hover .home-subnav-ring {
    background-color: #89B4FA; transform: translateY(-2px);
    box-shadow: 0 10px 18px -10px rgba(59, 130, 246, .6);
}
.home-subnav-item:hover .home-subnav-disc::after { opacity: .6; }
.home-subnav-item:active .home-subnav-ring { transform: none; }
.home-subnav-item:focus-visible .home-subnav-ring { outline: 2px solid #3B82F6; outline-offset: 3px; }

.home-subnav-tag {
    position: absolute; z-index: 2; left: 50%; bottom: -8px; transform: translateX(-50%);
    padding: 1px 6px; border: 2px solid #fff; border-radius: 5px;
    font-size: 10px; font-weight: 800; line-height: 12px; letter-spacing: .06em; white-space: nowrap;
    color: #fff; background: #3B82F6;
}
.home-subnav-tag.is-success { background: var(--bs-success); }