/* reset from Kevin Powell edit if you like */

/* makes sizing simpler */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* dark mode user-agent-styles */
html {
  color-scheme: dark light;
}

/* min body height */
body {
  min-height: 100vh;
}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* make headings wrap better */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p,
li,
figcaption {
  text-wrap: pretty;
  max-width: 55ch;
}

/* for container queries, landmarks as containers */
body> :is(header, footer),
main {
  container-type: inline-size;
}

/* remove list style but keep it as list for Safari browser - use with <ul role="list"> */
[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ========= Tema & Variabler ========= */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-200: hsl(0, 0%, 87%);
  --clr-neutral-300: hsl(0, 0%, 57%);
  --clr-neutral-400: hsl(0, 0%, 27%);
  --clr-neutral-800: hsl(0, 0%, 17%);
  --clr-neutral-900: hsl(0, 0%, 12%);

  --clr-green-100: hsl(169, 11%, 93%);
  --clr-green-200: hsl(169, 51%, 58%);
  --clr-green-400: hsl(169, 86%, 28%);
  --clr-green-800: hsl(169, 86%, 12%);
  --clr-green-900: hsl(169, 80%, 12%);

  --clr-robust: hsl(221, 63%, 32%);
  --clr-green: hsl(110, 63%, 32%);
  --clr-flower: hsl(2, 92%, 33%);
  --clr-colorful: hsl(303, 55%, 47%);
  --clr-sunloving: hsl(27, 88%, 33%);
  --clr-air: hsl(180, 84%, 27%);
  --clr-decorative: hsl(278, 79%, 40%);
  --clr-edible: hsl(68, 61%, 30%);
  --clr-easy: hsl(224, 86%, 58%);
  --clr-fragrant: hsl(327, 51%, 47%);
  --clr-fast: hsl(218, 11%, 34%);

  --border-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

  --font-base: "Open Sans", "Segoe UI", Tahoma, sans-serif;

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  --fs-100: 0.625rem;
  --fs-200: 0.75rem;
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5rem;
  --fs-700: 2rem;
  --fs-800: 2.5rem;
  --fs-900: 3rem;

  --clr-accent: var(--clr-green-400);
  --clr-accent-light-1: var(--clr-green-100);

  --clr-primary-light-1: var(--clr-neutral-100);
  --clr-primary-light-2: var(--clr-neutral-200);
  --clr-primary-light-3: var(--clr-neutral-300);
  --clr-primary: var(--clr-neutral-400);
  --clr-primary-dark: var(--clr-neutral-800);

  --fw-regular: var(--fw-400);
  --fw-medium: var(--fw-500);
  --fw-semi-bold: var(--fw-600);
  --fw-bold: var(--fw-700);
  --fw-x-bold: var(--fw-900);
}

/* ========= Globala stilar ========= */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.flow>*+* {
  margin-block-start: var(--flow-space, 1em);
}

h2,
h3 {
  font-weight: var(--fw-bold);
  line-height: 1;
}

h2 {
  font-size: var(--fs-700);
}

h3 {
  font-size: var(--fs-600);
  font-weight: var(--fw-semi-bold);
}

a {
  text-decoration: none;
  color: var(--clr-accent);
}

a:hover,
a:focus-visible {
  color: var(--clr-primary-light-1);
  text-decoration: underline;
}

body {
  font-family: var(--font-base);
  background-color: white;
  color: var(--clr-primary-dark);
}

main {
  background-color: var(--clr-neutral-200);
}

article {
  margin: 50px 0;
}

/* ========= Navbar/Header ========= */

.header {
  width: 100%;
  color: var(--clr-green-400);
  font-weight: var(--fw-medium);
  font-size: var(--fs-500);
  text-transform: uppercase;
  padding-block: 5px;
  padding-inline: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22vw;
}

.header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 20px;
  padding: 5px;
}

.header__logo>svg {
  stroke: var(--clr-green-400);
  height: 50px;
  width: 50px;
}

.header__heading {
  width: fit-content;
  line-height: 20px;
  letter-spacing: 1px;
}

.header__nav {
  max-width: 40%;
  min-width: 400px;
}

.header__links {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  width: fit-content;
  min-height: 100%;
  list-style: none;
}

.header__link {
  height: 60px;
  min-width: fit-content;
  max-width: 100px;
  padding: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
}

.header__link a {
  transition: .2s;
  color: var(--clr-green-400);
}

.header__menu {
  display: none;
}

/* ========= GALLERY (HERO) ========= */

.gallery {
  padding: 20px;
  text-align: center;
  margin-top: 40px;
}

.gallery__heading {
  font-size: var(--fs-700);
  font-weight: var(--fw-700);
}

.gallery__description {
  width: 100%;
  margin: 20px auto;
}

.gallery__grid {
  width: 50%;
  overflow: hidden;
  margin: auto;
  display: grid;
  padding: 15px;
  background-color: var(--clr-neutral-100);
  box-shadow: var(--border-shadow);
  grid-template: 1fr 1fr / repeat(6, 1fr);
  grid-template-areas:
    "image1 image1 image2 image3 image4 image4"
    "image1 image1 image5 image5 image6 image6";
  gap: 0;
}

.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__image--1 {
  grid-area: image1;
}
.gallery__image--2 {
  grid-area: image2;
}
.gallery__image--3 {
  grid-area: image3;
}
.gallery__image--4 {
  grid-area: image4;
}
.gallery__image--5 {
  grid-area: image5;
}
.gallery__image--6 {
  grid-area: image6;
}

/* ========= NYHETSBREV ========= */

.newsletter {
  background-color: var(--clr-neutral-100);
  padding: 4rem 2rem;
}

.newsletter__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

.newsletter__flex>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.newsletter__heading {
  font-size: var(--fs-700);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  max-width: 25ch;
}

.newsletter__signup {
  border: 1px var(--clr-neutral-400) solid;
  border-radius: 50px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 450px;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.newsletter__signup:focus-within {
  border-color: var(--clr-green-400);
  box-shadow: 0 0 5px hsla(169, 86%, 28%, 0.2);
  transform: scale(1.02);
}

.newsletter__input {
  flex-grow: 1;
  background-color: transparent;
  border: none;
  padding: 0.5rem 1rem;
  font-size: var(--fs-400);
}

.newsletter__input:focus {
  outline: none;
}

.newsletter__input::placeholder {
  color: var(--clr-neutral-400);
}

.newsletter__submit {
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  background-color: var(--clr-green-400);
  color: var(--clr-neutral-100);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  cursor: pointer;
}

.newsletter__submit:hover {
  background-color: var(--clr-green-800);
  color: var(--clr-neutral-100);
}

.newsletter__figure {
  padding: 40px;
  border-radius: 50%;
  background-color: var(--clr-green-400);
  max-width: 200px;
}

.newsletter__figure svg {
  margin: auto;
  width: 100%;
  height: 100%;
}

/* ========= PLANT-KORT ========= */

.plants {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 20px;
  width: 50%;
  margin: 50px auto;
}

.plants__card {
  width: 200px;
  padding: 15px;
  background-color: var(--clr-neutral-100);
  box-shadow: var(--border-shadow);
  display: flex;
  flex-direction: column;
}

.plants__image {
  max-height: 120px;
  object-fit: contain;
  object-position: center;
}

.plants__tags {
  color: var(--clr-neutral-100);
  font-size: var(--fs-100);
  text-transform: uppercase;
  display: flex;
  flex-flow: row wrap;
  gap: 5px;
  margin: 10px auto;
}

.plants__tag {
  display: inline;
  padding: 5px 10px;
  border-radius: 99999px;
  background-color: var(--clr-neutral-900);
}

.plants__tag--robust {
  background-color: var(--clr-robust);
}
.plants__tag--green {
  background-color: var(--clr-green);
}
.plants__tag--flower {
  background-color: var(--clr-flower);
}
.plants__tag--colorful {
  background-color: var(--clr-colorful);
}
.plants__tag--sunloving {
  background-color: var(--clr-sunloving);
}
.plants__tag--air {
  background-color: var(--clr-air);
}
.plants__tag--decorative {
  background-color: var(--clr-decorative);
}
.plants__tag--edible {
  background-color: var(--clr-edible);
}
.plants__tag--easy {
  background-color: var(--clr-easy);
}
.plants__tag--fragrant {
  background-color: var(--clr-fragrant);
}
.plants__tag--fast {
  background-color: var(--clr-fast);
}
.plants__tag--spice {
  background-color: var(--clr-green-200);
  color: var(--clr-green-900);
}

.plants__heading {
  font-size: var(--fs-500);
  font-weight: var(--fw-600);
  margin: 15px 0;
}

.plants__description {
  margin-bottom: 20px;
  font-size: var(--fs-400);
}

.plants__profile {
  margin-top: auto;
  font-size: var(--fs-200);
  display: flex;
  place-items: center;
  gap: 10px;
}

.plants__profile b {
  font-weight: var(--fw-600);
}

.plants__avatar {
  width: 50px;
}

/* ========= Tidigare odlingar ========= */

.tidigare-odlingar {
  background-color: var(--clr-neutral-100);
  padding: 50px;
  display: flex;
  margin: auto;
  justify-content: center;
  gap: 80px;
  margin-bottom: 55px;
}

.tidigare-odlingar__figure {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: var(--clr-green-400);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tidigare-odlingar__figure svg {
  width: 40%;
  height: auto;
}

.tidigare-odlingar__info {
  display: grid;
}

.tidigare-odlingar__heading {
  font-size: var(--fs-700);
  font-weight: var(--fw-700);
  margin: 15px 0;
}

.tidigare-odlingar__description {
  margin: 0 0 30px 0;
}

.tidigare-odlingar__link {
  padding: 10px 15px;
  border-radius: 9999px;
  background-color: var(--clr-green-400);
  color: var(--clr-neutral-100);
  margin-left: auto;
  transition: background-color 0.2s ease-in-out
}

/* ========= Footer ========= */

footer {
  background-color: var(--clr-green-400);
  color: var(--clr-neutral-100);
}

footer li {
  list-style-type: none;
  font-weight: var(--fw-600);
}

footer * {
  margin-bottom: 20px;
}

.footer__grid {
  display: grid;
  width: 50%;
  margin: auto;
  padding-top: 70px;
  grid-template-areas:
    "footer_logo footer_nav"
    "footer_desc footer_nav"
    "footer_contacts .";
}

.footer__logo {
  display: flex;
  width: 50%;
  gap: 20px;
  grid-area: footer_logo;
}

.footer__logo>svg {
  stroke: var(--clr-neutral-100);
  height: 50px;
  width: 50px;
}

.footer__heading {
  font-size: var(--fs-500);
  font-weight: 100;
  word-wrap: normal;
  width: 120px;
  text-justify: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 15px;
}

.footer__description {
  width: 60%;
  grid-area: footer_desc;
}

.footer__contact-links {
  grid-area: footer_contacts;
}

.footer__contact-links li {
    margin-bottom: 8px;
}

.footer__contact-links a {
  color: var(--clr-neutral-100);
  display: flex;
  flex-flow: row nowrap;
  gap: 5px;
  align-items: center;
}

.footer__contact-links a svg {
  margin-bottom: 0;
}

.footer__nav {
  grid-area: footer_nav;
  width: 100px;
  justify-self: end;
}

.footer__nav a {
  color: var(--clr-neutral-100);
  display: flex;
  flex-flow: row nowrap;
}

/* =========  Hover-klasser ========= */

.link__hover--green:hover a {
  color: var(--clr-neutral-100);
  text-decoration: none;
}

.link__hover--green:hover {
    background-color: var(--clr-green-400);
}


.link__hover--white:hover {
  background-color: var(--clr-neutral-100);
  color: var(--clr-green-400);
}

.link__hover--white:hover a {
  color: var(--clr-green-400);
}

.link__hover--underline:hover {
  text-decoration: underline var(--clr-neutral-100) solid 1px;
}

/* ========= Responsivitet/Media-queries ========= */

/* Tablet & mindre desktop (max 1200px) */
@media screen and (max-width: 1200px) {
  .header__links {
    display: none;
  }
  .header__menu {
    display: block;
    stroke: var(--clr-green-400);
    width: 50px;
    height: 50px;
    justify-self: flex-end;
  }
  .gallery__grid {
    grid-template-areas:
      "image1 image1 image2 image2 image3 image3"
      "image4 image4 image5 image5 image6 image6";
    width: 70%;
  }
  .newsletter__flex {
    flex-flow: column nowrap;
  }
  .newsletter__heading {
    font-size: var(--fs-600);
    width: 100%;
    text-align: center;
  }
  .newsletter__figure {
    order: -1;
    padding: 40px;
    min-width: 100px;
  }
  .plants {
    width: 80%;
  }
  .footer__grid {
    width: 100%;
    padding-top: 50px;
    padding: 50px;
  }
  .footer__nav {
    justify-self: center;
  }
}

/* Tablet & Mobil (max 900px) */
@media screen and (max-width: 900px) {
  .header__nav {
    min-width: 50px;
  }
  .newsletter {
    padding: 20px;
  }
  .plants {
    width: 80%;
  }
  .tidigare-odlingar {
    padding: 20px 0;
    gap: 20px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Mindre Mobil (max 701px) */
@media screen and (max-width: 701px) {
  .gallery {
    width: 100%;
  }
  .gallery__grid {
    width: 100%;
  }
  .plants {
    width: 99%;
  }
  .footer__grid {
    width: 90%;
    grid-template-areas:
      "footer_logo"
      "footer_desc"
      "footer_contacts";
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer__logo {
    width: 100%;
    justify-content: center;
  }
  .footer__description {
    width: 90%;
  }
  .footer__nav {
    display: none;
  }
  .footer__contact-links a {
      justify-content: center;
  }
}

/* Minsta Mobil (max 500px) */
@media screen and (max-width: 500px) {
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "image1 image1"
      "image2 image3"
      "image4 image5"
      "image6 image6";
  }
  .tidigare-odlingar {
    padding: 10px;
  }
}