/* ================================================================
   STORK19 Block Compatibility CSS
   Existing article HTML (.cbox, .supplement, .voice, .oc-faq)
   styled with CSS variables for seamless theme migration.
   ================================================================ */

/* === CSS Variables for STORK19 blocks === */
:root {
    --main-ttl-bg: var(--oc-primary);
    --main-ttl-color: #fff;
    --main-ttl-bg-rgba: var(--oc-primary);
    --stk-box-border_width: 2px;
    --stk-box-border_radius: 0.2em;
    --stk-editor-color1: var(--oc-primary);
    --stk-editor-color2: var(--oc-secondary);
    --stk-editor-color3: var(--oc-accent, #f59e0b);
}

/* ================================================================
   CBOX — Colored box with optional title
   Supports both STORK19 raw classes (.cbox.blue_box) and
   Orchestra is-style- classes (.cbox.is-style-blue_box).
   ================================================================ */
.cbox {
    border: var(--stk-box-border_width) solid var(--main-ttl-bg);
    border-radius: var(--stk-box-border_radius);
    margin: 1.5em 0;
    overflow: hidden;
}

.cbox .box_title {
    background: var(--main-ttl-bg);
    color: var(--main-ttl-color);
    padding: 6px 16px;
    font-size: .85rem;
    font-weight: 700;
}

.cbox .cboxcomment {
    padding: 16px;
    line-height: 1.7;
}

/* STORK19 type variations */
.cbox.ttl .box_title,
.cbox.type_ttl .box_title {
    text-align: center;
}

.cbox.simple,
.cbox.type_simple {
    border: none;
    background: rgba(128,128,128,.06);
}

.cbox.simple .box_title,
.cbox.type_simple .box_title {
    background: none;
    color: var(--main-ttl-bg);
    border-bottom: 1px solid var(--oc-border);
}

/* Color variants — STORK19 raw classes */
.cbox.site_color  { --main-ttl-bg: var(--oc-primary); --main-ttl-color: #fff; }
.cbox.blue_box    { --main-ttl-bg: #5b9bd5; --main-ttl-color: #fff; }
.cbox.red_box     { --main-ttl-bg: #e74c3c; --main-ttl-color: #fff; }
.cbox.yellow_box  { --main-ttl-bg: #f1c40f; --main-ttl-color: #333; }
.cbox.green_box   { --main-ttl-bg: #27ae60; --main-ttl-color: #fff; }
.cbox.pink_box    { --main-ttl-bg: #e91e63; --main-ttl-color: #fff; }
.cbox.glay_box    { --main-ttl-bg: #95a5a6; --main-ttl-color: #fff; }
.cbox.black_box   { --main-ttl-bg: #333; --main-ttl-color: #fff; }
.cbox.editor_color1 { --main-ttl-bg: var(--stk-editor-color1); --main-ttl-color: #fff; }
.cbox.editor_color2 { --main-ttl-bg: var(--stk-editor-color2); --main-ttl-color: #fff; }
.cbox.editor_color3 { --main-ttl-bg: var(--stk-editor-color3); --main-ttl-color: #fff; }

/* Color variants — is-style- prefix (legacy Orchestra output) */
.cbox.is-style-site_color  { --main-ttl-bg: var(--oc-primary); --main-ttl-color: #fff; }
.cbox.is-style-blue_box    { --main-ttl-bg: #5b9bd5; --main-ttl-color: #fff; }
.cbox.is-style-red_box     { --main-ttl-bg: #e74c3c; --main-ttl-color: #fff; }
.cbox.is-style-yellow_box  { --main-ttl-bg: #f1c40f; --main-ttl-color: #333; }
.cbox.is-style-green_box   { --main-ttl-bg: #27ae60; --main-ttl-color: #fff; }
.cbox.is-style-pink_box    { --main-ttl-bg: #e91e63; --main-ttl-color: #fff; }
.cbox.is-style-glay_box    { --main-ttl-bg: #95a5a6; --main-ttl-color: #fff; }
.cbox.is-style-black_box   { --main-ttl-bg: #333; --main-ttl-color: #fff; }

/* List icons inside cbox */
.cbox.list-icon-box_color ul li::before {
    background: var(--main-ttl-bg);
}

/* ================================================================
   VOICE / BALLOON — Speech bubbles
   STORK19 default: border-based (not flat bg)
   ================================================================ */
.voice {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 1.5em 0;
}

.voice.r {
    flex-direction: row-reverse;
}

.voice .icon {
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    margin: 0;
}

.voice.big .icon {
    width: 100px;
}

/* === Icon image — default border uses STORK19 #f5f5f5 === */
.voice .voice_icon__img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #f5f5f5;
    object-fit: cover;
}

/* Icon border colors — class on .voice wrapper (STORK19 pattern) */
.voice.icon_default .voice_icon__img    { border-color: #f5f5f5; }
.voice.icon_red .voice_icon__img        { border-color: #ec6565; }
.voice.icon_blue .voice_icon__img       { border-color: #418ed8; }
.voice.icon_yellow .voice_icon__img     { border-color: #fbf79f; }
.voice.icon_black .voice_icon__img      { border-color: #222; }
.voice.icon_color_none .voice_icon__img { border-color: transparent; }

.voice .avatar-name {
    display: block;
    font-size: .7rem;
    color: var(--oc-text-muted);
    margin-top: 4px;
}

/* === Bubble — STORK19 default is border-based === */
.voice .voicecomment {
    position: relative;
    flex: 1;
    background: transparent;
    border: 5px solid rgba(213,213,213,0.5);
    border-radius: 12px;
    padding: 16px;
    line-height: 1.7;
}

/* Triangle arrow */
.voice .voicecomment::before,
.voice .voicecomment::after {
    content: '';
    position: absolute;
    top: 16px;
    border: 8px solid transparent;
}

/* Left arrow (outer border) */
.voice.l .voicecomment::before {
    left: -21px;
    border-right-color: rgba(213,213,213,0.5);
}
/* Left arrow (inner fill) */
.voice.l .voicecomment::after {
    left: -11px;
    border-right-color: #fff;
}

/* Right arrow (outer border) */
.voice.r .voicecomment::before {
    right: -21px;
    border-left-color: rgba(213,213,213,0.5);
}
/* Right arrow (inner fill) */
.voice.r .voicecomment::after {
    right: -11px;
    border-left-color: #fff;
}

/* === Voice color variants — STORK19 colors === */

/* Facebook / Blue */
.voice.fb .voicecomment,
.voice.comment_blue .voicecomment {
    background: #418ed8;
    border-color: #418ed8;
    color: #fff;
}
.voice.fb.l .voicecomment::before,
.voice.comment_blue.l .voicecomment::before { border-right-color: #418ed8; }
.voice.fb.l .voicecomment::after,
.voice.comment_blue.l .voicecomment::after  { border-right-color: #418ed8; }
.voice.fb.r .voicecomment::before,
.voice.comment_blue.r .voicecomment::before { border-left-color: #418ed8; }
.voice.fb.r .voicecomment::after,
.voice.comment_blue.r .voicecomment::after  { border-left-color: #418ed8; }

/* LINE / Green */
.voice.line .voicecomment,
.voice.comment_green .voicecomment {
    background: #7ACC40;
    border-color: #7ACC40;
    color: #fff;
}
.voice.line.l .voicecomment::before,
.voice.comment_green.l .voicecomment::before { border-right-color: #7ACC40; }
.voice.line.l .voicecomment::after,
.voice.comment_green.l .voicecomment::after  { border-right-color: #7ACC40; }
.voice.line.r .voicecomment::before,
.voice.comment_green.r .voicecomment::before { border-left-color: #7ACC40; }
.voice.line.r .voicecomment::after,
.voice.comment_green.r .voicecomment::after  { border-left-color: #7ACC40; }

/* Gray */
.voice.comment_gray .voicecomment {
    background: #eee;
    border-color: #eee;
    color: #222;
}
.voice.comment_gray.l .voicecomment::before { border-right-color: #eee; }
.voice.comment_gray.l .voicecomment::after  { border-right-color: #eee; }
.voice.comment_gray.r .voicecomment::before { border-left-color: #eee; }
.voice.comment_gray.r .voicecomment::after  { border-left-color: #eee; }

/* Pink */
.voice.comment_pink .voicecomment {
    background: #ffecec;
    border-color: #ffecec;
}
.voice.comment_pink.l .voicecomment::before { border-right-color: #ffecec; }
.voice.comment_pink.l .voicecomment::after  { border-right-color: #ffecec; }
.voice.comment_pink.r .voicecomment::before { border-left-color: #ffecec; }
.voice.comment_pink.r .voicecomment::after  { border-left-color: #ffecec; }

/* Yellow */
.voice.comment_yellow .voicecomment {
    background: #fbf79f;
    border-color: #fbf79f;
}
.voice.comment_yellow.l .voicecomment::before { border-right-color: #fbf79f; }
.voice.comment_yellow.l .voicecomment::after  { border-right-color: #fbf79f; }
.voice.comment_yellow.r .voicecomment::before { border-left-color: #fbf79f; }
.voice.comment_yellow.r .voicecomment::after  { border-left-color: #fbf79f; }

/* White */
.voice.comment_white .voicecomment {
    background: #fff;
    border-color: #fff;
    color: #222;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.voice.comment_white.l .voicecomment::before { border-right-color: #fff; }
.voice.comment_white.l .voicecomment::after  { border-right-color: #fff; }
.voice.comment_white.r .voicecomment::before { border-left-color: #fff; }
.voice.comment_white.r .voicecomment::after  { border-left-color: #fff; }

/* Width variants */
.voice.width_full { max-width: 100%; }
.voice.width_full .voicecomment { width: 100%; }
.voice.width_stretch .icon { width: 60px; }

/* Dark theme adjustments */
.oc-dark .voice .voicecomment {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
}
.oc-dark .voice.l .voicecomment::before { border-right-color: rgba(255,255,255,.15); }
.oc-dark .voice.l .voicecomment::after  { border-right-color: rgba(255,255,255,.08); }
.oc-dark .voice.r .voicecomment::before { border-left-color: rgba(255,255,255,.15); }
.oc-dark .voice.r .voicecomment::after  { border-left-color: rgba(255,255,255,.08); }

/* ================================================================
   SUPPLEMENT — Info box
   6 styles: default, succes, warning, memo, hint, border
   ================================================================ */
.supplement {
    border: 1px solid hsla(0,0%,84%,.5);
    border-radius: var(--stk-box-border_radius);
    padding: 20px;
    margin: 1.5em 0;
    background: rgba(128,128,128,.03);
    font-size: .92rem;
    line-height: 1.7;
}

.supplement p { margin-top: .5em; }
.supplement p:first-child { margin-top: 0; }

.supplement ul.--in-suppl {
    list-style: none;
    padding-left: 1.2em;
}

/* Supplement style variants (STORK19 raw class + is-style- prefix) */
.supplement.succes,
.supplement.is-style-succes {
    border-left: 4px solid #27ae60;
    background: rgba(39,174,96,.05);
}

.supplement.warning,
.supplement.is-style-warning {
    border-left: 4px solid #e74c3c;
    background: rgba(231,76,60,.05);
}

.supplement.memo,
.supplement.is-style-memo {
    border-left: 4px solid #f1c40f;
    background: rgba(241,196,15,.05);
}

.supplement.hint,
.supplement.is-style-hint {
    border-left: 4px solid #3498db;
    background: rgba(52,152,219,.05);
}

.supplement.border,
.supplement.is-style-border {
    border: 1px solid var(--oc-border);
    background: transparent;
}

/* ================================================================
   FAQ — Question & Answer
   ================================================================ */
.oc-faq {
    margin: 1.5em 0;
}

.oc-faq__title,
.oc-faq__comment {
    position: relative;
    padding: 12px 12px 12px max(2.2em, 22px);
    line-height: 1.7;
}

.oc-faq__title::before,
.oc-faq__comment::before {
    position: absolute;
    left: 0;
    top: 12px;
    width: max(1.8em, 18px);
    height: max(1.8em, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    border-radius: 4px;
}

.oc-faq__title {
    font-weight: 700;
}

.oc-faq__title::before {
    content: 'Q';
    background: linear-gradient(135deg, #f55e5e, #ff8a80);
    color: #fff;
}

.oc-faq__comment::before {
    content: 'A';
    background: linear-gradient(135deg, #1bb4d4, #4dd0e1);
    color: #fff;
}

/* Icon styles */
.faq-icon--simple .oc-faq__title::before { background: linear-gradient(135deg, #f55e5e, #ff8a80); }
.faq-icon--simple .oc-faq__comment::before { background: linear-gradient(135deg, #1bb4d4, #4dd0e1); }

.faq-icon--bg_themecolor .oc-faq__title::before { background: var(--main-ttl-bg); }
.faq-icon--bg_themecolor .oc-faq__comment::before { background: var(--main-ttl-bg); opacity: .6; }

.faq-icon--bg_monoqlo .oc-faq__title::before { background: #333; color: #fff; }
.faq-icon--bg_monoqlo .oc-faq__comment::before { background: #f5f5f5; color: #333; }

.faq-icon--border .oc-faq__title::before {
    background: none;
    border: 2px solid #f55e5e;
    color: #f55e5e;
}

.faq-icon--border .oc-faq__comment::before {
    background: none;
    border: 2px solid #1bb4d4;
    color: #1bb4d4;
}

/* Radius */
.faq-icon--radius_none .oc-faq__title::before,
.faq-icon--radius_none .oc-faq__comment::before { border-radius: 0; }

.faq-icon--radius_kadomaru .oc-faq__title::before,
.faq-icon--radius_kadomaru .oc-faq__comment::before { border-radius: 4px; }

.faq-icon--radius_maru .oc-faq__title::before,
.faq-icon--radius_maru .oc-faq__comment::before { border-radius: 50%; }

/* Box styles — raw class (STORK19 output) + is-style- prefix (legacy) */
.oc-faq.faq_type_border,
.oc-faq.is-style-faq_type_border {
    border: 2px solid var(--oc-border);
    border-radius: var(--stk-box-border_radius);
    padding: 8px;
}

.oc-faq.faq_type_border__dot,
.oc-faq.is-style-faq_type_border__dot {
    border: 2px dashed var(--oc-border);
    border-radius: var(--stk-box-border_radius);
    padding: 8px;
}

.oc-faq.faq_type_bg1,
.oc-faq.is-style-faq_type_bg1 {
    background: rgba(59,130,246,.08);
    border-radius: var(--stk-box-border_radius);
    padding: 8px;
}

.oc-faq.faq_type_bg2,
.oc-faq.is-style-faq_type_bg2 {
    background: hsla(0,0%,40%,.1);
    border-radius: var(--stk-box-border_radius);
    padding: 8px;
}

.oc-faq.faq_type_bg3,
.oc-faq.is-style-faq_type_bg3 {
    background: #fff;
    border-radius: var(--stk-box-border_radius);
    padding: 8px;
}

/* Accordion */
.oc-faq .accordion_check { display: none; }

.oc-faq .faq__label {
    cursor: pointer;
    display: block;
}

.oc-faq .accordion_check ~ .oc-faq__comment {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.oc-faq .accordion_check:checked ~ .oc-faq__comment {
    max-height: 2000px;
}

/* ================================================================
   KANREN — Related post link card
   ================================================================ */
.kanren {
    display: block;
    border: 1px solid var(--oc-border);
    border-radius: var(--stk-box-border_radius);
    overflow: hidden;
    margin: 1.5em 0;
    transition: box-shadow .2s;
}

.kanren:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.kanren .thumb {
    float: left;
    width: 200px;
}

.kanren .thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.kanren .text {
    overflow: hidden;
    padding: 16px;
}

.kanren .text .entry-title {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ================================================================
   Additional blocks (minimal styling)
   ================================================================ */

/* Grid */
.wp-block-stk-plugin-grid {
    display: grid;
    gap: 16px;
    margin: 1.5em 0;
}

/* Step */
.wp-block-stk-plugin-step {
    margin: 1.5em 0;
    counter-reset: step;
}

.wp-block-stk-plugin-step-child {
    position: relative;
    padding-left: 48px;
    margin-bottom: 24px;
    counter-increment: step;
}

.wp-block-stk-plugin-step-child::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: var(--oc-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
}

/* Tab */
.wp-block-stk-plugin-tab {
    margin: 1.5em 0;
}

/* Link card */
.wp-block-stk-plugin-linkcard {
    border: 1px solid var(--oc-border);
    border-radius: var(--stk-box-border_radius);
    padding: 16px;
    margin: 1.5em 0;
}

/* ================================================================
   Mobile adjustments
   ================================================================ */
@media (max-width: 480px) {
    .voice .icon { width: 60px; }
    .voice .voice_icon__img { width: 48px; height: 48px; }
    .voice.big .icon { width: 70px; }

    .kanren .thumb { float: none; width: 100%; }
    .kanren .thumb img { height: 160px; }
}