/* ========================================================================== 
   MotoJoy — shared Gutenberg content

   This file is loaded on singular front-end views and inside the block editor.
   It owns reusable core-block presentation; editor-only canvas affordances live
   in editor.css. Values come from theme.json-generated variables.
   ========================================================================== */

/* The PHP page shell is the wide frame; ordinary root blocks use the content
   measure. WooCommerce system pages retain their integration-owned widths.

   `.motojoy-controlled-content` is emitted by inc/editor.php from the SAME
   predicate that governs the editor contract. The previous
   `body:not(.woocommerce-page)` proxy disagreed with that list in both
   directions — Terms is exempt in PHP but has no woocommerce-page class, and
   Shop has the class but is not singular — so the decision is made once now.

   The alignment classes are excluded from the generic rule rather than fought
   on specificity: `> :not(.alignleft):not(.alignright)` was (0,4,1) and matched
   .alignwide/.alignfull too, beating the (0,3,1) rule below it and silently
   capping every wide and full block at the content measure. */
.motojoy-controlled-content .page-article > .page-header,
.motojoy-controlled-content
  .entry-content
  > :not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
  max-width: var(--wp--custom--width-content);
  margin-inline: auto;
}

.motojoy-controlled-content .page-article > .page-header {
  margin-bottom: var(--wp--preset--spacing--6);
}

/* Wide content is framed; full-bleed content is not. These were previously
   capped together at --width-wide, which made an alignfull section impossible
   — it could never reach the viewport edge. design-system.md §5.2 gives
   `wide` the "structured content at very large viewports" role and reserves
   full alignment for media and planes, which take the whole width.

   .alignfull needs no rule at all: core's has-global-padding mechanism
   (class-wp-theme-json.php:3270-3272) already cancels the root padding with
   negative margins. Adding a max-width here would fight it.

   Wide content shares the header's content edge: the wide column minus the
   gutter on each side, so it never sits outside the logo line. */
.motojoy-controlled-content .entry-content > .alignwide {
  max-width: calc(var(--wp--custom--width-wide) - 2 * var(--wp--custom--gutter));
  margin-inline: auto;
}

/* Reading pages (legal, policy, warranty) narrow the whole column, title and
   buttons included, so every element shares one left edge. 36rem at the
   reading size is ~75 characters per line in Manrope; the 72rem content
   measure ran 160–200. The class comes from motojoy_is_reading_page() and also
   covers the Terms page, which is not controlled content. Same specificity as
   the controlled rule above, so source order decides. */
.motojoy-reading-page .page-article > .page-header,
.motojoy-reading-page
  .entry-content
  > :not(.alignleft):not(.alignright):not(.alignwide):not(.alignfull) {
  max-width: var(--wp--custom--width-reading);
  margin-inline: auto;
}

.motojoy-reading-page .entry-content {
  font-size: var(--wp--custom--text-reading);
}

/* Terms is an HTML block whose headings sit inside <section>s, out of reach
   of the root heading rhythm below. */
.motojoy-reading-page .entry-content > section > :is(h2, h3) {
  margin-top: var(--wp--preset--spacing--6);
}

.motojoy-reading-page .entry-content > section > h2 + h3 {
  margin-top: var(--wp--preset--spacing--4);
}

.motojoy-reading-page .entry-content > section > h4 {
  margin-top: var(--wp--preset--spacing--5);
}

/* A full-bleed opening section must meet the header, with no band of page
   background above it. main.css gives .site-main a vertical rhythm that is
   right for text-led pages and wrong for a hero, which owns its own padding.

   Conditioned on the content actually starting with a full-bleed block rather
   than on a template-level class, so an ordinary information page keeps its
   breathing room and any future full-bleed opener gets this for free. The
   inherited homepage solved the same problem with a hardcoded
   .site-main--flush class, which is the crutch this replaces. */
.motojoy-controlled-content
  .site-main:has(> .page-article > .entry-content > .alignfull:first-child) {
  padding-block-start: 0;
}

/* Root content rhythm matches the PHP-rendered .entry-content flow. Nested
   Group and Columns blocks use their controlled block-gap presets instead. */
.entry-content > *,
.editor-styles-wrapper .is-root-container > * {
  margin-bottom: var(--wp--preset--spacing--4);
}

/* Consecutive full-bleed sections stack flush. The rhythm above is text-flow
   spacing; a designed section already carries its own padding, so inheriting
   it puts a band of page background between two planes meant to meet. A
   section that wants separation sets its own margin (the category strip uses
   --section-gap).

   Scoped to a full-bleed block followed by another one, so a section followed
   by ordinary prose keeps the gap prose needs. Placed directly after the rule
   it narrows so source order reinforces the specificity. */
.motojoy-controlled-content .entry-content > .alignfull:has(+ .alignfull),
.editor-styles-wrapper .is-root-container > .alignfull:has(+ .alignfull) {
  margin-bottom: 0;
}

.entry-content > h2,
.entry-content > h3,
.editor-styles-wrapper .is-root-container > h2,
.editor-styles-wrapper .is-root-container > h3 {
  margin-top: var(--wp--preset--spacing--6);
}

/* NESTED rhythm. main.css sets `p, ul, ol, figure { margin-bottom: 1rem }`
   site-wide, but main.css is never loaded in the editor, so a paragraph inside
   a Group or Columns block picked up that margin on the frontend and not in the
   canvas — the author laid out a section that published ~50% taller than it
   looked. Restating it inside the content boundary gives both contexts the same
   rhythm. Same value: --spacing-md aliases --wp--preset--spacing--4. */
:where(.entry-content, .editor-styles-wrapper)
  :where(p, ul, ol, figure, .wp-block-image) {
  margin-bottom: var(--wp--preset--spacing--4);
}

/* Approved Button styles replace Core's generic outline variant. The default
   style remains the ink primary action defined in theme.json. */
:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-brand
  > .wp-block-button__link {
  color: var(--wp--preset--color--text-on-dark);
  background: var(--wp--preset--color--brand);
}

:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-brand
  > .wp-block-button__link:hover,
:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-brand
  > .wp-block-button__link:focus-visible {
  background: var(--wp--preset--color--brand-hover);
}

:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-secondary
  > .wp-block-button__link {
  color: var(--wp--preset--color--ink);
  background: transparent;
  border: 1px solid var(--wp--preset--color--border);
}

:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-secondary
  > .wp-block-button__link:hover,
:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-secondary
  > .wp-block-button__link:focus-visible {
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--surface);
  border-color: var(--wp--preset--color--ink);
}

:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-ghost
  > .wp-block-button__link {
  color: var(--wp--preset--color--ink);
  background: transparent;
  border-color: transparent;
}

:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-ghost
  > .wp-block-button__link:hover,
:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-ghost
  > .wp-block-button__link:focus-visible {
  color: var(--wp--preset--color--ink);
  text-decoration: underline;
  background: transparent;
}

:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-on-ink
  > .wp-block-button__link {
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--text-on-dark);
}

:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-on-ink
  > .wp-block-button__link:hover,
:where(.entry-content, .editor-styles-wrapper)
  .wp-block-button.is-style-motojoy-on-ink
  > .wp-block-button__link:focus-visible {
  color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--surface);
}

/* main.css intentionally resets site lists for navigation and components.
   Restore semantic markers only for editorial List blocks and plain legacy
   lists inside the content boundary.

   SPECIFICITY: this rule must OUTRANK `ul, ol { list-style: none; padding: 0 }`
   in main.css, which is (0,0,1). :where() contributes zero, so wrapping both
   halves in it produced a (0,0,0) selector that silently lost and left List
   blocks with no markers. The content boundary is matched with real classes
   here for that reason — do not fold these back into :where(). */
.entry-content ul.wp-block-list,
.entry-content ul:not([class]),
.editor-styles-wrapper ul.wp-block-list,
.editor-styles-wrapper ul:not([class]) {
  padding-inline-start: var(--wp--preset--spacing--6);
  list-style: disc;
}

.entry-content ol.wp-block-list,
.entry-content ol:not([class]),
.editor-styles-wrapper ol.wp-block-list,
.editor-styles-wrapper ol:not([class]) {
  padding-inline-start: var(--wp--preset--spacing--6);
  list-style: decimal;
}

:where(.entry-content, .editor-styles-wrapper) .wp-block-list li + li {
  margin-top: var(--wp--preset--spacing--2);
}

/* Quotations use the brand colour as a mark, not as body-copy colour. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-quote {
  padding-block: var(--wp--preset--spacing--3);
  padding-inline-start: var(--wp--preset--spacing--5);
  color: var(--wp--preset--color--ink-soft);
  border: 0;
  border-inline-start: 3px solid var(--wp--preset--color--brand);
}

:where(.entry-content, .editor-styles-wrapper) .wp-block-quote cite {
  display: block;
  margin-top: var(--wp--preset--spacing--3);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm);
  font-style: normal;
}

/* Tables follow the catalog's hairline-grid language. `overflow-x: auto` on
   .wp-block-table and `width: 100%; border-collapse: collapse` on the inner
   table are already shipped verbatim by wp-block-library and are NOT restated
   here — only the declarations below are project decisions. */

/* Cells must outrank wp-block-library's `.wp-block-table td, .wp-block-table th
   { border: 1px solid; padding: .5em }` (block-library/style.css, (0,1,1)),
   which is always enqueued. Wrapping `th, td` in :where() dropped this to
   (0,1,0) and left core's full boxed grid showing instead of the hairline. */
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-table td {
  padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
  text-align: start;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

.entry-content .wp-block-table thead,
.editor-styles-wrapper .wp-block-table thead {
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

:where(.entry-content, .editor-styles-wrapper) .wp-block-table th {
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--tracking-label);
  background: var(--wp--preset--color--surface);
}

/* Details is the approved lightweight disclosure/FAQ primitive. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-details {
  border-block: 1px solid var(--wp--preset--color--rule);
}

:where(.entry-content, .editor-styles-wrapper) .wp-block-details summary {
  padding-block: var(--wp--preset--spacing--4);
  font-weight: 700;
  cursor: pointer;
}

:where(.entry-content, .editor-styles-wrapper)
  .wp-block-details
  > :not(summary):last-child {
  margin-bottom: var(--wp--preset--spacing--4);
}

/* Separators are a single full-width `rule` hairline — design-system.md §8.10.
   The competing core rules (2px currentColor border, and width:100px via
   `:not(.is-style-wide):not(.is-style-dots)`) live in wp-block-library-THEME,
   which this theme never loads: script-loader.php:2502 gates it on
   `wp-block-styles` support on the frontend, and :1736-1745 gates the editor
   copy on that same support PLUS having no add_editor_style() — both false
   here. So these declarations are currently uncontested.
   The specificity is kept deliberately anyway: adding
   add_theme_support('wp-block-styles') later would otherwise silently shrink
   every separator to a 100px stub. */
.entry-content .wp-block-separator,
.editor-styles-wrapper .wp-block-separator {
  height: 0;
  border: 0;
  border-top: 1px solid var(--wp--preset--color--rule);
}

.entry-content .wp-block-separator:not(.is-style-wide):not(.is-style-dots),
.editor-styles-wrapper
  .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: 100%;
}

/* Captions: core styles these at (0,1,0) and above (.wp-block-audio
   :where(figcaption), .wp-block-embed :where(figcaption), …), so a double
   :where() at (0,0,0) never applied. Real classes put this at (0,2,0)/(0,1,1).
   Gallery captions keep core's own higher-specificity treatment. */
.entry-content .wp-element-caption,
.entry-content figcaption,
.editor-styles-wrapper .wp-element-caption,
.editor-styles-wrapper figcaption {
  margin-top: var(--wp--preset--spacing--2);
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-body);
}