/* Colour layer for SearchOn.me, loaded after hub.css.
   A restrained palette taken from the logo: navy and brand blue carry the page, the
   logo's orange marks the one thing to do next (main buttons, small highlights).
   Surfaces are white on a light grey page, with thin borders and soft shadows. */

:root {
    --hub: var(--line);                 /* card borders */
    --hub-nav: #13304f; --hub-nav-50: #f3f6f9; --hub-nav-line: #d5dce4; /* filter buttons */
    --shadow-hover: 0 6px 16px rgba(19, 48, 79, .08);
}

/* One muted colour per kind of post (see App\Support\Hub\Palette): --a strong (edge,
   icon, label), --a-50 the card's tint, --a-200 its border. Kept soft and desaturated so
   the cards read as coloured without shouting. */
.a-blue   { --a: #1f5f99; --a-50: #e9f1fa; --a-200: #c6d9ec; }   /* internships */
.a-teal   { --a: #0f6e66; --a-50: #e6f3f0; --a-200: #bddcd5; }   /* jobs */
.a-gold   { --a: #85600f; --a-50: #f8f1df; --a-200: #e7d5a8; }   /* scholarships */
.a-purple { --a: #5a4a99; --a-50: #eeebf8; --a-200: #d2cbea; }   /* computing and design project ideas */
.a-pink   { --a: #9c3a5c; --a-50: #f9eaef; --a-200: #e8c3d0; }   /* hackathons & competitions */
.a-indigo { --a: #34489c; --a-50: #eaedf9; --a-200: #c7cfec; }   /* fellowships */
.a-orange { --a: #a9561d; --a-50: #fbece1; --a-200: #edcdb5; }   /* calls for papers */
.a-amber  { --a: #8a6410; --a-50: #f8f0dc; --a-200: #e7d4a3; }   /* electrical project ideas */
.a-green  { --a: #2b7550; --a-50: #e7f3ec; --a-200: #c1dfcd; }   /* training */

body { background: var(--bg); }

/* Header: white, one hairline below. */
.site-header { border-bottom: 1px solid var(--line); box-shadow: none; }
.nav a { color: #33404d; }
.nav a:hover, .nav a.active { background: #eef4fa; color: var(--green); }
.brand-mark { background: var(--navy); box-shadow: none; }

/* Hero: solid navy with a faint darker edge, no glows. */
.hero {
    position: relative; overflow: hidden; padding: 64px 0 72px;
    background: linear-gradient(180deg, #13304f 0%, #102a45 100%);
}
.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 p.lead { color: #d6dfe9; opacity: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem; border-radius: 6px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #e3eaf2; font-size: .8rem; font-weight: 600; margin-bottom: 1rem; }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 .hl { color: #f3a65c; }
.btn-sun { background: var(--accent); color: #fff; }
.btn-sun:hover { background: var(--accent-600); }
.btn-ghost { border-color: rgba(255, 255, 255, .35); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }

.hero-panel { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 18px; }
.hero-panel h3 { color: #e3eaf2; font-size: .9rem; font-weight: 600; margin-bottom: .75rem; }
.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: 8px; background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; border: 1px solid transparent; transition: border-color .15s ease; }
.hero-tile:hover { text-decoration: none; border-color: #f3a65c; }
.hero-tile .ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--a-50); color: var(--a); font-size: 1rem; 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, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; padding: .55rem 1rem; min-width: 120px; color: #d6dfe9; }
.hero-stats strong { font-size: 1.35rem; color: #fff; }

/* Section headings */
.kicker { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-600); margin-bottom: .35rem; }
.section-tint, .section-tint-warm { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Tags, chips and cards */
.tag.acc { background: var(--a-50); color: var(--a); }
.tag.acc i { margin-right: .2rem; }
.tag { border-radius: 6px; }
.chip, .chip.acc { border-color: var(--hub-nav-line); color: var(--hub-nav); background: #fff; font-weight: 500; border-radius: 6px; }
.chip:hover, .chip.acc:hover { border-color: var(--hub-nav); text-decoration: none; }
.chip.active, .chip.acc.active { background: var(--hub-nav); border-color: var(--hub-nav); color: #fff; }

.card, .trust > div { border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.card.acc { transition: border-color .15s ease, box-shadow .15s ease; }
.card.acc:hover { border-color: #b9cde1; box-shadow: var(--shadow-hover); }
/* Hovering a post turns its heading green (the "Post a Job" green); it goes back when the pointer leaves. */
.card.acc h3, .card.acc h3 a, .row-card h3, .closing a strong { transition: color .15s ease; }
.card.acc:hover h3, .card.acc:hover h3 a, .row-card:hover h3, .closing a:hover strong { color: #1e8e4e; }
.card .card-ic { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--a-50); color: var(--a); font-size: 1.15rem; margin-bottom: .75rem; }
.card.acc .foot a { color: var(--green); font-weight: 600; }

/* Row cards (FYP ideas, products on the home page) */
.row-card { display: flex; gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.row-card:hover { text-decoration: none; border-color: #b9cde1; box-shadow: var(--shadow-hover); }
.row-card .card-ic { margin: 0; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--a-50); color: var(--a); font-size: 1.1rem; }
.row-card h3 { margin: 0; font-size: 1rem; }
.row-card .sub { font-size: .8rem; color: var(--muted); 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: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; color: var(--ink); }
.closing a:hover { text-decoration: none; border-color: #b9cde1; }
.closing .when { font-size: .78rem; font-weight: 700; color: var(--accent-600); background: #fdf3e9; border: 1px solid #f4d3b2; padding: .2rem .55rem; border-radius: 6px; 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; padding: 16px; }
.trust .card-ic { margin: 0; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--a-50); color: var(--a); font-size: 1.1rem; }
.trust strong { display: block; color: var(--navy); }
.trust span { font-size: .88rem; color: var(--muted); }

/* Page heads on inner pages */
/* Page heads on inner pages: the hero's navy, so the title, filters and type buttons sit
   on colour; the input boxes themselves stay white. */
.page-head { background: linear-gradient(180deg, #13304f 0%, #102a45 100%); border-bottom: 0; color: #d6dfe9; padding-bottom: 28px; }
.page-head h1 { color: #fff; }
.page-head p, .page-head .muted { color: #d6dfe9; }
.page-head a:not(.btn):not(.chip) { color: #f3a65c; }
.page-head .opp-filters { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.page-head .opp-filters label, .page-head .field label { color: #c7d3e0; }
.page-head input, .page-head select { border-color: transparent; }
.page-head .btn-primary { background: var(--accent); }
.page-head .btn-primary:hover { background: var(--accent-600); }
.page-head .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.page-head .btn-outline:hover { background: rgba(255, 255, 255, .08); }


/* Newsletter band */
.band { background: var(--navy); border-radius: 12px; }
.band .btn-primary { background: var(--accent); }
.band .btn-primary:hover { background: var(--accent-600); }

/* Buttons and form focus */
.btn { border-radius: 8px; }
.btn-primary { background: var(--green); }
.btn-primary:hover { background: var(--green-600); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(31, 95, 153, .15); }

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

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

/* Detail pages */
.acc-article { border: 1px solid var(--line); border-top: 3px solid var(--green); }
.acc-article .tags > .tag:first-child { background: var(--a-50); color: var(--a); }

/* Opportunity filters: search + date controls on one wrapping row */
.opp-filters { margin-top: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; 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%; } }

/* Coloured post cards: the kind's tint, a coloured border all round, a white icon tile and label.
   (Loaded last so it wins over the plain card rules above.) */
.card.acc { background: var(--a-50); border: 3px solid var(--a); }
.card.acc:hover { border-color: var(--a); box-shadow: 0 8px 20px rgba(19, 48, 79, .10); }
.card.acc .card-ic, .row-card .card-ic { background: #fff; color: var(--a); box-shadow: inset 0 0 0 1px var(--a-200); }
.card.acc .tag.acc { background: #fff; color: var(--a); box-shadow: inset 0 0 0 1px var(--a-200); }
.card.acc .meta, .card.acc p { color: #4b5563; }
.card.acc .foot { border-top: 1px solid var(--a-200); padding-top: .65rem; }
.card.acc .foot a { color: var(--a); }
.row-card[class*="a-"], .closing a[class*="a-"] { background: var(--a-50); border: 3px solid var(--a); }
.row-card[class*="a-"]:hover, .closing a[class*="a-"]:hover { border-color: var(--a); box-shadow: 0 6px 16px rgba(19, 48, 79, .08); }
.closing a .card-ic { background: #fff !important; color: var(--a) !important; box-shadow: inset 0 0 0 1px var(--a-200); }
.acc-article { border-top-color: var(--a, var(--green)); }

/* The type / topic buttons: a band of their own under the page head, full page width,
   bright, with every button in the same deep orange (--b). The selected button gets a
   ring and a slight lift. */
.type-band { background: linear-gradient(180deg, #fff8ee 0%, #fff1de 100%); border-top: 4px solid #e57a1f; border-bottom: 1px solid #f1d9bc; padding: 16px 0; }
.type-band .filters { margin: 0; gap: 10px; }
.type-band .filters + .filters { margin-top: 10px; }
.type-band .chip { --b: #e57a1f; }   /* every button in the logo's orange */
.type-band .chip, .type-band .chip.acc {
    background: var(--b); border: 0; color: #fff; font-weight: 600; padding: .5rem 1rem; border-radius: 8px;
    box-shadow: 0 2px 6px rgba(19, 48, 79, .18); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.type-band .chip.acc[class*="a-"] { background: var(--b); }
.type-band .chip:hover, .type-band .chip.acc:hover { color: #fff; background: #c9650f; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(19, 48, 79, .22); text-decoration: none; }
.type-band .chip.active, .type-band .chip.acc.active { background: var(--b); color: #fff; transform: translateY(-1px); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--b), 0 6px 14px rgba(19, 48, 79, .25); }
@media (prefers-reduced-motion: reduce) { .type-band .chip { transition: none; } .type-band .chip:hover, .type-band .chip.active { transform: none; } }