/* =========================================================
   KBF CASSIOPEIA CUSTOM CSS
   ========================================================= */


/* ===== KBF HEADER ===== */

.container-header {
    background: #ffffff !important;
    background-image: none !important;
}

/* Faculty logo */
.container-header .navbar-brand img {
    width: auto;
    max-height: 96px;
    max-width: 90vw;
}


/* ===== KBF NAVIGATION ===== */

.container-header .container-nav {
    position: relative;
    color: #ffffff;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Dark-blue navigation background */
.container-header .container-nav::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 100vw;
    transform: translateX(-50%);

    background: #122855;
    z-index: 0;
}

/* Keep navigation/search above blue background */
.container-header .container-nav > * {
    position: relative;
    z-index: 1;
}


/* ===== KBF UTILITY TOPBAR ===== */

.container-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;

    background: #f4f5f7;
    padding: 0.4rem max(1rem, calc((100% - 1440px) / 2));
}

/* Utility menu */
.container-topbar .mod-menu {
    order: 1;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    gap: 0.25rem 1.1rem;
    margin: 0;
    padding: 0;
}

.container-topbar .mod-menu > li {
    margin: 0;
}

.container-topbar .mod-menu > li > a:not(.btn) {
    color: #17315f;
    font-size: 0.9rem;
    line-height: 1.5;
    text-decoration: none;
}

.container-topbar .mod-menu > li > a:not(.btn):hover {
    color: #17315f;
    text-decoration: underline;
}

.container-topbar .mod-menu > li > a:not(.btn):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ===== LANGUAGE SWITCHER ===== */

.container-topbar .mod-languages {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
}

.container-topbar .mod-languages ul {
    display: flex;
    align-items: center;

    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.container-topbar .mod-languages li {
    margin: 0;
}


/* ===== KBF BOXED DESKTOP PAGE ===== */

body.site {
    background:
        url('/images/slike/logo/KBF_background_slika_jukic4.jpg')
        center top / cover fixed no-repeat;
}

/* Central boxed site */
body.site .container-header,
body.site .site-grid,
body.site .container-footer {
    width: min(100% - 2rem, 1440px);
    margin-left: auto;
    margin-right: auto;
}

/* White readable content area */
body.site .site-grid {
    background: #ffffff;
}


/* ===== KBF SEARCH - DESKTOP ===== */

.container-search {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
}

.container-search .mod-finder {
    margin: 0;
}

.container-search .mod-finder__search {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.65rem;
}

/* White search field */
.container-search .form-control {
    width: 220px;
    height: 40px;
    min-width: 0;

    padding: 0.45rem 0.8rem;

    background: #ffffff;
    color: #1f2937;

    border: 1px solid #d5dbe5;
    border-radius: 0.3rem;

    box-shadow: none;
}

/* Search button integrated into blue navigation */
.container-search .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    height: 40px;
    padding: 0.35rem 0.25rem;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: #ffffff;
    white-space: nowrap;
    box-shadow: none;
}

.container-search .btn .icon-search,
.container-search .btn .icon-search::before {
    color: #ffffff;
}

.container-search .btn:hover,
.container-search .btn:focus {
    background: transparent;
    color: #ffffff;
    text-decoration: underline;
}

/* Accessible input focus */
.container-search .form-control:focus {
    border-color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: none;
}

/* Accessible search-button focus */
.container-search .btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}


/* =========================================================
   TABLET / COLLAPSED NAVIGATION
   ========================================================= */

@media (max-width: 991.98px) {

    /* Hide secondary utility links */
    .container-topbar > .mod-menu {
        display: none;
    }

    /* White top area, language switcher remains */
    .container-topbar {
        justify-content: flex-end;

        background: #ffffff;
        padding: 0.2rem 1rem;

        gap: 0;
    }

    .container-topbar > .mod-languages {
        margin-left: auto;
    }

    /* Hamburger + search in one row */
    .container-header .container-nav {
        display: flex;
        align-items: center;

        min-height: 52px;
        padding: 0.4rem 0.75rem;
    }

    /* Hamburger */
    .container-header .container-nav .navbar {
        flex: 0 0 auto;

        width: auto;
        min-height: 38px;

        padding: 0;
    }

    /* Compact search on right */
    .container-search {
        position: relative;
        top: -2px;

        flex: 1 1 auto;

        width: auto;
        max-width: 240px;

        margin: 0 0 0 auto;
    }

    .container-search .mod-finder__search {
        display: flex;
        align-items: center;

        width: 100%;
        gap: 0.35rem;
    }

    .container-search .form-control {
        flex: 1 1 0;

        width: auto;
        min-width: 120px;
        height: 36px;

        padding: 0.3rem 0.55rem;

        font-size: 0.9rem;
        border-radius: 0.25rem;
    }

    /* Icon-only search button */
    .container-search .btn {
        flex: 0 0 36px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 36px;
        min-width: 36px;
        height: 36px;

        padding: 0;

        background: transparent;
        border: 0;

        color: #ffffff;
        font-size: 0;
        line-height: 1;
    }

    .container-search .btn .icon-search,
    .container-search .btn .icon-search::before {
        display: inline-block;

        margin: 0;

        color: #ffffff;
        font-size: 1rem;
        line-height: 1;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 767.98px) {

    /* No decorative background image on phones */
    body.site {
        background: #ffffff;
        background-image: none;
    }

    /* Remove desktop boxed gutters */
    body.site .container-header,
    body.site .site-grid,
    body.site .container-footer {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /* Smaller logo */
    .container-header .navbar-brand img {
        max-height: 70px;
        max-width: 90vw;
    }

    /* Clean white header/topbar */
    .container-header,
    .container-topbar {
        background: #ffffff !important;
        background-image: none !important;
    }

    /*
       Compact language strip:
       5 px above flags, 2 px below.
    */
    .container-topbar {
        min-height: 0;
        height: auto;

        margin: 0;
        padding: 5px 0.75rem 2px;

        gap: 0;
        line-height: 0;
    }

    .container-topbar > .mod-languages {
        display: flex;
        align-items: center;

        margin: 0;
        padding: 0;

        line-height: 0;
    }

    .container-topbar .mod-languages__list {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 0.5rem;

        margin: 0;
        padding: 0;

        line-height: 0;
    }

    .container-topbar .mod-languages__list li {
        display: flex;
        align-items: center;

        margin: 0;
        padding: 0;

        line-height: 0;
    }

    .container-topbar .mod-languages__list a {
        display: flex;
        align-items: center;

        margin: 0;
        padding: 0;

        line-height: 0;
    }

    .container-topbar .mod-languages img {
        display: block;

        margin: 0;
        padding: 0;
    }

    /* Small breathing space between flags and faculty logo */
    .container-header > .grid-child:not(.container-nav) {
        margin-top: 0;
        padding-top: 4px;
    }

    .container-header .navbar-brand {
        margin-top: 0;
        padding-top: 0;
    }
}

/* ==========================================================
   Article document download icons
   PDF / Word / Excel
   ========================================================== */

/* Common document icon styling */
.com-content-article a[href$=".pdf" i]::before,
.com-content-article a[href$=".doc" i]::before,
.com-content-article a[href$=".docx" i]::before,
.com-content-article a[href$=".xls" i]::before,
.com-content-article a[href$=".xlsx" i]::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-inline-end: 0.4rem;
    text-decoration: none;
    display: inline-block;
}

/* PDF */
.com-content-article a[href$=".pdf" i]::before {
    content: "\f1c1";
}

/* Microsoft Word */
.com-content-article a[href$=".doc" i]::before,
.com-content-article a[href$=".docx" i]::before {
    content: "\f1c2";
}

/* Microsoft Excel */
.com-content-article a[href$=".xls" i]::before,
.com-content-article a[href$=".xlsx" i]::before {
    content: "\f1c3";
}


/* ==========================================================
   Joomla Article Links - document download panel
   ========================================================== */

.com-content-article__links.content-links {
    background: #eef3f8;
    padding: 0.75rem 1rem;
    margin: 1rem 0 1.5rem;
    border-radius: 0.25rem;
}

.com-content-article__links.content-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.com-content-article__links.content-links li {
    margin: 0.25rem 0;
    line-height: 1.5;
}

.com-content-article__links.content-links a {
    color: #2457a6;
    font-size: inherit;
    font-weight: 600;
    text-decoration: none;
}

.com-content-article__links.content-links a:hover {
    color: #122855;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.com-content-article__links.content-links a:focus-visible {
    color: #122855;
    text-decoration: underline;
    outline: 2px solid #122855;
    outline-offset: 3px;
}


/* ==========================================================
   Main navigation - Level 2 dropdown links
   ========================================================== */

.mod-menu_dropdown-metismenu > .metismenu-item > .mm-collapse > .metismenu-item {
    padding: 0;
}

.mod-menu_dropdown-metismenu > .metismenu-item > .mm-collapse > .metismenu-item > a {
    display: block;
    width: 100%;
    padding: 0.6rem 1rem;
    color: #2457a6;
    text-decoration: none;
    line-height: 1.4;
}

.mod-menu_dropdown-metismenu > .metismenu-item > .mm-collapse > .metismenu-item > a:hover {
    background: #eef3f8;
    color: #122855;
}

.mod-menu_dropdown-metismenu > .metismenu-item > .mm-collapse > .metismenu-item > a:focus-visible {
    background: #eef3f8;
    color: #122855;
    outline: 2px solid #122855;
    outline-offset: -2px;
}

.mod-menu_dropdown-metismenu > .metismenu-item > .mm-collapse > .metismenu-item.current > a,
.mod-menu_dropdown-metismenu > .metismenu-item > .mm-collapse > .metismenu-item.active > a {
    background: #eef3f8;
    color: #122855;
    font-weight: 600;
}


/* ==========================================================
   Left sidebar navigation
   ========================================================== */

.container-sidebar-left .sidebar-left .mod-menu.nav > li > a {
    display: block;
    padding: 0.45rem 0.65rem;
    color: #2457a6;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 0.2rem;
}

.container-sidebar-left .sidebar-left .mod-menu.nav > li > a:hover {
    background: #eef3f8;
    color: #122855;
    text-decoration: none;
}

.container-sidebar-left .sidebar-left .mod-menu.nav > li > a:focus-visible {
    background: #eef3f8;
    color: #122855;
    outline: 2px solid #122855;
    outline-offset: -2px;
}

.container-sidebar-left .sidebar-left .mod-menu.nav > li.current > a,
.container-sidebar-left .sidebar-left .mod-menu.nav > li.active > a {
    background: #eef3f8;
    color: #122855;
    font-weight: 600;
    border-left: 3px solid #122855;
    padding-left: calc(0.65rem - 3px);
}


/* ==========================================================
   Desktop spacing between sidebar and main content
   ========================================================== */

@media (min-width: 992px) {
    .site-grid {
        column-gap: 1.5rem;
    }
}


/* ==========================================================
   Article featured image spacing
   ========================================================== */

@media (min-width: 768px) {
    .com-content-article figure.item-image.left {
        margin-inline-end: 1.25rem;
        margin-bottom: 1rem;
    }
}