/*
	Theme Name:   XTRA Child - Netjes
	Theme URI:    https://netjesschoonmaakservice.nl/
	Description:  Netjes Schoonmaakservice child theme for the XTRA parent theme. Holds all site-specific styling and design tokens; the parent theme is never edited directly.
	Author:       Netjes Schoonmaakservice
	Template:     xtra
	Version:      1.0.0
	Text Domain:  xtra-child
	Requires PHP: 8.0
*/

:root {
	--netjes-navy: #031326;
	--netjes-navy-secondary: #071B33;
	--netjes-red: #D71920;
	--netjes-red-dark: #A90912;
	--netjes-ivory: #F5F0E7;
	--netjes-white: #FFFFFF;
	--netjes-ink: #081A32;
	--netjes-muted: #66717D;
	--netjes-border: #D8D0C5;

	--netjes-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
	--netjes-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--netjes-space-xs: 0.5rem;
	--netjes-space-sm: 1rem;
	--netjes-space-md: 1.5rem;
	--netjes-space-lg: 2.5rem;
	--netjes-space-xl: 4rem;

	--netjes-radius: 8px;
	--netjes-focus-ring: 0 0 0 3px rgba(215, 25, 32, 0.45);
}

/* Visible keyboard focus everywhere, per accessibility requirements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--netjes-red);
	outline-offset: 2px;
	box-shadow: var(--netjes-focus-ring);
}

/* Respect reduced-motion preference site-wide. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Header CTA button
   Appended as a menu item via netjes_child_primary_menu_polish() in
   functions.php, since the parent theme's header builder has no button
   slot. Styled to look distinct from the plain nav links, at the reference
   design's red primary-action color, meeting the 44px tap target minimum.
   ========================================================================== */
.netjes-header-cta > a {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--netjes-space-md) !important;
	background-color: var(--netjes-red);
	color: var(--netjes-white) !important;
	border-radius: var(--netjes-radius);
	font-weight: 600;
	transition: background-color 0.2s ease;
}

.netjes-header-cta > a:hover,
.netjes-header-cta > a:focus-visible {
	background-color: var(--netjes-red-dark);
	color: var(--netjes-white) !important;
}

.netjes-header-cta > a span {
	color: inherit !important;
}

/* ==========================================================================
   Footer call-to-action strip (page ID 1391, "Footer Call to Action")
   Corrects the theme demo's off-brand colors (#ec2f2b red, #ffeb3b yellow)
   to the approved Netjes palette. Elementor prints this template's styles
   as an inline <style> block scoped to ".elementor-1391 .elementor-element-
   <id>"; these rules target the same generated selectors so the fix travels
   with the template without editing its stored content. If that template
   is regenerated with new element IDs, these selectors will need updating.
   ========================================================================== */
.elementor-1391 .elementor-element.elementor-element-1fa1694 > .elementor-element-populated,
.elementor-1391 .elementor-element.elementor-element-1fa1694[data-element_type="container"] {
	background-color: var(--netjes-red) !important;
	box-shadow: 0 10px 50px rgba(215, 25, 32, 0.3) !important;
}

.elementor-1391 .elementor-element.elementor-element-bdfebdf .services .cz_hexagon,
.elementor-1391 .elementor-element.elementor-element-bdfebdf .services i:not(.cz_sb_sep_icon):not(.cz_hexagon i),
.elementor-1391 .elementor-element.elementor-element-9c96156 .services .cz_hexagon,
.elementor-1391 .elementor-element.elementor-element-9c96156 .services i:not(.cz_sb_sep_icon):not(.cz_hexagon i),
.elementor-1391 .elementor-element.elementor-element-dc19db6 .services .cz_hexagon,
.elementor-1391 .elementor-element.elementor-element-dc19db6 .services i:not(.cz_sb_sep_icon):not(.cz_hexagon i) {
	color: var(--netjes-ivory) !important;
}

/* Horizontal logo for navy headers. Original image remains available separately. */
.np-reference .netjes-preview-header__brand .netjes-company-logo,
.netjes-public .nj-brand .netjes-company-logo { display:block; width:156px; height:44px; max-width:100%; object-fit:contain; margin:0; padding:0; border:0; border-radius:0; background:transparent; }
#site_header img[src*="netjes-header-logo.png"] { width:156px !important; height:44px !important; object-fit:contain; padding:0; background:transparent; }
@media(max-width:767px){
 .np-reference .netjes-preview-header__brand .netjes-company-logo,
 .netjes-public .nj-brand .netjes-company-logo { width:128px; height:36px; }
 #site_header img[src*="netjes-header-logo.png"] { width:128px !important; height:36px !important; }
}

@media(max-width:374px){
 .np-reference .netjes-preview-header__brand .netjes-company-logo,
 .netjes-public .nj-brand .netjes-company-logo { width:112px; height:32px; }
 #site_header img[src*="netjes-header-logo.png"] { width:112px !important; height:32px !important; }
}