/* ==========================================================================
   Vibrant layer — colour, pattern and play, drawn from the official FC 2.0
   flyers: Ankara/kente geometry in red, orange, green, gold and black.
   ========================================================================== */
:root {
	--afro-red: #D7262B;
	--afro-orange: #F26A21;
	--afro-green: #0F5A3C;
	--afro-ankara: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><rect width='96' height='96' fill='%23111111'/><path d='M0 0h48L24 22z' fill='%23F9B218'/><path d='M48 0h48L72 22z' fill='%23D7262B'/><path d='M24 26l22 22-22 22L2 48z' fill='%230F5A3C'/><path d='M72 26l22 22-22 22-22-22z' fill='%23F26A21'/><path d='M0 96h48L24 74z' fill='%23D7262B'/><path d='M48 96h48L72 74z' fill='%23F9B218'/><circle cx='24' cy='48' r='6' fill='%23F9B218'/><circle cx='72' cy='48' r='6' fill='%23111111'/><path d='M0 48h2M46 48h4M94 48h2' stroke='%23F9B218' stroke-width='3'/></svg>");
	--afro-kente: repeating-linear-gradient(90deg, #F9B218 0 22px, #111 22px 26px, #0F5A3C 26px 40px, #111 40px 44px, #D7262B 44px 60px, #111 60px 64px, #F26A21 64px 74px, #111 74px 78px);
}

/* ---------- Ankara band (thin full-width Elementor container with class "afro-ankara-band") ---------- */
.afro-ankara-band { height: 22px !important; min-height: 22px !important; padding: 0 !important; background-image: var(--afro-ankara) !important; background-size: 44px 44px !important; background-repeat: repeat-x !important; animation: afro-drift 30s linear infinite; border-block: 2px solid var(--afro-black); }
.afro-ankara-band--thick { height: 40px !important; min-height: 40px !important; background-size: 80px 80px !important; }
.afro-ankara-band--reverse { animation-direction: reverse; }
@keyframes afro-drift { to { background-position: 440px 0; } }
.afro-kente-bar { display: block; height: 8px; width: 100%; background: var(--afro-kente); background-size: 78px 100%; animation: afro-drift 18s linear infinite; border-radius: 4px; }
.afro-kente-bar--short { width: 120px; margin: 1.25rem 0; }
.afro-centre .afro-kente-bar--short { margin-inline: auto; }

/* Pattern frame around any container ("afro-ankara-frame") */
.afro-ankara-frame { position: relative; padding: 14px !important; border-radius: 30px !important; background: var(--afro-ankara) 0 0 / 56px 56px !important; box-shadow: 0 40px 80px -40px rgba(215,38,43,.55); animation: afro-drift 40s linear infinite; }

/* ---------- Kinetic crossing strips ---------- */
.afro-xstrips { position: relative; height: clamp(150px, 16vw, 230px); overflow: hidden; background: var(--afro-ink); }
.afro-xstrip { position: absolute; left: -5%; width: 110%; top: 50%; padding: 1rem 0; display: flex; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); }
.afro-xstrip--a { background: var(--afro-gold); transform: translateY(-50%) rotate(-3.5deg); z-index: 2; }
.afro-xstrip--b { background: var(--afro-red); transform: translateY(-50%) rotate(3deg); }
.afro-xstrip__track { display: flex; gap: 2.2rem; white-space: nowrap; width: max-content; animation: al-marquee 34s linear infinite; font-family: var(--afro-font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.3rem, 1rem + 1.5vw, 2.2rem); line-height: 1; }
.afro-xstrip--a .afro-xstrip__track { color: var(--afro-black); }
.afro-xstrip--b .afro-xstrip__track { color: #fff; animation-direction: reverse; animation-duration: 40s; }
.afro-xstrip__track span::after { content: "✦"; margin-left: 2.2rem; font-size: .6em; vertical-align: middle; }

/* Photo sections keep a full overlay even when they also carry the cursor glow */
.afro-has-media.al-glow::before { width: auto; height: auto; inset: 0; left: 0; top: 0; transform: none; z-index: -1; border-radius: 0; transition: none; }

/* ---------- Flyer deck (rotating stack of official flyers) ---------- */
.afro-deck-wrap { width: min(420px, 82vw); max-width: 100%; margin-inline: auto; }
.afro-deck { position: relative; width: 100%; margin-inline: auto; aspect-ratio: 1122 / 1402; perspective: 1400px; }
.afro-deck__card { position: absolute; inset: 0; display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); transition: transform 1s var(--afro-ease), opacity .8s var(--afro-ease), filter .8s var(--afro-ease); cursor: pointer; background: #111; }
.afro-deck__card img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
.afro-deck__card[data-pos="0"] { transform: translate3d(0,0,0) rotate(0); z-index: 4; }
.afro-deck__card[data-pos="1"] { transform: translate3d(14%, 3%, -60px) rotate(6deg); z-index: 3; filter: brightness(.75); }
.afro-deck__card[data-pos="2"] { transform: translate3d(-14%, 5%, -120px) rotate(-7deg); z-index: 2; filter: brightness(.55); }
.afro-deck__card[data-pos="3"] { transform: translate3d(0, 8%, -180px) rotate(2deg) scale(.92); z-index: 1; filter: brightness(.4); }
.afro-deck__card[data-pos="out"] { transform: translate3d(-120%, -6%, 0) rotate(-24deg); opacity: 0; z-index: 5; }
.afro-deck__nav { display: flex; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.afro-deck__dot { width: 34px; height: 6px; border-radius: 4px; border: 0; background: rgba(255,255,255,.2); cursor: pointer; transition: background .4s, width .4s var(--afro-ease); padding: 0; }
.afro-deck__dot[aria-current="true"] { background: var(--afro-gold); width: 56px; }
.afro-deck__badge { position: absolute; top: -18px; right: -18px; z-index: 6; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--afro-red); color: #fff; font-family: var(--afro-font-display); font-weight: 600; text-transform: uppercase; font-size: .82rem; line-height: 1.05; box-shadow: 0 16px 40px -10px rgba(215,38,43,.7); animation: afro-bob 4s ease-in-out infinite; }
.afro-deck__badge strong { display: block; font-size: 1.6rem; color: var(--afro-yellow); }
@keyframes afro-bob { 50% { transform: translateY(-8px) rotate(6deg); } }

/* ---------- Scrapbook collage of real event photos ---------- */
.afro-collage { display: grid !important; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(70px, 7.5vw, 110px); gap: 0 !important; position: relative; }
.afro-collage > .elementor-element { margin: 0 !important; width: auto !important; max-width: none !important; }
.afro-snap .elementor-widget-container { background: #F7F5EF; padding: 10px 10px 34px; border-radius: 6px; box-shadow: 0 30px 50px -25px rgba(0,0,0,.9); transform: rotate(var(--r, -3deg)); transition: transform .8s var(--afro-ease), box-shadow .8s; height: 100%; position: relative; }
.afro-snap img { width: 100%; height: 100% !important; object-fit: cover; border-radius: 2px !important; }
.afro-snap .elementor-widget-container::after { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(249,178,24,.75); transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.afro-snap:hover .elementor-widget-container { transform: rotate(0) scale(1.04); z-index: 5; box-shadow: 0 40px 70px -25px rgba(249,178,24,.45); }
.afro-snap:hover { z-index: 6; }
.afro-snap figcaption, .afro-snap .widget-image-caption { position: absolute; left: 12px; right: 12px; bottom: 8px; margin: 0; font-family: var(--afro-font-serif); font-style: italic; font-size: .9rem; color: #333; text-align: center; }
.afro-collage > :nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 4; --r: -4deg; }
.afro-collage > :nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 3; --r: 3deg; margin-top: 1.5rem !important; }
.afro-collage > :nth-child(3) { grid-column: 4 / 6; grid-row: 3 / 6; --r: -2deg; z-index: 2; }
.afro-collage > :nth-child(4) { grid-column: 1 / 3; grid-row: 4 / 6; --r: 4deg; margin-left: 1rem !important; }
.afro-collage > :nth-child(5) { grid-column: 2 / 5; grid-row: 4 / 7; --r: -1.5deg; margin-top: 2.5rem !important; z-index: 3; }
.afro-collage > :nth-child(6) { grid-column: 5 / 7; grid-row: 5 / 7; --r: 5deg; margin-top: 1rem !important; }
.afro-credit { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--afro-text-muted); }
.afro-credit strong { color: var(--afro-yellow); font-weight: 700; }

/* ---------- Floating sparks (html widget with class "afro-sparks" containing empty <i>s) ---------- */
.afro-sparks { position: absolute !important; inset: 0; z-index: 0; pointer-events: none; width: 100% !important; overflow: hidden; }
.afro-sparks i { position: absolute; bottom: -20px; width: 6px; height: 6px; border-radius: 50%; background: var(--afro-yellow); opacity: 0; animation: afro-spark 9s linear infinite; box-shadow: 0 0 12px rgba(249,178,24,.8); }
.afro-sparks i:nth-child(3n) { background: var(--afro-red); box-shadow: 0 0 12px rgba(215,38,43,.8); width: 5px; height: 5px; }
.afro-sparks i:nth-child(4n) { background: var(--afro-orange); width: 4px; height: 4px; }
.afro-sparks i:nth-child(5n) { background: #fff; width: 3px; height: 3px; }
.afro-sparks i:nth-child(1) { left: 6%; animation-delay: 0s; } .afro-sparks i:nth-child(2) { left: 14%; animation-delay: 2.1s; animation-duration: 11s; }
.afro-sparks i:nth-child(3) { left: 23%; animation-delay: 4.4s; } .afro-sparks i:nth-child(4) { left: 31%; animation-delay: 1.2s; animation-duration: 13s; }
.afro-sparks i:nth-child(5) { left: 40%; animation-delay: 6s; } .afro-sparks i:nth-child(6) { left: 48%; animation-delay: 3.3s; animation-duration: 10s; }
.afro-sparks i:nth-child(7) { left: 57%; animation-delay: .7s; } .afro-sparks i:nth-child(8) { left: 65%; animation-delay: 5.2s; animation-duration: 12s; }
.afro-sparks i:nth-child(9) { left: 73%; animation-delay: 2.8s; } .afro-sparks i:nth-child(10) { left: 81%; animation-delay: 7.1s; animation-duration: 14s; }
.afro-sparks i:nth-child(11) { left: 89%; animation-delay: 1.9s; } .afro-sparks i:nth-child(12) { left: 95%; animation-delay: 4.9s; animation-duration: 11s; }
@keyframes afro-spark { 0% { transform: translate3d(0,0,0) scale(.6); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .8; } 100% { transform: translate3d(30px,-85vh,0) scale(1.1); opacity: 0; } }

/* ---------- Warm, colourful hero ---------- */
.afro-hero--warm .afro-bg-media img { filter: saturate(1.05) contrast(1.05) brightness(.72) !important; object-position: 72% 62% !important; }
.afro-hero--warm::before { background: linear-gradient(90deg, rgba(17,17,17,.95) 0%, rgba(17,17,17,.7) 40%, rgba(17,17,17,.15) 100%), radial-gradient(70% 90% at 85% 30%, rgba(215,38,43,.25), transparent 60%), linear-gradient(0deg, var(--afro-ink) 0%, transparent 30%) !important; }
.afro-presents { display: inline-flex; align-items: center; gap: .7rem; padding: .5rem .55rem .5rem 1rem; border-radius: 999px; background: rgba(17,17,17,.55); border: 1px solid rgba(249,178,24,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.afro-presents b { background: var(--afro-gold); color: var(--afro-black); padding: .35rem .75rem; border-radius: 999px; letter-spacing: .08em; }

/* Featuring chips with flyer colours */
.afro-feature-chips { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.afro-feature-chips li { padding: .6rem 1.1rem; border-radius: 999px; font-family: var(--afro-font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; color: #fff; }
.afro-feature-chips li:nth-child(4n+1) { background: var(--afro-red); }
.afro-feature-chips li:nth-child(4n+2) { background: var(--afro-green); }
.afro-feature-chips li:nth-child(4n+3) { background: var(--afro-gold); color: var(--afro-black); }
.afro-feature-chips li:nth-child(4n+4) { background: var(--afro-orange); }

/* Colour accents on existing components */
.afro-card:nth-child(4n+1)::after { border-color: rgba(249,178,24,.6); }
.afro-card:nth-child(4n+2)::after { border-color: rgba(215,38,43,.6); }
.afro-card:nth-child(4n+3)::after { border-color: rgba(242,106,33,.6); }
.afro-card:nth-child(4n+4)::after { border-color: rgba(15,90,60,.85); }
.afro-event-row::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--afro-kente); background-size: 78px 100%; opacity: 0; transition: opacity .5s; }
.afro-event-row:hover::before { opacity: 1; }
.afro-counters { position: relative; }
.afro-counters::before { content: ""; position: absolute; top: -2px; left: 0; width: 160px; height: 4px; background: var(--afro-kente); background-size: 78px 100%; border-radius: 4px; }

/* ---------- Elementor 4 optimized markup (no .elementor-widget-container) ---------- */
.afro-snap { position: relative; }
.afro-snap > figure, .afro-snap > img { display: flex; flex-direction: column; height: 100%; margin: 0; background: #F7F5EF; padding: 10px 10px 8px; border-radius: 6px; box-shadow: 0 30px 50px -25px rgba(0,0,0,.9); transform: rotate(var(--r, -3deg)); transition: transform .8s var(--afro-ease), box-shadow .8s; position: relative; }
.afro-snap > figure img { flex: 1 1 auto; min-height: 0; width: 100%; height: 100% !important; object-fit: cover; border-radius: 2px !important; }
.afro-snap > figure figcaption { position: static !important; flex: none; margin: 6px 0 0 !important; padding: 0; font-family: var(--afro-font-serif) !important; font-style: italic; font-size: .95rem !important; line-height: 1.2; color: #3A3833 !important; text-align: center; background: none; }
.afro-snap > figure::after { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(249,178,24,.8); transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.afro-snap:hover > figure { transform: rotate(0) scale(1.05); box-shadow: 0 40px 70px -25px rgba(249,178,24,.5); }
.afro-snap.al-zoom-in.is-in > figure { animation: afro-snap-in .9s var(--afro-ease) backwards; }
@keyframes afro-snap-in { from { transform: rotate(calc(var(--r, -3deg) * 4)) scale(.8); } to { transform: rotate(var(--r, -3deg)); } }

.afro-frame-el { position: relative; isolation: isolate; }
.afro-frame-el img { border-radius: var(--afro-radius-lg); }
.afro-frame-el::after { content: ""; position: absolute; inset: 14px; border-radius: calc(var(--afro-radius-lg) - 8px); border: 1px solid rgba(255,219,73,.6); pointer-events: none; z-index: 2; opacity: 0; transform: scale(1.04); transition: opacity .9s var(--afro-ease) .4s, transform .9s var(--afro-ease) .4s, inset .6s var(--afro-ease); }
.afro-frame-el.is-in::after, .elementor-editor-active .afro-frame-el::after { opacity: 1; transform: none; }
.afro-frame-el:hover::after { inset: 20px; }
.afro-frame-el--arch::after { border-radius: 999px 999px 14px 14px; }
.afro-frame-el--circle::after { border-radius: 50%; }
.afro-frame-el--mat > img, .afro-frame-el--mat > figure { background: var(--afro-black); padding: clamp(.6rem, 1.2vw, 1rem); border: 1px solid var(--afro-border); border-radius: 28px; box-shadow: var(--afro-shadow); }

@media (max-width: 767px) {
	.afro-collage { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 22vw; }
	.afro-collage > :nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 4; }
	.afro-collage > :nth-child(2) { grid-column: 1 / 3; grid-row: 4 / 6; margin-top: 0 !important; }
	.afro-collage > :nth-child(3) { grid-column: 3 / 5; grid-row: 4 / 7; }
	.afro-collage > :nth-child(4) { grid-column: 1 / 3; grid-row: 6 / 8; margin-left: 0 !important; }
	.afro-collage > :nth-child(5) { grid-column: 2 / 5; grid-row: 8 / 11; margin-top: 0 !important; }
	.afro-collage > :nth-child(6) { display: none; }
	.afro-deck { width: min(86%, 380px); }
	.afro-deck__badge { width: 86px; height: 86px; font-size: .7rem; right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
	.afro-ankara-band, .afro-kente-bar, .afro-ankara-frame, .afro-xstrip__track, .afro-deck__badge, .afro-sparks i, .afro-counters::before { animation: none !important; }
	.afro-sparks { display: none; }
}