/*
 * Fund4Founders — Global Theme
 * css/f4f-theme.css
 * Single source of truth for colors, fonts, components across all pages.
 *
 * FIXED 2026-03-08: Restored contrast, dev banner visibility, nav positioning,
 * button styles, and font stack to match the professional main.css aesthetic.
 */


/* ── Design tokens ──────────────────────────────────────── */
:root {
  --bg:            #050E1A;
  --surface:       #071628;
  --border:        #1C2E45;
  --border-soft:   rgba(255,255,255,0.07);
  --gold:          #C9A84C;
  --gold-dim:      rgba(201,168,76,0.12);
  --gold-hover:    #D4B860;
  --green:         #2ECC71;
  --red:           #E74C3C;
  --blue:          #1A4A9A;
  --blue-bright:   #4A9EF0;
  --text:          #EBF0FA;
  --text-primary:  #EBF0FA;
  --text-sec:      #A8C4DE;
  --text-secondary:#A8C4DE;
  --text-dim:      #7A9BBF;
  --muted:         #7A9BBF;
  --td:            #7A9BBF;
  --ts:            #A8C4DE;
  --tp:            #EBF0FA;
  --navy-deep:     #050E1A;
  --navy-mid:      #0D2040;
  --navy-light:    #152E5A;
  --sans: Arial, sans-serif;
  --display:       Arial, Arial, sans-serif;
  --mono: Arial, sans-serif;
  --radius:        10px;
  --radius-lg:     14px;
  --transition:    0.15s ease;

  /* Legacy aliases — backward compat */
  --navy:          #071628;
  --accent-gold:   #C9A84C;
  --primary:       #C9A84C;
  --gold-accent:   #C9A84C;
  --surface-2:     #0D2040;
  --card-bg:       #071628;

  /* Role accent colors — decorative gradients on role cards */
  --role-consultant:      #148F77;
  --role-talent:          #7D3C98;
  --role-customer:        #C0392B;
  --role-partner:         #1E5C38;
  /* Semantic utility vars */
  --white:         #FFFFFF;
  --warning:       #E8A020;   /* dev/test banner amber */
  --warning-text:  #E8C070;   /* lighter amber label text */
  --warning-bg:    #1A0A00;   /* very dark brown banner bg */
  --warning-bg-2:  #2D1200;   /* dark brown stripe */
  --red-light:     #E07070;   /* soft error red */
  --blue-border:   #2A60C0;   /* button border blue */
  --blue-hover:    #2255B0;   /* button hover blue */

  /* ── Alpha tint tokens — replace hardcoded rgba() in inline styles ──────
   * Each theme can override these to match its palette.
   * Naming: --{color}-a{opacity*100}  e.g. --gold-a15 = gold at 15% opacity */
  --gold-a08:      rgba(201,168,76,0.08);
  --gold-a10:      rgba(201,168,76,0.10);
  --gold-a12:      rgba(201,168,76,0.12);
  --gold-a15:      rgba(201,168,76,0.15);
  --gold-a18:      rgba(201,168,76,0.18);
  --gold-a20:      rgba(201,168,76,0.20);
  --gold-a22:      rgba(201,168,76,0.22);
  --gold-a25:      rgba(201,168,76,0.25);
  --gold-a30:      rgba(201,168,76,0.30);
  --gold-a35:      rgba(201,168,76,0.35);
  --gold-a40:      rgba(201,168,76,0.40);

  --blue-a10:      rgba(74,158,240,0.10);
  --blue-a12:      rgba(74,158,240,0.12);
  --blue-a15:      rgba(74,158,240,0.15);
  --blue-a20:      rgba(74,158,240,0.20);
  --blue-a25:      rgba(74,158,240,0.25);
  --blue-a30:      rgba(74,158,240,0.30);

  --green-a10:     rgba(46,204,113,0.10);
  --green-a12:     rgba(46,204,113,0.12);
  --green-a15:     rgba(46,204,113,0.15);
  --green-a18:     rgba(46,204,113,0.18);
  --green-a20:     rgba(46,204,113,0.20);
  --green-a25:     rgba(46,204,113,0.25);
  --green-a30:     rgba(46,204,113,0.30);

  --white-a02:     rgba(255,255,255,0.02);
  --white-a03:     rgba(255,255,255,0.03);
  --white-a04:     rgba(255,255,255,0.04);
  --white-a06:     rgba(255,255,255,0.06);
  --white-a07:     rgba(255,255,255,0.07);
  --white-a08:     rgba(255,255,255,0.08);
  --white-a10:     rgba(255,255,255,0.10);
  --white-a12:     rgba(255,255,255,0.12);
  --white-a15:     rgba(255,255,255,0.15);
  --white-a20:     rgba(255,255,255,0.20);
  --white-a25:     rgba(255,255,255,0.25);
  --white-a30:     rgba(255,255,255,0.30);

  --dark-a50:      rgba(0,0,0,0.50);
  --dark-a70:      rgba(0,0,0,0.70);
  --dark-a80:      rgba(0,0,0,0.80);
}

/* ── Base ───────────────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
}
/* Nav is sticky (not fixed), so no body padding needed.
   Override main.css padding-top values that were set for a fixed nav. */
body          { padding-top: 0 !important; }
body.testmode { padding-top: 0 !important; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ── Dev / testmode banner — RESTORED to clearly visible amber/orange ── */
.testmode-bar, #site-devbanner {
  position: relative;
  z-index: 300;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 20px;
  background: repeating-linear-gradient(
    -55deg,
    var(--warning-bg) 0px, var(--warning-bg) 10px,
    var(--warning-bg-2) 10px, var(--warning-bg-2) 20px
  );
  border-bottom: 2px solid var(--warning);
  font-family: Arial, sans-serif, Arial, sans-serif;
  font-size: 14px;
  color: var(--warning-text);
  flex-wrap: wrap;
  text-align: center;
}
.testmode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--warning);
  color: var(--warning-bg);
  font-family: 'Share Tech Mono', Arial, sans-serif;
  font-size:14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  border: none;
}
.testmode-text {
  font-family: Arial, sans-serif, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--warning-text);
}
.testmode-text strong { color: var(--warning); }
.testmode-pill {
  font-size:14px;
  font-weight: 700;
  letter-spacing: 1px;
  background: rgba(232,160,32,0.15);
  border: 1px solid rgba(232,160,32,0.35);
  color: var(--warning);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── MAIN SITE NAV ──────────────────────────────────────── */
.nav, nav.nav, #main-nav.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: var(--nav-bg, rgba(5,14,26,0.97)) !important;
  border-bottom: 1px solid var(--border-soft, var(--gold-a15)) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
  width: 100% !important;
}
.nav-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
}
.nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
  flex-shrink: 0;
}
.nav-logo-img {
  display: block !important;
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
}
.nav-logo-wordmark {
  display: block !important;
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
}
/* Hide legacy text — wordmark image contains it */
.nav-logo-text {
  display: none !important;
}
.nav-links {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
}
.nav-links li { list-style: none !important; }
.nav-links a, .nav-links li a {
  color: var(--text-sec) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  transition: color 0.15s, background 0.15s !important;
  display: block;
}
.nav-links a:hover, .nav-links li a:hover {
  color: var(--text-primary) !important;
  background: var(--white-a06) !important;
}
.nav-links a.active, .nav-links li a.active {
  color: var(--gold) !important;
  background: rgba(201,168,76,0.06) !important;
}
.nav-cta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0;
}
.btn-ghost {
  background: transparent !important;
  border: 2px solid var(--gold) !important;
  color: var(--gold) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  text-decoration: none !important;
  display: inline-block;
}
.btn-ghost:hover {
  background: var(--gold-a10) !important;
  border-color: var(--gold-light) !important;
  color: var(--gold-light) !important;
}
/* Nav signin link keeps its own lighter style */
.nav-signin-link {
  background: transparent !important;
  border: 1px solid var(--gold-a35) !important;
  color: var(--gold) !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  text-decoration: none !important;
  display: inline-block;
}
.nav-signin-link:hover {
  background: var(--gold-a12) !important;
  border-color: rgba(201,168,76,0.6) !important;
  color: var(--gold) !important;
}
.nav-signout-link, .nav-portal-link {
  background: var(--gold-a10) !important;
  border: 1px solid var(--gold-a35) !important;
  color: var(--gold) !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  text-decoration: none !important;
  display: inline-block;
  transition: all 0.15s;
}
.nav-signout-link:hover, .nav-portal-link:hover {
  background: var(--gold-a20) !important;
}
/* "Get Started" — solid blue CTA for high visibility */
.btn-primary.nav-getstarted {
  background: var(--blue) !important;
  color: var(--white) !important;
  border: 1px solid var(--blue-border) !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  text-decoration: none !important;
  display: inline-block;
  transition: background 0.15s;
}
.btn-primary.nav-getstarted:hover {
  background: var(--blue-hover) !important;
  color: var(--white) !important;
}

/* ── PORTAL NAV ─────────────────────────────────────────── */
.portal-nav, nav.portal-nav, #main-nav.portal-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: rgba(5,14,26,0.97) !important;
  border-bottom: 1px solid var(--gold-a15) !important;
  backdrop-filter: blur(12px) !important;
  width: 100% !important;
  display: block !important;
}
.portal-nav-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.portal-nav-logo {
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-shrink: 0;
}
/* Hide legacy text spans in portal nav — wordmark has the text */
.portal-nav-logo span { display: none !important; }
.portal-nav-logo .nav-logo-wordmark,
.portal-nav-logo img.nav-logo-wordmark {
  height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0;
}
.portal-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
}
.portal-nav-links li { list-style: none !important; }
.portal-nav-links a {
  color: var(--text-sec) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  transition: color 0.15s !important;
  font-family: Arial, sans-serif !important;
  display: block;
}
.portal-nav-links a:hover { color: var(--text-primary) !important; }
.portal-nav-signout {
  background: var(--gold-a10) !important;
  border: 1px solid var(--gold-a35) !important;
  color: var(--gold) !important;
  border-radius: 7px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  transition: all 0.15s !important;
  flex-shrink: 0;
}
.portal-nav-signout:hover { background: var(--gold-a22) !important; }

/* ── MINIMAL / TOPBAR NAV (signin page) ─────────────────── */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 28px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}
.back-link {
  font-size: 14px !important;
  color: var(--text-dim) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.back-link:hover { color: var(--text) !important; }

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: Arial, Arial, sans-serif, Arial, sans-serif !important;
  color: var(--text) !important;
}
h1 { font-size: clamp(28px,5vw,52px) !important; font-weight: 700 !important; }
h2 { font-size: clamp(22px,3.5vw,38px) !important; font-weight: 700 !important; }
h3 { font-size: 20px !important; font-weight: 600 !important; }
p  { color: var(--text-sec) !important; line-height: 1.75 !important; font-family: Arial, sans-serif, Arial, sans-serif !important; }
.section-label, .eyebrow, .section-tag {
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  font-size:14px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  font-weight: 600 !important;
}

/* ── Links (scoped — not nav) ───────────────────────────── */
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); }
.nav-links a, .nav-links li a,
.portal-nav-links a { color: var(--text-sec) !important; }
.nav-links a:hover, .portal-nav-links a:hover { color: var(--text-primary) !important; }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary, .cta-btn {
  background: var(--blue) !important;
  border: 1px solid var(--blue-border) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
  display: inline-block;
}
.btn-primary:hover, .cta-btn:hover {
  background: var(--blue-hover) !important;
  color: var(--white) !important;
}
.btn-gold, .hero-cta {
  background: var(--gold) !important;
  color: var(--bg) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-weight: 700 !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
}
.btn-gold:hover, .hero-cta:hover {
  background: var(--gold-hover) !important;
  color: var(--bg) !important;
}
.btn-outline-white, .btn-ghost-white {
  background: transparent !important;
  border: 1px solid var(--gold-a40) !important;
  color: var(--gold) !important;
  border-radius: var(--radius) !important;
  padding: 10px 22px !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
  display: inline-block;
}
.btn-outline-white:hover, .btn-ghost-white:hover {
  background: var(--gold-a10) !important;
  border-color: rgba(201,168,76,0.7) !important;
}

/* ── Cards ──────────────────────────────────────────────── */
.card, .profile-card, .feature-card, .role-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text) !important;
}
.card:hover, .role-card:hover, .feature-card:hover {
  border-color: var(--gold-a30) !important;
  box-shadow: 0 0 0 1px var(--gold-a15) !important;
}

/* ── Forms ──────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]),
select, textarea {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  border-radius: var(--radius) !important;
  transition: border-color 0.15s !important;
}
/* WCAG 2.4.7 Fix (2026-03-11): removed outline:none !important which
   was hiding focus rings from keyboard users. Keyboard focus is now
   handled by the global :focus-visible rule in main.css. Mouse/touch
   users still see only the gold border-color change. */
input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
}
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; }
label {
  color: var(--text-sec) !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ── Footer ─────────────────────────────────────────────── */
footer, .footer, .site-footer, #site-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  position: relative;
  z-index: 1;
}
#site-footer a, footer a { color: var(--text-dim) !important; text-decoration: none !important; }
#site-footer a:hover, footer a:hover { color: var(--gold) !important; }

/* ── Tables ─────────────────────────────────────────────── */
table { border-collapse: collapse !important; width: 100% !important; }
th {
  background: var(--surface) !important;
  color: var(--gold) !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  font-size:14px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 600 !important;
}
td {
  color: var(--text) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 14px !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
}
tr:hover td { background: rgba(201,168,76,0.04) !important; }

/* ── Badges ─────────────────────────────────────────────── */
.badge, .tag, .chip, .role-pill, .status-badge {
  background: var(--gold-dim) !important;
  border: 1px solid var(--gold-a25) !important;
  color: var(--gold) !important;
  border-radius: 99px !important;
  font-family: Arial, sans-serif, Arial, sans-serif !important;
  font-size:14px !important;
  font-weight: 600 !important;
}

/* ── Dividers ───────────────────────────────────────────── */
hr { border: none !important; border-top: 1px solid var(--border) !important; }

/* ── Section backgrounds ─────────────────────────────────── */
section[style*="var(--navy-mid)"],
section[style*="var(--navy-deep)"],
.section-dark, .bg-dark, .section-alt {
  background: var(--surface) !important;
}
section { position: relative; z-index: 1; }
.section-pad { padding: 80px 0 !important; }
.container {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* ── Mono / code elements only ───────────────────────────── */
code, pre, .mono, .metric, .score, .kpi, .stat {
  font-family: Arial, sans-serif !important;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-a25); border-radius: 3px; }

/* ── Selection ───────────────────────────────────────────── */
::selection { background: var(--gold-a25); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL NAV — MOBILE LANDSCAPE FIXES (2026-03-12)
   Portal pages (messages, profile, portal-matches, portal-partner etc.)
   use the portal nav injected by site-components. No hamburger exists here
   since logged-in users have minimal nav (2 links + sign out). These rules
   ensure the portal nav doesn't overflow on landscape phones.
═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .portal-nav-inner {
    padding: 0 16px !important;
    gap: 8px !important;
    height: 52px !important;
  }
  .portal-nav-logo {
    font-size: 16px !important;
    gap: 0 !important;
  }
  .portal-nav-logo .nav-logo-wordmark,
  .portal-nav-logo img {
    height: 28px !important;
  }
  .portal-nav-links a {
    font-size: 14px !important;
    padding: 4px 8px !important;
  }
  .portal-nav-signout {
    font-size:14px; font-weight: 600 !important;
    padding: 5px 10px !important;
  }
}

@media (max-width: 600px) {
  .portal-nav-logo .nav-logo-wordmark,
  .portal-nav-logo img { height: 24px !important; }
  .portal-nav-inner { padding: 0 12px !important; }
  .portal-nav-links { gap: 2px !important; }
}

/* ── Prevent horizontal scroll on all portal/theme pages ───────────────── */
@media (max-width: 1024px) {
  body { overflow-x: hidden !important; }
  /* Override the !important display:flex above — hamburger takes over at mobile */
  .nav-links { display: none !important; }
  .nav-cta   { display: none !important; }
}