/*
Theme Name: AFE 2027
Theme URI: https://africafintechexpo.com
Author: T.U.A Events Ltd
Description: Africa Fintech Expo 2027 — Lagos. Classic PHP theme converted from the
             prerendered React build, with an editable Programme/Events backend.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: afe2027
*/

/* Compiled utility CSS lives in assets/css/app.css and is enqueued from functions.php.
   This file exists for the WordPress theme header and for small overrides only. */

/* ---------------------------------------------------------------------------
   Scroll-reveal, made safe without JavaScript.

   The compiled build ships `.reveal{opacity:0}` and relies on React to flip
   data-visible="true". 105 elements carry that class, so if scripts fail the
   page renders blank. Default them to visible here and only opt into the
   hidden start state once the inline head script has confirmed JS is running.
   --------------------------------------------------------------------------- */
.reveal {
	opacity: 1;
	transform: none;
}

html.afe-js .reveal[data-visible="false"] {
	opacity: 0;
	transform: translateY(28px);
}

@media (prefers-reduced-motion: reduce) {
	html.afe-js .reveal[data-visible="false"] {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   FAQ accordion (page content uses <details class="afe-faq">).
   Native <details> so it works with JavaScript disabled.
   --------------------------------------------------------------------------- */
.afe-faq {
	border: 1px solid var(--border, #e5e7eb);
	border-radius: 1rem;
	background: var(--card, #fff);
	margin-top: 0.75rem;
	overflow: hidden;
}

.afe-faq > summary {
	cursor: pointer;
	list-style: none;
	padding: 1.15rem 3rem 1.15rem 1.35rem;
	font-weight: 700;
	color: var(--navy, #1a2342);
	position: relative;
}

.afe-faq > summary::-webkit-details-marker { display: none; }

.afe-faq > summary::after {
	content: "";
	position: absolute;
	right: 1.35rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.25s ease;
	opacity: 0.55;
}

.afe-faq[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.afe-faq > summary:hover { color: var(--ember, #f26722); }

.afe-faq__body {
	padding: 0 1.35rem 1.35rem;
	color: var(--muted-foreground, #5b6478);
	line-height: 1.7;
}

.afe-faq__body p { margin-top: 0.75rem; }
.afe-faq__body ul { margin-top: 0.75rem; padding-left: 1.25rem; list-style: disc; }
.afe-faq__body li { margin-top: 0.3rem; }

/* ---------------------------------------------------------------------------
   Sticky header, scrolled state.

   The compiled build ships no bg-navy-deep/95 utility, so toggling that class
   left the header transparent once scrolled: the white page showed through and
   the light nav links became invisible. This owns the scrolled background
   outright — unlayered, so it beats the layered Tailwind rules.
   --------------------------------------------------------------------------- */
header.afe-stuck {
	background: rgba(15, 22, 48, 0.97);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 10px 30px rgba(8, 12, 28, 0.28);
}

/* Keep every link in the bar legible against that dark background. */
header.afe-stuck a,
header.afe-stuck nav a {
	color: #eef1f8;
}

header.afe-stuck nav a[data-status="active"] {
	color: var(--ember, #f5a623);
}

/* ---------------------------------------------------------------------------
   CTA buttons.

   The compiled Tailwind only contains utilities the original build used, so
   invented ones (px-10 among them) silently do nothing — which left these
   buttons with no padding and the wrong text colour. This owns the whole
   button instead of composing it from utilities that may not exist.
   --------------------------------------------------------------------------- */
.afe-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 2.25rem;
	min-height: 3.25rem;
	border-radius: 0.6rem;
	background: var(--ember, #f26722);
	color: #fff;
	font-family: var(--font-sans, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(242, 103, 34, 0.28);
	transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.afe-cta:hover,
.afe-cta:focus-visible {
	color: #fff;
	filter: brightness(1.07);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(242, 103, 34, 0.36);
}

.afe-cta:active { transform: translateY(0); }

.afe-cta:focus-visible {
	outline: 3px solid rgba(242, 103, 34, 0.45);
	outline-offset: 3px;
}

/* Secondary / outline variant on light sections */
.afe-cta--ghost {
	background: transparent;
	color: var(--navy, #1a2342);
	border: 1.5px solid rgba(26, 35, 66, 0.22);
	box-shadow: none;
}

.afe-cta--ghost:hover { color: var(--ember, #f26722); border-color: var(--ember, #f26722); filter: none; }

@media (max-width: 640px) {
	.afe-cta { width: 100%; white-space: normal; padding: 0.9rem 1.5rem; }
}