/* SecureLogx — design system
   ---------------------------------------------------------------------------
   Generated with the ui-ux-pro-max skill and then reconciled with the brand.

   What the skill decided, and was kept:
     pattern   Hero + Features + CTA, with a call to action high and again deep
     style     Minimalism
     motion    subtle hover, 200ms, no elaborate animation
     checklist 4.5:1 text contrast, visible focus, pointer cursor,
               prefers-reduced-motion, breakpoints at 375 / 768 / 1024 / 1440

   What was not taken, and why:
     palette   The generator proposed #2563EB with an orange call to action for
               "B2B security". SecureLogx already owns a green and gold identity
               that runs through the logo, the header and every page built so
               far; swapping it is a brand decision, not a formatting one. The
               skill's token *structure* is applied to the existing hues instead.
     type      Plus Jakarta Sans was proposed. It carries no Arabic glyphs, and
               this site is bilingual, so Barlow and PNU stay.

   What the checklist caught: gold on white measures 2.48:1, well under the 4.5:1
   the skill requires for normal text, and it was in use for text. A darkened
   gold at 4.54:1 is provided for type; the original stays for rules and borders,
   which carry no text. */

:root {
	/* Brand */
	--sx-primary: #0B6E4F;
	--sx-on-primary: #FFFFFF;
	--sx-secondary: #085440;
	--sx-accent: #C69E63;          /* decoration only — 2.48:1 on white */
	--sx-accent-text: #966F36;     /* 4.54:1 on white — use whenever gold carries text */
	--sx-on-accent: #222222;       /* 6.42:1 on the accent */

	/* Surfaces and type */
	--sx-background: #FFFFFF;
	--sx-foreground: #222222;      /* 15.91:1 */
	--sx-card: #FFFFFF;
	--sx-muted: #F7F7F7;
	--sx-muted-foreground: #666666; /* 5.74:1 on white, 5.36:1 on muted */
	--sx-border: #E7E7E7;
	--sx-ring: #0B6E4F;
	--sx-destructive: #B4213A;

	/* Minimalism: one spacing scale, used everywhere */
	--sx-space-1: 8px;
	--sx-space-2: 16px;
	--sx-space-3: 24px;
	--sx-space-4: 40px;
	--sx-space-5: 64px;
	--sx-space-6: 96px;

	--sx-radius: 8px;
	--sx-radius-pill: 999px;

	/* Motion — the skill's "subtle hover 200–250ms" */
	--sx-duration: 200ms;
	--sx-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------- contrast */

/* Gold text anywhere on a light ground fails the contrast floor. Any element
   that was given the decorative gold as a text colour is corrected to the
   darkened one; the accent stays untouched on borders and rules. */
.elementor [style*="color:#C69E63"],
.elementor [style*="color: #C69E63"] {
	color: var(--sx-accent-text) !important;
}

/* ------------------------------------------------------------------ focus */

/* The checklist asks for a focus state that is visible for keyboard users and
   does not appear on mouse clicks. */
.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor input:focus-visible,
.elementor textarea:focus-visible,
.elementor select:focus-visible,
.elementor [tabindex]:focus-visible {
	outline: 2px solid var(--sx-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Keep the boundary of the component visible alongside the focus ring, as the
   pattern note requires. */
.elementor .wpr-button:focus-visible,
.elementor .sx-fc__card:focus-visible {
	outline-offset: 4px;
}

/* ------------------------------------------------------------------ hover */

.elementor a,
.elementor .wpr-button,
.elementor .sx-fc__card,
.elementor .sx-ac__trigger {
	transition: color var(--sx-duration) var(--sx-ease),
		background-color var(--sx-duration) var(--sx-ease),
		border-color var(--sx-duration) var(--sx-ease),
		transform var(--sx-duration) var(--sx-ease);
}

/* Anything that acts as a control says so under the pointer. */
.elementor a,
.elementor button,
.elementor .wpr-button,
.elementor .sx-ac__trigger,
.elementor [role="button"] {
	cursor: pointer;
}

/* ------------------------------------------------------------ typography */

/* Minimalism reads on rhythm rather than ornament: a comfortable measure and
   headings that do not break on a lonely word. */
.elementor[data-elementor-type="wp-page"] p {
	max-width: 78ch;
}

.elementor[data-elementor-type="wp-page"] h1,
.elementor[data-elementor-type="wp-page"] h2,
.elementor[data-elementor-type="wp-page"] h3 {
	text-wrap: balance;
}

/* Figures line up in columns wherever numbers are compared. */
.elementor .sxp__num,
.elementor .sx-fc__index {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ breakpoints */

/* 375 / 768 / 1024 / 1440 — the four widths the checklist names. */
@media (max-width: 1024px) {
	:root {
		--sx-space-5: 48px;
		--sx-space-6: 64px;
	}
}

@media (max-width: 768px) {
	.elementor[data-elementor-type="wp-page"] p {
		max-width: none;
	}
}

@media (max-width: 375px) {
	:root {
		--sx-space-4: 28px;
		--sx-space-5: 36px;
		--sx-space-6: 48px;
	}
}

/* --------------------------------------------------------------- motion */

/* "Avoid excessive animation" is in the skill's own avoid list, and a reduced
   motion preference must be honoured outright. */
@media (prefers-reduced-motion: reduce) {
	.elementor *,
	.elementor *::before,
	.elementor *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}