/* ============================================================
   Afro Nation 2026 brand theme ("theme-an")
   Pulled from afronation.com: Funnel Display type, orange #FF651F,
   amber #FEAA1E, ink #0F1010, ice #E1EAEA, white cards, grain gradients.
   Loaded AFTER admin.css / survey.css - overrides tokens + hardcoded bits.
   ============================================================ */

@font-face {
  font-family: 'Funnel Display';
  src: url('../fonts/FunnelDisplay-Regular.ttf') format('truetype');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Funnel Display XBd Cond';
  src: url('../fonts/FunnelDisplayExBoldCondensed-Regular.otf') format('opentype');
  font-weight: 400 800;
  font-display: swap;
}

body.theme-an {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f2f5f5;
  --line: #e1eaea;
  --line-strong: #c9d6d6;
  --gold: #ff651f;
  --gold-deep: #e5541a;
  --gold-soft: #ff8a52;
  --text: #0f1010;
  --muted: #5c6363;
  --faint: #909090;
  --coral: #e85c41;
  --danger: #d63a2f;
  --success: #529214;
  --font-display: 'Funnel Display XBd Cond', 'Funnel Display', sans-serif;
  --font-body: 'Funnel Display', 'Instrument Sans', sans-serif;
  --shadow: 0 10px 34px rgba(15, 16, 16, .12);
  background: var(--bg);
  color: var(--text);
}

/* display type runs uppercase in the brand */
body.theme-an h1, body.theme-an h2,
body.theme-an .brand-name, body.theme-an .kpi .value,
body.theme-an .step-title, body.theme-an .login-card h1 {
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* the condensed face needs larger sizes than Unbounded to hold the same weight */
body.theme-an .pagehead h1 { font-size: 28px; }
body.theme-an .kpi .value { font-size: 38px; }
body.theme-an .login-card h1 { font-size: 23px; }
body.theme-an .slideover h2 { font-size: 19px; }
body.theme-an .brand-name { font-size: 15px; }
body.theme-an .masthead h1 { font-size: clamp(22px, 5.5vw, 32px); }
body.theme-an .panel h1, body.theme-an .panel h2 { font-size: 27px; }
body.theme-an .step-title { font-size: 20px; }
body.theme-an .survey-card h3 { font-size: 18px; }
body.theme-an .home-title { font-size: 24px; }
body.theme-an .report-section-title { font-size: 21px; }
body.theme-an .chartbox h3 { font-size: 16px; }

/* sunburst mark: orange -> amber (fallback tint where the mark stays) */
body.theme-an .sunmark {
  background: linear-gradient(140deg, #ff651f, #feaa1e);
}

/* Primary logo: the full-colour AFRO NATION sunburst roundel replaces
   the masked anniversary mark wherever the logo reads as "the logo". */
body.theme-an .masthead .sunmark,
body.theme-an .panel.center .sunmark.big,
body.theme-an .login-card > .sunmark,
body.theme-an .brand .sunmark {
  -webkit-mask: none;
  mask: none;
  background: url('../img/an-sun.png') center / contain no-repeat;
}
body.theme-an .masthead .sunmark { width: 96px; height: 90px; }
body.theme-an .panel.center .sunmark.big { width: 150px; height: 140px; }
body.theme-an .login-card > .sunmark { width: 118px; height: 110px; }
body.theme-an .brand .sunmark { width: 66px; height: 62px; }

/* ambient watermark: the roundel's silhouette, painted orange, slow spin */
body.theme-an .sunmark--ambient,
body.theme-an .login-sun,
body.theme-an .home-sun {
  -webkit-mask: url('../img/an-sun.png') center / contain no-repeat;
  mask: url('../img/an-sun.png') center / contain no-repeat;
  opacity: .07;
}

/* ---------------- public survey ---------------- */
body.theme-an .sky {
  background:
    radial-gradient(720px 420px at 12% -80px, rgba(255, 101, 31, .16), transparent 62%),
    radial-gradient(640px 420px at 95% 8%, rgba(61, 83, 245, .12), transparent 60%),
    radial-gradient(700px 460px at 55% 108%, rgba(254, 170, 30, .16), transparent 62%),
    radial-gradient(520px 380px at 0% 100%, rgba(255, 138, 194, .10), transparent 60%);
}
body.theme-an .panel {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 14px 44px rgba(15, 16, 16, .10);
}
body.theme-an .ribbon {
  background: repeating-linear-gradient(-45deg, #ffe9de, #ffe9de 12px, #fff3ec 12px, #fff3ec 24px);
  color: #b64312;
  border-bottom-color: #ffd2bb;
}
body.theme-an .choice { background: #fff; }
body.theme-an .choice.checked { border-color: var(--gold); background: rgba(255, 101, 31, .07); }
body.theme-an input[type=text], body.theme-an input[type=email],
body.theme-an input[type=number], body.theme-an input[type=tel],
body.theme-an input[type=password], body.theme-an select, body.theme-an textarea {
  background: #fff;
}
body.theme-an .pill { background: #fff; }
body.theme-an .pill.on {
  background: linear-gradient(140deg, #ff8a52, #ff651f 55%, #e5541a);
  color: #fff;
}
body.theme-an .btn.gold {
  background: linear-gradient(140deg, #ff8a52, #ff651f 55%, #e5541a);
  color: #fff;
  box-shadow: 0 6px 22px rgba(255, 101, 31, .30);
  text-transform: uppercase;
  letter-spacing: .04em;
}
body.theme-an .arc-fill { filter: drop-shadow(0 0 6px rgba(255, 101, 31, .40)); }
body.theme-an .arc-sun { fill: #ff651f; filter: drop-shadow(0 0 10px rgba(255, 101, 31, .65)); }
body.theme-an .pagefoot { color: #b9c4c4; }
body.theme-an .site-built a { background: rgba(255, 255, 255, .75); }

/* intl-tel-input back to light */
body.theme-an .iti__dropdown-content { background: #fff; border-color: var(--line-strong); color: var(--text); }
body.theme-an .iti__search-input { background: #fff; color: var(--text); border-bottom-color: var(--line); }
body.theme-an .iti__country.iti__highlight { background: rgba(255, 101, 31, .08); }

/* ---------------- admin ---------------- */
body.theme-an .sidebar { background: #0f1010; border-right-color: #232626; }
body.theme-an .sidebar .nav-item { color: #a9b2b2; }
body.theme-an .sidebar .nav-item:hover { background: #1c1f1f; color: #fff; }
body.theme-an .sidebar .nav-item.active {
  background: linear-gradient(120deg, rgba(255, 101, 31, .22), rgba(255, 101, 31, .08));
  color: #ff8a52;
}
body.theme-an .sidebar .brand-name, body.theme-an .userchip b { color: #fff; }
body.theme-an .userchip { border-top-color: #232626; }
body.theme-an .userchip span { color: #909090; }

body.theme-an .main { background: var(--bg); }
body.theme-an .card { background: #fff; border-color: var(--line); }
body.theme-an .kpi .value em { color: var(--gold); }
body.theme-an table.list tr:hover td { background: rgba(255, 101, 31, .03); }
body.theme-an .btn { background: #fff; }
body.theme-an .btn:hover { border-color: var(--gold); }
body.theme-an .btn-gold {
  background: linear-gradient(140deg, #ff8a52, #ff651f 55%, #e5541a);
  color: #fff;
}
body.theme-an .badge-live { background: rgba(82, 146, 20, .14); color: #3f7210; }
body.theme-an .badge-draft { background: rgba(92, 99, 99, .12); color: #5c6363; }
body.theme-an .badge-closed { background: rgba(214, 58, 47, .12); color: #c22f24; }
body.theme-an .badge-admin { background: rgba(255, 101, 31, .13); color: #d84e12; }
body.theme-an .badge-member { background: rgba(61, 83, 245, .12); color: #3d53f5; }
body.theme-an .flash { background: #fff; box-shadow: var(--shadow); }
body.theme-an .slideover { background: #fff; border-left-color: var(--line-strong); }
body.theme-an .slideover-backdrop { background: rgba(15, 16, 16, .35); }
body.theme-an .qitem { background: #fff; }
body.theme-an .textanswers .ta { background: #fafbfb; }
body.theme-an .sunmark--ambient { opacity: .06; }
body.theme-an .login-sun { opacity: .10; }
body.theme-an .login-card { background: #fff; border-color: var(--line); }
body.theme-an .login-wrap {
  background:
    radial-gradient(700px 420px at 10% -60px, rgba(255, 101, 31, .14), transparent 62%),
    radial-gradient(600px 420px at 100% 10%, rgba(61, 83, 245, .10), transparent 60%),
    radial-gradient(700px 480px at 50% 110%, rgba(254, 170, 30, .16), transparent 62%);
}
body.theme-an .qr-pop #qrbox { border: 1px solid var(--line); }