/* -------- Reset / base -------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    color: #000;
    background: #fff;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}

.u-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -------- Tokens / variables -------- */
:root {
    --Black: #000;
    --White: #fff;
    --Dark-Blue: #003849;
    --Blue: #2c6dee;
    --Light-Blue: #65b7d5;
    --Yellow: #dbb21f;
    --Medium-Grey: #e9e9e9;
    --Light-Grey: #f2f2f2;

    --radius-8: 8px;
    --radius-10: 10px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.12);

    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;

    --container-max: 100rem; /* 1600px */
}

/* -------- Typography -------- */
.h1,
h1 {
    font-family: "Michroma", Inter, sans-serif;
    font-size: 46px;
    line-height: 1.2;
    letter-spacing: 0;
}
.h2,
h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.25;
}
.h3,
h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
}
.lead {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.6;
}
.small {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* -------- Layout / containers -------- */
.l-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
}
.l-section {
    padding-block: var(--space-48);
}
.l-constrain--narrow {
    max-width: 44rem;
    margin-inline: auto;
}
.l-constrain--full {
    max-width: none;
    padding-inline: 0;
}

/* Grid helper (desktop default: 12 columns / 24px gutters) — optional utility */
.grid {
    display: grid;
    gap: 24px;
}
@media (min-width: 992px) {
    .grid--12 {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* -------- Buttons -------- */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        background-color 0.12s ease,
        border-color 0.12s ease;
}
.c-btn--primary {
    background: var(--Yellow);
    color: var(--White);
}
.c-btn--primary:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.c-btn--outline {
    background: var(--White);
    color: var(--Blue);
    border-color: var(--Blue);
}
.c-btn--outline:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* -------- Inputs (generic + search variant) -------- */
.c-input {
    height: 48px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--Medium-Grey);
    background: var(--White);
    font: inherit;
}
.c-input:focus {
    outline: 2px solid var(--Blue);
    outline-offset: 2px;
}
.c-input--search {
    width: 100%;
}
/* Util širine za single news */
.l-constrain--wide {
    max-width: 90rem;
    margin-inline: auto;
}
.l-constrain--medium {
    /* max-width: 59.5rem; */
    max-width: 90rem;
    margin-inline: auto;
}
/* Core koristi .visually-hidden; uskladi s našom util klasom */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Breadcrumbs */
.breadcrumb-wrap nav {
    font-size: 0.875rem;
}
.breadcrumb-wrap ol {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none; /* ukloni numeriranje */
    padding: 0;
    margin: 0;
}
.breadcrumb-wrap li {
    display: inline-flex;
    align-items: center;
    color: var(--Black);
}
.breadcrumb-wrap li + li::before {
    content: "›";
    opacity: 0.4;
    margin: 0 0.25rem;
}
.breadcrumb-wrap a {
    color: var(--Black);
    text-decoration: none;
}
.breadcrumb-wrap a:hover {
    text-decoration: underline;
}

/* Kućica ispred prvog linka */
.breadcrumb-wrap li:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.breadcrumb-wrap li:first-child a::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background: url("/themes/custom/cicek_theme/icons/house.svg") center /
        contain no-repeat;
}

/* Core util koji nedostaje: sakrij vizualno, ostavi za čitače ekrana */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}