/* Berichten - the brand foundations for a post with a page of its own.

   Shared by every post under resources/views/blog/posts/. Lifted from the
   design artifact of the first one (the GPEP II interview, October 2026) and
   scoped to #post-page, the wrapper around the post, for the same reason as
   the pool pages' page.css: unscoped, the artifact's html, h1-h6, p and a
   rules would restyle the site header and footer, and the site's own element
   rules would reach into the post. See docs/berichten.md.

   Published to public/posts/ by npm run copy-assets. */

/* The site styles bare elements this post also uses: <label> sits off-canvas,
   h1 carries a min-height, and paragraphs directly in a section get a bottom
   padding. #post-page outranks every one of them. */
#post-page h1 { min-height: 0; }
#post-page section > p,
#post-page section > h3,
#post-page section > ul,
#post-page section > figure,
#post-page article > p { padding-block-end: 0; }
#post-page ul { list-style: none; }
#post-page img { max-width: none; }

/* ============================================================
   WMP — Wealth Management Partners
   Colors & Type foundations
   Source of truth: WMP Brandbook — versie september 2026
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url("/posts/fonts/avenir-next-lt-pro-regular.otf") format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir Next LT Pro';
  src: url("/posts/fonts/avenir-next-lt-pro-demi.otf") format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Digital fallbacks (§6.4, september 2026).
   Where Avenir Next LT Pro is unavailable (e-mail, website, LinkedIn) the brandbook
   names ARIAL as the primary alternative. Nunito Sans and DM Sans are listed as
   sanctioned free Google Fonts. DM Sans stays loaded because existing WMP
   deliverables reference it by name; it is no longer the default. */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/posts/fonts/dm-sans-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/posts/fonts/dm-sans-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/posts/fonts/dm-sans-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/posts/fonts/dm-sans-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/posts/fonts/dm-sans-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/posts/fonts/dm-sans-latin.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/posts/fonts/dm-sans-latin-ext.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/posts/fonts/dm-sans-latin.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;
}


#post-page {

  /* ---------- Color palette (brandbook §6.3, versie 0630) ---------- */

  /* PRIMARY — these carry the brand (§6.3) */
  --wmp-navy:        #202A52;   /* Donkerblauw — the brand color, used everywhere */
  --wmp-white:       #FFFFFF;
  --wmp-red:         #E63212;   /* Accent rood — sparing, decisive accents */

  /* Achtergrondkleur — soft off-white surface (not a brand-carrying color) */
  --wmp-light-grey:  #F5F4F4;   /* Lichtgrijs — secondary surface / achtergrond */

  /* EXTRA PALETTE — grafieken en blokken (§6.3). Variation only; never carries
     the brand alone. */
  --wmp-indigo:      #495497;   /* Indigoblauw */
  --wmp-savoy:       #5269BB;   /* Savoy blauw */
  --wmp-blue-grey:   #B3AEBE;   /* Zacht blauwgrijs */
  --wmp-taupe-light: #A39689;   /* Taupe */
  --wmp-green:       #217B63;   /* Groen (nieuw, september 2026) */
  --wmp-dark-red:    #AD260E;   /* Donker rood — DS-derived hover/pressed state,
                                   not a brandbook palette swatch */

  /* Body-copy taupe — retained from §6.4 typography (tekstkleur), niet in palet-swatches */
  --wmp-taupe:       #5A5046;   /* Warm grijs / taupe — body copy color */

  /* ---------- Semantic foundation ---------- */

  /* Surfaces */
  --bg:              var(--wmp-white);
  --bg-soft:         var(--wmp-light-grey);
  --bg-inverse:      var(--wmp-navy);
  --bg-tint-blue:    var(--wmp-blue-grey);
  --bg-tint-savoy:   var(--wmp-savoy);

  /* Chart series order — extra palette, §6.3 */
  --chart-1:         var(--wmp-navy);
  --chart-2:         var(--wmp-indigo);
  --chart-3:         var(--wmp-savoy);
  --chart-4:         var(--wmp-blue-grey);
  --chart-5:         var(--wmp-taupe-light);
  --chart-6:         var(--wmp-green);

  /* Foregrounds */
  --fg:              var(--wmp-taupe);          /* default body text */
  --fg-strong:       var(--wmp-navy);           /* headings, key figures */
  --fg-muted:        #8A8278;                   /* taupe lightened, for captions */
  --fg-on-dark:      var(--wmp-white);
  --fg-on-dark-muted:rgba(255,255,255,0.72);

  /* Accent — buttons & primary accents use the deeper donker rood;
     E63212 is reserved for thin rules, chart highlights, hover/active flashes. */
  --accent:          var(--wmp-dark-red);
  --accent-hover:    #8E1F0B;                   /* one notch deeper for hover/pressed */
  --accent-bright:   var(--wmp-red);            /* brighter accent — rules, highlights */
  --accent-soft:     #F7E2DC;                   /* very soft red wash */

  /* Borders & rules */
  --border:          #E5E4E0;                   /* hairline on light bg */
  --border-strong:   #C9C5BC;
  --border-on-dark:  rgba(255,255,255,0.18);

  /* Focus ring */
  --focus:           rgba(73,84,151,0.45);      /* indigo @ 45% */

  /* Image filter (brandbook §7: hoofdstuk-beelden krijgen 65% filter) */
  --image-overlay:   rgba(32,42,82,0.65);

  /* ---------- Type foundation ---------- */

  --font-sans:       'Avenir Next LT Pro', Arial, Helvetica, sans-serif;
  /* Google-font route, for surfaces that prefer a webfont over Arial */
  --font-sans-google:'Avenir Next LT Pro', 'DM Sans', 'Nunito Sans', Arial, sans-serif;
  --font-display:    var(--font-sans);          /* WMP uses one family throughout */

  --weight-regular:  400;
  --weight-demi:     600;                       /* Avenir Next "Demi" maps to 600 */

  /* Brandbook §6.4 specifies pt sizes for print.
     Web mapping below scales them proportionally with a 16px body baseline. */
  --type-chapter:    54px;   /* Titel-/hoofdstukpagina  · wit op donkerblauw  */
  --type-subtitle:   20px;   /* Subtitel op titelpagina · wit                 */
  --type-h1:         44px;   /* large hero / cover titles                     */
  --type-h2:         32px;   /* section titles                                */
  --type-h3:         24px;   /* sub-section / kop                             */
  --type-h4:         18px;   /* tussenkop                                     */
  --type-body:       16px;   /* lopende alinea's                              */
  --type-small:      14px;
  --type-caption:    12px;   /* labels                                        */
  --type-footnote:   11px;   /* voetnoot — italic                             */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-loose:   1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* eyebrow / label uppercase tracking          */

  /* ---------- Spacing & layout ---------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* WMP visual language is restrained — corners are mostly square or barely rounded */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-lg:    8px;
  --radius-pill:  999px;

  /* Shadows are subtle — premium brands don't shout */
  --shadow-sm:  0 1px 2px rgba(32,42,82,0.06);
  --shadow-md:  0 4px 16px rgba(32,42,82,0.08);
  --shadow-lg:  0 18px 48px rgba(32,42,82,0.12);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);  /* @kind other */
  --dur-fast:      120ms;  /* @kind other */
  --dur-base:      220ms;  /* @kind other */
  --dur-slow:      420ms;  /* @kind other */
}

/* ============================================================
   Element defaults
   ============================================================ */

#post-page {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#post-page h1, #post-page h2, #post-page h3, #post-page h4, #post-page h5, #post-page h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: var(--weight-demi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

#post-page h1 { font-size: var(--type-h1); }
#post-page h2 { font-size: var(--type-h2); }
#post-page h3 { font-size: var(--type-h3); letter-spacing: var(--tracking-normal); }
#post-page h4 { font-size: var(--type-h4); letter-spacing: var(--tracking-normal); }

#post-page p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

#post-page a {
  color: var(--fg-strong);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
#post-page a:hover { color: var(--accent); }

#post-page small, #post-page .footnote {
  font-size: var(--type-footnote);
  font-style: italic;
  color: var(--fg-muted);
}

/* ============================================================
   Utilities
   ============================================================ */

#post-page .eyebrow {
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
  font-weight: var(--weight-demi);
}

/* §6.3 — accent rules: a thin red bar is the brand's primary graphic device,
   echoing the layout under the wordmark in the logo lockup. The stripe is
   ALWAYS the bright accent rood (#E63212) and ALWAYS in a 10:1 aspect ratio. */
#post-page .wmp-accent-bar {
  display: block;
  width: 80px;
  height: 8px;       /* 10:1 ratio — never deviate */
  background: var(--accent-bright);
  border: 0;
  margin: var(--space-4) 0;
}
#post-page .wmp-accent-bar--sm { width: 60px; height: 6px; }
#post-page .wmp-accent-bar--lg { width: 100px; height: 10px; }
#post-page .wmp-accent-bar--xl { width: 120px; height: 12px; }

#post-page .wmp-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* Image with a 65% navy filter — used on chapter dividers per §7 */
#post-page .wmp-image-overlay {
  position: relative;
  overflow: hidden;
}
#post-page .wmp-image-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--image-overlay);
  pointer-events: none;
}

/* ============================================================
   The artifact's own responsive rule, scoped like the rest.
   ============================================================ */
@media (max-width: 640px) {
  #post-page .more-posts { padding-left: 24px !important; padding-right: 24px !important; }
  #post-page .more-posts-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ============================================================
   Phones. The artifact is drawn for a wide screen and has no rules of its own
   below 640px beyond the one above, so these are ours. They only narrow the
   gutters and let the bar chart wrap its labels; nothing changes on a wider
   screen. The !important is what outranks the artifact's inline styles.
   ============================================================ */
@media (max-width: 640px) {
  #post-page .post-gutter { padding-left: 24px !important; padding-right: 24px !important; }
  #post-page article { padding-left: 24px !important; padding-right: 24px !important; }
  #post-page .post-box { padding-left: 20px !important; padding-right: 20px !important; }
  #post-page .post-quote { margin-left: 24px !important; margin-right: 24px !important; padding-right: 0 !important; }
  #post-page .post-quote blockquote { font-size: 24px !important; }
  /* Label on a row of its own, bar and value beside each other below it. */
  #post-page .post-bar-row { grid-template-columns: 1fr auto !important; gap: 6px 14px !important; }
  #post-page .post-bar-row > :first-child { grid-column: 1 / -1; }
}