@font-face {
  font-family: 'Fieldwork Geo';
  font-style: normal;
  font-display: swap; /* Ensures text is visible immediately */
  src: url('/fonts/fieldwork-geo-regular-web.woff2') format('woff2');
}

@font-face {
  font-family: 'Jakarta Sans';
  /* Use 'truetype-variations' for variable TTF files */
  src: url('/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations'),
  url('/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype'); /* Fallback for older browsers */
  font-weight: 100 400 700 900; /* Define the axis range supported by the font */
  font-display: swap;
  }

/*Stratacraft Colors*/

:root {
  --sc-olive-gray:#72735F;
  --sc-dark-moss:#262618;
  --sc-carbon-black:#0D0D0D;
  --sc-light-gray:#8E8F8F;
  --sc-frost-white:#EBEDF2;
  --sc-red-orange:#f26d00;
}
      

body {
  font-size:18px;
  line-height:1.6;
  font-family: 'Fieldwork Geo', sans-serif;
  color:var(--sc-carbon-black);
  margin:auto 0;
}

h1, h2, h4, h5, h6 {
  font-family: 'Jakarta Sans', sans-serif;
  font-weight:700;
}

.container {
  margin: 0 auto;
  padding:20px 40px;
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color: var(--sc-frost-white);
  background-image: url("../img/background-graphic.svg");
  background-repeat: no-repeat;
  background-position: top right;
  transition:all 0.3s ease;
}

.hero {
  margin-top: 60px;
  margin-bottom: 200px;
}

.hero-title {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.2;
}

.lead {
  font-size:32px;
}
nav {
  margin-bottom:40px;
  padding-bottom:20px;
  display:flex;
  justify-content: space-between;
  align-items: center;
}


h2 {
  font-size:44px;
}

h3 {
  font-size:24px;
  font-weight:400;
}

.light-text {
  color: var(--sc-light-gray);
}

.logo {
  width: 200px;
  height: auto;
  display: block;
} 

.info {
  margin: 100px 0px 50px 0px;
  display: flex;
  gap:64px;
}

.info h2,.info h3, .info p {
  margin-top: 0;
  margin-bottom:16px;
}

.info p {
max-width:56ch;
}

#planters, #custom, #edging {
   margin-bottom:32px;
}

footer {
  margin-top:auto;
  border-top: 1px solid #0D0D0D;
  display:flex;
  justify-content: space-between;
  gap:20px;
  padding: 40px 0;
}

footer .lead {
  font-size:28px;
  line-height:32px;
}


.btn-sc {
  font-family: 'Jakarta Sans', sans-serif;
  font-size:22px;
  background-color: var(--sc-carbon-black);
  color: var(--sc-frost-white);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-sc:hover, .btn-sc:focus, .btn-sc:active{
  background-color: var(--sc-olive-gray);
}

/* Default styles for all focusable elements when navigating with a keyboard */
a:focus-visible {
  outline: 2px dashed var(--sc-dark-moss); /* A dashed outline is highly visible */
  border-radius: 1px;
  outline-offset: 3px;
}


.btn-sc:visited {
 background-color: var(--sc-light-gray);
}
  
.line-sc {
  width: 60px;
  height: auto;
  margin-bottom: 10px;
}


@media (max-width: 1200px) {
  .container {
    padding: 20px 20px;
    background-image: url("../img/background-graphic-light.svg");

  }

} 

@media (max-width: 960px) {
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0;
  }

  footer .lead {
    font-size: 22px;
    line-height: 1.2;
  }

  .info {
    flex-direction: column;
    gap: 32px;
  }

  #planters, #edging{
   margin-bottom:64px;
}

}

@media (max-width: 600px) {
  .hero-title {
    font-size: 48px;
  }

  .lead {
    font-size: 24px;
  }
  .hero {
    margin-top:10px;
    margin-bottom: 100px;
  }

  .info {
    margin: 30px 0px 10px 0px;
    gap:32px;
  }
}