/* ITA Alumni Corner — brand theme, applied over Bootstrap 5.3.
   Tokens taken from the Figma Homepage Mockup (node 18:3). */
:root {
  /* Tokens from the ITA Design System (Figma node 14:31) */
  --ita:        #d60067;   /* Pink Primary — CTA, badges, active states */
  --ita-dk:     #b80058;
  --ita-darker: #a4004f;
  --ita-coral:  #ff6b4a;   /* Warm Coral — alerts, small icons */
  --ita-amber:  #f5a623;   /* Sunny Amber — highlights, strokes */
  --ita-amber-bg: #fff8ec; /* amber tint for pinned/welcome surfaces */
  --ita-success: #00b4a6;  /* Success teal — confirmations, positive states */
  --ita-success-dk: #009a8e;
  --ita-success-bg: #e6f7f5;
  --ita-ink:    #212121;   /* Body Text — headings */
  --ita-body:   #666;      /* Muted Text */
  --ita-border: #e1e1e1;   /* Border — dividers, card strokes */
  --ita-dark:   #181819;   /* Dark BG — heroes */

  /* Bootstrap variable overrides */
  --bs-primary: var(--ita);
  --bs-primary-rgb: 214,0,103;
  --bs-success: var(--ita-success);
  --bs-success-rgb: 0,180,166;
  --bs-warning: var(--ita-amber);
  --bs-warning-rgb: 245,166,35;
  --bs-link-color: var(--ita);
  --bs-link-color-rgb: 214,0,103;
  --bs-link-hover-color: var(--ita-dk);
  --bs-link-hover-color-rgb: 184,0,88;
  --bs-body-color: var(--ita-body);
  --bs-border-color: var(--ita-border);
  --bs-body-font-family: "Titillium Web", system-ui, -apple-system, sans-serif;
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;
}

body { background: #fff; color: var(--ita-body); }

h1,h2,h3,h4,h5,h6,.navbar-brand { font-family: var(--bs-body-font-family); color: var(--ita-ink); font-weight: 700; }
a { color: var(--ita); }
a:hover { color: var(--ita-dk); }

/* Buttons (Bootstrap 5.3 component vars) */
.btn-primary {
  --bs-btn-bg: var(--ita); --bs-btn-border-color: var(--ita);
  --bs-btn-hover-bg: var(--ita-dk); --bs-btn-hover-border-color: var(--ita-dk);
  --bs-btn-active-bg: var(--ita-darker); --bs-btn-active-border-color: var(--ita-darker);
  --bs-btn-disabled-bg: var(--ita); --bs-btn-disabled-border-color: var(--ita);
}
.btn-outline-primary {
  --bs-btn-color: var(--ita); --bs-btn-border-color: var(--ita);
  --bs-btn-hover-bg: var(--ita); --bs-btn-hover-border-color: var(--ita);
  --bs-btn-active-bg: var(--ita); --bs-btn-active-border-color: var(--ita);
}
.btn-link { --bs-btn-color: var(--ita); --bs-btn-hover-color: var(--ita-dk); }
.text-primary { color: var(--ita) !important; }
.bg-primary { background-color: var(--ita) !important; }

/* Success = brand teal; warning = sunny amber (override Bootstrap greens/yellows) */
.bg-success, .text-bg-success { background-color: var(--ita-success) !important; color:#fff !important; }
.text-success { color: var(--ita-success) !important; }
.border-success { border-color: var(--ita-success) !important; }
.badge.bg-success { background-color: var(--ita-success) !important; }
.bg-warning, .text-bg-warning, .badge.bg-warning { background-color: var(--ita-amber) !important; color: var(--ita-ink) !important; }
.border-warning { border-color: var(--ita-amber) !important; }
.text-warning-emphasis { color: #9a6b00 !important; }
.btn-success { --bs-btn-bg: var(--ita-success); --bs-btn-border-color: var(--ita-success);
  --bs-btn-hover-bg: var(--ita-success-dk); --bs-btn-hover-border-color: var(--ita-success-dk);
  --bs-btn-active-bg: var(--ita-success-dk); --bs-btn-active-border-color: var(--ita-success-dk); }

/* Nav */
.navbar { border-bottom: 3px solid var(--ita) !important; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.navbar-brand img { height: 34px; width: auto; }

/* Cards / tables */
.card { border: 1px solid #ececec; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.table > :not(caption) > * > * { --bs-table-bg: transparent; }

/* Eyebrow label (e.g. "HOW IT WORKS") */
.eyebrow { color: var(--ita); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; }

/* ---- Homepage sections ---- */
.ita-hero { padding: 72px 0 56px; }
.ita-hero h1 { font-size: clamp(2.3rem, 5vw, 3.25rem); line-height: 1.08; letter-spacing: -.5px; }
.ita-hero .lead { color: var(--ita-body); }
.ita-section { padding: 56px 0; }
.ita-step .num { font-size: 2.6rem; font-weight: 600; color: var(--ita-ink); line-height: 1; }
.ita-step .icon { color: var(--ita); font-size: 1.5rem; }
.ita-band { background: var(--ita-amber); }
.ita-band, .ita-band .quote { color: var(--ita-ink); }
.ita-cta-bar { background: var(--ita); color: #fff; }
.ita-cta-bar h3 { color: #fff; }
.btn-white { background:#fff; color: var(--ita); border:1px solid #fff; font-weight:600; }
.btn-white:hover { background:#f3f3f3; color: var(--ita-dk); }

/* Brand-tinted login toggle */
.btn-login { --bs-btn-bg: var(--ita); --bs-btn-border-color: var(--ita); --bs-btn-color:#fff;
             --bs-btn-hover-bg: var(--ita-dk); --bs-btn-hover-border-color: var(--ita-dk); --bs-btn-hover-color:#fff; }

/* ---- Country guide (S6) ---- */
.guide-hero { background: #fff; border-bottom: 1px solid var(--ita-border); padding: 38px 0 34px; }
.guide-hero h1 { color: #181819; font-size: clamp(2rem, 4vw, 2.8rem); }
.guide-back { color: #666666; font-size:.85rem; text-decoration:none; }
.guide-back:hover { color: var(--ita); }
.guide-intro { color: #666666; max-width: 760px; margin-top: 12px; }
.pinned-count { background: rgba(0,0,0,.05); border:1px solid var(--ita-amber); color: #212121;
                border-radius:20px; padding:3px 12px; font-size:.8rem; font-weight:600; white-space:nowrap; }

.stats-strip { background:#fff; border-top:1px solid var(--ita); border-bottom:1px solid var(--ita); }
.stats-strip .stat-cell { flex:1 1 0; min-width:160px; text-align:center; padding:12px 10px; border-right:1px solid var(--ita); }
.stats-strip .stat-cell:last-child { border-right:none; }
.stat-label { color: var(--ita); font-weight:700; font-size:.7rem; letter-spacing:.05em; }
.stat-value { color: var(--ita-ink); font-size:.9rem; margin-top:2px; }

.guide-toc { position: sticky; top: 16px; display:flex; flex-direction:column; }
.guide-toc a { display:block; padding:6px 10px; font-size:.85rem; color: var(--ita-body); text-decoration:none; border-left:2px solid transparent; }
.guide-toc a:hover { color: var(--ita); background:#faf7f8; }
.guide-toc a.pinned { border-left-color: var(--ita); color: var(--ita-ink); font-weight:600; }
.guide-toc a.pinned::after { content:""; display:inline-block; width:12px; height:12px; background:url('/static/PushPin.svg') center/contain no-repeat; margin-left:4px; vertical-align:-1px; }

.section-card { background:#fff; border:1px solid var(--ita-border); border-radius:6px; padding:16px 18px; margin-bottom:14px; scroll-margin-top:16px; }
.section-card.pinned { background: var(--ita-amber-bg); border-color: var(--ita-amber); border-left:3px solid var(--ita-amber); }
.section-head h5 { color: var(--ita-ink); }
.anchor-tag { color:#b9b9b9; font-size:.72rem; font-family:ui-monospace,monospace; }

/* Advisor toolbar on the country guide */
.advisor-bar { background: #f8f8f8; border:1px solid var(--ita-border); border-radius:8px;
               padding:10px 14px; margin-top:14px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.advisor-bar .form-select-sm { max-width:240px; }
.btn-amber { --bs-btn-bg: var(--ita-amber); --bs-btn-border-color: var(--ita-amber); --bs-btn-color: var(--ita-ink);
  --bs-btn-hover-bg:#e0951a; --bs-btn-hover-border-color:#e0951a; --bs-btn-hover-color: var(--ita-ink); }

.svg-icon { width:14px; height:14px; vertical-align:-2px; flex-shrink:0; }

@keyframes globe-spin { to { transform: rotate(360deg); } }
.globe-spin { animation: globe-spin 1.2s linear infinite; width:24px; height:24px; }
.globe-spinner { position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--ita-border); border-radius:999px;
  padding:8px 18px; box-shadow:0 2px 12px rgba(0,0,0,.12);
  display:flex; align-items:center; gap:10px; visibility:hidden; z-index:1050; white-space:nowrap; }
.globe-spinner.active { visibility:visible; }

.pin-label-hover { display:none; }
.pin-toggle:hover .pin-label-default { display:none; }
.pin-toggle:hover .pin-label-hover { display:inline; }
.btn-amber.pin-toggle:hover {
  --bs-btn-hover-bg: #fee2e2; --bs-btn-hover-border-color: #dc2626; --bs-btn-hover-color: #dc2626;
}

.pin-toggle { white-space: nowrap; }

/* ---- Student dashboard (S5) ---- */
.dash-eyebrow { color: var(--ita-body); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.68rem; margin:0 0 8px; }

/* Profile mini-card */
.profile-card { border:1px solid var(--ita-border); border-radius:10px; padding:16px; text-align:center; }
.profile-avatar { width:56px; height:56px; border-radius:50%; background: var(--ita); color:#fff; font-weight:700;
                  font-size:1.25rem; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; }
.profile-card .cert { color: var(--ita-body); font-size:.8rem; }
.profile-card .cert::before { content:"●"; color: var(--ita-amber); margin-right:5px; }

/* Quick-links stylized menu */
.quick-links { display:flex; flex-direction:column; gap:10px; }
.ql-item { display:flex; align-items:center; gap:12px; border:1px solid var(--ita-border); border-left:3px solid var(--ita);
           border-radius:8px; padding:10px 12px; text-decoration:none; background:#fff; transition: background .12s, box-shadow .12s; }
.ql-item:hover { background: #fff5f9; box-shadow:0 1px 6px rgba(0,0,0,.06); }
.ql-icon { width:34px; height:34px; flex:0 0 34px; border-radius:7px; background: var(--ita-success-bg); color: var(--ita-success);
           display:flex; align-items:center; justify-content:center; font-size:1rem; }
.ql-text { line-height:1.2; }
.ql-title { color: var(--ita-ink); font-weight:600; font-size:.9rem; }
.ql-sub { color: var(--ita-body); font-size:.75rem; }
.ql-sub .unread { color: var(--ita-coral); font-weight:600; }

/* Welcome banner */
.welcome-banner { background: var(--ita-amber-bg); border:1px solid var(--ita-amber); border-left:4px solid var(--ita-amber);
                  border-radius:10px; padding:18px 20px; }
.welcome-banner h4 { color: var(--ita-ink); margin:0 0 4px; }
.welcome-banner p { color: var(--ita-body); margin:0; font-size:.92rem; }

/* Ask-the-advisor box */
.assist-box { border:1px solid var(--ita-border); border-radius:10px; padding:18px; }
.assist-box h5 { color: var(--ita-ink); font-size:1.05rem; }
.assist-chip { display:inline-block; white-space:nowrap; border:1px solid var(--ita-border); border-radius:999px; padding:5px 12px; margin:0 6px 6px 0;
               font-size:.82rem; color: var(--ita-ink); text-decoration:none; background:#fff; }
.assist-chip:hover { border-color: var(--ita); color: var(--ita); }

/* Status box */
.status-box { border:1px solid var(--ita-border); border-radius:10px; padding:14px 16px; }
.status-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:.88rem; color: var(--ita-body); }
.status-row + .status-row { border-top:1px solid #f0f0f0; }
.status-row .val { font-weight:700; color: var(--ita); }

/* Profile facts (humanized, no underscores) */
.fact-row { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:.88rem; border-top:1px solid #f3f3f3; }
.fact-row:first-child { border-top:0; }
.fact-row .lbl { color: var(--ita-body); }
.fact-row .val { color: var(--ita-ink); font-weight:600; text-align:right; }

/* ---- Match cards (S4) ---- */
.country-thumb { width:56px; height:56px; flex:0 0 56px; border-radius:8px; object-fit:cover; background:#f0f0f0; }
.match-card { border:1px solid var(--ita-border); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
.match-card.best { border-color: var(--ita); box-shadow:0 1px 8px rgba(214,0,103,.10); }
.match-card.blocked { border-color: var(--ita-amber); }
.match-pct { color: var(--ita); font-weight:700; font-size:1.15rem; line-height:1; white-space:nowrap; }
.match-salary { color: var(--ita-body); font-size:.78rem; white-space:nowrap; }
.match-name { color: var(--ita-ink); font-weight:700; }
.save-btn { white-space:nowrap; }
.save-btn.saved { --bs-btn-color:#fff; }