@import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,600;7..72,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ==========================================================================
   Библиотека „Мостови" — дизајн систем
   Мастило (ink) корици горе/долу · хартиени страници меѓу нив ·
   бакарен мост-лак како потпис
   ========================================================================== */
:root {
  --ink: #26333B;
  --ink-2: #1B242A;
  --paper: #FAF7F1;
  --card: #FFFFFF;
  --copper: #96603F;
  --copper-soft: #A27B5C;
  --gold: #C9A227;
  --text: #242C31;
  --muted: #5F6B73;
  --line: #E7DFD2;
  --shadow: 0 1px 2px rgba(38, 51, 59, .08), 0 6px 18px rgba(38, 51, 59, .07);
  --shadow-lift: 0 2px 4px rgba(38, 51, 59, .1), 0 14px 30px rgba(38, 51, 59, .14);
  --arch-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Cpath d='M6 34 V24 Q60 -12 114 24 V34' fill='none' stroke='%23C9A227' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --arch-copper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Cpath d='M6 34 V24 Q60 -12 114 24 V34' fill='none' stroke='%2396603F' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

html, body { overflow-x: clip; } /* 100vw hero + вертикален scrollbar инаку прави хоризонтален */
body {
  background: var(--paper);
  color: var(--text);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
h1, h2, h3, h4, .site-title, .resource-name { font-family: 'Literata', Georgia, serif; }
a { color: var(--copper); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* --- Header: горната „корица" ------------------------------------------- */
body header {
  background: var(--ink) !important;
  border-bottom: 3px solid var(--gold);
}
body header h1 { margin: 0; }
body header .site-title, body header .site-title:hover {
  color: var(--paper);
  background: none;
  font-family: 'Literata', Georgia, serif;
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
}
body header .site-title::before {
  content: "";
  width: 38px; height: 13px;
  background: var(--arch-gold) no-repeat center / contain;
  align-self: center;
  flex: none;
}
/* Хоризонтално мени на десктоп (темата крие сè зад хамбургер) */
@media screen and (min-width: 901px) {
  #top-nav > ul.navigation {
    display: flex !important;
    position: static !important;
    height: auto !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1.6rem;
    flex-direction: row !important;
  }
  #top-nav > ul.navigation > li { width: auto !important; padding: 0 !important; font-family: 'Source Sans 3', sans-serif !important; }
  #top-nav .menu-toggle { display: none !important; }
  /* менито не се стиска ниту крши — насловот нека се собере наместо тоа */
  #top-nav { flex-shrink: 0; }
  #top-nav > ul.navigation > li > a { white-space: nowrap; }
  body header h1 { min-width: 0; }
  body header .site-title { font-size: clamp(1.05rem, 1.8vw, 1.5rem); }
}
@media screen and (min-width: 901px) and (max-width: 1180px) {
  #top-nav > ul.navigation { gap: .9rem; }
}
#top-nav > ul.navigation > li > a { color: #CDC5B4 !important; background: none; font-weight: 600; font-size: .98rem; }
#top-nav > ul.navigation > li > a:hover { color: var(--paper) !important; }
#top-nav > ul.navigation > li.active > a { color: var(--paper) !important; box-shadow: inset 0 -3px 0 var(--gold); padding-bottom: 4px; }

/* --- Hero ----------------------------------------------------------------- */
.mostovi-hero {
  width: 100vw;
  margin: 0 calc(50% - 50vw) 0;
  background:
    linear-gradient(160deg, rgba(27, 36, 42, .975) 30%, rgba(38, 51, 59, .94)),
    url('/files/large/973e94b68b60b46a37988ab0f517566ec895af62.jpg') center 30% / cover no-repeat var(--ink);
  color: var(--paper);
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) 1.5rem clamp(2.6rem, 7vw, 4.6rem);
}
.hero-eyebrow {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.hero-title {
  font-family: 'Literata', Georgia, serif;
  font-size: clamp(1.9rem, 4.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 auto .9rem;
  max-width: 21ch;
}
.hero-title::after {
  content: "";
  display: block;
  width: 92px; height: 28px;
  margin: 1.2rem auto 0;
  background: var(--arch-gold) no-repeat center / contain;
  opacity: .9;
}
.hero-sub {
  color: #C4BFB2;
  max-width: 52ch;
  margin: 0 auto 2rem;
  font-size: 1.06rem;
}
.hero-search {
  display: flex;
  align-items: stretch;
  max-width: 560px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
/* height/margin !important: темата им дава height:36px и margin:24px на
   input/submit глобално — тоа го „кршеше" хероj-пребарувањето */
.hero-search input[type="search"] {
  flex: 1;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0;
  padding: 1rem 1.2rem !important;
  font-size: 1.05rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--text);
}
.hero-search button {
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: var(--copper) !important;
  color: #fff !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2 !important;
  padding: 0 1.6rem !important;
  cursor: pointer;
  transition: background .15s ease;
}
.hero-search button:hover { background: #7E4E32; }
.hero-note { margin: 1.6rem 0 0; font-size: .82rem; color: #8D979C; font-style: italic; }

/* --- Стат-лента ------------------------------------------------------------ */
.mostovi-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 6vw, 5rem);
  padding: 2rem 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.4rem;
  text-align: center;
}
.mostovi-stats b {
  display: block;
  font-family: 'Literata', Georgia, serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--copper);
  line-height: 1.1;
}
.mostovi-stats span {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Наслови на секции ------------------------------------------------------ */
#content .preview-block h2, .mostovi-section-title {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 2.6rem 0 1.4rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ink);
}

/* --- Мрежа од корици (каталог + прегледи) -----------------------------------
   Темата има фиксни ширини (width:calc(25%-24px)), height:48px за слики и
   inline accent стил — оттука #content префикс + !important на геометријата. */
#content ul.resource-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  width: 100%;
}
#content ul.resource-list li.resource {
  display: block;
  width: auto !important;
  margin: 0 !important;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
#content ul.resource-list li.resource:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
#content ul.resource-list .resource-link {
  display: block !important;
  color: inherit;
  background: none;
  text-decoration: none;
}
#content ul.resource-list .resource-link img {
  width: 100% !important;
  height: auto !important;
  max-width: none;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin: 0 !important;
  background: #EFE9DD;
  border-bottom: 1px solid var(--line);
}
#content ul.resource-list .resource-name {
  display: block;
  padding: .85rem .95rem .15rem;
  font-family: 'Literata', Georgia, serif;
  font-size: 1.02rem !important;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  background: none !important;
}
#content ul.resource-list .resource-link:hover .resource-name { color: var(--copper); }
#content ul.resource-list .description {
  padding: .25rem .95rem 1rem;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* глобалниот жолт highlight на линкови во текст → бакарен underline */
#content p a, #content span a { background: none !important; color: var(--copper); text-decoration: underline; }
/* прев/некст лента меѓу site pages — шум за демо */
.site-page-pagination { display: none !important; }

/* Збирки: item-set картички — широки, 3 колони */
#content .preview-block ul.resource-list:has(li.item-set) {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
#content .preview-block ul.resource-list li.item-set img { aspect-ratio: 16 / 10 !important; }

/* „Прелистај" линк по прегледите */
.preview-block > a:last-child {
  display: inline-block;
  margin: 1.4rem 0 0;
  padding: .6rem 1.3rem;
  border: 2px solid var(--copper);
  border-radius: 6px;
  font-weight: 700;
  background: none;
  color: var(--copper);
  transition: background .15s ease, color .15s ease;
}
.preview-block > a:last-child:hover { background: var(--copper); color: #fff; }

/* --- Browse контроли / пагинација ------------------------------------------- */
.browse-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
nav.pagination { background: none; font-family: 'Source Sans 3', sans-serif !important; }
#content .pagination a.button, .pagination-buttons a, .pagination-buttons span {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
  color: var(--copper) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700;
  padding: .45rem .95rem;
}
#content .pagination a.button:hover, .pagination-buttons a:hover { background: var(--copper) !important; color: #fff !important; }
form.sorting select { border: 1px solid var(--line); border-radius: 6px; padding: .35rem .5rem; background: var(--card); }
form.sorting button, #content .advanced-search {
  background: none !important;
  border: 2px solid var(--copper) !important;
  color: var(--copper) !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 700;
  border-radius: 6px;
  line-height: 1.4 !important;
  height: auto !important;
  padding: .35rem .9rem !important;
}
form.sorting button:hover, #content .advanced-search:hover { background: var(--copper) !important; color: #fff !important; }
/* наслови: Literata насекаде (темата турка Archivo Black) */
#content h1, #content h2, #content h3, #content h4 { font-family: 'Literata', Georgia, serif !important; }

/* --- Запис (item show) -------------------------------------------------------- */
body.show #content h1 { font-size: 1.9rem; line-height: 1.25; }
.property { border-bottom: 1px solid var(--line); }
.media-embed object, .media-embed iframe, .pdf-embed object, object[type="application/pdf"] {
  width: 100%;
  min-height: 75vh;
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* --- Footer: задната „корица" --------------------------------------------------- */
footer {
  background: var(--ink-2);
  color: #AEB7BC;
  margin-top: 4rem;
  padding: 2.6rem 1.5rem 2.2rem;
  font-size: .92rem;
}
footer::before {
  content: "";
  display: block;
  width: 76px; height: 23px;
  margin: 0 auto 1.4rem;
  background: var(--arch-copper) no-repeat center / contain;
}
footer a { color: #D8CFC0; }
footer a:hover { color: #fff; }
.mostovi-footer { text-align: center; max-width: 700px; margin: 0 auto; }
.mostovi-footer .f-name { font-family: 'Literata', Georgia, serif; font-size: 1.1rem; color: var(--paper); margin-bottom: .4rem; }
.mostovi-footer .f-links { margin: .6rem 0 1rem; }
.mostovi-footer .f-links a { margin: 0 .7rem; font-weight: 600; }
.mostovi-footer .f-fine { font-size: .8rem; color: #78838A; }

/* --- Пристапност / движење ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  ul.resource-list li.resource, .hero-search button, .preview-block > a:last-child { transition: none; }
  ul.resource-list li.resource:hover { transform: none; }
}
@media (max-width: 640px) {
  ul.resource-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
  .mostovi-stats { gap: 1.8rem; }
  .hero-search { flex-direction: row; }
  .hero-search button { padding: 0 1.1rem; }
}