/* The site bar for the pages inside /portfolio/.
 *
 * The same bar as the /portfolio/ home (a blurred fixed bar, accent coloured section links, tinted pill
 * hover, a firmer tint while pressed, a ring for the keyboard), applied to the Bootstrap navbar these pages
 * already carry. The markup and the dropdowns are unchanged, so the menus still list every project; this only
 * changes how they look and adds a chevron arrow to the links that open a menu.
 *
 * Self-contained: it reads only data-bs-theme on <html>, and carries its own colours, so it does not depend on
 * the Bootstrap tokens each page happens to define. Load it after style.css and the bridges.
 */

header.header-sticky {
  --sb-bg: #f6f7f9; --sb-surface: #ffffff; --sb-line: #d8dce3; --sb-line-2: #a9b0bc;
  --sb-text: #0c0e12; --sb-acc: #056f33;
}
:root[data-bs-theme="dark"] header.header-sticky {
  --sb-bg: #111417; --sb-surface: #191b1d; --sb-line: #2c3036; --sb-line-2: #5a616b;
  --sb-text: #f1f2f3; --sb-acc: #4ee08a;
}

/* anchors and jump links should not slide under the bar */
html { scroll-padding-top: 76px; }

/* ---------- the bar ---------- */
header.header-sticky,
header.header-sticky.header-sticky-on {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1040;
  /* 92% rather than the home bar's 78%: these pages put photographs under the bar, and the links have to hold 4.5:1 over them */
  background: color-mix(in oklab, var(--sb-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid color-mix(in oklab, var(--sb-line) 70%, transparent);
  -webkit-animation: none; animation: none;
}
/* 64px tall with its rule, and the same side padding as the /portfolio/ home, so the logo, Contact and the theme
   switch sit in the same place on every page */
header.header-sticky .navbar { min-height: 63px; padding-top: 0; padding-bottom: 0; }
header.header-sticky .navbar > .container { max-width: none; padding-left: clamp(20px,4vw,56px); padding-right: clamp(20px,4vw,56px); }
header.header-sticky .navbar-brand,
header.header-sticky.header-sticky-on .navbar-brand { padding: 0; margin: 0; display: flex; align-items: center; }
header.header-sticky .navbar-brand .navbar-brand-item,
header.header-sticky.header-sticky-on .navbar-brand .navbar-brand-item { height: 30px; width: auto; }

/* ---------- section links ---------- */
/* the same 6px between links as the home bar, so the pills never touch */
@media (min-width: 1200px) {
  header.header-sticky .navbar-nav { gap: 6px; }
}

header.header-sticky .navbar-nav .nav-link {
  display: inline-flex; align-items: center; gap: .1rem;
  color: var(--sb-acc); font-size: .9rem; font-weight: 600; line-height: 1.2;
  padding: 7px 12px; border: 1px solid transparent; border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, background-color .15s, border-color .15s, transform .12s;
}
@media (hover: hover) {
  header.header-sticky .navbar-nav .nav-link:hover,
  header.header-sticky .navbar-nav .dropdown:hover > .nav-link {
    color: var(--sb-acc);
    background-color: color-mix(in oklab, var(--sb-acc) 14%, transparent);
    border-color: color-mix(in oklab, var(--sb-acc) 38%, transparent);
  }
}
header.header-sticky .navbar-nav .nav-link.show,
header.header-sticky .navbar-nav .nav-link.active {
  color: var(--sb-acc);
  background-color: color-mix(in oklab, var(--sb-acc) 14%, transparent);
  border-color: color-mix(in oklab, var(--sb-acc) 38%, transparent);
}
header.header-sticky .navbar-nav .nav-link:active {
  color: var(--sb-text);
  background-color: color-mix(in oklab, var(--sb-acc) 24%, transparent);
  border-color: var(--sb-acc);
  transform: translateY(1px) scale(.97);
}
header.header-sticky .navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--sb-acc) !important; outline-offset: 2px;
  background-color: color-mix(in oklab, var(--sb-acc) 14%, transparent);
}

/* the theme's hover script opens a menu by toggling it, and Bootstrap focuses the toggle when it does, which drew the
   keyboard ring under a mouse pointer on these links and not on Home. The ring is for the keyboard, so it is dropped
   while the pointer is over the item; tabbing to a link still shows it. style.css forces its own ring with !important,
   so the rules that set or remove the ring here have to be !important as well. */
@media (hover: hover) {
  header.header-sticky .navbar-nav .dropdown:hover > .nav-link:focus-visible { outline: 0 !important; }
}

/* ---------- the arrow on links that open a menu ---------- */
header.header-sticky .navbar-nav .dropdown-toggle::after {
  content: ""; display: inline-block; flex: none;
  width: .42em; height: .42em; margin: 0 0 .1em .55em; padding: 0; vertical-align: middle;
  border: 0 solid currentColor; border-right-width: 2px; border-bottom-width: 2px;
  font: inherit; background: none;
  transform: rotate(45deg); transform-origin: 65% 65%;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
header.header-sticky .navbar-nav .dropdown-toggle.show::after,
header.header-sticky .navbar-nav .dropdown:hover > .dropdown-toggle::after { transform: rotate(225deg); }

/* ---------- the menus ---------- */
header.header-sticky .navbar-nav .dropdown-menu {
  min-width: 290px; margin-top: 6px; padding: 8px;
  background: var(--sb-surface); border: 1px solid var(--sb-line); border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / .55);
}
/* the 6px above a menu belongs to nothing, so a pointer crossing it left the item and the hover script closed the menu.
   An unseen strip on the menu fills that space. It is 17px tall, not 6, because the menu opens 10px lower and slides up,
   and the strip moves with it. Settled, the strip reaches over the foot of the links, so the links are lifted above the
   menu (style.css puts it at 1100) and stay clickable to their edge. Only where the menus float; the narrow list has no gap. */
@media (min-width: 1200px) {
  header.header-sticky .navbar-nav .dropdown-menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 17px;
  }
  header.header-sticky .navbar-nav .nav-link { position: relative; z-index: 1101; }
}
header.header-sticky .dropdown-menu .dropdown-item {
  color: var(--sb-text); font-size: .9rem; font-weight: 500; line-height: 1.3;
  padding: 9px 12px; border-radius: 9px; white-space: normal;
  transition: color .15s, background-color .15s;
}
@media (hover: hover) {
  header.header-sticky .dropdown-menu .dropdown-item:hover {
    color: var(--sb-acc); background-color: color-mix(in oklab, var(--sb-acc) 14%, transparent);
  }
}
header.header-sticky .dropdown-menu .dropdown-item:active,
header.header-sticky .dropdown-menu .dropdown-item.active {
  color: var(--sb-text); background-color: color-mix(in oklab, var(--sb-acc) 24%, transparent);
}
header.header-sticky .dropdown-menu .dropdown-item:focus-visible {
  outline: 2px solid var(--sb-acc) !important; outline-offset: -2px;
  color: var(--sb-acc); background-color: color-mix(in oklab, var(--sb-acc) 14%, transparent);
}

/* ---------- the menu button on narrow screens ---------- */
/* 40px square, the size of the menu button on the /portfolio/ home, so it does not shift between pages either */
header.header-sticky .navbar-toggler {
  flex: none; width: 40px; height: 40px;
  padding: 0; border: 1px solid var(--sb-line-2); border-radius: 12px; box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background-color .15s, transform .12s;
}
@media (hover: hover) {
  header.header-sticky .navbar-toggler:hover { border-color: var(--sb-acc); background-color: color-mix(in oklab, var(--sb-acc) 14%, transparent); }
}
header.header-sticky .navbar-toggler .navbar-toggler-icon { width: 20px; height: 20px; }
header.header-sticky .navbar-toggler:active { transform: scale(.95); background-color: color-mix(in oklab, var(--sb-acc) 24%, transparent); }
header.header-sticky .navbar-toggler:focus-visible { outline: 2px solid var(--sb-acc) !important; outline-offset: 2px; box-shadow: none; }

/* ---------- the Contact button (added by /assets/site-bar.js) ---------- */
/* the /portfolio/ home's solid button: the main ink as the fill, the accent on hover */
header.header-sticky .sb-contact {
  flex: none; margin-right: 28px; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1; padding: 11px 16px; border-radius: 999px;
  color: var(--sb-bg); background: var(--sb-text); border: 1px solid var(--sb-text);
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, background-color .15s, border-color .15s, transform .12s;
}
@media (hover: hover) {
  header.header-sticky .sb-contact:hover { color: var(--sb-bg); background: var(--sb-acc); border-color: var(--sb-acc); }
}
header.header-sticky .sb-contact:active { transform: translateY(1px) scale(.97); }
header.header-sticky .sb-contact:focus-visible { outline: 2px solid var(--sb-acc) !important; outline-offset: 2px; }
/* the gap to the switch: 28px, 14px below 900 and 10px below 480, as on the /portfolio/ home */
@media (max-width: 900px) { header.header-sticky .sb-contact { margin-right: 14px; } }
@media (max-width: 480px) { header.header-sticky .sb-contact { padding: 10px 13px; margin-right: 10px; } }
@media (prefers-reduced-motion: reduce) { header.header-sticky .sb-contact { transition: none; } header.header-sticky .sb-contact:active { transform: none; } }

/* the contact modal (/portfolio/assets/js/intake.js) reads the brand green from these; same shim as the /portfolio/ home */
.pi-overlay { --bs-primary: #09B850; --bs-primary-rgb: 9,184,80; }

@media (max-width: 1199.98px) {
  /* while the menu is open the bar goes solid, so the links never sit over whatever scrolls beneath */
  header.header-sticky:has(.navbar-collapse.show),
  header.header-sticky:has(.navbar-collapse.collapsing) {
    background: var(--sb-bg); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* the open menu is a plain list under the bar: one link per row, arrows on the right */
  header.header-sticky .navbar-collapse { border-top: 1px solid var(--sb-line); margin-top: 0; }
  header.header-sticky .navbar-nav { padding: 6px 0 14px; max-height: calc(100vh - 84px); overflow-y: auto; }
  header.header-sticky .navbar-nav .nav-link {
    display: flex; justify-content: space-between; width: 100%;
    padding: 13px 4px; border-radius: 0; border: 0; border-bottom: 1px solid var(--sb-line);
    background-color: transparent; transform: none;
  }
  header.header-sticky .navbar-nav .nav-link:hover,
  header.header-sticky .navbar-nav .nav-link.show { background-color: transparent; border-color: var(--sb-line); }
  /* the current section is a tinted row, with the same rule under it as the others */
  header.header-sticky .navbar-nav .nav-link.active { background-color: color-mix(in oklab, var(--sb-acc) 12%, transparent); border-color: var(--sb-line); }
  /* the same order as the /portfolio/ home and the landings: logo, the menu button, Contact, then the switch at the edge */
  header.header-sticky .navbar-toggler { display: grid; place-items: center; order: 1; margin-left: auto !important; }
  header.header-sticky .container > .d-flex:has(.tswitch) { order: 2; margin-left: 28px !important; }
  header.header-sticky .navbar-collapse { order: 3; }
  header.header-sticky .navbar-nav .nav-link:active { background-color: color-mix(in oklab, var(--sb-acc) 18%, transparent); }
  header.header-sticky .navbar-nav .dropdown-menu {
    min-width: 0; margin: 0; padding: 4px 0 8px 12px; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  header.header-sticky .navbar-nav .dropdown-toggle::after { margin-right: 4px; }
}

/* on phones Contact leaves the bar and becomes the last row of the menu; the theme switch keeps the edge */
header.header-sticky .sb-menu-contact { display: none; }
@media (max-width: 767.98px) {
  header.header-sticky .sb-contact { display: none; }
  header.header-sticky .sb-menu-contact { display: list-item; }
  header.header-sticky .sb-menu-contact .nav-link { font-family: inherit; text-align: left; cursor: pointer; background-color: transparent; }
}

@media (max-width: 900px) { header.header-sticky .container > .d-flex:has(.tswitch) { margin-left: 14px !important; } }
@media (max-width: 480px) { header.header-sticky .container > .d-flex:has(.tswitch) { margin-left: 10px !important; } }
@media (min-width: 1200px) { header.header-sticky .container > .d-flex:has(.tswitch) { margin-left: 28px !important; } }

@media (prefers-reduced-motion: reduce) {
  header.header-sticky .navbar-nav .nav-link,
  header.header-sticky .navbar-nav .dropdown-toggle::after,
  header.header-sticky .navbar-toggler,
  header.header-sticky .dropdown-menu .dropdown-item { transition: none; }
  header.header-sticky .navbar-nav .nav-link:active,
  header.header-sticky .navbar-toggler:active { transform: none; }
}

@media print { header.header-sticky { position: absolute; -webkit-backdrop-filter: none; backdrop-filter: none; } }