/*
Theme Name: Future Vermogensplanning
Template: agency-theme
Author: WP SEO AI Web Agency
Author URI: https://wpseoai.agency
Description: Child theme for Future Vermogensplanning: ACF Free flat layouts over the shared Agency Theme parent, rendering the captured Wix design 1:1 (self-hosted Montserrat fonts, design CSS, section vocabulary). Every editable value is a top-level ACF field; posts, archive, search and the empty state are design-matched.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: futurevermogensplanning
Tags: custom-menu, featured-images, translation-ready
*/

/*
 * Brand tokens.
 *
 * The visual system is owned by the captured design stylesheets (loaded in
 * functions.php). These tokens document the brand palette and are used by the
 * small child layer below and by the post-content typography.
 */
:root {
	--wpsa-color-accent: #e9530d;          /* primary orange */
	--wpsa-color-accent-hover: #c7440a;
	--wpsa-color-accent-contrast: #ffffff;
	--wpsa-color-accent-alt: #98cdab;      /* light mint */
	--wpsa-color-inverse-bg: #243830;      /* dark green section */
	--wpsa-color-inverse-bg-deep: #101b15; /* deepest green */
	--wpsa-color-surface: #edf2f7;         /* light section */
	--wpsa-font-heading: "montserrat-bold", "montserrat", system-ui, sans-serif;
	--wpsa-font-body: "montserrat", system-ui, sans-serif;
}

/*
 * Neutral defaults the captured design relies on, re-asserted after the
 * parent layers so the 1:1 look survives the parent reset.
 */
body {
	margin: 0;
	font-family: var(--wpsa-font-body);
}

/* The capture stamps its own class names; nothing in the parent shell should
   leak layout into it. */
.wpsa-site-header,
.wpsa-site-footer {
	display: contents;
}

/* Main stays a normal block: with display:contents every captured section
   becomes a direct flex item of the design's `.page` (flex column,
   align-items:center; flex:0 0 auto), so sections are sized by their content
   max-width (the `.container{width:1440px}` declaration wins and every
   section bleeds 1440px wide on mobile). A block wrapper gives sections
   normal block flow (fill width) while the chrome wrappers above stay
   transparent to the captured layout. */
.wpsa-site-main {
	display: block;
	min-width: 0;
}

/* Skip link stays keyboard-reachable above the captured header. */
.wpsa-skip-link {
	position: absolute;
	left: 1rem;
	top: 1rem;
	z-index: 1001;
	padding: 0.5rem 1rem;
	background: #101b15;
	color: #ffffff;
	border-radius: 4px;
	transform: translateY(-200%);
	transition: transform 0.15s ease;
}
.wpsa-skip-link:focus {
	transform: translateY(0);
}

/* Visible focus for the capture's own interactive elements. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--wpsa-color-accent);
	outline-offset: 2px;
}

/* Reduced motion: the captured reveal layer already honours the media query;
   keep CSS transitions quiet too. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Post content typography (single posts, search results, 404, and any
 * native prose) styled from the same design system.
 */
.fvp-prose {
	color: #ffffff;
}
.fvp-prose > * + * {
	margin-top: 1.25rem;
}
.fvp-prose h1,
.fvp-prose h2,
.fvp-prose h3,
.fvp-prose h4 {
	font-family: var(--wpsa-font-heading);
	color: #ffffff;
	line-height: 1.25;
}
.fvp-prose h2 {
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	margin-top: 2.5rem;
}
.fvp-prose h3 {
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
	margin-top: 2rem;
}
.fvp-prose p,
.fvp-prose ul,
.fvp-prose ol,
.fvp-prose blockquote {
	font-size: 1.0625rem;
	line-height: 1.75;
}
.fvp-prose ul,
.fvp-prose ol {
	padding-left: 1.4rem;
}
.fvp-prose li + li {
	margin-top: 0.5rem;
}
.fvp-prose a {
	color: #98cdab;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fvp-prose img,
.fvp-prose figure,
.fvp-prose table {
	max-width: 100%;
	height: auto;
}
.fvp-prose blockquote {
	border-left: 4px solid var(--wpsa-color-accent);
	padding-left: 1.25rem;
	font-style: italic;
	color: #d9e4dd;
}
.fvp-prose table {
	border-collapse: collapse;
}
.fvp-prose th,
.fvp-prose td {
	border: 1px solid #4a5f52;
	padding: 0.6rem 0.8rem;
}
.fvp-prose > .aligncenter {
	margin-inline: auto;
}
.fvp-prose > .alignwide {
	max-width: 960px;
	margin-inline: auto;
}

/* Hamburger toggle helper (Wix contract: .hamburger-menu:not(.active) hides). */
.hamburger-menu.active {
	display: flex !important;
}

/* The captured design applies a global a{display:block;width:100%} which
 * stretches the a11y skip link past the right edge. Confine it to the box. */
.wpsa-skip-link {
	left: 0;
	right: 0;
	width: auto;
}

/* Horizontal bleed from the captured Wix slider (partner-business logos) is
 * masked the same way the live site masks it: the body clips horizontally.
 * The slider section is a flex item whose fixed 200%-wide track must not
 * stretch the section itself; pin it to the container and clip the track. */
#lib-block-19978-21538930 {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.page {
	min-width: 0;
}
body {
	overflow-x: hidden;
}