/*
 * 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 font-family / line-height
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`. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--nova-font-heading, system-ui, -apple-system, sans-serif);
  line-height: 1.2;
}

/* Heading color is in @layer base so Tailwind utility classes (text-white,
text-heading, text-[#hex], etc.) can override it on dark-background sections.
Unlayered heading-color rules win against @layer utilities regardless of
specificity, which silently broke `text-white` on dark heroes. */
@layer base {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--nova-color-heading, #161e2a);
  }
}

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;
}

/* Restore default rich-text element styling inside block wrappers. Tailwind
preflight zeroes list bullets/numbers, link underlines, blockquote borders,
and font-weight/style on inline emphasis — useful for designer-controlled
markup but wrong for author-entered rich text where the RTE produces
semantic <ul>/<ol>/<blockquote>/<strong> tags expecting browser defaults.

Placed in `@layer base` so any Tailwind utility class on a specific element
(e.g., `list-none` on a carousel track) wins the cascade — `@layer utilities`
beats `@layer base` regardless of source order or specificity. That way these
defaults apply only where the snippet didn't author an explicit override. */
@layer base {
  /* `:not([class])` excludes structural lists with authored classes
  (block_link_list's nav <ul>, block_carousel's slide track, block_course_outline's
  <ol>, etc.) so only WYSIWYG-emitted rich-text lists get the reset. Mirrors
  the same pattern as the `a:not([class])` rule below.

  `list-style: revert` restores the UA stylesheet's depth-aware markers
  (disc → circle → square for nested ul; decimal for ol). No explicit
  `list-style-type` — that would flatten nesting. */
  .nova-block ul:not([class]),
  .nova-block ol:not([class]) {
    list-style: revert;
    padding-inline-start: 1.5rem;
    margin-block: 0.75rem;
  }
  /* `li` margin only inside class-less (rich-text) lists. Without the
  parent combinator, structural lists' class-less `<li>` children would
  pick up this margin and double up with their parent's `gap-*` utility. */
  .nova-block ul:not([class]) > li,
  .nova-block ol:not([class]) > li {
    margin-block: 0.25rem;
  }
  .nova-block strong,
  .nova-block b {
    font-weight: 700;
  }
  .nova-block em,
  .nova-block i {
    font-style: italic;
  }
  .nova-block blockquote {
    border-inline-start: 4px solid var(--nova-color-body-secondary, #888);
    padding-inline-start: 1rem;
    margin-block: 1rem;
    font-style: italic;
  }
  .nova-block code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    background: rgb(0 0 0 / 0.06);
    padding: 0.125em 0.375em;
    border-radius: 0.25rem;
    font-size: 0.9em;
  }
  .nova-block hr {
    border: none;
    border-top: 1px solid currentColor;
    opacity: 0.2;
    margin-block: 1.5rem;
  }
}

/* Rich-text links use the brand accent via the existing --nova-color-accent
custom prop so merchant brand color flows through. Unlayered so it beats the
unlayered `a { color: inherit; text-decoration: none }` reset above —
`@layer` rules always lose to unlayered rules regardless of specificity, so
this rule can't live in `@layer base` with the others. `:not([class])`
excludes classed anchors (button-styled CTAs, etc.) so utility classes
authored on an anchor are left alone without needing a `!` modifier. */
.nova-block a:not([class]) {
  color: var(--nova-color-accent, currentColor);
  text-decoration: underline;
}

/* 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 `&nbsp;`) 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;
}