/* Base — port of website-v5 src/lib/styled/global.ts (reset + body typography)
   plus the child-theme utilities: container, Gutenberg has-* restyles, hover
   sweep (hover-sweep.ts) and CSS-only entrance reveals (entrance-css.ts). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--ckl-blue) rgb(0 0 0 / 6%);
}

html::-webkit-scrollbar {
  width: 0.625rem;
}

html::-webkit-scrollbar-track {
  background: rgb(0 0 0 / 4%);
}

html::-webkit-scrollbar-thumb {
  background-color: var(--ckl-blue);
  border: 0.125rem solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--ckl-link-hover-on-dark);
}

body {
  margin: 0;
  font-family: var(--ckl-font-text);
  font-weight: var(--ckl-fw-text);
  color: var(--ckl-text);
  background-color: var(--ckl-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* `video` needs this as much as `img`: without it a width-constrained video
   keeps the height from its attributes and distorts. */
img,
video {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* ---------------------------------------------------------------- container */

.ckl-container {
  width: 90%;
  max-width: var(--ckl-container-max);
  margin-inline: auto;
}

/* ------------------------------------------- Gutenberg palette / font sizes
   The slugs are registered by the parent and baked into prod post content as
   has-* classes. Slugs stay; the values are remapped to the v5 system. */

.has-default-color { color: var(--ckl-dark); }
.has-white-color { color: var(--ckl-white); }
.has-blue-color { color: var(--ckl-blue); }
.has-blue-2-color { color: var(--ckl-blue); }
.has-grey-color { color: var(--ckl-text-muted); }
.has-cyan-color { color: var(--ckl-aqua-blue); }

.has-default-background-color { background-color: var(--ckl-dark); }
.has-white-background-color { background-color: var(--ckl-white); }
.has-blue-background-color { background-color: var(--ckl-blue); }
.has-blue-2-background-color { background-color: var(--ckl-blue); }
.has-grey-background-color { background-color: var(--ckl-gray); }
.has-cyan-background-color { background-color: var(--ckl-aqua-blue); }

.has-text-small-font-size { font-size: 0.875rem; }
.has-text-medium-font-size { font-size: 1.25rem; }
.has-text-large-font-size { font-size: 1.5rem; }
.has-text-x-large-font-size { font-size: 2.25rem; }
.has-title-font-size { font-size: 2.5rem; }
.has-title-small-font-size { font-size: 1.5rem; }
.has-title-medium-font-size { font-size: 3rem; }
.has-title-large-font-size { font-size: 3.5rem; }
.has-title-x-large-font-size { font-size: 4.5rem; }

/* ------------------------------------------------------------- hover sweep
   Port of hover-sweep.ts. A solid `to` layer grows from the left via
   background-size 0% → 100%. Configure per element with:
     --sweep-from / --sweep-to
   Text version clips to the glyphs; background version fills the box (the
   caller owns `transition` and composes var(--ckl-sweep-transition) into it). */

.ckl-sweep-text {
  color: var(--sweep-from, currentColor);
  transition: color 0.2s ease-in-out;
}

@media (hover: hover) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ckl-sweep-text {
      background-color: var(--sweep-from, currentColor);
      background-image: linear-gradient(var(--sweep-to), var(--sweep-to));
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 0% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: var(--ckl-sweep-transition);
    }

    .ckl-sweep-text:hover,
    .ckl-sweep-text:focus-visible,
    a:hover .ckl-sweep-text,
    a:focus-visible .ckl-sweep-text {
      background-size: 100% 100%;
    }
  }
}

.ckl-sweep-text:hover,
.ckl-sweep-text:focus-visible {
  color: var(--sweep-to, currentColor);
}

@media (prefers-reduced-motion: reduce) {
  .ckl-sweep-text {
    transition: none;
  }
}

/* -------------------------------------------------- CSS-only entrance reveals
   Port of entrance-css.ts — plays at first paint, no JS on the critical path.
   Stagger siblings with .ckl-entrance-delay-{1..4}. Absent under reduced
   motion, leaving content in its final visible state. */

@keyframes ckl-reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes ckl-reveal-up-sm {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes ckl-slide-up {
  from { transform: translateY(16px); }
  to { transform: none; }
}

@keyframes ckl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .ckl-entrance-up { animation: ckl-reveal-up 0.6s var(--ckl-ease-entrance) both; }
  .ckl-entrance-up-sm { animation: ckl-reveal-up-sm 0.6s var(--ckl-ease-entrance) both; }
  .ckl-entrance-slide { animation: ckl-slide-up 0.6s var(--ckl-ease-entrance) both; }
  .ckl-entrance-fade { animation: ckl-fade-in 0.6s var(--ckl-ease-entrance) both; }
  .ckl-entrance-delay-1 { animation-delay: 0.08s; }
  .ckl-entrance-delay-2 { animation-delay: 0.16s; }
  .ckl-entrance-delay-3 { animation-delay: 0.24s; }
  .ckl-entrance-delay-4 { animation-delay: 0.32s; }
}

/* --------------------------------------------------------------- tag/eyebrow */

.ckl-tag {
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- tunnel
   Generic canvas shell — each context sizes/positions its own .ckl-tunnel
   (hero: absolute inset; footer: relative strip). */

.ckl-tunnel {
  overflow: hidden;
}

.ckl-tunnel canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ------------------------------------------------------- Lenis smooth scroll
   Same rules website-v5 carries in src/lib/styled/global.ts. Lenis adds
   .lenis/.lenis-smooth to <html> in root mode (smooth-scroll.js);
   .lenis-stopped is toggled when lenis.stop() runs (mobile menu). Only
   present when Lenis is active, so native scroll under reduced motion is
   unaffected. */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* website-v5 ships this blanket rule (global.ts) so a wheel over a decorative
   embed still scrolls the page — v5 has no long-form embeds, so it never bit
   anything there. The blog DOES have real embeds inside post content, and this
   rule made every one of them non-interactive (no YouTube controls, no CodePen)
   whenever Lenis was active. Parity is kept; content embeds opt back in.
   Accepted consequence: a wheel over an embed scrolls the embed, not the page —
   which is what readers expect of an embed anyway. */
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-smooth .ckl-article__content iframe {
  pointer-events: auto;
}

/* --------------------------------------------------------- screen-reader only */

/* `.screen-reader-text` is WordPress core's own hook (search forms, comment
   labels, "Continue reading" spans, plugin markup). The parent theme defined it
   in base/style.css, which this theme dequeues — so that markup was rendering
   as fully visible text on the page. It shares the utility here rather than
   living in content.css, because core emits it on any template.
   The :focus reveal is the contract core expects, and it also un-breaks
   .ckl-skip-link (header.php), which was permanently invisible. */
.ckl-sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ckl-sr-only:focus,
.screen-reader-text:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100001;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  padding: 0.9rem 1.4rem;
  background-color: var(--ckl-blue);
  color: var(--ckl-white);
  font-family: var(--ckl-font-tag);
  font-weight: var(--ckl-fw-tag);
  font-size: 0.7875rem; /* 18 */
  text-transform: uppercase;
}