/* ps-cv-dropdown.css: split "Download CV" control with a version menu.
   The two halves reuse the site's own .button.secondary styling, so colour,
   typography and border all stay inherited. Only geometry is overridden here,
   plus the menu. Strictly greyscale, no dependencies, no custom fonts. */

.ps-cv{
  --ps-cv-ink:#202020;
  --ps-cv-surface:#ffffff;
  --ps-cv-line:rgba(32,32,32,.14);
  --ps-cv-muted:rgba(32,32,32,.62);
  --ps-cv-wash:rgba(32,32,32,.06);
  position:relative;
  /* inline-flex keeps the box tight to the control, so the menu's 8px offset
     is measured from the button's real bottom edge. */
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  max-width:100%;
  /* The chevron's hit overlay reaches 5px past its painted edge (see the
     ::before note below). This keeps that area at least 8px clear of whatever
     sits beside it in .actions, even if .actions has no gap of its own. */
  margin-inline-end:14px;
}

/* ── Split control ──────────────────────────────────────────────── */

.ps-cv__group{
  display:inline-flex;
  align-items:stretch;
  max-width:100%;
}

/* These override geometry that the site's own .button.secondary sets, so every
   selector here is deliberately scoped through .ps-cv .ps-cv__group. That is
   three classes, which outranks a site rule like .button.secondary and ties a
   three-class one (this file loads after the site sheets, so a tie goes to us).
   Without the extra scope, `padding-inline:0` and `width:40px` would be a
   single class and could quietly lose to the site's button padding. */

/* Flatten the inner corners so the two halves read as one control, and pull
   them together so their borders share an edge instead of doubling up. */
.ps-cv--ready .ps-cv__group .ps-cv__main{
  border-start-end-radius:0;
  border-end-end-radius:0;
}
.ps-cv--ready .ps-cv__group .ps-cv__toggle{
  border-start-start-radius:0;
  border-end-start-radius:0;
  /* Pull the halves together so the two 1px borders occupy the same column…  */
  margin-inline-start:-1px;
  /* …and drop this one, so only the main half's border paints there. Stacking
     two translucent borders composites to a darker line than the rest of the
     outline (rgb(182) against rgb(215) with the site's rgba(32,32,32,.18)),
     which reads as a doubled border. The main half's border still shows
     through, because this half's background is transparent. */
  border-inline-start-color:transparent;
}

.ps-cv .ps-cv__group .ps-cv__toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:40px;
  padding-inline:0;
  cursor:pointer;
}

/* The chevron stays visually small; the real tap target is expanded to the
   44x44 minimum with an invisible overlay, the same pattern the accessibility
   toolbox uses for .ps-a11y-toggle. Anchored to the trailing edge so the
   expansion grows into empty page space and never overlaps the main half:
   the overlay's containing block is this button's padding box (40px wide less
   its 1px borders = 38px), so a 44px box held 6px past that box's trailing
   edge starts exactly at the seam and ends 5px past the painted edge.
   Measured target: 45 x 46, with the button's own box covering the rest. */
.ps-cv .ps-cv__group .ps-cv__toggle::before{
  content:"";
  position:absolute;
  top:50%;
  inset-inline-end:-6px;
  transform:translateY(-50%);
  width:44px;
  height:44px;
}

.ps-cv__chevron{
  width:18px;
  height:18px;
  display:block;
  transition:transform 200ms ease;
}

.ps-cv--open .ps-cv__chevron{transform:rotate(180deg)}

/* ── Menu ───────────────────────────────────────────────────────── */

.ps-cv__menu{
  position:absolute;
  top:calc(100% + 8px);
  inset-inline-start:0;
  z-index:60;
  box-sizing:border-box;
  min-width:244px;
  max-width:calc(100vw - 32px);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--ps-cv-surface);
  border:1px solid var(--ps-cv-line);
  border-radius:12px;
  box-shadow:0 2px 4px rgba(0,0,0,.05),0 10px 24px -8px rgba(0,0,0,.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity 180ms ease,transform 180ms ease,visibility 0s linear 180ms;
}

.ps-cv--open .ps-cv__menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity 180ms ease,transform 180ms ease,visibility 0s;
}

.ps-cv__item{
  display:flex;
  align-items:center;
  gap:10px;
  box-sizing:border-box;
  min-height:44px;
  padding:7px 12px;
  border-radius:8px;
  color:var(--ps-cv-ink);
  text-decoration:none;
  transition:background-color 150ms ease;
}

.ps-cv__item:hover,
.ps-cv__item:focus-visible{background-color:var(--ps-cv-wash)}
.ps-cv__item:focus-visible{outline:2px solid var(--ps-cv-ink);outline-offset:-2px}

.ps-cv__item-icon{width:16px;height:16px;flex:none;display:block;color:var(--ps-cv-muted)}
.ps-cv__item:hover .ps-cv__item-icon,
.ps-cv__item:focus-visible .ps-cv__item-icon{color:var(--ps-cv-ink)}

.ps-cv__item-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.ps-cv__item-label{font-size:.9375rem;font-weight:600;line-height:1.25}
.ps-cv__item-hint{font-size:.75rem;line-height:1.3;color:var(--ps-cv-muted)}

/* ── No-JavaScript fallback ─────────────────────────────────────── */

.ps-cv__fallback{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin-inline-start:12px;
  padding:0 4px;
  color:var(--ps-cv-ink);
  font-size:.9375rem;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.ps-cv__fallback:focus-visible{outline:2px solid var(--ps-cv-ink);outline-offset:2px;border-radius:6px}

/* Until the script wires it up, the chevron is hidden and the plain link
   beside it keeps both versions reachable. Scoped one class deeper than the
   .ps-cv .ps-cv__group .ps-cv__toggle block above so it wins on specificity
   rather than on source order. */
.ps-cv:not(.ps-cv--ready) .ps-cv__group .ps-cv__toggle{display:none}
.ps-cv--ready .ps-cv__fallback{display:none}

@media (max-width:420px){
  .ps-cv__menu{min-width:min(244px,calc(100vw - 32px))}
}

@media (prefers-reduced-motion:reduce){
  .ps-cv__chevron,
  .ps-cv__item{transition:none}
  .ps-cv__menu{transform:none;transition:visibility 0s linear 0s}
  .ps-cv--open .ps-cv__menu{transform:none;transition:visibility 0s}
  .ps-cv--open .ps-cv__chevron{transform:rotate(180deg)}
}