/*
 * Osnova: redosled slojeva, reset (umesto Tailwind preflight-a) i par pomoćnih klasa.
 * Stilovi teme su u theme.css / content.css / layouts.css (sloj "components").
 */
@layer base, components, utilities;

@layer base {
  *, ::before, ::after { box-sizing: border-box; border: 0 solid currentColor; }
  html { -webkit-text-size-adjust: 100%; line-height: 1.5; scroll-behavior: smooth; }
  body { margin: 0; font-family: var(--f-body, system-ui, sans-serif); background: var(--c-background, #fff); -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
  p, blockquote, figure, dl, dd, pre, hr { margin: 0; }
  ol, ul, menu { list-style: none; margin: 0; padding: 0; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  img, svg, video, canvas, iframe { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; margin: 0; padding: 0; background: transparent; letter-spacing: inherit; }
  button, [role='button'] { cursor: pointer; }
  button:disabled { cursor: default; }
  hr { border-top-width: 1px; height: 0; color: inherit; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  :focus-visible { outline: 2px solid var(--c-accent, #ffed00); outline-offset: 2px; }
}

@layer utilities {
  .block { display: block; }
  .flex { display: flex; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .relative { position: relative; }
  .gap-1 { gap: 0.46875rem; }
  .gap-2 { gap: 0.9375rem; }
  .gap-3 { gap: 1.875rem; }
  .m-0 { margin: 0; }
  .mb-0 { margin-bottom: 0; }
  .mb-05 { margin-bottom: 0.3rem; }
  .mb-1 { margin-bottom: 0.46875rem; }
  .mb-2 { margin-bottom: 0.9375rem; }
  .mb-3 { margin-bottom: 1.875rem; }
  .mb-4 { margin-bottom: 3.75rem; }
  .mt-1 { margin-top: 0.46875rem; }
  .mt-2 { margin-top: 0.9375rem; }
  .mt-3 { margin-top: 1.875rem; }
  .mt-4 { margin-top: 3.75rem; }
  .mx-2 { margin-inline: 0.5rem; }
  .ml-auto { margin-left: auto; }
  .mr-auto { margin-right: auto; }
  .w-full { width: 100%; }
  .h-full { height: 100%; }
  .uppercase { text-transform: uppercase; }
  .text-center { text-align: center; }
  .pre-line { white-space: pre-line; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .opacity-60 { opacity: 0.6; }
  .underline { text-decoration: underline; text-underline-offset: 3px; }
  .hover-underline:hover { text-decoration: underline; text-underline-offset: 3px; }
  .overflow-hidden { overflow: hidden; }
  .object-cover { object-fit: cover; }
  .aspect-square { aspect-ratio: 1; }
  .aspect-4-3 { aspect-ratio: 4 / 3; }
  .i-4 { width: 1rem; height: 1rem; }
  .i-5 { width: 1.25rem; height: 1.25rem; }
  .i-6 { width: 1.5rem; height: 1.5rem; }
  .i-7 { width: 1.75rem; height: 1.75rem; }
  .i-8 { width: 2rem; height: 2rem; }
  .lg-only { display: none; }
  @media (width >= 992px) {
    .lg-only { display: block; }
    .lg-half { width: 50%; }
  }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}