/*
 * Nova Base CSS
 * Minimal reset and fallback styles.
 * Most styling is handled by Tailwind CDN.
 * This file provides graceful degradation if CDN fails.
 */

/* Base reset (in case Tailwind CDN fails) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--nova-font-body, system-ui, -apple-system, sans-serif);
  color: var(--nova-color-body, #595959);
  line-height: 1.6;
}

/* Tailwind v4's preflight resets h1-h6 to `font-size: inherit; font-weight: inherit;`,
which leaves unclassed headings (especially server-rendered rich text inside
block.settings.text) rendering at body size + body weight. The rules below sit in the
implicit unlayered scope, which has higher cascade priority than Tailwind's
`@layer base` preflight, so these defaults win without needing `!important`. Snippets
that author their own headings with explicit Tailwind utilities (`text-3xl font-bold`)
still override per-element via specificity. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--nova-font-heading, system-ui, -apple-system, sans-serif);
  color: var(--nova-color-heading, #161e2a);
  line-height: 1.2;
}

h1 {
  font-size: 2.25rem;
  font-weight: 700;
}
h2 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25;
}
h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}
h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}
h5 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

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

/* Ensure blocks are visible even without Tailwind */
.block {
  display: block;
}

/* Restore paragraph spacing inside block wrappers — Tailwind preflight zeroes
margins on every element. Note the specificity: `.nova-block p` is (0,1,1),
which outranks an unmodified `.mb-0` (0,1,0) — and because this rule is
unlayered while Tailwind v4 utilities live inside `@layer utilities`, layer
order also favors it regardless of source order. Snippets that need a
different bottom margin on a paragraph must use the v4 important-modifier
suffix to win, e.g. `class="mb-0!"` or `class="mb-2!"`. */
.nova-block p {
  margin-bottom: 1rem;
}

/* Smooth transitions */
* {
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0ms;
}

a,
button {
  transition-duration: 150ms;
}

/*
 * Wistia container — port from app/assets/stylesheets/components/_wistia_video.scss
 * for rendering parity with Encore. The shared _wistia_video.html.erb /
 * _wistia_audio.html.erb partials wrap the .wistia_embed div in a
 * .kjb-video-responsive container; without these rules the container has no
 * intrinsic height (the embed div is just ` `) so Wistia's E-v1.js
 * injects the player iframe into a 0×0 box and the controls are invisible.
 *
 * The 56.25% aspect ratio is for video; _wistia_audio.html.erb's inline
 * <style> block overrides padding-block-end on .wistia-audio-theme-embed
 * (a class applied alongside .kjb-video-responsive on audio) so audio
 * collapses to a fixed 50px-tall player. Both kjb-products partials rely
 * on the absolute-positioned .wistia_embed inside, which is what makes the
 * iframe fill the responsive box.
 */
.kjb-video-responsive {
  position: relative;
  display: block;
  overflow: hidden;
  height: 0;
  padding-block-end: 56.25%;
}

.kjb-video-responsive .wistia_embed {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
}