/* www.racunarstvo.matf.bg.ac.rs - the department's burgundy and gold, the look of the seminar site
   (computing.matf.bg.ac.rs): a burgundy band with a gold rule, warm paper background, serif
   headings, the menu as pills.
   First the page structure and everything inside the content (headings, lists, tables, the staff
   grid, the master theses list, pictures, logos, slideshows), then the header, menu and footer.
   Content pages are written by hand (Markdown or plain HTML), so plain elements must look right
   without classes; inline styles left in older pages (fixed widths, sky-blue cells) are tamed here.
   Phones first; 62rem: menu with dropdowns and a side column next to the page. */

:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --page: 74rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: .75rem;
  --aside: 16.5rem;
  --bg: #f7f2ec;
  --surface: #fff;
  --line: #eadcd2;
  --shadow: 0 1px 2px rgb(80 30 20 / .05), 0 6px 18px -8px rgb(80 30 20 / .18);
  --text: #2b2224;
  --muted: #6e6062;
  --heading: #7c1620;
  --heading-3: #8d4a1d;
  --link: #9e1d28;
  --link-line: #dcaaa9;
  --accent: #e0a63a;
  --on-accent: #fff;
  --focus: #e0a63a;
  --marker: #c38a2a;
  --tint: #f1e5dd;
  --tint-strong: #ead6ca;
  --chip: #f4e7df;
  --chip-hover: #ecd6ca;
  --chip-text: #7c1620;
  --table-head: #f4e7df;
  --done: #3f7d4f;
  --brand-bg: linear-gradient(120deg, #8e1818 0%, #741522 55%, #561019 100%);
  --on-brand: #fff;
  --on-brand-muted: #f2d3d0;
  --pill: rgb(255 255 255 / .12);
  --pill-hover: rgb(255 255 255 / .24);
  --gold: #e0a63a;
  --on-gold: #2e1a00;
  --menu-bg: #fff;
  --footer-bg: #3b0c11;
  --footer-text: #f0d9d6;
  --footer-head: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand-bg: linear-gradient(120deg, #5e1016 0%, #4a0d14 60%, #33090e 100%);
    --on-brand-muted: #e6c3c0;
    --bg: #191213;
    --surface: #241a1b;
    --line: #3a2b2c;
    --shadow: none;
    --text: #eee3e1;
    --muted: #b5a5a4;
    --heading: #f0b8b4;
    --heading-3: #e2b46e;
    --link: #f39b95;
    --link-line: #8a4a4a;
    --marker: #e2b46e;
    --tint: #2c2021;
    --tint-strong: #3a2a2a;
    --chip: #362425;
    --chip-hover: #46302f;
    --chip-text: #f6c9c4;
    --table-head: #33241f;
    --done: #79b58b;
    --menu-bg: #2a1d1e;
    --footer-bg: #120b0c;
    --footer-text: #c9b3b1;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.65 var(--font);
  overflow-wrap: break-word;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.preskoci { position: absolute; left: .5rem; top: -4rem; z-index: 60; padding: .5rem .9rem; border-radius: .4rem;
  background: var(--surface); color: var(--link); font-weight: 700; box-shadow: var(--shadow); }
.preskoci:focus { top: .5rem; }
.ikona { width: 1.25em; height: 1.25em; flex: none; }
.unutra { max-width: var(--page); margin: 0 auto; padding-inline: var(--gutter); }
/* the footer stays at the bottom of the window on short pages */
.okvir { display: flex; flex-direction: column; min-height: 100vh; }
.telo { flex: 1 0 auto; display: flex; flex-direction: column; }
.glavno { flex: 1 0 auto; width: 100%; }

/* ---------- header: basics (the look is at the end of the file) ---------- */
:where(.zaglavlje) p { margin: 0; }
:where(.zaglavlje) a { text-decoration: none; }
.grb img { display: block; width: 44px; height: auto; }
.ime-katedre a { display: block; }
.ime-nad, .ime-glavno { display: inline; }
.jezici { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.jezici a { display: block; padding: .2rem .5rem; border-radius: 99px; font-size: .82rem; font-weight: 700; }

/* ---------- menu: a list on phones (behind the Menu button), dropdowns on wide screens ---------- */
:where(.meni) ul { list-style: none; margin: 0; padding: 0; }
:where(.meni) a { display: block; text-decoration: none; }
.meni-dugme {
  display: inline-flex; align-items: center; gap: .55rem; margin-left: auto;
  font: 700 .95rem/1 var(--font); cursor: pointer; border-radius: 99px; padding: .55rem .95rem;
  border: 0; background: transparent; color: inherit;
}
.meni-crte, .meni-crte::before, .meni-crte::after {
  display: block; width: 1.1rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s;
}
.meni-crte { position: relative; }
.meni-crte::before, .meni-crte::after { content: ""; position: absolute; left: 0; }
.meni-crte::before { top: -6px; }
.meni-crte::after { top: 6px; }
.meni-otvoren .meni-crte { background: transparent; }
.meni-otvoren .meni-crte::before { transform: translateY(6px) rotate(45deg); }
.meni-otvoren .meni-crte::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 61.99rem) {
  .js .meni { display: none; }
  .js .meni-otvoren .meni { display: block; }
  .celine { padding: .5rem 0 1rem; }
  .celina-naslov { font-weight: 700; padding: .55rem 0 .3rem; }
  .celina-strane a { padding: .4rem 0 .4rem .9rem; }
  .celina.samostalna .celina-naslov { padding-bottom: .55rem; }
}
@media (min-width: 62rem) {
  .meni-dugme { display: none; }
  .celine { display: flex; flex-wrap: wrap; align-items: stretch; }
  .celina { position: relative; }
  .celina-strane {
    position: absolute; top: 100%; left: 0; z-index: 30; width: max-content; min-width: 15rem; max-width: 24rem;
    padding: .45rem; border-radius: var(--radius);
    visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s;
  }
  .celina:nth-last-child(-n+2) .celina-strane { left: auto; right: 0; }
  .celina:hover > .celina-strane, .celina:focus-within > .celina-strane { visibility: visible; opacity: 1; transform: none; }
  .celina-strane a { padding: .45rem .75rem; border-radius: calc(var(--radius) - .3rem); line-height: 1.35; }
}

/* ---------- page: breadcrumb, content and a side column ---------- */
.glavno {
  max-width: var(--page); margin: 0 auto; padding: 1.5rem var(--gutter) 3.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3rem; align-items: start;
}
.putanja { font-size: .85rem; color: var(--muted); margin-bottom: .6rem; }
.putanja a { color: inherit; text-decoration: none; font-weight: 600; }
.putanja a:hover { color: var(--link); text-decoration: underline; }
.putanja span[aria-hidden] { margin: 0 .3rem; opacity: .6; }
.sadrzaj { min-width: 0; }
.bocno { margin-top: 2.5rem; }
@media (min-width: 62rem) {
  .glavno:has(> .bocno) { grid-template-columns: minmax(0, 1fr) var(--aside); }
  .glavno:has(> .bocno) > .putanja { grid-column: 1 / -1; }
  .bocno { margin-top: 0; position: sticky; top: 1.5rem; }
}
.bocno h2 { font: 700 1rem/1.3 var(--font-head); margin: 0 0 .7rem; color: var(--heading); }
.bocno ul { list-style: none; margin: 0; padding: 0; }

/* the pages of the current section */
.u-celini-oznaka { display: block; font: 600 .72rem/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.u-celini h2 a { color: inherit; text-decoration: none; }
.u-celini li a { display: block; padding: .4rem .7rem; border-radius: .5rem; text-decoration: none; line-height: 1.35; font-size: .93rem; color: var(--text); }
.u-celini li a:hover { background: var(--tint); color: var(--link); }
.u-celini li a[aria-current] { background: var(--chip); color: var(--chip-text); font-weight: 700; }

/* home page shortcuts */
.brze-veze ul { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.brze-veze a {
  display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.3;
}
.brze-veze a:hover { border-color: var(--link-line); color: var(--link); }
.brze-veze .ikona { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: .55rem; background: var(--chip); color: var(--chip-text); }
@media (min-width: 62rem) { .bocno.brze-veze ul { grid-template-columns: 1fr; } }

/* a section's own page: its pages as tiles */
.sadrzaj .celina-pregled { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.celina-pregled a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%;
  padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); color: var(--text); font-weight: 600; text-decoration: none; line-height: 1.35;
}
.celina-pregled a:hover { border-color: var(--link-line); color: var(--link); }
.celina-pregled .ikona { color: var(--accent); }

/* ---------- content ---------- */
.sadrzaj > :first-child { margin-top: 0; }
.sadrzaj h1 { font: 700 clamp(1.7rem, 1.3rem + 1.5vw, 2.35rem)/1.15 var(--font-head); color: var(--heading); margin: 0 0 1.1rem; letter-spacing: -.005em; }
.sadrzaj h2 { font: 700 1.38rem/1.25 var(--font-head); color: var(--heading); margin: 2.4rem 0 .9rem; }
.sadrzaj h3 { font: 700 1.12rem/1.3 var(--font); color: var(--heading-3); margin: 2rem 0 .7rem; }
.sadrzaj h4, .sadrzaj h5, .sadrzaj h6 { font: 700 1rem/1.35 var(--font); margin: 1.5rem 0 .5rem; }
.sadrzaj h1 + h2, .sadrzaj h2 + h3 { margin-top: 1rem; }
.sadrzaj p, .sadrzaj ul, .sadrzaj ol, .sadrzaj dl, .sadrzaj pre, .sadrzaj blockquote, .sadrzaj table { margin: 0 0 1rem; }
.sadrzaj ul, .sadrzaj ol { padding-left: 1.35rem; }
.sadrzaj li { margin: .3rem 0; }
.sadrzaj li::marker { color: var(--marker); }
.sadrzaj hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.sadrzaj blockquote { border-left: 4px solid var(--accent); background: var(--tint); padding: .75rem 1rem; border-radius: 0 .5rem .5rem 0; }
.sadrzaj pre { background: var(--tint); padding: .8rem 1rem; border-radius: .5rem; overflow-x: auto; font: .92rem/1.5 var(--font-mono); }
.sadrzaj code { font-family: var(--font-mono); font-size: .92em; }
.sadrzaj pre code { font-size: inherit; }
.sadrzaj a[name]:not([href]) { color: inherit; }
.sadrzaj :target { scroll-margin-top: 1rem; }
.sadrzaj [style*="justify"] { hyphens: auto; }
@media (max-width: 40rem) { .sadrzaj [style*="justify"] { text-align: left !important; } }

/* pictures: one centered picture with its caption; rows of logos */
.sadrzaj .image-full-width { text-align: center; margin: 1.75rem 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.sadrzaj .image-full-width img { display: block; margin: 0 auto .55rem; border-radius: .5rem; }
.sadrzaj .image-full-width img + br { display: none; }
.sadrzaj .image-columns-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .9rem 1rem; margin: 1.25rem 0 1.75rem; }
.sadrzaj .image-columns-inner > br { display: none; }
.sadrzaj .image-columns-inner img { display: block; max-width: 100% !important; height: auto !important; border-radius: .35rem; }
.sadrzaj .image-columns-3 .image-columns-inner img { max-height: 4.5rem; width: auto !important; }
.sadrzaj img[style*="border"] { border-color: var(--line) !important; }

/* award winners (the page brings its own .ib rules; these keep them in a centered wrapping row) */
.sadrzaj .ib_cont { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin: .5rem 0 2rem; }
.sadrzaj .ib_cont .ib { display: block; width: 9.5rem; margin: 0; font-size: .9rem; color: var(--text); }
.sadrzaj .ib_cont .ib img { width: 100%; height: 11rem; object-fit: cover; border-radius: .6rem; box-shadow: var(--shadow); }

/* slideshow: the pictures fade into each other (sajt.js); without scripts only the first one */
.sadrzaj .slideshow {
  position: relative; width: 100%; max-width: 34rem; height: auto; aspect-ratio: 532 / 352; margin: 1rem auto 2rem;
  overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--tint);
}
.sadrzaj .slideshow > div { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.sadrzaj .slideshow > div.vidljiv, html:not(.js) .sadrzaj .slideshow > div:first-child { opacity: 1; }
.sadrzaj .slideshow img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

/* big photos open over the page (sajt.js): a magnifier on the photo, then a dark full-window viewer */
.uvecaj {
  position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto .55rem; padding: 0;
  border: 0; border-radius: .5rem; background: none; cursor: zoom-in;
}
.sadrzaj .uvecaj img { display: block; margin: 0; }
.sadrzaj .image-full-width .uvecaj + br { display: none; }
.uvecaj::after {
  content: ""; position: absolute; right: .55rem; bottom: .55rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .6); background: rgb(30 10 14 / .68) center / 1.2rem no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
}
.uvecaj:hover::after, .uvecaj:focus-visible::after { background-color: rgb(124 22 32 / .92); }
@media (max-width: 40rem) { .uvecaj::after { right: .4rem; bottom: .4rem; width: 1.8rem; height: 1.8rem; background-size: 1rem; } }
html.pregled-otvoren { overflow: hidden; }
.pregled {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #0e090a; color: #fff; overflow: hidden;
}
.pregled::backdrop { background: transparent; }
.pregled-pozornica { position: absolute; inset: 0; display: flex; overflow: auto; overscroll-behavior: contain; padding: 3.6rem 1rem 1rem; }
.pregled-pozornica img { margin: auto; max-width: 100%; max-height: 100%; border-radius: .25rem; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.pregled.uvecano .pregled-pozornica { padding: 0; }
.pregled.uvecano .pregled-pozornica img { max-width: none; max-height: none; height: auto; border-radius: 0; cursor: grab; }
.pregled-dugmad { position: absolute; top: .6rem; right: .6rem; left: .6rem; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; pointer-events: none; }
.pregled-dugmad > * {
  pointer-events: auto; padding: .6rem .95rem; border: 0; border-radius: 99px; cursor: pointer;
  font: 600 .9rem/1 var(--font); color: #fff; text-decoration: none; background: rgb(40 28 30 / .82);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .18);
}
.pregled-dugmad > *:hover { background: rgb(124 22 32 / .95); }
.pregled-dugmad .pregled-zatvori { background: var(--gold); color: var(--on-gold); box-shadow: none; }

/* tables: lines and padding for plain tables; the old sky-blue and grey cells take the theme's tints */
.sadrzaj table { border-collapse: collapse; max-width: 100%; background: var(--surface); font-variant-numeric: tabular-nums; }
.sadrzaj th, .sadrzaj td { border: 1px solid var(--line); padding: .45rem .65rem; vertical-align: top; text-align: left; }
.sadrzaj th { background: var(--table-head); font-weight: 700; }
.sadrzaj table[border], .sadrzaj table[style*="border"] { width: 100% !important; border: 1px solid var(--line) !important; }
.sadrzaj td[style*="#87ceeb"], .sadrzaj td[style*="#87CEEB"] { background: var(--table-head) !important; color: var(--heading); }
.sadrzaj tr[style*="#d3d3d3"], .sadrzaj tr[style*="#D3D3D3"] { background: var(--tint) !important; }
@media (max-width: 40rem) {
  .sadrzaj table { display: block; overflow-x: auto; }
  .sadrzaj td[style*="width"], .sadrzaj th[style*="width"] { width: auto !important; }
}

/* staff: photo cards in a grid */
.sadrzaj ul.personnel {
  list-style: none; padding: 0; margin: 0 0 2rem;
  display: grid; gap: 1.25rem .9rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.sadrzaj ul.personnel li { margin: 0; text-align: center; }
.sadrzaj ul.personnel br { display: none; }
.sadrzaj ul.personnel a { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.sadrzaj ul.personnel img {
  width: 100%; max-width: 8.5rem; aspect-ratio: 3 / 4; height: auto; object-fit: cover;
  border-radius: .7rem; background: var(--tint); box-shadow: var(--shadow); transition: transform .15s;
}
.sadrzaj ul.personnel a:hover { color: var(--link); }
.sadrzaj ul.personnel a:hover img { transform: translateY(-2px); }

/* master theses (one table each; <p class="odbranjeno"> before a defended one) */
.sadrzaj table.osnovno_master {
  display: block; width: 100%; margin: 0 0 .9rem; padding: .85rem 1rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: .6rem;
  box-shadow: var(--shadow);
}
.sadrzaj p.odbranjeno + table.osnovno_master { border-left-color: var(--done); }
.sadrzaj table.osnovno_master tbody, .sadrzaj table.osnovno_master tr, .sadrzaj table.osnovno_master td { display: block; }
.sadrzaj table.osnovno_master td { border: 0; padding: 0; }
.sadrzaj table.osnovno_master tr + tr { margin-top: .25rem; }
.sadrzaj tr.kandidat { font-size: .9rem; color: var(--muted); }
.sadrzaj tr.kandidat .ime { color: var(--text); font-weight: 700; }
.sadrzaj tr.tema { font: 700 1.04rem/1.35 var(--font-head); color: var(--heading); margin: .15rem 0 .2rem; }
.sadrzaj tr .naziv { color: var(--muted); font-size: .85rem; }
.sadrzaj tr.komisija { font-size: .92rem; }
.sadrzaj tr.prijava, .sadrzaj tr.izvestaj, .sadrzaj tr.rad { font-size: .86rem; color: var(--muted); }
.sadrzaj tr.prijava td, .sadrzaj tr.izvestaj td, .sadrzaj tr.rad td { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.sadrzaj tr.prijava a, .sadrzaj tr.izvestaj a, .sadrzaj tr.rad a {
  display: inline-block; min-width: 5.5rem; margin-right: .25rem; padding: .12rem .6rem; border-radius: 99px;
  background: var(--chip); color: var(--chip-text); font-weight: 700; text-decoration: none; text-align: center;
}
.sadrzaj tr.prijava a:hover, .sadrzaj tr.izvestaj a:hover, .sadrzaj tr.rad a:hover { background: var(--chip-hover); }
.sadrzaj tr.prijava .naziv, .sadrzaj tr.izvestaj .naziv, .sadrzaj tr.rad .naziv { margin-left: .35rem; }
.sadrzaj tr.prijava a + .naziv, .sadrzaj tr.izvestaj a + .naziv, .sadrzaj tr.rad a + .naziv { margin-left: 0; }

/* master topics: a title row, details, and a hidden description opened with "Opis" (sajt.js) */
.sadrzaj table.osnovno_master .naslov { font-weight: 700; color: var(--heading); }
.sadrzaj table.osnovno_master .hidden { display: none; margin-top: .5rem; padding: .75rem; background: var(--tint); border-radius: .4rem; }
.sadrzaj table.osnovno_master .hidden.prikazan { display: block; }

/* old news list (not in the menu now, kept working) */
.sadrzaj .news_date { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .2rem; }
.sadrzaj .news_date .caption { font-weight: 700; }
.sadrzaj .news_date .date { margin-left: auto; color: var(--muted); font-size: .88rem; }

/* ---------- footer: site map in columns, then address and links ---------- */
.podnozje { background: var(--footer-bg, #2a2224); color: var(--footer-text, #eee); font-size: .9rem; line-height: 1.5; }
.podnozje .unutra { padding-block: 2.25rem 1.4rem; }
.podnozje a { color: inherit; }
.mapa { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 40%), 1fr)); }
.mapa h2 { font: 700 .98rem/1.3 var(--font-head); margin: 0 0 .55rem; }
.mapa h2 a { color: var(--footer-head, #fff); text-decoration: none; }
.mapa ul { list-style: none; margin: 0; padding: 0; }
.mapa li a { display: block; padding: .14rem 0; text-decoration: none; opacity: .88; }
.mapa li a:hover { opacity: 1; text-decoration: underline; }
.podnozje-dno {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; justify-content: space-between; align-items: baseline;
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--footer-line, rgb(255 255 255 / .14));
}
.podnozje-dno p { margin: 0; }
.adresa b { font-weight: 700; color: var(--footer-head, #fff); }
.adresa span::before { content: " · "; }
.drustvene { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.prava { opacity: .75; font-size: .85rem; width: 100%; }


/* ======================== header, menu and page details ======================== */

/* ---------- header: logo, faculty line and name, languages; the menu below the name ---------- */
.zaglavlje {
  display: grid; align-items: center; column-gap: .8rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "grb ustanova univerzitet" "grb naziv dugme" "meni meni meni" "jezici jezici jezici";
  padding: .7rem max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));
  background: var(--brand-bg); color: var(--on-brand); border-bottom: 4px solid var(--gold);
}
.z-gore, .z-sredina, .zaglavlje .unutra { display: contents; }
.grb { grid-area: grb; }
.grb img { width: 54px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .3)); }
.ustanova { grid-area: ustanova; align-self: end; font-size: .76rem; letter-spacing: .02em; color: var(--on-brand-muted); }
.ustanova a { color: inherit; font-weight: 600; }
.ustanova a:hover { text-decoration: underline; }
.ime-katedre { grid-area: naziv; align-self: start; font: 700 1.06rem/1.25 var(--font-head); }
.ime-katedre a { color: var(--on-brand); }
.univerzitet { grid-area: univerzitet; justify-self: end; display: flex; align-items: center; gap: .7rem; color: var(--on-brand); }
.univerzitet img { display: block; width: auto; height: 2.4rem; }
.univerzitet span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.univerzitet:hover span { color: #fff; text-decoration: underline; }
.jezici { grid-area: jezici; justify-self: end; align-self: end; }
.jezici a { color: var(--on-brand-muted); padding: .12rem .45rem; font-size: .75rem; }
.jezici a:hover { background: var(--pill); color: #fff; }
.jezici a[aria-current] { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); color: #fff; }
.meni-dugme { grid-area: dugme; background: var(--pill); color: #fff; padding: .5rem .85rem; }
.meni-dugme:hover { background: var(--pill-hover); }
.meni { grid-area: meni; }

/* phones: the open menu is a list inside the band */
@media (max-width: 61.99rem) {
  .univerzitet { align-self: start; }
  .univerzitet span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .jezici { justify-self: start; padding: .1rem 0 .6rem; }
  .js body:not(.meni-otvoren) .jezici { display: none; }
  .meni { margin-top: .7rem; border-top: 1px solid rgb(255 255 255 / .16); }
  .celina-naslov { color: #fff; }
  .celina-naslov[aria-current] { color: var(--gold); }
  .celina-strane a { color: var(--on-brand-muted); border-left: 2px solid rgb(255 255 255 / .16); }
  .celina-strane a[aria-current] { color: #fff; border-left-color: var(--gold); font-weight: 700; }
}

/* wide screens: name and menu next to a bigger logo, sections as pills with dropdowns */
@media (min-width: 62rem) {
  .zaglavlje {
    grid-template-areas: "grb ustanova univerzitet" "grb naziv univerzitet" "grb meni jezici";
    column-gap: 1.25rem; padding-block: 1rem .95rem;
  }
  .grb img { width: 96px; }
  .univerzitet img { height: 4rem; }
  .univerzitet span { font-size: .76rem; }
  .jezici { align-self: center; margin-top: .45rem; }
  .ime-katedre { font-size: 1.62rem; margin: .05rem 0 .15rem; }
  .ustanova { font-size: .82rem; }
  .celine { gap: .4rem; margin-top: .45rem; }
  .celina-naslov {
    display: flex; align-items: center; gap: .4rem; padding: .34rem .85rem; border-radius: 99px;
    background: var(--pill); color: #fff; font-weight: 600; font-size: .92rem;
  }
  .celina:not(.samostalna) > .celina-naslov::after {
    content: ""; flex: none; width: .38em; height: .38em; border: solid currentColor; border-width: 0 .13em .13em 0;
    transform: translateY(-.15em) rotate(45deg); opacity: .8;
  }
  .celina:hover > .celina-naslov, .celina:focus-within > .celina-naslov { background: var(--pill-hover); }
  .celina.tekuca > .celina-naslov { background: var(--gold); color: var(--on-gold); }
  .celina-strane {
    margin-top: .5rem; background: var(--menu-bg); border: 1px solid var(--line);
    box-shadow: 0 14px 34px -10px rgb(40 0 0 / .4);
  }
  .celina-strane::before { content: ""; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem; }
  .celina-strane a { color: var(--text); font-size: .93rem; }
  .celina-strane a:hover { background: var(--tint); color: var(--link); }
  .celina-strane a[aria-current] { background: var(--chip); color: var(--chip-text); font-weight: 700; }
}

/* ---------- page ---------- */
.glavno { padding-top: 1.75rem; }
.putanja { color: var(--heading-3); }
.sadrzaj h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.45rem); }
.sadrzaj h2 { position: relative; padding-bottom: .45rem; }
.sadrzaj h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.4rem; height: 3px; border-radius: 2px; background: var(--gold); }
.sadrzaj h3 { font-family: var(--font); }
.bocno h2 { font-size: 1.12rem; }
.u-celini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem .7rem .8rem; box-shadow: var(--shadow); }
.u-celini h2 { padding: 0 .7rem; }
.brze-veze h2 { position: relative; padding-bottom: .45rem; }
.brze-veze h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2.4rem; height: 3px; border-radius: 2px; background: var(--gold); }
.celina-pregled .ikona { color: var(--gold); }
.mapa h2 { font-size: 1.05rem; }

/* ---------- print ---------- */
@media print {
  .zaglavlje, .bocno, .podnozje, .putanja, .uvecaj::after { display: none !important; }
  body { background: #fff; color: #000; }
  .glavno { display: block; padding: 0; }
  .sadrzaj table.osnovno_master { box-shadow: none; break-inside: avoid; }
}