/*------------------------------------------------------------------
[Table of contents]

1. Imports & Reset
2. Variables
3. Base Elements
4. Typography & Fonts
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
1. Imports & Reset
-------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap");

/*------------------------------------------------------------------
2. Variables
-------------------------------------------------------------------*/
:root {
  --primary-orange: #ec5501;
  --primary-orange-hover: #d14a00;
  --bg-main: #f1ece7;
  --border-grey: #b3b3b3;
  --accent-teal: #1299ad;
  --focus-blue: #4a90e2;
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/*------------------------------------------------------------------
3. Base Elements
-------------------------------------------------------------------*/
html {
  font-size: 22px;
}

@media (max-width: 767px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 18px;
  }
}

html,
body {
  margin: 0px;
  min-height: 100vh;
  background-color: var(--bg-main);
  overflow-x: hidden;
}

body {
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

button:focus-visible {
  outline: 2px solid var(--focus-blue) !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

a {
  text-decoration: none;
}

/*------------------------------------------------------------------
4. Typography & Fonts
-------------------------------------------------------------------*/
@font-face {
  font-family: "BBH Bartle-Regular";
  src: url("/landing/fonts/BBHBartle-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Signatra";
  src: url("/landing/fonts/Signatra.ttf") format("truetype");
  font-display: swap;
}

.logo-title,
.footer-logo .logo-title {
  font-family: "BBH Bartle-Regular", "Roboto Condensed", sans-serif;
}

.script-title {
  font-family: "Signatra", cursive;
}

.header .logo-link,
.site-footer .footer-logo.logo-link {
  display: inline-flex;
  align-items: center;
}

.header .logo-image {
  height: 115px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
  background: transparent;
}

@media (max-width: 991px) {
  .header .logo-image {
    height: 64px;
    max-width: 150px;
  }
}

.header .logo-link {
  background: transparent;
  line-height: 0;
}

.site-footer .footer-logo-image {
  height: 110px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  display: block;
  background: transparent;
}

.header .logo-link,
.site-footer .footer-logo.logo-link {
  background: transparent;
}

.site-footer .footer-logo.logo-link {
  width: auto;
  height: auto;
  margin-bottom: 30px;
  transform: none;
}