/* ═══════════════════════════════════════════════════════════════════════════
   قالب آریا – classic-position.css
   Moves and sizes the icons of the classic header (inc/classic-position.php).
   Uses the individual `translate` property: positive X = to the right of the screen,
   positive Y = down, and the layout around the item does not move.
   ═══════════════════════════════════════════════════════════════════════════ */

/* desktop */
@media (min-width: 901px) {
    html body .header-wrapper > .hdr-tools { translate: var(--cp-d-group-x, 0) var(--cp-d-group-y, 0); gap: var(--cp-d-gap, 8px); }
    html body .header-wrapper .hdr-tool { width: var(--cp-d-size, 40px); height: var(--cp-d-size, 40px); font-size: calc(var(--cp-d-size, 40px) * .4); }
    html body .header-wrapper .lang-selector.hdr-tool { width: auto; padding: 0 calc(var(--cp-d-size, 40px) * .32); }
    html body .header-wrapper .hdr-tool--search { translate: var(--cp-d-search-x, 0) var(--cp-d-search-y, 0); }
    html body .header-wrapper .hdr-tool--dark   { translate: var(--cp-d-dark-x, 0) var(--cp-d-dark-y, 0); }
    html body .header-wrapper .hdr-tool--lang   { translate: var(--cp-d-lang-x, 0) var(--cp-d-lang-y, 0); }
}

/* phones and tablets */
@media (max-width: 900px) {
    html body .header-wrapper > .hdr-tools { translate: var(--cp-m-group-x, 0) var(--cp-m-group-y, 0); gap: var(--cp-m-gap, 4px); }
    html body .header-wrapper .hdr-tool,
    html body .header-wrapper .lang-selector.hdr-tool { width: var(--cp-m-size, 36px); height: var(--cp-m-size, 36px); font-size: calc(var(--cp-m-size, 36px) * .4); padding: 0; }
    html body .header-wrapper .hdr-tool--search { translate: var(--cp-m-search-x, 0) var(--cp-m-search-y, 0); }
    html body .header-wrapper .hdr-tool--dark   { translate: var(--cp-m-dark-x, 0) var(--cp-m-dark-y, 0); }
    html body .header-wrapper .hdr-tool--lang   { translate: var(--cp-m-lang-x, 0) var(--cp-m-lang-y, 0); }
    html body .header-wrapper .hdr-user         { translate: var(--cp-m-user-x, 0) var(--cp-m-user-y, 0); }
    html body .header-wrapper > #menuBtn        { translate: var(--cp-m-menu-x, 0) var(--cp-m-menu-y, 0); }
}
/* very narrow phones: never larger than 32px, so the row still fits */
@media (max-width: 360px) {
    html body .header-wrapper .hdr-tool,
    html body .header-wrapper .lang-selector.hdr-tool { width: min(var(--cp-m-size, 36px), 32px); height: min(var(--cp-m-size, 36px), 32px); }
}