/*
 Editor style for makotoyoshii theme
 Purpose: provide a comprehensive set of default Gutenberg block styles that
 mirror WordPress core's `wp-block-library` so the editor appearance matches
 the front-end. This file is intended to be replaced by SCSS later; keep the
 structure and comments to make conversion straightforward.
*/

/* ==========================================================================
   Reset / base for editor/content area
   ========================================================================== */
.editor-styles-wrapper,
.entry-content {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: #222;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Make images, embeds responsive in editor and front-end */
.editor-styles-wrapper img,
.entry-content img,
.editor-styles-wrapper .wp-block-image img,
.entry-content .wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* Paragraphs */
.editor-styles-wrapper p,
.entry-content p { margin: 0 0 1.25em; }

/* Headings */
.editor-styles-wrapper h1,
.entry-content h1 { font-size: 2.25rem; margin: 1.2em 0 0.6em; font-weight: 600; }
.editor-styles-wrapper h2,
.entry-content h2 { font-size: 1.75rem; margin: 1.1em 0 0.55em; font-weight: 600; }
.editor-styles-wrapper h3,
.entry-content h3 { font-size: 1.35rem; margin: 1em 0 0.5em; font-weight: 600; }
.editor-styles-wrapper h4,
.entry-content h4 { font-size: 1.125rem; margin: 0.9em 0 0.45em; font-weight: 600; }

/* Inline formatting */
.editor-styles-wrapper em,
.editor-styles-wrapper i,
.entry-content em,
.entry-content i { font-style: italic; }
.editor-styles-wrapper strong,
.entry-content strong { font-weight: 600; }

/* Links */
.editor-styles-wrapper a,
.entry-content a {
  color: #0073aa;
  text-decoration: underline;
}
.editor-styles-wrapper a:hover,
.entry-content a:hover { color: #005177; }

/* Lists */
.editor-styles-wrapper ul,
.entry-content ul { margin: 0 0 1.25em 1.4em; }
.editor-styles-wrapper ol,
.entry-content ol { margin: 0 0 1.25em 1.8em; }

/* Blockquote */
.editor-styles-wrapper blockquote,
.entry-content blockquote {
  border-left: 4px solid #dcdcdc;
  margin: 0 0 1.25em;
  padding: 0.6em 1em;
  color: #555;
  background: transparent;
}

/* Code and preformatted */
.editor-styles-wrapper code,
.entry-content code { background: rgba(27,31,35,0.05); padding: .2em .4em; border-radius: 3px; font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.editor-styles-wrapper pre,
.entry-content pre { background: #f6f8fa; padding: 1em; overflow: auto; border-radius: 4px; }

/* Tables */
.editor-styles-wrapper table,
.entry-content table { border-collapse: collapse; width: 100%; margin: 0 0 1.25em; }
.editor-styles-wrapper table th,
.editor-styles-wrapper table td,
.entry-content table th,
.entry-content table td { border: 1px solid #e1e4e8; padding: 0.6em 0.8em; }

/* Horizontal rule / separator (core/separator) */
.editor-styles-wrapper hr,
.entry-content hr { border: 0; border-top: 1px solid #e1e4e8; margin: 1.5em 0; }

/* ==========================================================================
   Core block-specific styles
   Follow the naming and behavior of WordPress core `wp-block-library` where
   reasonable. Keep selectors targeting both .editor-styles-wrapper and
   .entry-content to keep editor and front-end consistent.
   ========================================================================== */

/* === Alignments (wide/full) === */
.wp-block-cover,
.wp-block-group,
.wp-block-media-text { max-width: none; }

.wp-block { margin: 0 0 1.25em; }

/* Wide/full alignment helpers */
.alignwide { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* === Core image block === */
.wp-block-image { margin: 0 0 1.25em; }
.wp-block-image.alignleft { float: left; margin-right: 1em; }
.wp-block-image.alignright { float: right; margin-left: 1em; }
.wp-block-image figcaption { color: #6b6b6b; font-size: .9rem; margin-top: .4em; }

/* === Gallery === */
.wp-block-gallery { margin: 0 0 1.25em; }
.wp-block-gallery .blocks-gallery-item img { display: block; width: 100%; height: auto; }

/* === Media & Text === */
.wp-block-media-text { display: flex; gap: 1rem; align-items: center; }
.wp-block-media-text .wp-block-media-text__media { flex: 1 1 50%; }
.wp-block-media-text .wp-block-media-text__content { flex: 1 1 50%; }

/* === Cover block === */
.wp-block-cover { position: relative; overflow: hidden; }
.wp-block-cover .wp-block-cover__inner-container { padding: 2rem; }
.wp-block-cover.has-background-dim { position: relative; }

/* === Buttons === */
.wp-block-button { margin: 0 0 1.25em; }
.wp-block-button .wp-block-button__link,
.entry-content .wp-block-button__link { display: inline-block; padding: .6em 1em; background: #0073aa; color: #fff; text-decoration: none; border-radius: 4px; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid #0073aa; color: #0073aa; }

/* === Quote & Pullquote === */
.wp-block-quote { margin: 0 0 1.25em; padding-left: 1em; border-left: 4px solid #dcdcdc; }
.wp-block-pullquote { font-style: italic; border-left: none; padding: 1rem; background: #f7f7f7; }

/* === List (core/list) === */
.wp-block-latest-posts ul { margin: 0; padding: 0; list-style: none; }

/* === Separator variants used by core blocks === */
.is-style-dots { text-align: center; }
.is-style-dots hr { border: 0; height: 4px; border-radius: 2px; background: #e1e4e8; display: inline-block; width: 40px; }

/* === File block / download link === */
.wp-block-file { margin: 0 0 1.25em; }
.wp-block-file .wp-block-file__button { background: #f3f3f3; border: 1px solid #e1e4e8; padding: .4em .8em; border-radius: 3px; }

/* === Table block === */
.wp-block-table { margin: 0 0 1.25em; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table th, .wp-block-table td { border: 1px solid #e1e4e8; padding: .5em; }

/* === Verse block === */
.wp-block-verse { margin: 0 0 1.25em; font-style: italic; white-space: pre-wrap; }

/* === Embed responsiveness === */
.wp-block-embed { margin: 0 0 1.25em; }
.wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; }
.wp-block-embed__wrapper iframe, .wp-block-embed__wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* === Columns === */
.wp-block-columns { display: flex; gap: 1rem; }
.wp-block-column { flex: 1 1 0; }

/* === Group block === */
.wp-block-group { margin: 0 0 1.25em; }

/* === Spacer block === */
.wp-block-spacer { height: var(--wp--custom--spacer, 1rem); }

/* === Icon / Social Icons block fallback styles === */
.wp-social-link a { color: inherit; text-decoration: none; display: inline-block; }

/* === Color utility classes (core supports color classes) ===
   Provide defaults for .has-*-color and .has-*-background-color used by core blocks
*/
.has-text-color { color: inherit; }
.has-background { background-color: inherit; }
.has-primary-color { color: #0073aa; }
.has-secondary-color { color: #767676; }
.has-accent-color { color: #005177; }
.has-primary-background-color { background-color: #0073aa; color: #fff; }
.has-secondary-background-color { background-color: #767676; color: #fff; }

/* ==========================================================================
   Editor-specific tweaks
   These rules ensure the block editor's visual canvas closely matches the
   front-end, without affecting other admin UI elements.
   ========================================================================== */

/* Scope large rules to the editor wrapper to avoid breaking admin chrome */
.edit-post-visual-editor .editor-styles-wrapper { padding: 0 2rem 2rem; }

/* Ensure buttons show as expected inside the editor */
.edit-post-visual-editor .editor-styles-wrapper .wp-block-button__link { box-shadow: none; }

/* Prevent floats from affecting editor layout */
.editor-styles-wrapper:after, .entry-content:after { content: ""; display: block; clear: both; }

/* ==========================================================================
   Small responsive helpers
   ========================================================================== */
@media screen and (max-width: 600px) {
  .editor-styles-wrapper, .entry-content { font-size: 15px; }
  .alignwide { padding-left: 1rem; padding-right: 1rem; }
  .wp-block-columns { flex-direction: column; }
}

/* ==========================================================================
   Placeholders and accessibility helpers
   ========================================================================== */
.wp-block { word-wrap: break-word; }
.wp-block .has-large-font-size { font-size: 1.5rem; }

/* ==========================================================================
   Notes for SCSS conversion
   - Convert color tokens to variables (e.g. $color-primary)
   - Split sections into partials: _base.scss, _blocks.scss, _editor.scss
   - Keep selectors duplicated for .editor-styles-wrapper and .entry-content
     to preserve parity between editor and front-end
   ========================================================================== */