/**
Theme Name: Astra Child
Author: Edwin Platteel
Author URI: http://wpastra.com/about/
Description: Custom child theme for rietottenhof.nl. v2.0.4 caps the footer's two inner rows at the shared 1400px boxed width + centers them (Elementor content_width=boxed won't persist on these containers; forced via theme CSS). v2.0.3 centers the homepage hero content on BOTH axes (horizontal centering + text-align via theme CSS, because Elementor 4.x atomic flex settings don't emit a real justify-content — same root issue as v2.0.2's vertical-center workaround). v2.0.2 adds a high-specificity .riet-home-hero center-content rule. v2.0.1 baseline: .riet-services-list grid; v2.0.0: Montserrat-only + LearnDash legacy.
Version: 2.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ============================================================
 * LEARNDASH (legacy rules — preserved from v1.0.0)
 * ============================================================ */

.learndash.learndash_post_sfwd-lessons.user_has_access {
	max-width: 950px;
}

.ld-content-actions .ld-content-action.ld-empty {
	visibility: hidden;
	display: none;
}

/* ============================================================
 * v2.0.1 — DIENSTEN PAGE SERVICE-LIST GRID (Task 6)
 *
 * Each service row in the Diensten services list should render as
 * a horizontal grid: image (160px) | title+description (1fr) | price
 * (auto) | "Meer informatie" button (auto). Elementor's atomic-
 * container schema couldn't express this 4-column custom grid
 * cleanly (the inner-container flex defaults overrode the per-column
 * widths set in widget settings). The Task 6 implementer emitted
 * marker classes — this rule activates them.
 *
 * At < 1024px the grid collapses to single-column (image stacked
 * above title+description; price and button on separate rows). This
 * matches the prototype's responsive behaviour.
 * ============================================================ */

@media (min-width: 1024px) {
	.riet-services-list .riet-service-item {
		display: grid;
		grid-template-columns: 160px 1fr auto auto;
		gap: 2rem;
		align-items: center;
	}
}

.riet-services-list .riet-service-item__col-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

@media (max-width: 1023px) {
	.riet-services-list .riet-service-item__col-image {
		max-width: 300px;
	}
}

/* ============================================================
 * v2.0.2 — HOMEPAGE HERO VERTICAL CENTERING
 *
 * The outer .riet-home-hero container has min-height: 650px,
 * flex-direction: column, and was updated to flex_justify_content=
 * center via post-meta. But the live render shows the inner content
 * still glued to the top of the hero. Elementor's atomic-container
 * `--justify-content` CSS variable doesn't reliably translate to a
 * real `justify-content` declaration on the .e-con element across
 * all Elementor 4.x layouts.
 *
 * Force it with body-prefixed selector + !important.
 * ============================================================ */

/* Use CSS Grid place-content on the outer hero. Grid centering is more
 * predictable than flex + min-height + variable-content-height combinations.
 * `place-content: center` centers both axes; we want vertical center and
 * keep the inner container left-flowing for the 1400px boxed centering
 * via margin-auto on its sub-elements. */
html body .elementor .elementor-element.riet-home-hero {
	display: grid !important;
	place-content: center stretch !important;
}

/* The inner container should still span full width so the 1400px max-width
 * centering works via its own margin: 0 auto. */
html body .elementor .elementor-element.riet-home-hero > .elementor-element.riet-home-hero__inner {
	width: 100% !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ============================================================
 * v2.0.3 — HOMEPAGE HERO HORIZONTAL CENTERING + TEXT ALIGN
 *
 * The hero content (.riet-home-hero__content, a 600px column) was
 * anchored to the LEFT of the 1400px boxed inner with left-aligned
 * text. Requirement: center the content block on BOTH axes.
 *
 * Vertical centering already handled above (v2.0.2 grid place-content).
 * Horizontal centering can't be driven from Elementor's container
 * settings: the atomic-container `flex_justify_content=center` /
 * `flex_align_items=center` do NOT emit a real justify-content /
 * align-items declaration on the .e-con element in this Elementor 4.x
 * build (verified: computed justify-content stays `normal`). Same root
 * cause as the v2.0.2 vertical-center workaround. So force it here.
 *
 * Note: .riet-home-hero__inner is a BOXED container, so its flex
 * layout lives on the injected `.e-con-inner` wrapper — target that
 * for the content-block centering. The content column + cta-row are
 * FULL containers (flex directly on the element).
 * ============================================================ */

/* Center the 600px content block within the boxed inner. */
html body .elementor .elementor-element.riet-home-hero__inner > .e-con-inner {
	justify-content: center !important;
}

/* Center the text widgets + their text inside the content column. */
html body .elementor .elementor-element.riet-home-hero__content {
	align-items: center !important;
	text-align: center !important;
}
html body .elementor .elementor-element.riet-home-hero__content .elementor-widget-container,
html body .elementor .elementor-element.riet-home-hero__h1 .elementor-heading-title,
html body .elementor .elementor-element.riet-home-hero__sub {
	text-align: center !important;
}

/* Center the CTA button row (full container — flex directly). */
html body .elementor .elementor-element.riet-home-hero__cta-row {
	justify-content: center !important;
}

/* ============================================================
 * v2.0.4 — FOOTER BOXED WIDTH (Pro Theme Builder template 12123)
 *
 * The footer's two inner rows (.riet-site-footer__grid 4-col grid +
 * .riet-site-footer__bottom copyright/social row) should be capped at
 * the same 1400px boxed width as every page section and the header,
 * so their left edge aligns at the shared content gutter. The outer
 * .riet-site-footer stays full-width (the dark #1a1a1a bar bleeds edge
 * to edge — correct).
 *
 * Can't be driven reliably from Elementor: setting content_width=boxed
 * on these containers via post-meta does NOT persist in this Elementor
 * 4.x build (verified via direct $wpdb read — the value reverts to
 * `full`, and the rows render `e-con-full`). And because the outer is a
 * COLUMN flex container, the rows' own `margin: 0 auto` can't center
 * them (auto margins only resolve on the flex MAIN axis — vertical here
 * — not the horizontal cross axis). So force both the width cap and the
 * horizontal centering from theme CSS.
 * ============================================================ */

/* Center the rows horizontally within the column-flex footer. */
html body .elementor .elementor-element.riet-site-footer {
	align-items: center !important;
}

/* Cap both rows at the shared 1400px boxed width. */
html body .elementor .elementor-element.riet-site-footer__grid,
html body .elementor .elementor-element.riet-site-footer__bottom {
	width: 100% !important;
	max-width: 1400px !important;
}