/* =========================================
   WordPress Gutenberg Block Styles
   Core blocks rendered in page/post content.
   ========================================= */

/* =========================================
   Heading — default body-copy rhythm
   Lives here (not in articles.css) so the editor iframe also sees it —
   add_editor_style() loads this file directly, while articles.css is
   pulled in through @import from common.css and isn't always resolved
   reliably in the editor context. Targets core/heading's .wp-block-heading
   class so it stays scoped to content headings (not nav, sidebar, etc).
   ========================================= */
h2.wp-block-heading,
h3.wp-block-heading {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Default heading color — only when the user hasn't set an explicit text
   color on the heading itself. Without the :not() guard, this element-level
   rule overrides a palette/custom color chosen in the editor (the chosen
   color renders via a .has-*-color class), leaving e.g. a "white" heading
   stuck on --c-text. */
h2.wp-block-heading:not(.has-text-color),
h3.wp-block-heading:not(.has-text-color) {
  color: var(--c-text);
}

h2.wp-block-heading {
  font-size: var(--text-ml);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: 2.5em;
  margin-bottom: 1em;
  padding-top: 2em;
  border-top: 1px solid var(--c-border);
}

h2.wp-block-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

h3.wp-block-heading {
  font-size: var(--text-md);
  line-height: 1.5;
  margin-top: 2em;
  margin-bottom: 0.75em;
}

/* Let an explicit text color set on an ancestor (Group / Cover / Columns
   etc. via the editor color control) cascade into themed inner elements.
   These elements hard-set color: var(--c-text) with element selectors, which
   otherwise beats the inherited color — so a dark card with "white" text left
   its heading / quote / summary dark. Scoping under .has-text-color (raising
   specificity above the base element rules) makes them follow the container's
   chosen color, while a color applied directly to the element still wins via
   core's .has-text-color {color:…!important}. */
.has-text-color h2.wp-block-heading:not(.has-text-color),
.has-text-color h3.wp-block-heading:not(.has-text-color),
.has-text-color blockquote.wp-block-quote p,
.has-text-color .wp-block-details > summary {
  color: inherit;
}

/* =========================================
   Section heading pattern (eyebrow + title)
   Inserted via the "Section heading" block pattern (TOP page). The eyebrow
   styling is repeated here (it also lives on .section-eyebrow in
   components/sections.css) so it renders inside the editor iframe, where
   common.css's @import chain isn't reliable. Scoped to .section-heading so it
   only affects the pattern, and the default h2 top border / margin are reset
   so the eyebrow + title read as one tight unit.
   ========================================= */
.section-heading .section-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 16px;
}

.section-heading h2.wp-block-heading,
.section-heading h3.wp-block-heading {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* =========================================
   Heading — decorative style variations
   Registered via register_block_style('core/heading', ...)
   in lib/admin/block-style.php.
   Selectors use the same (0,1,1) specificity as the general rules above;
   placement after ensures source-order cascade keeps these variants
   winning over the default border-top / padding-top.
   ========================================= */

/* A. Bottom accent — short primary line below */
h2.is-style-bottom-accent,
h3.is-style-bottom-accent {
  border-top: none;
  padding-top: 0;
  padding-bottom: 0;
}

h2.is-style-bottom-accent::after,
h3.is-style-bottom-accent::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--c-primary);
  margin-top: 0.5em;
}

/* B. Top accent — short primary line above */
h2.is-style-top-accent,
h3.is-style-top-accent {
  border-top: none;
  padding-top: 0;
}

h2.is-style-top-accent::before,
h3.is-style-top-accent::before {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--c-primary);
  margin-bottom: 0.6em;
}

/* C. Left border — vertical accent line on the left */
h2.is-style-left-border,
h3.is-style-left-border {
  border-top: none;
  padding-top: 0;
  border-left: 3px solid var(--c-primary);
  padding-left: 20px;
}

/* D. Highlight — subtle background tint strip */
h2.is-style-highlight,
h3.is-style-highlight {
  border-top: none;
  padding: 16px 24px;
  background: var(--c-surface-2);
}

/* E. Dot accent — small primary circle before text */
h2.is-style-dot,
h3.is-style-dot {
  border-top: none;
  padding-top: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

h2.is-style-dot::before,
h3.is-style-dot::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-primary);
  flex-shrink: 0;
}

/* =========================================
   List — core/list block (ul / ol)
   Custom markers replacing the browser defaults:
     ul → thin dash on the left (text-muted)
     ol → zero-padded counter in display font + primary color
   Lives here (not in articles.css) so the markers are visible in the
   editor iframe via add_editor_style(). Targets .wp-block-list so it
   stays scoped to content lists and doesn't affect utility lists
   (menus, sidebar widgets, etc).
   ========================================= */
ul.wp-block-list,
ol.wp-block-list {
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.wp-block-list {
  list-style: none;
  padding-left: 0;
}

ul.wp-block-list li {
  position: relative;
  padding-left: 1.5em;
  margin-top: 0.5em;
}

ul.wp-block-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.75em;
  height: 1px;
  background: var(--c-text-muted);
}

ol.wp-block-list {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
}

ol.wp-block-list li {
  counter-increment: item;
  padding-left: 2.25em;
  position: relative;
  margin-top: 0.5em;
}

ol.wp-block-list li::before {
  content: counter(item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}

/* =========================================
   Buttons — 3 style variations matching the CTA system
   ========================================= */
.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 24px);
  margin-block: 2em;
}

/* Group justification — core's "Justify items" toolbar writes these
   is-content-justification-* classes on .wp-block-buttons. Re-declared here
   (specificity 0,2,0, same as core's mapping) so the control reliably wins
   the cascade against the base .wp-block-buttons rule above in BOTH the
   frontend and the editor iframe, regardless of whether/when core's block
   stylesheet loads. */
.wp-block-buttons.is-content-justification-left          { justify-content: flex-start; }
.wp-block-buttons.is-content-justification-center        { justify-content: center; }
.wp-block-buttons.is-content-justification-right         { justify-content: flex-end; }
.wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: opacity 0.25s ease, background 0.25s ease, color 0.25s ease;
}

/* Center the label only when the button has an explicit width (Gutenberg's
   25/50/75/100% width control adds a wp-block-button__width-* class). The
   link is inline-flex, so its content sits at flex-start (left) once it's
   stretched to a fixed width; centering it matches core's text-align:center.
   Scoped to the width classes so auto-width buttons stay untouched and the
   group justification control (is-content-justification-*) keeps working. */
.wp-block-button[class*="wp-block-button__width-"] .wp-block-button__link {
  justify-content: center;
}

/* Default = Primary (filled) */
.wp-block-button .wp-block-button__link {
  background: var(--c-primary);
  color: #ffffff;
}

.wp-block-button .wp-block-button__link:hover { opacity: 0.85; }

/* Outline variant (is-style-outline — WP default variant name) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid currentColor;
  padding: 13px 32px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--c-primary);
  color: #ffffff;
}

/* Outline Light variant (is-style-outline-light) — white line + white text
   for dark backgrounds; hover fills white with dark text. Mirrors the
   .is-on-dark a.btn-secondary treatment. currentColor keeps the border in
   step with the white label. */
.wp-block-button.is-style-outline-light .wp-block-button__link {
  background: transparent;
  color: #ffffff;
  border: 1px solid currentColor;
  padding: 13px 32px;
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
  background: #ffffff;
  color: var(--c-text);
  border-color: #ffffff;
}

/* Text variant (custom style registered via register_block_style) */
.wp-block-button.is-style-text .wp-block-button__link {
  background: transparent;
  color: var(--c-text-muted);
  padding: 0;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.wp-block-button.is-style-text .wp-block-button__link:hover {
  color: var(--c-primary);
}

/* Text style has no button shape, so a fixed-width box (Gutenberg's
   25/50/75/100% width control) would just strand the label inside an
   invisible box — looking centered/left for no visible reason. Collapse
   the width back to content so the group justification control
   (is-content-justification-*) positions the text itself left/center/right.
   Higher specificity than core's width rules so it wins the cascade. */
.wp-block-button.is-style-text[class*="wp-block-button__width-"] {
  width: auto;
}
.wp-block-button.is-style-text[class*="wp-block-button__width-"] .wp-block-button__link {
  width: auto;
  justify-content: flex-start;
}

/* =========================================
   Quote — core/quote block
   Top/bottom borders only (Masaki brief: "囲みは余白への不信").
   Lives here (not in articles.css) so the same visual lands in the
   block editor iframe — add_editor_style() loads this file directly,
   without the @import chain that common.css relies on.
   ========================================= */
blockquote.wp-block-quote {
  margin: 2.5em 0;
  padding: 1.75em 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  border-left: 0;
  text-align: center;
}

blockquote.wp-block-quote p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.9;
  color: var(--c-text);
  font-feature-settings: "halt";
}

blockquote.wp-block-quote cite {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  font-style: normal;
  margin-top: 1.5em;
}

blockquote.wp-block-quote cite::before {
  content: '— ';
}

/* =========================================
   Separator
   ========================================= */
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--c-border);
  /* Match the flow-rhythm baseline (1.5em top, 0 bottom) so separators
     render consistently whether they're direct children of .page__body
     (where .page__body > * + * would apply) or nested in a Group /
     Columns block (where the ancestor selector doesn't match). Also
     aligns editor preview with frontend. */
  margin-block: 1.5em 0;
  width: 100%;
}

.wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
}

.wp-block-separator.is-style-dots::before {
  content: '· · ·';
  padding: 0 0 0 0.5em;
  letter-spacing: 0.5em;
  font-size: var(--text-ml);
  color: var(--c-text-muted);
}

/* =========================================
   Cover — image + text overlay (interstitial pattern)
   ========================================= */
.wp-block-cover {
  position: relative;
  min-height: clamp(320px, 50vw, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-block: 2.5em;
  padding: clamp(40px, 6vw, 80px) var(--gutter-inline);
  color: #ffffff;
}

.wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45) sepia(10%) contrast(1.02);
  z-index: 0;
}

.wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  max-width: var(--max-reading);
  width: 100%;
}

.wp-block-cover h2 { color: #ffffff; border-top: none; padding-top: 0; margin-top: 0; }
.wp-block-cover p  { color: rgba(255, 255, 255, 0.85); }

/* =========================================
   Columns
   ========================================= */
.wp-block-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  margin-block: 2.5em;
}

@media (min-width: 720px) {
  .wp-block-columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .wp-block-columns.has-3-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wp-block-column { min-width: 0; }

/* Opt-in utility (add to the parent core/columns block's "Additional CSS
   class"): bottom-aligns buttons across a row of columns so cards with
   uneven body text still line their CTAs up at the same baseline. The grid
   makes columns equal-height; each column becomes a flex column and its
   buttons block is pushed to the bottom with margin-top:auto. */
.p-cards-bottom-button .wp-block-column {
  display: flex;
  flex-direction: column;
}

.p-cards-bottom-button .wp-block-column .wp-block-buttons {
  margin-top: auto;
  padding-top: 2em;
}

/* =========================================
   Gallery
   ========================================= */
.wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-md);
  margin-block: 2.5em;
  list-style: none;
  padding: 0;
}

@media (min-width: 720px) {
  .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
  .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
}

.wp-block-gallery figure { margin: 0; }

.wp-block-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: brightness(0.95) sepia(6%) contrast(1.03);
}

.wp-block-gallery figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
  margin-top: 0.5em;
  text-align: center;
}

/* =========================================
   Image — single block
   ========================================= */
.wp-block-image {
  margin-block: 2.5em;
}

.wp-block-image img {
  width: 100%;
  height: auto;
  filter: brightness(0.95) sepia(6%) contrast(1.03);
}

.wp-block-image figcaption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  margin-top: 1em;
  padding-left: 1em;
  border-left: 1px solid var(--c-border);
}

/* =========================================
   Media & Text — mobile stacked refinements
   WordPress core collapses the two-column grid to a single column on
   mobile when `is-stacked-on-mobile` is set, but doesn't add any gap
   between media and content and leaves the content's inline padding
   (0 8%) in place, which looks indented against the flush media.
   ========================================= */
@media (max-width: 600px) {
  .wp-block-media-text.is-stacked-on-mobile {
    gap: 1rem;
  }

  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
    padding: 0;
  }
}

/* =========================================
   Block rhythm — flow layout spacing
   Gutenberg emits `:root :where(.is-layout-flow) > * { margin-block-start: 1.5em }`
   in the editor (from theme.json's styles.spacing.blockGap), but that
   :where() ruleset has 0 specificity and isn't applied by WP on the
   frontend to non-.is-layout-flow wrappers. The theme's body containers
   (.page__body, .journal-article__body) aren't flow-layout wrappers, so
   we reproduce the rhythm here for parity with the editor. First child
   stays unspaced via `> * + *` (no preceding sibling, no margin).
   Per-block typography rules in articles.css win via higher specificity,
   so h2 / h3 / blockquote keep their project-specific margins.
   ========================================= */
.page__body > * + *,
.journal-article__body > * + * {
  margin-block-start: 1.5em;
}

/* Opt-out modifier — `.is-style-remove-margin-top` is registered for
   core/group and core/media-text (lib/admin/block-style.php). The class is
   doubled to lift specificity to (0,2,0) so it reliably beats both the
   core `:root :where(.is-layout-flow) > *` rule (0,1,0) and our baseline
   rule above without depending on source order. Unscoped so it also
   applies inside the block editor iframe — block-styles.css is shared via
   add_editor_style(), so no Gutenberg wrapper selector is needed. */
.is-style-remove-margin-top.is-style-remove-margin-top {
  margin-block-start: 0;
}

/* =========================================
   Details — accordion-style block
   Native <details>/<summary> styled with a hairline divider, chevron
   indicator, and fade-in on open. Animating the element's height in
   pure CSS isn't broadly supported yet (interpolate-size / details-content
   pseudo are Chrome-only as of 2026), so we keep it simple: chevron
   rotation + opacity fade on the first answer block.
   ========================================= */
.wp-block-details {
  border-top: 1px solid var(--c-border);
  margin-block: 0;
  padding-inline: 0.5rem;
}

.wp-block-details + .wp-block-details {
  /* Shared border between adjacent details */
  margin-top: 0;
}

.wp-block-details:last-of-type {
  border-bottom: 1px solid var(--c-border);
}

.wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: 0.75em;
  cursor: pointer;
  list-style: none;
  padding-block: 1.25em;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--c-text);
  transition: color 0.2s ease;
  user-select: none;
}

.wp-block-details > summary:hover {
  color: var(--c-primary);
}

.wp-block-details > summary:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Suppress the native disclosure marker (triangle) — replaced by chevron */
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::marker               { display: none; }

/* Chevron indicator (pure CSS, rotates on open) */
.wp-block-details > summary::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.wp-block-details[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Answer content — padding below when open, and fade-in on reveal */
.wp-block-details[open] > :not(summary) {
  margin-block-start: 0;
  padding-bottom: 1.5em;
}

.wp-block-details[open] > summary + * {
  animation: camelus-details-reveal 0.3s ease;
}

@keyframes camelus-details-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   Details — FAQ variant (is-style-faq)
   Q marker in summary, A marker on the first answer block. Both markers
   share a left gutter so question/answer text aligns vertically.
   ========================================= */
.wp-block-details.is-style-faq > summary::before {
  content: 'Q';
  min-width: 1em;
  width: 20px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1;
  color: var(--c-primary);
  flex-shrink: 0;
}

.wp-block-details.is-style-faq > :not(summary) {
  padding-left: calc(1em + 1em);    /* Q min-width + summary gap */
  position: relative;
}

.wp-block-details.is-style-faq > summary + *::before {
  content: 'A';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.7;
  color: var(--c-accent);
}

/* =========================================
   Editor chrome — post title wrapper
   Editor-only selector (no frontend match). Tightens vertical rhythm
   around the post title block so content doesn't sit with a big gap
   below it inside the editor iframe.
   !important is required because Gutenberg applies margin-top as an
   inline style (`element.style { margin-top: 4rem }`) on this wrapper,
   and inline styles can't be beaten by a CSS-file rule on specificity
   alone. This is a legitimate use of !important — overriding a
   framework-set inline attribute.
   ========================================= */
.editor-visual-editor__post-title-wrapper {
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}