/* The per-municipality sections: 636 pages of reference copy, plus three
   indexes. They are generated by tools/build-obcine.mjs, not by the prerender,
   so they carry a real stylesheet rather than the inlined rules the rest of
   the site ships. Fonts and colour tokens come from the design system. */

:root {
  --ink: #111518;
  --ink-2: #323F50;
  --muted: #69727D;
  --line: rgba(50, 63, 80, 0.18);
  --paper: #FFFFFF;
  --wash: #F4F5F7;
  --bar: #232C3A;
  --gold: #B8965A;
  --accent: #F9C73E;
  --maxw: 820px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px; line-height: 1.65;
}
a { color: var(--ink-2); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- header */
.ob-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bar); border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.ob-bar {
  max-width: 1360px; margin: 0 auto; padding: 0 24px;
  height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.ob-bar img { height: 20px; display: block; }
.ob-nav { display: flex; gap: 28px; align-items: center; }
.ob-nav a { font-size: 14px; font-weight: 500; color: #C8CDD4; white-space: nowrap; }
.ob-nav a:hover { color: #fff; }
.ob-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  background: #E3DCCE; color: #111518; border-radius: 999px;
  padding: 10px 20px 12px; white-space: nowrap;
  font-family: 'Darker Grotesque', Inter, sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
}
.ob-cta:hover { background: #F5F1E9; color: #111518; }
@media (max-width: 900px) { .ob-nav { display: none; } }

/* ------------------------------------------------------------------ hero
   Every colour here is set explicitly. The design system's stylesheet styles
   h1 at element level, which beats anything the hero merely inherits down,
   and the heading came out dark on dark. */
.ob-hero { background: var(--bar); color: #fff; }
.ob-hero-in { max-width: 1200px; margin: 0 auto; padding: 56px 24px 64px; }
.ob-crumbs { font-size: 13px; color: #9BA4B0; margin-bottom: 22px; }
.ob-crumbs a { color: #9BA4B0; }
.ob-crumbs a:hover { color: #fff; }
.ob-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
.ob-hero h1 {
  margin: 0; color: #fff;
  font-family: 'Darker Grotesque', Inter, sans-serif; font-weight: 600;
  font-size: clamp(44px, 7vw, 80px); line-height: 0.92; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.ob-lede { margin: 20px 0 0; max-width: 720px; font-size: 18px; line-height: 1.6; color: #C8CDD4; }

/* --------------------------------------------------------------- content */
.ob-main { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 88px; }
.ob-main h2 {
  margin: 48px 0 14px; font-family: 'Darker Grotesque', Inter, sans-serif;
  font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); text-wrap: balance;
}
.ob-main h3 {
  margin: 34px 0 10px; font-family: 'Darker Grotesque', Inter, sans-serif;
  font-weight: 600; font-size: 25px; line-height: 1.15; color: var(--ink);
}
.ob-main h4 {
  margin: 28px 0 8px; font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.ob-main h2:first-child, .ob-main h3:first-child { margin-top: 0; }
.ob-main p { margin: 0 0 16px; color: var(--ink-2); text-wrap: pretty; }
.ob-main ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.ob-main li {
  position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 16.5px;
}
.ob-main li:last-child { border-bottom: 1px solid var(--line); }
.ob-main li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }

/* Tables carry the spatial-planning acts: many columns, long titles. They get
   their own scroller so the page itself never scrolls sideways on a phone. */
.ob-tablewrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 6px; }
.ob-main table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.ob-main th, .ob-main td {
  text-align: left; vertical-align: top; padding: 10px 14px;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.ob-main thead th { background: var(--wash); font-weight: 600; color: var(--ink); white-space: nowrap; }
.ob-main tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- cta */
.ob-panel {
  margin: 56px 0 0; background: var(--wash); border: 1px solid var(--line);
  border-radius: 10px; padding: 32px 30px;
}
.ob-panel h2 { margin: 0 0 10px; font-size: 30px; }
.ob-panel p { margin: 0 0 20px; }
.ob-panel .ob-cta { color: #111518; }

/* ----------------------------------------------------------------- index */
.ob-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.ob-grid a { background: var(--paper); padding: 13px 16px; font-size: 15.5px; color: var(--ink-2); }
.ob-grid a:hover { background: var(--wash); color: var(--ink); }
@media (max-width: 1000px) { .ob-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .ob-grid { grid-template-columns: minmax(0, 1fr); } }
.ob-wide { max-width: 1200px; }

/* ---------------------------------------------------------------- footer */
.ob-footer { background: #323F50; color: #C8CDD4; margin-top: 0; }
.ob-footer-in {
  max-width: 1200px; margin: 0 auto; padding: 48px 24px 40px;
  display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-start;
}
.ob-footer a { color: #C8CDD4; font-size: 14.5px; }
.ob-footer a:hover { color: #fff; }
.ob-footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ob-footer-note { width: 100%; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 22px; font-size: 13px; color: #9BA4B0; }

/* A few municipalities keep a very long register of spatial planning acts —
   Velenje's runs to 3,772 rows. Every row stays in the page, and so stays
   indexable; it just gets its own scroll box instead of three metres of
   document between one heading and the next. */
.ob-tablewrap.is-long { max-height: 70vh; overflow-y: auto; }
.ob-tablewrap.is-long thead th { position: sticky; top: 0; z-index: 1; }
.ob-rows { margin: 0 0 24px; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------- contents */
.ob-toc { margin: 0 0 44px; padding: 22px 24px 24px; background: var(--wash); border: 1px solid var(--line); border-radius: 8px; }
.ob-toc-label { margin: 0 0 12px !important; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold) !important; }
.ob-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2; column-gap: 32px; }
.ob-toc li { break-inside: avoid; padding: 4px 0 4px 26px; position: relative; border: 0 !important; font-size: 15.5px; line-height: 1.45; }
.ob-toc li::before { counter-increment: toc; content: counter(toc) "."; position: absolute; left: 0; color: var(--muted); font-size: 13px; }
.ob-toc a { color: var(--ink-2); }
.ob-toc a:hover { color: var(--ink); text-decoration: underline; }
.ob-main h2[id] { scroll-margin-top: 92px; }
@media (max-width: 620px) { .ob-toc ol { columns: 1; } }