/* ============================================================================
   CMLase — "latest findings" announcement system
   ----------------------------------------------------------------------------
   Three pieces, all driven by one date in announce.js:
     1. .cml-announce  — slim site-wide bar above the header
     2. .cml-feature   — homepage feature card
     3. .cml-navdot    — the dot on the nav item

   MOTION POLICY
   No blinking. A blinking button is advertising grammar and it undercuts the
   credibility the rest of this site is built on; it is also a WCAG 2.2.2 /
   2.3.1 problem. What runs instead is a slow breathing glow:
     - 4s cycle, three cycles, then it stops for good
     - opacity never falls to zero, so nothing "flashes"
     - fully disabled under prefers-reduced-motion
     - the whole NEW state expires on a date set in announce.js
   ========================================================================== */

:root{
  /* Mapped onto the site's own palette tokens (--site-*); the site is dark for
     every visitor, so the prefers-color-scheme block was removed. */
  --cml-a-ink:    var(--site-ice, #F7FAFC);
  --cml-a-body:   var(--site-silver, #9EABB7);
  --cml-a-muted:  var(--site-silver, #9EABB7);
  --cml-a-bg:     var(--site-midnight, #06101D);
  --cml-a-bg2:    var(--site-carbon, #0B1F32);
  --cml-a-rule:   var(--site-carbon, #0B1F32);
  --cml-a-rule2:  var(--site-carbon, #0B1F32);
  --cml-a-accent: var(--site-cyan, #39D5E8);
  --cml-a-accent-ink: var(--site-electric, #3478F6);
  --cml-a-wash:   var(--site-carbon, #0B1F32);
  /* Ink on an accent fill: midnight on cyan, ice on electric. */
  --cml-a-on-accent:     var(--site-midnight, #06101D);
  --cml-a-on-accent-ink: var(--site-ice, #F7FAFC);
  --cml-a-sans:   var(--font-body);
  --cml-a-serif:  var(--font-display);
  /* the glow colour - rgb triplet so the alpha can be varied (molecular cyan) */
  --cml-a-glow:   57 213 232;
}

/* ========================================================================
   1 · ANNOUNCEMENT BAR
   Markup: snippets/01-announcement-bar.html — goes immediately after <body>,
   above the site header.
   Hidden by default; announce.js reveals it only while the item is current
   and the visitor has not dismissed it. That way it never flashes on if JS
   is slow, and it never shows a stale announcement.
   ====================================================================== */

.cml-announce{
  display:none;
  position:relative;
  z-index:60;
  background:var(--cml-a-wash);
  border-bottom:1px solid var(--cml-a-rule);
  font-family:var(--cml-a-sans);
}
.cml-announce.is-live{ display:block; }

.cml-announce__inner{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:1240px;
  margin-inline:auto;
  padding:11px 52px 11px 24px;
}

.cml-announce__pill{
  flex:none;
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  background:var(--cml-a-accent);
  color:var(--cml-a-on-accent);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
}

.cml-announce__link{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  color:var(--cml-a-ink);
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  line-height:1.4;
}
.cml-announce__link:hover{ color:var(--cml-a-accent-ink); text-decoration:underline; }
.cml-announce__link .cml-announce__date{
  font-weight:500;
  color:var(--cml-a-muted);
  white-space:nowrap;
}
.cml-announce__arrow{ transition:transform .18s ease; }
.cml-announce__link:hover .cml-announce__arrow{ transform:translateX(3px); }

.cml-announce__close{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  display:grid; place-items:center;
  border:0; border-radius:6px;
  background:transparent;
  color:var(--cml-a-muted);
  font-size:17px; line-height:1;
  cursor:pointer;
}
.cml-announce__close:hover{ background:rgb(var(--cml-a-glow) / .12); color:var(--cml-a-ink); }

@media (max-width:640px){
  .cml-announce__inner{ padding:10px 46px 10px 16px; gap:10px; }
  .cml-announce__link{ font-size:13.5px; }
  .cml-announce__date{ display:none; }
}

/* ========================================================================
   2 · FEATURE CARD
   Markup: snippets/02-feature-card.html — homepage, between the hero and
   the "What is CMLase?" section.
   ====================================================================== */

.cml-feature{
  padding:56px 0;
  border-top:1px solid var(--cml-a-rule);
  border-bottom:1px solid var(--cml-a-rule);
  background:var(--cml-a-bg2);
  font-family:var(--cml-a-sans);
}
.cml-feature__inner{
  max-width:1240px;
  margin-inline:auto;
  padding-inline:24px;
  display:grid;
  gap:36px;
  align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  .cml-feature__inner{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:56px; }
  .cml-feature__media{ order:2; }
}

.cml-feature__eyebrow{
  margin:0 0 14px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cml-a-muted);
}
.cml-feature__badge{
  display:inline-block;
  padding:3px 9px; border-radius:999px;
  background:var(--cml-a-accent); color:var(--cml-a-on-accent);
  font-size:10.5px; font-weight:800; letter-spacing:.14em;
}
.cml-feature h2{
  margin:0 0 16px;
  font-family:var(--cml-a-serif); font-weight:400;
  font-size:clamp(26px, 3.2vw, 36px); line-height:1.2; letter-spacing:-.01em;
  color:var(--cml-a-ink);
  text-wrap:balance;
}
.cml-feature__dek{
  margin:0 0 18px;
  font-size:17px; line-height:1.65; color:var(--cml-a-body);
}
.cml-feature__meta{
  margin:0 0 26px;
  font-size:13.5px; color:var(--cml-a-muted);
}
.cml-feature__media img{
  display:block; width:100%; height:auto;
  border:1px solid var(--cml-a-rule);
  border-radius:10px;
  background:var(--cml-a-bg);
}
.cml-feature__figcap{
  margin:10px 0 0;
  font-size:13px; line-height:1.5; color:var(--cml-a-muted);
}
.cml-feature__actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ========================================================================
   3 · THE CTA AND ITS GLOW
   .cml-cta           — the button itself
   .cml-cta--glow     — opt in to the breathing glow
   html.cml-expired   — set by announce.js once the item is no longer new;
                        kills the glow and the badges everywhere at once
   ====================================================================== */

/* NOTE ON THE DOUBLED CLASS SELECTORS BELOW (.cml-cta.cml-cta)
   This is a drop-in component landing in a stylesheet we do not control. A
   host rule as ordinary as `.site-body a { color: … }` has specificity (0,1,1)
   and would beat a plain `.cml-cta` (0,1,0) — painting blue link text onto a
   blue button, i.e. an invisible CTA. Doubling the class lifts us to (0,2,0)
   without resorting to !important, which would be harder for you to override
   later. Keep the doubling on any property a host link rule is likely to set:
   colour, text-decoration, font-weight. */

.cml-cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 24px;
  border-radius:10px;
  border:1.5px solid var(--cml-a-accent);
  background:var(--cml-a-accent);
  font-family:var(--cml-a-sans);
  font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  transition:background-color .18s ease, border-color .18s ease;
}
.cml-cta.cml-cta{ color:var(--cml-a-on-accent); text-decoration:none; }
.cml-cta.cml-cta:hover,
.cml-cta.cml-cta:focus-visible{
  background:var(--cml-a-accent-ink); border-color:var(--cml-a-accent-ink); color:var(--cml-a-on-accent-ink);
}

.cml-cta--secondary{
  background:transparent;
  border-color:var(--cml-a-rule2);
}
.cml-cta--secondary.cml-cta--secondary{ color:var(--cml-a-ink); }
.cml-cta--secondary.cml-cta--secondary:hover,
.cml-cta--secondary.cml-cta--secondary:focus-visible{
  background:transparent; color:var(--cml-a-accent); border-color:var(--cml-a-accent);
}

/* --- the breathing glow ---------------------------------------------- */
/* Three cycles of 4s, then it stops and stays stopped. Opacity of the ring
   runs 0 → .22 → 0; the BUTTON never changes opacity, so there is no flash. */
@keyframes cmlBreathe{
  0%, 100% { box-shadow:0 0 0 0 rgb(var(--cml-a-glow) / 0); }
  50%      { box-shadow:0 0 0 12px rgb(var(--cml-a-glow) / .22); }
}
/* A single slow sheen across the face, same 4s beat, same three repeats. */
@keyframes cmlSheen{
  0%        { background-position:-180% 0; }
  55%, 100% { background-position:180% 0; }
}

.cml-cta--glow{
  position:relative;
  background-image:linear-gradient(100deg,
    rgb(255 255 255 / 0) 38%,
    rgb(255 255 255 / .22) 50%,
    rgb(255 255 255 / 0) 62%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  animation:cmlBreathe 4s ease-in-out 3, cmlSheen 4s ease-in-out 3;
}
/* Stop the moment anyone interacts — motion has done its job by then. */
.cml-cta--glow:hover,
.cml-cta--glow:focus-visible{ animation:none; background-image:none; }

/* Expired: no glow, no badges, anywhere. */
html.cml-expired .cml-cta--glow{ animation:none; background-image:none; }
html.cml-expired .cml-feature__badge,
html.cml-expired .cml-navdot::after{ display:none; }

/* Accessibility: never animate for people who asked not to be animated. */
@media (prefers-reduced-motion: reduce){
  .cml-cta--glow{ animation:none !important; background-image:none !important; }
  .cml-announce__arrow{ transition:none; }
}

/* ========================================================================
   4 · NAV DOT
   Add class="cml-navdot" to the Programme nav link.
   announce.js removes it once visited or once expired.
   ====================================================================== */

.cml-navdot{ position:relative; }
.cml-navdot::after{
  content:"";
  position:absolute;
  top:-3px; right:-10px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--cml-a-accent);
}
.cml-navdot.is-seen::after{ display:none; }

/* ========================================================================
   5 · INLINE TEXT LINK VARIANT
   For dropping the announcement into an existing paragraph or card list.
   ====================================================================== */

.cml-inline-new{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700;
}
.cml-inline-new::before{
  content:"NEW";
  padding:2px 7px;
  border-radius:999px;
  background:var(--cml-a-accent);
  color:var(--cml-a-on-accent);
  font-size:9.5px; font-weight:800; letter-spacing:.12em;
}
html.cml-expired .cml-inline-new::before{ display:none; }

@media print{
  .cml-announce, .cml-feature{ display:none !important; }
}