/*
 * Recreates the WordPress.com "Fewer" block theme (Automattic, GPL) that bakfiets.bike
 * used, from the design tokens in its theme.json: colors, Epilogue type scale, spacing,
 * and the 1/3 + 2/3 column layouts. Epilogue is self-hosted under the SIL OFL
 * (assets/fonts/OFL.txt).
 */

@font-face {
  font-family: Epilogue;
  font-style: normal;
  font-weight: 100 900;
  font-display: fallback;
  src: url("../fonts/epilogue-latin.woff2") format("woff2");
}
@font-face {
  font-family: Epilogue;
  font-style: italic;
  font-weight: 100 900;
  font-display: fallback;
  src: url("../fonts/epilogue-latin-italic.woff2") format("woff2");
}

:root {
  /* Colors */
  --color-background: #f5f5f5;
  --color-foreground: #000000;
  --color-primary: #000000;
  --color-secondary: #767676;
  --color-tertiary: #e6e6e6;

  /* Type scale */
  --font-body: Epilogue, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-body: clamp(0.918rem, 0.918rem + ((1vw - 0.2rem) * 1.087), 1.38rem);
  --fs-small: clamp(0.825rem, 0.825rem + ((1vw - 0.2rem) * 0.56), 1.0625rem);
  --fs-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.588), 1.25rem);
  --fs-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.588), 2rem);
  --fs-x-large: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 1.176), 3rem);
  --fs-excerpt: clamp(1.146rem, 1.146rem + ((1vw - 0.2rem) * 1.539), 1.8rem);
  --fs-terms: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.059), 0.9rem);
  --fs-date: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.153), 0.94rem);

  /* Spacing */
  --space-20: 0.44rem;
  --space-30: 0.67rem;
  --space-40: 1rem;
  --space-50: 1.5rem;
  --space-60: 2.25rem;
  --space-70: 3.38rem;
  --space-80: 5.06rem;
  --gap: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
}

p { letter-spacing: -0.01em; margin: 0 0 var(--gap); }

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 var(--gap);
}
h1 { font-size: var(--fs-x-large); }
h2 { font-size: var(--fs-large); }
h3 { font-size: clamp(1.188rem, 1.188rem + ((1vw - 0.2rem) * 1.628), 1.88rem); }
h4 { font-size: clamp(1.055rem, 1.055rem + ((1vw - 0.2rem) * 1.353), 1.63rem); }
h5 { font-size: var(--fs-body); }
h6 { font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.882), 1.25rem); }

strong, b { font-weight: bolder; } /* 300 -> 400, as Fewer renders it */

a { color: var(--color-primary); }
a:hover { text-decoration: none; }

img { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--space-40);
  top: var(--space-40);
  z-index: 10;
  padding: var(--space-30) var(--space-40);
  background: var(--color-background);
}

.button {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-background);
  font-size: 16px;
  padding: 15px 23px;
  text-decoration: none;
}
.button:hover { background-color: var(--color-secondary); }
.button:focus { outline: 1px dotted var(--color-primary); outline-offset: 2px; }

/* Columns: WordPress's columns block. Side by side from 782px, stacked below. */
.cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding-left: var(--space-50);
  padding-right: var(--space-50);
}
.col { flex: 0 0 100%; min-width: 0; }
.col > :last-child { margin-bottom: 0; }
.col:empty { display: none; }

@media (min-width: 782px) {
  .cols { flex-wrap: nowrap; }
  .col { flex: 1 1 0; }
  .col:empty { display: block; }
  .w-15 { flex: 0 1 15%; }
  .w-17 { flex: 0 1 16.67%; }
  .w-33 { flex: 0 1 33.33%; }
  .w-35 { flex: 0 1 35%; }
  .w-50 { flex: 0 1 50%; }
  .w-55 { flex: 0 1 55%; }
  .w-65 { flex: 0 1 65%; }
  .w-67 { flex: 0 1 66.67%; }
}

/* Header */
.site-header { border-bottom: 1px solid var(--color-primary); }
.site-header .cols {
  align-items: center;
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}
/* The header row never stacks, as in Fewer. */
.cols-nostack { flex-wrap: nowrap; }
.cols-nostack > .w-33 { flex: 0 1 33.33%; }
.cols-nostack > .w-67 { flex: 0 1 66.67%; }
.site-title { margin: 0; font-size: var(--fs-medium); font-weight: 300; }
.site-title a, .site-nav a { text-decoration: none; }
.site-title a:hover, .site-nav a:hover { text-decoration: underline; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-30) var(--gap);
}

.spacer-80 { height: var(--space-80); }

main { min-height: 50vh; margin-top: var(--gap); }

/* Footer */
.site-footer {
  margin-top: var(--space-80);
  border-top: 1px solid var(--color-primary);
}
.site-footer .cols { padding-top: var(--space-60); padding-bottom: var(--space-60); }

/* Home: intro column + post grid */
.home-intro .subscribe { text-align: center; }

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.post-card { display: flex; flex-direction: column; gap: 0.44rem; }
.post-card-image { margin: 0 0 0.94rem; }
.post-card-image img { display: block; width: 100%; height: auto; object-fit: cover; }
.post-card-title { margin: 0; font-size: var(--fs-body); }
.post-card-title.is-large { font-size: clamp(1.188rem, 1.188rem + ((1vw - 0.2rem) * 1.0), 1.6rem); }
.post-card-title a { text-decoration: none; }
.post-card-title a:hover { text-decoration: underline; }

.post-terms { font-size: var(--fs-terms); color: var(--color-secondary); }
.post-terms a { color: var(--color-secondary); }
.post-terms.is-foreground, .post-terms.is-foreground a { color: var(--color-foreground); }
.post-terms .sep { color: var(--color-secondary); }

/* Single post */
.post-header {
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: var(--space-80);
}
.post-meta { padding-top: var(--space-20); }
.byline { margin: var(--space-40) 0 0; font-size: var(--fs-small); color: var(--color-secondary); }
.byline time { font-size: var(--fs-date); }
.post-title { margin: 0; font-size: var(--fs-x-large); }
.post-body { padding-top: calc(var(--space-50) * 2); }
.post-excerpt { font-size: var(--fs-excerpt); margin-bottom: var(--space-50); }
.post-footer {
  margin-top: var(--space-80);
  border-top: 1px solid var(--color-primary);
  padding-top: var(--space-60);
}
.tags-label { color: var(--color-secondary); margin-bottom: var(--space-30); }

.page-title { margin: 0; font-size: var(--fs-x-large); }
.archive .page-title { margin-bottom: var(--space-70); }

/* Post content flow */
.entry-content > * { margin-top: 0; margin-bottom: var(--gap); }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content img { display: block; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content blockquote {
  margin-left: 0;
  padding-left: var(--space-50);
  border-left: 1px solid var(--color-primary);
}
.entry-content pre, .entry-content code { font-size: 0.9em; }
.entry-content pre { overflow-x: auto; padding: var(--space-40); background: var(--color-tertiary); }

/* WordPress media & text block (image beside text) */
.wp-block-media-text {
  display: grid;
  grid-template-columns: 50% 1fr;
  grid-template-rows: auto;
}
.wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; }
.wp-block-media-text__media { grid-column: 1; grid-row: 1; margin: 0; align-self: center; }
.wp-block-media-text__content {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 0 8%;
  word-break: break-word;
}
.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media { grid-column: 2; }
.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content { grid-column: 1; }
.wp-block-media-text.is-vertically-aligned-top > * { align-self: start; }
.wp-block-media-text.is-vertically-aligned-bottom > * { align-self: end; }
.wp-block-media-text__media img { width: 100%; height: auto; vertical-align: middle; }
.wp-block-media-text__content p { margin: 1em 0; }

@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100% !important; }
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { grid-column: 1; grid-row: 2; padding: var(--space-40) 0 0; }
}