/* Shared base for all three concepts: reset, brand tokens, a11y helpers, logo crop, placeholders.
   Ports to the WP theme as assets/css/base.css. */

:root {
  --black: #0C0B0B;
  --yellow: #FFDD00;
  --white: #FFFFFF;
  /* neutrals only as tints/alpha of the three brand colours */
  --ink-90: rgb(12 11 11 / .9);
  --ink-60: rgb(12 11 11 / .6);
  --white-70: rgb(255 255 255 / .7);
  --white-50: rgb(255 255 255 / .5);
  --white-15: rgb(255 255 255 / .15);
  --white-08: rgb(255 255 255 / .08);
  --yellow-20: rgb(255 221 0 / .2);
  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tap: 44px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
main { overflow-x: clip; }
body { margin: 0; min-height: 100vh; font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }

/* a11y */
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 1000; padding: .75rem 1rem; background: var(--yellow); color: var(--black); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 1rem; }

/* Logo: the source file is 842×595 with transparent padding. We crop the padding in CSS only;
   the file itself is untouched. Content box: x 251, y 110, w 270, h 323. */
.logo { display: block; position: relative; width: var(--logo-w, 64px); aspect-ratio: 270 / 323; overflow: hidden; flex: none; }
.logo img { position: absolute; max-width: none; width: 311.852%; left: -92.963%; top: -34.056%; }

/* Placeholder for missing photos (listed in NOTES.md under "Nedostajuće slike") */
.ph { position: relative; display: grid; place-items: end start; background: var(--black); outline: 1px solid var(--yellow); outline-offset: -1px; color: var(--yellow); font: 600 .75rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: .75rem; aspect-ratio: 4 / 3; }
.ph::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 221 0 / .06) 14px 15px); }
.ph span { position: relative; }

/* [CONFIRM] markers: visible by default, hidden with ?clean */
.confirm { display: inline-block; margin-left: .35em; padding: 0 .35em; font: 600 .62rem/1.6 var(--font-body); letter-spacing: .06em; vertical-align: middle; color: var(--black); background: var(--yellow); border-radius: 2px; white-space: nowrap; }
.clean .confirm { display: none; }

/* Language toggle state */
.lang-toggle { display: inline-flex; align-items: center; gap: .15rem; min-height: var(--tap); min-width: var(--tap); padding: 0 .5rem; font: 700 .75rem/1 var(--font-body); letter-spacing: .08em; }
.lang-toggle span { opacity: .45; padding: .25rem .2rem; }
html[lang="sr-Latn"] .lang-toggle [data-l="sr"],
html[lang="en"] .lang-toggle [data-l="en"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* No-JS / reduced motion: anything flagged as animated must sit in its final state */
.reduced *, .reduced *::before, .reduced *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}
.confirm{display:none!important}