/* ==========================================================================
   Sterker Blog — supplemental CSS
   Everything theme.json cannot express: textures, the lettered logo,
   native <details> accordions, card hovers, the timeline, floating CTA.
   ========================================================================== */

:root {
	--sterker-red: #e64337;
	--sterker-black: #111111;
	--sterker-darkbg: #050505;
	--sterker-darkcard: #121212;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	font-feature-settings: "kern", "liga", "pnum";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}

::selection {
	background: var(--sterker-red);
	color: #fff;
}

/* Subtle noise + clinical grid texture, matching the main site's dark mode */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.3;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.sterker-grid {
	background-image: linear-gradient(#242424 1px, transparent 1px),
		linear-gradient(90deg, #242424 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.25;
}

/* Skip link */
.skip-link {
	position: absolute;
	top: -999px;
	left: 1rem;
	z-index: 999;
	background: var(--sterker-red);
	color: #fff !important;
	padding: 0.75rem 1.25rem;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
}
.skip-link:focus {
	top: 1rem;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--sterker-red);
	outline-offset: 2px;
}

/* ── Lettered wordmark logo (recreates the per-letter font-weight ramp) ── */
.sterker-logo {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--brand);
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: -0.04em;
	color: var(--sterker-red);
	text-decoration: none;
	line-height: 1;
}
.sterker-logo span:nth-child(1) { font-weight: 200; }
.sterker-logo span:nth-child(2) { font-weight: 300; }
.sterker-logo span:nth-child(3) { font-weight: 400; }
.sterker-logo span:nth-child(4) { font-weight: 500; }
.sterker-logo span:nth-child(5) { font-weight: 600; }
.sterker-logo span:nth-child(6) { font-weight: 700; }
.sterker-logo span:nth-child(7) { font-weight: 900; }
.sterker-logo.is-size-large { font-size: 1.75rem; }
footer .sterker-logo { color: var(--sterker-red); }

/* ── Header ── */
/* The blur lives on a ::before instead of directly on .site-header.
   backdrop-filter (like filter/transform/perspective) makes the element it's
   set on a new containing block for any position:fixed descendants. The WP
   core navigation block's mobile overlay is rendered as a fixed-position
   child inside this header, so with backdrop-filter on .site-header itself
   that overlay got trapped inside the ~64px-tall header box instead of
   covering the viewport — which is why the mobile menu looked broken/
   non-functional. Keeping the filter off .site-header avoids that trap. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(5, 5, 5, 0.9);
	border-bottom: 1px solid #1f1f1f;
}
/* Without an explicit z-index, this ::before (a positioned box) painted
   ABOVE the header's normal, non-positioned content (the logo, the nav
   links) — positioned descendants with z-index:auto paint after in-flow
   static content in the same stacking context. That's what made the logo
   look washed out/blurry: the blur layer was sitting on top of it, not
   behind it. z-index:-1 puts it in the "negative z-index" paint layer,
   which paints before (i.e. behind) the header's own in-flow content. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.site-header .wp-block-navigation-item > a {
	transition: color 0.2s ease;
}

/* Keep the logo visible on top of the mobile overlay, the way it stays
   visible on the main site while its menu is open (there, the logo/close
   button live in the same always-on-top nav bar as the overlay slides in
   underneath; here the overlay is a much higher fixed layer, so the logo
   needs an explicit z-index above it or it just gets covered). */
.site-header .sterker-logo {
	position: relative;
	z-index: 1000000;
}

/* Red hover on the regular nav links (Home, Producten, Resultaten, FAQ) —
   matches the main site's hover:text-sterker-red. Explicit selector rather
   than relying on theme.json's elements.link support, since the Navigation
   block doesn't reliably generate that CSS (same lesson as the CTA button
   below). Excludes the CTA button (own white/black hover) and the active
   Blog link (already permanently red + underlined). */
.site-header .wp-block-navigation-item:not(.sterker-cta):not(.is-active) > a:hover,
.site-header .wp-block-navigation-item:not(.sterker-cta):not(.is-active) .wp-block-navigation-item__content:hover,
.site-header a:not([href="https://www.sterkerpersonaltraining.nl/#contact"]):not(.is-active):hover {
	color: var(--sterker-red) !important;
}

/* "Plan je gratis intake" — this is a navigation-link styled to look like the
   real button from the main site (font-brand, uppercase, tracking-widest,
   px-6 py-3, sharp corners, hover-inverts to white/black), not a plain red
   text link. WordPress core renders navigation-link items dynamically, and
   exactly where it places the "sterker-cta" className can vary by version
   (on the <li>, or copied onto the inner <a>/<span>). Rather than bet on
   one DOM shape, this targets the link by its actual href — which is
   always rendered exactly as set in the block attributes — as the primary,
   guaranteed-to-match selector, with the class-based selectors kept as a
   backup for older/newer core markup. All are scoped to .site-header so
   nothing here touches the identically classed CTA buttons in post content. */
.site-header a[href="https://www.sterkerpersonaltraining.nl/#contact"],
.site-header .sterker-cta a,
.site-header .sterker-cta > a,
.site-header .sterker-cta .wp-block-navigation-item__content,
.site-header a.sterker-cta,
.site-header span.sterker-cta > a {
	display: inline-block !important;
	background-color: var(--sterker-red) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--brand) !important;
	font-weight: 700 !important;
	font-size: 0.75rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	line-height: 1 !important;
	padding: 0.9rem 1.75rem !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	transition: background-color 0.3s ease, color 0.3s ease !important;
}
.site-header a[href="https://www.sterkerpersonaltraining.nl/#contact"]:hover,
.site-header .sterker-cta a:hover,
.site-header .sterker-cta > a:hover,
.site-header .sterker-cta .wp-block-navigation-item__content:hover,
.site-header a.sterker-cta:hover,
.site-header span.sterker-cta > a:hover {
	background-color: #fff !important;
	color: var(--sterker-black) !important;
}

/* Current-page indicator — red + underline, matching how the main site
   marks the active page in its navigation. Same href-first, class-backup
   strategy as the CTA button above (the Blog link is always "active"
   here, since this whole site is the blog). */
.site-header .wp-block-navigation-item.is-active > a,
.site-header .wp-block-navigation-item.is-active .wp-block-navigation-item__content,
.site-header a.is-active,
.site-header .is-active > a {
	color: var(--sterker-red) !important;
	text-decoration: underline !important;
	text-decoration-color: var(--sterker-red) !important;
	text-underline-offset: 4px !important;
}

/* Mobile nav overlay — matches the main site's mobile menu: solid black,
   items centered and evenly spaced down the screen, plain white text
   (font-brand, uppercase) with only the active page (Blog) in red. The
   !important calls here are needed for the same reason as the hero
   paragraph above: WordPress's own navigation color (gray-300, from
   theme.json) and the .is-active red+underline rule further up this file
   both carry enough weight that a plain override gets ignored otherwise. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: #000 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-height: 100% !important;
}
/* Centering, forced regardless of whatever display core gives this list —
   width:100% + text-align:center on every level (ul, li, and the link
   itself) means the text ends up centered whether or not core happens to
   make .wp-block-navigation__container a flex container in this state.
   The top spacing above "Home" lives HERE (padding-top, !important) rather
   than as padding on the -content wrapper above: that wrapper relies on
   min-height:100%, which only resolves if every ancestor up the chain has
   an explicit (non-auto) height — in WordPress's actual markup that chain
   breaks somewhere, so min-height:100% silently computes to nothing and
   any padding-top on that box never visibly moves "Home" down. Padding on
   this UL is unconditional (not percentage-based), so it can't fail the
   same way. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100%;
	gap: 2rem;
	padding-top: 6rem !important;
	padding-bottom: 3rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--brand);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 1.25rem;
	font-weight: 300 !important;
	color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-active > a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-active .wp-block-navigation-item__content {
	color: var(--sterker-red) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
/* The CTA is the one item that stays a compact, content-sized button
   (like on the main site) instead of stretching edge-to-edge — the
   width:100%/display:block rule above is meant for the plain text links,
   not this one, so it's undone here specifically. */
.wp-block-navigation__responsive-container.is-menu-open .sterker-cta {
	width: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .sterker-cta > a {
	display: inline-block !important;
	width: auto !important;
	margin-top: 0.5rem;
	padding: 1rem 2rem !important;
	font-weight: 700 !important;
	color: #fff !important;
}

/* Hamburger / close toggle — give it an unambiguous tap target when core
   is actually showing it. IMPORTANT: this must never force `display`.
   WordPress core toggles these buttons between shown/hidden itself (via
   the `hidden` attribute below the responsive breakpoint on desktop, and
   its own JS state on mobile) — an earlier version of this rule used
   `display: inline-flex !important`, which beats the default
   `[hidden] { display: none }` UA rule and made both the hamburger AND
   the close (X) button render permanently on desktop too, on top of the
   normal inline menu. The `:not([hidden])` guard here only ever styles
   the button while core has already decided to show it. */
.site-header .wp-block-navigation__responsive-container-open:not([hidden]),
.site-header .wp-block-navigation__responsive-container-close:not([hidden]) {
	position: relative;
	z-index: 1;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	color: #fff !important;
}
.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* On the main site the close (X) button IS the hamburger button — same
   element, same spot, just a swapped icon — because the overlay slides in
   underneath a nav bar that never moves. Core's navigation block instead
   renders its close button deep inside the modal dialog, wherever the
   dialog itself decides to put it (here: top-left), so on open it visibly
   jumps to a different corner than where it was opened from. Pinning it
   to fixed top-right, at the same offset as .site-header's own padding
   (1rem/1.5rem), puts it back where the hamburger was. */
.site-header .wp-block-navigation__responsive-container-close:not([hidden]) {
	position: fixed !important;
	top: 1rem !important;
	right: 1.5rem !important;
	left: auto !important;
	z-index: 1000000 !important;
}

/* The overlay panel is fixed and should always cover the full viewport
   above everything else, including the sticky header it lives inside. */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 999999 !important;
}

/* ── Eyebrow label — plain body font (Roboto), matching the source: these
   spans never carry a font-brand class on the main site, only headings do. ── */
.sterker-eyebrow {
	display: block;
	color: var(--sterker-red);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

/* ── Cards (query loop / archive) ── */
.sterker-card {
	background: var(--sterker-darkcard);
	border: 1px solid #1f1f1f;
	border-top: 3px solid var(--sterker-red);
	border-radius: 2px;
	transition: border-color 0.3s ease, transform 0.3s ease;
	height: 100%;
}
.sterker-card:hover {
	border-color: var(--sterker-red);
	transform: translateY(-4px);
}
.sterker-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.sterker-card .wp-block-post-title a {
	text-decoration: none;
}
.sterker-card .wp-block-post-title a:hover {
	color: var(--sterker-red);
}

/* Post terms as small pill badges */
.wp-block-post-terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.wp-block-post-terms a {
	text-decoration: none;
	border: 1px solid #2a2a2a;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.wp-block-post-terms a:hover {
	border-color: var(--sterker-red);
	color: var(--sterker-red) !important;
}

/* ── "Meer artikelen" (related posts, bottom of single.html) ──
   Strip any border/outline anywhere in this block, however it got there
   (WordPress's border UI is enabled in theme.json, so a stray border can
   get added from inside the block editor and end up stored on the live
   template in the database, invisible from the theme files alone) — and
   give it a bit more presence than a plain list: a small red rule above
   the "Meer artikelen" label, breathing room, and a slightly larger gap
   between cards than the default query grid uses. */
.sterker-more-articles,
.sterker-more-articles * {
	border-left: none !important;
	border-right: none !important;
	border-bottom: none !important;
	outline: none !important;
	box-shadow: none !important;
}
.sterker-more-articles {
	border-top: 1px solid #1f1f1f !important;
}
.sterker-more-articles .sterker-eyebrow {
	position: relative;
	padding-top: 1.5rem;
	margin-bottom: 0.5rem;
}
.sterker-more-articles .sterker-eyebrow::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2.5rem;
	height: 2px;
	background: var(--sterker-red);
}
.sterker-more-articles .wp-block-post-template {
	gap: 2rem !important;
}
.sterker-more-articles .sterker-card {
	border-top: 3px solid var(--sterker-red) !important;
}

/* ── FAQ / native accordion (used inside post content or patterns) ── */
.sterker-accordion {
	border: 1px solid #1f1f1f;
	border-radius: 2px;
	background: transparent;
}
.sterker-accordion + .sterker-accordion {
	margin-top: 0.75rem;
}
.sterker-accordion summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.5rem;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1rem;
	color: #fff;
}
.sterker-accordion summary::-webkit-details-marker { display: none; }
.sterker-accordion summary::after {
	content: "+";
	color: var(--sterker-red);
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.sterker-accordion[open] summary::after {
	content: "\2212";
}
.sterker-accordion summary:hover {
	color: var(--sterker-red);
}
.sterker-accordion-content {
	padding: 0 1.5rem 1.25rem;
	color: #9ca3af;
	font-weight: 300;
	line-height: 1.7;
}

/* ── Numbered timeline (methodology-style steps) ── */
.sterker-timeline {
	position: relative;
}
.sterker-timeline .sterker-step {
	position: relative;
	display: flex;
	gap: 1.5rem;
	padding-bottom: 2.5rem;
}
.sterker-timeline .sterker-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 1.75rem;
	top: 3.5rem;
	height: calc(100% - 2rem);
	width: 1px;
	background: linear-gradient(to bottom, var(--sterker-red) 0%, rgba(230, 67, 55, 0.1) 100%);
}
.sterker-step-number {
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	background: var(--sterker-red);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 900;
	font-size: 1.25rem;
	position: relative;
	z-index: 1;
}

/* ── Post content typography ── */
.entry-content a {
	text-decoration: underline;
	text-decoration-color: rgba(230, 67, 55, 0.4);
	text-underline-offset: 3px;
}
.entry-content a:hover {
	text-decoration-color: var(--sterker-red);
}
.entry-content img {
	border-radius: 2px;
	border: 1px solid #1f1f1f;
}
.entry-content hr {
	border: none;
	border-top: 1px solid #1f1f1f;
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
}
.entry-content table th,
.entry-content table td {
	border: 1px solid #1f1f1f;
	padding: 0.6rem 0.9rem;
}
.entry-content table th {
	font-family: var(--wp--preset--font-family--brand);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}
.entry-content code {
	background: var(--sterker-darkcard);
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	font-size: 0.9em;
}

/* Author box */
.sterker-author-box {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border: 1px solid #1f1f1f;
	border-top: 3px solid var(--sterker-red);
	padding: 1.5rem;
	border-radius: 2px;
}
.sterker-author-box .avatar {
	border-radius: 999px;
}

/* Pagination */
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-decoration: none !important;
}
.wp-block-query-pagination-numbers .current {
	color: var(--sterker-red);
}

/* Search field (matches the contact form's underline-input styling) */
.wp-block-search__input {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid #374151 !important;
	border-radius: 0 !important;
	color: #fff !important;
	padding: 0.9rem 0 !important;
}
.wp-block-search__input:focus {
	outline: none !important;
	border-bottom-color: var(--sterker-red) !important;
}
.wp-block-search__button {
	background: var(--sterker-red) !important;
	border-radius: 2px !important;
}

/* Floating WhatsApp / back-to-site button */
.sterker-float {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 99;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 999px;
	background: var(--sterker-darkcard);
	border: 2px solid #1f1f1f;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.3s ease;
	text-decoration: none;
}
.sterker-float:hover {
	border-color: var(--sterker-red);
}
.sterker-float svg {
	width: 1.6rem;
	height: 1.6rem;
	fill: #25d366;
}

/* Reveal-on-scroll — visible by default so content never depends on JS.
   assets/js/reveal.js arms elements only after it has confirmed it can
   observe them, then animates them in on scroll. */
.sterker-reveal {
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sterker-reveal.sterker-armed {
	opacity: 0;
	transform: translateY(16px);
}
.sterker-reveal.sterker-armed.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.sterker-reveal.sterker-armed { opacity: 1; transform: none; }
}

/* ── Hero lead paragraph (home.html intro) ──
   The block editor sets a fixed fontSize="large" (1.25rem) so it renders
   at the same size on every viewport. The main site never does this for
   hero subtext — it's mobile-first (text-base sm:text-lg md:text-xl, i.e.
   16px → 18px → 20px), which is why this paragraph reads noticeably
   oversized on phones by comparison. Re-scale it down for small screens
   and step it back up to match the main site's breakpoints.
   NOTE: WordPress emits its font-size utility classes (.has-large-font-size
   etc.) WITH !important, specifically so themes can't accidentally override
   them with a merely-more-specific selector — that's why the first version
   of this rule (no !important) had no visible effect at all. Matching it
   with !important here is required, not optional. */
p.sterker-hero-lead {
	font-size: 1rem !important;
}
@media (min-width: 640px) {
	p.sterker-hero-lead {
		font-size: 1.125rem !important;
	}
}
@media (min-width: 768px) {
	p.sterker-hero-lead {
		font-size: 1.25rem !important;
	}
}

/* 404 / no results */
.sterker-404-code {
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 900;
	font-size: clamp(4rem, 15vw, 10rem);
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
	line-height: 1;
}