/* =========================
   GLOBAL HEADER (single source)
   ========================= */

/* Ensure consistent box model */
.site-header,
.site-header * {
  box-sizing: border-box;
}

/* Anti-underline + predictable link rendering */
.site-header a,
.site-header a:visited {
  color: inherit;
  text-decoration: none;
}

/* HEADER shell */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 249, 251, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(17, 17, 17, .06);
}

/* Layout */
.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

/* Brand */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  min-width: 0;
}

.site-header .brand-text strong {
  display: block;
  font-size: 16px;
  line-height: 1.05;
  color: var(--text, #111);
}

.site-header .brand-text span {
  display: block;
  font-size: 14px;
  line-height: 1.05;
  color: var(--muted, #556);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* =========================
   Brand mark — CiHR (canonical)
   ========================= */

/* Brand mark — shared across header + footer */
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 17, 17, .10);
  box-shadow: 0 10px 24px rgba(48, 108, 164, .18);

  /* crisp */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.brand-mark--cihr {
  background:
    radial-gradient(circle at 30% 30%,
      rgba(217, 187, 255, 0.75),
      rgba(217, 187, 255, 0.22) 52%,
      transparent 62%),
    linear-gradient(135deg,
      rgba(36, 90, 138, 0.98),
      rgba(48, 108, 164, 0.62));

  color: #fff;
  font-weight: 900;

  /* Crisper rendering */
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.18);

  /* Fit/optical balance for 4 chars */
  font-size: 14px;
  letter-spacing: -0.06em;
  padding-top: 1px;
}

.site-header .brand { gap: 9px; }
@media (max-width: 820px) { .site-header .brand { gap: 8px; } }


/* Panels are only used inside the mobile drawer; keep hidden by default */
.site-header .mobile-panel {
  display: none;
}

.site-header .mobile-panel.open {
  display: block;
}

/* Nav base */
.site-header .nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Header CTA: single source of truth */
.site-header a.nav-cta,
.site-header .nav a.nav-cta {
  min-height: 40px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  font-size: 13px;
  /* ✅ match other nav pills */
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;

  background: var(--accent);
  color: #fff !important;
  border: 1px solid rgba(48, 108, 164, .18);

  -webkit-font-smoothing: antialiased;
}

.site-header a.nav-cta:hover,
.site-header .nav a.nav-cta:hover,
.site-header .nav-cta:hover {
  background: var(--accent) !important;
  color: #fff !important;
  filter: brightness(1.03);
  text-decoration: none;
}

.site-header a.nav-cta:focus-visible,
.site-header .nav a.nav-cta:focus-visible,
.site-header .nav-cta:focus-visible {
  outline: 3px solid rgba(48, 108, 164, .28);
  outline-offset: 2px;
}

.site-header .nav>a:not(.nav-cta),
.site-header .nav>button,
.site-header .nav>.dropdown>button {
  font-size: 13px;
  font-weight: 650;
  color: rgba(17, 17, 17, .88);
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.1;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ✅ Nav pills: make ALL top-level links (except CTA) match Categories styling */
.site-header .nav>a:not(.nav-cta) {
  border: 1px solid rgba(17, 17, 17, .18);
  background: rgba(255, 255, 255, .55);
}

/* ✅ Hover: all top-level nav links/buttons share the same behaviour */
.site-header .nav>a:hover,
.site-header .nav>button:hover,
.site-header .nav>.dropdown>button:hover {
  background: rgba(187, 222, 255, .28);
  border-color: rgba(48, 108, 164, .18);
}

/* ✅ Keep Categories slightly “more special” if you want (optional).
   If you want ALL pills identical, delete this whole rule. */
.site-header .nav>a[href="/categories.html"]:hover {
  background: rgba(187, 222, 255, .22);
  border-color: rgba(48, 108, 164, .22);
}

.site-header .nav a:hover,
.site-header .nav button:hover {
  background: rgba(187, 222, 255, .28);
  border-color: rgba(48, 108, 164, .18);
}

/* Employers trigger — same height */
.site-header .dropdown>button.nav-employers {
  background: rgba(217, 187, 255, .55);
  border-color: rgba(17, 17, 17, .10);
  color: #1e2a3a;
  font-weight: 650;
  height: 40px;
  /* match */
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-header .dropdown>button.nav-employers:hover {
  background: rgba(217, 187, 255, .70);
  border-color: rgba(17, 17, 17, .12);
}

/* Caret */
.site-header .caret {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-right: 2px solid rgba(17, 17, 17, .55);
  border-bottom: 2px solid rgba(17, 17, 17, .55);
  transform: rotate(45deg);
  margin-top: -2px;
}

/* Dropdown container */
.site-header .dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Menu panel (desktop) */
.site-header .menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 300px;
  /* narrower */
  max-width: 320px;
  /* prevents big jumps */
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .12);
  box-shadow: 0 20px 42px rgba(17, 17, 17, .16);
  border-radius: 16px;
  padding: 8px;
  /* tighter so tiles align */
  padding-bottom: 10px;
  /* extends the “bottom border” feel */
  display: none;
  z-index: 60;
  transform: translateY(8px);
  flex-direction: column;
  gap: 8px;
}

.site-header .menu a {
  width: 100%;
  box-sizing: border-box;
  display: block;
  /* ensure not flex */
  height: auto;

  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid transparent;

  text-decoration: none;
  text-align: left;
}

.site-header .menu a small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(17, 17, 17, .55);
  letter-spacing: 0.01em;
  opacity: .85;
}

.site-header .menu a:hover,
.site-header .menu a:focus-visible {
  background: rgba(187, 222, 255, .28);
  border-color: rgba(48, 108, 164, .16);
  outline: none;
}

.site-header .menu a:hover small,
.site-header .menu a:focus-visible small {
  color: rgba(17, 17, 17, .75);
}

.site-header .menu-title {
  display: block;
  font-weight: 800;
  font-size: 13px;
  /* ⬅ slightly smaller */
  line-height: 1.25;
  color: rgba(17, 17, 17, .90);
}

.site-header .menu-subtitle {
  opacity: .7;
}

/* Prevent any hover "shrink" / layout jitter */
.site-header .menu a,
.site-header .menu a:hover,
.site-header .menu a:focus-visible {
  transform: none !important;
}

/* Desktop dropdown behaviour:
   - hover opens
   - keyboard focus opens (focus-visible)
   - DO NOT use focus-within (prevents "stuck open" after click)
*/
.site-header .dropdown:hover>.menu {
  display: block;
}

.site-header .dropdown>button:focus-visible+.menu {
  display: block;
}

/* Hover bridge (desktop only) */
.site-header .dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

/* Hamburger button */
.site-header .nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  /* slightly larger tap target */
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 17, .10);
  background: rgba(255, 255, 255, .70);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.site-header .nav-toggle:hover {
  background: rgba(187, 222, 255, .28);
  border-color: rgba(48, 108, 164, .18);
}

.site-header .nav-toggle span {
  width: 18px;
  height: 2px;
  background: rgba(17, 17, 17, .72);
  position: relative;
  display: block;
  border-radius: 2px;
}

.site-header .nav-toggle span::before,
.site-header .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: rgba(17, 17, 17, .72);
  border-radius: 2px;
}

.site-header .nav-toggle span::before {
  top: -6px;
}

.site-header .nav-toggle span::after {
  top: 6px;
}

/* MOBILE */

@media (max-width: 820px) {
  .site-header .header-inner {
    padding: 10px 0;
    gap: 10px;
    position: relative;
    /* anchor the drawer */
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .brand-mark--cihr {
    font-size: 14px;
  }

  .brand-mark--hr {
    font-size: 16px;
  }

  .site-header .brand-text strong {
    font-size: 15px;
  }

  .site-header .brand-text span {
    font-size: 13px;
  }

  .site-header .nav-toggle {
    display: inline-flex;
  }

  /* Drawer */

  .site-header .nav {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(420px, calc(100vw - 40px));
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(17, 17, 17, .12);
    border-radius: 18px;
    box-shadow: 0 24px 50px rgba(17, 17, 17, .18);
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    z-index: 80;
    max-height: calc(100vh - 110px);
    overflow: auto;
  }

  .site-header .nav.open {
    display: flex;
  }

  /* Top-level items in drawer: CENTER labels */
  .site-header .nav>a,
  .site-header .nav>button,
  .site-header .nav>.dropdown>button,
  .site-header .nav>a.nav-cta {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;

    display: inline-flex;
    /* ensure flex */
    align-items: center;
    justify-content: center;
    /* ✅ center everything */
    text-align: center;
    /* ✅ center text */
  }

  /* IMPORTANT: On mobile, never show the old dropdown menu at all */
  .site-header .dropdown .menu,
  .site-header .dropdown.open .menu,
  .site-header .dropdown:hover .menu,
  .site-header .dropdown:focus-within .menu {
    display: none !important;
  }

  /* Mobile panel (submenu screen) */
  .site-header .mobile-panel {
    display: none;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(17, 17, 17, .08);
  }

  .site-header .mobile-panel a {
    padding: 14px 10px;
  }

  .site-header .mobile-panel a+a {
    margin-top: 4px;
  }

  .site-header .mobile-panel small {
    opacity: .7;
  }

  /* When panel is open: hide top-level items, BUT keep dropdown container
   so the mobile-panel inside it can render. */
  .site-header .nav.panel-open>a,
  .site-header .nav.panel-open>.nav-cta {
    display: none !important;
  }

  /* Hide the employers trigger button, not the whole dropdown wrapper */
  .site-header .nav.panel-open>.dropdown>button {
    display: none !important;
  }

  .site-header .nav.panel-open .mobile-panel {
    display: block !important;
    position: static;
  }

  /* Back button inside panel */
  .site-header .mobile-back {
    width: auto;
    /* key change */
    display: inline-flex;
    /* keeps it button-like */
    align-items: center;
    justify-content: flex-start;

    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(17, 17, 17, .10);
    background: rgba(255, 255, 255, .85);
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  .site-header .mobile-panel {
    text-align: left;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
  }
}

.site-header .mobile-back:hover {
  background: rgba(187, 222, 255, .22);
  border-color: rgba(48, 108, 164, .18);
}

/* Panel links with subtitle */
.site-header .mobile-panel a {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-weight: 800;
  color: rgba(17, 17, 17, .82);
  border: 1px solid transparent;
}

.site-header .mobile-panel a small {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  color: rgba(17, 17, 17, .55);
  opacity: .92;
}

.site-header .mobile-panel a:hover {
  background: rgba(187, 222, 255, .28);
  border-color: rgba(48, 108, 164, .18);
}

/* FINAL OVERRIDES (mobile): when panel-open, force the panel visible */

.site-header .nav.panel-open .mobile-panel {
  display: block !important;
}

.site-header .nav.panel-open .mobile-panel.open {
  display: block !important;
}

/* === HARD OVERRIDE: panel must show when open on mobile === */
.site-header .nav.open.panel-open .mobile-panel.open {
  display: block !important;
}

/* =========================
   GLOBAL FOOTER (from categories.html)
   ========================= */

/* Anti-underline + predictable link rendering */
.site-footer a,
.site-footer a:visited {
  color: inherit;
  text-decoration: none;
}

/* FOOTER */
.site-footer {
  border-top: 1px solid rgba(17, 17, 17, .08);
  background: rgba(255, 255, 255, .65);
  padding: 26px 0;
  margin-top: 24px;
}

.site-footer .footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer .footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-footer .footer-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.site-footer .footer-copyright {
  margin-top: 12px;
}

.site-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.site-footer .footer-nav a {
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: rgba(17, 17, 17, .78);
  text-decoration: none;
}

.site-footer .footer-nav a:hover {
  background: rgba(187, 222, 255, .26);
  border-color: rgba(48, 108, 164, .16);
}

/* Smallprint helper */
.site-footer .smallprint {
  color: rgba(17, 17, 17, .60);
  font-size: 12px;
  max-width: 72ch;
}

/* Mobile: footer links ABOVE brand block */
@media (max-width: 820px) {
  .site-footer .footer-inner {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .site-footer .footer-nav {
    width: 100%;
    margin-bottom: 12px;
  }
}