/* Ocean Climate Fund: its header, and its theme for the shared Hub chrome
   footer (public/hub-chrome/hub-chrome.css; spec in resources/hub-chrome/).
   Loaded on every page, after the theme and style.css. */

:root {
  --ocf-chrome-navy: #1b2a4e;
  --ocf-chrome-deep: #0b1a36;
  --ocf-chrome-blue: #1470af;
  --ocf-chrome-ink-2: #52514e;
  --ocf-chrome-rule: #e4e3df;
  --ocf-chrome-display: "miller-display", Georgia, "Times New Roman", serif;
  --ocf-chrome-sans: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
}

/* ---- Header ---- */
nav.navbar.ocf-nav {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--ocf-chrome-rule);
  padding-top: 10px; padding-bottom: 10px;
  --hub-globe-ink: var(--ocf-chrome-navy);
  --hub-globe-hover: rgba(27, 42, 78, 0.08);
}
.ocf-nav > .container { max-width: 1240px; display: flex; align-items: center; flex-wrap: wrap; }
.ocf-nav .ocf-logo { padding-left: 0; margin-right: auto; }
.ocf-nav.navbar-light .navbar-brand {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--ocf-chrome-display); font-weight: 400 !important; letter-spacing: 0; text-transform: none;
  font-size: 22px; color: var(--ocf-chrome-navy);
}
.ocf-nav.navbar-light .navbar-brand:hover { color: var(--ocf-chrome-blue); }
.ocf-brand-mark { border-radius: 6px; }
.ocf-nav.navbar-expand-lg .navbar-nav .nav-link {
  font-family: var(--ocf-chrome-sans); font-size: 15px; color: var(--ocf-chrome-ink-2);
  padding: 8px 14px; position: relative;
}
.ocf-nav.navbar-expand-lg .navbar-nav .nav-link:hover { color: var(--ocf-chrome-navy); }
.ocf-nav .nav-item.active > .nav-link { color: var(--ocf-chrome-navy); }
.ocf-nav .nav-item.active > .nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--ocf-chrome-blue);
}
.ocf-nav.navbar-light .navbar-nav .nav-link.navbar-btn {
  background: var(--ocf-chrome-navy); border: 0; border-radius: 999px !important; color: #ffffff;
  padding: 9px 20px; margin-left: 12px; font-weight: 600; font-size: 14px;
}
.ocf-nav.navbar-light .navbar-nav .nav-link.navbar-btn:hover { background: var(--ocf-chrome-blue); color: #ffffff; }
.ocf-nav .hub-login-btn { cursor: pointer; }
.ocf-nav .dropdown-menu { border-radius: 14px; border: 1px solid var(--ocf-chrome-rule); box-shadow: 0 14px 32px rgba(27, 42, 78, 0.12); }
.ocf-nav .dropdown-link { color: var(--ocf-chrome-navy); font-family: var(--ocf-chrome-sans); }

@media (max-width: 991px) {
  .ocf-nav > .container { padding-left: 12px !important; padding-right: 12px; }
  .ocf-nav.navbar-light .navbar-brand { font-size: 18px; }
  .ocf-nav .navbar-collapse { flex-basis: 100%; }
  .ocf-nav .navbar-collapse.show, .ocf-nav .navbar-collapse.collapsing {
    background: #ffffff; border-radius: 16px; margin-top: 10px; padding: 8px 4px 12px;
    box-shadow: 0 18px 40px rgba(27, 42, 78, 0.14);
  }
  .ocf-nav .nav-center-links, .ocf-nav .nav-right-links { display: flex; flex-direction: column; align-items: stretch; }
  .ocf-nav .nav-item.active > .nav-link::after { left: 14px; right: auto; width: 24px; }
  .ocf-nav.navbar-light .navbar-nav .nav-link.navbar-btn { margin: 8px 14px 0; text-align: center; }
}

/* The redesigned pages are white on the theme's black body. Keep their last
   section's margin inside them, so no black shows above the footer. */
.ocf-home { display: flow-root; }

/* ---- Footer: the shared Hub chrome footer, in the Fund's colours ---- */
.hub-footer[data-site="ocf"] {
  --hub-footer-bg: var(--ocf-chrome-deep);
  --hub-footer-ink: #ffffff;
  --hub-footer-muted: rgba(255, 255, 255, 0.64);
  --hub-footer-rule: rgba(156, 201, 236, 0.18);
  --hub-footer-accent: #9cc9ec;
  --hub-footer-tile: rgba(156, 201, 236, 0.1);
  --hub-footer-font: var(--ocf-chrome-sans);
  --hub-footer-display: var(--ocf-chrome-display);
  background:
    url('/img/ocf-contours.svg') right -240px top -120px / 900px auto no-repeat,
    var(--hub-footer-bg);
}