/* Exhibition Islam Toolkit — shared tokens and components.
   Concept: step through the star. Lapis night, gold geometry, rooms that change colour
   as you walk through them; ivory pages for reading. Amber is the logo's own.
   Token names are prefixed (--ei-*): Elementor containers define --display, --gap, --width… */

:root {
	--ei-lapis: #101a3f;
	--ei-lapis-2: #0a1230;
	--ei-gold: #d9a74a;
	--ei-gold-2: #f0c46a;
	--ei-gold-dark: #9a6a12;  /* gold text on light backgrounds */
	--ei-amber: #f4a21e;      /* the logo's amber: primary action */
	--ei-ivory: #f3efe7;
	--ei-paper: #faf8f3;
	--ei-ink: #141a2e;
	--ei-muted: #5c6176;
	--ei-body: #3c4157;
	--ei-line: #d9d3c6;
	--ei-light: #f6f1e6;
	--ei-light-2: #b9bfd6;

	--ei-display: "Marcellus", "Reem Kufi", "Trajan Pro", Georgia, serif;
	--ei-sans: "Albert Sans", "Reem Kufi", system-ui, sans-serif;
	--ei-ar: "Reem Kufi", "Noto Kufi Arabic", "Noto Naskh Arabic", serif;

	--ei-wrap: 1280px;
	--ei-gut: clamp(16px, 4vw, 56px);
	--ei-sec: clamp(80px, 10vw, 140px);
	--ei-hdr: 84px;           /* header bar height (phones: 60px) */
}

/* Page canvas (only when the new design is showing) */
html:has(body.ei-site) { overflow-x: hidden; scroll-padding-top: 90px; }
body.ei-site { margin: 0; background: var(--ei-ivory); color: var(--ei-ink); font: 400 17px/1.6 var(--ei-sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
body.ei-site .site-main, body.ei-site .page-content { margin: 0; padding: 0; max-width: none; }
body.ei-site .page-header { display: none; }

/* Widget root reset — 0,2,0 component rules (.ei .x) win over Hello's element styles */
.ei { font-family: var(--ei-sans); color: var(--ei-ink); line-height: 1.6; }
.ei *, .ei *::before, .ei *::after { box-sizing: border-box; }
.ei :where(h1, h2, h3, h4) { font-family: var(--ei-display); font-weight: 400; line-height: 1.05; margin: 0; color: inherit; text-wrap: balance; }
.ei :where(p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; }
.ei :where(ul, ol) { list-style: none; padding: 0; }
.ei :where(a) { color: inherit; }
.ei :where(img) { display: block; max-width: 100%; height: auto; }
.ei :where(button, input, select, textarea) { font: inherit; color: inherit; text-transform: none; letter-spacing: normal; }
.ei :where(label, legend, output) { text-transform: none; letter-spacing: normal; font-family: inherit; }
.ei :where([lang="ar"]) { font-family: var(--ei-ar); letter-spacing: 0; }
.ei :focus-visible { outline: 3px solid var(--ei-amber); outline-offset: 3px; border-radius: 4px; }
.ei .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ei .wrap { width: 100%; max-width: var(--ei-wrap); margin-inline: auto; padding-inline: var(--ei-gut); }
.ei .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Type */
.ei .h-xl { font: 400 clamp(38px, 5vw, 68px)/1.04 var(--ei-display); letter-spacing: -0.01em; text-wrap: balance; }
.ei .h-md { font: 400 clamp(28px, 2.8vw, 38px)/1.1 var(--ei-display); }
.ei .lead { color: var(--ei-body); margin-top: 18px; max-width: 54ch; }
.ei .kicker { font-size: 15px; font-weight: 600; color: var(--ei-gold-2); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.ei .kicker::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; clip-path: polygon(50% 0, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%); }
.ei .kicker--dark { color: var(--ei-gold-dark); }
.ei .hint { font-size: 14px; line-height: 1.5; color: var(--ei-muted); }
.ei .link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: var(--ei-amber); }
.ei .link:hover { text-decoration-thickness: 3px; color: inherit; }
.ei .link--light { color: var(--ei-light); }
/* Touch screens: taller tap area for text links and breadcrumbs without moving the text. */
@media (pointer: coarse) {
	.ei .link { display: inline-block; padding-block: 8px; margin-block: -8px; }
	.ei :is(.ph__crumbs, .band__crumbs) a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}

/* Buttons */
.ei .btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 24px;
	border-radius: 999px; border: 0; font-family: var(--ei-sans); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
	cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; white-space: normal; max-width: 100%;
}
.ei .btn--gold { background: var(--ei-amber); color: var(--ei-ink); }
.ei .btn--gold:hover { background: var(--ei-gold-2); color: var(--ei-ink); }
.ei .btn--line { background: transparent; color: var(--ei-light); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 230, .55); }
.ei .btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ei-gold-2); color: var(--ei-gold-2); background: transparent; }
.ei .btn--lapis { background: var(--ei-lapis); color: var(--ei-light); }
.ei .btn--lapis:hover { background: #1d2b62; color: var(--ei-light); }
.ei .btn--block { width: 100%; }

/* Full-bleed widgets inside Elementor containers. Elementor 4 markup: .e-con.e-con-full > .elementor-widget
   (boxed containers add .e-con-inner). Its defaults (10px padding, boxed width, gap) never apply around
   our widgets; a page's own per-element CSS (0,3,0) still wins when someone sets values on purpose. */
.elementor-widget[class*="elementor-widget-ei_"] { width: 100%; }
.e-con:has(> .elementor-widget[class*="elementor-widget-ei_"]),
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-ei_"]) {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--gap: 0px 0px; --row-gap: 0px; --column-gap: 0px;
	--content-width: 100%; max-width: none;
}
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-ei_"]) > .e-con-inner { max-width: none; width: 100%; padding: 0; }

@media (max-width: 1020px) {
	:root { --ei-hdr: 60px; }
}
@media (max-width: 720px) {
	body.ei-site { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.ei *, .ei *::before, .ei *::after { animation: none !important; transition: none !important; }
}