/* ==========================================================================
   AUDITAC — modernization layer
   Layered over The7 + Elementor without overriding brand colors or fonts.
   Targets only Elementor / CF7 class hooks; safe to remove by deleting this file.
   ========================================================================== */

:root {
	--auditac-radius-sm: 6px;
	--auditac-radius-md: 10px;
	--auditac-radius-lg: 16px;
	--auditac-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--auditac-shadow-1: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.06);
	--auditac-shadow-2: 0 4px 12px rgb(0 0 0 / 0.05), 0 2px 4px rgb(0 0 0 / 0.04);
	--auditac-shadow-3: 0 12px 30px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04);
	--auditac-border: rgb(15 23 42 / 0.08);
	--auditac-border-strong: rgb(15 23 42 / 0.14);

	/* Phase 3 R1 — brand palette (locked in todo.md Round 2) */
	--auditac-navy: #0f172a;
	--auditac-electric: #2563eb;
	--auditac-electric-hover: #1d4ed8;
	--auditac-electric-soft: rgb(37 99 235 / 0.08);
	--auditac-text: #0f172a;
	--auditac-text-muted: rgb(15 23 42 / 0.65);
	--auditac-text-subtle: rgb(15 23 42 / 0.50);
	--auditac-surface: #ffffff;
	--auditac-surface-subtle: #f8fafc;
	--auditac-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Aliased to the new electric blue so existing rules pick up the brand color */
	--auditac-focus-ring: 0 0 0 3px rgb(37 99 235 / 0.35);
	--auditac-accent: var(--auditac-electric);
}

/* ---------- Phase 3 R1: Site-wide font (Inter) ----------
   Overrides Lato / Nunito / Nunito Sans / Poppins shipped by The7 + Elementor.
   Trying without !important first — the parent enqueue at priority 999 should
   win specificity. If overrides fail, add !important to the body selector only.
   ========================================================================== */
body,
.elementor-widget *,
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
button, input, textarea, select {
	font-family: var(--auditac-font-sans);
}

/* ---------- Phase 3 R1: Modular type scale ---------- */
body {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--auditac-text);
}

h1,
.elementor-heading-title.elementor-size-xxl,
h1.elementor-heading-title {
	font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 700;
}

h2,
h2.elementor-heading-title {
	font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	font-weight: 700;
}

h3,
h3.elementor-heading-title {
	font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 600;
}

/* ---------- Typography rendering polish (no font swap) ---------- */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
body {
	font-feature-settings: "kern", "liga";
}

/* tighter heading line-height for a modern feel */
.elementor-heading-title,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title {
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* breathe body copy a little */
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
	line-height: 1.7;
}

/* nicer text selection */
::selection {
	background: rgb(37 99 235 / 0.18);
	color: inherit;
}

/* ---------- Buttons (Elementor + CF7 submit) ---------- */
.elementor-button,
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	border-radius: var(--auditac-radius-md);
	transition: transform 220ms var(--auditac-ease),
	            box-shadow 220ms var(--auditac-ease),
	            background-color 220ms var(--auditac-ease),
	            color 220ms var(--auditac-ease);
	will-change: transform;
}

.elementor-button:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: var(--auditac-shadow-3);
}

.elementor-button:active,
.wpcf7 input[type="submit"]:active,
.wpcf7 button[type="submit"]:active {
	transform: translateY(0);
}

.elementor-button:focus-visible,
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible {
	outline: none;
	box-shadow: var(--auditac-focus-ring), var(--auditac-shadow-2);
}

/* ---------- Image polish ---------- */
.elementor-widget-image img,
.elementor-widget-image-box img {
	border-radius: var(--auditac-radius-md);
	transition: transform 350ms var(--auditac-ease);
}

/* logos and SVGs should stay rectangular */
.elementor-widget-image img[src$=".svg"],
.elementor-widget-image-box img[src$=".svg"],
header img,
.dt-header img,
.site-header img,
.elementor-location-header img {
	border-radius: 0;
}

/* ---------- Service / value cards (image-box + icon-box) ---------- */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
	padding: 28px;
	border-radius: var(--auditac-radius-lg);
	background: #fff;
	border: 1px solid var(--auditac-border);
	transition: transform 280ms var(--auditac-ease),
	            box-shadow 280ms var(--auditac-ease),
	            border-color 280ms var(--auditac-ease);
}

.elementor-widget-image-box .elementor-image-box-wrapper:hover,
.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
	transform: translateY(-3px);
	box-shadow: var(--auditac-shadow-3);
	border-color: var(--auditac-border-strong);
}

/* ---------- Forms (Contact Form 7 + Elementor form widget) ---------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select,
.elementor-field-textual {
	border-radius: var(--auditac-radius-md);
	border: 1px solid var(--auditac-border-strong);
	padding: 12px 14px;
	background: #fff;
	transition: border-color 200ms var(--auditac-ease),
	            box-shadow 200ms var(--auditac-ease);
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus,
.elementor-field-textual:focus,
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.elementor-field-textual:focus-visible {
	outline: none;
	border-color: rgb(37 99 235 / 0.7);
	box-shadow: var(--auditac-focus-ring);
}

/* ---------- Anchor scroll offset (sticky headers won't crop content) ---------- */
section.elementor-section,
.elementor-top-section,
[id] {
	scroll-margin-top: 80px;
}

/* ---------- Smooth in-page scrolling (respects user motion preferences) ---------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* ---------- Reduced-motion support ---------- */
@media (prefers-reduced-motion: reduce) {
	.elementor-button,
	.wpcf7 input[type="submit"],
	.wpcf7 button[type="submit"],
	.elementor-widget-image-box .elementor-image-box-wrapper,
	.elementor-widget-icon-box .elementor-icon-box-wrapper,
	.elementor-widget-image img,
	.elementor-widget-image-box img {
		transition: none;
	}
	.elementor-button:hover,
	.wpcf7 input[type="submit"]:hover,
	.wpcf7 button[type="submit"]:hover,
	.elementor-widget-image-box .elementor-image-box-wrapper:hover,
	.elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
		transform: none;
	}
}

/* ==========================================================================
   Phase 3 R1 — Trust-signals row scaffold
   Apply class .auditac-trust-row to an Elementor section (Advanced > CSS Classes).
   Drop ADGM / UAE FTA / ICAI logos as Image widgets inside.
   ========================================================================== */
.auditac-trust-row {
	padding: 32px 0;
	background: var(--auditac-surface-subtle);
	border-top: 1px solid var(--auditac-border);
	border-bottom: 1px solid var(--auditac-border);
}

/* Generic inner-container helper if the user wraps logos in a div with this class.
   Also targets Elementor's default container so dropping the class on the section
   alone Just Works. */
.auditac-trust-row .auditac-trust-row__inner,
.auditac-trust-row > .elementor-container,
.auditac-trust-row > .e-con-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 48px;
}

.auditac-trust-row__label {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--auditac-text-subtle);
	margin-bottom: 16px;
}

.auditac-trust-row img,
.auditac-trust-row .elementor-widget-image img {
	max-height: 48px;
	width: auto;
	opacity: 0.65;
	filter: grayscale(100%);
	transition: opacity 200ms var(--auditac-ease),
	            filter 200ms var(--auditac-ease);
	border-radius: 0;
}

.auditac-trust-row img:hover,
.auditac-trust-row .elementor-widget-image img:hover {
	opacity: 1;
	filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
	.auditac-trust-row img,
	.auditac-trust-row .elementor-widget-image img {
		transition: none;
	}
}

/* ==========================================================================
   Phase 3 R1 — Primary CTA color
   Opt-in via CSS class .auditac-btn-primary on an Elementor button (Advanced).
   Keeps existing per-widget Elementor colors untouched until tagged.
   ========================================================================== */
.elementor-button.auditac-btn-primary,
.auditac-btn-primary {
	background: var(--auditac-electric);
	color: #fff;
}

.elementor-button.auditac-btn-primary:hover,
.auditac-btn-primary:hover {
	background: var(--auditac-electric-hover);
	color: #fff;
}

/* ==========================================================================
   Phase 3 R1 — "By the numbers" stat tiles
   Apply .auditac-by-numbers to the section, .auditac-stat-tile to each column.
   Within a tile, a heading widget gets .auditac-stat-tile__number, a text
   widget gets .auditac-stat-tile__label. See todo.md §3.5 for Elementor steps.
   ========================================================================== */
.auditac-by-numbers {
	padding: 64px 0;
	background: var(--auditac-surface-subtle);
}

.auditac-stat-tile {
	text-align: center;
	padding: 24px 16px;
}

.auditac-stat-tile__number,
.auditac-stat-tile .elementor-heading-title {
	color: var(--auditac-electric);
	font-size: clamp(2.5rem, 5vw + 0.5rem, 3.75rem);
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin-bottom: 8px;
}

.auditac-stat-tile__label,
.auditac-stat-tile .elementor-widget-text-editor {
	color: var(--auditac-text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
}