/* Renew Laptop - global design tokens and base styles.
   Values mirror documentation/04-design-system.md. Change them here and the whole site follows. */

:root {
	/* Blue scale, built out from the logo blue (#2299D1). The site is blue led: tints for
	   backgrounds, mid blues for interactive elements, deep blues for the dark sections. */
	--rl-blue-50:  #F2F8FC;
	--rl-blue-100: #E1F0F9;
	--rl-blue-200: #BFE0F2;
	--rl-blue-300: #7FC4E6;
	--rl-blue-400: #2299D1;      /* brand blue, sampled from the logo */
	--rl-blue-500: #1A82B5;
	--rl-blue-600: #12658F;
	--rl-blue-700: #0E4E70;
	--rl-blue-800: #0E3A57;
	--rl-blue-900: #0A2740;

	/* Roles */
	--rl-primary: var(--rl-blue-400);
	--rl-primary-ink: var(--rl-blue-800);   /* accessible blue for text on light backgrounds */
	--rl-secondary: var(--rl-blue-800);     /* deep blue for dark sections */
	--rl-secondary-dark: var(--rl-blue-900);

	/* The Call CTA. #12658F carries white text at 6.3:1, so it passes AA at any size. */
	--rl-accent: var(--rl-blue-600);
	--rl-accent-dark: var(--rl-blue-700);
	--rl-accent-ink: #FFFFFF;

	/* The focus ring stays amber on purpose: a blue ring would disappear against the blue
	   buttons it most often lands on. */
	--rl-focus: #F5A524;

	--rl-heading: #0B1C2C;
	--rl-body: #55657A;
	--rl-bg: #FFFFFF;
	--rl-light-bg: var(--rl-blue-50);
	--rl-border: #D8E7F0;

	/* Type */
	--rl-font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rl-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* Display serif, used sparingly: the marquee and large pull quotes. */
	--rl-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

	/* Space */
	--rl-s1: 4px;  --rl-s2: 8px;  --rl-s3: 12px; --rl-s4: 16px;
	--rl-s5: 24px; --rl-s6: 32px; --rl-s7: 40px; --rl-s8: 56px;
	--rl-s9: 72px; --rl-s10: 96px; --rl-s11: 120px;

	/* Shape and motion */
	--rl-radius-card: 16px;
	--rl-radius-btn: 10px;
	--rl-radius-img: 20px;
	--rl-t: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }

/* A safety net only. Every section is built so it is not needed. */
html, body { overflow-x: clip; }

body {
	font-family: var(--rl-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--rl-body);
	background: var(--rl-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rl-font-head);
	color: var(--rl-heading);
	margin-top: 0;
}

h1 { font-size: 60px; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: 42px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; }
h3 { font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: 20px; font-weight: 600; line-height: 1.3; }

p { margin-top: 0; }

a { color: var(--rl-primary-ink); }

img { max-width: 100%; height: auto; }

/* ---------- Focus ----------
   Amber rather than blue so the ring stays visible on top of blue buttons, which is
   exactly where keyboard focus tends to land. */

/* Element selectors are needed here: Hello Elementor styles a:focus and button:focus, which
   would otherwise outrank a bare :focus-visible rule. */
:focus-visible,
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--rl-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Only suppress the default ring where :focus-visible is supported. */
@supports selector(:focus-visible) {
	:focus:not(:focus-visible) { outline: none; }
}

/* ---------- Layout helpers ---------- */

.rl-eyebrow {
	display: inline-block;
	margin-bottom: var(--rl-s3);
	font-family: var(--rl-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rl-primary-ink);
}

.rl-section-dark { background: linear-gradient(135deg, var(--rl-blue-900), var(--rl-blue-700) 58%, var(--rl-blue-600)); }
.rl-section-dark, .rl-section-dark p { color: rgba(255, 255, 255, .82); }
.rl-section-dark h1, .rl-section-dark h2, .rl-section-dark h3, .rl-section-dark h4 { color: #fff; }
.rl-section-dark .rl-eyebrow { color: var(--rl-blue-300); }

.rl-section-light { background: var(--rl-light-bg); }

/* Lead paragraph under a hero heading. */
.rl-lead { font-size: 19px; line-height: 1.65; }

/* ---------- Header (UAE / Elementor Header Footer Builder) ----------
   Target #masthead and #colophon, the actual elements. UAE also puts .ehf-header and
   .ehf-footer on the BODY, so styling those classes paints the whole page. */

#masthead {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid var(--rl-border);
	transition: box-shadow var(--rl-t), padding var(--rl-t);
}

#masthead.is-scrolled { box-shadow: 0 6px 24px rgba(11, 28, 44, .08); }

/* Condense the header padding once the page has scrolled. */
#masthead.is-scrolled .elementor-section,
#masthead.is-scrolled .e-con { transition: padding var(--rl-t); }

/* Admin bar must not push the sticky header off screen. */
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 46px; } }

/* UAE navigation menu */
.hfe-nav-menu .menu-item a.hfe-menu-item,
.hfe-nav-menu .menu-item a.hfe-sub-menu-item {
	font-family: var(--rl-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--rl-heading);
	transition: color var(--rl-t);
}

.hfe-nav-menu .menu-item a.hfe-menu-item:hover,
.hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item {
	color: var(--rl-primary-ink);
}

.hfe-nav-menu .sub-menu {
	border-radius: 14px;
	border: 1px solid var(--rl-border);
	box-shadow: 0 18px 44px rgba(11, 28, 44, .12);
	overflow: hidden;
	padding: 6px;
}

.hfe-nav-menu .sub-menu .menu-item a.hfe-sub-menu-item {
	border-radius: 8px;
	font-size: 15px;
}

/* Mobile menu panel needs to be reachable and tappable. */
.hfe-nav-menu__toggle { min-width: 48px; min-height: 48px; }
.hfe-nav-menu .menu-item a { min-height: 44px; display: flex; align-items: center; }

/* ---------- Footer ---------- */

#colophon { background: linear-gradient(180deg, var(--rl-blue-800), var(--rl-blue-900)); }
#colophon,
#colophon p,
#colophon li { color: rgba(255, 255, 255, .78); }
#colophon h1, #colophon h2, #colophon h3, #colophon h4 { color: #fff; }
#colophon a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color var(--rl-t); }
#colophon a:hover { color: var(--rl-blue-300); }

.rl-footer-links ul { margin: 0; padding: 0; list-style: none; }
.rl-footer-links li { margin-bottom: 10px; }
.rl-footer-links li a { display: inline-block; min-height: 24px; }

/* ---------- Tap targets ----------
   WCAG 2.2 Target Size (Minimum) wants 24x24 CSS px. Links inside a sentence are exempt,
   but standalone links are not, so the ones that stand alone get padded to 24px. */

#colophon a,
.rl-contact__value a,
.rl-card__link,
.rl-card__map,
.rl-maps-link,
.rl-whatsapp-link,
.elementor-widget-text-editor p > a:only-child {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ---------- Elementor resets ---------- */

/* Elementor's default container gutter is too tight on phones. */
.e-con { --container-default-padding-inline-end: 16px; --container-default-padding-inline-start: 16px; }

@media (min-width: 768px) {
	.e-con { --container-default-padding-inline-end: 24px; --container-default-padding-inline-start: 24px; }
}

/* Images inside Elementor never cause layout shift. */
.elementor-widget-image img { border-radius: var(--rl-radius-img); }

/* ---------- Content lists ---------- */

.rl-check-list ul,
ul.rl-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.rl-check-list li {
	position: relative;
	padding-left: 32px;
	line-height: 1.6;
}

.rl-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .35em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--rl-light-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3A57' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

@media (min-width: 768px) {
	.rl-check-list--2 ul,
	ul.rl-check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Tables ---------- */

.rl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rl-table-wrap table { width: 100%; border-collapse: collapse; min-width: 480px; }
.rl-table-wrap th,
.rl-table-wrap td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--rl-border); }
.rl-table-wrap th { font-family: var(--rl-font-head); font-weight: 600; color: var(--rl-heading); background: var(--rl-light-bg); }

/* ---------- Map ---------- */

.rl-map {
	position: relative;
	border-radius: var(--rl-radius-img);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--rl-border);
}
.rl-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

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

@media (max-width: 1024px) {
	h1 { font-size: 44px; }
	h2 { font-size: 34px; }
	h3 { font-size: 24px; }
	h4 { font-size: 19px; }
	.rl-lead { font-size: 18px; }
}

@media (max-width: 767px) {
	body { font-size: 16px; }
	h1 { font-size: 34px; }
	h2 { font-size: 28px; }
	h3 { font-size: 21px; }
	h4 { font-size: 18px; }
	.rl-lead { font-size: 17px; }
}

/* ---------- Print ---------- */

@media print {
	#masthead, #colophon, .rl-mobile-bar, .rl-to-top, .rl-skip-link { display: none !important; }
}

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

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

/* Logo links: the inline image leaves the anchor a few pixels tall, which fails the
   minimum target size. Make the anchor wrap the image properly. */
.rl-logo a,
.rl-footer-logo a,
.rl-logo .elementor-widget-container > a,
.rl-footer-logo .elementor-widget-container > a { display: block; line-height: 0; }

/* ---------- Header layout ----------
   Three zones that never fight for space: a fixed logo, a flexible nav, a fixed CTA. */

.rl-head { flex-wrap: nowrap !important; }

/* Desktop nav must not wrap onto a second line. */
.hfe-nav-menu .hfe-nav-menu__layout-horizontal,
.hfe-nav-menu .hfe-nav-menu__layout-horizontal > .hfe-nav-menu { flex-wrap: nowrap; }
.hfe-nav-menu__layout-horizontal .menu-item > a.hfe-menu-item { white-space: nowrap; }

@media (min-width: 1025px) and (max-width: 1280px) {
	.hfe-nav-menu .menu-item a.hfe-menu-item { font-size: 14px; padding-left: 8px; padding-right: 8px; }
}

/* Below the nav breakpoint: logo, then CTA, then the hamburger. */
@media (max-width: 1024px) {
	.rl-head__logo { order: 1; }
	.rl-head__cta  { order: 2; width: auto !important; margin-left: auto; }
	.rl-head__nav  { order: 3; flex: 0 0 auto !important; width: auto !important; }

	.rl-head__cta .rl-btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
	.rl-head__cta .rl-btn__icon { width: 16px; height: 16px; }
}

/* On small phones the sticky bottom bar already carries the call action, so the header
   keeps just the logo and the menu. */
@media (max-width: 479px) {
	.rl-head__cta { display: none !important; }
}

/* The UAE off-canvas panel needs to clear the sticky header and scroll. */
.hfe-nav-menu__toggle { border-radius: 10px; }
.hfe-nav-menu .sub-menu { min-width: 220px; }

@media (max-width: 1024px) {
	.hfe-nav-menu-wrapper.hfe-active-menu { max-height: 78vh; overflow-y: auto; }
	.hfe-nav-menu .menu-item a.hfe-menu-item,
	.hfe-nav-menu .menu-item a.hfe-sub-menu-item { font-size: 16px; }
}

/* ---------- Footer layout ---------- */

#colophon .rl-footer-links .menu-item a { min-height: 26px; font-size: 14.5px; line-height: 1.4; }
#colophon .rl-footer-links .sub-menu { display: none; }

.rl-footer-bottom { background: rgba(0, 0, 0, .18); }
.rl-footer-bottom p { margin: 0; font-size: 14px; }

@media (max-width: 1024px) {
	#colophon .rl-footer-links .menu-item a { font-size: 15px; }
}