/* The site bar for the two design system landings (Wolf-Rayet and Kinetic).
 *
 * These pages carry their own hand built header (.ph, .has-dd, .dd-menu) rather than the Bootstrap navbar, so
 * /assets/site-bar.css does not reach them. This gives that header the same design: a blurred bar, accent coloured
 * section links, a tinted pill on hover, a firmer tint while pressed, a ring for the keyboard, and the chevron arrow
 * on the links that open a menu (it turns over while the menu is open). Same colours as site-bar.css.
 * Load it after the page's own styles.
 */

header.ph {
  --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.ph {
  --sb-bg: #111417; --sb-surface: #191b1d; --sb-line: #2c3036; --sb-line-2: #5a616b;
  --sb-text: #f1f2f3; --sb-acc: #4ee08a;
}

/* ---------- the bar ---------- */
header.ph,
header.ph.scrolled {
  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);
}
/* 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.ph .ph-inner { height: 63px; max-width: none; padding: 0 clamp(20px,4vw,56px); gap: 6px; }
header.ph .ph-nav { gap: 6px; }
header.ph .ph-logo-svg { height: 30px; color: var(--sb-text); }
html.dark header.ph .ph-logo-svg { color: var(--sb-text); }

/* ---------- section links ---------- */
header.ph .ph-link {
  gap: .1rem; padding: 7px 12px; font-size: .9rem; font-weight: 600; line-height: 1.2;
  color: var(--sb-acc); 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.ph .ph-link:hover,
  header.ph .has-dd:hover > .ph-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.ph .ph-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.ph .ph-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.ph .ph-link:focus-visible,
header.ph .has-dd:focus-within > .ph-link {
  outline: 2px solid var(--sb-acc); outline-offset: 2px; box-shadow: none; border-radius: 999px;
  color: var(--sb-acc); background-color: color-mix(in oklab, var(--sb-acc) 14%, transparent);
}

/* ---------- the arrow ---------- */
header.ph .caret {
  width: .95em; height: .95em; margin-left: .3em; opacity: 1; flex: none;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
header.ph .has-dd:hover > .ph-link .caret,
header.ph .has-dd:focus-within > .ph-link .caret { transform: rotate(180deg); }

/* ---------- the menus ---------- */
header.ph .dd-menu {
  min-width: 290px; 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);
}
header.ph .dd-item {
  padding: 9px 12px; border-radius: 9px; font-size: .9rem; font-weight: 500; line-height: 1.3;
  color: var(--sb-text); white-space: normal;
  transition: color .15s, background-color .15s;
}
@media (hover: hover) {
  header.ph .dd-item:hover { color: var(--sb-acc); background: color-mix(in oklab, var(--sb-acc) 14%, transparent); }
}
header.ph .dd-item.active { color: var(--sb-acc); background: color-mix(in oklab, var(--sb-acc) 14%, transparent); }
header.ph .dd-item:active { color: var(--sb-text); background: color-mix(in oklab, var(--sb-acc) 24%, transparent); }
header.ph .dd-item:focus-visible {
  outline: 2px solid var(--sb-acc); outline-offset: -2px; box-shadow: none; border-radius: 9px;
  color: var(--sb-acc); background: color-mix(in oklab, var(--sb-acc) 14%, transparent);
}

/* ---------- the menu button on narrow screens ---------- */
header.ph .ph-burger {
  width: 40px; height: 40px; border: 1px solid var(--sb-line-2); border-radius: 12px; color: var(--sb-text);
  transition: border-color .15s, background-color .15s, transform .12s;
}
@media (hover: hover) {
  header.ph .ph-burger:hover { color: var(--sb-text); border-color: var(--sb-acc); background: color-mix(in oklab, var(--sb-acc) 14%, transparent); }
}
header.ph .ph-burger:active { transform: scale(.95); background: color-mix(in oklab, var(--sb-acc) 24%, transparent); }
header.ph .ph-burger:focus-visible { outline: 2px solid var(--sb-acc); outline-offset: 2px; box-shadow: none; border-radius: 12px; }

/* ---------- 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.ph .sb-contact {
  flex: none; margin: 0 22px; 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.ph .sb-contact:hover { color: var(--sb-bg); background: var(--sb-acc); border-color: var(--sb-acc); }
}
header.ph .sb-contact:active { transform: translateY(1px) scale(.97); }
header.ph .sb-contact:focus-visible { outline: 2px solid var(--sb-acc) !important; outline-offset: 2px; }
/* with the row's own 6px, the gap to the switch is 28px, 14px below 900 and 10px below 480, as on the /portfolio/ home */
@media (max-width: 900px) { header.ph .sb-contact { margin: 0 8px; } }
@media (max-width: 480px) { header.ph .sb-contact { padding: 10px 13px; margin: 0 4px; } }
/* once the links fold into a menu, its button sits ahead of Contact and the switch keeps the edge */
@media (max-width: 860px) { header.ph .ph-burger { order: 1; } header.ph .sb-contact { order: 2; } header.ph .tswitch { order: 3; } }
/* on phones Contact leaves the bar and becomes the last row of the menu; the theme switch keeps the edge, and the
   menu button keeps the same 14px and 10px from it that Contact had */
header.ph .ph-nav .ph-link.sb-menu-contact { display: none; }
@media (max-width: 767.98px) {
  header.ph .sb-contact { display: none; }
  /* this menu lists every project and scrolls, so the row is pinned to the foot of it and never needs hunting for */
  header.ph .ph-nav .ph-link.sb-menu-contact {
    display: flex; flex: none; font-family: inherit; text-align: left; cursor: pointer;
    position: sticky; bottom: -14px; background: var(--sb-bg); border-top: 1px solid var(--sb-line); border-bottom: 0;
  }
  header.ph .ph-burger { margin-right: 8px; }
}
@media (max-width: 480px) { header.ph .ph-burger { margin-right: 4px; } }
@media (prefers-reduced-motion: reduce) { header.ph .sb-contact { transition: none; } header.ph .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: 860px) {
  /* the open menu: a solid list under the bar, one link per row, arrows on the right */
  header.ph .ph-nav {
    background: var(--sb-bg); border-bottom: 1px solid var(--sb-line); gap: 0; padding: 6px 16px 14px;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  header.ph .ph-nav .ph-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: transparent; transform: none;
  }
  header.ph .ph-nav .ph-link:hover,
  header.ph .ph-nav .has-dd:hover > .ph-link { background: transparent; border-color: var(--sb-line); }
  header.ph .ph-nav .ph-link:active { background: color-mix(in oklab, var(--sb-acc) 18%, transparent); }
  header.ph .ph-nav .ph-link.active { background: color-mix(in oklab, var(--sb-acc) 12%, transparent); border-color: var(--sb-line); }
  header.ph .ph-nav .has-dd > .dd-menu { background: transparent; border: 0; box-shadow: none; padding: 4px 0 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  header.ph .ph-link, header.ph .caret, header.ph .dd-item, header.ph .ph-burger { transition: none; }
  header.ph .ph-link:active, header.ph .ph-burger:active { transform: none; }
}