/* Code Canvas Academy — design system fallback.
   The shared CodeCanvas header prints the same rules on every page; this copy keeps Academy pages
   complete when that header is not active. Keep both in step. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/wp-content/plugins/codecanvas-academy/assets/fonts/instrument-sans-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata Display";
  src: url("/wp-content/plugins/codecanvas-academy/assets/fonts/literata-display-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand */
  --ea-navy-950: #070d28;
  --ea-navy-900: #0b1437;
  --ea-navy: #16245f;
  --ea-navy-700: #1d2e75;
  --ea-navy-600: #283b8c;
  --ea-royal: #2d3fb0;
  --ea-gold: #fbbc05;
  --ea-gold-300: #ffd76a;
  --ea-gold-100: #fff3cf;
  --ea-gold-ink: #694c00;

  /* Neutrals */
  --ea-ink: #0e1533;
  --ea-text: #2b3049;
  --ea-muted: #5a6079;
  --ea-line: #e7e2d6;
  --ea-line-cool: #e1e5f0;
  --ea-paper: #f7f4ec;
  --ea-paper-2: #f0eadc;
  --ea-mist: #f2f4fa;
  --ea-surface: #ffffff;
  --ea-success: #1c6b45;
  --ea-success-bg: #e5f3eb;
  --ea-danger: #b42318;

  /* Shape and depth */
  --ea-radius-xs: 8px;
  --ea-radius-sm: 12px;
  --ea-radius: 18px;
  --ea-radius-lg: 24px;
  --ea-radius-xl: 32px;
  --ea-shadow-xs: 0 1px 2px rgba(11, 20, 55, .06);
  --ea-shadow-sm: 0 1px 2px rgba(11, 20, 55, .05), 0 6px 16px -8px rgba(11, 20, 55, .12);
  --ea-shadow: 0 2px 6px rgba(11, 20, 55, .04), 0 18px 44px -20px rgba(11, 20, 55, .24);
  --ea-shadow-lg: 0 6px 14px rgba(11, 20, 55, .05), 0 34px 80px -30px rgba(11, 20, 55, .38);

  /* Type */
  --ea-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ea-serif: "Literata Display", "Literata", Georgia, "Times New Roman", serif;

  /* Layout rhythm */
  --ea-container: 1240px;
  --ea-gutter: clamp(20px, 4vw, 40px);
  --ea-section: clamp(72px, 8.5vw, 120px);
  --ea-section-sm: clamp(48px, 6vw, 80px);

  /* Motion */
  --ea-ease: cubic-bezier(.16, 1, .3, 1);
  --ea-ease-water: cubic-bezier(.45, .05, .2, 1);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--ea-sans);
  color: var(--ea-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ea-gold-100); color: var(--ea-navy-900); }

/* -------------------------------------------------------------------------
   Buttons — one family. The contrasting brand colour rises like water on
   hover/focus: navy buttons fill with gold, gold buttons with navy,
   white/outline buttons with navy. Two rotating layers form the wave edge.
   ------------------------------------------------------------------------- */
.ea-btn {
  --ea-btn-bg: var(--ea-navy);
  --ea-btn-fg: #fff;
  --ea-btn-fg-hover: var(--ea-navy-900);
  --ea-btn-border: transparent;
  --ea-btn-water: var(--ea-gold);
  --ea-btn-water-2: var(--ea-gold-300);
  --ea-btn-shadow: 0 10px 24px -14px rgba(22, 36, 95, .75);
  --ea-btn-h: 50px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--ea-btn-h);
  margin: 0;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ea-btn-bg);
  color: var(--ea-btn-fg);
  box-shadow: inset 0 0 0 1.5px var(--ea-btn-border), var(--ea-btn-shadow);
  font: 600 15px/1.2 var(--ea-sans);
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .4s var(--ea-ease) .08s, box-shadow .4s var(--ea-ease), transform .45s var(--ea-ease);
}
/* The Hello Elementor reset paints every button pink on hover/focus; keep brand surfaces. */
.ea-btn:focus { background: var(--ea-btn-bg); color: var(--ea-btn-fg); border: 0; }
/* Hello's theme.css underlines links inside page content (.page-content a). */
a.ea-btn,
a.ea-btn:hover,
a.ea-link,
a.ea-link:hover { text-decoration: none; }
.ea-btn::before,
.ea-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 100%;
  width: max(260%, 240px);
  aspect-ratio: 1;
  margin-left: calc(max(260%, 240px) / -2);
  border-radius: 40% 49% 43% 48%;
  background: var(--ea-btn-water);
  translate: 0 0;
  /* Hidden at rest: the water drains, then fades out, so a turned shape never peeks into a resting button. */
  opacity: 0;
  transition: translate .95s var(--ea-ease-water) .04s, opacity .3s linear .65s;
  animation: ea-water 6s linear infinite paused;
  pointer-events: none;
}
/* Lighter leading wave, beneath the main tide. */
.ea-btn::after {
  z-index: -2;
  border-radius: 47% 41% 46% 44%;
  background: var(--ea-btn-water-2);
  transition: translate .8s var(--ea-ease-water), opacity .3s linear .5s;
  animation-duration: 9s;
  animation-direction: reverse;
}
.ea-btn:focus-visible {
  outline: 2px solid var(--ea-gold);
  outline-offset: 3px;
}
.ea-btn:focus-visible,
.ea-btn.is-filled { color: var(--ea-btn-fg-hover); }
.ea-btn:focus-visible::before,
.ea-btn:focus-visible::after,
.ea-btn.is-filled::before,
.ea-btn.is-filled::after {
  translate: 0 calc(-1 * var(--ea-btn-h) - 9%);
  opacity: 1;
  transition-delay: .04s, 0s;
  transition-duration: .95s, .2s;
  animation-play-state: running;
}
.ea-btn:focus-visible::after,
.ea-btn.is-filled::after { transition-delay: 0s, 0s; transition-duration: .8s, .2s; }
@media (hover: hover) and (pointer: fine) {
  .ea-btn:hover { color: var(--ea-btn-fg-hover); }
  .ea-btn:hover::before,
  .ea-btn:hover::after {
    translate: 0 calc(-1 * var(--ea-btn-h) - 9%);
    opacity: 1;
    transition-delay: .04s, 0s;
    transition-duration: .95s, .2s;
    animation-play-state: running;
  }
  .ea-btn:hover::after { transition-delay: 0s, 0s; transition-duration: .8s, .2s; }
}
.ea-btn:active { transform: scale(.985); }
.ea-btn svg { flex: none; width: 18px; height: 18px; }
.ea-btn[disabled],
.ea-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ea-btn[aria-busy="true"] { cursor: progress; }
.ea-btn[aria-busy="true"]::before { opacity: 1; transition-delay: 0s, 0s; transition-duration: .5s, .2s; animation: ea-water 1.6s linear infinite; translate: 0 calc(-.5 * var(--ea-btn-h) - 4%); }

/* Arrow chip inside a button */
.ea-btn__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: -12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  transition: background-color .4s var(--ea-ease) .08s, translate .45s var(--ea-ease);
}
.ea-btn__icon svg { width: 15px; height: 15px; }
.ea-btn:hover .ea-btn__icon,
.ea-btn:focus-visible .ea-btn__icon { background: rgba(11, 20, 55, .1); translate: 2px 0; }

/* Variants */
.ea-btn--gold {
  --ea-btn-bg: var(--ea-gold);
  --ea-btn-fg: var(--ea-navy-900);
  --ea-btn-fg-hover: #fff;
  --ea-btn-water: var(--ea-navy);
  --ea-btn-water-2: var(--ea-navy-600);
  --ea-btn-shadow: 0 10px 24px -14px rgba(160, 112, 0, .8);
}
.ea-btn--gold .ea-btn__icon { background: rgba(11, 20, 55, .1); }
.ea-btn--gold:hover .ea-btn__icon,
.ea-btn--gold:focus-visible .ea-btn__icon { background: rgba(255, 255, 255, .16); }
.ea-btn--outline {
  --ea-btn-bg: transparent;
  --ea-btn-fg: var(--ea-navy);
  --ea-btn-fg-hover: #fff;
  --ea-btn-border: rgba(22, 36, 95, .26);
  --ea-btn-water: var(--ea-navy);
  --ea-btn-water-2: var(--ea-navy-600);
  --ea-btn-shadow: 0 0 0 0 transparent;
}
.ea-btn--light {
  --ea-btn-bg: #fff;
  --ea-btn-fg: var(--ea-navy);
  --ea-btn-fg-hover: #fff;
  --ea-btn-border: rgba(22, 36, 95, .12);
  --ea-btn-water: var(--ea-navy);
  --ea-btn-water-2: var(--ea-navy-600);
  --ea-btn-shadow: 0 8px 20px -14px rgba(11, 20, 55, .4);
}
.ea-btn--outline .ea-btn__icon,
.ea-btn--light .ea-btn__icon { background: rgba(22, 36, 95, .08); }
.ea-btn--outline:hover .ea-btn__icon,
.ea-btn--light:hover .ea-btn__icon,
.ea-btn--outline:focus-visible .ea-btn__icon,
.ea-btn--light:focus-visible .ea-btn__icon { background: rgba(255, 255, 255, .16); }
/* On navy surfaces */
.ea-btn--ghost {
  --ea-btn-bg: transparent;
  --ea-btn-fg: #fff;
  --ea-btn-fg-hover: var(--ea-navy-900);
  --ea-btn-border: rgba(255, 255, 255, .34);
  --ea-btn-shadow: 0 0 0 0 transparent;
}
.ea-btn--ghost .ea-btn__icon { background: rgba(255, 255, 255, .12); }
.ea-btn--sm { --ea-btn-h: 42px; gap: 8px; padding: 0 18px; font-size: 14px; }
.ea-btn--sm .ea-btn__icon { width: 24px; height: 24px; margin-right: -8px; }
.ea-btn--lg { --ea-btn-h: 56px; padding: 0 30px; font-size: 16px; }
.ea-btn--block { display: flex; width: 100%; }
.ea-btn--square { width: var(--ea-btn-h); padding: 0; }

/* -------------------------------------------------------------------------
   Text links — underline drains to the right, then refills from the left.
   ------------------------------------------------------------------------- */
.ea-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  color: var(--ea-navy);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1.5px;
  transition: color .3s var(--ea-ease), background-size .45s var(--ea-ease), background-position 0s .45s;
}
.ea-link svg { width: 15px; height: 15px; flex: none; transition: translate .35s var(--ea-ease); }
.ea-link:hover,
.ea-link:focus-visible { color: var(--ea-royal); background-size: 0 1.5px; background-position: 100% 100%; }
.ea-link:hover svg,
.ea-link:focus-visible svg { translate: 2px -2px; }
.ea-link--light { color: #fff; }
.ea-link--light:hover,
.ea-link--light:focus-visible { color: var(--ea-gold); }

/* Small labels */
.ea-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--ea-mist);
  color: var(--ea-navy);
  font: 600 12px/1.3 var(--ea-sans);
  letter-spacing: .01em;
  white-space: nowrap;
}
.ea-badge--gold { background: var(--ea-gold-100); color: var(--ea-gold-ink); }
.ea-badge--success { background: var(--ea-success-bg); color: var(--ea-success); }
.ea-badge--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--ea-line); color: var(--ea-muted); }
.ea-badge::before { content: none; }
.ea-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

@keyframes ea-water { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .ea-btn,
  .ea-btn::before,
  .ea-btn::after,
  .ea-btn__icon,
  .ea-link,
  .ea-link svg { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* Academy outline icons and helpers */
.cca-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.cca-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }