/* 

--- LOGO: from Canva.com; Font used: Gagalin (Template used: Katrina Catering)

--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights:
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights:
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
             
- Letter spacing
-0.5px
0.75px

--- 02 COLORS
 Primary: #eb4305;

 - Tints:
 #ed561e
 #ef6937
 #f17b50
 #f7b49b
 #f9c7b4
 #fbd9cd
 #fdece6



 - Shades:
 #d43c05
 #bc3604
 #a52f04
 #762203
 #5e1b02
 #461401
 #2f0d01
 #170700



 - Accents:
- Greys: 

--- 03 IMAGES

-- https://unsplash.com/


--- 04 HEADSHOTS 

Free avatars only now below: 

-- https://www.uifaces.co/



--- 05 SHADOWS
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 28 / 32 / 48 / 64 / 80 / 96 / 128


*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  /* font-size: 10px; */
  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font size setting */
  /* font size of our webpage is 62.5% of the user's browser font size */
  font-size: 62.5%;
}

body {
  font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #555;

  /* background-color: #000; */

  /* ONLY WORKS if there's nothing absolutely positioned in relation to body element */
  /* All elements that overflow the viewport horizontally, will be hidden */
  /* If setting below in body doesn't work, type the same line in 'html' element as well and it should work */
  overflow-x: hidden;
}

/* ************************ */
/* GENERAL REUSABLE COMPONENTS */
/* ************************ */

.container {
  /* 1140px */
  max-width: 120rem;
  /* Make sure content doesn't glue to side when shrinked viewport */
  padding: 0 3.2rem;
  /* Make sure container is centered in viewport */
  margin: 0 auto;
}

/* Reusable Generic Grid  */
.grid {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
  /* 1fr 1fr */
}

.grid--3-cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

.grid--5-cols {
  grid-template-columns: repeat(5, 1fr);
}

.grid--center-v {
  align-items: center;
}

.grid--center-h {
  justify-items: center;
}

/* Make heading formats uniform across the page */
.heading-secondary,
.heading-tertiary {
  font-weight: 700;
  color: #333;
  letter-spacing: -0.5px;
  /* OK to use px for small lengths */
}

.heading-secondary {
  font-size: 4.4rem;
  line-height: 1.2;
  margin-bottom: 9.6rem;
  /* Make sure the heading stands out nicely, above spacing is needed */
}

.heading-tertiary {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 3.2rem;
}

.heading-tertiary-sm {
  font-size: 2.6rem;
  line-height: 1.2;
  margin-bottom: 2.4rem;
}

/* span element, change it to 'block' display */
.subheading {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #ed561e;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  letter-spacing: 0.75px;
}

/* for anchor elements -- btn--cta, btn--more & btn--recipe  */
.btn,
.btn:link,
.btn:visited {
  display: inline-block;
  font-weight: 600;
  font-size: 2rem;
  text-decoration: none;
  border-radius: 9px;
  /* For btn, use padding left/right double space than left/right */
  padding: 1.6rem 3.2rem;
  /* box-shadow: 0 0 0 3px #eee; */

  transition: all 300ms;
}

/* cta btn */
.btn--cta:link,
.btn--cta:visited {
  background-color: #eb4305;
  color: #fff;
}

/* Only need the changed format to apply to hover/active states */
.btn--cta:hover,
.btn--cta:active {
  background-color: #bc3604;
}

/* more btn */
.btn--more:link,
.btn--more:visited {
  background-color: #fff;
  color: #555;
}

.btn--more:hover,
.btn--more:active {
  background-color: #eee;
}

/* learn btn */
.btn--learn:link,
.btn--learn:visited {
  background-color: #eb4305;
  color: #fff;
}

/* Only need the changed format to apply to hover/active states */
.btn--learn:hover,
.btn--learn:active {
  background-color: #bc3604;
}

/* Pricing section CTA button */
.btn--cta--pricing:link,
.btn--cta--pricing:visited {
  background-color: #eb4305;
  color: #fff;
}

.btn--cta--pricing:hover,
.btn--cta--pricing:active {
  background-color: #bc3604;
}

/* sign up btn for CTA form */
.btn--cta--order {
  background-color: #461401;
  color: #fdeee7;
  /* Align at the bottom */
  align-self: end;
  padding: 1.2rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* transition is already set in .btn class, so no need transition here for btn--form */
.btn--cta--order:hover {
  background-color: #fff;
  color: #555;
}

/* all link anchors */
.link:link,
.link:visited {
  display: inline-block;
  color: #e8590c;
  text-decoration: none;

  /* Use border-bottom as better underline */
  /* Nice trick: use currentColor for border so it has the same color as text color */
  border-bottom: 1px solid currentColor;

  padding-bottom: 2px;
  transition: all 300ms;
}

.link:hover,
.link:active {
  color: #ba470a;
  border-bottom: 1px solid transparent;
  /* Even if border-bottom isn't set here, border will change color along with text color (as currentColor was set) */
  /* When setting border-bottom, don't set it to 'none', mess up screen, set the same border with 'transparent' color for it to disappear */
}

/* Focus is just a state like 'link','hover',etc. */
/* Here we are selecting focus on all webpage elements */
*:focus {
  outline: none;
  box-shadow: 0 0 0 0.4rem rgba(236, 100, 26, 0.463);
}

/* **********HELPER CLASSES************ */

/* Helper Class for CTA button (orange button) */
/* Good way to use specifically for a single element to add specialized format*/

.margin-right-sm {
  margin-right: 1.6rem !important;
  /* add important to make sure the property will be used over other conflicting properties! */
}

/* Reduced margin bottom for headings */
.margin-bottom-rd {
  margin-bottom: 4.8rem !important;
}

.margin-bottom-hi {
  margin-bottom: 10.8rem !important;
}

.margin-bottom-md {
  margin-bottom: 6.4rem !important;
}

.margin-bottom-himd {
  margin-bottom: 7.2rem !important;
}

.margin-bottom-low {
  margin-bottom: 2.4rem !important;
}

.margin-bottom-none {
  margin-bottom: 0 !important;
}

.row-gap-more {
  row-gap: 12rem;
}

/* Change/overwrite font color of headings */
.font-color-white {
  color: #fff !important;
}

.letter-spacing {
  letter-spacing: 0.14px !important;
}

.center-text {
  text-align: center;
}

.font-color-white {
  color: #fff;
}