/**
 * Bansta – Editor Styles (editor-style.css)
 *
 *
 * Table of Contents
 * -----------------
 * 1.  Editor canvas reset & base
 * 2.  Typography
 * 3.  Links
 * 4.  Images
 * 5.  Lists
 * 6.  Tables
 * 7.  Quotes / Pullquotes
 * 8.  Code / Preformatted
 * 9.  Buttons
 * 10. Columns / Group
 * 11. Cover block
 * 12. Media & Text
 * 13. Separator
 * 14. Post title (wp:post-title)
 * 15. Block spacing utilities
 * 16. Form elements inside editor
 * 17. Dark-mode editor pass-through
 */

/* ---------------------------------------------------------------
   1. Editor canvas reset & base
--------------------------------------------------------------- */

.editor-styles-wrapper {
    font-family: var(--bansta-system-font, system-ui);
    font-size: 1rem;
    line-height: var(--bansta-line-height, 1.6);
    color: var(--bansta-text-color, #252525);
    background-color: var(--bansta-background-color, #ffffff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Editor post content area max-width */
.editor-styles-wrapper .wp-block {
   
    margin-inline: auto;
}

.editor-styles-wrapper .wp-block[data-align="full"],
.editor-styles-wrapper .wp-block[data-align="wide"] {
    max-width: var(--bansta-site-grid-size, 90rem);
}

.editor-styles-wrapper *,
.editor-styles-wrapper *::before,
.editor-styles-wrapper *::after {
    box-sizing: border-box;
}

/* ---------------------------------------------------------------
   2. Typography
--------------------------------------------------------------- */

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    font-family: var(--bansta-primary-font, var(--bansta-system-font, system-ui));
    font-weight: var(--bansta-font-weight, 700);
    color: var(--bansta-secondary-color, #1a1a1a);
    line-height: 1.3;
    overflow-wrap: break-word;
    white-space: normal;
    margin-top: 0;
}

.editor-styles-wrapper h1 {
    font-size: clamp(1.75rem, 1.4rem + 2vw, 2rem);
    margin-block: clamp(0.4rem, 0.3rem + 0.5vw, 0.8rem);
}

.editor-styles-wrapper h2 {
    font-size: clamp(1.13rem, 1.15rem + 1vw, 1.3rem);
    margin-block: clamp(0.4rem, 0.4rem + 0.4vw, 0.7rem);
}

.editor-styles-wrapper h3 {
    font-size: clamp(1.03rem, 1.1rem + 1vw, 1.2rem);
    padding-block: clamp(0.39rem, 0.36rem + 0.4vw, 0.5rem);
}

.editor-styles-wrapper h4 {
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.125rem);
    margin-block: 0.4rem;
}

.editor-styles-wrapper h5 {
    font-size: clamp(0.94rem, 0.95rem + 0.3vw, 1rem);
    margin-block: 0.35rem;
}

.editor-styles-wrapper h6 {
    font-size: 0.9rem;
    margin-block: 0.3rem;
}

.editor-styles-wrapper p {
    font-size: clamp(0.9rem, 0.9rem + 0.5vw, 1rem);
    margin-bottom: clamp(1rem, 0.8rem + 0.5vw, 1rem);
    margin-top: 0;
    line-height: 1.6;
    color: #252525;
    font-family: var(--bansta-primary-font, var(--bansta-system-font, system-ui));
}

.editor-styles-wrapper b,
.editor-styles-wrapper strong {
    font-weight: 700;
}

.editor-styles-wrapper small {
    font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.8rem);
}

.editor-styles-wrapper dfn {
    font-style: italic;
}

.editor-styles-wrapper mark {
    background-color: transparent;
    border-bottom: 1px solid #ffcc00;
}

.editor-styles-wrapper mark:hover {
    border-bottom: 0;
}

.editor-styles-wrapper sub,
.editor-styles-wrapper sup {
    font-size: 0.75rem;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.editor-styles-wrapper sup { top: -0.5rem; }
.editor-styles-wrapper sub { bottom: -0.25rem; }

/* Drop cap */
.editor-styles-wrapper .has-drop-cap::first-letter {
    font-size: 3.5em;
    font-weight: 700;
    float: left;
    line-height: 0.8;
    margin: 0.1em 0.15em 0 0;
    color: var(--bansta-primary-color);
}

/* ---------------------------------------------------------------
   3. Links
--------------------------------------------------------------- */

.editor-styles-wrapper a {
    color: var(--bansta-link-color);
    text-decoration: none;
}

.editor-styles-wrapper a:hover {
    color: var(--bansta-link-hover-color);
}

.editor-styles-wrapper .ts-post-content a,
.editor-styles-wrapper .wp-block-paragraph a {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   4. Images
--------------------------------------------------------------- */

.editor-styles-wrapper img {
    border: 0;
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
    object-fit: cover;
    max-width: 100%;
}

.editor-styles-wrapper figure {
    max-width: 100%;
    margin: 0;
}

.editor-styles-wrapper figcaption {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    margin-top: 0.5rem;
}

.editor-styles-wrapper .wp-block-image img {
    height: auto;
}

.editor-styles-wrapper .wp-block-image.alignleft {
    float: left;
    margin-right: 1.25rem;
    margin-bottom: 0.625rem;
}

.editor-styles-wrapper .wp-block-image.alignright {
    float: right;
    margin-left: 1.25rem;
    margin-bottom: 0.625rem;
}

.editor-styles-wrapper .wp-block-image.aligncenter {
    text-align: center;
}

/* ---------------------------------------------------------------
   5. Lists
--------------------------------------------------------------- */

.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.editor-styles-wrapper li {
    padding: 0.25rem 0;
    line-height: 1.6;
    font-size: 1rem;
    font-family: var(--bansta-primary-font, var(--bansta-system-font, system-ui));
    color: #252525;
}

.editor-styles-wrapper .wp-block-list {
    padding-left: 2.5rem !important;
}

.editor-styles-wrapper p + ul.wp-block-list {
    margin-top: -0.7rem;
}

.editor-styles-wrapper .wp-block-list li {
    list-style: inherit;
}

/* ---------------------------------------------------------------
   6. Tables
--------------------------------------------------------------- */

.editor-styles-wrapper table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    word-break: break-word;
    table-layout: fixed;
    margin-bottom: 1.25rem;
}

.editor-styles-wrapper td,
.editor-styles-wrapper th {
    padding: 0.625rem;
    border: 1px solid #ddd;
    vertical-align: top;
}

.editor-styles-wrapper th {
    background-color: var(--bansta-secondary-color, #1a1a1a);
    color: #fff;
    font-weight: 700;
    text-align: left;
}

.editor-styles-wrapper .wp-block-table.is-style-stripes tr:nth-child(even) td {
    background-color: #f5f5f5;
}

/* ---------------------------------------------------------------
   7. Quotes / Pullquotes
--------------------------------------------------------------- */

.editor-styles-wrapper blockquote,
.editor-styles-wrapper .wp-block-quote {
    border-left: 4px solid var(--bansta-primary-color);
    padding: 0.75rem 1.25rem;
    margin-block: 1.25rem;
    margin-inline: 0;
    background-color: #f9f9f9;
}

.editor-styles-wrapper .wp-block-quote p {
    font-style: italic;
    font-size: clamp(1rem, 1rem + 0.5vw, 1.125rem);
    color: #333;
    margin-bottom: 0;
}

.editor-styles-wrapper .wp-block-quote cite,
.editor-styles-wrapper cite {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    font-style: normal;
    color: var(--bansta-secondary-color);
    margin-top: 0.5rem;
}

.editor-styles-wrapper .wp-block-quote.is-style-large {
    border-left: none;
    padding: 1.5rem 2rem;
    text-align: center;
}

.editor-styles-wrapper .wp-block-quote.is-style-large p {
    font-size: clamp(1.2rem, 1.1rem + 1vw, 1.5rem);
}

.editor-styles-wrapper .wp-block-pullquote {
    border-top: 4px solid var(--bansta-secondary-color);
    border-bottom: 4px solid var(--bansta-secondary-color);
    padding: 1.5rem;
    text-align: center;
    margin-block: 1.5rem;
}

.editor-styles-wrapper .wp-block-pullquote p {
    font-size: clamp(1.1rem, 1rem + 1vw, 1.4rem);
    font-weight: 600;
    color: var(--bansta-secondary-color);
}

/* ---------------------------------------------------------------
   8. Code / Preformatted
--------------------------------------------------------------- */

.editor-styles-wrapper code,
.editor-styles-wrapper kbd,
.editor-styles-wrapper samp {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875em;
    background: #f0f0f0;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
}

.editor-styles-wrapper pre,
.editor-styles-wrapper .wp-block-code,
.editor-styles-wrapper .wp-block-preformatted {
    background: #1e1e1e;
    color: #f8f8f2;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    border-radius: 4px;
    margin-bottom: 1.25rem;
    white-space: pre;
    tab-size: 4;
}

.editor-styles-wrapper pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

/* ---------------------------------------------------------------
   9. Buttons
--------------------------------------------------------------- */

.editor-styles-wrapper .wp-block-button__link {
    display: inline-block;
    background-color: var(--bansta-primary-color);
    color: #fff;
    padding: 0.425rem 2rem;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: var(--bansta-secondary-font, var(--bansta-system-font, system-ui));
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s ease;
}

.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--bansta-primary-color);
    border-color: var(--bansta-primary-color);
}

/* ---------------------------------------------------------------
   10. Columns / Group
--------------------------------------------------------------- */

.editor-styles-wrapper .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.editor-styles-wrapper .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
}

.editor-styles-wrapper .wp-block-group {
    max-width: 100%;
}

/* ---------------------------------------------------------------
   11. Cover block
--------------------------------------------------------------- */

.editor-styles-wrapper .wp-block-cover {
    position: relative;
    min-height: 25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
}

.editor-styles-wrapper .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1rem;
    text-align: center;
}

.editor-styles-wrapper .wp-block-cover h1,
.editor-styles-wrapper .wp-block-cover h2,
.editor-styles-wrapper .wp-block-cover h3,
.editor-styles-wrapper .wp-block-cover p {
    color: #fff;
}

/* ---------------------------------------------------------------
   12. Media & Text
--------------------------------------------------------------- */

.editor-styles-wrapper .wp-block-media-text {
    display: grid;
    grid-template-columns: 50% 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.editor-styles-wrapper .wp-block-media-text__media img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.editor-styles-wrapper .wp-block-media-text__content {
    padding: 0 1rem;
}

/* ---------------------------------------------------------------
   13. Separator
--------------------------------------------------------------- */

.editor-styles-wrapper hr,
.editor-styles-wrapper .wp-block-separator {
    border: none;
    border-top: 2px solid #ddd;
    margin-block: 2rem;
    max-width: 100%;
}

.editor-styles-wrapper .wp-block-separator.is-style-dots {
    border: none;
    text-align: center;
}

.editor-styles-wrapper .wp-block-separator.is-style-dots::before {
    content: "···";
    font-size: 1.5rem;
    letter-spacing: 1em;
    color: #ccc;
}

/* ---------------------------------------------------------------
   14. Post title (wp:post-title)
--------------------------------------------------------------- */

.editor-styles-wrapper .wp-block-post-title {
    font-family: var(--bansta-primary-font, var(--bansta-system-font, system-ui));
    font-size: clamp(1.75rem, 1.4rem + 2vw, 2rem);
    font-weight: var(--bansta-font-weight, 700);
    color: var(--bansta-secondary-color, #1a1a1a);
    line-height: 1.3;
    margin-block: clamp(0.7rem, 0.6rem + 0.5vw, 1rem);
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   15. Block spacing utilities
--------------------------------------------------------------- */

.editor-styles-wrapper .wp-block-spacer {
    display: block;
    clear: both;
}


/* ---------------------------------------------------------------
   16. Form elements inside editor
--------------------------------------------------------------- */

.editor-styles-wrapper input[type="text"],
.editor-styles-wrapper input[type="email"],
.editor-styles-wrapper input[type="search"],
.editor-styles-wrapper textarea,
.editor-styles-wrapper select {
    padding: 0.375rem 0.5rem;
    width: 100%;
    font-family: var(--bansta-system-font, system-ui);
    font-size: 1rem;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #252525;
}

.editor-styles-wrapper input[type="submit"],
.editor-styles-wrapper button {
    background-color: var(--bansta-primary-color);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

/* ---------------------------------------------------------------
   17. Dark-mode editor pass-through
   (Matches .dark-mode rules from style.css so the editor respects
    the body class when the user has dark mode active.)
--------------------------------------------------------------- */

.editor-styles-wrapper.dark-mode,
body.dark-mode .editor-styles-wrapper {
    background-color: #000;
    color: #fff;
}

body.dark-mode .editor-styles-wrapper h1,
body.dark-mode .editor-styles-wrapper h2,
body.dark-mode .editor-styles-wrapper h3,
body.dark-mode .editor-styles-wrapper h4,
body.dark-mode .editor-styles-wrapper h5,
body.dark-mode .editor-styles-wrapper h6,
body.dark-mode .editor-styles-wrapper p,
body.dark-mode .editor-styles-wrapper li {
    color: #fff;
}

body.dark-mode .editor-styles-wrapper a {
    color: var(--bansta-link-color);
}

body.dark-mode .editor-styles-wrapper blockquote,
body.dark-mode .editor-styles-wrapper .wp-block-quote {
    background-color: #1a1a1a;
    border-left-color: var(--bansta-link-color);
}

body.dark-mode .editor-styles-wrapper .wp-block-quote p {
    color: #fff;
}

body.dark-mode .editor-styles-wrapper code,
body.dark-mode .editor-styles-wrapper kbd {
    background: #333;
    color: #f8f8f2;
}

body.dark-mode .editor-styles-wrapper input[type="text"],
body.dark-mode .editor-styles-wrapper textarea {
    background: #252525;
    border-color: #444;
    color: #fff;
}

body.dark-mode .editor-styles-wrapper hr,
body.dark-mode .editor-styles-wrapper .wp-block-separator {
    border-top-color: #444;
}