/* ==========================================================================
   CogniPrism icon system
   Add to the child theme. Loads alongside the sprite.
   Covers the 7S organizational domain marks and the 7C individual domain marks.
   ========================================================================== */

:root {
  --cp-cerulean:  #4281A4;
  --cp-navy:      #07355B;
  --cp-baltic:    #05597D;
  --cp-robin:     #64C9CE;
  --cp-magenta:   #CD74C9;
  --cp-sage:      #8FAF8A;
  --cp-ivory:     #FBFAF9;
  --cp-champagne: #F0E5D3;

  /* Accent inside domain marks. Override per section, never globally. */
  --cp-accent: var(--cp-robin);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.cp-icon {
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;      /* stroke follows surrounding text colour */
  width: 24px;
  height: 24px;
}

.cp-icon svg { width: 100%; height: 100%; display: block; }

/* Sizes. Square only. Never set width without height. */
.cp-icon--16 { width: 16px; height: 16px; }
.cp-icon--20 { width: 20px; height: 20px; }
.cp-icon--24 { width: 24px; height: 24px; }
.cp-icon--28 { width: 28px; height: 28px; }
.cp-icon--32 { width: 32px; height: 32px; }
.cp-icon--40 { width: 40px; height: 40px; }
.cp-icon--56 { width: 56px; height: 56px; }

/* --------------------------------------------------------------------------
   Domain marks
   Cerulean on light surfaces, Ivory on Navy. Accent comes from --cp-accent.
   The same class drives both the 7S (cp-strat ... cp-self) and the
   7C (cp-cert ... cp-char) marks; only the sprite id changes.
   -------------------------------------------------------------------------- */

.cp-domain        { color: var(--cp-cerulean); width: 32px; height: 32px; }
.cp-domain--navy  { color: var(--cp-ivory); }

/* Context-specific accents. Apply to a section wrapper, not the icon. */
.cp-accent-magenta { --cp-accent: var(--cp-magenta); }

/* 7C individual marks. Warm organic accent for B2C surfaces.
   Use Robin Egg OR Sage in a given piece, never both. */
.cp-accent-sage    { --cp-accent: var(--cp-sage); }

/* --------------------------------------------------------------------------
   Link arrow
   -------------------------------------------------------------------------- */

.cp-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cp-cerulean);
  font-weight: 600;
  text-decoration: none;
  transition: color .15s ease;
}
.cp-link:hover { color: var(--cp-navy); }
.cp-link .cp-icon { transition: transform .2s ease; }
.cp-link:hover .cp-icon { transform: translateX(3px); }

/* Below 20px the custom arrow loses its second chevron.
   Use Lucide arrow-right in small text instead. */
.cp-link--sm .cp-icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Prism reveal
   Middle ray always visible. Outer rays stack on it, then rotate out.

   The rays live inside the sprite symbol. <use> places that symbol in a
   shadow tree that ordinary selectors cannot reach, which is why rules
   targeting .cp-ray never fired on the page. Custom properties DO inherit
   across that boundary (the same mechanism --cp-accent already uses), so the
   open state is driven by the variables set here and read by the ray paths
   inside the symbol. Requires the matching sprite symbol, whose two .cp-ray
   paths carry style="opacity:var(--cp-ray-opacity,0);
   transform:rotate(var(--cp-ray-up|dn,0deg))".
   -------------------------------------------------------------------------- */

.cp-reveal {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: 0;
  padding: 8px 0;
  font: inherit;
  font-weight: 600;
  color: var(--cp-cerulean);
  cursor: pointer;
  transition: color .15s ease;

  /* Closed state */
  --cp-ray-opacity: 0;
  --cp-ray-up: 0deg;
  --cp-ray-dn: 0deg;
}
.cp-reveal:hover { color: var(--cp-navy); }
.cp-reveal .cp-icon { width: 26px; height: 26px; }   /* 26px floor. Do not shrink. */

/* Open state */
.cp-reveal[aria-expanded="true"] {
  --cp-ray-opacity: 1;
  --cp-ray-up: -30deg;
  --cp-ray-dn: 30deg;
}

/* Retained for any prism rendered inline rather than through <use>. */
.cp-ray {
  transform-box: view-box;
  transform-origin: 13.8px 13.4px;
  opacity: 0;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), opacity .24s ease;
}
.cp-reveal[aria-expanded="true"] .cp-ray        { opacity: 1; }
.cp-reveal[aria-expanded="true"] .cp-ray-up     { transform: rotate(-30deg); }
.cp-reveal[aria-expanded="true"] .cp-ray-dn     { transform: rotate(30deg); }

.cp-reveal-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.cp-reveal-panel.is-open { max-height: 600px; }

/* --------------------------------------------------------------------------
   Focus. The one place Robin Egg belongs in the utility family.
   -------------------------------------------------------------------------- */

.cp-link:focus-visible,
.cp-reveal:focus-visible {
  outline: 2px solid var(--cp-robin);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cp-reveal[aria-expanded="true"] {
    --cp-ray-up: 0deg;
    --cp-ray-dn: 0deg;
  }
  .cp-ray { transition: opacity .18s ease; }
  .cp-reveal[aria-expanded="true"] .cp-ray-up,
  .cp-reveal[aria-expanded="true"] .cp-ray-dn { transform: none; }
  .cp-link .cp-icon,
  .cp-reveal-panel { transition: none; }
}