/*
Theme Name: Hello Elementor Child
Theme URI: https://bestacademy.pl
Description: Child theme for Hello Elementor - header branding fix
Author: BEST Academy
Author URI: https://bestacademy.pl
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ===== HEADER BRANDING — CORRECTED ===== */

html body #site-header .site-branding::before {
      content: "BEST academy" !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  grid-area: brand-primary !important;
  align-self: end !important;
      color: #D02520 !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 27px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.02em !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  transform: none !important;
  text-shadow: none !important;
}

html body #site-header .site-branding::after {
  content: "of languages" !important;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  grid-area: brand-secondary !important;
  align-self: start !important;
  color: #b8860b !important;
  font-family: "Poppins", Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.025em !important;
  margin-top: 3px !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  transform: none !important;
  text-shadow: none !important;
  border: 0 !important;
}

/* Media queries for responsive sizing */
@media (max-width: 1180px) and (min-width: 1025px) {
  #site-header .site-branding::before {
    font-size: 22px !important;
  }
  #site-header .site-branding::after {
    font-size: 18px !important;
  }
}

@media (max-width: 1024px) {
  #site-header .site-branding::before {
    font-size: 18px !important;
  }
  #site-header .site-branding::after {
    font-size: 15px !important;
  }
}

@media (max-width: 560px) {
  #site-header .site-branding::before {
    font-size: clamp(14px, 4.2vw, 17px) !important;
    letter-spacing: 0.01em !important;
  }
  #site-header .site-branding::after {
    font-size: clamp(12px, 3.6vw, 14px) !important;
    letter-spacing: 0.01em !important;
  }
}