/**
 * VOSKA — Elementor Overrides
 * File: assets/css/elementor-overrides.css
 *
 * Loaded via: integrations/elementor.php
 * Hook:       elementor/frontend/after_enqueue_styles
 *
 * PURPOSE:
 *   This file is the single place for all CSS conflicts with Elementor.
 *   It loads AFTER all Elementor stylesheets, so even specificity-equal
 *   selectors here will win via source order.
 *
 *   Keep typography.css, buttons.css and layout.css clean — do NOT add
 *   Elementor-specific overrides there. Add them here instead.
 *
 * WHEN TO ADD A RULE HERE:
 *   - Elementor widget CSS overrides a VOSKA variable-driven style
 *   - Elementor uses !important and a normal class won't win
 *   - A widget resets a property (margin, padding, line-height) that
 *     VOSKA needs to control
 *
 * SPECIFICITY GUIDE:
 *   Elementor widget classes are typically 0,1,0 (one class).
 *
 *   DOM structure of Elementor Heading widget:
 *     <div class="elementor-element vsk-h1">   ← custom class lands HERE
 *       <div class="elementor-widget-container">
 *         <h2 class="elementor-heading-title"> ← Elementor class is HERE
 *         </h2>
 *       </div>
 *     </div>
 *
 *   Because .vsk-h* and .elementor-heading-title are NEVER on the same
 *   element, compound selectors like .elementor-heading-title.vsk-h1
 *   will never match. Use a descendant selector instead:
 *
 *     body .vsk-h1 .elementor-heading-title  →  0,2,1  ✓
 *
 *   For !important rules in Elementor, you need !important here too —
 *   document those cases with a comment explaining why.
 *
 * ─── SECTIONS ─────────────────────────────────────────────────────────────
 *   1. Heading widget
 *   2. Text Editor widget
 *   3. Button widget
 *   4. Icon / Icon Box widget
 *   5. Global resets
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. HEADING WIDGET
   .elementor-heading-title resets line-height: 1 and clears margin/padding.
   .vsk-h* is on the widget wrapper, .elementor-heading-title is on the inner
   tag — so we use a descendant selector (0,2,1) to reliably override (0,1,0).
───────────────────────────────────────────────────────────────────────────── */

body .vsk-h1 .elementor-heading-title {
    font-size:      var(--vsk-font--size-h1);
    line-height:    var(--vsk-font--lh-h1);
    letter-spacing: var(--vsk-font--ls-h1);
    font-weight:    var(--vsk-font--wgt-heading);
    font-family:    var(--vsk-font--family-heading);
}

body .vsk-h2 .elementor-heading-title {
    font-size:      var(--vsk-font--size-h2);
    line-height:    var(--vsk-font--lh-h2);
    letter-spacing: var(--vsk-font--ls-h2);
    font-weight:    var(--vsk-font--wgt-heading);
    font-family:    var(--vsk-font--family-heading);
}

body .vsk-h3 .elementor-heading-title {
    font-size:      var(--vsk-font--size-h3);
    line-height:    var(--vsk-font--lh-h3);
    letter-spacing: var(--vsk-font--ls-h3);
    font-weight:    var(--vsk-font--wgt-heading);
    font-family:    var(--vsk-font--family-heading);
}

body .vsk-h4 .elementor-heading-title {
    font-size:      var(--vsk-font--size-h4);
    line-height:    var(--vsk-font--lh-subheading);
    letter-spacing: var(--vsk-font--ls-h4);
    font-weight:    var(--vsk-font--wgt-subheading);
    font-family:    var(--vsk-font--family-subheading);
}

body .vsk-h5 .elementor-heading-title {
    font-size:      var(--vsk-font--size-h5);
    line-height:    var(--vsk-font--lh-subheading);
    letter-spacing: var(--vsk-font--ls-h5);
    font-weight:    var(--vsk-font--wgt-subheading);
    font-family:    var(--vsk-font--family-subheading);
}

body .vsk-h6 .elementor-heading-title {
    font-size:      var(--vsk-font--size-h6);
    line-height:    var(--vsk-font--lh-subheading);
    letter-spacing: var(--vsk-font--ls-h6);
    font-weight:    var(--vsk-font--wgt-subheading);
    font-family:    var(--vsk-font--family-subheading);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. TEXT EDITOR WIDGET
   .elementor-widget-text-editor resets typography on its inner container.
   Restore VOSKA text classes when applied inside this widget.
───────────────────────────────────────────────────────────────────────────── */

body .vsk-p {
    font-size:   var(--vsk-font--size-text);
    line-height: var(--vsk-font--lh-text);
    font-weight: var(--vsk-font--wgt-text);
    font-family: var(--vsk-font--family-text);
}

body .vsk-pl {
    font-size:   var(--vsk-font--size-text-l);
    line-height: var(--vsk-font--lh-text-l);
    font-weight: var(--vsk-font--wgt-text);
    font-family: var(--vsk-font--family-text);
}

body .vsk-ps {
    font-size:   var(--vsk-font--size-text-s);
    line-height: var(--vsk-font--lh-text-s);
    font-weight: var(--vsk-font--wgt-text);
    font-family: var(--vsk-font--family-text);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. BUTTON WIDGET
   Elementor's button widget: .vsk-btn is on the wrapper div,
   .elementor-button is on the inner <a>. Use descendant selector.
   buttons.css handles most styles — this catches Elementor-specific
   properties that still leak through (e.g. font-size from .elementor-size-*).
───────────────────────────────────────────────────────────────────────────── */

body .vsk-btn > .elementor-button {
    font-family:    var(--vsk-font--family-button);
    font-size:      var(--vsk-btn--font-size);
    font-weight:    var(--vsk-btn--font-weight);
    letter-spacing: var(--vsk-btn--letter-spacing);
    line-height:    var(--vsk-btn--line-height);
    border-radius:  var(--vsk-btn--radius);
    /* padding is driven by --vsk-btn--padding-* variables set on the wrapper
       in buttons.css — do not override with physical values here or variant
       overrides (e.g. tertiary, --sm) will be silently ignored */
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. ICON / ICON BOX WIDGET
   Placeholder — add rules as conflicts are discovered per project.
───────────────────────────────────────────────────────────────────────────── */

/* body .vsk-h3 .elementor-icon-box-title { ... } */


/* ─────────────────────────────────────────────────────────────────────────────
   5. GLOBAL RESETS
   Catch-all for Elementor properties reset globally that affect VOSKA layout.
   Add here only when a rule cannot be scoped to a specific widget.
───────────────────────────────────────────────────────────────────────────── */

/*
 * Elementor wraps sections/containers in .elementor-section and
 * .e-con — ensure VOSKA spacing variables are not overridden
 * on elements that also carry VOSKA section classes.
 */
body section.vsk-sec--no-gap {
    margin-top: 0;
}

/*
 * Elementor sometimes forces box-sizing: content-box on inner elements.
 * Restore border-box for any element carrying a VOSKA class.
 */
body [class*="vsk-"] {
    box-sizing: border-box;
}