/**
 * Al Bader AC System - Global design system.
 *
 * Single source of truth for brand colours, typography and buttons.
 * Every widget stylesheet reads these tokens, so changing a value here
 * updates the whole site.
 *
 * @package Albader_Child
 */

:root {
	/* Brand colours */
	--ab-primary: #d10d14;
	--ab-primary-dark: #a9090e;
	--ab-primary-soft: #fff1f1;
	--ab-dark: #111319;
	--ab-text: #555b66;
	--ab-muted: #9a9ba1;
	--ab-border: #e6e6e6;
	--ab-bg-light: #f5f6f8;
	--ab-white: #ffffff;
	--ab-whatsapp: #25d366;

	/* Typography: 2 fonts - headings + body. Change here only. */
	--ab-font-heading: 'Poppins', 'Inter', Arial, sans-serif;
	--ab-font-body: 'Inter', Arial, sans-serif;
	--ab-font: var(--ab-font-body); /* legacy alias used by widget CSS */
	--ab-fw-regular: 400;
	--ab-fw-medium: 500;
	--ab-fw-semibold: 600;
	--ab-fw-bold: 700;
	--ab-fw-extrabold: 800;

	/* Buttons */
	--ab-btn-radius: 50px;
	--ab-btn-padding: 14px 26px;
	--ab-btn-font-size: 15px;
	--ab-btn-font-weight: 700;
	--ab-btn-shadow: 0 8px 20px rgba(209, 13, 20, .28);

	/* Shape + elevation */
	--ab-radius-sm: 6px;
	--ab-radius: 8px;
	--ab-radius-lg: 14px;
	--ab-shadow: 0 6px 24px rgba(0, 0, 0, .05);
	--ab-transition: .25s ease;
}

/* ---------------------------------------------------------------------
 * Base typography
 * ------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
	font-family: var(--ab-font-body);
}

/*
 * Headings. ":root body" gives enough weight to beat Astra's
 * "h1, .entry-content h1" rules, while Elementor per-widget typography
 * (more specific) can still override it when set in the editor.
 */
:root body :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title, .ab-heading) {
	font-family: var(--ab-font-heading);
}

/* ---------------------------------------------------------------------
 * Reusable buttons: .ab-btn + modifier
 * <a class="ab-btn ab-btn--primary">Get a Quote</a>
 * ------------------------------------------------------------------- */
.ab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--ab-btn-padding);
	border: 2px solid transparent;
	border-radius: var(--ab-btn-radius);
	font-family: var(--ab-font-body);
	font-size: var(--ab-btn-font-size);
	font-weight: var(--ab-btn-font-weight);
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--ab-transition), background var(--ab-transition), color var(--ab-transition), border-color var(--ab-transition), box-shadow var(--ab-transition);
}

.ab-btn:hover {
	transform: translateY(-2px);
}

.ab-btn--primary {
	background: var(--ab-primary);
	border-color: var(--ab-primary);
	color: var(--ab-white) !important;
	box-shadow: var(--ab-btn-shadow);
}

.ab-btn--primary:hover {
	background: var(--ab-primary-dark);
	border-color: var(--ab-primary-dark);
}

.ab-btn--outline {
	background: var(--ab-white);
	border-color: var(--ab-primary);
	color: var(--ab-primary) !important;
}

.ab-btn--outline:hover {
	background: var(--ab-primary);
	color: var(--ab-white) !important;
}

.ab-btn--dark {
	background: var(--ab-dark);
	border-color: var(--ab-dark);
	color: var(--ab-white) !important;
}

.ab-btn--dark:hover {
	background: #000;
	border-color: #000;
}

.ab-btn--light {
	background: var(--ab-white);
	border-color: var(--ab-white);
	color: var(--ab-primary) !important;
}

.ab-btn--block {
	width: 100%;
}

@media (max-width: 767px) {
	.ab-btn {
		padding: 13px 20px;
		font-size: 14px;
	}
}

/* ---------------------------------------------------------------------
 * Elementor sync
 * Points Elementor's Global Colors / Global Fonts (Site Settings) at the
 * theme tokens, so Elementor widgets using "Global" values match the theme.
 * body[class*="elementor-kit-"] outranks the kit's own .elementor-kit-N rule;
 * per-widget styles set in the editor are more specific and still win.
 * ------------------------------------------------------------------- */
body[class*="elementor-kit-"] {
	/* Global colours */
	--e-global-color-primary: var(--ab-primary);
	--e-global-color-secondary: var(--ab-dark);
	--e-global-color-text: var(--ab-text);
	--e-global-color-accent: var(--ab-primary-dark);

	/* Global fonts: Primary/Secondary = headings, Text/Accent = body */
	--e-global-typography-primary-font-family: 'Poppins';
	--e-global-typography-secondary-font-family: 'Poppins';
	--e-global-typography-text-font-family: 'Inter';
	--e-global-typography-accent-font-family: 'Inter';

	font-family: var(--ab-font-body);
	color: var(--ab-text);
}

/* Elementor headings + text editor */
body[class*="elementor-kit-"] .elementor-heading-title {
	font-family: var(--ab-font-heading);
}

body[class*="elementor-kit-"] .elementor-widget-text-editor {
	font-family: var(--ab-font-body);
}

/* Elementor buttons (Button widget, Form submit, CTA) = theme button style */
body[class*="elementor-kit-"] .elementor-button {
	background-color: var(--ab-primary);
	color: var(--ab-white);
	border-radius: var(--ab-btn-radius);
	padding: var(--ab-btn-padding);
	font-family: var(--ab-font-body);
	font-size: var(--ab-btn-font-size);
	font-weight: var(--ab-btn-font-weight);
	line-height: 1.2;
	transition: background-color var(--ab-transition), transform var(--ab-transition);
}

body[class*="elementor-kit-"] .elementor-button:hover,
body[class*="elementor-kit-"] .elementor-button:focus {
	background-color: var(--ab-primary-dark);
	color: var(--ab-white);
}

/* Elementor form fields */
body[class*="elementor-kit-"] .elementor-field-group .elementor-field {
	font-family: var(--ab-font-body);
	border-radius: var(--ab-radius);
}

body[class*="elementor-kit-"] .elementor-field-group .elementor-field:focus {
	border-color: var(--ab-primary);
	box-shadow: 0 0 0 3px rgba(209, 13, 20, .1);
	outline: 0;
}

/* ---------------------------------------------------------------------
 * Page scrollbar
 * ------------------------------------------------------------------- */
/* Firefox (Chrome/Safari/Edge use the ::-webkit-scrollbar rules below) */
@supports not selector(::-webkit-scrollbar) {
	html {
		scrollbar-width: thin;
		scrollbar-color: var(--ab-primary) var(--ab-bg-light);
	}
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--ab-bg-light);
}

::-webkit-scrollbar-thumb {
	background: var(--ab-primary);
	border: 2px solid var(--ab-bg-light);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--ab-primary-dark);
}

::selection {
	background: var(--ab-primary);
	color: var(--ab-white);
}