/* The municipality guide (/gemeenten and its chapters), on top of site.css.
   Screenshots come from ops/guide/render.py; never edit them by hand.

   Every class that shares its element with .wrap sets padding-block only:
   a four-side padding shorthand there resets .wrap's side gutter
   (ops/css/check-wrap-padding.py guards it). */

/* Chapter navigation: the four chapters, the current one marked. */
.gnav{background:#fff; border-bottom:1px solid var(--line);}
.gnav ol{display:flex; gap:6px; list-style:none; margin:0; padding-block:10px; overflow-x:auto;
  scrollbar-width:thin;}
.gnav li{margin:0; flex:none;}
.gnav a{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px;
  border-radius:999px; text-decoration:none; color:var(--primary-text); font:600 1rem "Lexend","Segoe UI",sans-serif;}
.gnav a b{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--info-bg); color:#0C4A5E; font-size:0.875rem;}
.gnav a:hover{background:var(--info-bg);}
.gnav a[aria-current="page"]{background:var(--primary); color:#fff;}
.gnav a[aria-current="page"] b{background:#fff; color:var(--primary-text);}

.lead{font-size:1.25rem; max-width:62ch;}
.note{background:var(--info-bg); color:#0C4A5E; border-radius:12px; padding:14px 18px; max-width:70ch;
  font-size:1rem; margin:0 0 13px;}

/* Text beside its screenshot; stacked on narrow screens. */
.split{display:grid; gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:start;
  margin-top:18px;}
.split.phone{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
.split + .split{margin-top:34px;}
@media (max-width:860px){ .split,.split.phone{grid-template-columns:1fr;} }

/* Screenshots. The frame says which surface it is: browser or phone. */
figure.shot{margin:0;}
figure.shot img{display:block; width:100%; height:auto;}
figure.shot figcaption{color:var(--ink-2); font-size:0.9375rem; margin-top:8px; max-width:60ch;}
.browser{border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 10px 28px rgba(18,59,74,.10);}
.browser::before{content:""; display:block; height:26px; border-bottom:1px solid var(--line);
  background:#F1F6F7 radial-gradient(circle,#C9D8DC 4px,transparent 4.5px) 10px 50%/16px 26px repeat-x;
  background-size:16px 26px; background-position:12px 0;}
.browser::before{background-image:radial-gradient(circle at 8px 13px,#E07A6E 4px,transparent 4.5px),
  radial-gradient(circle at 24px 13px,#E8C15A 4px,transparent 4.5px),
  radial-gradient(circle at 40px 13px,#6FBF73 4px,transparent 4.5px); background-repeat:no-repeat;
  background-size:auto; background-position:4px 0;}
.phone{max-width:250px; margin-inline:auto; border:9px solid var(--ink-strong); border-radius:30px;
  overflow:hidden; background:var(--ink-strong); box-shadow:0 10px 28px rgba(18,59,74,.16);}
.phones{display:grid; gap:22px 18px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  margin-top:18px; align-items:start;}
.phones figure.shot figcaption{text-align:center; margin-inline:auto;}

/* Numbered steps. */
ol.steps{counter-reset:s; padding-left:0; list-style:none; margin:0; max-width:70ch;}
ol.steps li{counter-increment:s; position:relative; padding:6px 0 6px 46px; margin:0 0 6px;}
ol.steps li::before{content:counter(s); position:absolute; left:0; top:6px; width:30px; height:30px;
  border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center;
  justify-content:center; font:600 1rem "Lexend","Segoe UI",sans-serif;}

/* The whole journey on one line of cards. */
.journey{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  counter-reset:j; list-style:none; padding:0; margin:18px 0 0;}
.journey li{counter-increment:j; background:var(--card); border:1.5px solid var(--line); border-radius:16px;
  padding:16px 16px 14px; margin:0; max-width:none; position:relative;}
.band.alt .journey li{background:var(--bg);}
.journey li::before{content:counter(j); display:flex; align-items:center; justify-content:center; width:32px;
  height:32px; border-radius:50%; background:var(--primary); color:#fff; margin-bottom:10px;
  font:600 1rem "Lexend","Segoe UI",sans-serif;}
.journey b{display:block; font-family:"Lexend","Segoe UI",sans-serif; color:var(--ink-strong); margin-bottom:4px;}
.journey span{display:block; color:var(--ink-2); font-size:0.9688rem; line-height:1.5;}
.journey li.video{border-color:var(--primary);}

/* Chapter cards on the overview. */
.chapters{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:18px;}
.chapter{display:flex; flex-direction:column; background:var(--card); border:1.5px solid var(--line);
  border-radius:16px; overflow:hidden; text-decoration:none; color:inherit;}
.chapter:hover{border-color:var(--primary);}
.chapter:focus-visible{outline:4px solid var(--ink); outline-offset:2px;}
.chapter .pic{aspect-ratio:16/10; background:var(--info-bg); overflow:hidden;}
.chapter .pic img{width:100%; height:100%; object-fit:cover; object-position:top left; display:block;}
.chapter .pic.phoneish{display:flex; justify-content:center; padding-top:16px;}
.chapter .pic.phoneish img{width:46%; height:auto; object-fit:initial; border-radius:14px 14px 0 0;
  border:6px solid var(--ink-strong); border-bottom:0;}
/* A long phone page shown at the height of the others, from the top. */
.phone.crop img{aspect-ratio:600/1298; object-fit:cover; object-position:top;}
.chapter .txt{padding:16px 18px 18px;}
.chapter h3{margin-bottom:6px;}
.chapter p{color:var(--ink-2); font-size:1rem; margin:0 0 10px;}
.chapter .go{color:var(--primary-text); font-weight:600;}

.chip.info{background:var(--info-bg); color:#0C4A5E;}
code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:0.9em; background:var(--info-bg);
  border-radius:6px; padding:2px 7px; color:#0C4A5E;}
dl.terms{display:grid; grid-template-columns:minmax(150px,max-content) 1fr; gap:8px 18px; margin:0; max-width:70ch;}
dl.terms dt{font-weight:600; color:var(--ink-strong);}
dl.terms dd{margin:0; color:var(--ink);}
@media (max-width:600px){ dl.terms{grid-template-columns:1fr;} dl.terms dd{margin-bottom:8px;} }

/* Previous / next chapter. */
.pager{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:26px 0;}
.pager a{display:flex; flex-direction:column; gap:2px; min-height:52px; padding:12px 18px; border-radius:12px;
  border:2px solid var(--primary); text-decoration:none; color:var(--primary-text); background:#fff;
  font:600 1.0625rem "Lexend","Segoe UI",sans-serif;}
.pager a span{font:400 0.9375rem "Source Sans 3","Segoe UI",sans-serif; color:var(--ink-2);}
.pager a.next{margin-left:auto; text-align:right;}