/* Case study header: the portfolio's bar on top of every case study page.
   Layout (desktop): name · role | dot, project switcher | LinkedIn, Contact.
   Mono labels and one terracotta dot are the portfolio's; the bar's colour is the page's own
   (set --bar-bg on the <header>, usually the hero colour; add .bar--light for a light page).
   The switcher menu is built by assets/js/header.js from its PROJECTS list.
   Loaded after case-study.css (Simply pages) or before the page css (Riverside); selectors are
   kept specific so the page css does not undo them. */

@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/dm-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/dm-mono-latin-500-normal.woff2) format("woff2"); }

.site-header.bar {
  --bar-ink: #fff; --bar-mute: rgba(255, 255, 255, .72); --bar-line: rgba(255, 255, 255, .18); --bar-acc: #e4572e;
  height: 64px; background: color-mix(in srgb, var(--bar-bg, #1a1a1a) 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: none; border-bottom: 1px solid var(--bar-line);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--bar-mute);
}
.site-header.bar--light { --bar-ink: #221d17; --bar-mute: #8b8176; --bar-line: #e2d7c6; }
.site-header.bar .site-header__inner {
  height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 56px;
}
.bar__name { color: var(--bar-ink); font-weight: 500; text-decoration: none; white-space: nowrap; transition: opacity .2s ease; }
.bar__name:hover { opacity: .75; }
.bar__name span { color: var(--bar-mute); font-weight: 400; }
.bar__mid { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.bar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bar-acc); flex: none; }
.bar__count { display: none; } /* page counter removed (Amir, 2026-10-23) */
.bar__links { display: flex; justify-content: flex-end; gap: 28px; }
.bar__links a { color: var(--bar-mute); text-decoration: none; transition: color .2s ease; }
.bar__links a:hover, .bar__links a:focus-visible { color: var(--bar-ink); }

.switcher { position: relative; }
.site-header.bar .switcher__btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 -8px; padding: 6px 8px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-weight: 500; letter-spacing: inherit; text-transform: inherit; color: var(--bar-ink); white-space: nowrap;
  transition: background .2s ease;
}
.site-header.bar .switcher__btn svg { width: 12px; height: 12px; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.site-header.bar .switcher__btn:hover, .site-header.bar .switcher.is-open .switcher__btn { color: var(--bar-ink); background: rgba(255, 255, 255, .1); }
.site-header.bar--light .switcher__btn:hover, .site-header.bar--light .switcher.is-open .switcher__btn { background: rgba(0, 0, 0, .06); }
.site-header.bar .switcher.is-open .switcher__btn svg { transform: rotate(180deg); }
.site-header.bar .switcher__btn:focus-visible { outline: 2px solid var(--bar-ink); outline-offset: 2px; }

.switcher__menu {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 12px); z-index: 60;
  min-width: 260px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(17, 0, 52, .06), 0 16px 40px -12px rgba(17, 0, 52, .25);
  animation: switcher-in .22s cubic-bezier(.22, 1, .36, 1);
  font-family: "Poppins", system-ui, sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none;
}
.switcher__menu[hidden] { display: none; }
@keyframes switcher-in { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } }
.switcher__menu a {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 12px; border-radius: 9px;
  color: #4b4466; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.switcher__menu a .switcher__n { font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; color: #8a859c; width: 22px; flex: none; }
.switcher__menu a:hover, .switcher__menu a:focus-visible { background: rgba(17, 0, 52, .05); color: #110034; outline: none; }
.switcher__menu a[aria-current="page"] { color: #110034; font-weight: 500; }
.switcher__menu a[aria-current="page"] .switcher__n { color: #e4572e; }
.switcher__menu a[aria-current="page"]::after {
  content: ""; width: 14px; height: 14px; flex: none; margin-left: auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1099.98px) {
  .site-header.bar { height: 56px; font-size: 11.5px; }
  .site-header.bar .site-header__inner { grid-template-columns: 1fr auto; padding: 0 var(--gutter, 20px); gap: 12px; }
  .bar__name span, .bar__links, .bar__count { display: none; }
  .switcher__menu { left: auto; right: -8px; transform: none; }
  @keyframes switcher-in { from { opacity: 0; transform: translateY(-4px); } }
}
@media (prefers-reduced-motion: reduce) {
  .switcher__menu { animation: none; }
}