/* AQcredix — the branded video overlay.
 *
 * Sits above the player in its own layer and never takes input. See the note at the top
 * of overlay.js for why: a layer over a video that accepts pointer events swallows the
 * scrolls and clicks meant for the page beneath, which is a bug this codebase has already
 * paid for once.
 *
 * Sized in cqw — container query width — rather than vw or px, so the overlay scales with
 * the VIDEO rather than with the window. A caption sized against the viewport is correct
 * in a full-width hero and comically large in a 320px card on the same page.
 */

.aqv-host{position:relative;container-type:inline-size;}

/* When the host is the fullscreen element it must behave like a player rather than like a
   block in a page: fill the screen, letterbox the video inside it, and stay black around
   the edges. The overlay then sits over the picture as it does inline, because it is still
   inside the element being shown. See the fullscreen note in overlay.js. */
.aqv-host:fullscreen{
  width:100vw;height:100vh;background:#000;
  display:flex;align-items:center;justify-content:center;
}
.aqv-host:fullscreen video{width:100%;height:100%;object-fit:contain;}

.aqv-overlay{
  position:absolute;inset:0;z-index:4;
  pointer-events:none;                 /* nothing here is interactive. nothing here takes input. */
  overflow:hidden;
  opacity:0;transition:opacity .4s ease;
}
.aqv-overlay.is-live{opacity:1;}

/* ---------- the corner bug ----------
   Top right rather than top left, because a player's own controls and titles cluster on
   the left, and a mark competing with them reads as clutter rather than as ownership. */
/* Brand blue rather than cream. Cream was invisible against the bright outdoor footage it
   first ran over — white on a white sky and sunlit grass. A saturated colour survives a
   light background in a way an off-white never can.

   Two shadows rather than one: a tight dark edge that separates the mark from whatever is
   immediately behind it, and a wider soft halo that lifts it off a busy background. This
   is what makes a broadcast bug legible over any footage without putting a box behind it.

   Full opacity, not .82 — the mark was being asked to be subtle and legible at once. */
.aqv-bug{
  position:absolute;top:3.2cqw;right:3.2cqw;
  display:flex;align-items:center;gap:1.1cqw;
  color:var(--aqv-bug-color,#4C6FFF);
  filter:drop-shadow(0 1px 2px rgba(0,18,22,.92))
         drop-shadow(0 2px 12px rgba(0,18,22,.65));
}
.aqv-bug svg{width:2.6cqw;height:2.6cqw;min-width:16px;min-height:16px;}
/* The name is always shown. It used to be dropped below 420px on the reasoning that the
   mark alone would carry it — which is true for a mark people already recognise, and this
   one is new. A stranger seeing a circled A learns nothing; the point of putting it on the
   video at all is that they read the word. So it shrinks to a floor instead of vanishing,
   and the floor is a size that can still be read rather than merely detected. */
.aqv-bug-word{
  font-family:Georgia,"Iowan Old Style",serif;
  font-size:max(11px,2.1cqw);letter-spacing:.01em;line-height:1;white-space:nowrap;
}

/* ---------- the lower third ----------
   Bottom left, above where a player puts its scrubber, so the two never overlap. */
/* Every size below is max(floor, cqw) rather than a cqw value with a breakpoint under it.
   A breakpoint gives the floor a cliff: below it the panel is legible, one pixel above it
   the cqw value takes over — and a cqw value at the boundary is SMALLER than the floor it
   just replaced, so the caption shrank as the video grew. The role line dropped to 8px on
   any player between about 480 and 630 wide, which is a very ordinary size. max() holds
   the floor until the proportional value genuinely overtakes it, with no cliff anywhere. */
/* Capped, because the panel is sized by its own text and a long institution name would
   otherwise let it grow until it spanned the frame — 91% of the width on a phone, which
   reads as a banner rather than as a caption, and overflows outright once the name gets
   a little longer still. The cap plus wrapping below means any wording is safe. */
.aqv-third{
  position:absolute;left:0;bottom:max(48px,12cqw);
  max-width:72cqw;box-sizing:border-box;   /* border-box, or the padding is added ON TOP of the cap */
  display:flex;align-items:stretch;gap:max(9px,1.6cqw);
  padding:max(10px,1.6cqw) max(16px,3cqw) max(10px,1.6cqw) max(12px,3.2cqw);
  background:linear-gradient(to right,rgba(4,16,14,.88),rgba(4,16,14,.62) 72%,transparent);
  transform:translateX(-102%);           /* parked just off the left edge */
  opacity:0;
  transition:transform .62s cubic-bezier(.16,.84,.28,1), opacity .4s ease;
}
.aqv-third.in{transform:translateX(0);opacity:1;}

/* The rule is what makes it read as broadcast rather than as a caption. It draws itself
   after the panel has arrived, so the eye follows the movement to the name. */
.aqv-rule{
  flex:none;width:.5cqw;min-width:3px;border-radius:2px;
  background:#4C6FFF;
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s ease .22s;
}
.aqv-third.in .aqv-rule{transform:scaleY(1);}

.aqv-third-text{display:flex;flex-direction:column;justify-content:center;gap:.3cqw;}
.aqv-name{
  font-family:Georgia,"Iowan Old Style",serif;
  font-size:max(15px,3.1cqw);line-height:1.15;color:#F4F2EC;letter-spacing:-.01em;
  text-wrap:balance;   /* wraps rather than pushing out of the panel; balanced so a name
                          that takes two lines does not leave one word stranded below */
}
/* Post-nominals set smaller than the name they follow, which is how a broadcast caption
   handles credentials: the person is the headline, the letters are the qualification.
   At full name size a string like "Pharm D., RPh. (AMSP Certified)" doubles the height of
   the panel and competes with the name for the eye. */
.aqv-creds{
  display:block;font-family:inherit;
  font-size:max(11px,1.85cqw);line-height:1.25;color:#CFDCE8;letter-spacing:0;
  margin-top:.18em;
}
.aqv-role{
  font-size:max(11px,1.75cqw);line-height:1.3;color:#9FB0CE;letter-spacing:.02em;
}
/* The second line carries where the speaker is NOW, so it sits a touch brighter than the
   line of past posts above it — present tense reading as present tense. */
.aqv-role2{color:#DCE6F5;margin-top:.35em;}

/* In a player this small the caption was covering half the picture it was captioning —
   52% of the height of a 353px card, for two lines of history nobody can read at that
   size anyway. The name stays, because that is the thing worth knowing at a glance; the
   roles wait until there is room for them, which in practice means fullscreen or a
   full-width player. Nothing is lost, it is deferred. */
@container (max-width: 480px){
  .aqv-role,.aqv-role2{display:none;}
}
.aqv-org{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:max(9.5px,1.4cqw);line-height:1.35;color:#9FB0CE;letter-spacing:.08em;
  text-transform:uppercase;text-wrap:pretty;
}

/* Someone who has asked for less motion still needs to know who is speaking. They get the
   caption, in place, without the slide — see the reduced-motion branch in overlay.js,
   which also holds it on screen longer because there is no movement to catch the eye. */
.aqv-third.no-motion{transition:opacity .3s ease;transform:none;}
.aqv-third.no-motion .aqv-rule{transition:none;transform:scaleY(1);}
@media (prefers-reduced-motion:reduce){
  .aqv-overlay{transition:none;}
  .aqv-third{transition:opacity .3s ease;transform:none;}
  .aqv-third:not(.in){opacity:0;}
  .aqv-rule{transition:none;transform:scaleY(1);}
}

/* A printed page has no video, so it has no overlay either. */
@media print{ .aqv-overlay{display:none;} }