/* ATLASYN Barbary Plante - minimal site helpers.
 *
 * Only universal helpers that the project actually reuses.
 * No client component library. Elementor remains the layout
 * tool; this file only carries stable, reusable primitives.
 *
 * Uses logical properties (margin-inline, padding-inline,
 * inset-inline, text-align: start/end) so LTR and RTL work
 * from the same ruleset without mirroring.
 */

body {
	background: var(--bp-bg);
	color: var(--bp-fg);
	font-family: var(--bp-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Prevent any descendant (decorative images, full-bleed
   widgets using 100vw) from pushing the page horizontally.
   `clip` is preferred over `hidden` because it does not create
   a scroll container, so it does not interfere with sticky
   positioning or position: fixed children. */
html {
	overflow-x: clip;
}

/* Override parent theme's .site-main padding so the Hero sits flush
   against the header (no white space between header and hero). */
.site-main {
	padding-block: 0 !important;
}

/* Hide the WordPress page title on the front page so only
   the Elementor hero H1 is the document title. */
.home .entry-title,
.home .page-title,
.home header.entry-header h1 {
	display: none !important;
}

html[lang="ar"] body,
html[dir="rtl"] body {
	font-family: var(--bp-font-arabic);
}

h1, h2, h3, h4, h5, h6,
.atlasyn-bp-display {
	font-family: var(--bp-font-display);
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* Arabic must NOT inherit the Latin display family. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
	font-family: var(--bp-font-arabic);
	font-weight: 700;
	line-height: 1.4;
}

/* Soft organic card surface reused by Elementor sections. */
.atlasyn-bp-card {
	background: var(--bp-bg);
	border: 1px solid var(--bp-border-soft);
	border-radius: 1rem;
	padding: 1.5rem;
}

/* Cream surface for alternating editorial sections. */
.atlasyn-bp-surface-cream {
	background: var(--bp-bg-cream);
	color: var(--bp-fg);
}

/* Deep-green surface for conversion / dark editorial blocks. */
.atlasyn-bp-surface-green {
	background: var(--bp-primary);
	color: var(--bp-fg-on-green);
}

/* Editorial hairline. */
.atlasyn-bp-hairline {
	border: 0;
	border-top: 1px solid var(--bp-border-soft);
	margin-block: 2rem;
}

/* Semantic error surface (non-brand). Used for form errors,
 * inline notices, and validation messages. Always pair color
 * with a message; the icon is added by the consuming Elementor
 * widget or by the form layer, not by this rule. */
.atlasyn-bp-error,
.atlasyn-bp-form-field--error .atlasyn-bp-field-message {
	color: var(--bp-error);
	border-inline-start: 2px solid var(--bp-error);
	padding-inline-start: 0.75rem;
}

.atlasyn-bp-error-bg {
	background: var(--bp-error-bg);
	color: var(--bp-error);
}

/* ----------------------------------------------------------------
 * Image container standard (temporary + future assets)
 * Use object-fit + aspect-ratio so the temporary placeholder
 * can be swapped for real assets without rebuilding layouts.
 * ---------------------------------------------------------------- */
.atlasyn-bp-media {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	background: var(--bp-bg-tint);
}

.atlasyn-bp-media--4-3   { aspect-ratio: 4 / 3; }
.atlasyn-bp-media--3-2   { aspect-ratio: 3 / 2; }
.atlasyn-bp-media--16-10 { aspect-ratio: 16 / 10; }
.atlasyn-bp-media--16-9  { aspect-ratio: 16 / 9; }
.atlasyn-bp-media--1-1   { aspect-ratio: 1 / 1; }

/* ----------------------------------------------------------------
 * Accessibility
 * ---------------------------------------------------------------- */

/* Visible, brand-aware focus ring. Never remove without
 * replacing. */
:focus-visible {
	outline: 2px solid var(--bp-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Honor reduced-motion. Sticky header transitions and any
 * decorative motion added later must respect this. */
@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;
	}
}

/* Ensure interactive elements stay above the 44 px touch
 * target where possible. Elementor buttons already set
 * min-height; this guards plain links. */
.atlasyn-bp-tap {
	min-block-size: 44px;
	min-inline-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* ----------------------------------------------------------------
 * Sticky header foundation
 * The human developer attaches .atlasyn-bp-sticky to the
 * main header Elementor section. The JS below is the only
 * non-Elementor behavior the project adds: a 4-line
 * IntersectionObserver that adds .atlasyn-bp-sticky--scrolled
 * after a small scroll. No animation library, no jQuery.
 * ---------------------------------------------------------------- */
.atlasyn-bp-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--bp-bg);
	transition: box-shadow 200ms ease, background-color 200ms ease;
}

.atlasyn-bp-sticky--scrolled {
	box-shadow: 0 2px 8px rgba( 31, 42, 31, 0.08 );
}

/* Skip link (utility). Elementor header may render its own. */
.atlasyn-bp-skip-link {
	position: absolute;
	inset-inline-start: 0.5rem;
	top: -3rem;
	background: var(--bp-primary);
	color: var(--bp-fg-on-green);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	z-index: 100;
	transition: top 200ms ease;
}
.atlasyn-bp-skip-link:focus {
	top: 0.5rem;
}

/* ----------------------------------------------------------------
 * Elementor Theme Builder wrappers
 *
 * Elementor's default .e-con ships with 10px padding on all four
 * sides. That padding is what produces the unwanted white strips
 * above the utility bar and below the footer. We zero it out on
 * the theme-builder location wrappers only — every other e-con
 * on the site keeps Elementor's default behaviour.
 * ---------------------------------------------------------------- */
.elementor-location-header,
.elementor-location-footer {
	margin: 0;
	padding: 0;
}

.elementor-location-header > .e-con,
.elementor-location-footer > .e-con {
	--container-default-padding-top:    0px;
	--container-default-padding-right:  0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left:   0px;
	padding: 0;
	margin: 0;
}

.elementor-location-header > .e-con > .e-con-inner,
.elementor-location-footer > .e-con > .e-con-inner {
	padding: 0;
	margin: 0;
}

/* ----------------------------------------------------------------
 * Temporary placeholder marker
 * The official development placeholder image URL is centralised
 * so the human can swap it in one place once real assets arrive.
 * ---------------------------------------------------------------- */
:root {
	--bp-temp-image: url('https://barbary-plante.atlasyn-test.com/wp-content/uploads/2026/08/images.png');
}

.atlasyn-bp-temp-image {
	background-image: var(--bp-temp-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--bp-bg-tint);
}

/* ----------------------------------------------------------------
 * Language switcher (text-only FR | AR)
 * Used by the [bp-language-switcher] shortcode in the utility
 * bar and the footer. Inherits color from parent (white in
 * the dark utility bar, cream in the dark footer).
 * ---------------------------------------------------------------- */
.bp-lang {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--bp-font-body);
	font-size: 12px;
	font-weight: 500;
}

.bp-lang__item,
.bp-lang__sep {
	display: inline-flex;
	align-items: center;
}

.bp-lang__link {
	color: inherit;
	text-decoration: none;
	padding: 4px 6px;
	border-radius: 4px;
	transition: color 150ms ease;
}

.bp-lang__link:hover,
.bp-lang__link:focus-visible {
	color: var(--bp-accent);
}

.bp-lang__item.is-active .bp-lang__link {
	color: var(--bp-cream);
	font-weight: 600;
	pointer-events: none;
}

.bp-lang[lang="ar"] .bp-lang__item.is-active .bp-lang__link,
html[dir="rtl"] .bp-lang__item.is-active .bp-lang__link {
	color: var(--bp-white);
}