/*
Theme Name: UNAPAA
Theme URI: https://unapaa.org
Author: Cityweb Technologies
Description: Modern, responsive theme for the Ugandan North American Performing Artistes Association (UNAPAA). Built for the artist directory, events and community storytelling.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unapaa
Tags: nonprofit, custom-colors, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* =========================================================================
   1. Design tokens
   ====================================================================== */
:root {
	--u-black: #0b0b0c;
	--u-yellow: #fcdc04;
	--u-red: #d0021b;
	--u-ink: #1c1f26;
	--u-muted: #5c6470;
	--u-line: #e3e6ea;
	--u-bg: #ffffff;
	--u-bg-soft: #f6f7f9;
	--u-radius: 16px;
	--u-shadow: 0 14px 40px rgba(11, 11, 12, .09);
	--u-wrap: 1180px;
	--u-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--u-font-head: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* =========================================================================
   2. Reset + base
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--u-font);
	font-size: 17px;
	line-height: 1.65;
	color: var(--u-ink);
	background: var(--u-bg);
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--u-black); }
a:hover { color: var(--u-red); }

h1, h2, h3, h4 {
	font-family: var(--u-font-head);
	line-height: 1.18;
	margin: 0 0 .6rem;
	letter-spacing: -.015em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--u-yellow); outline-offset: 2px; }

/* =========================================================================
   3. Layout helpers
   ====================================================================== */
.u-wrap { width: min(100% - 2.4rem, var(--u-wrap)); margin-inline: auto; }
.u-section { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.u-section--soft { background: var(--u-bg-soft); }
.u-section--dark { background: var(--u-black); color: #f4f5f7; }
.u-section--dark a { color: var(--u-yellow); }
.u-section--tight { padding: clamp(1.8rem, 4vw, 2.6rem) 0; }

.u-section__head { max-width: 720px; margin-bottom: 2rem; }
.u-section__head--center { margin-inline: auto; text-align: center; }
.u-kicker {
	display: inline-block; font-size: .78rem; font-weight: 750; letter-spacing: .16em;
	text-transform: uppercase; color: var(--u-red); margin-bottom: .5rem;
}
.u-lead { font-size: 1.08rem; color: var(--u-muted); }
.u-section--dark .u-lead { color: #c9ccd3; }

.u-grid { display: grid; gap: 1.6rem; }
.u-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.u-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.u-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }

/* =========================================================================
   4. Header
   ====================================================================== */
.u-skip { position: absolute; left: -9999px; }
.u-skip:focus { left: 1rem; top: 1rem; z-index: 200; background: #fff; padding: .6rem 1rem; border-radius: 8px; }

.u-topbar { background: var(--u-black); color: #d7dae0; font-size: .85rem; }
.u-topbar .u-wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: space-between; padding: .45rem 0; }
.u-topbar a { color: #d7dae0; text-decoration: none; }
.u-topbar a:hover { color: var(--u-yellow); }
.u-topbar__social { display: flex; gap: .8rem; align-items: center; }

.u-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--u-line); }
.u-header .u-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 0; }

.u-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.u-brand__mark { width: 46px; height: 46px; flex: 0 0 auto; }
.u-brand__mark--img { width: auto; height: 52px; max-width: 240px; object-fit: contain; }
.u-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.u-brand__name { font-weight: 800; font-size: 1.06rem; color: var(--u-black); letter-spacing: -.01em; }
.u-brand__tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--u-muted); }

.u-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; align-items: center; }
.u-nav a {
	display: inline-block; padding: .5rem .8rem; border-radius: 999px;
	text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--u-ink);
}
.u-nav a:hover, .u-nav .current-menu-item > a { background: var(--u-bg-soft); color: var(--u-black); }
.u-nav .menu-item-has-children { position: relative; }
.u-nav .menu-item-has-children:hover > .sub-menu { display: block; }
.u-nav .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; min-width: 210px;
	background: #fff; border: 1px solid var(--u-line); border-radius: 12px;
	box-shadow: var(--u-shadow); padding: .4rem; flex-direction: column; gap: 0;
}
.u-nav .sub-menu a { display: block; border-radius: 8px; }

.u-nav__cta { background: var(--u-black); color: #fff !important; padding: .6rem 1.1rem !important; }
.u-nav__cta:hover { background: var(--u-red); }

.u-nav-toggle {
	display: none; background: none; border: 1px solid var(--u-line); border-radius: 10px;
	padding: .5rem .8rem; font-size: 1rem; cursor: pointer;
}

/* =========================================================================
   5. Hero
   ====================================================================== */
.u-hero {
	position: relative; color: #fff; overflow: hidden;
	background: linear-gradient(135deg, #0b0b0c 0%, #1d2027 55%, #2c1114 100%);
	padding: clamp(3rem, 8vw, 6rem) 0;
}
.u-hero::after {
	content: ""; position: absolute; inset: auto -10% -40% auto; width: 60vw; height: 60vw;
	background: radial-gradient(circle at center, rgba(252, 220, 4, .18), transparent 62%);
	pointer-events: none;
}
.u-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.u-hero h1 { color: #fff; margin-bottom: 1rem; }
.u-hero p { color: #d3d7dd; font-size: 1.1rem; max-width: 56ch; }
.u-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.u-hero__flags { display: flex; gap: .35rem; margin-bottom: 1.2rem; }
.u-hero__flags span { width: 34px; height: 6px; border-radius: 3px; }
.u-hero__flags span:nth-child(1) { background: var(--u-black); border: 1px solid #444; }
.u-hero__flags span:nth-child(2) { background: var(--u-yellow); }
.u-hero__flags span:nth-child(3) { background: var(--u-red); }
.u-hero__stats {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem;
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--u-radius); padding: 1.4rem;
}
.u-hero__stats div { text-align: center; }
.u-hero__stats strong { display: block; font-size: 1.9rem; color: var(--u-yellow); line-height: 1; }
.u-hero__stats span { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #c9ccd3; }

/* =========================================================================
   6. Page header (inner pages)
   ====================================================================== */
.u-pagehead { background: var(--u-black); color: #fff; padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.u-pagehead h1 { color: #fff; margin-bottom: .4rem; }
.u-pagehead p { color: #c9ccd3; margin: 0; max-width: 66ch; }
.u-breadcrumbs { font-size: .84rem; color: #9aa0aa; margin-bottom: .6rem; }
.u-breadcrumbs a { color: #c9ccd3; text-decoration: none; }

/* =========================================================================
   7. Content blocks
   ====================================================================== */
.u-content { padding: clamp(2rem, 5vw, 3.4rem) 0; }
.u-content__inner { max-width: 780px; }
.u-content h2 { margin-top: 2rem; }
.u-content ul, .u-content ol { padding-left: 1.2rem; }
.u-content blockquote {
	margin: 1.6rem 0; padding: 1rem 1.4rem; border-left: 5px solid var(--u-yellow);
	background: var(--u-bg-soft); border-radius: 0 12px 12px 0;
}
.u-content figure { margin: 1.6rem 0; }
.u-content figcaption { font-size: .85rem; color: var(--u-muted); text-align: center; margin-top: .4rem; }

.u-cta {
	background: linear-gradient(120deg, var(--u-yellow), #ffe95c);
	color: var(--u-black); border-radius: var(--u-radius);
	padding: clamp(1.8rem, 4vw, 2.6rem); display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.4rem; align-items: center;
}
.u-cta h2 { margin-bottom: .4rem; }
.u-cta__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; }

.u-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.u-info-list li { display: flex; gap: .6rem; align-items: flex-start; }
.u-info-list svg { color: var(--u-red); margin-top: .25rem; }

.u-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.u-meta__row { display: flex; gap: .6rem; border-bottom: 1px dashed var(--u-line); padding-bottom: .5rem; }
.u-meta__label { flex: 0 0 128px; color: var(--u-muted); font-size: .9rem; }
.u-meta__value { font-weight: 600; }

.u-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.u-steps li { position: relative; padding-left: 3.1rem; }
.u-steps li::before {
	counter-increment: step; content: counter(step);
	position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem;
	display: grid; place-items: center; border-radius: 50%;
	background: var(--u-black); color: var(--u-yellow); font-weight: 800;
}

.u-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; }
.u-person { text-align: center; }
.u-person__photo { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto .7rem; background: var(--u-bg-soft); display: grid; place-items: center; font-size: 2rem; font-weight: 800; color: var(--u-red); overflow: hidden; }
.u-person__role { color: var(--u-muted); font-size: .88rem; }

/* Artist single */
.u-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1.4rem, 4vw, 2.6rem); align-items: start; }
.u-profile__photo { border-radius: var(--u-radius); overflow: hidden; border: 1px solid var(--u-line); background: var(--u-bg-soft); aspect-ratio: 4 / 5; }
.u-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.u-profile__name { margin-bottom: .2rem; }
.u-profile__stage { color: var(--u-red); font-weight: 650; margin-bottom: 1rem; }
.u-profile__socials { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.2rem 0; }
.u-profile__socials a {
	display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem;
	border: 1px solid var(--u-line); border-radius: 999px; text-decoration: none; font-size: .88rem; font-weight: 600;
}
.u-profile__socials a:hover { border-color: var(--u-black); background: var(--u-bg-soft); }
.u-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.u-gallery img { border-radius: 12px; aspect-ratio: 1 / 1; object-fit: cover; }
.u-sponsors { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: .9rem; }
.u-sponsor { margin: 0; text-align: center; }
.u-sponsor img { max-height: 96px; width: auto; max-width: 220px; object-fit: contain; border-radius: 10px; }
.u-sponsor figcaption { font-size: .8rem; color: var(--u-muted); margin-top: .35rem; }
.u-videos { display: grid; gap: .8rem; }
.u-videos a { text-decoration: none; font-weight: 600; }

/* =========================================================================
   8. Footer
   ====================================================================== */
.u-footer { background: var(--u-black); color: #c9ccd3; padding: clamp(2.4rem, 5vw, 3.6rem) 0 1.4rem; font-size: .94rem; }
.u-footer a { color: #e7e9ec; text-decoration: none; }
.u-footer a:hover { color: var(--u-yellow); }
.u-footer h3 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.u-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 1.8rem; }
.u-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.u-footer__social { display: flex; gap: .7rem; margin-top: .8rem; }
.u-footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.u-footer__social a:hover { background: var(--u-yellow); color: var(--u-black); }
.u-footer__bottom {
	margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font-size: .85rem; color: #9aa0aa;
}

/* =========================================================================
   9. Responsive
   ====================================================================== */
@media (max-width: 980px) {
	.u-hero__inner { grid-template-columns: 1fr; }
	.u-grid--sidebar { grid-template-columns: 1fr; }
	.u-profile { grid-template-columns: 1fr; }
	.u-footer__grid { grid-template-columns: 1fr 1fr; }
	.u-cta { grid-template-columns: 1fr; }
	.u-cta__actions { justify-content: flex-start; }
}

@media (max-width: 820px) {
	.u-nav-toggle { display: inline-block; }
	.u-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: #fff; border-bottom: 1px solid var(--u-line);
		padding: .8rem 1.2rem 1.2rem; box-shadow: var(--u-shadow);
	}
	.u-header.is-open .u-nav { display: block; }
	.u-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
	.u-nav a { display: block; padding: .7rem .8rem; }
	.u-nav .sub-menu { position: static; display: block; box-shadow: none; border: 0; padding-left: .8rem; }
	.u-nav__cta { text-align: center; }
	.u-topbar .u-wrap { justify-content: center; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.u-footer__grid { grid-template-columns: 1fr; }
	.u-hero__stats { grid-template-columns: 1fr; gap: .4rem; }
	.u-hero__stats div { display: flex; align-items: baseline; gap: .5rem; justify-content: center; }
}

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

/* Print */
@media print {
	.u-header, .u-footer, .u-whatsapp, .u-nav-toggle { display: none !important; }
}