/* =====================================================================
   FYNI brand: one palette for every page of fynimentorship.org
   ---------------------------------------------------------------------
   Core orange   #FF5100   bars, banners, main buttons
   Gold          #F2A900   accents, badges, highlights
   Orange (text) #D94400   small orange text and links on white
   Ink           #231A14   body text
   Background    #FFF7F1   pages (a soft tint of the orange)
   Large orange areas carry the "sun & rings" pattern so the bright
   orange never feels flat or glaring.
   Loaded last on each page, so it overrides that page's own colours.
   Change a colour here and every page follows.
   ===================================================================== */
:root {
  --fyni-orange: #FF5100;
  --fyni-orange-text: #D94400;
  --fyni-orange-press: #E64800;
  --fyni-gold: #F2A900;
  --fyni-gold-soft: #FFF1CC;
  --fyni-ink: #231A14;
  --fyni-muted: #6B5F55;
  --fyni-faint: #A8988C;
  --fyni-bg: #FFF7F1;
  --fyni-bg-2: #FFEDE2;
  --fyni-line: #F3DFD1;

  /* page variables, mapped onto the brand (names differ between pages) */
  --orange: var(--fyni-orange);
  --orange-dark: var(--fyni-orange-text);
  --orange-deep: var(--fyni-orange-text);
  --orange-soft: #FFEDE2;
  --gold: var(--fyni-gold);
  --cream: var(--fyni-bg);
  --cream-deep: var(--fyni-bg-2);
  --paper: #FFFBF8;
  --peach: #FFE3D3;
  --ink: var(--fyni-ink);
  --espresso: var(--fyni-ink);
  --espresso-2: #3A2C22;
  --gray: var(--fyni-muted);
  --gray-light: var(--fyni-faint);
  --muted: var(--fyni-muted);
  --soft: var(--fyni-muted);
  --line: var(--fyni-line);
  --surface-soft: #FFFBF8;
  --amber-deep: var(--fyni-orange-text);
  --amber-deep-2: var(--fyni-orange-press);
  --amber-shadow: rgba(255, 81, 0, .28);
  --chat-brown: var(--fyni-orange-press);
  --fyni-deep: var(--fyni-orange);
  --page: var(--fyni-bg);
}

/* ---------- the "sun & rings" pattern ----------
   Gold sun in the top-right corner with two soft white rings.
   --sun scales it: 1 for bars, bigger for banners and full screens. */
.fyni-sun,
.admin-header,
.portal-header,
body.chat-list-mode .portal-header,
.app,
footer,
.page-banner,
.login-screen,
#screen-welcome,
.results-header,
.mentor-card,
body > header:not(.nav):not(.site-header),
.cert-hero {
  --sun: 1;
  background-color: var(--fyni-orange) !important;
  background-image:
    radial-gradient(circle at calc(100% + 24px * var(--sun)) calc(-36px * var(--sun)),
      rgba(242, 169, 0, .62) 0 calc(88px * var(--sun)), transparent calc(88px * var(--sun) + 1px)),
    radial-gradient(circle at calc(100% + 24px * var(--sun)) calc(-36px * var(--sun)),
      transparent 0 calc(124px * var(--sun)),
      rgba(255, 255, 255, .15) calc(124px * var(--sun)) calc(126px * var(--sun)),
      transparent calc(127px * var(--sun)) calc(162px * var(--sun)),
      rgba(255, 255, 255, .11) calc(162px * var(--sun)) calc(164px * var(--sun)),
      transparent calc(165px * var(--sun))) !important;
  border-color: transparent !important;
}
.app, .page-banner, footer, .results-header, .mentor-card, body > header:not(.nav):not(.site-header) { --sun: 1.7; }
.login-screen, #screen-welcome { --sun: 2.6; background-attachment: fixed; }

/* ---------- admin ---------- */
.admin-header .bell-badge { border-color: var(--fyni-orange) !important; }
.sec-pill.on { background: var(--fyni-orange) !important; border-color: var(--fyni-orange) !important; color: #fff !important; }
.sec-pill:not(.on) .cnt { background: var(--fyni-orange) !important; color: #fff !important; }
.tab-btn.active { color: var(--fyni-orange-text) !important; border-bottom-color: var(--fyni-gold) !important; }
.btn-approve, .cm-btn.primary { background: var(--fyni-orange) !important; border-color: var(--fyni-orange) !important; color: #fff !important; }
.row-actions .btn-approve { background: #2E7D4F !important; border-color: #2E7D4F !important; }   /* approve = green, on purpose */
body .admin-wrap, body .login-screen ~ .admin-wrap { background: transparent; }

/* ---------- portals ---------- */
.cl-header { background: var(--fyni-orange) !important; }
.cl-chip.on { background: var(--fyni-orange) !important; border-color: var(--fyni-orange) !important; }
.cl-chip { color: var(--fyni-orange-text) !important; }
.portal-header .profile-avatar { box-shadow: 0 0 0 2.5px var(--fyni-gold) !important; }

/* ---------- landing page ---------- */
.app { color: #fff !important; }
.app .muted, .app p { color: rgba(255, 255, 255, .92) !important; }
.app .card, .app .feat, .app [class*="feature"] { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .28) !important; }
.app-bar, .event { background: var(--fyni-orange) !important; color: #fff !important; }
footer { color: rgba(255, 255, 255, .9) !important; }
footer a { color: #fff !important; }
.ph:nth-child(3n+2) { background: linear-gradient(150deg, #FFB48A, var(--fyni-orange)) !important; }

/* ---------- application forms ---------- */
.page-banner, .page-banner h1, .page-banner .lead, .page-banner p, .page-banner strong { color: #fff !important; }
.page-banner .accent { color: var(--fyni-gold-soft) !important; }
.page-banner .eyebrow { color: #fff !important; opacity: .92; }
.page-banner .eyebrow::before, .page-banner .eyebrow::after { background: var(--fyni-gold) !important; }

/* ---------- login ---------- */
.login-screen .login-logo img { background: #fff; border-radius: 14px; padding: 8px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.login-screen > p, .login-screen > a, .login-screen .login-footer, .login-screen .foot { color: #fff !important; }

/* ---------- certificate check ---------- */
body > header:not(.nav):not(.site-header) img { background: #fff; border-radius: 12px; padding: 6px 10px; }

/* ---------- facilitator guide ---------- */
header .hero p { color: rgba(255, 255, 255, .92) !important; }
header .eyebrow { color: var(--fyni-gold-soft) !important; }
header .top img { background: #fff; }

/* ---------- career assessment ---------- */
#screen-welcome .brand-label { color: #fff !important; }
#screen-welcome .brand-divider { background: var(--fyni-gold) !important; }
.mentor-card, .mentor-card * { color: #fff; }

/* ---------- shared details ---------- */
::selection { background: var(--fyni-gold); color: var(--fyni-ink); }
a { -webkit-tap-highlight-color: rgba(255, 81, 0, .15); }

/* ---------- top bars on white pages ---------- */
.site-header, header.nav { background: rgba(255, 251, 248, .94) !important; border-bottom-color: var(--fyni-line) !important; }
/* certificate check: main button in the core orange */
#verifyBtn { background: var(--fyni-orange) !important; }