/**
 * @file
 * base.css
 * 
 * The basic styles
 * 
 * -------------------------------------------------
 * Attached thru `.libraries.yml`
 *
 =========================================================================== */

/**
 * Global
 ========================================*/
 *, :before, :after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --Neutral-Black: #1E1E1E;
  --Neutral-Beige: #FCFBF1;
  --Neutral-Grey: #EEEDE5;
  --Secondary-Green: #8BD85C;
  --Primary-Blue: #00679A;
  --Tertiary-Orange: #EB5F2A;
  --space-x: 1.88rem;
  --space-xx: 3.125rem;
  --space-xxx: 6.25rem;
  --border-radius: 1.25rem;
  --letsgo-header-height: 6rem;
}

:root {
  --layout-horizontal-padding: 1.56rem;
  --border-underline-height: 0.1rem;
  --mobile-headings-breakpoint: 60rem;
}

:root {
  --header-font: 'Lexend', 'Roboto', Helvetica, sans-serif;
  --body-font: 'Alegreya', 'Roboto', Helvetica, sans-serif;
  --text--h1: 400 3.125rem/1 var(--header-font);
  --text--h2: 400 2.1875rem/1 var(--header-font);
  --text--h3: 400 1.5625rem/1.2 var(--header-font);
  --text--h4: 400 1.25rem/1.2 var(--header-font);
  --text--h5: 400 1.25rem/1 var(--header-font);
  --subheading-1: 500 1rem/1.2  var(--body-font);
}

@media  (min-width: 75rem) {
  :root {
    --layout-horizontal-padding: 2.5rem;
  }

  :root {
    --text--h1: 500 4.375rem/1.2 var(--header-font);
    --text--h2: 400 2.5rem/1.2 var(--header-font);
    --text--h3: 400 1.875rem/1.2 var(--header-font);
    --text--h4: 400 1.5625rem/1 var(--header-font);
    --text--h5: 400 1.25rem/1 var(--header-font);
    --subheading-1: 500 1.25rem/1 var(--body-font);
  }
}

body {
  font-size: 16px;
  line-height: 1.4;
  color: var(--Neutral-Black, #1E1E1E);
  font-family: var(--subheading-1);
}

/**
 * Elements
 ========================================*/

/**
 *  Form Elements
  ----------------------------*/

/**
 * Links (has classes)
 -----------------------------*/

a {
  color: inherit;
  -webkit-transition: all .4s;
  transition: all .4s;
  display: inline-block;
  vertical-align: bottom;
}

a:hover {
  color: inherit;
  opacity: .7;
  text-decoration: none;
}

/* Shorthand classes */
.no-fade a:hover {  opacity: 1;  }

.links-inherit a {  color: inherit;  }

.line-height--zero {  line-height: 0;  }

/**
 * Headers
 -----------------------------*/
h1,
.text--h1 {
  font: var(--text--h1);
}

h2,
.text--h2 {
  font: var(--text--h2);
}

h3,
.text--h3 {
  font: var(--text--h3);
}

h4,
.text--h4 {
  font: var(--text--h4);
}

h5,
.text--h5 {
  font: var(--text--h5);
}

.subheading-1 {
  font: var(--subheading-1);
  text-transform: uppercase;
}

/**
 * Misc 
 -----------------------------*/

/* Lists
----------------*/
ol, ul {
  margin: 0 0 1em 3em;
}

/* Paragraphs
----------------*/
p {  margin: 0.75rem 0;  }


/* Images
----------------*/
img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border: 0;
}


/**
 * Meyer's Reset (with modifications)
 ============================================================================ */

main, details, .display-block, /* Modification */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/**
 * normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css 
 ============================================================================ */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
 }