/* ═══ ELEMENTOR & ELEMENTOR PRO OVERRIDES ════════════
 * Normalize all Elementor widgets to InkSide tokens.
 * ══════════════════════════════════════════════════════ */

/* ── Global ──
 * Use :where() so Elementor's own typography settings (Kit / per-widget)
 * always win — we only provide a default when nothing is set.
 * Never blanket-force `font-family: inherit` on all descendants:
 * that breaks icon fonts (Font Awesome, eicons) and custom widget typos.
 */
body.inkside-theme :where(.elementor-widget) {
    font-family: var(--ink-font);
    color: var(--ink-text);
}

/* ── Headings ── */
body.inkside-theme .elementor-heading-title {
    font-family: var(--ink-font);
    color: var(--ink-text);
}

/* ── Text editor ── */
body.inkside-theme .elementor-widget-text-editor {
    font-size: var(--ink-font-size-base);
    line-height: 1.6;
    color: var(--ink-text);
}

/* ── Buttons ──
 * Wrap properties that Elementor exposes in its UI (height/padding/radius/
 * background) with :where() so any user setting at the widget level wins.
 * We only provide a sensible default look.
 */
body.inkside-theme :where(.elementor-button-wrapper .elementor-button, .elementor-button) {
    font-family: var(--ink-font);
    font-weight: var(--ink-btn-font-weight);
    font-size: var(--ink-font-size-base);
    border-radius: var(--ink-btn-radius);
    padding: 0 var(--ink-space-lg);
    min-height: var(--ink-btn-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--ink-transition-fast),
        border-color var(--ink-transition-fast),
        color var(--ink-transition-fast),
        box-shadow var(--ink-transition-fast);
    line-height: 1;
}

/* Neutralise Elementor's default 0.9 hover opacity without touching color */
body.inkside-theme .elementor-button:hover,
body.inkside-theme .elementor-button:focus {
    opacity: 1;
}

body.inkside-theme :where(.elementor-button .elementor-button-text) {
    font-family: var(--ink-font);
}

/* ── Size variants ── */
body.inkside-theme .elementor-size-sm .elementor-button {
    height: var(--ink-btn-height-sm);
    font-size: var(--ink-font-size-sm);
    padding: 0 var(--ink-space-md);
}

body.inkside-theme .elementor-size-lg .elementor-button,
body.inkside-theme .elementor-size-xl .elementor-button {
    height: var(--ink-btn-height-lg);
    font-size: var(--ink-font-size-md);
    padding: 0 var(--ink-space-xl);
}

/* ── Icon box ── */
body.inkside-theme .elementor-icon-box-title {
    font-family: var(--ink-font);
    color: var(--ink-text);
}

body.inkside-theme .elementor-icon-box-description {
    color: var(--ink-text-muted);
    font-size: var(--ink-font-size-base);
}

/* ── Image box ── */
body.inkside-theme .elementor-image-box-title {
    font-family: var(--ink-font);
}

/* ── Tabs ── */
body.inkside-theme .elementor-tab-title {
    font-family: var(--ink-font);
    font-weight: 600;
    color: var(--ink-text-muted);
    transition: color var(--ink-transition-fast);
}

body.inkside-theme .elementor-tab-title.elementor-active,
body.inkside-theme .elementor-tab-title:hover {
    color: var(--ink-primary);
}

body.inkside-theme .elementor-tab-content {
    font-family: var(--ink-font);
    color: var(--ink-text);
}

/* ── Accordion ── */
body.inkside-theme .elementor-accordion .elementor-accordion-title {
    font-family: var(--ink-font);
    font-weight: 600;
    color: var(--ink-text);
}

body.inkside-theme .elementor-accordion .elementor-tab-content {
    font-family: var(--ink-font);
    color: var(--ink-text-muted);
}

/* ── Counter ── */
body.inkside-theme .elementor-counter-number-wrapper {
    font-family: var(--ink-font);
    font-weight: 800;
    color: var(--ink-primary);
}

body.inkside-theme .elementor-counter-title {
    font-family: var(--ink-font);
    color: var(--ink-text-muted);
}

/* ── Social icons ── */
body.inkside-theme .elementor-social-icon {
    transition: transform var(--ink-transition-fast), background-color var(--ink-transition-fast);
}

body.inkside-theme .elementor-social-icon:hover {
    transform: translateY(-2px);
}

/* ── Alert / notice ── */
body.inkside-theme .elementor-alert {
    font-family: var(--ink-font);
    border-radius: var(--ink-radius-md);
}

/* ── Divider ── */
body.inkside-theme .elementor-divider-separator {
    border-top-color: var(--ink-border);
}

/* ── Containers ── */
body.inkside-theme .elementor-section,
body.inkside-theme .e-con {
    font-family: var(--ink-font);
}


/* ── Form widget (Elementor Pro) ──
 * Exclude textarea & select multiple — fixed height would clip them.
 * Use min-height so per-field user settings still grow the field.
 */
body.inkside-theme .elementor-form .elementor-field:not(textarea):not(select[multiple]) {
    font-family: var(--ink-font);
    font-size: 16px;
    min-height: var(--ink-btn-height);
    border: 1px solid var(--ink-border);
    border-radius: var(--ink-radius-md);
    padding: 0 var(--ink-space-md);
    transition: border-color var(--ink-transition-fast), box-shadow var(--ink-transition-fast);
}

body.inkside-theme .elementor-form textarea.elementor-field {
    font-family: var(--ink-font);
    font-size: 16px;
    border: 1px solid var(--ink-border);
    border-radius: var(--ink-radius-md);
    padding: var(--ink-space-sm) var(--ink-space-md);
    transition: border-color var(--ink-transition-fast), box-shadow var(--ink-transition-fast);
}

body.inkside-theme .elementor-form .elementor-field:focus {
    border-color: var(--ink-primary);
    box-shadow: 0 0 0 3px var(--ink-primary-ring);
    outline: none;
}

body.inkside-theme .elementor-form .elementor-field-label {
    font-family: var(--ink-font);
    font-weight: 600;
    font-size: var(--ink-font-size-sm);
    color: var(--ink-text);
}

body.inkside-theme .elementor-form .elementor-button {
    background-color: var(--ink-primary);
    color: #fff;
    border-color: var(--ink-primary);
}

body.inkside-theme .elementor-form .elementor-button:hover {
    background-color: var(--ink-primary-hover);
    border-color: var(--ink-primary-hover);
}

body.inkside-theme .elementor-message {
    font-family: var(--ink-font);
    border-radius: var(--ink-radius-md);
}

/* ── Testimonials ── */
body.inkside-theme .elementor-testimonial-content {
    font-family: var(--ink-font);
    color: var(--ink-text);
}

body.inkside-theme .elementor-testimonial-name {
    font-family: var(--ink-font);
    font-weight: 600;
    color: var(--ink-text);
}

body.inkside-theme .elementor-testimonial-job {
    font-family: var(--ink-font);
    color: var(--ink-text-muted);
}

/* ── Nav menu widget ── */
body.inkside-theme .elementor-nav-menu--main .elementor-item {
    font-family: var(--ink-font);
    font-weight: 500;
    color: var(--ink-text);
    transition: color var(--ink-transition-fast);
}

body.inkside-theme .elementor-nav-menu--main .elementor-item:hover,
body.inkside-theme .elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: var(--ink-primary);
}

body.inkside-theme .elementor-nav-menu--dropdown {
    background-color: var(--ink-bg);
    border: 1px solid var(--ink-border);
    border-radius: var(--ink-radius-lg);
    box-shadow: var(--ink-shadow-lg);
}

body.inkside-theme .elementor-nav-menu--dropdown a {
    font-family: var(--ink-font);
    color: var(--ink-text);
}

body.inkside-theme .elementor-nav-menu--dropdown a:hover {
    background-color: var(--ink-bg-muted);
    color: var(--ink-primary);
}

/* ── Posts / Portfolio ── */
body.inkside-theme .elementor-post__title a,
body.inkside-theme .elementor-portfolio__title {
    font-family: var(--ink-font);
    color: var(--ink-text);
}

body.inkside-theme .elementor-post__excerpt {
    font-family: var(--ink-font);
    color: var(--ink-text-muted);
}

body.inkside-theme .elementor-post__read-more {
    font-family: var(--ink-font);
    color: var(--ink-primary);
}

/* ── Popup (Elementor Pro) ── */
body.inkside-theme .elementor-popup-modal .dialog-widget-content {
    border-radius: var(--ink-radius-xl);
    box-shadow: var(--ink-shadow-xl);
}