/**
 * Bariq Al Riyadh — Design System
 * ================================
 * Loaded AFTER css/style.css so it can normalise the legacy styles without
 * rewriting them. Everything here is token-driven: change a token, not a rule.
 *
 * Sections:
 *   1. Tokens
 *   2. Base & typography (RTL-first)
 *   3. Buttons
 *   4. Cards
 *   5. Section headings
 *   6. Forms
 *   7. Mobile sticky CTA
 *   8. Utilities
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
	/* Brand */
	--bq-navy:        #0F2E4A;
	--bq-navy-deep:   #0A1F33;
	--bq-teal:        #0BB3A4;
	--bq-teal-dark:   #089286;
	--bq-teal-soft:   #E6F7F5;
	--bq-gold:        #E0A93B;
	--bq-gold-soft:   #FDF4E3;

	/* Neutrals */
	--bq-ink:         #10202E;
	--bq-body:        #4B5A67;
	--bq-muted:       #7C8A96;
	--bq-line:        #E4EAEF;
	--bq-surface:     #FFFFFF;
	--bq-surface-alt: #F6F9FB;

	/* Feedback */
	--bq-wa:          #25D366;
	--bq-wa-dark:     #1EBE5A;

	/* Radius */
	--bq-r-sm:  8px;
	--bq-r-md:  14px;
	--bq-r-lg:  20px;
	--bq-r-pill: 999px;

	/* Spacing scale */
	--bq-s-1: 4px;
	--bq-s-2: 8px;
	--bq-s-3: 12px;
	--bq-s-4: 16px;
	--bq-s-5: 24px;
	--bq-s-6: 32px;
	--bq-s-7: 48px;
	--bq-s-8: 64px;
	--bq-s-9: 88px;

	/* Responsive rhythm. Mobile is not "desktop, but smaller" — these are
	   deliberate per-breakpoint values, redefined in the media queries below. */
	--bq-section-y: 48px;   /* vertical padding inside a section */
	--bq-block-gap: 32px;   /* gap between a section heading and its content */
	--bq-card-gap:  14px;   /* gap between cards in a grid */

	/* Elevation */
	--bq-shadow-sm: 0 1px 2px rgba(16, 32, 46, .06), 0 2px 8px rgba(16, 32, 46, .04);
	--bq-shadow-md: 0 4px 14px rgba(16, 32, 46, .08), 0 12px 32px rgba(16, 32, 46, .06);
	--bq-shadow-lg: 0 18px 48px rgba(15, 46, 74, .16);

	/* Typography */
	--bq-font: "Changa", "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bq-lh-tight: 1.35;
	--bq-lh-body:  1.85;

	/* Motion */
	--bq-ease: cubic-bezier(.2, .7, .3, 1);
	--bq-dur:  .22s;

	/* Height of the mobile CTA bar; used to pad the page bottom. */
	--bq-cta-h: 62px;

	/* Fill the gaps the legacy stylesheet references but never defined. */
	--brand-text:  var(--bq-ink);
	--brand-light: var(--bq-surface-alt);
}

/* ============================================================
   2. BASE & TYPOGRAPHY
   ============================================================ */
body {
	font-family: var(--bq-font);
	color: var(--bq-body);
	line-height: var(--bq-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Arabic reads better with slightly looser lines and no letter-spacing. */
[dir="rtl"] body,
body {
	letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
.bq-h1, .bq-h2, .bq-h3 {
	font-family: var(--bq-font);
	color: var(--bq-ink);
	font-weight: 700;
	line-height: var(--bq-lh-tight);
}

/*
 * Type scale. The lower bound of each clamp is the value that actually ships
 * on a 320px phone, so it is chosen for that screen first and allowed to grow
 * — not a desktop size scaled down until it happens to fit.
 */
.bq-h1, h1 { font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.9rem); }
.bq-h2, h2 { font-size: clamp(1.35rem, 1.08rem + 1.4vw, 2.15rem); }
.bq-h3, h3 { font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem); }

/* Arabic needs a looser line box than Latin at the same size; headings get a
   slightly tighter one so a two-line H1 still reads as a single unit. */
h1, h2, h3 { line-height: 1.4; }

p { margin-bottom: var(--bq-s-4); }

@media (max-width: 575.98px) {
	body { font-size: .97rem; line-height: 1.8; }
	.bq-shead__sub { font-size: .97rem; }
}

a { text-decoration: none; }

/* Visible focus for keyboard users — required for accessibility. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--bq-teal);
	outline-offset: 2px;
	border-radius: var(--bq-r-sm);
}

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

/* ============================================================
   3. BUTTONS
   ============================================================ */
.bq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bq-s-2);
	padding: 14px 26px;
	min-height: 50px;
	border: 1px solid transparent;
	border-radius: var(--bq-r-pill);
	font-family: var(--bq-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--bq-dur) var(--bq-ease),
	            box-shadow var(--bq-dur) var(--bq-ease),
	            background-color var(--bq-dur) var(--bq-ease),
	            color var(--bq-dur) var(--bq-ease);
}

.bq-btn:hover { transform: translateY(-2px); }
.bq-btn:active { transform: translateY(0); }

/* Primary action = WhatsApp, because it is the main conversion path. */
.bq-btn--wa {
	background: var(--bq-wa);
	color: #fff;
	box-shadow: 0 8px 22px rgba(37, 211, 102, .32);
}
.bq-btn--wa:hover { background: var(--bq-wa-dark); color: #fff; }

.bq-btn--primary {
	background: var(--bq-teal);
	color: #fff;
	box-shadow: 0 8px 22px rgba(11, 179, 164, .30);
}
.bq-btn--primary:hover { background: var(--bq-teal-dark); color: #fff; }

.bq-btn--call {
	background: var(--bq-navy);
	color: #fff;
	box-shadow: 0 8px 22px rgba(15, 46, 74, .28);
}
.bq-btn--call:hover { background: var(--bq-navy-deep); color: #fff; }

.bq-btn--ghost {
	background: transparent;
	color: var(--bq-ink);
	border-color: var(--bq-line);
}
.bq-btn--ghost:hover {
	background: var(--bq-surface-alt);
	border-color: var(--bq-teal);
	color: var(--bq-ink);
}

.bq-btn--on-dark {
	background: rgba(255, 255, 255, .10);
	color: #fff;
	border-color: rgba(255, 255, 255, .28);
	backdrop-filter: blur(6px);
}
.bq-btn--on-dark:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.bq-btn--lg { padding: 17px 34px; min-height: 58px; font-size: 1.06rem; }
.bq-btn--block { width: 100%; }

/* ============================================================
   4. CARDS
   ============================================================ */
.bq-card {
	background: var(--bq-surface);
	border: 1px solid var(--bq-line);
	border-radius: var(--bq-r-lg);
	padding: var(--bq-s-5);
	box-shadow: var(--bq-shadow-sm);
	transition: transform var(--bq-dur) var(--bq-ease),
	            box-shadow var(--bq-dur) var(--bq-ease),
	            border-color var(--bq-dur) var(--bq-ease);
	height: 100%;
}

.bq-card--link:hover,
.bq-card--link:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--bq-shadow-md);
	border-color: rgba(11, 179, 164, .45);
}

.bq-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: var(--bq-s-4);
	border-radius: var(--bq-r-md);
	background: var(--bq-teal-soft);
	color: var(--bq-teal-dark);
	font-size: 1.35rem;
}

.bq-card__title {
	margin-bottom: var(--bq-s-2);
	font-size: 1.18rem;
	color: var(--bq-ink);
}

.bq-card__text {
	margin-bottom: var(--bq-s-4);
	font-size: .96rem;
	color: var(--bq-body);
}

.bq-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bq-s-2);
	margin: 0 0 var(--bq-s-4);
	padding: 0;
	list-style: none;
}

.bq-card__tags li {
	padding: 5px 12px;
	border-radius: var(--bq-r-pill);
	background: var(--bq-surface-alt);
	color: var(--bq-muted);
	font-size: .8rem;
}

/* Whole-card click target without nesting interactive elements. */
.bq-card__overlay-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* ============================================================
   5. SECTION HEADINGS
   ============================================================ */
.bq-section { padding: var(--bq-section-y) 0; }
.bq-section--alt { background: var(--bq-surface-alt); }
.bq-section--navy { background: var(--bq-navy); color: rgba(255, 255, 255, .85); }
.bq-section--navy h2,
.bq-section--navy h3 { color: #fff; }

/* Responsive rhythm steps. */
@media (min-width: 576px) {
	:root { --bq-section-y: 60px; --bq-block-gap: 36px; --bq-card-gap: 18px; }
}

@media (min-width: 768px) {
	:root { --bq-section-y: 72px; --bq-block-gap: 44px; --bq-card-gap: 20px; }
}

@media (min-width: 992px) {
	:root { --bq-section-y: 92px; --bq-block-gap: 52px; --bq-card-gap: 24px; }
}

@media (min-width: 1400px) {
	:root { --bq-section-y: 108px; }
}

/* Bootstrap row gutters follow the same token instead of their own scale. */
.bq-section .row.g-4 { --bs-gutter-x: var(--bq-card-gap); --bs-gutter-y: var(--bq-card-gap); }

.bq-shead { margin-bottom: var(--bq-block-gap); }
.bq-shead--center { text-align: center; }

.bq-shead__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--bq-s-2);
	margin-bottom: var(--bq-s-3);
	padding: 6px 16px;
	border-radius: var(--bq-r-pill);
	background: var(--bq-teal-soft);
	color: var(--bq-teal-dark);
	font-size: .84rem;
	font-weight: 700;
}

.bq-section--navy .bq-shead__kicker {
	background: rgba(255, 255, 255, .12);
	color: #7FE3D9;
}

.bq-shead__kicker .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.bq-shead__title { margin-bottom: var(--bq-s-3); }

.bq-shead__sub {
	max-width: 62ch;
	margin: 0;
	color: var(--bq-body);
	font-size: 1.02rem;
}

.bq-shead--center .bq-shead__sub { margin-inline: auto; }
.bq-section--navy .bq-shead__sub { color: rgba(255, 255, 255, .78); }

/* ============================================================
   6. FORMS
   ============================================================ */
.bq-field { margin-bottom: var(--bq-s-4); }

.bq-label {
	display: block;
	margin-bottom: var(--bq-s-2);
	color: var(--bq-ink);
	font-size: .92rem;
	font-weight: 700;
}

.bq-input,
.bq-select,
.bq-textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--bq-line);
	border-radius: var(--bq-r-md);
	background: var(--bq-surface);
	color: var(--bq-ink);
	font-family: var(--bq-font);
	font-size: 1rem; /* 16px prevents iOS zoom-on-focus */
	transition: border-color var(--bq-dur) var(--bq-ease),
	            box-shadow var(--bq-dur) var(--bq-ease);
}

.bq-input::placeholder,
.bq-textarea::placeholder { color: var(--bq-muted); }

.bq-input:focus,
.bq-select:focus,
.bq-textarea:focus {
	border-color: var(--bq-teal);
	box-shadow: 0 0 0 4px rgba(11, 179, 164, .14);
	outline: none;
}

.bq-textarea { min-height: 110px; resize: vertical; }

.bq-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237C8A96'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 16px center;
	background-size: 14px;
	padding-left: 42px;
}

.bq-help { margin: var(--bq-s-2) 0 0; color: var(--bq-muted); font-size: .84rem; }
.bq-error { margin: var(--bq-s-2) 0 0; color: #C0392B; font-size: .86rem; }

.bq-input[aria-invalid="true"],
.bq-select[aria-invalid="true"] { border-color: #C0392B; }

/* Honeypot — hidden from humans, visible to naive bots. */
.bq-hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ============================================================
   7. MOBILE STICKY CTA
   ============================================================ */
.bariq-mobile-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 1040;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--bq-line);
	box-shadow: 0 -6px 24px rgba(15, 46, 74, .18);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bariq-mobile-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bq-s-2);
	min-height: var(--bq-cta-h);
	color: #fff;
	font-family: var(--bq-font);
	font-size: 1.02rem;
	font-weight: 700;
}

.bariq-mobile-cta__btn i { font-size: 1.2rem; }
.bariq-mobile-cta__btn:hover,
.bariq-mobile-cta__btn:focus { color: #fff; }

.bariq-mobile-cta__btn--call { background: var(--bq-navy); }
.bariq-mobile-cta__btn--wa   { background: var(--bq-wa); }
.bariq-mobile-cta__btn--call:active { background: var(--bq-navy-deep); }
.bariq-mobile-cta__btn--wa:active   { background: var(--bq-wa-dark); }

/*
 * Reserve the bar's height unconditionally rather than toggling padding with
 * its visibility — an animated padding change would move the whole page every
 * time the CTA appears, which is exactly the layout jump we're avoiding.
 */
body { padding-bottom: calc(var(--bq-cta-h) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 992px) {
	.bariq-mobile-cta { display: none; }
	body { padding-bottom: 0; }
}

/* ============================================================
   8. UTILITIES
   ============================================================ */
.bq-stack > * + * { margin-top: var(--bq-s-4); }

.bq-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bq-s-3);
}

@media (max-width: 575.98px) {
	.bq-cta-row { flex-direction: column; }
	.bq-cta-row .bq-btn { width: 100%; }
}

.bq-eyebrow {
	color: var(--bq-muted);
	font-size: .86rem;
	font-weight: 700;
}

.bq-divider {
	height: 1px;
	background: var(--bq-line);
	border: 0;
	margin: var(--bq-s-6) 0;
}

/* Screen-reader-only text. */
.bq-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Images must never push layout around: pair with width/height attributes. */
img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   Bootstrap gutter overflow fix.
   `.g-5` sets --bs-gutter-x on the row only, so the row's -24px
   side margins exceed the container's 12px padding and push the
   page ~13px wider than the viewport on phones. Columns stack
   below lg anyway, so the horizontal gutter is not needed there.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* ------------------------------------------------------------
   Neutralise the legacy header rules in style.css so the motion
   system's header owns layout outright. style.css hid the brand
   link with `.navbar-brand-wrapper a:first-child{display:none!important}`
   and gave `.navbar-brand` a fixed 150x65 box with `object-fit:cover`,
   which cropped the logo. Everything header-related now lives in
   css/bariq-motion.css — these two rules only cancel the old ones.
   ------------------------------------------------------------ */
.header-luxe .navbar-brand-wrapper a:first-child { display: flex; }

/* The legacy `.navbar` padding fights the fixed header's height. */
.header-luxe .navbar { padding-top: 0; padding-bottom: 0; }