@import "./theme.css";

:root {
  --mn-element-gap-sm: 1rem;
  --mn-element-gap-md: 2rem;
  --mn-element-gap-lg: 3rem;
  --mn-column-gap-sm: 1rem;
  --mn-column-gap-md: 2rem;
  --mn-column-gap-lg: 3rem;
}

.mn-site {
  --mn-color-primary: #e11c24;
  --mn-color-secondary: #0b1f3a;
  --mn-color-accent: #e11c24;
  --mn-navy: #0f172a;
  --mn-navy-2: #0f172a;
  --mn-font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
  --mn-font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --mn-radius: 1rem;
  --mn-spacing: 1rem;
  --mn-section-py: clamp(4rem, calc(var(--mn-spacing) * 5 + 3vw), 7.5rem);
  background: #ffffff;
  color: #0f172a;
  font-family: var(--mn-font-body);
  text-rendering: optimizeLegibility;
}

/* Brand marketing sites are always light. Force form controls to render as
   light fields regardless of the visitor's color-mode state — @nuxt/ui's
   UInput/UTextarea otherwise inherit dark-mode tokens and render as dark slate
   boxes inside the white contact card (illegible). Scoped to real form controls. */
.mn-site form input[type="text"],
.mn-site form input[type="email"],
.mn-site form input[type="tel"],
.mn-site form input[type="url"],
.mn-site form input[type="number"],
.mn-site form input:not([type]),
.mn-site form textarea,
.mn-site form select {
  background-color: #ffffff !important;
  color: var(--mn-navy) !important;
  border: 1px solid rgb(203 213 225) !important;
  box-shadow: none !important;
}

.mn-site form input::placeholder,
.mn-site form textarea::placeholder {
  color: rgb(148 163 184) !important;
  opacity: 1;
}

.mn-site form input:focus,
.mn-site form textarea:focus,
.mn-site form select:focus {
  border-color: var(--mn-color-accent) !important;
  outline: none !important;
}

.mn-site h1,
.mn-site h2,
.mn-site h3,
.mn-site h4,
.mn-site h5,
.mn-site h6 {
  font-family: var(--mn-font-heading);
  letter-spacing: 0;
}

.mn-site h1 {
  font-size: clamp(2.75rem, 6vw, 5.75rem);
  line-height: 0.95;
}

.mn-site h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
}

.mn-site h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.15;
}

.mn-section {
  padding-block: var(--mn-section-pt, var(--mn-section-py)) var(--mn-section-pb, var(--mn-section-py));
}

/* A Columns block rendered as a TAB PANEL (BlockTabs) already sits inside a section, so
   the page-section rhythm above was applied twice — once by the panel wrapper and again
   by each nested block's own spacing tier (TKT-1788302442767). The class is repeated
   deliberately to raise specificity to (0,2,0), matching .mn-column-stack-flush below. */
.mn-section-flush.mn-section-flush {
  padding-block: 0;
}

/* Inside a column, the Columns block's "Space between blocks in a column"
   (stack_gap) is the ONLY vertical rhythm between the stacked blocks — see the
   `.mn-column-stack > * + *` margin below.

   Every nested block root ALSO carries its own page-level section padding:
   `.mn-section` (BlockList, BlockCta, BlockForm, ...), a `.mn-section-spacing-*`
   tier (BlockRichText, BlockImage, BlockFeatures), or a Tailwind `py-*`. Stacked
   on top of the gap, that padding made spacing inside one column differ block by
   block — BlockHeading renders `py-0` and looked right while a rich text
   (`mn-section-spacing-compact`/`-normal`) or a list (`mn-section`) beside it blew
   out (TKT-1788452191703, DevTools screenshot on the ticket). A page-section
   rhythm is meaningless for something that is not a page section, so flush it for
   the whole stack rather than only for the stack_gap = none tier this rule used to
   cover (`.mn-column-stack-flush`, TKT-1787354807264 — now subsumed; the class is
   still emitted by BlockColumns.vue and its `--mn-column-stack-gap: 0` already
   zeroes the sibling margin).

   Author-set "Padding top"/"Padding bottom" on a nested block still wins: those
   land as an INLINE style on the wrapper div BlockColumns emits around the block,
   and inline beats any selector here.

   The class is repeated deliberately to raise specificity to (0,2,0). Several
   block roots carry a Tailwind `py-*` utility (BlockWorkflow `py-16`,
   BlockCollectionList `py-16`, BlockEntryDetail `py-12`, BlockCategoryMenu
   `py-6`, BlockCart/BlockCheckout `py-16`) at (0,1,0); a single-class rule here
   would merely tie with those and the winner would depend on stylesheet order.

   Guarded by apps/studio-web/tests/Unit/components/Website/PageEditor/Blocks/
   BlockColumnsStackPaddingFlush.test.ts */
.mn-column-stack.mn-column-stack > * {
  padding-top: 0;
  padding-bottom: 0;
}

.mn-column-stack > * + * {
  margin-top: var(--mn-column-stack-gap, var(--mn-element-gap-sm, 1rem));
}

/* Tenant-selectable vertical spacing tiers for content blocks (rich text,
   single image, feature grids) via the Style-tab "spacing" field
   (style.spacing = compact | normal | spacious). Consumed by
   BlockRichText.vue, BlockImage.vue, and BlockFeatures.vue (and any future
   block wanting tenant-editable vertical rhythm) — replaces the previous
   single fixed .mn-section-snug tier. Does not affect blocks still using
   .mn-section directly.

   Each tier reads the tenant's Website Settings -> Layout -> "Section Spacing
   <tier>" value, published by themeConfigToCssVars() as
   --mn-section-spacing-<tier>. The clamp is the fallback for a render context
   that never emitted the theme variables; it must NOT be the hard-coded value,
   or the setting is inert (TKT-1788376891742). Guarded by
   apps/studio-web/tests/Unit/components/Website/PageEditor/Blocks/BlockSectionSpacingTokens.test.ts */
.mn-section-spacing-compact {
  padding-block: var(--mn-section-spacing-compact, clamp(24px, 4vh, 48px));
}

.mn-section-spacing-normal {
  padding-block: var(--mn-section-spacing-normal, clamp(40px, 7vh, 80px));
}

.mn-section-spacing-spacious {
  padding-block: var(--mn-section-spacing-spacious, clamp(72px, 12vh, 140px));
}

.mn-section-alt {
  background:
    radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--mn-color-primary) 8%, transparent), transparent 28rem),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* Force the brand red on primary hero CTAs. @nuxt/ui's `primary` token resolves to
   navy in the render context, so a color="primary" solid button rendered navy-on-navy
   and read as low-contrast rather than a call to action. This pins it to the brand red. */
.mn-site .mn-cta-primary {
  background-color: var(--mn-color-primary) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.mn-site .mn-cta-primary:hover {
  background-color: color-mix(in srgb, var(--mn-color-primary) 86%, #000) !important;
}

.mn-accent-underline {
  position: relative;
  padding-bottom: 1.85rem;
}

.mn-accent-underline::after {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  width: 5rem;
  height: 0.3rem;
  content: "";
  background: var(--mn-color-accent);
  border-radius: 999px;
  transform: translateX(-50%);
}

.mn-reveal {
  opacity: 1;
  transform: none;
}

html.mn-reveal-active .mn-reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 600ms ease, transform 600ms ease;
}

html.mn-reveal-active .mn-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  html.mn-reveal-active .mn-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.mn-prose {
  color: inherit;
  line-height: 1.75;
}

.mn-prose :where(h1, h2, h3, h4) {
  color: inherit;
  font-family: var(--mn-font-heading);
  font-weight: 800;
  line-height: 1.15;
  margin: 1.5em 0 0.55em;
}

.mn-prose :where(p, ul, ol, blockquote) {
  margin: 0 0 1em;
}

.mn-prose :where(ul, ol) {
  padding-left: 1.25rem;
  list-style-position: outside;
}

.mn-prose :where(ul) {
  list-style-type: disc;
}

.mn-prose :where(ol) {
  list-style-type: decimal;
}

.mn-prose :where(li) {
  margin: 0.25em 0;
}

.mn-prose :where(figure) {
  margin: 2rem 0;
}

.mn-prose :where(img) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: var(--mn-radius);
}

.mn-prose :where(figure img) {
  margin: 0 auto;
}

.mn-prose :where(figcaption) {
  margin-top: 0.75rem;
  color: rgb(100 116 139);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}

.mn-prose :where(p, li, blockquote) a {
  color: var(--mn-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Author-selectable divider colour / thickness (TKT-1787689290122).
   USeparator paints its line as a border on a CHILD element, so an inline style on the
   block wrapper can never reach it, and a Tailwind arbitrary-value class (border-[#hex])
   cannot be built from runtime data because the JIT compiler never sees it. The renderer
   therefore sets --mn-divider-color / --mn-divider-thickness on the wrapper (custom
   properties inherit) and passes these stable classes through USeparator's `ui.border`.
   Never use the `border-width` shorthand here: preflight zeroes the other three sides, so
   a shorthand would turn the rule into a box instead of a line. */
.mn-divider-line {
  border-color: var(--mn-divider-color) !important;
}

.mn-divider-line-h {
  border-top-width: var(--mn-divider-thickness) !important;
}

.mn-divider-line-v {
  border-left-width: var(--mn-divider-thickness) !important;
}