/* ENG-532: shared redesigned profile chrome (top bar + footer) so it can be
   reused outside the mentor profile (e.g. the mentee public profile). The
   mentor profile still carries an inline copy of these rules; the values here
   match it. `--light` is a variant for pages without a dark hero band. */

/* Hide the default application header/footer whenever the redesigned bar is
   rendered — keyed off .kxp-bar so pages can use the bar/footer without the
   full .kxp wrapper (e.g. the inbox). */
body:has(.kxp-bar) .header,
body:has(.kxp-bar) .footer { display: none !important; }
body:has(.kxp-bar) .main-content { padding: 0 !important; margin: 0 !important; }
body:has(.kxp-bar) { background: #fff; }

.kxp {
  --fg: #0e0e0f; --mut: #6b6b6b; --dim: #9a9a9a; --line: #e6e6e3;
  --blue: #2f6bff; --gold: #f5b301; --card: #f7f7f6;
  color: var(--fg); background: #fff; min-height: 100vh; position: relative;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: clip;
}
.kxp * { box-sizing: border-box; }
.kxp a { color: inherit; text-decoration: none; }
.kxp-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* transparent top bar over a hero band — auto-hides on scroll */
.kxp-bar { --fg: #0e0e0f; --line: #e6e6e3; position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 22px clamp(16px, 4vw, 40px);
  transition: transform .3s ease; will-change: transform; }
.kxp-bar.header--hidden { transform: translateY(-100%); }
.kxp-back { justify-self: start; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: none; cursor: pointer; color: var(--fg);
  background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.kxp-back:hover { background: #f0f0f0; }
.kxp-word { justify-self: center; font-weight: 800; letter-spacing: -0.01em; font-size: 1.3rem; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,0.55); padding-top: 6px; }
.kxp-account { justify-self: end; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--fg); box-shadow: 0 2px 10px rgba(0,0,0,0.18); }

/* Light variant — solid, in-flow bar for pages without a dark hero band */
.kxp-bar--light { position: static; background: #fff; border-bottom: 1px solid var(--line);
  padding: 14px clamp(16px, 4vw, 40px); }
.kxp-bar--light .kxp-word { color: var(--fg); text-shadow: none; padding-top: 0; }
.kxp-bar--light .kxp-back, .kxp-bar--light .kxp-account { box-shadow: none; border: 1px solid var(--line); }

.kxp-footer { --fg: #0e0e0f; --mut: #6b6b6b; --dim: #9a9a9a; --line: #e6e6e3;
  border-top: 1px solid var(--line); background: #fff; padding: clamp(36px, 6vw, 64px) clamp(20px, 6vw, 48px); text-align: center; }
.kxp-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; margin: 0; padding: 0; }
.kxp-footer__links a, .kxp-footer__links button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(0.95rem, 1.4vw, 1.25rem); color: var(--fg); text-decoration: none; transition: opacity .15s ease; }
.kxp-footer__links a:hover, .kxp-footer__links button:hover { opacity: 0.55; }
.kxp-footer__copy { margin: 26px 0 0; color: var(--dim); font-size: 0.78rem; letter-spacing: 0.04em; }