/* Header styles extracted from the live Fellowship homepage, 2026-09-11. */
:root {
--kjbf-shell-green: #17382d;
    --kjbf-shell-deep-green: #10342c;
    --kjbf-shell-footer: #0f1714;
    --kjbf-shell-gold: #d3b968;
    --kjbf-shell-gold-ink: #8b681f;
    --kjbf-shell-ivory: #fffaf0;
    --kjbf-shell-paper: #f6f2e8;
    --kjbf-shell-ink: #112a22;
    --kjbf-shell-muted: #5f6d66;
    --kjbf-shell-line: #ded3b8;
    --kjbf-shell-mint: #6bd3a9;
}
#kjbf-global-header,
#kjbf-global-header * {
box-sizing: border-box;
}
#kjbf-global-header {
position: relative;
    z-index: 10000;
    width: 100%;
    color: var(--kjbf-shell-deep-green);
    background: var(--kjbf-shell-ivory);
    border-bottom: 1px solid var(--kjbf-shell-line);
    box-shadow: 0 3px 12px rgba(17, 42, 34, 0.07);
    font-family: "Source Sans Pro", Arial, sans-serif;
}
#kjbf-global-header a {
transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
#kjbf-global-header a:focus-visible,
#kjbf-global-header button:focus-visible {
outline: 3px solid var(--kjbf-shell-mint);
    outline-offset: 3px;
}
.kjbf-shell-header-inner {
width: min(1600px, calc(100% - 64px));
    min-height: 98px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
}
.kjbf-shell-brand {
display: block;
    padding: 4px 0;
    line-height: 0;
    text-decoration: none;
}
.kjbf-shell-brand img {
display: block;
    width: 100%;
    height: auto;
}
.kjbf-shell-nav {
min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 4px 16px;
    font-size: 17px;
    font-weight: 700;
}
.kjbf-shell-nav > a {
position: relative;
    padding: 15px 0;
    color: var(--kjbf-shell-deep-green);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.kjbf-shell-nav > a:hover,
.kjbf-shell-nav > a:focus-visible,
.kjbf-shell-nav > a[aria-current="page"] {
color: var(--kjbf-shell-gold-ink);
}
.kjbf-shell-nav > a[aria-current="page"]::after {
content: "";
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 2px;
    background: var(--kjbf-shell-gold);
}
.kjbf-shell-read-cta {
min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    color: #1f190c;
    background: linear-gradient(180deg, #f4dc83 0%, #e7c760 48%, #d5b25a 100%);
    border: 1px solid #937124;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), 0 2px 3px rgba(55, 42, 14, .14);
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.kjbf-shell-read-cta svg {
width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: #1f190c;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kjbf-shell-read-cta svg path {
stroke: #1f190c;
}
.kjbf-shell-read-cta:hover,
.kjbf-shell-read-cta:focus-visible {
color: #1f190c;
    background: linear-gradient(180deg, #f4dc83 0%, #e7c760 48%, #d5b25a 100%);
    border-color: #937124;
    filter: brightness(1.06);
}
.kjbf-shell-menu-button {
display: none;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 11px;
    color: #202326;
    background: linear-gradient(180deg, #f7f9f9 0%, #e2e6e8 52%, #ccd2d5 100%);
    border: 1px solid #949c9f;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(38, 41, 42, .08);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.kjbf-shell-menu-button:hover {
filter: brightness(1.06);
}
.kjbf-shell-read-cta:focus-visible,
.kjbf-shell-menu-button:focus-visible {
outline: 3px solid #467f74;
    outline-offset: 3px;
}
.kjbf-shell-menu-button::before {
content: "☰";
    font-size: 17px;
    line-height: 1;
}
@media (max-width: 1500px) {
.kjbf-shell-header-inner {
width: calc(100% - 32px);
      grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) auto;
      gap: 16px;
}
.kjbf-shell-nav {
gap: 3px 10px;
      font-size: 15px;
}
.kjbf-shell-read-cta {
padding-inline: 15px;
      font-size: 15px;
}
}
@media (max-width: 1280px) {
.kjbf-shell-header-inner {
width: min(1120px, calc(100% - 32px));
      min-height: 84px;
      grid-template-columns: minmax(170px, 210px) 1fr auto;
      gap: 12px;
}
.kjbf-shell-menu-button {
display: inline-flex;
      justify-self: end;
}
.kjbf-shell-nav {
display: none;
}
#kjbf-global-header.kjbf-shell-menu-open .kjbf-shell-header-inner {
grid-template-rows: auto auto;
}
#kjbf-global-header.kjbf-shell-menu-open .kjbf-shell-nav {
grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-content: stretch;
      justify-items: stretch;
      gap: 0 26px;
      padding: 12px 0 17px;
      border-top: 1px solid var(--kjbf-shell-line);
}
#kjbf-global-header.kjbf-shell-menu-open .kjbf-shell-nav > a {
display: block;
      padding: 11px 4px;
      white-space: normal;
      border-bottom: 1px solid var(--kjbf-shell-line);
}
}
@media (max-width: 660px) {
.kjbf-shell-header-inner {
width: calc(100% - 24px);
      min-height: 76px;
      grid-template-columns: minmax(0, 220px) auto;
      gap: 10px;
}
.kjbf-shell-read-cta {
display: none;
}
#kjbf-global-header.kjbf-shell-menu-open .kjbf-shell-nav {
grid-template-columns: 1fr;
      gap: 0;
}
#kjbf-global-header.kjbf-shell-menu-open .kjbf-shell-read-cta {
grid-column: 1 / -1;
      display: inline-flex;
      width: 100%;
      margin-bottom: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
#kjbf-global-header a {
transition: none;
}
}