/*
Theme Name: CHOT
Theme URI: https://mahiru-chatre.com/
Author: CHOT Project
Description: Editorial Pink / NOTE-like mobile-first custom theme for mahiru-chatre.com.
Version: 0.2.17
Text Domain: chot
*/

/* Article hero excerpt: keep the same soft/muted tone as the rest of the reading column. */
.chot-article-hero .chot-article__lead{margin:16px 0 0;font-size:15px;line-height:1.85;color:var(--chot-muted);opacity:.85}

/*
 * Intro title below FV (post_title). Not a second H1.
 * Vertical rhythm SSOT: FV → intro → first chat. Owned by theme margins —
 * do not patch per-article body HTML. Margin collapse is contained by
 * .chot-article-main { display:flow-root } in article-sidebar.css.
 */
.chot-article__intro-title{
  width:min(calc(100% - 40px),var(--chot-reading,720px));
  margin:calc(var(--chot-block-space,28px) * 1.5) auto calc(var(--chot-block-space,28px) * 2);
  padding:0;
  text-align:center;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(22px,2.4vw,28px);
  font-weight:600;
  line-height:1.55;
  color:var(--chot-text);
}
.chot-article__intro-title + .chot-article__body > .wp-block-group.chot-chat:first-child,
.chot-article__intro-title + .chot-article__body > .chot-chat:first-child{
  margin-top:0;
  padding-top:0;
}
/* Rare fallback: body starts with chat and intro slot is empty. */
.chot-article-main > .chot-article__body:first-child > .wp-block-group.chot-chat:first-child,
.chot-article-main > .chot-article__body:first-child > .chot-chat:first-child{
  margin-top:calc(var(--chot-block-space,28px) * 2);
}
@media(max-width:820px){
  .chot-article__intro-title{
    margin-top:calc(var(--chot-block-space,28px) * 1.15);
    margin-bottom:44px;
    font-size:clamp(18px,5.2vw,22px);
    line-height:1.6;
  }
}

/* Quiet provenance before SNS share (not under FV). One line; wrap only if needed. */
.chot-article__provenance{max-width:var(--chot-reading,720px);margin:var(--chot-block-space,28px) auto 0;padding:0;text-align:center;color:var(--chot-muted);font-size:12px;line-height:1.7}
.chot-article__provenance-line{margin:0}
.chot-article__meta-sep{opacity:.7}
.chot-article__body > .chot-article__provenance + .chot-share,
.chot-article__provenance + .chot-share{margin-top:var(--chot-block-space,28px)}

/* Post-only back-to-top button. Hidden by default; JS reveals it after scrolling. */
.chot-back-to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));z-index:40;width:44px;height:44px;border:0;border-radius:50%;background:var(--chot-pink);color:#fff;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(80,50,40,.18);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease,transform .15s ease,box-shadow .15s ease}
.chot-back-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.chot-back-to-top:hover,.chot-back-to-top:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(80,50,40,.26)}
.chot-back-to-top:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px rgba(233,121,145,.35)}
@media(max-width:520px){.chot-back-to-top{width:40px;height:40px;right:12px;font-size:16px}}

/* Post-only bonus flow: official DXLIVE banner, then mahiru's 初月 proof. */
.chot-proof-box{margin:28px auto 0;max-width:420px;text-align:center;background:#fff;border:1px solid var(--chot-border);border-radius:20px;padding:20px 22px;box-shadow:var(--chot-shadow)}
.chot-proof-box p{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--chot-muted)}
.chot-proof-box strong{display:block;font-family:Georgia,serif;font-size:24px;color:var(--chot-pink)}
.chot-proof-box span{display:block;margin-top:4px;font-size:13px;color:var(--chot-muted)}
.chot-bonus-banner{margin:14px auto 0;max-width:420px;text-align:center}
.chot-bonus-banner img{display:block;width:100%;height:auto;margin:0 auto;border-radius:12px}
/*
 * Reusable CHOT block rhythm. Same token as public .chot-chat { gap:28px }.
 * Blocks carry spacing; do not invent article-001 exceptions.
 */
:root{--chot-block-space:28px}

.chot-bonus-summary{box-sizing:border-box;min-width:0;width:fit-content;max-width:100%;margin:var(--chot-block-space) auto;padding:8px 18px 10px;background:#fff;border:1px solid var(--chot-border);border-radius:20px;box-shadow:var(--chot-shadow);overflow-x:hidden}
/*
 * Inside .chot-chat the grid gap applies the same token. Keep margin-block 0
 * so gap + margin do not double. Gap must remain active on Gutenberg Groups
 * (see .wp-block-group.chot-chat below).
 */
.chot-chat .chot-bonus-summary,
.chot-chat--breakdown > .chot-bonus-summary,
.chot-chat--breakdown .chot-bonus-summary{margin-block:0;margin-inline:auto;justify-self:center}
.chot-bonus-summary .chot-bonus-list{margin:0;width:max-content;max-width:100%}
.chot-bonus-summary .chot-bonus-list li:first-child{border-top:0}
.chot-bonus-total{margin:10px 0 6px;text-align:center;font-size:14px;font-weight:800;color:#bd526a}
.chot-bonus-summary .chot-bonus-list li{grid-template-columns:max-content minmax(0,max-content)}
@media(max-width:820px){.chot-bonus-summary .chot-bonus-list{width:100%}.chot-bonus-summary .chot-bonus-list li{grid-template-columns:minmax(0,1fr)}}
.chot-fx-note{margin:12px auto 8px;max-width:520px;text-align:center;font-size:12px;line-height:1.7;color:var(--chot-muted)}
ul.chot-checklist{width:fit-content;max-width:100%;margin-inline:auto}

/* Header / footer brand mark: existing chot-icon.svg beside the CHOT word. */
.chot-brand__lockup{display:flex;align-items:center;gap:10px}
.chot-brand__mark{display:block;width:28px;height:28px;flex:0 0 28px;aspect-ratio:1/1;object-fit:contain}
@media(max-width:820px){
  .chot-brand__lockup{gap:8px}
  .chot-brand__mark{width:22px;height:22px;flex:0 0 22px}
}

/*
 * Gutenberg Group wrappers: zero default group *margin* so stacks are
 * controlled by public section classes. Do NOT zero padding here —
 * .chot-reason / .chot-bridge / .chot-close / .chot-value-close use
 * padding as their public spacing SSOT (chot.css).
 */
.chot-article__body .wp-block-group{margin:0}
/*
 * Reason sections use public .chot-reason padding (52/56) as spacing SSOT.
 * Neutralize core flow margins only between reason blocks (section children),
 * not inside each reason (badge → title → lead → punch keep chot.css).
 */
.chot-article__body .wp-block-group.chot-reasons > .wp-block-group__inner-container > *,
.wp-block-group.chot-reasons > .wp-block-group__inner-container > *{
  margin-block-start:0;
}
.chot-article__body .wp-block-group.chot-chat,
.wp-block-group.chot-chat{
  margin:0 0 54px;
  padding:0;
  display:grid;
  gap:var(--chot-block-space);
}
.chot-article__body .wp-block-group.chot-chat > .wp-block-group__inner-container,
.wp-block-group.chot-chat > .wp-block-group__inner-container{
  /* WP 6.6 Group still emits inner-container; one wrapper collapses grid gap. */
  display:contents;
}
.chot-article__body .wp-block-group.chot-chat .is-layout-flow > *,
.wp-block-group.chot-chat .is-layout-flow > *,
.chot-article__body .wp-block-group.chot-chat > *{
  /* Neutralize core flow sibling margins; gap is the SSOT. */
  margin-block-start:0;
}
.chot-chat:has(+ .chot-funnel-cta),
.wp-block-group.chot-chat:has(+ .chot-funnel-cta){
  /* CTA block owns the following gap. */
  margin-bottom:0;
}
@media(max-width:820px){
  .chot-article__body .wp-block-group.chot-chat,
  .wp-block-group.chot-chat{
    margin-bottom:44px;
    gap:24px;
  }
  .chot-chat:has(+ .chot-funnel-cta),
  .wp-block-group.chot-chat:has(+ .chot-funnel-cta){
    margin-bottom:0;
  }
}
.chot-reason p.chot-reason__meta{margin:0;font-size:18px}
/* CTA: reusable block spacing (same for every chot/cta funnel wrap). */
.chot-funnel-cta{display:flex;justify-content:center;margin:var(--chot-block-space) auto}
.chot-funnel-cta .chot-register-cta{min-height:66px}
/*
 * When a section ends on a funnel CTA, section padding-bottom + CTA
 * margin-bottom stacked as empty space. Keep one rhythm.
 * (CTA may sit inside Group inner-container, so :last-child is enough.)
 */
.chot-funnel-cta:last-child{
  margin-bottom:0;
}
.chot-value-close:has(.chot-funnel-cta:last-child){
  padding-bottom:40px;
}
.chot-manual-bridge{margin:48px 0 0;padding:36px 0 8px;border-top:1px solid var(--chot-border);text-align:center}
.chot-manual-bridge h2{margin:0 0 12px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:28px;line-height:1.5}
.chot-manual-bridge p{margin:0 auto 22px;max-width:520px;color:var(--chot-muted);font-size:15px;line-height:1.8}
.chot-manual-bridge .chot-register-cta{display:flex;margin-inline:auto}
@media(max-width:820px){
  .chot-manual-bridge{margin-top:36px;padding-top:28px}
  .chot-manual-bridge h2{font-size:24px}
}

/* SNS share: quiet secondary controls after primary CTA; not a second coral CTA. */
/* Article Discovery Phase 1: quieter than coral CTA; sits between closing CTA and share. */
.chot-discovery{margin:calc(var(--chot-block-space) * 1.15) auto 0;max-width:var(--chot-reading);width:100%}
.chot-discovery-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px 16px;align-items:center;padding:14px;border:1px solid var(--chot-border);border-radius:18px;background:var(--chot-surface);color:inherit;text-decoration:none;box-shadow:none;transition:border-color .18s ease,background .18s ease}
.chot-discovery-card:hover,.chot-discovery-card:focus-visible{border-color:#dfcfc6;background:#fffaf7;outline:none}
.chot-discovery-card:focus-visible{box-shadow:0 0 0 3px rgba(233,121,145,.28)}
.chot-discovery-card__media{display:block;width:112px;height:84px;border-radius:12px;overflow:hidden;background:var(--chot-pink-soft);flex-shrink:0}
.chot-discovery-card__img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.chot-discovery-card__body{display:grid;gap:4px;min-width:0}
.chot-discovery-card__eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.02em;line-height:1.5;color:var(--chot-muted)}
.chot-discovery-card__title{margin:0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:18px;font-weight:600;line-height:1.45;color:var(--chot-text)}
.chot-discovery-card__desc{margin:0;font-size:13px;line-height:1.7;color:var(--chot-muted)}
@media(max-width:820px){
  .chot-discovery{margin-top:calc(var(--chot-block-space) * 1)}
  .chot-discovery-card{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px;border-radius:16px}
  .chot-discovery-card__media{width:96px;height:72px;border-radius:10px}
  .chot-discovery-card__title{font-size:16px}
  .chot-discovery-card__desc{font-size:12px;line-height:1.65}
}

.chot-share{margin:calc(var(--chot-block-space) * 2) auto 8px;padding:28px 0 8px;border-top:1px solid var(--chot-border);text-align:center}
/* Auto-appended share sits after value-close (which already has a bottom border). */
.chot-article__body > .chot-share:last-child{border-top:0;margin-top:calc(var(--chot-block-space) * 1.5)}
.chot-share__title{margin:0 0 16px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:20px;font-weight:600;line-height:1.5;color:var(--chot-text)}
.chot-share__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chot-share__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 16px;border:1px solid var(--chot-border);border-radius:999px;background:#fff;color:var(--chot-text);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;box-shadow:none;appearance:none;font-family:inherit;transition:background .18s ease,border-color .18s ease,color .18s ease}
.chot-share__btn--x{background:#f3f3f3;border-color:#2f2f2f;color:#111}
.chot-share__btn--x:hover,.chot-share__btn--x:focus-visible{background:#e7e7e7;border-color:#111;outline:none}
.chot-share__btn--line{background:#eef8f0;border-color:#06c755;color:#06c755}
.chot-share__btn--line:hover,.chot-share__btn--line:focus-visible{background:#e0f3e5;border-color:#05b34c;outline:none}
.chot-share__btn--facebook{background:#eff4fb;border-color:#1877f2;color:#1877f2}
.chot-share__btn--facebook:hover,.chot-share__btn--facebook:focus-visible{background:#e4edf9;border-color:#0f66d8;outline:none}
.chot-share__btn--copy{background:var(--chot-pink-soft);border-color:var(--chot-pink);color:#b94f67}
.chot-share__btn--copy:hover,.chot-share__btn--copy:focus-visible{background:#ffe8ee;border-color:var(--chot-coral);color:#a63f57;outline:none}
.chot-share__status{margin:12px 0 0;min-height:1.4em;font-size:13px;color:var(--chot-muted)}
@media(max-width:820px){
  .chot-share{margin-top:calc(var(--chot-block-space) * 1.5);padding-top:22px}
  .chot-share__title{font-size:18px}
  .chot-share__list{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .chot-share__btn{width:100%;max-width:none;min-width:0;padding:0 10px;font-size:13px;white-space:nowrap}
}

/* Scroll reveal contract: opacity/transform only (no layout shift). */
.chot-js .chot-reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .55s ease-out var(--chot-reveal-delay,0ms),transform .55s cubic-bezier(.22,.61,.36,1) var(--chot-reveal-delay,0ms);
  will-change:opacity,transform;
}
.chot-js .chot-reveal--from-left{transform:translate3d(-12px,16px,0)}
.chot-js .chot-reveal--from-right{transform:translate3d(12px,16px,0)}
.chot-js .chot-reveal--from-bottom{transform:translate3d(0,18px,0)}
.chot-js .chot-reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
@media(prefers-reduced-motion:reduce){
  .chot-js .chot-reveal,
  .chot-js .chot-reveal--from-left,
  .chot-js .chot-reveal--from-right,
  .chot-js .chot-reveal--from-bottom{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}