/* ==========================================================================
   shame.css — Overrides and custom fixes
   ========================================================================== */


/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.breadcrumb__nav {
    padding: var(--spacing-sm, 1rem) 0;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .875rem;
}

.breadcrumb__item {
    display: flex;
    align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    margin-right: .25rem;
    color: var(--clr-dark-40, #999);
}

.breadcrumb__item a {
    color: var(--clr-secondary-100, #00529c);
    text-decoration: none;
}

.breadcrumb__item a:hover,
.breadcrumb__item a:focus {
    text-decoration: underline;
}

.breadcrumb__item .current {
    color: var(--clr-dark-100, #231f20);
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Sidebar Navigation (sibling pages)
   -------------------------------------------------------------------------- */

.content-with-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-gutter, 2rem);
    align-items: start;
}

@media (max-width: 768px) {
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }
}

.sidebar-nav {
    padding: var(--spacing-sm, 1rem) 0;
}

@media (min-width: 769px) {
    .sidebar-nav {
        position: sticky;
        top: 120px;
    }
}

.sidebar-nav__title {
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--clr-dark-60, #666);
    padding: 0 0 .5rem;
    margin: 0 0 .5rem;
    border-bottom: 2px solid var(--clr-primary-100, #110252);
}

.sidebar-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav__item + .sidebar-nav__item {
    border-top: 1px solid var(--clr-neutral-100, #e6e7e8);
}

.sidebar-nav__link {
    display: block;
    padding: .625rem 0;
    font-size: .9375rem;
    color: var(--clr-dark-100, #231f20);
    text-decoration: none;
    transition: color .15s ease, padding-left .15s ease;
}

.sidebar-nav__link:hover,
.sidebar-nav__link:focus {
    color: var(--clr-secondary-100, #00529c);
    padding-left: .25rem;
}

.sidebar-nav__link--active {
    color: var(--clr-primary-100, #110252);
    font-weight: 700;
    border-left: 3px solid var(--clr-primary-100, #110252);
    padding-left: .75rem;
}

.sidebar-nav__link--active:hover,
.sidebar-nav__link--active:focus {
    padding-left: .75rem;
}

.content-main {
    min-width: 0;
}


/* --------------------------------------------------------------------------
   Homepage — Cards & Steps
   -------------------------------------------------------------------------- */

.flex-wrap {
    flex-wrap: wrap;
}

.hp-card {
    flex: 1;
    min-width: 280px;
    background: var(--clr-white, #fff);
    padding: var(--spacing-md, 2rem);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.hp-steps-col {
    flex: 1;
    min-width: 280px;
    background: var(--clr-neutral-100, #e6e7e8);
    padding: var(--spacing-md, 2rem);
    border-radius: 8px;
}


/* --------------------------------------------------------------------------
   Hero (homepage) — keep boxes side-by-side on mobile
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 48em) {
    .hero.hero--hp .hero__cnt {
        flex-direction: row;
        gap: 1rem;
    }

    .hero.hero--hp .hero__box {
        min-width: 0;
        flex: 1 1 0;
    }
}


/* --------------------------------------------------------------------------
   News — article (Novost)
   -------------------------------------------------------------------------- */

.news-article__date {
    margin: 0;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--clr-dark-60, #666);
}

.news-article__lead {
    font-size: 1.125rem;
}