/* ----------------------------------------
   OLTANA Writing Helper
   - Speech bubbles shortcode
   - Quote block + Table block + Accordion block styling
---------------------------------------- */

:root{
  /* Customizer で上書き（PHPで inline CSS 追加） */
  --owh-radius: 14px;
  --owh-quote-bg: #f3f3f3;

  --owh-quote-border-width: 1px;
  --owh-quote-border-color: #dddddd;

  --owh-table-border-width: 1px;
  --owh-table-border-color: #dddddd;

  --owh-accordion-border-width: 1px;
  --owh-accordion-border-color: #dddddd;
  --owh-accordion-heading-bg: #f3f3f3;
  --owh-accordion-heading-bg-active: #eceff2;

  --owh-bubble-bg: #ffffff;
  --owh-bubble-border: rgba(0,0,0,.18);
  --owh-text-muted: rgba(0,0,0,.6);

  --owh-table-head-bg: #f3f3f3;
  --owh-table-zebra: rgba(0,0,0,.02);
}

/* ================================
   ❶ Quote (引用ブロック)
================================ */
.owh-quote{
  margin: 1.2em 0;
  padding: 16px 20px;
  background: var(--owh-quote-bg);
  border: var(--owh-quote-border-width) solid var(--owh-quote-border-color);
  border-radius: var(--owh-radius);
}

.owh-quote > *:first-child{ margin-top:0; }
.owh-quote > *:last-child{ margin-bottom:0; }

/* エディタ側（ONのときだけ） */
body.owh-quote-on .editor-styles-wrapper blockquote.wp-block-quote,
body.owh-quote-on .editor-styles-wrapper .wp-block-quote{
  margin: 1.2em 0;
  padding: 16px 20px;
  background: var(--owh-quote-bg);
  border: var(--owh-quote-border-width) solid var(--owh-quote-border-color);
  border-radius: var(--owh-radius);
}
body.owh-quote-on .editor-styles-wrapper .wp-block-quote > *:first-child{ margin-top:0; }
body.owh-quote-on .editor-styles-wrapper .wp-block-quote > *:last-child{ margin-bottom:0; }

/* ================================
   ❷ Speech bubbles
================================ */
.owh-chat{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin: 1.1em 0;
}

.owh-chat.is-right{
  flex-direction: row-reverse;
}

.owh-chat__avatar{
  flex: 0 0 auto;
}

.owh-chat__avatar img,
.owh-chat__avatar--text{
  width:100px;     /* PC */
  height:100px;    /* PC */
  border-radius: 999px;
  border: none;
  background:#fff;
}

.owh-chat__avatar img{
  display:block;
  object-fit:cover;
}

.owh-chat__avatar--text{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  letter-spacing: .02em;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.owh-chat__body{
  min-width: 0;
}

.owh-chat__name{
  font-size: 12px;
  line-height: 1.2;
  margin: 2px 0 8px;
  color: var(--owh-text-muted);
}

.owh-chat__bubble{
  position: relative;
  padding: 18px 22px;
  background: var(--owh-bubble-bg);
  border: 1px solid var(--owh-bubble-border);
  border-radius: var(--owh-radius);
  max-width: 720px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.owh-chat__bubble > *:first-child{ margin-top:0; }
.owh-chat__bubble > *:last-child{ margin-bottom:0; }

.owh-chat__bubble::before{
  content:"";
  position:absolute;
  top: 26px;
  border: 9px solid transparent;
}
.owh-chat__bubble::after{
  content:"";
  position:absolute;
  top: 26px;
  border: 9px solid transparent;
}

.owh-chat.is-left .owh-chat__bubble::before{
  left: -18px;
  border-right-color: var(--owh-bubble-border);
}
.owh-chat.is-left .owh-chat__bubble::after{
  left: -17px;
  border-right-color: var(--owh-bubble-bg);
}

.owh-chat.is-right .owh-chat__bubble::before{
  right: -18px;
  border-left-color: var(--owh-bubble-border);
}
.owh-chat.is-right .owh-chat__bubble::after{
  right: -17px;
  border-left-color: var(--owh-bubble-bg);
}

@media (max-width: 480px){
  .owh-chat{
    gap:12px;
  }
  .owh-chat__avatar img,
  .owh-chat__avatar--text{
    width:80px;
    height:80px;
  }
  .owh-chat__bubble{
    padding: 16px 18px;
  }
}

/* ================================
   ❸ Table（崩れ対策 + モバイルは横スクロールをデフォルト）
================================ */
.owh-table{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2em 0;
}

/* 「スマホでは横にスクロールできます」アナウンス */
@media (max-width: 782px){
  .owh-table::before{
    content: "← 横にスクロールできます →";
    display: block;
    font-size: 12px;
    line-height: 1.2;
    color: var(--owh-text-muted);
    text-align: center;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: var(--owh-table-border-width) solid var(--owh-table-border-color);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
  }
}

/* 外枠は table 側で1本だけ */
.owh-table table,
table.owh-table__table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: var(--owh-table-border-width) solid var(--owh-table-border-color);
  border-radius: var(--owh-radius);
  overflow: hidden;
  background: #fff;
  table-layout: auto !important;
}

/* セルは「右」「下」だけ */
.owh-table th,
.owh-table td,
table.owh-table__table th,
table.owh-table__table td{
  border: 0 !important;
  border-right: var(--owh-table-border-width) solid var(--owh-table-border-color);
  border-bottom: var(--owh-table-border-width) solid var(--owh-table-border-color);
  padding: 16px 20px;
  vertical-align: top;
}

/* 最後の列：右線OFF */
.owh-table tr > *:last-child,
table.owh-table__table tr > *:last-child{
  border-right: 0;
}

/* 最後の行：下線OFF */
.owh-table tr:last-child > *,
table.owh-table__table tr:last-child > *{
  border-bottom: 0;
}

/* ヘッダー */
.owh-table thead th,
table.owh-table__table thead th{
  background: var(--owh-table-head-bg);
  font-weight: 600;
}

/* 任意：薄いゼブラ */
.owh-table tbody tr:nth-child(even) > *,
table.owh-table__table tbody tr:nth-child(even) > *{
  background: var(--owh-table-zebra);
}

/* モバイル：テーブルが潰れないように「横スクロール前提」にする */
@media (max-width: 782px){
  .owh-table table,
  table.owh-table__table{
    width: max-content;
    min-width: 600px;
    max-width: none;
  }

  .owh-table th,
  .owh-table td,
  table.owh-table__table th,
  table.owh-table__table td{
    min-width: 120px;
    padding: 14px 16px;
  }
}

/* エディタ側（ONのときだけ） */
body.owh-table-on .editor-styles-wrapper figure.wp-block-table{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2em 0;
}
body.owh-table-on .editor-styles-wrapper figure.wp-block-table table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: var(--owh-table-border-width) solid var(--owh-table-border-color);
  border-radius: var(--owh-radius);
  overflow: hidden;
  background: #fff;
  table-layout: auto !important;
}
body.owh-table-on .editor-styles-wrapper figure.wp-block-table th,
body.owh-table-on .editor-styles-wrapper figure.wp-block-table td{
  border: 0 !important;
  border-right: var(--owh-table-border-width) solid var(--owh-table-border-color);
  border-bottom: var(--owh-table-border-width) solid var(--owh-table-border-color);
  padding: 16px 20px;
  vertical-align: top;
}
body.owh-table-on .editor-styles-wrapper figure.wp-block-table tr > *:last-child{ border-right: 0; }
body.owh-table-on .editor-styles-wrapper figure.wp-block-table tr:last-child > *{ border-bottom: 0; }
body.owh-table-on .editor-styles-wrapper figure.wp-block-table thead th{
  background: var(--owh-table-head-bg);
  font-weight: 600;
}

/* ================================
   ❹ Accordion（WordPress 6.9〜）
   - フロント：render_block で .owh-accordion を付与してスタイル適用
   - エディタ：body.owh-accordion-on のときに .wp-block-accordion をスタイル
   フラットで、table/quote と親和性の高いデザイン
================================ */

/* フロント（有効時） */
.owh-accordion{
  display: grid;
  gap: 12px;
  margin: 1.2em 0;
}

.owh-accordion .wp-block-accordion-item{
  border: var(--owh-accordion-border-width) solid var(--owh-accordion-border-color);
  border-radius: var(--owh-radius);
  overflow: hidden;
  background: #fff;
}

.owh-accordion .wp-block-accordion-heading{
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.owh-accordion .wp-block-accordion-heading__toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--owh-accordion-heading-bg);
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.owh-accordion .wp-block-accordion-heading__toggle:hover,
.owh-accordion .wp-block-accordion-heading__toggle:focus{
  background: var(--owh-accordion-heading-bg-active);
}

.owh-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle{
  background: var(--owh-accordion-heading-bg-active);
}

.owh-accordion .wp-block-accordion-heading__toggle:focus-visible{
  outline: 2px solid rgba(0,0,0,.2);
  outline-offset: 2px;
}

.owh-accordion .wp-block-accordion-heading__toggle-title{
  flex: 1 1 auto;
  min-width: 0;
}

.owh-accordion .wp-block-accordion-heading__toggle-icon{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: var(--owh-accordion-border-width) solid var(--owh-accordion-border-color);
  background: #fff;
  color: rgba(0,0,0,.7);
  font-weight: 700;
  line-height: 1;
  transition: transform .16s ease;
}

.owh-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon{
  transform: rotate(45deg);
}

.owh-accordion .wp-block-accordion-panel{
  padding: 14px 16px;
  border-top: var(--owh-accordion-border-width) solid var(--owh-accordion-border-color);
  background: #fff;
}

.owh-accordion .wp-block-accordion-panel > *:first-child{ margin-top: 0; }
.owh-accordion .wp-block-accordion-panel > *:last-child{ margin-bottom: 0; }

@media (max-width: 782px){
  .owh-accordion{
    gap: 10px;
  }
  .owh-accordion .wp-block-accordion-heading__toggle{
    padding: 12px 14px;
  }
  .owh-accordion .wp-block-accordion-panel{
    padding: 12px 14px;
  }
}

/* エディタ側（有効時） */
body.owh-accordion-on .editor-styles-wrapper .wp-block-accordion{
  display: grid;
  gap: 12px;
  margin: 1.2em 0;
}

body.owh-accordion-on .editor-styles-wrapper .wp-block-accordion .wp-block-accordion-item{
  border: var(--owh-accordion-border-width) solid var(--owh-accordion-border-color);
  border-radius: var(--owh-radius);
  overflow: hidden;
  background: #fff;
}

body.owh-accordion-on .editor-styles-wrapper .wp-block-accordion .wp-block-accordion-heading{
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

body.owh-accordion-on .editor-styles-wrapper .wp-block-accordion .wp-block-accordion-heading__toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--owh-accordion-heading-bg);
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

body.owh-accordion-on .editor-styles-wrapper .wp-block-accordion .wp-block-accordion-heading__toggle:hover,
body.owh-accordion-on .editor-styles-wrapper .wp-block-accordion .wp-block-accordion-heading__toggle:focus{
  background: var(--owh-accordion-heading-bg-active);
}

body.owh-accordion-on .editor-styles-wrapper .wp-block-accordion .wp-block-accordion-heading__toggle-icon{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: var(--owh-accordion-border-width) solid var(--owh-accordion-border-color);
  background: #fff;
  color: rgba(0,0,0,.7);
  font-weight: 700;
  line-height: 1;
}