/* ----------------------------------------------------------------------
 よくある質問 (FAQ accordion) block — a genuinely new component (one of
 the "not built yet" items from the bigger single-post layout revamp).
 No native <details>/<summary> question-mark icon existed anywhere in
 this theme, so it's a hand-drawn inline SVG here (hook + dot, matching
 this project's stroke-based icon convention) rather than a plain "?"
 text glyph. The +/- toggle reuses this theme's own existing convention
 from the sidebar FAQ widget (.faq_acc summary:after — CSS `content`,
 no JS), not a new icon.
---------------------------------------------------------------------- */
.quadra-child-faq {
  border: 1px solid var(--color-border-subtle, #ddd);
  border-radius: var(--radius-12, 12px);
  background: var(--color-grey-92, #f7f6f0);
  padding: 24px;
  margin: 2.5em 0;
}
.quadra-child-faq__title {
  /* Deliberately NOT full-width here (unlike the TOC title) — per
     explicit request, this border stays inset within the card's own
     padding. Was a thin 1px full-width border-bottom; switched to a
     short, thick, centered accent bar in the brand primary color per
     explicit request ("fat small border, use my primary color") —
     border-bottom can't do "short" on its own (it always spans the
     element's own width), so this is a centered ::after bar instead. */
  position: relative;
  margin: 0 0 20px;
  padding: 0 0 12px;
  text-align: center;
  font-size: 18px;
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-brand-primary, #49352d);
}
.quadra-child-faq__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 76px;
  height: 2px;
  border-radius: var(--radius-4, 4px);
  background: var(--color-brand-primary, #49352d);
}
.quadra-child-faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quadra-child-faq__item {
  border-radius: var(--radius-8, 8px);
  overflow: hidden;
  background: #fff;
}
/* Removes the native disclosure triangle so the header reads as a
   plain clickable bar — the +/- glyph below is the only toggle cue. */
.quadra-child-faq__question {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Left padding widened to reserve room for the now-absolutely-
     positioned icon (24px wide + a small gap) — the icon is no longer
     a flex participant, so it no longer pushes the text over on its
     own; this padding is what does that job now. Vertical padding
     bumped too: the row's height used to be set by whichever child
     was tallest (previously the icon); now that the icon is out of
     flow, the row would shrink to just the 21px text's own height —
     not enough room for a 42px icon without it overflowing the bar's
     own edges (confirmed live: it did, right after switching to
     absolute). */
  padding: 20px 20px 20px 44px;
  /* Establishes the containing block the icon positions against. */
  position: relative;
  /* Was --color-brand-primary (the strong, saturated brand brown) —
     switched to text-secondary, an existing "subtle" muted tone in
     this project's own token set, per explicit request not to reuse
     the primary brand color here. Still dark enough for white text. */
  background: var(--color-text-tertiary, #8a8178);
  color: var(--color-text-inverse, #fff);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-body-sm, 14px);
  line-height: var(--line-height-body-sm, 21px);
  cursor: pointer;
  list-style: none;
}
.quadra-child-faq__question::-webkit-details-marker {
  display: none;
}
/* No chip/box around the icon anymore (per explicit request — "a bit
   playful, no bg color") — the bare glyph sits directly on the header
   bar, larger and softened to a translucent white/gray rather than a
   solid color, matching the reference image's washed-out look. Applied
   directly on this element now (no separate ::before needed once
   there's no box to inset the icon within). */
.quadra-child-faq__q-icon {
  /* Absolutely positioned now, per explicit request — this fully
     decouples the icon's size from the row's flex layout math. Every
     earlier attempt (align-self, margin-top) had to fight the fact
     that a flex item's own size affects the line's height; an
     absolutely-positioned element is removed from flow entirely, so
     it can be as big as looks good with zero effect on anything else.
     Positioned against .quadra-child-faq__question's padding box
     (that's the nearest `position:relative` ancestor). */
  position: absolute;
  left: 12px;
  width: 24px;
  height: 42px;
  background-color: rgba(255, 255, 255, 0.55);
  /* A small playful tilt, per explicit request. */
  transform: rotate(-16deg);
  /* User-supplied asset (question-mark.svg, same folder) — a mask
     ignores the file's own baked-in fill color entirely (only alpha
     matters), so background-color above is what actually colors it. */
  -webkit-mask: url("question-mark.svg") no-repeat center / contain;
  mask: url("question-mark.svg") no-repeat center / contain;
}
.quadra-child-faq__q-text {
  flex: 1 1 auto;
  min-width: 0;
}
/* +/- via CSS content — same technique this theme's own sidebar FAQ
   widget already uses (.faq_acc summary:after), not a new icon. */
.quadra-child-faq__toggle {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;
}
.quadra-child-faq__toggle:before {
  content: "+";
}
.quadra-child-faq__item[open] .quadra-child-faq__toggle:before {
  content: "\2212";
}
/* The clip/animation container — deliberately overrides <details>'s own
   native hiding of non-summary children (display:none while closed) so
   this element is ALWAYS rendered, just visually clipped to 0 height.
   That sidesteps the classic "just became visible, so there's no prior
   painted frame to transition FROM" problem entirely: max-height can be
   changed at any time, from any real trigger, and the browser's own
   CSS transition engine handles the animation declaratively — no
   Web Animations API, no requestAnimationFrame, no completion-callback
   dependency for correctness. (Tried a `.animate()` + rAF version
   first; confirmed live that a <details> element's own height doesn't
   reliably animate via WAAPI at all, and even routing the animation
   through a plain wrapper div instead didn't settle to its target
   reliably. A plain declarative CSS transition — driven by nothing
   more than accordion-animate.js toggling one style.maxHeight value —
   avoids all of that.) No padding here — that lives on
   .answer-inner instead, since padding isn't clipped by max-height
   the way real content height is, and would otherwise leave a visible
   gap even at max-height:0.
   important: the parent theme's .post_content sets no rule on `details`
   directly, but display:block!important guards against any future
   generic `.post_content` element-reset that might reintroduce
   `display:none` on non-summary children. */
.quadra-child-faq__answer {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.25s ease-out;
}
/* No-JS / pre-JS baseline: an item saved as open (the first item,
   always) must show its full answer from a plain CSS cascade alone —
   accordion-animate.js only takes over (pinning max-height to an exact
   px value so the transition has real numbers to animate between)
   once a click actually happens. Without this rule, every answer
   would incorrectly render at 0 height until JS runs. */
.quadra-child-faq__item[open] .quadra-child-faq__answer {
  max-height: none;
}
.quadra-child-faq__answer-inner {
  padding: 16px 20px;
  /* Border on the inner box, not the outer .answer clip container —
     .answer is what accordion-animate.js collapses to max-height:0 while
     closed, so a border declared there would still render a visible
     1px sliver even at zero height (top/bottom edges coincide but the
     border itself doesn't vanish). Putting it here means overflow:hidden
     on .answer (and .item's own rounded-corner clip) hides it completely
     while closed, same as the text content. No top border — the dark
     question bar above already reads as the panel's own top edge. */
  border-left: 1px solid var(--color-border-subtle, #ddd);
  border-right: 1px solid var(--color-border-subtle, #ddd);
  border-bottom: 1px solid var(--color-border-subtle, #ddd);
  /* Matches .item's own border-radius on just the bottom two corners.
     Without this, the border box here has square corners, and .item's
     overflow:hidden rounds the whole item off from OUTSIDE — it clips
     the square corner's excess away rather than bending the border
     into a curve, so the border simply stops short right at the arc
     instead of following it, leaving a visible gap exactly at each
     bottom corner. */
  border-bottom-left-radius: var(--radius-8, 8px);
  border-bottom-right-radius: var(--radius-8, 8px);
  color: var(--color-text-secondary, #5c5650);
  font-size: var(--font-size-body-sm, 14px);
  line-height: var(--line-height-body-sm, 21px);
}
/* 2026-08-31: answer content is now real InnerBlocks (gaia/paragraph,
   core/image, gaia/columns...), not one plain <span>. Wrapping only the
   InnerBlocks region in its own element (not merged with .citations as
   a sibling inside the same el() call) sidesteps a real gotcha with
   useInnerBlocksProps.save() — mixing its own auto-managed children with
   hand-written sibling elements in one call isn't a supported/
   predictable pattern; every InnerBlocks usage elsewhere in this project
   keeps that hook isolated in its own element instead. No layout
   purpose of its own (font-size/color/line-height above already apply
   here via inheritance). */
.quadra-child-faq__answer-content {
  display: block;
}
/* gaia/paragraph's own default size/color (16px "normal" + near-black
   --color-text-body) would otherwise override the 14px/21px/secondary-
   brown set above (inherited properties lose to an element's own
   explicit value — confirmed live: color rendered rgb(26,26,26) instead
   of the intended secondary tone before this rule existed). Matches
   .gaia-paragraph.gaia-paragraph's own specificity (2 classes) so this
   wins regardless of stylesheet load order between this file and
   paragraph/style.css. */
.quadra-child-faq__answer-content .gaia-paragraph.gaia-paragraph {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* "Plain" variant — title + card background/border/padding all
   omitted (the title isn't even rendered in this case, see
   editor.js's save()), leaving just the bare question/answer
   accordion. Margin stays — still want normal vertical spacing in the
   article flow, just no visible frame around it. */
.quadra-child-faq--plain {
  border: none;
  background: none;
  padding: 0;
}

/* ----------------------------------------------------------------------
 引用元 (citation links) — optional, per-answer. Lives inside
 .answer-inner (not a sibling of it) specifically so it's included in
 the height accordion-animate.js measures for the open/close
 transition — it opens and closes together with the answer text, not
 as a separate reveal. Uses <div>s instead of <ul>/<li> for the same
 reason established earlier this session for this whole block: avoid
 the `.post_content ul/li` specificity leak rather than fight it with
 !important. Link color/hover/underline deliberately matches this
 theme's own real article-body link convention (`.post_content a` /
 `.post_content a:hover` in quadra-child/style.css) rather than the
 blue this first shipped with — no underline, default color one of
 this block's own existing muted "secondary" tokens (not the parent's
 literal black, since that would look out of place against this
 block's own already-brown-toned text), hover switches to
 --color-brand-primary same as the rest of the site's body links.
---------------------------------------------------------------------- */
.quadra-child-faq__citations {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-subtle, #ddd);
  border-radius: var(--radius-8, 8px);
  background: var(--color-grey-92, #f7f6f0);
}
.quadra-child-faq__citations-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-body-sm, 14px);
  color: #1e3a5f;
}
.quadra-child-faq__citations-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9h-6a1 1 0 0 1-1-1V2H6z'/%3E%3Cpath opacity='0.6' d='M13 2.4V8a1 1 0 0 0 1 1h5.6z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9h-6a1 1 0 0 1-1-1V2H6z'/%3E%3Cpath opacity='0.6' d='M13 2.4V8a1 1 0 0 0 1 1h5.6z'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.quadra-child-faq__citations-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quadra-child-faq__citations-item {
  position: relative;
  padding-left: 32px;
  font-size: var(--font-size-body-sm, 14px);
  line-height: var(--line-height-body-sm, 21px);
}
.quadra-child-faq__citations-item:before {
  content: "";
  position: absolute;
  left: 20px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-secondary, #5c5650);
}
.quadra-child-faq__citations-item a {
  color: var(--color-text-secondary, #5c5650);
  text-decoration: none;
}
/* !important needed here: this block's own style.css loads BEFORE the
   theme's main style.css (confirmed live via the actual <link> order in
   <head> — a block.json "style" handle prints earlier than the
   `wp_enqueue_scripts`-hooked 'quadra-child-style'), and that later
   stylesheet has its own `.post_content a:hover { color: var(--color-
   brand-primary) }` rule at IDENTICAL specificity (0,2,1) to this one.
   At a tie, source order alone decides and the later, unrelated rule
   was winning — this citation link kept rendering brand-primary brown
   no matter what color was set here. Same root cause as this project's
   other documented `.post_content` cascade conflicts, just via a load-
   order tie instead of a raw specificity difference. */
.quadra-child-faq__citations-item a:hover {
  color: var(--color-brand-accent-dark, #e8501e) !important;
}
.quadra-child-faq__citations-external-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
  background-color: currentColor;
  /* currentColor means this follows the link's own color transition
     above automatically; the transform here is the icon's own small
     "hop toward the destination" hover motion, on top of that. */
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14L21 3'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.quadra-child-faq__citations-item
  a:hover
  .quadra-child-faq__citations-external-icon {
  transform: translate(2px, -2px);
}