/*
 * Adios Radar on the shared pages: the navigation item and the homepage line above the Google button.
 * Loaded on every page through the module's head slot, so it stays small.
 */

.tracker-nav-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
}

/* New notices the reader has not seen: the item lights up (tinted block, accent text, pulsing dot, today's count). */
.app-header .navbar-nav .nav-link.tracker-nav-link.is-fresh {
    color: var(--news-accent, #b42318) !important;
    background: #fdeceb !important;
}

.app-header .navbar-nav .nav-link.tracker-nav-link.is-fresh:hover,
.app-header .navbar-nav .nav-link.tracker-nav-link.is-fresh:focus-visible {
    background: #fbdcd9 !important;
}

.tracker-nav-link:not(.is-fresh) .tracker-nav-dot,
.tracker-nav-link:not(.is-fresh) .tracker-nav-count {
    display: none;
}

.tracker-nav-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #d92d20;
    animation: tracker-pulse 2.2s ease-out infinite;
}

.tracker-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    color: #ffffff;
    background: #b42318;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

/* Phone menu: the rows are spread edge to edge; keep the dot, label and count together, the arrow on the right. */
@media (max-width: 1199.98px) {
    body:not(.feed-page) .app-header .navbar-nav .nav-link.tracker-nav-link {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    body:not(.feed-page) .app-header .navbar-nav .nav-link.tracker-nav-link::after {
        margin-left: auto;
    }

    body:not(.feed-page) .app-header .navbar-nav .nav-link.tracker-nav-link.is-fresh {
        padding-left: 0.85rem !important;
        box-shadow: inset 3px 0 0 var(--news-accent, #b42318) !important;
    }
}

@keyframes tracker-pulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.45); }
    70% { box-shadow: 0 0 0 0.45rem rgba(217, 45, 32, 0); }
    100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .tracker-nav-dot {
        animation: none;
    }
}

/* Homepage: one line above the Google "preferred source" button, which moves a bit further down. */
.tracker-hero-new {
    display: inline-flex;
    justify-self: center;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
    margin: 0.4rem auto 0;
    color: var(--news-ink, #111827) !important;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.3;
    text-decoration: none;
}

.tracker-hero-block {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    justify-self: center;
    max-width: 100%;
    margin: 0.4rem auto 0;
}

.tracker-hero-block .tracker-hero-new {
    margin: 0;
}

.tracker-hero-block + .index-google-source {
    margin-top: 1.1rem;
}

@media (min-width: 992px) {
    /* Same place in the hero grid as the Google button (order 5); it comes first in the page. */
    .index-hero-copy > .tracker-hero-block {
        grid-column: 1 / -1;
        order: 5;
        margin-top: -0.35rem;
    }

    .index-hero-copy > .tracker-hero-block + .index-google-source {
        margin-top: 0.85rem;
    }
}

/* The newest notice of the last three days, under the line. */
.tracker-hero-recent {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    max-width: min(100%, 44rem);
    color: var(--news-ink, #111827) !important;
    font-size: 0.86rem;
    line-height: 1.35;
    text-decoration: none;
}

.tracker-hero-recent-label {
    flex: 0 0 auto;
    color: var(--news-accent, #b42318);
    font-weight: 800;
}

.tracker-hero-recent strong {
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tracker-hero-recent-cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.3rem;
    color: var(--news-accent, #b42318);
    font-weight: 800;
}

.tracker-hero-recent-cta i {
    font-size: 0.72rem;
    transition: transform 0.15s ease;
}

.tracker-hero-recent:hover strong,
.tracker-hero-recent:focus-visible strong {
    text-decoration: underline;
    text-decoration-color: var(--news-accent, #b42318);
    text-underline-offset: 3px;
}

.tracker-hero-recent:hover .tracker-hero-recent-cta i,
.tracker-hero-recent:focus-visible .tracker-hero-recent-cta i {
    transform: translateX(3px);
}

@media (max-width: 575.98px) {
    .tracker-hero-recent {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .tracker-hero-recent strong {
        white-space: normal;
    }
}

.tracker-hero-new-badge {
    flex: 0 0 auto;
    padding: 0.18rem 0.45rem;
    color: #ffffff;
    background: var(--news-accent, #b42318);
    font-family: "Archivo", "Inter", sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tracker-hero-new-text {
    min-width: 0;
    border-bottom: 2px solid transparent;
}

.tracker-hero-new i {
    flex: 0 0 auto;
    color: var(--news-accent, #b42318);
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

.tracker-hero-new:hover .tracker-hero-new-text,
.tracker-hero-new:focus-visible .tracker-hero-new-text {
    border-bottom-color: var(--news-accent, #b42318);
}

.tracker-hero-new:hover i,
.tracker-hero-new:focus-visible i {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .tracker-hero-new i,
    .tracker-hero-recent-cta i {
        transition: none;
    }
}

/* One more item in the desktop menu: slightly tighter links, so the administrators' menu (with "Upravljanje" and
   "Račun") still fits on one line in the 1180px header. */
@media (min-width: 1200px) {
    .app-header .navbar-nav .nav-link,
    .app-header .navbar-nav .nav-button {
        padding-inline: 0.66rem !important;
    }
}