/**
 * Aaima Gutenberg Editor Styles
 * 
 * Styles for the WordPress block editor to match frontend appearance
 * 
 * @package Aaima
 */

/* ==========================================================================
   Editor Variables
   ========================================================================== */

:root {
    --aaima-primary: #FF9900;
    --aaima-secondary: #232F3E;
    --aaima-accent: #146EB4;
    --aaima-dark: #131921;
    --aaima-text: #0F1111;
    --aaima-text-light: #565959;
    --aaima-border: #DDD;
    --aaima-success: #067D62;
    --aaima-error: #cc0c39;
    --aaima-bg-light: #F5F5F5;
    --aaima-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --aaima-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ==========================================================================
   Editor Layout
   ========================================================================== */

.editor-styles-wrapper {
    font-family: var(--aaima-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--aaima-text);
}

.editor-styles-wrapper .wp-block {
    max-width: 1200px;
}

.editor-styles-wrapper .wp-block[data-align="wide"] {
    max-width: 1400px;
}

.editor-styles-wrapper .wp-block[data-align="full"] {
    max-width: none;
}

/* ==========================================================================
   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(--aaima-font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: var(--aaima-text);
}

.editor-styles-wrapper h1 {
    font-size: 2.5rem;
}

.editor-styles-wrapper h2 {
    font-size: 2rem;
}

.editor-styles-wrapper h3 {
    font-size: 1.75rem;
}

.editor-styles-wrapper h4 {
    font-size: 1.5rem;
}

.editor-styles-wrapper h5 {
    font-size: 1.25rem;
}

.editor-styles-wrapper h6 {
    font-size: 1rem;
}

.editor-styles-wrapper p {
    margin-top: 0;
    margin-bottom: 1em;
}

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

.editor-styles-wrapper a:hover {
    color: var(--aaima-primary);
    text-decoration: underline;
}

/* ==========================================================================
   Block Styles
   ========================================================================== */

/* Buttons */
.editor-styles-wrapper .wp-block-button__link {
    background-color: var(--aaima-primary);
    color: var(--aaima-dark);
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    line-height: 1.4;
    text-transform: none;
    transition: all 0.2s ease;
}

.editor-styles-wrapper .wp-block-button__link:hover {
    background-color: #e8890a;
    color: var(--aaima-dark);
}

.editor-styles-wrapper .is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--aaima-primary);
    color: var(--aaima-primary);
}

.editor-styles-wrapper .is-style-outline .wp-block-button__link:hover {
    background-color: var(--aaima-primary);
    color: var(--aaima-dark);
}

/* Secondary Button Style */
.editor-styles-wrapper .is-style-secondary .wp-block-button__link {
    background-color: #fff;
    border: 1px solid var(--aaima-border);
    color: var(--aaima-text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.editor-styles-wrapper .is-style-secondary .wp-block-button__link:hover {
    background-color: var(--aaima-bg-light);
}

/* Quote */
.editor-styles-wrapper .wp-block-quote {
    border-left: 4px solid var(--aaima-primary);
    padding-left: 1.5em;
    margin-left: 0;
    font-style: italic;
    color: var(--aaima-text-light);
}

.editor-styles-wrapper .wp-block-quote cite {
    font-style: normal;
    font-size: 0.875em;
    color: var(--aaima-text-light);
    display: block;
    margin-top: 0.5em;
}

.editor-styles-wrapper .wp-block-quote cite::before {
    content: "— ";
}

/* Pullquote */
.editor-styles-wrapper .wp-block-pullquote {
    border-top: 4px solid var(--aaima-primary);
    border-bottom: 4px solid var(--aaima-primary);
    padding: 2em 0;
    text-align: center;
}

.editor-styles-wrapper .wp-block-pullquote blockquote {
    margin: 0;
    padding: 0;
    border: none;
}

.editor-styles-wrapper .wp-block-pullquote p {
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.4;
}

/* Lists */
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

.editor-styles-wrapper li {
    margin-bottom: 0.5em;
}

/* Tables */
.editor-styles-wrapper .wp-block-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1em;
}

.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-table td {
    border: 1px solid var(--aaima-border);
    padding: 12px 16px;
    text-align: left;
}

.editor-styles-wrapper .wp-block-table th {
    background-color: var(--aaima-bg-light);
    font-weight: 600;
}

.editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: var(--aaima-bg-light);
}

/* Code */
.editor-styles-wrapper code {
    background-color: var(--aaima-bg-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    font-size: 0.9em;
}

.editor-styles-wrapper pre {
    background-color: var(--aaima-dark);
    color: #fff;
    padding: 1.5em;
    border-radius: 8px;
    overflow-x: auto;
}

.editor-styles-wrapper pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Separator */
.editor-styles-wrapper hr,
.editor-styles-wrapper .wp-block-separator {
    border: none;
    border-top: 1px solid var(--aaima-border);
    margin: 2em 0;
}

.editor-styles-wrapper .wp-block-separator.is-style-wide {
    border-top-width: 3px;
}

.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: "···";
    color: var(--aaima-text-light);
    font-size: 1.5em;
    letter-spacing: 1em;
}

/* Images */
.editor-styles-wrapper .wp-block-image {
    margin-bottom: 1em;
}

.editor-styles-wrapper .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.editor-styles-wrapper .wp-block-image figcaption {
    font-size: 0.875em;
    color: var(--aaima-text-light);
    text-align: center;
    margin-top: 0.5em;
}

/* Gallery */
.editor-styles-wrapper .wp-block-gallery {
    margin-bottom: 1em;
}

.editor-styles-wrapper .wp-block-gallery .wp-block-image {
    margin: 0;
}

.editor-styles-wrapper .wp-block-gallery img {
    border-radius: 8px;
}

/* Cover */
.editor-styles-wrapper .wp-block-cover {
    border-radius: 8px;
    overflow: hidden;
    min-height: 400px;
}

.editor-styles-wrapper .wp-block-cover__inner-container {
    max-width: 800px;
}

/* Group */
.editor-styles-wrapper .wp-block-group {
    padding: 2em;
}

.editor-styles-wrapper .wp-block-group.has-background {
    border-radius: 8px;
}

/* Columns */
.editor-styles-wrapper .wp-block-columns {
    gap: 2em;
}

/* Media & Text */
.editor-styles-wrapper .wp-block-media-text {
    gap: 2em;
}

.editor-styles-wrapper .wp-block-media-text .wp-block-media-text__media img {
    border-radius: 8px;
}

/* ==========================================================================
   WooCommerce Blocks
   ========================================================================== */

/* Product Grid */
.editor-styles-wrapper .wc-block-grid__products {
    display: grid;
    gap: 1.5em;
}

.editor-styles-wrapper .wc-block-grid__product {
    background: #fff;
    border: 1px solid var(--aaima-border);
    border-radius: 8px;
    padding: 1em;
    transition: box-shadow 0.2s ease;
}

.editor-styles-wrapper .wc-block-grid__product:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.editor-styles-wrapper .wc-block-grid__product-image {
    margin-bottom: 1em;
}

.editor-styles-wrapper .wc-block-grid__product-image img {
    border-radius: 4px;
}

.editor-styles-wrapper .wc-block-grid__product-title {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 0.5em;
    color: var(--aaima-text);
}

.editor-styles-wrapper .wc-block-grid__product-price {
    color: var(--aaima-error);
    font-weight: 700;
    font-size: 1.125em;
}

.editor-styles-wrapper .wc-block-grid__product-price del {
    color: var(--aaima-text-light);
    font-weight: normal;
    font-size: 0.875em;
}

.editor-styles-wrapper .wc-block-grid__product-rating {
    color: var(--aaima-primary);
}

.editor-styles-wrapper .wc-block-grid__product-add-to-cart .wp-block-button__link {
    width: 100%;
    text-align: center;
}

/* Sale Badge */
.editor-styles-wrapper .wc-block-grid__product-onsale {
    background-color: var(--aaima-error);
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

/* ==========================================================================
   Custom Block Styles
   ========================================================================== */

/* Card Style for Group */
.editor-styles-wrapper .is-style-aaima-card {
    background: #fff;
    border: 1px solid var(--aaima-border);
    border-radius: 8px;
    padding: 1.5em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Feature Box */
.editor-styles-wrapper .is-style-aaima-feature-box {
    text-align: center;
    padding: 2em;
}

.editor-styles-wrapper .is-style-aaima-feature-box .wp-block-image {
    max-width: 80px;
    margin: 0 auto 1em;
}

/* Highlight */
.editor-styles-wrapper .is-style-aaima-highlight {
    background: linear-gradient(135deg, var(--aaima-primary) 0%, #e8890a 100%);
    color: var(--aaima-dark);
    padding: 2em;
    border-radius: 8px;
}

.editor-styles-wrapper .is-style-aaima-highlight h1,
.editor-styles-wrapper .is-style-aaima-highlight h2,
.editor-styles-wrapper .is-style-aaima-highlight h3,
.editor-styles-wrapper .is-style-aaima-highlight h4,
.editor-styles-wrapper .is-style-aaima-highlight h5,
.editor-styles-wrapper .is-style-aaima-highlight h6 {
    color: var(--aaima-dark);
}

/* Info Box */
.editor-styles-wrapper .is-style-aaima-info {
    background-color: #E7F4FF;
    border-left: 4px solid var(--aaima-accent);
    padding: 1em 1.5em;
    border-radius: 0 8px 8px 0;
}

/* Success Box */
.editor-styles-wrapper .is-style-aaima-success {
    background-color: #E8F5E9;
    border-left: 4px solid var(--aaima-success);
    padding: 1em 1.5em;
    border-radius: 0 8px 8px 0;
}

/* Warning Box */
.editor-styles-wrapper .is-style-aaima-warning {
    background-color: #FFF3E0;
    border-left: 4px solid var(--aaima-primary);
    padding: 1em 1.5em;
    border-radius: 0 8px 8px 0;
}

/* Error Box */
.editor-styles-wrapper .is-style-aaima-error {
    background-color: #FFEBEE;
    border-left: 4px solid var(--aaima-error);
    padding: 1em 1.5em;
    border-radius: 0 8px 8px 0;
}

/* ==========================================================================
   Block Variations
   ========================================================================== */

/* Large Button */
.editor-styles-wrapper .is-style-aaima-large .wp-block-button__link {
    padding: 16px 32px;
    font-size: 16px;
}

/* Small Button */
.editor-styles-wrapper .is-style-aaima-small .wp-block-button__link {
    padding: 8px 16px;
    font-size: 12px;
}

/* Icon Button */
.editor-styles-wrapper .is-style-aaima-icon .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .editor-styles-wrapper {
        /* Dark mode is optional for editor */
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 782px) {
    .editor-styles-wrapper h1 {
        font-size: 2rem;
    }

    .editor-styles-wrapper h2 {
        font-size: 1.75rem;
    }

    .editor-styles-wrapper h3 {
        font-size: 1.5rem;
    }

    .editor-styles-wrapper .wp-block-columns {
        flex-direction: column;
    }

    .editor-styles-wrapper .wp-block-media-text {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Editor-specific Styles
   ========================================================================== */

/* Placeholder text */
.editor-styles-wrapper .block-editor-rich-text__editable[data-is-placeholder-visible="true"]::before {
    color: var(--aaima-text-light);
}

/* Selection highlight */
.editor-styles-wrapper ::selection {
    background-color: var(--aaima-primary);
    color: var(--aaima-dark);
}

/* Focus states */
.editor-styles-wrapper .wp-block:focus {
    outline: 2px solid var(--aaima-accent);
    outline-offset: 2px;
}

/* Block appender */
.editor-styles-wrapper .block-editor-default-block-appender .block-editor-default-block-appender__content {
    color: var(--aaima-text-light);
}