/* ================================
   QFIN — custom theme overrides
   Header shows ONE hero image
   ================================ */

/* Optional: config-driven colours from _config.yml */
:root{
  --title-color: #ffffff;
  --title-blue:  #a3d5ff;
  --title-pink:  #f5a9d6;

  /* Base palette */
  --bg:#000000;
  --txt:#ffffff;
  --pink:#f5a9d6;
  --blue:#a3d5ff;
  --card:#0e0e10;
  --border:#26262b;
}

/* Base */
html, body { background: var(--bg); color: var(--txt); }
a { color: var(--blue); }
a:hover { color: var(--pink); }

h1, h2, h3, h4, h5, h6 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  letter-spacing: 0.2px;
}

/* Alternate heading colours */
h2, h4, h6 { color: var(--pink); }
h3, h5     { color: var(--blue); }

/* ================================
   HERO HEADER (Cayman .page-header)
   — single black header with logo
   ================================ */
.page-header{
  background: #000 !important;
  background-image: url("/assets/images/qfin-logo-hero-simple.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;

  min-height: 300px;      /* adjust height if you want bigger/smaller */
  padding: 0 !important;  /* remove theme padding */
  border-bottom: 1px solid var(--border);
}

/* Hide theme header text so only the image shows */
.page-header .project-name,
.page-header .project-tagline{
  display: none !important;
}

/* Kill any theme green in the header area */
.page-header, .page-header * { color: #fff !important; }
.page-header .btn,
.page-header a.btn,
.page-header .btn:visited {
  color: #fff !important;
  border-color: #fff !important;
  background: transparent !important;
}
.page-header .btn:hover,
.page-header a.btn:hover {
  color: #000 !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* If an old in-page hero exists, hide it to avoid duplicates */
.qfin-hero-banner { display: none !important; }

/* ================================
   Title styles (used below header)
   ================================ */
/* Solid title colour (from _config.yml) */
.trans-title{
  color: var(--title-color);
  -webkit-text-fill-color: var(--title-color);
  text-align: center;
  margin: 0.8rem 0 0.3rem 0;
}

/* Add .gradient to switch to trans-flag gradient */
.trans-title.gradient{
  background: linear-gradient(
    180deg,
    var(--title-blue) 0%,
    var(--title-blue) 20%,
    var(--title-pink) 20%,
    var(--title-pink) 40%,
    #ffffff 40%,
    #ffffff 60%,
    var(--title-pink) 60%,
    var(--title-pink) 80%,
    var(--title-blue) 80%,
    var(--title-blue) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ================================
   Layout & components
   ================================ */
.qfin-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.qfin-section { margin: 2rem 0 1rem; }
.qfin-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.qfin-card {
  background: var(--card);
  border: 3px solid #fff;   /* was 1px var(--border) */
  border-radius: 14px;
  padding: 1rem;
}

.qfin-section.events .qfin-card,
.qfin-section.members .qfin-card {
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}
.logo-row { display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap; margin: 1rem 0 2rem; }
.logo-row img { display:block; height:56px; width:auto; } /* default size */
.logo-row img.logo-ivi { height:44px; }                   /* tweak one logo */

.qfin-meta { color:#d8d8d8; font-size: 0.95rem; }
.qfin-desc { margin-top: 0.35rem; }

.qfin-btn {
  display:inline-block; padding:0.55rem 0.9rem; border-radius:10px;
  border:1px solid var(--border); text-decoration:none; font-weight:700; color: var(--txt);
}
.qfin-btn:hover { border-color: var(--pink); color:#000; background: var(--pink); }

/* Members */
.qfin-member { display:grid; grid-template-columns: 84px 1fr; gap:0.9rem; align-items:start; }
.qfin-member img { width:84px; height:84px; border-radius:50%; object-fit:cover; border:1px solid var(--border); background:#111; }
.qfin-member h3 { margin: 0 0 0.2rem 0; } /* inherits H3 (blue) */
.qfin-small { font-size:0.95rem; color:#d6d6d6; }

.qfin-hr { border:0; height:1px; background: var(--border); margin: 1.5rem 0; }

/* Publications */
.pub-list { list-style:none; padding-left:0; }
.pub-list li { border-bottom:1px dashed var(--border); padding:0.6rem 0; }
.pub-title { color:var(--txt); font-weight:700; }
.pub-venue { color: var(--blue); }
.pub-authors { color:#eaeaea; }
.pub-year { color: var(--pink); font-weight:700; padding-left: 0.25rem; }
.pub-links a { margin-right:0.5rem; }

/* Footer */
.footer-note { margin-top:2rem; color:#bdbdbd; font-size:0.9rem; }

/* Responsive tweak */
@media (max-width: 640px){
  .page-header{ min-height: 220px; }
}