/* =========================================================
   Golden Gates Solutions — Brand Stylesheet
   Design tokens only: palette + typography. No component or
   page-level CSS — this theme currently has no custom templates
   or widgets, just the brand system applied to Hello Elementor.
   ========================================================= */

:root{
	/* GGS brand palette (Brand Guidelines, April 2026) */
	--navy:#052699;       /* Deep Blue */
	--navy-dark:#031754;  /* darkened Deep Blue for hover/dark surfaces */
	--navy-rgb:5,38,153;
	--gold:#116AF8;       /* Electric Blue — primary accent */
	--gold-light:#20bced; /* Sky Blue */
	--gold-rgb:17,106,248;
	--gold-deep:#0a3fb0;
	--bg:#f5f8fc;
	--bg-alt:#eaf1fa;
	--surface:#ffffff;
	--text:#0b1b3a;
	--text-muted:#55637a;
	--border:rgba(5,38,153,.12);
	--radius-lg:22px;
	--radius-md:16px;
	--radius-sm:10px;
	--shadow-soft:0 20px 60px -20px rgba(5,23,84,.25);
	--shadow-lift:0 30px 70px -25px rgba(5,23,84,.4);
	--ease:cubic-bezier(.22,1,.36,1);

	--font-ar-body:'Almarai', Tahoma, Arial, sans-serif;
	--font-ar-head:'Almarai', Tahoma, Arial, sans-serif;
	--font-en-body:'Gilroy', Arial, sans-serif;
	--font-en-head:'Gilroy', Arial, sans-serif;

	--font-body:var(--font-ar-body);
	--font-head:var(--font-ar-head);
}

html.ggs-lang-en{
	--font-body:var(--font-en-body);
	--font-head:var(--font-en-head);
}

*,*::before,*::after{box-sizing:border-box;}

/* Several decorative elements intentionally run wider than the
   viewport (the footer's wave SVGs at 200%, glow orbs bleeding past
   their container) — clip any resulting horizontal overflow at the
   page level rather than constraining each effect individually. */
html,body{overflow-x:hidden;max-width:100%;}

body.ggs-body{
	background:var(--bg);
	color:var(--text);
	font-family:var(--font-body);
	line-height:1.7;
	transition:opacity .25s var(--ease);
}

/* Language switch (home.js): a brief cross-fade while the target
   language's HTML is fetched, instead of a stark instant swap or a
   full page reload. */
html.ggs-lang-switching body.ggs-body{opacity:.35;}

body.ggs-body h1,body.ggs-body h2,body.ggs-body h3,body.ggs-body h4,body.ggs-body h5,body.ggs-body h6{
	font-family:var(--font-head);
	color:var(--navy-dark);
}

/* Shared content width — same 1280px/28px rhythm as .ggs-header-inner
   and .ggs-footer-inner, so homepage sections line up with the header
   and footer instead of running their own (undefined) width. */
.ggs-container{max-width:1280px;margin-inline:auto;padding-inline:28px;}

/* ---- Brand-styled page scrollbar (replaces the OS default) ---- */
html{scrollbar-width:thin;scrollbar-color:var(--gold) var(--bg-alt);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--bg-alt);}
::-webkit-scrollbar-thumb{
	background:linear-gradient(180deg,var(--gold-light),var(--gold) 55%,var(--navy));
	border-radius:100px;
	border:2px solid var(--bg-alt);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));}
::-webkit-scrollbar-corner{background:var(--bg-alt);}