/* Shared navigation for every published Build My Resume page. */
@property --bmr-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes bmr-spin-border { to { --bmr-border-angle: 360deg; } }
header.bmr-header {
  all: unset;
  box-sizing: border-box;
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  color: #0f172a;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
}
header.bmr-header[data-bmr-position="fixed"] { position: fixed; }
header.bmr-header[data-bmr-position="sticky"] { z-index: 50; }
header.bmr-header::before, header.bmr-header::after { content: none; }
header.bmr-header *, header.bmr-header *::before, header.bmr-header *::after { box-sizing: border-box; }
.bmr-header .bmr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 100%;
  max-width: 1600px;
  min-height: 88px;
  margin: 0 auto;
  padding: 16px 24px;
}
.bmr-header .bmr-brand {
  all: unset;
  display: inline-block;
  flex-shrink: 0;
  color: #0f172a;
  font: 800 24px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: -.8px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.bmr-header .bmr-nav {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.5vw, 42px);
  min-width: 0;
}
.bmr-header .bmr-nav > a, .bmr-header .bmr-nav > button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  color: #4c5c73;
  font: 500 16px/1.3 Arial, Helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.bmr-header .bmr-nav > a:hover { color: #0f172a; }
.bmr-header .bmr-nav > .bmr-build {
  min-width: 200px;
  padding: 12px 24px;
  color: #191307;
  background:
    linear-gradient(135deg, #d4a843 0%, #f5d675 25%, #e8c252 50%, #d4a843 75%, #c49a3a 100%) padding-box,
    conic-gradient(from var(--bmr-border-angle), transparent 60%, #8b6914 78%, #a67c1a 88%, #8b6914 98%, transparent 100%) border-box;
  border: 2px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  text-shadow: 0 1px 0 rgba(245,214,117,.4);
  transition: transform .25s ease, box-shadow .3s ease;
  animation: bmr-spin-border 3s linear infinite;
}
.bmr-header .bmr-nav > .bmr-build:hover {
  background:
    linear-gradient(135deg, #e8c252 0%, #fde68a 25%, #f5d675 50%, #e8c252 75%, #d4a843 100%) padding-box,
    conic-gradient(from var(--bmr-border-angle), transparent 60%, #8b6914 78%, #a67c1a 88%, #8b6914 98%, transparent 100%) border-box;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(212,168,67,.35);
}
.bmr-header .bmr-nav > .bmr-sign-in {
  min-width: 94px;
  padding: 12px 20px;
  color: #fff;
  background: #0f172a;
  border: 1px solid #0f172a;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.bmr-header .bmr-nav > .bmr-sign-in:hover { color: #fff; background: #25334c; }
.bmr-header .bmr-toggle {
  all: unset;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid #cbd1da;
  border-radius: 10px;
  color: #0f172a;
  cursor: pointer;
}
.bmr-header .bmr-toggle svg { width: 24px; height: 24px; }
.bmr-header .bmr-close-icon { display: none; }
.bmr-header.bmr-menu-open .bmr-open-icon { display: none; }
.bmr-header.bmr-menu-open .bmr-close-icon { display: block; }
.bmr-header .bmr-account {
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 14px;
}
.bmr-header .bmr-account span { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmr-header .bmr-account button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd1da;
  border-radius: 9px;
  font: 700 14px/1.3 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.bmr-header .bmr-account .bmr-dashboard { background: #0f172a; border-color: #0f172a; color: #fff; }
.bmr-header .bmr-brand:focus-visible, .bmr-header .bmr-nav > a:focus-visible,
.bmr-header .bmr-nav > button:focus-visible, .bmr-header .bmr-toggle:focus-visible,
.bmr-header .bmr-account button:focus-visible { outline: 3px solid #2563eb; outline-offset: 5px; }

@media (min-width: 1280px) and (max-width: 1439px) {
  .bmr-header .bmr-header-inner { gap: 24px; }
  .bmr-header .bmr-brand { font-size: 24px; }
  .bmr-header .bmr-nav { gap: 20px; }
  .bmr-header .bmr-nav > .bmr-build { min-width: 190px; }
  .bmr-header .bmr-account span { display: none; }
}
@media (max-width: 1279px) {
  .bmr-header .bmr-header-inner { min-height: 80px; gap: 16px; padding: 16px 24px; flex-wrap: wrap; }
  .bmr-header .bmr-brand { font-size: 24px; }
  .bmr-header.bmr-menu-ready .bmr-toggle { display: inline-flex; }
  .bmr-header .bmr-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 0 0 8px; }
  .bmr-header .bmr-nav > a, .bmr-header .bmr-nav > button { justify-content: flex-start; min-height: 48px; padding: 12px 16px; font-size: 16px; border-radius: 9px; }
  .bmr-header .bmr-nav > .bmr-build, .bmr-header .bmr-nav > .bmr-sign-in { justify-content: center; min-height: 50px; min-width: 0; }
  .bmr-header.bmr-menu-ready .bmr-nav { display: none; }
  .bmr-header.bmr-menu-ready.bmr-menu-open .bmr-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 24px 24px;
    background: #f3f4f6;
    border-bottom: 1px solid #d8dde5;
    box-shadow: 0 12px 20px rgba(15,23,42,.1);
  }
  .bmr-header .bmr-account { flex-wrap: wrap; padding: 10px 0; }
  .bmr-header .bmr-account span { max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bmr-header .bmr-nav > .bmr-build { animation: none; transition: none; }
}
@media (max-width: 480px) {
  .bmr-header .bmr-header-inner { min-height: 72px; padding: 12px 16px; gap: 10px; }
  .bmr-header .bmr-brand { font-size: 23px; letter-spacing: -.65px; }
  .bmr-header.bmr-menu-ready.bmr-menu-open .bmr-nav {
    padding: 12px 16px 20px;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
  }
}