/* ============================================================
   ETA — Entrepreneurial Trades Academy
   Main Stylesheet
   ============================================================ */

:root {
  --navy: #1B2A3D;
  --navy-dark: #111D2E;
  --accent: #D97706;
  --accent-lt: #F59E0B;
  --accent-dk: #B45309;
  --steel: #334155;
  --ash: #6B7280;
  --mist: #D1D5DB;
  --paper: #F9FAFB;
  --cream: #FEFDF8;
  --teal: #0D9488;
  --blue: #2563EB;
  --coral: #D85A30;
  --berry: #6D2E46;
  --success: #059669;
  --danger: #DC2626;
  --warning: #D97706;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
body { font-family: var(--font-body); color: #1F2937; background: #fff; }

/* ---- Typography ---- */
.font-display { font-family: var(--font-display); }
.fw-800 { font-weight: 800; }
.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }
.text-accent { color: var(--accent) !important; }
.text-navy { color: var(--navy) !important; }
.text-teal { color: var(--teal) !important; }
.bg-navy { background-color: var(--navy) !important; }
.bg-navy-dark { background-color: var(--navy-dark) !important; }
.bg-steel { background-color: var(--steel) !important; }
.bg-paper { background-color: var(--paper) !important; }
.bg-cream { background-color: var(--cream) !important; }
.bg-accent { background-color: var(--accent) !important; }

/* ---- Navbar ---- */
.navbar { padding: .75rem 0; border-bottom: 3px solid var(--accent); }
.brand-eta { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff; letter-spacing: 1px; }
.brand-dot { color: var(--accent); margin: 0 .4rem; font-weight: 300; }
.brand-full { font-family: var(--font-display); font-weight: 400; font-size: .85rem; color: rgba(255,255,255,.75); letter-spacing: .3px; }
.navbar .nav-link { font-family: var(--font-display); font-weight: 600; font-size: .9rem; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--accent); }
.lang-toggle { background: rgba(255,255,255,.15); border-radius: 3px; padding: .25rem .6rem !important; font-size: .75rem !important; letter-spacing: 2px; }

/* ---- Buttons ---- */
.btn-accent { background: var(--accent); color: #fff; border: none; font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.btn-accent:hover { background: var(--accent-dk); color: #fff; }
.btn-outline-accent { border: 2px solid var(--accent); color: var(--accent); font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.btn-outline-accent:hover { background: var(--accent); color: #fff; }

/* ---- Hero ---- */
.hero { background: var(--navy-dark); position: relative; overflow: hidden; padding: 5rem 0; }
.hero::before { content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(135deg, rgba(27,42,61,.95), rgba(17,29,46,.8)); }
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: 3.5rem; line-height: 1; color: #fff; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { color: rgba(255,255,255,.8); font-size: 1.1rem; max-width: 540px; }
@media (max-width:768px) { .hero h1 { font-size: 2.5rem; } .hero { padding: 3rem 0; } }

/* ---- Section Headings ---- */
.section-head { font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--navy); }
.section-head em { color: var(--accent); font-style: normal; }
.section-sub { color: var(--ash); font-size: 1.05rem; }

/* ---- Track Cards (popup) ---- */
.track-card { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:8px; text-decoration:none; color:#fff; transition: all .2s; }
.track-card:hover { background:rgba(217,119,6,.15); border-color:var(--accent); color:#fff; }
.track-icon { font-size:1.5rem; flex-shrink:0; width:2.5rem; text-align:center; }
.track-card strong { color: #fff; }
.track-card p, .track-card .small { color: rgba(255,255,255,.7) !important; }

.track-card-light { display:block; padding:2rem; background:#fff; border:1px solid #E5E7EB; border-radius:12px; text-decoration:none; color:var(--navy); transition:all .2s; height:100%; }
.track-card-light:hover { border-color:var(--accent); box-shadow:0 4px 20px rgba(0,0,0,.08); transform:translateY(-2px); color:var(--navy); }
.track-card-light .track-num { font-family:var(--font-display); font-weight:800; font-size:2.5rem; color:var(--accent); line-height:1; }
.track-card-light h3 { font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin:.75rem 0 .5rem; }
.track-card-light p { color:var(--ash); font-size:.9rem; margin:0; }

/* ---- VAST Visual ---- */
.vast-visual { background:var(--paper); padding:4rem 0; }
.vast-step { text-align:center; padding:1.5rem 1rem; }
.vast-step-icon { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto .75rem; font-size:1.2rem; }
.vast-step h4 { font-family:var(--font-display); font-weight:700; font-size:1rem; }
.vast-step p { font-size:.85rem; color:var(--ash); margin:0; }
.vast-arrow { display:flex; align-items:center; justify-content:center; color:var(--mist); font-size:1.5rem; }
@media (max-width:768px) { .vast-arrow { transform:rotate(90deg); } }

/* ---- Cards ---- */
.eta-card { background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:2rem; transition:all .2s; }
.eta-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.08); }
.eta-card-accent { border-left:4px solid var(--accent); }
.eta-card-dark { background:var(--navy); color:#fff; border:none; }

/* ---- Pricing Cards ---- */
.price-card { background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:2rem; text-align:center; height:100%; display:flex; flex-direction:column; }
.price-card.featured { border:2px solid var(--accent); position:relative; }
.price-card.featured::before { content:'★'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; }
.price-amount { font-family:var(--font-display); font-weight:800; font-size:2.5rem; color:var(--navy); }
.price-period { font-size:.9rem; color:var(--ash); }
.price-original { text-decoration:line-through; color:var(--ash); font-size:.9rem; }
.price-member { color:var(--teal); font-weight:600; }
.price-features { list-style:none; padding:0; margin:1.5rem 0; text-align:left; }
.price-features li { padding:.4rem 0; font-size:.9rem; color:#374151; }
.price-features li i { color:var(--teal); margin-right:.5rem; width:16px; }

/* ---- Stats ---- */
.stat-block { text-align:center; padding:2rem 1rem; }
.stat-num { font-family:var(--font-display); font-weight:800; font-size:3rem; color:var(--accent); line-height:1; }
.stat-label { font-size:.85rem; color:var(--ash); margin-top:.5rem; }

/* ---- Guide Cards ---- */
.guide-card { display:flex; gap:1rem; padding:1.5rem; background:#fff; border:1px solid #E5E7EB; border-radius:8px; text-decoration:none; color:var(--navy); transition:all .2s; }
.guide-card:hover { border-color:var(--accent); box-shadow:0 2px 12px rgba(0,0,0,.06); color:var(--navy); }
.guide-card .guide-icon { width:48px; height:48px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.2rem; }
.guide-card h4 { font-family:var(--font-display); font-weight:700; font-size:1rem; margin:0 0 .25rem; }
.guide-card p { font-size:.85rem; color:var(--ash); margin:0; }
.track-badge { display:inline-block; padding:.15rem .5rem; border-radius:3px; font-size:.65rem; font-family:var(--font-display); font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.track-badge.employed { background:#DBEAFE; color:#1D4ED8; }
.track-badge.part-time { background:#FEF3C7; color:#B45309; }
.track-badge.full-time { background:#D1FAE5; color:#059669; }
.track-badge.career { background:#EDE9FE; color:#7C3AED; }

/* Password eye toggle */
.password-wrapper { position:relative; }
.password-wrapper input { padding-right:2.5rem; }
.password-toggle { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:none; border:none; padding:.25rem; color:#6B7280; cursor:pointer; font-size:1rem; line-height:1; }
.password-toggle:hover { color:var(--navy); }
/* Hide browser auto-reveal */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display:none; }

/* ---- Dashboard ---- */
.dash-card { background:#fff; border:1px solid #E5E7EB; border-radius:12px; padding:1.5rem; margin-bottom:1rem; }
.dash-card h5 { font-family:var(--font-display); font-weight:700; margin-bottom:1rem; }
.dash-stat { display:flex; align-items:center; gap:.75rem; padding:.75rem; background:var(--paper); border-radius:8px; }
.dash-stat-icon { width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; }

/* ---- Admin ---- */
.admin-sidebar { background:var(--navy); min-height:100vh; padding:1.5rem; position:fixed; width:240px; }
.admin-sidebar a { color:rgba(255,255,255,.8); text-decoration:none; display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:6px; font-size:.9rem; margin-bottom:.25rem; }
.admin-sidebar a:hover, .admin-sidebar a.active { background:rgba(255,255,255,.1); color:var(--accent); }
.admin-main { margin-left:240px; padding:2rem; background:var(--paper); min-height:100vh; }
@media (max-width:768px) { .admin-sidebar { position:relative; width:100%; min-height:auto; } .admin-main { margin-left:0; } }

/* ---- Coaching Pipeline ---- */
.pipeline { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.pipeline-stage { flex:1; min-width:200px; padding:1.5rem; position:relative; background:#fff; border:1px solid #E5E7EB; }
.pipeline-stage:first-child { border-radius:12px 0 0 12px; }
.pipeline-stage:last-child { border-radius:0 12px 12px 0; }
.pipeline-stage::after { content:'→'; position:absolute; right:-14px; top:50%; transform:translateY(-50%); font-size:1.2rem; color:var(--mist); z-index:2; background:#fff; padding:0 4px; }
.pipeline-stage:last-child::after { display:none; }
@media (max-width:768px) {
  .pipeline { flex-direction:column; }
  .pipeline-stage { border-radius:0 !important; }
  .pipeline-stage::after { right:50%; top:auto; bottom:-14px; transform:translateX(50%) rotate(90deg); }
}

/* ---- Dark Section Text Readability ---- */
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy h6,
.bg-navy-dark h1, .bg-navy-dark h2, .bg-navy-dark h3, .bg-navy-dark h4,
.bg-steel h1, .bg-steel h2, .bg-steel h3, .bg-steel h4 { color: #fff; }
.bg-navy p, .bg-navy li, .bg-navy span:not(.text-accent),
.bg-navy-dark p, .bg-navy-dark li, .bg-navy-dark span:not(.text-accent),
.bg-steel p, .bg-steel li, .bg-steel span:not(.text-accent) { color: rgba(255,255,255,.85); }
.bg-navy .text-muted, .bg-navy-dark .text-muted, .bg-steel .text-muted { color: rgba(255,255,255,.6) !important; }

/* ---- Footer Readability ---- */
footer.bg-navy-dark, footer.bg-navy-dark h5, footer.bg-navy-dark h6 { color: #fff; }
footer.bg-navy-dark p, footer.bg-navy-dark li, footer.bg-navy-dark span,
footer.bg-navy-dark small, footer.bg-navy-dark .text-muted { color: rgba(255,255,255,.7) !important; }
footer.bg-navy-dark a { color: rgba(255,255,255,.7); text-decoration: none; }
footer.bg-navy-dark a:hover { color: var(--accent); }
footer .footer-heading { color: var(--accent); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .85rem; }

/* ---- Track Selector Modal ---- */
#trackModal .modal-content { background: #1e293b !important; }
#trackModal h2 { color: #fff; }
#trackModal .modal-subtitle { color: rgba(255,255,255,.7); }
#trackModal .track-card strong { color: #fff; font-size: 1.05rem; }
#trackModal .track-card p,
#trackModal .track-card .small,
#trackModal .track-card .text-muted { color: rgba(255,255,255,.65) !important; }
#trackModal .modal-footer-links a { color: rgba(255,255,255,.5); text-decoration: none; font-size: .85rem; }
#trackModal .modal-footer-links a:hover { color: var(--accent); }
#trackModal .lang-switch { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: .2rem .6rem; color: rgba(255,255,255,.7); text-decoration: none; font-size: .75rem; letter-spacing: 1px; }
#trackModal .lang-switch:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ---- Form styling ---- */
.form-control:focus, .form-select:focus { border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(217,119,6,.15); }

/* ---- Misc ---- */
.img-cover { object-fit:cover; width:100%; height:100%; }
.bg-gradient-navy { background:linear-gradient(135deg, var(--navy), var(--steel)); }
.divider { width:60px; height:3px; background:var(--accent); }
.badge-accent { background:var(--accent); color:#fff; }
.text-balance { text-wrap:balance; }