/* ==========================================================================
   HUBFINANCE — site-wide fixes (Sept 2026)
   1) One identical header + category submenu on EVERY page
   2) Crisp text logo (no more blurry bitmap on retina screens)
   3) Submenu contrast fix (all categories readable on navy)
   4) "Les plus lus" titles wrap instead of truncating
   5) Fallback thumb for posts without a feature image
   Loaded on all pages AFTER app.css / home-redesign.css.
   ========================================================================== */

/* ---------- 1. Header (all pages) ---------- */
.hf-site-header {
  position: sticky; top: 0; z-index: 50;
  background: #061521; color: #fff;
  border-bottom: 0;
  font-family: "Fira Sans", Arial, sans-serif;
}
.hf-header-inner {
  height: 78px; max-width: 1440px; width: calc(100% - 72px);
  margin: auto; display: flex; align-items: center; gap: 28px;
}
.hf-header-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hf-logo-svg { height: 30px; width: auto; display: block; }
.hf-logo-dot { width: 9px; height: 9px; border-radius: 50%; background: #20ddd8; flex: none; }
.hf-logo-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: #fff; line-height: 1;
}
.hf-header-nav { margin-left: 4px; }
.hf-nav-list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.hf-nav-link {
  font-family: "Fira Sans", Arial, sans-serif;
  font-size: 15px; font-weight: 600; color: #fff;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.hf-nav-link:hover { color: #20ddd8; }
.hf-header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hf-search { background: transparent; border: 0; color: #c8d2dc; cursor: pointer; display: inline-flex; align-items: center; padding: 4px; }
.hf-search:hover { color: #20ddd8; }
.hf-member-cta {
  height: 42px; display: inline-flex; align-items: center;
  padding: 0 25px; border-radius: 7px;
  background: #20ddd8; color: #061521 !important;
  font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hf-member-cta:hover { filter: brightness(.95); }
.hf-member-avatar { background: transparent; border: 0; padding: 0; cursor: pointer; }
.hf-member-avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.hf-menu { display: none; background: transparent; border: 0; cursor: pointer; flex-direction: column; gap: 4px; padding: 6px; }
.hf-menu span { width: 20px; height: 2px; background: #fff; display: block; }

/* ---------- Category submenu (all pages) ---------- */
.ref-subnav.hf-subnav {
  background: #071526;
  font-family: "Fira Sans", Arial, sans-serif;
  font-size: 11px; font-weight: 600;
}
.ref-subnav.hf-subnav .ref-wrap {
  max-width: 1160px; width: calc(100% - 40px); margin: auto;
  min-height: 34px; display: flex; align-items: center; gap: 23px;
  text-transform: uppercase; letter-spacing: .025em; white-space: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ref-subnav.hf-subnav .ref-wrap::-webkit-scrollbar { display: none; }

/* ---------- 3. Submenu contrast: every category readable ----------
   (beats the site-wide tag-color code injection, which stays for cards) */
.ref-subnav.hf-subnav .ref-wrap a,
.home-template .ref-subnav.hf-subnav .ref-wrap a,
.home-template .ref-home .ref-subnav.hf-subnav .ref-wrap a {
  flex: 0 0 auto;
  color: #fff !important;
  text-decoration: none;
  transition: color .18s ease;
  font-size: 11px !important;
}
.ref-subnav.hf-subnav .ref-wrap a:hover,
.ref-subnav.hf-subnav .ref-wrap a:focus-visible,
.home-template .ref-home .ref-subnav.hf-subnav .ref-wrap a:hover {
  color: #00e4e1 !important;
}

/* ---------- 4. "Les plus lus": wrap, never truncate ---------- */
.ref-most li, .ref-most li a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block;
  -webkit-line-clamp: unset !important;
}
.ref-most li a { color: inherit; text-decoration: none; }
.ref-most li a:hover { color: #006a91; }

/* ---------- 5. Fallback thumb when a post has no image ---------- */
.ref-noimg {
  position: absolute; inset: 0; display: block;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,228,225,.30), transparent 55%),
    linear-gradient(155deg, #0c2036, #071526);
}
.ref-noimg-card {
  position: static; width: 100%; height: 174px; flex: 0 0 174px;
}

/* ---------- Responsive header ---------- */
@media (max-width: 1000px) {
  .hf-header-inner { width: calc(100% - 32px); height: 64px; gap: 16px; }
  .hf-nav-list { gap: 18px; }
  .hf-nav-link { font-size: 13px; }
}
@media (max-width: 860px) {
  .hf-header-nav { display: none; }
  .hf-menu { display: inline-flex; }
  .hf-member-cta { padding: 0 14px; height: 36px; font-size: 12px; }
  .hf-logo-text { font-size: 21px; }
  .hf-logo-svg { height: 26px; }
}