/**
Theme Name: Webdesign VALNOVO
Author: Webdesign VALNOVO
Author URI: https://valnovo.de/
Description: Webentwicklung mit Herz und Seele!
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webdesign-valnovo
Template: astra
*/

/* 
  Делаем контейнер «прозрачным» для выступающих элементов. 
  Это нужно, чтобы логотип не обрезался.
*/
.site-header-section-left {
  overflow: visible;
}

/* === (A) БАЗОВЫЙ СТИЛЬ (Mobile first) === 
     Применяется ко всем экранам по умолчанию,
     т.е. от 0px до бесконечности, пока не 
     «сработают» следующие медиа-запросы 
*/
.site-header-section-left .custom-logo-link img {
  width: 100px;       /* ширина для мобильных (пример) */
  height: auto;
  max-width: none;
  display: block;

  margin-top: 0;      /* без выступа сверху */
  margin-bottom: -35px; /* пусть снизу немного выступает (пример) */
}

/* === (B) TABLET (min-width: 769px и max-width: 1024px) ===
     Здесь переопределяем ширину и отступы для планшетов 
*/
@media (min-width: 769px) and (max-width: 1024px) {
  .site-header-section-left .custom-logo-link img {
    width: 100px;       /* чуть побольше, чем на мобиле */
    margin-top: 0;      /* если хотите, чтобы сверху не выступал */
    margin-bottom: -35px; /* снизу чуть сильнее выступ */
  }
}

/* === (C) DESKTOP (от 1025px и выше) ===
     Самая большая версия лого + 
     выступ сверху и снизу 
*/
@media (min-width: 1025px) {
  .site-header-section-left .custom-logo-link img {
    width: 140px;       /* на десктопе ещё крупнее */
    margin-top: -45px;  /* выступ сверху */
    margin-bottom: -45px; /* выступ снизу */
  }
}

/*
  Стили применяются только при прилипании,
  когда Astra добавляет класс .ast-header-sticked
*/

/* == (A') Mobile first sticky */
.ast-header-sticked .site-header-section-left .custom-logo-link img {
  width: 60px;
  height: 60px; 
  border-radius: 50%;
  object-fit: cover;
  margin-top: 0;
  margin-bottom: 0px; 
}

/* == (B') Tablet (769 – 1024px) sticky */
@media (min-width: 769px) and (max-width: 1024px) {
  .ast-header-sticked .site-header-section-left .custom-logo-link img {
    width: 60px;
    height: 60px;
    margin-bottom: -20px;
  }
}

/* == (C') Desktop (>= 1025px) sticky */
@media (min-width: 1025px) {
  .ast-header-sticked .site-header-section-left .custom-logo-link img {
    width: 60px;
    height: 60px;  /* немного меньше в «прилипшем» виде, 
                       если хочется компактнее */
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 50%;
    object-fit: cover;
  }
}