/* Colour layer for the Career & Research Hub, loaded after hub.css.
   Each kind of content carries an accent class (.a-blue, .a-purple ...) that sets
   --a (strong), --a-50 (tint) and --a-200 (border); components below read those. */

/* One colour for every filter button and card border, so the page reads as one set;
   the per-type accents remain only on icons and labels inside the cards. */
:root {
    --hub: #059669; --hub-50: #ecfdf5; --hub-line: #a7f3d0;        /* card borders */
    --hub-nav: #0b2a5b; --hub-nav-50: #eef3fb; --hub-nav-line: #b9c8e3; /* filter buttons */
}

.a-green  { --a: #059669; --a-50: #ecfdf5; --a-200: #a7f3d0; }
.a-blue   { --a: #2563eb; --a-50: #eff6ff; --a-200: #bfdbfe; }
.a-purple { --a: #7c3aed; --a-50: #f5f3ff; --a-200: #ddd6fe; }
.a-teal   { --a: #0d9488; --a-50: #f0fdfa; --a-200: #99f6e4; }
.a-indigo { --a: #4f46e5; --a-50: #eef2ff; --a-200: #c7d2fe; }
.a-orange { --a: #ea580c; --a-50: #fff7ed; --a-200: #fed7aa; }
.a-pink   { --a: #db2777; --a-50: #fdf2f8; --a-200: #fbcfe8; }
.a-amber  { --a: #d97706; --a-50: #fffbeb; --a-200: #fde68a; }

body { background: #f4f7fb; }

/* Header: a thin rainbow rule under the bar. */
.site-header { border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
.site-header::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #059669, #0d9488, #2563eb, #7c3aed, #db2777, #ea580c, #d97706); }
.brand-mark { background: linear-gradient(135deg, #059669, #2563eb 60%, #7c3aed); box-shadow: 0 4px 10px rgba(37, 99, 235, .25); }

/* Hero */
.hero {
    position: relative; overflow: hidden; padding: 72px 0 84px;
    background: linear-gradient(125deg, #00552b 0%, #006633 22%, #0f766e 48%, #1e3a8a 78%, #312e81 100%);
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.hero::before { width: 420px; height: 420px; right: -80px; top: -120px; background: #22d3ee; }
.hero::after  { width: 380px; height: 380px; left: 35%; bottom: -220px; background: #a78bfa; }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: .82rem; font-weight: 600; margin-bottom: 1rem; }
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 4px rgba(250, 204, 21, .25); }
.hero h1 .hl { background: linear-gradient(90deg, #fde68a, #fbcfe8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-sun { background: #facc15; color: #1f2937; box-shadow: 0 6px 16px rgba(250, 204, 21, .35); }
.btn-sun:hover { background: #fde047; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }

.hero-panel { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; padding: 18px; backdrop-filter: blur(6px); }
.hero-panel h3 { color: #fff; font-size: .95rem; margin-bottom: .75rem; opacity: .9; }
.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-tile { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; transition: transform .15s ease, box-shadow .15s ease; }
.hero-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); }
.hero-tile .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--a-50); color: var(--a); font-size: 1.05rem; flex: 0 0 auto; }
.hero-tile small { display: block; color: var(--muted); font-weight: 500; font-size: .75rem; }
.hero-stats { gap: 1rem; margin-top: 2rem; opacity: 1; }
.hero-stats > div { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: .6rem 1rem; min-width: 120px; }
.hero-stats strong { font-size: 1.4rem; }

/* Section headings get a coloured kicker */
.kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a, #059669); margin-bottom: .35rem; }
.section-tint { background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tint-warm { background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%); border-top: 1px solid #fde68a; border-bottom: 1px solid #fed7aa; }

/* Accent-aware tags, chips and cards */
.tag.acc { background: var(--a-50); color: var(--a); }
.tag.acc i { margin-right: .2rem; }
.chip.acc { border-color: var(--hub-nav-line); color: var(--hub-nav); background: var(--hub-nav-50); font-weight: 500; }
.chip.acc:hover { border-color: var(--hub-nav); }
.chip.acc.active { background: var(--hub-nav); border-color: var(--hub-nav); color: #fff; }

.card.acc { border: 2px solid var(--hub); transition: transform .15s ease, box-shadow .15s ease; }
.card.acc:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(16, 24, 40, .1); }
.card.acc h3 a:hover { color: var(--a); }
.card .card-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--a-50); color: var(--a); font-size: 1.25rem; margin-bottom: .75rem; }
.card.acc .foot a { color: var(--a); font-weight: 600; }

/* Row cards (FYP ideas, products on the home page) */
.row-card { display: flex; gap: .9rem; align-items: center; background: #fff; border: 2px solid var(--hub); border-radius: 12px; padding: 14px 16px; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.row-card:hover { text-decoration: none; transform: translateX(3px); box-shadow: 0 8px 18px rgba(16, 24, 40, .08); }
.row-card .card-ic { margin: 0; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--a-50); color: var(--a); font-size: 1.2rem; }
.row-card h3 { margin: 0; font-size: 1rem; }
.row-card .sub { font-size: .8rem; color: var(--a); font-weight: 600; }

/* Closing soon */
.closing { display: grid; gap: 10px; }
.closing a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; background: #fff; border: 2px solid var(--hub); border-radius: 12px; padding: 12px 16px; color: var(--ink); }
.closing a:hover { text-decoration: none; border-color: var(--hub-nav); }
.closing .when { font-size: .8rem; font-weight: 700; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
@media (max-width: 520px) { .closing a { grid-template-columns: auto minmax(0, 1fr); } .closing .when { grid-column: 2; justify-self: start; } }

/* Trust strip */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.trust > div { display: flex; gap: .75rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.trust .card-ic { margin: 0; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--a-50); color: var(--a); font-size: 1.15rem; }
.trust strong { display: block; color: var(--navy); }
.trust span { font-size: .88rem; color: var(--muted); }

/* Page heads on inner pages */
.page-head { background: linear-gradient(120deg, #ecfdf5 0%, #eff6ff 55%, #f5f3ff 100%); border-bottom: 1px solid var(--line); }

/* Newsletter band */
.band { background: linear-gradient(120deg, #1e3a8a 0%, #4c1d95 55%, #831843 100%); position: relative; overflow: hidden; }
.band::after { content: ""; position: absolute; width: 300px; height: 300px; right: -90px; top: -120px; border-radius: 50%; background: #f472b6; filter: blur(80px); opacity: .45; pointer-events: none; }
.band > * { position: relative; z-index: 1; }

/* Buttons */
.btn-primary { background: linear-gradient(135deg, #059669, #047857); }
.btn-primary:hover { background: linear-gradient(135deg, #047857, #065f46); }

/* Footer */
.site-footer { background: #0b1f3a; color: #b8c4d6; border-top: 0; }
.site-footer h4, .site-footer .brand { color: #fff; }
.site-footer a { color: #b8c4d6; }
.site-footer a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .card.acc, .row-card, .hero-tile { transition: none; }
    .card.acc:hover, .row-card:hover, .hero-tile:hover { transform: none; }
}

/* Detail pages: accent rule along the top of the article */
.acc-article { border: 2px solid var(--hub); }
.acc-article .tags > .tag:first-child { background: var(--a-50); color: var(--a); }

/* Every filter button is navy, including "All" and "New this week". */
.chip { border-color: var(--hub-nav-line); color: var(--hub-nav); background: var(--hub-nav-50); }
.chip:hover { border-color: var(--hub-nav); }
.chip.active { background: var(--hub-nav); border-color: var(--hub-nav); color: #fff; }

/* Small cards share the same full border. */
.trust > div, .card { border: 2px solid var(--hub); }

/* Opportunity filters: search + date controls on one wrapping row */
.opp-filters { margin-top: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.opp-filters-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.opp-filters .field { margin: 0; min-width: 140px; flex: 0 1 auto; }
.opp-filters .field.grow { flex: 1 1 220px; }
.opp-filters .field.actions { display: flex; gap: .5rem; min-width: 0; }
.opp-filters label { font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.opp-filters input, .opp-filters select { padding: 0 .6rem; font-size: .9rem; height: 38px; }
.opp-filters .btn { height: 38px; }
@media (max-width: 640px) { .opp-filters .field { flex: 1 1 45%; min-width: 0; } .opp-filters .field.grow, .opp-filters .field.actions { flex-basis: 100%; } }