/* Celegant Braiding Academy - motion and interaction layer.
   Owned by the motion agent. Enqueued after theme.css so it wins on specificity ties.

   Three rules govern this file:
   1. Palette tokens only. No hex that is not already in theme.json.
   2. Animate transform and opacity only. Nothing that triggers layout.
   3. Everything collapses to an instant, non-animated state under
      prefers-reduced-motion. The rotating banner stops entirely. */

:root {
  --cba-press: 90ms;
  --cba-panel-dur: 520ms;
  --cba-panel-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cba-banner-shift: 18px;
}

/* =========================================================
   1. Buttons
   ========================================================= */

.cba-btn {
  min-width: var(--wp--custom--target--min, 44px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--cba-dur) var(--cba-ease),
    color var(--cba-dur) var(--cba-ease),
    border-color var(--cba-dur) var(--cba-ease),
    transform var(--cba-press) var(--cba-ease);
}

/* Hover lift only where there is a real pointer. Never on touch, where the
   hover state would stick after a tap. */
@media (hover: hover) and (pointer: fine) {
  .cba-btn--primary:hover,
  .cba-btn--secondary:hover {
    transform: translateY(-1px);
  }
  .cba-btn--secondary:hover {
    border-color: var(--cba-accent);
  }
  .cba-btn--tertiary:hover {
    text-underline-offset: 3px;
  }
}

/* Press. Fast, small, and never bouncy: a linear-out ease, no overshoot. */
.cba-btn:active,
.cba-btn--primary:active,
.cba-btn--secondary:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: var(--cba-press);
}
.cba-btn--tertiary:active {
  transform: translateY(1px);
}

/* Focus-visible is the design contract: 3px magenta ring at 2px offset.
   Restated here so no later rule can quietly weaken it. */
.cba-btn:focus-visible,
.cba-banner__btn:focus-visible,
.cba-banner__link:focus-visible,
summary:focus-visible {
  outline: var(--wp--custom--focus--width, 3px) solid var(--cba-accent);
  outline-offset: var(--wp--custom--focus--offset, 2px);
}

/* Disabled. No hover, no press, no colour change. */
.cba-btn:disabled,
.cba-btn[disabled],
.cba-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.cba-btn:disabled:hover,
.cba-btn[disabled]:hover,
.cba-btn[aria-disabled="true"]:hover,
.cba-btn:disabled:active,
.cba-btn[aria-disabled="true"]:active {
  transform: none;
}
.cba-btn--primary[aria-disabled="true"]:hover,
.cba-btn--primary:disabled:hover {
  background: var(--cba-action);
  border-color: var(--cba-action);
}
.cba-btn--secondary[aria-disabled="true"]:hover,
.cba-btn--secondary:disabled:hover {
  background: transparent;
  border-color: var(--cba-accent);
}

/* Loading state on form submits. The width is frozen and the spinner sits on
   top of the label, so pressing submit moves nothing at all. The label stays in
   the accessibility tree; aria-busy carries the state. */
.cba-btn[data-cba-loading="true"] {
  cursor: progress;
  transform: none;
  position: relative;
}
.cba-btn[data-cba-loading="true"] .cba-btn__label { opacity: 0; }
.cba-btn__label { display: inline-flex; align-items: center; gap: 8px; }
.cba-btn__spin {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--cba-radius-pill);
  animation: cba-spin 720ms linear infinite;
}
@keyframes cba-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   2. Accordion chevrons and reveal
   ========================================================= */

.cba-module > summary,
.cba-faq__item > summary {
  transition: color var(--cba-dur) var(--cba-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cba-module > summary:hover .cba-module__chev,
  .cba-faq__item > summary:hover .cba-faq__chev {
    transform: translateY(2px);
  }
  .cba-module[open] > summary:hover .cba-module__chev,
  .cba-faq__item[open] > summary:hover .cba-faq__chev {
    transform: rotate(180deg) translateY(2px);
  }
}
.cba-module__chev,
.cba-faq__chev {
  transition: transform var(--cba-dur) var(--cba-ease);
}

@media (prefers-reduced-motion: no-preference) {
  .cba-module[open] > .cba-module__body,
  .cba-faq__item[open] > .cba-faq__answer {
    animation: cba-reveal 220ms var(--cba-ease) both;
  }
}
@keyframes cba-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   3. Mobile sticky action bar
   ========================================================= */

.cba-sticky-bar--enter {
  animation: cba-slide-up 280ms var(--cba-panel-ease) both;
}
@keyframes cba-slide-up {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}
.cba-sticky-bar__call {
  transition: border-color var(--cba-dur) var(--cba-ease), color var(--cba-dur) var(--cba-ease), transform var(--cba-press) var(--cba-ease);
}
.cba-sticky-bar__call:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .cba-sticky-bar__call:hover { border-color: var(--cba-accent); color: var(--cba-accent); }
}

/* =========================================================
   4. Seats remaining
   ========================================================= */

.cba-places {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 16px 0 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--cba-body);
}
.cba-places__count {
  font-weight: 600;
  color: var(--cba-accent);
}
.cba-places__cohort {
  font-size: var(--wp--preset--font-size--label, 0.8125rem);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--label, 0.08em);
  text-transform: uppercase;
  color: var(--cba-body);
  flex-basis: 100%;
}
.cba-places__deadline { color: var(--cba-body); flex-basis: 100%; }
.cba-places--full .cba-places__count { color: var(--cba-body); }

/* =========================================================
   5. Rotating program banner
   ========================================================= */

.cba-banner {
  background: var(--cba-muted);
  border-top: 1px solid var(--cba-border);
  border-bottom: 1px solid var(--cba-border);
  padding-block: clamp(32px, 5vw, 56px);
  overflow: clip;
}

.cba-banner__viewport {
  display: grid;
  align-items: stretch;
}

.cba-banner__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  align-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, var(--cba-banner-shift), 0);
  transition:
    opacity var(--cba-panel-dur) var(--cba-panel-ease),
    transform var(--cba-panel-dur) var(--cba-panel-ease),
    visibility 0s linear var(--cba-panel-dur);
}
.cba-banner[data-dir="back"] .cba-banner__panel {
  transform: translate3d(0, calc(var(--cba-banner-shift) * -1), 0);
}
.cba-banner__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--cba-panel-dur) var(--cba-panel-ease),
    transform var(--cba-panel-dur) var(--cba-panel-ease),
    visibility 0s linear 0s;
}
.cba-banner__panel.is-leaving {
  opacity: 0;
  transform: translate3d(0, calc(var(--cba-banner-shift) * -0.7), 0);
}
.cba-banner[data-dir="back"] .cba-banner__panel.is-leaving {
  transform: translate3d(0, calc(var(--cba-banner-shift) * 0.7), 0);
}

@media (max-width: 860px) {
  .cba-banner__panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Splits stack asset under text, as the design requires. */
  .cba-banner__media { order: 2; }
  .cba-banner__text  { order: 1; }
}

.cba-banner__text {
  min-width: 0;
  max-width: var(--cba-measure);
}

.cba-banner__eyebrow {
  margin: 0 0 10px;
  font-size: var(--wp--preset--font-size--label, 0.8125rem);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--label, 0.08em);
  text-transform: uppercase;
  color: var(--cba-action);
}
.cba-banner__panel--lead .cba-banner__eyebrow { color: var(--cba-accent); }

.cba-banner__name {
  margin: 0 0 12px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  line-height: 1.12;
  /* The theme registers label, small, base, lead, display and figure only, so
     the two intermediate steps this component needs are stated here rather
     than read from a preset that does not exist. */
  font-size: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem);
  color: var(--cba-ink);
}
.cba-banner__panel--lead .cba-banner__name {
  font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
}
.cba-banner__link {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .cba-banner__link:hover { color: var(--cba-accent); }
}

.cba-banner__outcome {
  margin: 0 0 20px;
  color: var(--cba-body);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.6;
}

.cba-banner__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--cba-border);
}
.cba-banner__fact {
  padding: 12px 24px 12px 0;
  margin-right: 24px;
  border-right: 1px solid var(--cba-border);
}
.cba-banner__fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.cba-banner__facts dt {
  margin: 0 0 2px;
  font-size: var(--wp--preset--font-size--label, 0.8125rem);
  font-weight: 600;
  letter-spacing: var(--wp--custom--tracking--label, 0.08em);
  text-transform: uppercase;
  color: var(--cba-body);
}
.cba-banner__facts dd {
  margin: 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--lead);
  color: var(--cba-ink);
  font-variant-numeric: tabular-nums;
}

/* Mobile collapse for the fact row: a single column with the hairline dividers
   kept, exactly as the quick-facts component does. */
@media (max-width: 640px) {
  .cba-banner__facts { display: block; }
  .cba-banner__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid var(--cba-border);
  }
  .cba-banner__facts dt { margin: 0; }
}

.cba-banner__actions { margin: 0; }

/* Media slot. Aspect ratio is reserved so a real photograph drops in with no
   rebuild and no layout shift. */
.cba-banner__media {
  min-width: 0;
  border-radius: var(--cba-radius-md);
  overflow: hidden;
  background: var(--cba-surface);
  border-top: 3px solid var(--cba-action);
}
.cba-banner__panel--lead .cba-banner__media { border-top-color: var(--cba-accent); }
.cba-banner__panel--business .cba-banner__media { border-top-color: var(--cba-ink); }
.cba-banner__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  display: block;
}
.cba-banner__frame > img,
.cba-banner__frame > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Designed placeholder art. On palette, composed exactly where the photograph
   will sit, and visibly labelled so nobody mistakes it for finished work. */
.cba-art__bg { fill: var(--cba-surface); }
.cba-art__row { fill: none; stroke: var(--cba-action); stroke-width: 2.4; stroke-linecap: round; opacity: 0.5; }
.cba-banner__art--lead .cba-art__row { stroke: var(--cba-accent); }
.cba-banner__art--business .cba-art__row { stroke: var(--cba-ink); opacity: 0.35; }
.cba-art__node { fill: var(--cba-accent); opacity: 0.7; }
.cba-banner__art--lead .cba-art__node { fill: var(--cba-action); }

.cba-banner__art-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  z-index: 1;
  font-size: var(--wp--preset--font-size--label, 0.8125rem);
  letter-spacing: var(--wp--custom--tracking--label, 0.08em);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cba-body);
  background: var(--cba-surface);
  border: 1px dashed var(--cba-accent);
  border-radius: var(--cba-radius-sm);
  padding: 6px 10px;
}

/* Foot: controls plus the rotation progress rule. Its height is reserved from
   first paint, so nothing moves when JavaScript upgrades the block. */
.cba-banner__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  margin-top: clamp(24px, 3vw, 36px);
}
.cba-banner__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  visibility: hidden;
}
.cba-banner--ready .cba-banner__controls { visibility: visible; }
.cba-banner--static .cba-banner__toggle { display: none; }

.cba-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wp--custom--target--min, 44px);
  min-height: var(--wp--custom--target--min, 44px);
  padding: 0 12px;
  border: 1.5px solid var(--cba-border);
  border-radius: var(--cba-radius-pill);
  background: var(--cba-surface);
  color: var(--cba-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color var(--cba-dur) var(--cba-ease),
    color var(--cba-dur) var(--cba-ease),
    transform var(--cba-press) var(--cba-ease);
}
.cba-banner__btn svg { width: 18px; height: 18px; }
.cba-banner__btn svg[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cba-banner__btn:hover { border-color: var(--cba-accent); color: var(--cba-accent); }
}
.cba-banner__btn:active { transform: scale(0.94); }

.cba-banner__progress {
  flex: 1 1 auto;
  height: 2px;
  min-width: 60px;
  background: var(--cba-border);
  border-radius: var(--cba-radius-pill);
  overflow: hidden;
  visibility: hidden;
}
.cba-banner--ready .cba-banner__progress { visibility: visible; }
.cba-banner--static .cba-banner__progress { visibility: hidden; }
.cba-banner__progress-fill {
  display: block;
  height: 100%;
  background: var(--cba-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Entrance stagger. Applied by JavaScript only on a real panel change, so the
   server-rendered first panel never flashes on load. */
@media (prefers-reduced-motion: no-preference) {
  .cba-banner__panel.is-entering .cba-banner__text > * {
    animation: cba-banner-line 440ms var(--cba-panel-ease) both;
  }
  .cba-banner__panel.is-entering .cba-banner__text > *:nth-child(1) { animation-delay: 40ms; }
  .cba-banner__panel.is-entering .cba-banner__text > *:nth-child(2) { animation-delay: 90ms; }
  .cba-banner__panel.is-entering .cba-banner__text > *:nth-child(3) { animation-delay: 140ms; }
  .cba-banner__panel.is-entering .cba-banner__text > *:nth-child(4) { animation-delay: 190ms; }
  .cba-banner__panel.is-entering .cba-banner__text > *:nth-child(5) { animation-delay: 240ms; }
  .cba-banner__panel.is-entering .cba-banner__text > *:nth-child(6) { animation-delay: 290ms; }
  .cba-banner__panel.is-entering .cba-banner__media {
    animation: cba-banner-media 560ms var(--cba-panel-ease) both;
  }
}
@keyframes cba-banner-line {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes cba-banner-media {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

.cba-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   6. Reduced motion. Everything becomes instant.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cba-btn,
  .cba-btn:hover,
  .cba-btn:active,
  .cba-banner__btn,
  .cba-banner__btn:active,
  .cba-sticky-bar__call:active,
  .cba-module__chev,
  .cba-faq__chev {
    transform: none !important;
  }
  /* No spinner. The loading state becomes an instant, static dim instead. */
  .cba-btn__spin { display: none !important; }
  .cba-btn[data-cba-loading="true"] .cba-btn__label { opacity: 1; }
  .cba-btn[data-cba-loading="true"] { opacity: 0.7; }
  .cba-sticky-bar--enter { animation: none !important; }
  .cba-banner__panel,
  .cba-banner__panel.is-active,
  .cba-banner__panel.is-leaving {
    transition: none !important;
    transform: none !important;
  }
  .cba-banner__panel.is-entering .cba-banner__text > *,
  .cba-banner__panel.is-entering .cba-banner__media {
    animation: none !important;
  }
  .cba-banner__progress { visibility: hidden !important; }
}

/* =========================================================
   7. Print
   ========================================================= */

@media print {
  .cba-banner__foot { display: none !important; }
  .cba-banner__panel.is-active { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .cba-banner__art-label { display: none !important; }
}