/* zmenek.net 2026 redesign (Polaroid), shared stylesheet: fonts, tokens, base, header and drawer, search band,
   the print, SEO panel and footer, focus, hover, reduced motion and print.
   See docs/superpowers/specs/2026-11-02-zmenek-polaroid-design.md (Tokens, Fonts, Shell, Photos, Stylesheets). */

/* ---------------------------------------------------------------- Fonts (self-hosted, SIL OFL 1.1, see /fonts/OFL-*.txt)
   latin-ext before latin, so č, š and ž come from the latin-ext file. */
/* Karla: text, labels, fields */
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/karla-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/karla-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/karla-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/fonts/karla-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/karla-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/karla-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Alegreya Sans: headings, names, menu, buttons, page numbers, fact values (the Fertigo stand-in) */
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/alegreya-sans-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/alegreya-sans-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/fonts/alegreya-sans-latin-ext-800-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/fonts/alegreya-sans-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Courgette: the wordmark only */
@font-face { font-family: "Courgette"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/courgette-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Courgette"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/courgette-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Metric-matched fallbacks: keep the swap from shifting the layout (values from the woff2 hhea tables). */
@font-face { font-family: "Karla Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 103.8%; ascent-override: 88.3%; descent-override: 24.3%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 83.3%; ascent-override: 108%; descent-override: 36%; line-gap-override: 0%; }

/* ---------------------------------------------------------------- Tokens */
:root {
  color-scheme: light;
  --pink-bg: #b53168;
  --brown: #3f2529;
  --brown-top: #46292e;
  --brown-foot: #301b1d;
  --brown-deep: #2b181a;
  --brown-line: #5a3e43;
  --orange: #f6a129;
  --orange-lt: #fad196;
  --orange-edge: #b86d0e;
  --plum: #8d274f;
  --rose: #e8b0c7;
  --paper: #ffffff;
  --paper-warm: #fffaf6;
  --cream: #f4eef0;
  --ink: #3f2529;
  --ink-2: #4d3539;
  --ink-muted: #6b5257;
  --on-brown: #f4e7ea;
  --on-brown-muted: #d9c2c8;
  --field-line: #8a6f74;
  --tile-hover: #f6e9ee;
  --disabled: #c9b2b7;
  --error: #a3202f;
  --error-lt: #ff9c92;
  --fact-line: #e3d2d8;
  --head: "Alegreya Sans", "Alegreya Sans Fallback", sans-serif;
  --body: "Karla", "Karla Fallback", sans-serif;
  --script: "Courgette", cursive;
  --shadow-print: 0 1px 2px rgba(40,8,20,.28), 0 10px 22px -10px rgba(40,8,20,.55);
  --shadow-lift: 0 2px 4px rgba(40,8,20,.25), 0 18px 32px -12px rgba(40,8,20,.6);
  --wrap: 1180px;
  --damask: url(/img/bg.jpg);
  --damask-brown: url(/img/bg-3.jpg);
  --damask-brown-sq: url(/img/bg-1.jpg);
  --damask-cream: url(/img/bg-2.jpg);
  /* Helpers shared with the page stylesheets (not design tokens): the select chevron, the search magnifier, the pin. */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233f2529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233f2529' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M13 13l4.5 4.5'/%3E%3C/svg%3E");
  --pin: radial-gradient(circle at 35% 30%, #fbe0b8 0 18%, var(--orange) 40%, var(--orange-edge) 100%);
}

/* ---------------------------------------------------------------- Rules that apply everywhere */
/* Focus: one ring, never gold. On pink and brown: a white ring with a brown halo. */
:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--brown-deep);
}
/* On white and cream: the brown ring (index-card body, the drawer print below 1000px, p.empty). */
#topBox .indexcard :focus-visible,
p.empty :focus-visible {
  outline: 2px solid var(--brown-deep);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 16px/1.5 var(--body);
  color: var(--ink);
  background: var(--pink-bg) var(--damask) repeat;
  /* Short pages: main grows so the footer sits on the bottom edge. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4, p { margin: 0; }
figure { margin: 0; }
.level_1, .account, .fr { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }
main.page { display: block; flex: 1 0 auto; padding-top: 44px; padding-bottom: 56px; } /* longhands: main.page.wrap keeps the .wrap gutter */
main.page > * { min-width: 0; }

/* Visually hidden, still read (Q5b): the skip link and the "Zahtevano polje" texts. */
.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
a.invisible:focus {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 80;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 700 16px/1.2 var(--body);
}
/* The hidden "Izberi Spol" radio and the old error placeholder, as today. */
#filter_field_gender_,
#error01 { display: none; }
/* phones: 16px gutters, less space above the page */
@media (max-width: 680px) {
  .wrap { padding: 0 16px; }
  main.page { padding-top: 32px; }
}

/* ---------------------------------------------------------------- Background */
/* The brown bands' faint damask: the pink tile screened faintly over the brown (bg-1/bg-3 cannot tile). */
.head::before,
.seoPanel::before,
.foot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--damask) repeat;
  filter: grayscale(1) brightness(1.55) contrast(6);
  mix-blend-mode: screen;
  opacity: .08;
}

/* ---------------------------------------------------------------- Header, above 1000px */
.head {
  position: relative;
  isolation: isolate;
  z-index: 2;
  background: linear-gradient(180deg, var(--brown-top), var(--brown) 60%, #34201f);
  color: var(--on-brown);
  box-shadow: 0 6px 18px rgba(40,8,20,.4);
}
/* the photo-paper edge: a white hairline over an orange one */
.head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0 2px, var(--orange) 2px 5px);
}
#topBar {
  background: rgba(20,8,10,.45);
  font: 400 13px/28px var(--body);
  color: var(--rose);
}
.head__row { display: flex; align-items: center; gap: 24px; min-height: 96px; }
#logo { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 auto; padding: 8px 0 10px; }
.wordmark {
  display: inline-block;
  padding: 6px 2px;
  font: 400 46px/1 var(--script);
  white-space: nowrap;
  text-decoration: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.w-sms {
  background: linear-gradient(180deg, var(--orange-lt) 15%, var(--orange) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.w-stiki { color: #fff; }
#logo h1 { font: 500 14px/1.2 var(--body); color: var(--rose); padding-left: 3px; }

#mainNav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
#mainNav .drawer-top,
.menu-btn { display: none; }
.drawer-print { display: contents; }
.level_1 { display: flex; gap: 8px; }
.level_1 a {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 48px;
  padding: 0 16px;
  font: 700 18px/1 var(--head);
  color: var(--on-brown);
  text-decoration: none;
}
/* the current item (a.active, aria-current="page") on a strip of orange tape */
.level_1 a.active { z-index: 0; padding: 0 20px; color: var(--brown-deep); }
.level_1 a.active::before {
  content: "";
  position: absolute;
  inset: 2px -2px;
  z-index: -1;
  background: var(--orange);
  transform: rotate(-2deg);
  box-shadow: 0 2px 3px rgba(0,0,0,.35);
  clip-path: polygon(0 8%, 3% 0, 7% 9%, 11% 1%, 89% 2%, 93% 10%, 97% 0, 100% 9%, 100% 92%, 97% 100%, 93% 91%, 89% 99%, 11% 98%, 7% 90%, 3% 100%, 0 91%);
}
.account { display: flex; gap: 10px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 4px;
  font: 700 16px/1 var(--head);
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.btn--line { border-color: var(--on-brown-muted); background: transparent; color: var(--on-brown); }
.btn--fill { border-color: var(--orange); background: var(--orange); color: var(--brown-deep); }
/* the current account button: a strip of tape under it */
.account a[aria-current="page"] { position: relative; }
.account a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -9px;
  height: 6px;
  background: var(--orange);
  transform: rotate(-1.5deg);
  clip-path: polygon(0 8%, 3% 0, 7% 9%, 11% 1%, 89% 2%, 93% 10%, 97% 0, 100% 9%, 100% 92%, 97% 100%, 93% 91%, 89% 99%, 11% 98%, 7% 90%, 3% 100%, 0 91%);
}
.account .btn--fill[aria-current="page"]::after { background: var(--paper); }

.menu-btn {
  align-items: center;
  gap: 8px;
  flex: none;
  margin-left: auto;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--on-brown-muted);
  border-radius: 4px;
  background: transparent;
  color: var(--on-brown);
  font: 700 16px/1 var(--head);
  cursor: pointer;
}
.menu-btn svg,
#mainNav .close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.scrim { position: fixed; inset: 0; z-index: 1; background: rgba(25,8,14,.6); }
.scrim[hidden] { display: none; }
html.nav-open { overflow: hidden; }
html.nav-open .head { z-index: 70; }

/* ---------------------------------------------------------------- Header and drawer, 1000px and below */
@media (max-width: 1000px) {
  .head__row { min-height: 88px; }
  .wordmark { font-size: 42px; }
  .menu-btn { display: inline-flex; }
  #mainNav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(340px, 88vw);
    margin: 0;
    padding: 12px 20px 28px;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--brown-top), var(--brown) 40%, var(--brown-foot));
    box-shadow: -10px 0 30px rgba(20,4,10,.5);
    /* closed: off-canvas and out of the tab order */
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  #mainNav.open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  #mainNav.open::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--damask) repeat;
    filter: grayscale(1) brightness(1.55) contrast(6);
    mix-blend-mode: screen;
    opacity: .08;
  }
  #mainNav a.invisible { display: none; }
  #mainNav .drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--brown-line);
  }
  #mainNav .drawer-top .wordmark { font-size: 36px; }
  #mainNav .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--on-brown-muted);
    border-radius: 4px;
    background: transparent;
    color: var(--on-brown);
    cursor: pointer;
  }
  /* the menu on a pinned print */
  .drawer-print {
    display: block;
    position: relative;
    padding: 18px 14px 34px;
    border-radius: 2px;
    background: var(--paper);
    box-shadow: var(--shadow-print);
    transform: rotate(-.8deg);
  }
  .drawer-print::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: var(--pin);
    box-shadow: 0 3px 4px rgba(40,8,20,.45);
  }
  .level_1 { flex-direction: column; gap: 0; }
  .level_1 li { border-bottom: 1px solid #eadde1; }
  .level_1 a { min-height: 54px; padding: 0 12px; font-size: 22px; color: var(--brown); }
  .level_1 a.active { align-self: flex-start; display: inline-flex; min-height: 46px; margin: 4px 0; padding: 0 20px; color: var(--brown-deep); }
  .drawer-print :focus-visible { outline: 2px solid var(--brown-deep); outline-offset: 2px; box-shadow: none; }
  .account { flex-direction: column; gap: 12px; margin-top: 30px; }
  .account .btn { width: 100%; min-height: 48px; font-size: 18px; }
  /* in the drawer the links sit on white paper: they keep their brown on hover. Nested, not
     "(hover: hover) and (max-width: 1000px)", and scoped to .drawer-print so it outranks the Hover block below. */
  @media (hover: hover) {
    .drawer-print .level_1 a:hover { color: var(--brown); }
    .drawer-print .level_1 a.active:hover { color: var(--brown-deep); }
  }
}

/* phones: a shorter header and a smaller wordmark */
@media (max-width: 680px) {
  #topBar { font-size: 12px; line-height: 26px; }
  .head__row { min-height: 76px; gap: 12px; }
  #logo { padding: 6px 0 8px; }
  .wordmark { font-size: 36px; }
  #logo h1 { font-size: 12px; }
}

/* small phones: a slimmer menu button */
@media (max-width: 400px) {
  .menu-btn { padding: 0 12px; }
}

/* ---------------------------------------------------------------- Search band (index card) */
#topBox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: start; margin-bottom: 56px; }
#topBox > * { min-width: 0; }
.indexcard {
  position: relative;
  padding: 0 22px 12px;
  border-radius: 3px;
  background: var(--cream) var(--damask-cream) repeat;
  box-shadow: var(--shadow-print);
}
/* the pin, centred on the top edge */
.indexcard::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--pin);
  box-shadow: 0 3px 4px rgba(40,8,20,.45);
}
.indexcard__plate {
  margin: 0 -22px 16px;
  padding: 20px 22px 16px;
  border-radius: 3px 3px 0 0;
  border-bottom: 3px solid var(--orange);
  background: linear-gradient(180deg, rgba(63,37,41,.35), rgba(43,24,26,.55)), var(--brown) var(--damask-brown) center / cover;
}
.indexcard__plate h2 { font: 800 28px/1.1 var(--head); color: #fff; }
.indexcard__plate h2 span { color: var(--orange); }
.explanation01 { margin-top: 8px; font: 400 14px/1.45 var(--body); color: var(--on-brown); }
.filter_group { display: grid; gap: 10px; }
#searchForm .widget > label,
#searchForm legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font: 700 14px/1.3 var(--body);
  color: var(--brown);
}
#searchForm legend { float: left; width: 100%; }
#searchForm select.select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 0 40px;
  border: 1px solid var(--field-line);
  border-radius: 3px;
  background: var(--icon-search) left 12px center / 20px no-repeat, var(--icon-chevron) right 12px center / 20px no-repeat, var(--paper);
  color: var(--ink);
  font: 500 16px/1 var(--body);
  cursor: pointer;
}
/* Moški / Ženski: 44px toggles that are still radios; the input is stretched over its own toggle. */
.radio_container { display: flex; flex-wrap: wrap; gap: 0 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.radio_container > span { position: relative; flex: 1 1 0; min-width: 0; }
.radio_container input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.radio_container label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin: 0;
  border: 1px solid var(--field-line);
  border-radius: 3px;
  background: var(--paper);
  font: 500 16px/1 var(--body);
  color: var(--ink);
}
.radio_container label::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--brown);
  border-radius: 50%;
}
.radio_container input:checked + label { border-color: var(--brown); background: var(--brown); color: #fff; }
.radio_container input:checked + label::before { border-color: var(--orange); background: radial-gradient(circle, var(--orange) 0 40%, transparent 45%); }
.radio_container input:focus-visible + label { outline: 2px solid var(--brown-deep); outline-offset: 2px; box-shadow: none; }
.clearall a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 15px/1.2 var(--body);
  color: var(--plum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the index card and Najbolj iskane side by side; both columns end level */
@media (min-width: 1201px) {
  #topBox { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: stretch; }
}

/* the full card goes full width; Najbolj iskane sits under it */
@media (max-width: 1200px) {
  #topBox .indexcard { padding-bottom: 8px; }
  #topBox .indexcard::before { left: 30px; margin-left: 0; }
  #topBox .indexcard__plate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
  #topBox .explanation01 { margin-top: 0; }
  #topBox .filter_group { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; align-items: end; }
  #topBox .clearall { grid-column: 1 / -1; }
}

/* the full card in one column */
@media (max-width: 680px) {
  #topBox { gap: 34px; margin-bottom: 40px; }
  #topBox .indexcard { padding: 0 18px 10px; }
  #topBox .indexcard__plate { display: block; margin: 0 -18px 14px; padding: 20px 18px 14px; }
  #topBox .explanation01 { margin-top: 6px; }
  #topBox .indexcard__plate h2 { font-size: 24px; }
  #topBox .filter_group { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Compact bar: profile and account pages (Najbolj iskane hidden, Q2) */
body:is(#profile, #pages, .bodyPages_x2) #topBox { display: block; margin-bottom: 44px; }
body:is(#profile, #pages, .bodyPages_x2) #topBox .right { display: none; }
body:is(#profile, #pages, .bodyPages_x2) #topBox .indexcard { display: flex; align-items: stretch; padding: 0; }
body:is(#profile, #pages, .bodyPages_x2) #topBox .indexcard::before { left: 30px; margin-left: 0; }
body:is(#profile, #pages, .bodyPages_x2) #topBox .indexcard__plate {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 18px 26px;
  border-radius: 3px 0 0 3px;
  border-bottom: 0;
  border-right: 3px solid var(--orange);
}
body:is(#profile, #pages, .bodyPages_x2) #topBox .indexcard__plate h2 { font-size: 24px; white-space: nowrap; }
body:is(#profile, #pages, .bodyPages_x2) #topBox .explanation01 { display: none; }
body:is(#profile, #pages, .bodyPages_x2) #topBox #searchForm { flex: 1; min-width: 0; padding: 14px 22px 16px; }
body:is(#profile, #pages, .bodyPages_x2) #topBox .filter_group { grid-template-columns: 1fr 1fr 1.1fr auto; align-items: end; gap: 16px; }

/* 3 columns, "Razveljavi iskanje" across the row (keeps 44px) */
@media (max-width: 1200px) {
  body:is(#profile, #pages, .bodyPages_x2) #topBox .filter_group { grid-template-columns: 1fr 1fr 1.1fr; }
}

/* the compact bar stacks */
@media (max-width: 1000px) {
  body:is(#profile, #pages, .bodyPages_x2) #topBox .indexcard { flex-direction: column; }
  body:is(#profile, #pages, .bodyPages_x2) #topBox .indexcard__plate {
    padding: 18px 22px 14px;
    border-radius: 3px 3px 0 0;
    border-right: 0;
    border-bottom: 3px solid var(--orange);
  }
}

/* hidden on phones, as today */
@media (max-width: 680px) {
  body:is(#profile, #pages, .bodyPages_x2) #topBox { display: none; }
}

/* ---------------------------------------------------------------- Najbolj iskane */
#topBox .right h2 {
  margin: 0 0 22px;
  font: 800 30px/1.15 var(--head);
  color: #fff;
  text-shadow: 0 1px 2px rgba(60,10,30,.55), 0 0 12px rgba(80,10,40,.35);
}
#topBox .right h2 span { color: var(--orange-lt); }
.topBoxList .layout_simple { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 10px; }
.topBoxList .profileBox { min-width: 0; }
/* the pinboard stagger: the 2nd and 4th print sit lower */
.topBoxList .profileBox:nth-child(even) { margin-top: 34px; }
.tape {
  position: absolute;
  top: -11px;
  left: 50%;
  z-index: 2;
  width: 74px;
  height: 22px;
  margin-left: -37px;
  background: rgba(246,161,41,.86);
  box-shadow: 0 1px 1px rgba(60,20,0,.25);
  transform: rotate(-3deg);
  clip-path: polygon(0 10%, 4% 0, 8% 12%, 12% 2%, 88% 0, 92% 12%, 96% 2%, 100% 10%, 100% 90%, 96% 100%, 92% 88%, 88% 98%, 12% 100%, 8% 88%, 4% 98%, 0 90%);
}
.topBoxList .profileBox:nth-child(even) .tape { transform: rotate(4deg); }

/* side by side with the index card: the photos stretch so both columns end level */
@media (min-width: 1201px) {
  #topBox .right { display: flex; flex-direction: column; }
  .topBoxList { display: flex; flex: 1; min-height: 0; }
  .topBoxList .layout_simple { flex: 1; }
  .topBoxList .profileBox { display: flex; flex-direction: column; }
  .topBoxList .profileBox:nth-child(odd) { margin-bottom: 34px; }
  .topBoxList .print { display: flex; flex: 1; flex-direction: column; }
  .topBoxList .print figure { position: relative; flex: 1; aspect-ratio: auto; min-height: 200px; }
  .topBoxList .print figure img { position: absolute; inset: 0; object-position: 50% 25%; }
}

@media (max-width: 1200px) {
  .topBoxList .layout_simple { gap: 20px; }
}

/* a sideways strip of prints */
@media (max-width: 680px) {
  #topBox .right h2 { margin-bottom: 16px; font-size: 23px; }
  .topBoxList { margin: 0 -16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .topBoxList .layout_simple { display: flex; gap: 16px; width: max-content; padding: 16px 16px 18px; }
  .topBoxList .profileBox { width: 150px; scroll-snap-align: start; }
  .topBoxList .profileBox:nth-child(even) { margin-top: 0; }
}

/* ---------------------------------------------------------------- The print (cards, Najbolj iskane, account card, big print) */
.print {
  display: block;
  position: relative;
  padding: 10px 10px 0;
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-print);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .2s ease, box-shadow .2s ease;
}
.print figure { aspect-ratio: 380 / 478; overflow: hidden; background: #eadde1; }
.print figure img { width: 100%; height: 100%; object-fit: cover; }
.print .profileListData { display: block; padding: 12px 4px 16px; }
.print .name {
  font: 800 18px/1.2 var(--head);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--brown);
  overflow-wrap: anywhere;
}
.print .age { font: 500 15px/1.2 var(--body); color: var(--brown); }
.print .description {
  display: block;
  margin-top: 6px;
  font: 400 14px/1.45 var(--body);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
/* the taped prints of Najbolj iskane: after the base rules, so they win (the phone sizes below win in turn) */
.print--taped { padding: 9px 9px 0; }
.print--taped .profileListData { padding: 12px 2px 18px; }
.print--taped .name { font-size: 16px; }
.print--taped .age { font-size: 14px; }
.print:focus-visible { transform: none; box-shadow: 0 0 0 6px var(--brown-deep), var(--shadow-print); }
/* tilt rhythm, never more than 1deg */
.profileBox:nth-child(4n+1) .print { --tilt: -1deg; }
.profileBox:nth-child(4n+2) .print { --tilt: .6deg; }
.profileBox:nth-child(4n+3) .print { --tilt: -.4deg; }
.profileBox:nth-child(4n+4) .print { --tilt: .9deg; }
.profileBox:nth-child(8n+5) .print { --tilt: .7deg; }
.profileBox:nth-child(8n+6) .print { --tilt: -.8deg; }
.profileBox:nth-child(8n+7) .print { --tilt: .5deg; }
.profileBox:nth-child(8n+8) .print { --tilt: -.6deg; }

/* No photo: the undeveloped print, drawn on the existing empty.gif (no class in the markup). */
img[src$="/img/empty.gif"] {
  object-fit: none !important;                 /* outranks .print figure img, .print--large > img and the stretched "Najbolj iskane" photos */
  object-position: -9999px -9999px !important; /* pushes the grey GIF out of its own box; the box shows its background */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 150'%3E%3Cg fill='%23e8b0c7' fill-opacity='.5'%3E%3Ccircle cx='60' cy='52' r='25'/%3E%3Cpath d='M14 150c2-34 22-56 46-56s44 22 46 56z'/%3E%3C/g%3E%3C/svg%3E") center bottom / 66% auto no-repeat,
    var(--brown) var(--damask-brown-sq) center / cover no-repeat;
}

/* smaller prints */
@media (max-width: 680px) {
  .print { padding: 7px 7px 0; }
  .print .profileListData { padding: 9px 2px 12px; }
  .print .name { font-size: 15px; }
  .print .age { font-size: 13px; }
  .print .description { font-size: 13px; line-height: 1.4; }
  .profileBox:nth-child(odd) .print { --tilt: -.8deg; }
  .profileBox:nth-child(even) .print { --tilt: .8deg; }
}

/* ---------------------------------------------------------------- SEO panel and footer */
.seoPanel { position: relative; isolation: isolate; background: var(--brown); }
.seoText { max-width: 980px; padding: 36px 0 24px; font: 400 14px/1.65 var(--body); color: var(--on-brown-muted); }
.seoText p + p, .seoText br + p { margin-top: 12px; }  /* the markup keeps a <br> between the two paragraphs */
.seoText br { display: none; }
.foot {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--brown), var(--brown-foot));
  color: var(--on-brown-muted);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 8px;    /* longhands: .wrap.foot__row keeps the .wrap gutter */
  padding-bottom: 12px;
  font-size: 14px;
}
.seoPanel + .foot .foot__row { border-top: 1px solid var(--brown-line); }
.foot .fl { color: var(--on-brown-muted); }
.fr { display: flex; flex-wrap: wrap; gap: 0 4px; }
.foot .fr a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1200px) {
  .foot.hasRecaptcha { padding-bottom: 80px; }
}

/* stacked and centred */
@media (max-width: 680px) {
  .seoText { padding-top: 28px; font-size: 13px; }
  .foot__row { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .fr { justify-content: center; }
}

/* ---------------------------------------------------------------- Hover (pointer devices only) */
@media (hover: hover) {
  .level_1 a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .level_1 a.active:hover { color: var(--brown-deep); text-decoration: none; }  /* the current item keeps its tape */
  .btn--line:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
  .btn--fill:hover { border-color: var(--orange-lt); background: var(--orange-lt); }
  .clearall a:hover { color: var(--brown); }
  .print:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-lift); }
  .print:hover:focus-visible { box-shadow: 0 0 0 6px var(--brown-deep), var(--shadow-lift); }
  .print:hover .name { color: var(--plum); }
  .foot .fr a:hover { color: #fff; }
}

/* ---------------------------------------------------------------- Reduced motion: no tilt, lift or drawer slide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .print, .drawer-print, .tape, .level_1 a.active::before, .account a[aria-current]::after { transform: none !important; }
}

/* ---------------------------------------------------------------- Print */
@media print {
  body { background: #fff; color: #000; }
  *, *::before, *::after { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
  .head, .seoPanel, .foot { background: none; }
  .head::before, .head::after, .seoPanel::before, .foot::before { display: none; }
  .w-sms { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
  .wordmark { filter: none; }
  #mobileNavBtn, #mainNav, .scrim, #topBox, .consent-banner, #sendSMS { display: none !important; }
  .print, .drawer-print { transform: none !important; }
  .profileList .list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}