/*
 Theme Name: BG Theme
 Template: hello-elementor
 Version: 1.0
 Description: Child theme for Hello Elementor. Includes responsive typography scaling.
 Author: BG
*/

/* Import parent theme styles */
@import url("../hello-elementor/style.css");

/* ================================
   Responsive Text Scaling System
   ================================ */

html {
  font-size: calc(100vw / var(--dw));
  font-feature-settings: 'ss01' on, 'ss07' on, 'liga' off, 'calt' off;
}

/* ============================================
   MOBILE (default) — DW 390
   ============================================ */
:root {
  --dw: 390;
}

/* Typography — Mobile */
h1 {
  font-size: 58rem;
  font-style: normal;
  font-weight: 600;
  line-height: 58rem;
  letter-spacing: -2.32rem;
}

h2 {
  font-size: 12rem;
  font-style: normal;
  font-weight: 700;
  line-height: 12rem;
  text-transform: uppercase;
}

h3 {
  font-size: 32rem;
  font-style: normal;
  font-weight: 500;
  line-height: 36rem;
  letter-spacing: -1.28rem;
}

p {
  font-size: 16rem;
  font-style: normal;
  font-weight: 400;
  line-height: 19rem;
}

/* ============================================
   TABLET — DW 768
   ============================================ */
@media screen and (min-width: 481px) {
  :root {
    --dw: 768;
  }

  h1 {
    font-size: 58rem;
    line-height: 58rem;
    letter-spacing: -2.32rem;
  }

  h2 {
    font-size: 12rem;
    line-height: 12rem;
  }

  h3 {
    font-size: 32rem;
    line-height: 36rem;
  }

  p {
    font-size: 16rem;
    line-height: 19rem;
  }
}

/* ============================================
   DESKTOP — DW 1440
   ============================================ */
@media screen and (min-width: 769px) {
  :root {
    --dw: 1440;
  }

  h1 {
    font-size: 58rem;
    line-height: 58rem;
    letter-spacing: -2.32rem;
  }

  h2 {
    font-size: 12rem;
    line-height: 12rem;
  }

  h3 {
    font-size: 32rem;
    line-height: 36rem;
  }

  p {
    font-size: 16rem;
    line-height: 19rem;
  }
}

/* ============================================
   LARGE DESKTOP — DW 1920
   ============================================ */
@media screen and (min-width: 1729px) {
  :root {
    --dw: 1920;
  }

  h1 {
    font-size: 58rem;
    line-height: 58rem;
    letter-spacing: -2.32rem;
  }

  h2 {
    font-size: 12rem;
    line-height: 12rem;
  }

  h3 {
    font-size: 32rem;
    line-height: 36rem;
  }

  p {
    font-size: 16rem;
    line-height: 19rem;
  }
}