/**
 * OTS Theme - Editor-specific overrides
 * Loaded only inside the Gutenberg block editor.
 */

/* ── Font variables for editor preview ── */
.editor-styles-wrapper {
    --font-heading: var(--wp--preset--font-family--heading, var(--font-sans));
    --font-sans: var(--wp--preset--font-family--sans, 'Inter', system-ui, -apple-system, sans-serif);
}
.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(--font-heading, var(--font-sans));
}

/* Full-width blocks fill the editor canvas */
.editor-styles-wrapper [data-type^="oribi/"] {
    max-width: none !important;
    margin-left: calc(-1 * var(--wp--custom--spacing--outer, 0px)) !important;
    margin-right: calc(-1 * var(--wp--custom--spacing--outer, 0px)) !important;
}

/* Decorative overlays must not eat pointer events */
.editor-styles-wrapper .hero-bg-grid,
.editor-styles-wrapper .hero-glow,
.editor-styles-wrapper .hero-glow-2 {
    pointer-events: none;
}

/* RichText placeholders inside dark sections */
.editor-styles-wrapper .hero [data-rich-text-placeholder]::after,
.editor-styles-wrapper .cta-banner [data-rich-text-placeholder]::after,
.editor-styles-wrapper .page-hero [data-rich-text-placeholder]::after {
    color: rgba(255, 255, 255, 0.4);
}

/* Force hero container to be clickable above decorative layers */
.editor-styles-wrapper .hero .container,
.editor-styles-wrapper .cta-banner .container,
.editor-styles-wrapper .page-hero .container {
    position: relative;
    z-index: 2;
}

/* Prevent cursor issues on static elements used as RichText wrappers */
.editor-styles-wrapper .btn.btn-primary,
.editor-styles-wrapper .btn.btn-ghost {
    cursor: text;
}

/* Inline-editable stat values and labels */
.editor-styles-wrapper .hero-stat-value[contenteditable],
.editor-styles-wrapper .hero-stat-label[contenteditable] {
    cursor: text;
    min-width: 40px;
    outline: none;
}
.editor-styles-wrapper .hero-stat-value:focus,
.editor-styles-wrapper .hero-stat-label:focus {
    outline: 1px dashed rgba(255,255,255,.25);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Secondary button placeholder visibility */
.editor-styles-wrapper .btn.btn-ghost[data-rich-text-placeholder]::after {
    color: rgba(255,255,255,.3);
}

/* Device visual shouldn't eat clicks from editable text */
.editor-styles-wrapper .hero-devices {
    pointer-events: none;
}

/* Grid / card hover effects are distracting while editing */
.editor-styles-wrapper .oribi-card:hover,
.editor-styles-wrapper .feature-card:hover,
.editor-styles-wrapper .pricing-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure platform-row visuals don't overlap editable text */
.editor-styles-wrapper .platform-visual {
    pointer-events: none;
}

/* ── Animated hero editor overrides ───────────────────────── */
.editor-styles-wrapper .hero-animated .hero-particles,
.editor-styles-wrapper .page-hero-animated .hero-particles,
.editor-styles-wrapper .hero-animated__glow {
    pointer-events: none;
}

.editor-styles-wrapper .hero-animated .container,
.editor-styles-wrapper .page-hero-animated .container {
    position: relative;
    z-index: 2;
}

.editor-styles-wrapper .hero-animated [data-rich-text-placeholder]::after,
.editor-styles-wrapper .page-hero-animated [data-rich-text-placeholder]::after {
    color: rgba(255, 255, 255, 0.4);
}

/* Contact form placeholder in editor */
.editor-styles-wrapper .contact-form-wrap {
    min-height: 180px;
}

/* Remove default block outline in favour of section styling */
.editor-styles-wrapper [data-type^="oribi/"] > .block-editor-block-list__block-edit > [data-block] {
    outline: none;
}

/* ── InnerBlocks child styling ─────────────────────────────────────────── */

/* Child blocks inside grids: remove block-list spacing */
.editor-styles-wrapper [data-type="oribi/feature-section"] .block-editor-inner-blocks,
.editor-styles-wrapper [data-type="oribi/value-section"] .block-editor-inner-blocks,
.editor-styles-wrapper [data-type="oribi/addon-section"] .block-editor-inner-blocks,
.editor-styles-wrapper [data-type="oribi/image-section"] .block-editor-inner-blocks,
.editor-styles-wrapper [data-type="oribi/stat-section"] .block-editor-inner-blocks,
.editor-styles-wrapper [data-type="oribi/link-section"] .block-editor-inner-blocks,
.editor-styles-wrapper [data-type="oribi/pricing-section"] .block-editor-inner-blocks,
.editor-styles-wrapper [data-type="oribi/platform-section"] .block-editor-inner-blocks,
.editor-styles-wrapper [data-type="oribi/trust-section"] .block-editor-inner-blocks {
    width: 100%;
}

/* Feature cards grid: children lay out inline */
.editor-styles-wrapper .grid-2 > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .grid-3 > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .grid-4 > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    gap: 2rem;
}
.editor-styles-wrapper .grid-2 > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(2, 1fr);
}
.editor-styles-wrapper .grid-3 > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(3, 1fr);
}
.editor-styles-wrapper .grid-4 > .block-editor-inner-blocks > .block-editor-block-list__layout {
    grid-template-columns: repeat(4, 1fr);
}

/* Pricing cards grid */
.editor-styles-wrapper .pricing-grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

/* Trust items: stack vertically with gap */
.editor-styles-wrapper [data-type="oribi/trust-section"] .grid-2 > div:first-child .block-editor-block-list__layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Oribi Icon Picker ─────────────────────────────────────── */
.oribi-icon-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
}
.oribi-icon-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #f0f0f1;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    color: #1e1e1e;
    min-height: 36px;
}
.oribi-icon-current i {
    font-size: 18px;
    flex-shrink: 0;
}
.oribi-icon-current-label {
    font-family: monospace;
    font-size: 11px;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.oribi-icon-clear {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: 1px solid #cc1818;
    border-radius: 3px;
    color: #cc1818;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 6px;
    line-height: 1.4;
}
.oribi-icon-clear:hover {
    background: #cc1818;
    color: #fff;
}
.oribi-icon-search {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #949494;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
}
.oribi-icon-search:focus {
    border-color: #3858e9;
    box-shadow: 0 0 0 2px rgba(56, 88, 233, .2);
}
.oribi-icon-count {
    font-size: 11px;
    color: #757575;
    text-align: right;
    line-height: 1;
}
.oribi-icon-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    max-height: 252px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}
.oribi-icon-grid::-webkit-scrollbar { width: 6px; }
.oribi-icon-grid::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
.oribi-icon-grid::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
.oribi-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 7px 2px 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    min-width: 0;
    transition: background .12s, border-color .12s, color .12s;
    color: #1e1e1e;
}
.oribi-icon-cell:hover {
    background: #e8f0fe;
    border-color: #3858e9;
    color: #3858e9;
}
.oribi-icon-cell.is-active {
    background: #3858e9;
    border-color: #3858e9;
    color: #fff;
}
.oribi-icon-cell i {
    font-size: 17px;
    line-height: 1;
}
.oribi-icon-cell span {
    font-size: 8.5px;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
    opacity: 0.75;
    line-height: 1.2;
}
.oribi-icon-empty {
    font-size: 12px;
    color: #757575;
    text-align: center;
    padding: 16px;
    grid-column: 1 / -1;
}