/* ==========================================================================
   Estudio Digital — brand tokens
   These defaults are overridden at runtime by the Customizer (inline <style>).
   ========================================================================== */

:root {
  /*
   * Brand Guidelines v1.0 — 2026, section 08.
   * The previous palette led with orange; the new one has none. Navy, blue,
   * violet and magenta are the whole system.
   */
  --ed-blue:          #1e6bff;
  --ed-violet:        #7a2be2;
  --ed-accent:        #f038e0; /* magenta — the accent */
  --ed-accent-light:  #f766ea;
  --ed-accent-deep:   #b81aa2; /* magenta on paper fails contrast as text; this passes */

  /* Neutrals */
  --ed-ink:           #0a0e14;
  --ed-ink-soft:      #141922;
  --ed-paper:         #f5f5f2;
  --ed-paper-soft:    #ecece8; /* raised panels on the paper ground */
  --ed-muted:         #5f6672;
  /* The same role on an ink ground: light enough to read, quiet enough to
     stay secondary. Three different hand-picked greys were doing this. */
  --ed-on-dark-muted: #b9bcc6;
  --ed-hairline:      #dcdcd6;

  /* Card tints, sampled from the gradient. The lifecycle track applies these
     from JS as it scrolls; the static card grids use them directly, so
     both read from this one definition. */
  --ed-tint-1:        rgba(30, 107, 255, .12);  /* blue    */
  --ed-tint-2:        rgba(122, 43, 226, .12);  /* violet  */
  --ed-tint-3:        rgba(240, 56, 224, .11);  /* magenta */
  --ed-tint-4:        rgba(10, 14, 20, .07);    /* navy    */

  /* Signature gradient — 100°, navy → blue → violet → magenta. The guidelines
     give it one job: the mark, and one hero element per layout. */
  --ed-gradient:      linear-gradient(100deg, var(--ed-ink) 0%, var(--ed-blue) 38%, var(--ed-violet) 68%, var(--ed-accent) 100%);
  --ed-gradient-diag: linear-gradient(135deg, var(--ed-ink) 0%, var(--ed-blue) 38%, var(--ed-violet) 68%, var(--ed-accent) 100%);

  /*
   * Typography — Poppins for everything, IBM Plex Mono for labels, descriptors
   * and metrics. Both are open licensed and served from Google Fonts, which
   * also retires the Webflow-export faces (Aeonik, Ppneuemachina, Roobert)
   * that shipped with no licence to use them.
   */
  --ed-font-display:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ed-font-body:     'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ed-font-alt:      'Poppins', system-ui, sans-serif;
  --ed-font-mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion */
  --ed-ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --ed-dur:           0.6s;
}

/* --------------------------------------------------------------------------
   Brand utilities layered on top of the compiled layout stylesheet
   -------------------------------------------------------------------------- */

.ed-gradient-text,
.text-gradient {
  background: var(--ed-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ed-gradient-bg { background-image: var(--ed-gradient); }

.ed-gradient-rule {
  height: 2px;
  border: 0;
  background: var(--ed-gradient);
  opacity: .9;
}

/* Selection colour follows the accent */
::selection { color: #fff; background: var(--ed-accent); }

/* Header logo sizing lives in components.css — it has to load *after* the
   compiled stylesheet to win the cascade. */
.footer-logo-img { width: 100%; height: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   Accessibility & motion preferences
   -------------------------------------------------------------------------- */

.ed-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--ed-ink);
  color: #fff;
  font-family: var(--ed-font-body);
  border-radius: 0 0 8px 0;
}
.ed-skip-link:focus { left: 0; }

.ed-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.w-editor) [text-split] { opacity: 1 !important; }
  .preloader-wrap { display: none !important; }
  .cursor-wrapper { display: none !important; }
  body, .cursor-wrapper, a, .checkbox-label, .cf-checkbox-label { cursor: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keyboard focus that survives the "cursor: none" design */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ed-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Pointer devices only: the custom cursor design hides the native cursor.
   Restore it for touch and for coarse pointers so the site stays usable. */
@media (hover: none), (pointer: coarse) {
  body, .cursor-wrapper, a, .checkbox-label, .cf-checkbox-label { cursor: auto !important; }
  .cursor-wrapper { display: none !important; }
}

/* --------------------------------------------------------------------------
   Editorial content (blog posts, legal pages) — inherits the brand type scale
   -------------------------------------------------------------------------- */

.ed-prose {
  font-family: var(--ed-font-body);
  color: var(--ed-ink);
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 74ch;
}
.ed-prose > * + * { margin-top: 1.15em; }
/* Article headings use the same face as every other heading on the site. The
   display face is a techy, near-monospaced one that belongs on the footer
   wordmark and the submit-button letters, not on a paragraph heading — using it
   here made the blog look like it came from a different site. */
.ed-prose h2 { font-family: var(--ed-font-body); font-weight: 500; font-size: 2.1rem; line-height: 1.15; margin-top: 2em; }
.ed-prose h3 { font-family: var(--ed-font-body); font-weight: 500; font-size: 1.55rem; line-height: 1.2; margin-top: 1.6em; }
.ed-prose h4 { font-family: var(--ed-font-body); font-weight: 700; font-size: 1.2rem; margin-top: 1.4em; }
.ed-prose a { color: var(--ed-accent); text-decoration: underline; text-underline-offset: 3px; }
.ed-prose a:hover { color: var(--ed-purple); }
.ed-prose ul, .ed-prose ol { padding-left: 1.4em; }
.ed-prose li + li { margin-top: .45em; }
.ed-prose blockquote {
  border-left: 3px solid var(--ed-accent);
  padding-left: 1.2em;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ed-ink-soft);
}
.ed-prose img, .ed-prose figure img { max-width: 100%; height: auto; border-radius: 16px; }
.ed-prose figcaption { font-size: .9rem; color: var(--ed-muted); margin-top: .5em; }
.ed-prose pre {
  background: var(--ed-ink);
  color: #f5f5f5;
  padding: 1.2em 1.4em;
  border-radius: 14px;
  overflow-x: auto;
  font-size: .95rem;
}
.ed-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.ed-prose :not(pre) > code {
  background: #f4f4f4;
  padding: .15em .4em;
  border-radius: 5px;
}
.ed-prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ed-prose th, .ed-prose td { border: 1px solid var(--ed-hairline); padding: .7em .9em; text-align: left; }
.ed-prose th { background: #fafafa; font-weight: 600; }
.ed-prose hr { border: 0; height: 2px; background: var(--ed-gradient); margin: 2.5em 0; }

/* WordPress core alignment classes */
.alignwide  { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull  { max-width: none; width: 100%; }
.alignleft  { float: left;  margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}