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


/* --------------------------------------------------------------------------
   Nav dropdown backdrop — .navbar__menu::before is a full-width fixed band that
   fades in on hover. It's decorative, but even at opacity:0 it still captured
   clicks over the tabs below the header. Make it never intercept pointer events.
   -------------------------------------------------------------------------- */
.navbar__menu::before {
    pointer-events: none;
}


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

.breadcrumb__nav {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.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;
    }
}

/* Inner-page header banner (_HeaderImage) — fixed 35vh on every viewport.
   Uses the 1920x1080 "heading" crop; .hero__bg img is object-fit:cover /
   object-position:center (main.css), so the image stays centered and cover-cropped.
   Both declarations override main.css's .hero min-heights (11.75rem base,
   37.5rem @>=36em) via the higher-specificity :not() selector. */
.hero:not(.hero--hp) {
    height: 45vh;
    min-height: 45vh;
    margin-bottom: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;
}


/* --------------------------------------------------------------------------
   External link box
   -------------------------------------------------------------------------- */

div.ekterni_link {
    list-style: none;
    position: relative;
    display: block;
    width: 100%;
    padding: 8px 10px 8px 50px;
    margin-bottom: 16px;
    background: #ffffff;
    color: #000;
}

div.ekterni_link:before {
    content: "";
    display: block;
    width: 32px;
    height: 36px;
    position: absolute;
    top: calc(50% - 18px);
    left: 0px;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -ms-background-size: 100%;
    background-size: 100%;
    background-color: #0057a8;
    -webkit-mask: url(../icons/external.svg) no-repeat center;
    mask: url(../icons/external.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


/* --------------------------------------------------------------------------
   Usluge landing — on-page service sections (hero-box scroll targets)
   -------------------------------------------------------------------------- */

/* Offset the fixed header (~9.375rem desktop / 8rem mobile) so an anchored
   section heading isn't hidden underneath it when a hero box scrolls to it. */
.usluga-section {
    scroll-margin-top: 10.5rem;
}


/* --------------------------------------------------------------------------
   Footer — 6-column layout
   On wide screens (>=98.75em) main.css lays the columns out as a single flex
   row. With a 6th column we instead force a 3-track grid so the footer is
   always 2 rows of 3. Narrower screens fall back to main.css's auto-fill grid,
   which breaks into progressively more rows.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 98.75em) {
    .footer__row {
        display: grid;
        gap: var(--spacing-gutter-lg) var(--spacing-gutter-sm);
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-image {
    max-width: 100%;
    margin-bottom: 1rem;
}


/* --------------------------------------------------------------------------
   Accordion child rendered as a plain link (displayAsLink)
   A child page flagged "Prikaži kao link" reuses the .accordion-button layout
   but is an <a> that navigates instead of expanding. Reset the default link
   look and rotate the chevron to point right ("go to page").
   -------------------------------------------------------------------------- */

.accordion-link {
    text-decoration: none;
    color: inherit;
}

.accordion-link__chevron {
    transform: rotate(-90deg);
}


/* --------------------------------------------------------------------------
   Google Map (contact page) — full-width Google Maps iframe embed (_map.cshtml)
   -------------------------------------------------------------------------- */
.map-container iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}


/* --------------------------------------------------------------------------
   Tabs (TextPage children flagged displayAsTab / UslugeLanding service sections)
   Accessible tab strip + panels; behaviour lives in /scripts/tabs-config.js.
   The strip scrolls horizontally when the tabs overflow on narrow screens.
   -------------------------------------------------------------------------- */
.tabs {
    margin-block: 1rem;           /* plain value — the --spacing-* tokens are large clamps */
    scroll-margin-top: 10.5rem;   /* clear the fixed header when a hero box jumps here */
}

/* UslugeLanding parent switch — gap between the top (parent) and bottom (child) tab strips. */
.usluge-switch {
    margin-bottom: 2.5rem;
}

/* Pills that wrap to multiple rows — keeps long labels fully visible (no scroll). */
.tabs__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.tabs__tab {
    border: 1px solid var(--clr-neutral-100, #e6e7e8);
    border-radius: 2rem;
    background: var(--clr-white, #fff);
    padding: .6rem 1.25rem;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--clr-dark-100, #231f20);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tabs__tab:hover,
.tabs__tab:focus-visible {
    border-color: var(--clr-secondary-100, #00529c);
    color: var(--clr-secondary-100, #00529c);
}

.tabs__tab[aria-selected="true"] {
    background: var(--clr-primary-100, #110252);
    border-color: var(--clr-primary-100, #110252);
    color: var(--clr-white, #fff);
}

.tabs__panel {
    padding-top: var(--spacing-sm, 1rem);
}

.tabs__panel[hidden] {
    display: none;
}


/* --------------------------------------------------------------------------
   Rich text — hide the empty <p> the Umbraco 17 RTE leaves behind by default.
   NOTE: :empty only matches a truly empty <p></p>. A paragraph holding just
   &nbsp; or <br> won't match — say so if the editor emits those and I'll extend it.
   -------------------------------------------------------------------------- */
p:empty {
    display: none;
}


/* --------------------------------------------------------------------------
   Rich-text info cards (.details)
   CMS-authored <div class="details"> blocks (contacts, board members, etc.).
   The old site styled these as flat gray boxes; this restyles them as cards
   to match the homepage card language (.hp-card). No HTML change required —
   the rule keys off the existing .details class. Drop the border-left line
   for a look identical to the homepage cards.
   -------------------------------------------------------------------------- */

.details {
    background: var(--clr-white, #fff);
    border: 1px solid var(--clr-neutral-100, #e6e7e8);
    border-left: 3px solid var(--clr-secondary-100, #00529c);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-block: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    line-height: 1.6;
}

.details a {
    color: var(--clr-secondary-100, #00529c);
}

/* Layout of the .block rows that wrap the cards (uprava page).
   .block-top    → one block per row (board, director); card centered + width-capped.
   .block-bottom → two blocks per row (sectors); stacks on mobile.
   Scoped under the .content-tree wrapper so nothing else on the site is affected;
   the .block elements are its direct children (flex items). */

.content-tree {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 2rem);
    align-items: start;
}

.content-tree .block {
    text-align: center;
}

/* Heading lines are direct <span> children, sitting above the card(s). */
.content-tree .block > span {
    font-weight: 700;
    color: var(--clr-dark-100, #231f20);
}

.content-tree .block-top {
    flex: 1 1 100%;
}

.content-tree .block-bottom {
    flex: 1 1 calc(50% - var(--spacing-md, 2rem));
}

/* Card text stays left-aligned; top cards are centered and width-capped. */
.content-tree .block .details {
    text-align: left;
}

.content-tree .block-top .details {
    max-width: 34rem;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .content-tree .block-bottom {
        flex: 1 1 100%;
    }
}


.main__title{
    margin-bottom:2rem;
}

/*css za chatbota*/
df-messenger {
    z-index: 999;
    position: fixed;
    --df-messenger-font-family: Google Sans;
    --df-messenger-chat-background: #f3f6fc;
    --df-messenger-message-user-background: #fff;
    --df-messenger-message-bot-background: #1a3d8e;
    --df-messenger-message-user-font-color: #1a3d8e;
    --df-messenger-message-bot-font-color: #FFF;
    bottom: 16px;
    right: 16px;
}
df-messenger-chat {
    --df-messenger-chat-placeholder-text: "Postavite pitanje"
}
@media screen and (max-width: 600px) {
    df-messenger {
        --df-messenger-chat-bubble-close-icon-size: 32px !important;
        --df-messenger-chat-bubble-icon-size: 32px !important;
        --df-messenger-chat-bubble-size: 54px !important;
    }
}