/* =====================================================================
   site-chrome.css — THE single source of truth for the site header/footer
   =====================================================================

   Defines the shared "chrome" that wraps every page: the gradient
   navigation bar, the right-aligned menu, and the gradient footer pinned
   to the bottom of the viewport.

   Loaded by all three page families so they look identical:
     - public site      primaforja/templates/portfolio/layout.html
     - login / 2FA      shared_core/templates/auth/login_base.html
     - dashboards       shared_core/templates/dashboards/exec/executive-dashboard.html

   IMPORTANT: load this AFTER portfolio.css. It intentionally overrides the
   exported Webflow defaults (e.g. the old teal .footer colour), which is why
   the overrides carry !important.

   To restyle the header/footer site-wide, edit THIS FILE ONLY.
   --------------------------------------------------------------------- */


/* --- brand palette (coal chrome, lighter slate at left) ------------ */
:root {
  --chrome-gradient-from: #4C5870;   /* lighter slate (left) */
  --chrome-gradient-to:   #0B1220;   /* coal (right) */
  --chrome-text:          #F3F4F6;
  --chrome-menu-hover:    #FFB347;
}


/* --- page shell: header top, footer bottom, content between --------- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* --- header --------------------------------------------------------- */
/* Multi-stop coal gradient — the light zone reaches past the brand before
   falling to coal. KEEP IN SYNC with theme-primaforja.css (public pages
   load that file last with the same values; dashboards/auth rely on this
   copy). */
.navigation-bar {
  flex-shrink: 0;
  z-index: 10;
  background: linear-gradient(90deg,
      #4C5870 0%, #414D63 24%, #1A2334 56%, #0B1220 100%) !important;
}

.navbar {
  background: linear-gradient(90deg,
      #4C5870 0%, #414D63 24%, #1A2334 56%, #0B1220 100%) !important;
  padding: 14px 0 !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  position: relative !important;
  top: 0 !important;
}

.container-regular {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 2560px;
  min-height: 30px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2vw;
  padding-right: 2vw;
  display: flex;
}

/* The menu is the only flex child, so it needs margin-left:auto to sit
   against the right edge instead of the container's left edge. */
.nav-menu-wrapper,
.navigation-bar .nav-menu-wrapper {
  margin-right: 0;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.nav-menu {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  margin-left: auto;
  padding-bottom: 0;
  padding-left: 20px;
  display: flex;
}

/* --- brand lockup: emblem + wordmark, upper-left ------------------- */
.site-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-right: auto;          /* pin to the left; the menu keeps the right */
  flex: 0 0 auto;
}
/* Brand sizes — KEEP IN SYNC with theme-primaforja.css so the header
   renders identically on public pages (which load that file last) and on
   the dashboard/auth pages (which stop at this file). */
.site-brand-mark {
  height: 64px;
  width: auto;
  display: block;
}
/* The wordmark image includes the "j" descender, which drags its box
   center below the cap-height center — nudge down so the CAPS sit
   optically centered on the mark. */
.site-brand-word {
  height: 32px;
  width: auto;
  display: block;
  margin-left: 6px;
  transform: translateY(4px);
}

@media (max-width: 991px) {
  .site-brand-mark { height: 56px; }
  .site-brand-word { height: 28px; }
  .site-brand { gap: 12px; }
}

/* symmetric insets: brand 44px from the left edge, menu 44px from the
   right (same rule as theme-primaforja.css) */
.navbar .container-regular {
  max-width: none;
  width: 100%;
  padding-left: 44px;
  padding-right: 44px;
}

/* Top-level navbar links sit on the dark gradient -> white text, ember on
   hover (same as theme-primaforja.css — KEEP IN SYNC). The old rule pinned
   hover to the same white, so pages without the theme file (dashboards,
   auth) showed no hover change. */
.nav-link { color: var(--chrome-text) !important; }
.nav-link:hover,
.nav-link:hover div { color: var(--chrome-menu-hover) !important; }

/* Dropdown panels: charcoal with ember items, gold on hover — same values
   as theme-primaforja.css (KEEP IN SYNC) so dashboards/auth match the
   public pages. */
.nav-dropdown-list,
.nav-menu-dropdown-list-wrapper,
.w-dropdown-list {
  background: #111827 !important;
  border: 1px solid #1F2937;
}
.nav-dropdown-link,
.nav-dropdown-link .button-label        { color: #FFB347 !important; }
.nav-dropdown-link:hover,
.nav-dropdown-link:hover .button-label  { color: #FFC36B !important; }

.mega-nav-link-item        { color: #FFB347 !important; }
.mega-nav-link-item:hover  { color: #FFC36B !important; }

.brand-logo { max-width: 120px; margin-left: 0; padding-left: 0; }
.brand-name {
  letter-spacing: normal;
  margin-right: auto;
  padding-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 60px;
  font-style: italic;
  font-weight: 800;
  color: var(--chrome-gradient-to) !important;
}


/* --- footer --------------------------------------------------------- */
.footer {
  flex-shrink: 0;
  margin-top: auto;                    /* pins the footer to the bottom */
  background: linear-gradient(to right,
              var(--chrome-gradient-from), var(--chrome-gradient-to)) !important;
  padding: 50px 30px 0 !important;
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  position: relative !important;
}

.footer-link,
.footer-link:hover,
.footer-title { color: var(--chrome-text) !important; }

/* legal links in the copyright row: same muted tone, ember on hover */
.footer-legal-link { color: inherit; text-decoration: none; }
.footer-legal-link:hover { color: #FFB347; }

/* social icons: brand dark orange, amber on hover — active channels only */
.footer-social-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
}
.footer-social-icon { color: #FF7A00; line-height: 0; transition: color .15s; }
.footer-social-icon:hover { color: #FFB347; }

/* ── Mobile navigation menu (hamburger overlay) ────────────────────────────
   Webflow collapses .w-nav-menu under 991px and re-parents it into
   .w-nav-overlay when opened. Without these rules the overlay is white while
   the links keep their navbar-white color — an invisible menu. Style the
   open menu as a solid deep-blue sheet with stacked links, and expand the
   Resources dropdown inline. Uses the chrome vars so dark mode follows. */
@media (max-width: 991px) {
  .w-nav-overlay [data-nav-menu-open],
  .nav-menu-wrapper[data-nav-menu-open] {
    background: var(--chrome-gradient-to) !important;
    padding: 6px 0 18px;
  }
  .w-nav-overlay .nav-menu {
    background: transparent !important;   /* webflow paints this UL white */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .w-nav-overlay .nav-link {
    display: block;
    text-align: left;
    color: #fff !important;
    font-size: 17px;
    padding: 13px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* Resources: render its list inline (no floating dropdown on mobile) */
  .w-nav-overlay .nav-dropdown-list {
    position: static !important;
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .w-nav-overlay .nav-menu-dropdown-list-wrapper {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .w-nav-overlay .nav-dropdown-link {
    display: block;
    padding: 10px 26px 10px 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .w-nav-overlay .nav-dropdown-link .button-label {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 15px;
  }
  .w-nav-overlay .nav-caret { display: none; }
  /* hamburger button: white icon, no gray chip, on the navy header end */
  .menu-button.w-nav-button { background: transparent !important; color: #fff; }
  .menu-button .w-icon-nav-menu { color: #fff; font-size: 26px; }
}

/* Mobile footer: portfolio.css stacks everything into one centered column
   at <=767px, and the desktop 110px column gap turns into 110px of
   vertical whitespace between blocks. Instead: brand lockup centered on
   top, then the link columns side by side, left-aligned, with sane gaps. */
@media (max-width: 767px) {
  .footer-wrapper {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 30px 64px !important;
  }
  .footer-brand {
    flex: 1 1 100% !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  .footer-block { align-items: flex-start !important; }
  .footer-divider { margin-top: 40px !important; }
}

/* Footer: copyright row and the DigitalOcean badge stay centered at every
   breakpoint (portfolio.css's mobile media rules force them flex-start). */
.footer-bottom {
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}
.footer-badge-center { justify-content: center !important; }