/**
 * WordPress Block Editor (Gutenberg) - Frontend Styles
 *
 * Headless WP ではブロックエディタの CSS が自動読み込みされないため、
 * フロント側で必要なスタイルを定義する。
 */

/* =========================================================================
   1. Text Colors (Gutenberg default palette)
   ========================================================================= */
.has-pale-pink-color              { color: #f78da7 !important; }
.has-vivid-red-color              { color: #cf2e2e !important; }
.has-luminous-vivid-orange-color  { color: #ff6900 !important; }
.has-luminous-vivid-amber-color   { color: #fcb900 !important; }
.has-light-green-cyan-color       { color: #7bdcb5 !important; }
.has-vivid-green-cyan-color       { color: #00d084 !important; }
.has-pale-cyan-blue-color         { color: #8ed1fc !important; }
.has-vivid-cyan-blue-color        { color: #0693e3 !important; }
.has-vivid-purple-color           { color: #9b51e0 !important; }
.has-white-color                  { color: #ffffff !important; }
.has-cyan-bluish-gray-color       { color: #abb8c3 !important; }
.has-black-color                  { color: #000000 !important; }

/* has-link-color: リンクも親要素のテキストカラーを継承 */
.has-link-color a {
    color: inherit !important;
}
/* wp-elements-xxx は WP が動的生成するクラス。ヘッドレスでは適用されないため
   has-link-color + has-text-color の組み合わせでリンク色をカバーする */
.has-text-color.has-link-color a:hover {
    opacity: 0.75;
}

/* =========================================================================
   2. Background Colors
   ========================================================================= */
.has-background {}
.has-pale-pink-background-color              { background-color: #f78da7 !important; }
.has-vivid-red-background-color              { background-color: #cf2e2e !important; }
.has-luminous-vivid-orange-background-color  { background-color: #ff6900 !important; }
.has-luminous-vivid-amber-background-color   { background-color: #fcb900 !important; }
.has-light-green-cyan-background-color       { background-color: #7bdcb5 !important; }
.has-vivid-green-cyan-background-color       { background-color: #00d084 !important; }
.has-pale-cyan-blue-background-color         { background-color: #8ed1fc !important; }
.has-vivid-cyan-blue-background-color        { background-color: #0693e3 !important; }
.has-vivid-purple-background-color           { background-color: #9b51e0 !important; }
.has-white-background-color                  { background-color: #ffffff !important; }
.has-cyan-bluish-gray-background-color       { background-color: #abb8c3 !important; }
.has-black-background-color                  { background-color: #000000 !important; }

/* =========================================================================
   3. Font Sizes
   ========================================================================= */
.has-small-font-size    { font-size: 13px !important; }
.has-regular-font-size  { font-size: 16px !important; }
.has-medium-font-size   { font-size: 20px !important; }
.has-large-font-size    { font-size: 36px !important; }
.has-x-large-font-size  { font-size: 42px !important; }

/* =========================================================================
   4. Text Alignment
   ========================================================================= */
.has-text-align-left    { text-align: left; }
.has-text-align-center  { text-align: center; }
.has-text-align-right   { text-align: right; }

/* =========================================================================
   5. Block: Paragraph / Common
   ========================================================================= */
.has-drop-cap:not(:focus)::first-letter {
    float: left;
    font-size: 8.4em;
    line-height: 0.68;
    font-weight: 100;
    margin: 0.05em 0.1em 0 0;
    text-transform: uppercase;
    font-style: normal;
}

/* =========================================================================
   5a. Block: Heading
   ========================================================================= */
.wp-block-heading {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

/* =========================================================================
   6. Block: Image
   ========================================================================= */
.wp-block-image {
    margin-bottom: 1em;
}
.wp-block-image img {
    max-width: 100%;
    height: auto;
}
.wp-block-image figcaption {
    margin-top: 0.5em;
    color: #555;
    text-align: center;
    font-size: 13px;
}
.wp-block-image.alignleft {
    float: left;
    margin-right: 1em;
}
.wp-block-image.alignright {
    float: right;
    margin-left: 1em;
}
.wp-block-image.aligncenter {
    text-align: center;
}

/* =========================================================================
   7. Block: Quote
   ========================================================================= */
.wp-block-quote {
    border-left: 4px solid #000;
    margin: 1.5em 0;
    padding: 0.5em 1em;
}
.wp-block-quote cite,
.wp-block-quote footer {
    font-style: normal;
    font-size: 13px;
    color: #6c757d;
}
.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
    border: none;
    padding: 0 1em;
}
.wp-block-quote.is-style-large p,
.wp-block-quote.is-large p {
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.6;
}

/* =========================================================================
   8. Block: List
   ========================================================================= */
.wp-block-list {
    padding-left: 1.5em;
}

/* =========================================================================
   9. Block: Table (WP公式 wp-includes/blocks/table/style.min.css 準拠)
   ========================================================================= */
.wp-block-table {
    overflow-x: auto;
    margin-bottom: 1em;
}
.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}
.wp-block-table thead {
    border-bottom: 3px solid;
}
.wp-block-table tfoot {
    border-top: 3px solid;
}
.wp-block-table td,
.wp-block-table th {
    border: 1px solid;
    padding: 0.5em;
}
.wp-block-table .has-fixed-layout {
    table-layout: fixed;
    width: 100%;
}
.wp-block-table .has-fixed-layout td,
.wp-block-table .has-fixed-layout th {
    word-break: break-word;
}
.wp-block-table.aligncenter,
.wp-block-table.alignleft,
.wp-block-table.alignright {
    display: table;
    width: auto;
}
.wp-block-table.aligncenter td,
.wp-block-table.aligncenter th,
.wp-block-table.alignleft td,
.wp-block-table.alignleft th,
.wp-block-table.alignright td,
.wp-block-table.alignright th {
    word-break: break-word;
}
/* テーブル用 背景色プリセット */
.wp-block-table .has-subtle-light-gray-background-color { background-color: #f3f4f5; }
.wp-block-table .has-subtle-pale-green-background-color { background-color: #e9fbe5; }
.wp-block-table .has-subtle-pale-blue-background-color  { background-color: #e7f5fe; }
.wp-block-table .has-subtle-pale-pink-background-color  { background-color: #fcf0ef; }
/* ストライプスタイル */
.wp-block-table.is-style-stripes {
    background-color: initial;
    border-collapse: inherit;
    border-spacing: 0;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f0;
}
.wp-block-table.is-style-stripes.has-subtle-light-gray-background-color tbody tr:nth-child(odd) { background-color: #f3f4f5; }
.wp-block-table.is-style-stripes.has-subtle-pale-green-background-color tbody tr:nth-child(odd) { background-color: #e9fbe5; }
.wp-block-table.is-style-stripes.has-subtle-pale-blue-background-color tbody tr:nth-child(odd)  { background-color: #e7f5fe; }
.wp-block-table.is-style-stripes.has-subtle-pale-pink-background-color tbody tr:nth-child(odd)  { background-color: #fcf0ef; }
.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
    border-color: transparent;
}
.wp-block-table.is-style-stripes {
    border-bottom: 1px solid #f0f0f0;
}
/* ボーダー色の継承 */
.wp-block-table .has-border-color td,
.wp-block-table .has-border-color th,
.wp-block-table .has-border-color tr,
.wp-block-table .has-border-color > * {
    border-color: inherit;
}
.wp-block-table table[style*=border-top-color] tr:first-child,
.wp-block-table table[style*=border-top-color] tr:first-child td,
.wp-block-table table[style*=border-top-color] tr:first-child th,
.wp-block-table table[style*=border-top-color] > *,
.wp-block-table table[style*=border-top-color] > * td,
.wp-block-table table[style*=border-top-color] > * th {
    border-top-color: inherit;
}
.wp-block-table table[style*=border-top-color] tr:not(:first-child) {
    border-top-color: initial;
}
.wp-block-table table[style*=border-right-color] td:last-child,
.wp-block-table table[style*=border-right-color] th,
.wp-block-table table[style*=border-right-color] tr,
.wp-block-table table[style*=border-right-color] > * {
    border-right-color: inherit;
}
.wp-block-table table[style*=border-bottom-color] tr:last-child,
.wp-block-table table[style*=border-bottom-color] tr:last-child td,
.wp-block-table table[style*=border-bottom-color] tr:last-child th,
.wp-block-table table[style*=border-bottom-color] > *,
.wp-block-table table[style*=border-bottom-color] > * td,
.wp-block-table table[style*=border-bottom-color] > * th {
    border-bottom-color: inherit;
}
.wp-block-table table[style*=border-bottom-color] tr:not(:last-child) {
    border-bottom-color: initial;
}
.wp-block-table table[style*=border-left-color] td:first-child,
.wp-block-table table[style*=border-left-color] th,
.wp-block-table table[style*=border-left-color] tr,
.wp-block-table table[style*=border-left-color] > * {
    border-left-color: inherit;
}
.wp-block-table table[style*=border-style] td,
.wp-block-table table[style*=border-style] th,
.wp-block-table table[style*=border-style] tr,
.wp-block-table table[style*=border-style] > * {
    border-style: inherit;
}
.wp-block-table table[style*=border-width] td,
.wp-block-table table[style*=border-width] th,
.wp-block-table table[style*=border-width] tr,
.wp-block-table table[style*=border-width] > * {
    border-style: inherit;
    border-width: inherit;
}

/* =========================================================================
   10. Block: Separator
   ========================================================================= */
.wp-block-separator {
    border: none;
    border-bottom: 2px solid currentColor;
    margin: 1.5em auto;
    opacity: 0.4;
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    max-width: 100px;
}
.wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
    max-width: none;
    line-height: 1;
    height: auto;
}
.wp-block-separator.is-style-dots::before {
    content: "\00b7 \00b7 \00b7";
    font-size: 1.5em;
    letter-spacing: 2em;
    padding-left: 2em;
    font-family: serif;
    color: currentColor;
}

/* =========================================================================
   11. Block: Columns
   ========================================================================= */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    margin-bottom: 1em;
}
.wp-block-column {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 781px) {
    .wp-block-columns {
        flex-wrap: wrap;
    }
    .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* =========================================================================
   12. Block: Button / Buttons
   ========================================================================= */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}
.wp-block-button .wp-block-button__link {
    display: inline-block;
    padding: 0.76em 1.3em;
    text-decoration: none;
    font-size: 1.125em;
    line-height: 1.2;
    border-radius: 0;
    cursor: pointer;
}
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid currentColor;
}

/* =========================================================================
   13. Block: Cover
   ========================================================================= */
.wp-block-cover {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}
.wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
    width: 100%;
    color: #fff;
}

/* =========================================================================
   14. Block: Group
   ========================================================================= */
.wp-block-group {
    box-sizing: border-box;
    margin-bottom: 1em;
}
.wp-block-group.has-background {
    padding: 1.25em 2.375em;
    border-radius: 4px;
}
.wp-block-group__inner-container {
    max-width: 100%;
}
.wp-block-group__inner-container > *:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   14a. Layout: constrained (WP 6.1+)
   ========================================================================= */
.is-layout-constrained > * {
    max-width: 100%;
}
.is-layout-constrained > *:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   15. Block: Code / Preformatted
   ========================================================================= */
.wp-block-code {
    font-family: Menlo, Consolas, monaco, monospace;
    font-size: 0.9em;
    padding: 0.8em 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow-x: auto;
}
.wp-block-preformatted {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* =========================================================================
   16. Block: Pullquote
   ========================================================================= */
.wp-block-pullquote {
    border-top: 4px solid currentColor;
    border-bottom: 4px solid currentColor;
    margin-bottom: 1.75em;
    padding: 2em 0;
    text-align: center;
}
.wp-block-pullquote blockquote {
    margin: 0;
    border: none;
}
.wp-block-pullquote p {
    font-size: 1.5em;
    line-height: 1.6;
}

/* =========================================================================
   17. Block: Gallery
   ========================================================================= */
.wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    list-style: none;
    padding: 0;
}
.wp-block-gallery .wp-block-image {
    flex-grow: 1;
    margin: 0;
}

/* =========================================================================
   18. Block: Embed / Video
   ========================================================================= */
.wp-block-embed {
    margin-bottom: 1em;
}
.wp-block-embed .wp-block-embed__wrapper {
    position: relative;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}
.wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =========================================================================
   19. Inline Styles Support
   ========================================================================= */
/* WordPress may apply inline styles via style attribute directly.
   These are already handled by {!! $article->description !!}.
   The following ensures inline color/background from the editor's
   custom color picker (non-preset) renders correctly. */

/* =========================================================================
   20. Utility: alignfull / alignwide
   ========================================================================= */
.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}