/*
Theme Name: Heartbeat
Author: Sabine Schleise
Description: Heartbeat Theme
Version: 1.0
*/

:root {
  --primary-bg: rgb(240, 240, 240);
  --primary-blue: rgb(56, 96, 112);
  --heading-h2: rgb(66, 106, 120);
  --heading-h3: rgb(86, 126, 140);
  --heading-h4: rgb(111, 141, 153);
  --heading-h5: rgb(146, 171, 186);
  --heading-h6: rgb(180, 200, 215);
  --footer-bg: rgb(29, 48, 54);
  --footer-color: rgb(140, 148, 152);
  --footer-title: rgb(217, 217, 217);
  --white: rgb(240, 240, 240);
  --white-hover: rgb(217, 217, 217);
}

/* ============= FONTS ============= */
@font-face {
    font-family: 'Montserrat-Regular';
    src: url('assets/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('assets/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat-Light';
    src: url('assets/fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}   
@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

body {
    font-family: 'Montserrat-Regular', Arial, sans-serif;
    background-color: var(--primary-bg) !important;
}
.hb-white-bold a {
    color: var(--white);
    font-family: 'Montserrat-Bold';
}
.hb-white-bold a:hover {
    color: var(--white-hover);
}
.hb-white-medium a {
    color: var(--footer-color) !important;
    font-size: 1rem;
    font-family: 'Montserrat-Medium';
}
.hb-white-medium a:hover {
    color: var(--white-hover);
}
/* Responsive Logo Styling */
.logo {
  max-height: 100px;
  height: auto;
  width: auto;
  max-width: 100%;
  display: block;
}

/* ============= RESPONSIVE HEADINGS ============= */
body h1 {
  font-family: 'Montserrat-Bold', Arial, sans-serif !important;
  color: var(--primary-blue) !important;
  font-size: 2.5rem;
  margin-top: 2rem;
  margin-bottom: 1.25rem;
  font-weight: bold;
  line-height: 1.2;
}
body h2 {
  font-family: 'Montserrat-SemiBold', Arial, sans-serif !important;
  color: var(--heading-h2) !important;
  font-size: 2rem;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  font-weight: bold;
  line-height: 1.2;
}
body h3 {
  font-family: 'Montserrat-Bold', Arial, sans-serif !important;
  color: var(--heading-h3) !important;
  font-size: 1.625rem;
  margin-top: 1.5rem;
  margin-bottom: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}
body h4 {
  font-family: 'Montserrat-Bold', Arial, sans-serif !important;
  color: var(--heading-h4) !important;
  font-size: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}
body h5 {
  font-family: 'Montserrat-Bold', Arial, sans-serif !important;
  color: var(--heading-h5) !important;
  font-size: 1.125rem;
  margin-top: 1.1rem;
  margin-bottom: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
}
body h6 {
  font-family: 'Montserrat-Bold', Arial, sans-serif !important;
  color: var(--heading-h6) !important;
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
  line-height: 1.2;
}

.bg-footer {
  background-color: var(--footer-bg);
  color: var(--footer-color);
}
.title-footer {
  color: var(--footer-title) !important;
}
.color-footer {
  color: var(--footer-color) !important;
}

.bg-header {
  background-color: var(--primary-bg);
}

@media (max-width: 767.98px) {
    .logo {
      max-height: 60px;
    }
  }

  @media (min-width: 1200px) {
    .logo {
      max-height: 100px;
    }
  }
  
  @media (max-width: 767.98px) {
    body h1 { font-size: 2rem; }
    body h2 { font-size: 1.5rem; }
    body h3 { font-size: 1.25rem; }
    body h4 { font-size: 1rem; }
    body h5 { font-size: 0.95rem; }
    body h6 { font-size: 0.9rem; }
  }
  @media (min-width: 1200px) {
    body h1 { font-size: 3rem; }
    body h2 { font-size: 2.25rem; }
    body h3 { font-size: 1.75rem; }
    body h4 { font-size: 1.5rem; }
    body h5 { font-size: 1.375rem; }
    body h6 { font-size: 1.25rem; }
  }