/* =========================================================
   app-bar — sticky site header that composes logo-mark, tab,
   copy-button and social-link. Translucent blurred fill;
   stays pinned to the top once scrolled. Adapts to its OWN
   width via a container query (not the viewport): at 582px
   and below it drops the tabs and the email label, leaving a
   compact logo + icons view.
   ========================================================= */

.app-bar {
  /* Sits below the hero in flow; pins to the top once the page scrolls
     past it. The frosted surface spans the full viewport width so content
     scrolling underneath is blurred edge-to-edge. */
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  /* Outer gutter around the row: 16px top, 32px left/right. The fill covers
     the padding box, so the frost still spans the full viewport width while
     the bordered row sits inset from the edges. */
  padding: var(--spacing-05) var(--spacing-07) 0;
  /* 40% of the page background + blur — token-derived translucent fill. */
  background: color-mix(in srgb, var(--color-background) 40%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  /* The query context: the bar reacts to its own inline size. */
  container-type: inline-size;
  container-name: app-bar;
}

.app-bar__inner {
  /* Full width, capped at 2000px and centred, with a 32px gutter each side. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-06);
  height: 56px;                 /* component-level: no spacing primitive matches */
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 var(--spacing-07);   /* 32px left / right */
  border: 1px solid var(--color-border-dark);
}

/* The two sections inside the bar — both tight 8px rows. Left: logo-mark ↔ tabs.
   Right: the email copy-button grouped with the social icons. */
.app-bar__nav,
.app-bar__contact {
  display: flex;
  align-items: center;
  gap: var(--spacing-03);   /* 8px */
}

/* At full width the copy-button shows only its email label — the duplicate
   icon is dropped. It returns in the compact view below, where the label is
   hidden and the icon alone stands in for the action. */
.app-bar .copy-button__icon { display: none; }

/* ---------- Compact view ----------
   Reacts to the bar's own width. Hidden elements use display:none
   so they also leave the tab order (see a11y.md §2). */
@container app-bar (max-width: 582px) {
  .app-bar .tab { display: none; }
  .app-bar .copy-button__label { display: none; }
  .app-bar .copy-button__icon { display: block; }
}

/* ---------- Case-study variant ----------
   Same frosted surface, fill, sticky behaviour, outer gutter and 2000px /
   56px row as the parent — but NO bordered box. The row is just a back
   control on the left and the copy-button on the right, sitting at the 32px
   gutter (the parent's padding), space-between. Everything else, including the
   582px compaction of the copy-button label, is inherited from the rules above
   because the variant still carries the base .app-bar class. */
.app-bar--case-study .app-bar__inner {
  padding: 0;     /* no inner inset — content aligns to the parent's 32px gutter */
  border: 0;      /* the case-study bar drops the bordered box */
}

/* Back control: a square hit area holding the arrow-left glyph; returns to the
   homepage's work grid. Muted at rest, darkening to the solid font colour on
   hover — the same muted→solid move as the tab, with no background fill. */
.app-bar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-08);    /* 40px hit area */
  height: var(--spacing-08);
  border-radius: var(--border-radius-pill);
}

/* 20px glyph — matches the copy-button's icon so the two ends read at the same
   weight (the 24px .icon default would feel heavy as the only left element). */
.app-bar__back .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Keep the pill radius on the focus ring (overrides the global 5px default). */
.app-bar__back:focus-visible {
  border-radius: var(--border-radius-pill);
}