/*
 * Phase H site-wide announcement ribbon (compact premium).
 * ISOLATED file: styles ONLY .aim-anno* selectors.
 * No external URLs, no web fonts, no dependencies, no animation/transition, no inline styles.
 * Loaded on the 22 allowlisted marketing pages only.
 *
 * Ribbon shells emitted by the publisher (unchanged markup):
 *   <div class="aim-anno [aim-anno--index]">
 *     <div class="aim-anno__inner">
 *       <span class="aim-anno__text">…escaped text…</span>                 (text-only)
 *       OR <a class="aim-anno__link" href="…" target="_blank" rel="noopener noreferrer">…text…</a>
 *       OR <span class="aim-anno__text">…</span>
 *          + <a class="aim-anno__cta" href="…" target="_blank" rel="noopener noreferrer">…button…</a>
 *     </div>
 *   </div>
 * The gold dot indicator and trailing CTA arrow are pure CSS (::before / ::after),
 * so the publisher markup is never touched. Empty when disabled or text-less.
 */

.aim-anno{
  display:flex;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  min-height:48px;
  background:var(--ink2, #141929);
  background-image:linear-gradient(180deg, rgba(201,168,76,.05), rgba(201,168,76,0) 60%);
  border-top:1px solid rgba(201,168,76,.10);
  border-bottom:1px solid rgba(201,168,76,.28);
  color:var(--white, #fafaf9);
  font-family:var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  -webkit-text-size-adjust:100%;
}

.aim-anno__inner{
  box-sizing:border-box;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:6px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  text-align:center;
}

.aim-anno__text{
  flex:0 1 auto;
  min-width:0;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  color:var(--white, #fafaf9);
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Subtle gold indicator dot, attached to the first content element (dot + text read as one unit). */
.aim-anno__inner > *:first-child::before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:7px;
  height:7px;
  margin-right:9px;
  border-radius:50%;
  background:var(--gold2, #e8c97a);
  box-shadow:0 0 0 0 transparent;
}

.aim-anno__link{
  flex:0 1 auto;
  min-width:0;
  color:var(--white, #fafaf9);
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  display:inline;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.aim-anno__link:hover{
  color:var(--gold2, #e8c97a);
}

/* Text-as-link mode keeps the arrow so it reads "text →". */
.aim-anno__link::after{
  content:"\2192";
  display:inline-block;
  vertical-align:middle;
  margin-left:7px;
  color:var(--gold2, #e8c97a);
  font-weight:700;
}

.aim-anno__cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  min-height:28px;
  padding:0 16px;
  border:1px solid rgba(201,168,76,.35);
  border-radius:999px;
  background:rgba(201,168,76,.10);
  color:var(--gold2, #e8c97a);
  font-size:13px;
  font-weight:600;
  line-height:1;
  letter-spacing:.1px;
  text-decoration:none;
  white-space:nowrap;
}

/* Arrow belongs to the CTA pill: "New Update →". */
.aim-anno__cta::after{
  content:"\2192";
  display:inline-block;
  margin-left:8px;
  color:var(--gold2, #e8c97a);
  font-weight:700;
}

.aim-anno__cta:hover{
  background:rgba(201,168,76,.18);
  border-color:rgba(207,185,96,.55);
  color:var(--gold3, #F5E6B0);
}

/* Keyboard focus ring (no animation). */
.aim-anno__link:focus-visible,
.aim-anno__cta:focus-visible{
  outline:2px solid var(--gold2, #e8c97a);
  outline-offset:3px;
  border-radius:6px;
}

/*
 * index.html only: the site nav is position:fixed; height:64px.
 * The ribbon is in normal flow, so reserve the 64px of fixed-nav area
 * STRUCTURALLY via outer margin-top (NOT inner padding) — the visible
 * ribbon stays a compact ~48px. The 21 other pages have an in-flow header
 * and do not carry this variant.
 */
.aim-anno--index{
  margin-top:64px;
}

@media (max-width: 640px){
  .aim-anno{
    min-height:44px;
  }

  .aim-anno__inner{
    padding:6px 16px;
    gap:10px;
  }

  .aim-anno__text,
  .aim-anno__link{
    font-size:13px;
  }

  .aim-anno__cta{
    height:28px;
    padding:0 13px;
    font-size:12px;
  }
}