/* -------------------------------------------------------------------------
   Pages, blog, comments, 404 and the shared entry-content styles.
   ---------------------------------------------------------------------- */

.fb-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.fb-no-sidebar .fb-blog-layout { grid-template-columns: minmax(0, 1fr); }

/* --- Entry ------------------------------------------------------------- */
/* Bullet + a calmer size for the article heading; the comment-form heading
   takes a divider instead. */
.fb-entry__title {
	margin-bottom: .35em;
	font-size: clamp(1.5rem, 2.8vw, 2.125rem);
}

.fb-entry__title::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin: -.1em 10px 0 0;
	border-radius: 50%;
	background: var(--fb-black);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}

.fb-comments .comment-reply-title {
	display: block;
	margin-bottom: .8em;
	font-size: 1.25rem;
	font-weight: 700;
}

.fb-comments .comment-reply-title::after {
	content: "";
	display: block;
	width: 190px;
	max-width: 100%;
	height: 1px;
	margin-top: .45em;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	animation: fb-divider-glow-dark 2.6s ease-in-out infinite;
}

.fb-entry__thumb {
	margin: 0 0 28px;
	border-radius: var(--fb-radius-lg);
	overflow: hidden;
}

.entry-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	color: var(--fb-text-muted);
	font-size: .8125rem;
}

/* Hairline between the article title and its byline, matching the rule above
   the post navigation. */
.fb-entry .entry-meta {
	padding-top: 14px;
	border-top: 1px solid var(--fb-border);
}

/* Pages have no byline, so the same rule sits under the title instead. Shop
   pages are excluded: their title lives in the page header, not the article. */
.fb-entry.type-page:not(.fb-entry--shop) .entry-content {
	padding-top: 16px;
	border-top: 1px solid var(--fb-border);
}

/* One section gap for every heading level, so an article set in h4 sits at
   the same distance as one set in h3. Stated in rem, not em, or each level's
   own font size would change the spacing. */
.fb-entry.type-page .entry-content h2,
.fb-entry.type-page .entry-content h3,
.fb-entry.type-page .entry-content h4 {
	margin-top: 2.45rem;
}

/* Section headings inside a page carry the theme's divider, so long documents
   like the terms and privacy pages read as clearly separated sections. */
/* Privacy is the exception: its top-level sections take the bullet instead. */
.page-privacyverklaring .fb-entry.type-page .entry-content h2::after { display: none; }

.page-privacyverklaring .fb-entry.type-page .entry-content h2::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin: -.1em 10px 0 0;
	border-radius: 50%;
	background: var(--fb-black);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}

/* Section headings inside a page take the theme's divider, so long documents
   like the terms and returns pages read as clearly separated sections. */
.fb-entry.type-page .entry-content h2::after,
.fb-entry.type-page .entry-content h3::after,
.fb-entry.type-page .entry-content h4::after {
	content: "";
	display: block;
	width: 190px;
	max-width: 100%;
	height: 1px;
	margin-top: .45em;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	animation: fb-divider-glow-dark 2.6s ease-in-out infinite;
}

/* Article headings sit a step down from the global scale, in proportion with
   the reduced post title. */
.entry-content h2 {
	margin-top: 1.6em;
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

.entry-content h3 {
	margin-top: 1.4em;
	font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
}

.entry-content h4 { font-size: 1.0625rem; }

.entry-content ul,
.entry-content ol { margin-bottom: 1.4em; }

.entry-content li { margin-bottom: .4em; }

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content img { border-radius: var(--fb-radius); }

/* Articles carry the same divider under their section headings as the pages
   and the homepage section heads do. */
.fb-entry.type-post .entry-content h2::after,
.fb-entry.type-post .entry-content h3::after {
	content: "";
	display: block;
	width: 190px;
	max-width: 100%;
	height: 1px;
	margin-top: .45em;
	background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
	animation: fb-divider-glow-dark 2.6s ease-in-out infinite;
}

/* Comparison tables in articles. The wrapper scrolls on a phone so the page
   body never does. */
.fb-table-scroll {
	margin-bottom: 1.6em;
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}

.entry-content th,
.entry-content td {
	padding: .7em 1em;
	border-bottom: 1px solid var(--fb-border);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	background: var(--fb-grey-200);
	font-weight: 600;
	white-space: nowrap;
}

.entry-content tbody tr:last-child td { border-bottom: 0; }

.fb-entry__tags {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--fb-border);
	font-size: .8125rem;
}

.fb-entry__tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 4px 12px;
	border-radius: var(--fb-radius-pill);
	background: var(--fb-grey-200);
}

.fb-entry__tags a:hover,
.fb-entry__tags a:focus { color: var(--fb-green-dark); }

/* Listing pages sit closer to their heading — the page header's bottom
   padding and the section's top padding were stacking. */
body.blog .site-main.fb-section,
body.archive .site-main.fb-section,
body.search .site-main.fb-section { padding-top: clamp(14px, 1.8vw, 25px); }

/* Listing pages run their title left. */
body.blog .fb-page-header,
body.archive .fb-page-header,
body.search .fb-page-header { text-align: left; }

body.blog .fb-page-header .fb-section-head,
body.archive .fb-page-header .fb-section-head,
body.search .fb-page-header .fb-section-head { justify-content: flex-start; }

/* --- Post cards -------------------------------------------------------- */
/* Three across on the listing pages, which run full width. */
.fb-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 3.2vw, 44px);
}

/* Carded like the product tiles: bordered, lifting on hover. */
.fb-post-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	background: var(--fb-white);
	overflow: hidden;
	transition: box-shadow var(--fb-transition), border-color var(--fb-transition);
}

.fb-post-card:hover {
	border-color: var(--fb-grey-400);
	box-shadow: var(--fb-shadow-lg);
}

.fb-post-card__media {
	display: block;
	background: transparent;
	overflow: hidden;
}

.fb-post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px 20px 22px;
}

/* Contain, not cover — the whole photo stays visible whatever its ratio,
   while the cards keep a common height. */
.fb-post-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	transition: transform .5s ease;
}

.fb-post-card:hover .fb-post-card__media img { transform: scale(1.03); }

.fb-post-card__cat {
	margin: 0 0 .5em;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.fb-post-card__cat a { color: var(--fb-grey-700); }

.fb-post-card__cat a:hover { color: var(--fb-green-dark); }

.fb-post-card__title {
	margin: 0 0 .45em;
	/* The same hairline the homepage sections open on, sitting the byline and
	   excerpt apart from the headline. */
	padding-bottom: .45em;
	border-bottom: 1px solid var(--fb-grey-300);
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	line-height: 1.3;
}

.fb-post-card__title a { color: var(--fb-black); }

.fb-post-card__title a:hover { color: var(--fb-green-dark); }

.fb-post-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 1em;
	color: var(--fb-text-muted);
	font-size: .75rem;
}

.fb-post-card__sep { color: var(--fb-grey-500); }

.fb-post-card__excerpt {
	margin: 0 0 1.2em;
	color: var(--fb-grey-800);
	font-size: .875rem;
}

.fb-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: auto;
	align-self: flex-start;
	color: var(--fb-black);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.fb-post-card__more:hover,
.fb-post-card:hover .fb-post-card__more { color: var(--fb-green-dark); }

.fb-post-card__more .fb-icon { transition: transform var(--fb-transition); }

.fb-post-card__more:hover .fb-icon,
.fb-post-card:hover .fb-post-card__more .fb-icon { transform: translateX(3px); }

/* --- Sidebar ----------------------------------------------------------- */
.fb-sidebar .widget {
	margin-bottom: 30px;
	padding: 22px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	background: var(--fb-grey-100);
	font-size: .875rem;
}

/* Block widgets wrap their heading in a group, so `.widget-title` alone would
   miss them. */
.widget-title,
.fb-sidebar .widget h2,
.fb-sidebar .widget h3 {
	margin: 0 0 .9em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--fb-grey-300);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.widget-title::before,
.fb-sidebar .widget h2::before,
.fb-sidebar .widget h3::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 8px;
	margin: -.1em 10px 0 0;
	border-radius: 50%;
	background: var(--fb-black);
	box-shadow: 0 0 0 4px rgba(0, 0, 0, .12);
}

/* Recent posts read as a numbered shortlist. */
.fb-sidebar .wp-block-latest-posts {
	counter-reset: fb-recent;
	list-style: none;
	padding-left: 0;
}

.fb-sidebar .wp-block-latest-posts > li {
	display: flex;
	/* Baseline, so the number sits on the same line as the title's first row
	   rather than at the top of the box. */
	align-items: baseline;
	gap: 10px;
	margin-bottom: .7em;
}

.fb-sidebar .wp-block-latest-posts > li::before {
	content: counter(fb-recent) ".";
	counter-increment: fb-recent;
	flex: none;
	/* Same size, colour and weight as the titles beside them — bold read as a
	   darker grey. */
	color: var(--fb-grey-800);
	font-size: inherit;
	font-weight: inherit;
}

.fb-sidebar .widget ul li a { color: var(--fb-grey-800); }

.fb-sidebar .widget ul li a:hover { color: var(--fb-green-dark); }

.fb-sidebar .wp-block-search__inside-wrapper { gap: 8px; }

.fb-sidebar .widget .wp-block-group { margin: 0; }

.fb-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fb-sidebar li { margin-bottom: .5em; }

/* --- Pagination -------------------------------------------------------- */
.fb-pagination { margin-top: 44px; }

.fb-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.fb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius);
	font-size: .875rem;
	font-weight: 600;
}

.fb-pagination .page-numbers.current,
.fb-pagination .page-numbers:hover {
	background: var(--fb-black);
	border-color: var(--fb-black);
	color: var(--fb-white);
}

.fb-icon--rot-90 { transform: rotate(90deg); }
.fb-icon--rot-270 { transform: rotate(-90deg); }

/* --- Post navigation --------------------------------------------------- */
.fb-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--fb-border);
	font-size: .875rem;
	font-weight: 600;
}

.fb-post-nav__next { text-align: right; }

/* --- Comments ---------------------------------------------------------- */
.fb-comments {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--fb-border);
}

.fb-comment-list,
.fb-comment-list .children {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.fb-comment-list .children { margin: 20px 0 0 28px; }

.fb-comment-list li.comment { margin-bottom: 22px; }

.fb-comment-list .comment-body {
	padding: 20px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-lg);
	background: var(--fb-grey-100);
	font-size: .9375rem;
}

.fb-comment-list .comment-meta {
	margin-bottom: .8em;
	font-size: .8125rem;
}

.comment-form { display: grid; gap: 14px; }

.comment-form .form-submit { margin: 0; }

.comment-form .form-submit .fb-btn:hover,
.comment-form .form-submit .fb-btn:focus,
.comment-form .form-submit input[type="submit"]:hover,
.comment-form .form-submit input[type="submit"]:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

/* --- Search again ------------------------------------------------------ */
.fb-search-again { margin-bottom: 34px; }

/* --- No results -------------------------------------------------------- */
.fb-no-results {
	padding: 40px;
	border: 1px dashed var(--fb-border);
	border-radius: var(--fb-radius-lg);
	text-align: center;
}

.fb-no-results .fb-search-form {
	max-width: 460px;
	margin: 24px auto 0;
}

/* --- 404 --------------------------------------------------------------- */
.fb-404__code {
	margin: 0;
	color: var(--fb-grey-300);
	font-size: clamp(5rem, 16vw, 10rem);
	font-weight: 800;
	line-height: 1;
}

.fb-404__title {
	margin-top: .1em;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
}

.fb-404__text {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--fb-text-muted);
}

.fb-404__search {
	max-width: 460px;
	margin: 28px auto 26px;
}

.fb-404__search .fb-search-form__submit:hover,
.fb-404__search .fb-search-form__submit:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

.fb-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.fb-404__actions .fb-btn:hover,
.fb-404__actions .fb-btn:focus {
	background: var(--fb-green-dark);
	border-color: var(--fb-green-dark);
	color: var(--fb-white);
}

.fb-404__links {
	margin-top: clamp(30px, 4vw, 48px);
	padding-top: 22px;
	border-top: 1px solid var(--fb-border);
}

.fb-404__links-label {
	margin-bottom: .8em;
	color: var(--fb-text-muted);
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.fb-404__links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fb-404__links a {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var(--fb-grey-300);
	border-radius: var(--fb-radius-pill);
	background: var(--fb-grey-100);
	font-size: .875rem;
	font-weight: 500;
}

.fb-404__links a:hover {
	border-color: var(--fb-black);
	background: var(--fb-black);
	color: var(--fb-white);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
	.fb-blog-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	.fb-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.fb-post-grid { grid-template-columns: minmax(0, 1fr); }
}