/* Shared styles for the overheidsdata pages: the /data/overheid hub
   (templates/pages/overheid_hub.html, .ovh-* blocks at the bottom) and the three
   product pages under it (templates/pages/overheid_product.html). Self-contained:
   defines the hero bits it needs (kicker/dot/hero-actions) so it doesn't lean on
   home.css. Accent switches via .ov-blue / .ov-amber / .ov-green. */

.ov-blue  { --ov: var(--blue);  --ov-deep: var(--blue-deep); --ov-tint: var(--blue-tint); }
/* Written as `ov-{{ accent }}` by overheid_hub/overheid_product from the accent
   in app/web/overheid.py, so these never appear literally. Not dead. */
.ov-amber { --ov: var(--amber); --ov-deep: #8a5618;          --ov-tint: #fdf3e3; }
.ov-green { --ov: var(--green); --ov-deep: #0b6644;          --ov-tint: var(--green-tint); }


/* hero */
.ov-hero { padding-top: clamp(1.5rem, 4vh, 3rem); }
.ov-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-top: 1.1rem; }
.ov-lede { color: var(--ink-60); font-size: 1.12rem; margin-top: 1rem; max-width: 34rem; }
.ov-cross { margin-top: 1.2rem; font-size: .9rem; color: var(--ink-60); }
.ov-cross a { color: var(--ov-deep); font-weight: 600; text-decoration: none; }

/* hero mock — an alerts/results panel */
.ov-hero-mock { display: flex; flex-direction: column; gap: .7rem; }
.ov-alert { display: flex; align-items: center; gap: .8rem; background: var(--ov); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .85rem 1.1rem; }
.ov-bolt { font-size: 1.3rem; }
.ov-alert b { display: block; font-size: .95rem; }
.ov-alert span { font-size: .8rem; color: rgba(255,255,255,.82); }
.ov-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; }
.ov-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ov-card-head h3 { font-size: 1.05rem; line-height: 1.3; }
.ov-buyer { font-size: .85rem; color: var(--ink-60); }
.ov-card-meta { margin-top: .6rem; font-family: var(--jbmono); font-size: .78rem; color: var(--ink-60); }
.ov-mini { display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: .6rem .8rem; font-size: .85rem; color: var(--ink); }
.ov-mini span { color: var(--ink-60); margin-right: auto; }

/* tag pills (status) */
.ov-tag { font-family: var(--jbmono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; padding: .22rem .55rem; border-radius: 99px; white-space: nowrap; }
.ov-tag.green { color: var(--green); background: var(--green-tint); }
.ov-tag.amber { color: var(--amber); background: #fdf3e3; }
.ov-tag.muted { color: var(--ink-60); background: var(--bg-soft); }

/* stats strip */

/* sources */
.ov-sources-intro { text-align: center; color: var(--ink-60); margin-bottom: 1.2rem; }
.ov-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.ov-source { font-family: var(--jbmono); font-size: .8rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .45rem .9rem; box-shadow: var(--shadow); }

/* pillars */
.ov-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.ov-pillar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem 1.7rem; }
.ov-pillar-label { font-family: var(--jbmono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ov-deep); background: var(--ov-tint); padding: .25rem .6rem; border-radius: 99px; }
.ov-pillar h3 { font-size: 1.2rem; margin: 1rem 0 .9rem; }
.ov-pillar ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.ov-pillar li { position: relative; padding-left: 1.4rem; font-size: .92rem; color: var(--ink-60); line-height: 1.45; }
.ov-pillar li::before { content: "✓"; position: absolute; left: 0; color: var(--ov); font-weight: 700; }
@media (max-width: 60rem) { .ov-pillars { grid-template-columns: 1fr; } }

/* steps */
.ov-step-n { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--ov-tint); color: var(--ov-deep); font-family: var(--jbmono); font-weight: 700; }

/* searchable demo */
.ov-demo-sec { background: var(--bg-soft); }
.ov-demo { max-width: 50rem; margin: 0 auto; }
.ov-demo-bar { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1.1rem; }
.ov-demo-bar .q-icon { font-family: var(--jbmono); color: var(--ov); font-size: 1.1rem; }
.ov-demo-bar p { color: var(--ink); }
.ov-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1.1rem; }
.ov-filter { font-size: .78rem; color: var(--ink-60); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .35rem .75rem; }
.ov-rows { display: flex; flex-direction: column; gap: .55rem; }
.ov-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .85rem 1.1rem; }
.ov-row-main b { display: block; font-size: .96rem; }
.ov-row-main span { font-size: .82rem; color: var(--ink-60); }

/* moat */

/* faq */
.ov-faq { max-width: 50rem; display: flex; flex-direction: column; gap: .6rem; }
.ov-faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1.2rem; }
.ov-faq-item summary { font-weight: 600; cursor: pointer; list-style: none; }
.ov-faq-item summary::-webkit-details-marker { display: none; }
.ov-faq-item summary::after { content: "+"; float: right; color: var(--ov); font-weight: 700; }
.ov-faq-item[open] summary::after { content: "–"; }
.ov-faq-item p { margin-top: .7rem; color: var(--ink-60); font-size: .93rem; line-height: 1.6; }



/* ── hub only (/data/overheid) ─────────────────────────────────────────────── */

.ovh-hero-copy { max-width: 44rem; }
.ovh-hero-copy .ov-lede { max-width: 40rem; }

.ovh-asof { margin-top: 1rem; font-family: var(--jbmono); font-size: .74rem; color: var(--ink-60); }
.ovh-asof a { color: var(--blue-deep); }

/* stream cards → the three product pages. Accent comes from .ov-<accent> on the
   card itself, so each stream keeps the colour of its own page. */
.ovh-streams { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.ovh-stream { display: block; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--ov); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.6rem; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.ovh-stream:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ovh-stream--soon { opacity: .72; }
.ovh-stream-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ovh-stream-head h3 { font-size: 1.25rem; }
.ovh-stream-n { font-family: var(--jbmono); font-size: .8rem; color: var(--ov-deep); background: var(--ov-tint); padding: .25rem .6rem; border-radius: 99px; white-space: nowrap; }
.ovh-stream-what { margin-top: .8rem; color: var(--ink-60); font-size: .93rem; line-height: 1.6; }
.ovh-stream-signal { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-60); line-height: 1.55; }
.ovh-stream-signal b { display: block; font-family: var(--jbmono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: .3rem; }
.ovh-stream-go { display: inline-block; margin-top: 1rem; font-size: .88rem; font-weight: 600; color: var(--ov-deep); }

/* AVG posture — what we deliberately leave out */
.ovh-avg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.ovh-avg-item { background: var(--bg-soft); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.ovh-avg-item h3 { font-size: 1.02rem; line-height: 1.35; }
.ovh-avg-item p { margin-top: .7rem; color: var(--ink-60); font-size: .9rem; line-height: 1.6; }

@media (max-width: 60rem) {
  .ovh-streams, .ovh-avg { grid-template-columns: 1fr; }
}