/*** Theme ***/

:root {
  /* color definitions */
  --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-500: hsl(169, 86%, 20%);
  --clr-green-800: hsl(169, 86%, 12%);
  --clr-green-900: hsl(169, 80%, 12%);

  /* theme color assignments */
  --clr-accent: var(--clr-green-400);
  --clr-accent-light-1: var(--clr-green-100);
  --clr-accent-light-5: var(--clr-green-500);
  --clr-accent-light-8: var(--clr-green-800);

  --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-light-4: var(--clr-neutral-400);

  --clr-primary: var(--clr-neutral-400);
  --clr-primary-dark: var(--clr-neutral-800);

  /* Border shadow */
  --border-shadow: 0 0 5px 0 hsl(0 0% 0% / 0.12);

  /* Spacing */
  --spacing-base: 1rem;
  --spacing-base-sm: 0.5rem;

  --flow-space: 1.75rem;
  --flow-space-lg: 4rem;
  --flow-space-xl: 6rem;

  /* border */
  --border-accent-100: 0.06rem solid var(--clr-accent);

  /* border radius */
  --radius-100: 0.6rem;
  --radius-900: 100vw;

  /* outline */
  --outline-accent-100: 0.18rem dashed var(--clr-accent);
  --outline-neutral-100: 0.18rem dashed var(--clr-neutral-100);
  --outline-offset-100: 0.18rem;
}

/*** GLOBAL/BASE ***/
:focus-visible {
  outline: var(--outline-accent-100);
  outline-offset: var(--outline-offset-100);
}

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

h1,
h2 {
  font-size: clamp(1.75rem, 2.5vw + 0.1rem, var(--fs-700));
}

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

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

  &:not([class]):is(:hover, :focus-visible) {
    text-decoration: underline;
    outline: none;
  }
}

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

/*** UTILITIES ***/
.clr-bg-accent {
  background-color: var(--clr-accent);
  color: var(--clr-accent-light-1);
}

.clr-bg-primary-light1 {
  background-color: var(--clr-primary-light-1);
}

.py-lg {
  padding-block: var(--flow-space-lg);
}

.px-base {
  padding-inline: var(--spacing-base);
}

.radius-100 {
  border-radius: var(--radius-100);
}

.radius-900 {
  border-radius: var(--radius-900);
}

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

/*** COMPOSITION ***/
.btn {
  cursor: pointer;
}

.btn,
.link {
  padding-block: var(--spacing-base-sm);
  padding-inline: var(--spacing-base);
  border-radius: var(--radius-900);
  border: 0.06rem solid transparent;

  &[data-variant='primary'] {
    background-color: var(--clr-accent);
    color: var(--clr-primary-light-1);

    &:is(:hover, :active) {
      background-color: var(--clr-primary-light-1);
      color: var(--clr-accent);
      border: var(--border-accent-100);
    }
  }
}

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

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

.flex {
  display: flex;
}

.flex-center {
  align-items: center;
  justify-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-100 {
  gap: var(--spacing-base-sm);
}

.grid {
  display: grid;
}

.link {
  display: inline-block;

  &.link-nav {
    text-transform: uppercase;
  }

  &.tag {
    font-size: var(--fs-200);
    text-transform: uppercase;
    padding-inline: var(--spacing-base-sm);
    padding-block: 0.24rem;
  }
}

/*
See these for more info:
https://www.youtube.com/watch?v=c13gpBrnGEw
https://www.youtube.com/watch?v=cf-J4ffMBfo
*/
.content-grid,
.fullwidth {
  --_min-margin-width: var(--spacing-base);
  --_content-width: 80rem;
  --_breakin-width: 70ch;

  /* calculate total column size of content area on each side of the breakin content by substracting the breakin width from the content width and dividing it by 2*/
  --_content-col-size: calc(
    (var(--_content-width) - var(--_breakin-width)) / 2
  );

  /* max breakin width or breakin area size 100% minus the gap on each side if content size is larger than screen width  */
  --_breakin-size: min(
    100% - var(--_min-margin-width) * 2,
    var(--_breakin-width)
  );

  display: grid;
  grid-template-columns:
    [fullwidth-start] minmax(var(--_min-margin-width), 1fr)
    [content-start] minmax(0, var(--_content-col-size))
    [breakin-start] var(--_breakin-size) [breakin-end]
    minmax(0, var(--_content-col-size)) [content-end]
    minmax(var(--_min-margin-width), 1fr) [fullwidth-end];

  /* put child elements in the content column if they don't have the .fullwidth or .breakin class */
  > *:not(.breakin, .fullwidth) {
    grid-column: content;
  }

  /* if child elements have the .fullwidth class put in the fullwidth column */
  > .fullwidth {
    grid-column: fullwidth;
  }

  /* if child elements have the .breakin class put in the breakin column */
  > .breakin-grid,
  > .breakin-grid-lg {
    grid-column: breakin;

    &.fullwidth {
      grid-column: fullwidth;
      > * {
        grid-column: breakin;
      }
    }
  }

  > .breakin-grid-lg {
    --_breakin-width: 80ch;
  }
}

/*** BLOCKS ***/

/* header */
.page-header {
  background-color: var(--clr-primary-light-1);
  position: sticky;
  z-index: 9999; /* bring to top most front */
  inset-block-start: 0;

  /* add backdrop to <a> elements and hamburger icon*/
  a,
  > .hamburger {
    border-radius: 0.12rem;
    position: relative;
    overflow: hidden;
    padding-block: var(--spacing-base-sm);

    &::after {
      display: block;
      content: '';
      inset: 0; /*push in to full size*/
      position: absolute;
      z-index: -1;
      transform-origin: left;
      transform: scaleX(0);
      transition: transform 200ms ease-in-out;
      background-color: var(--clr-accent);
    }

    &:is(:hover) {
      color: var(--clr-accent-light-1);
      &::after {
        transform: scaleX(1);
      }
    }
  }

  > .brand {
    --_size: 3rem;
    grid-row: 1/1;
    justify-self: start;
    gap: var(--spacing-base-sm);
    padding-inline: var(--spacing-base);

    font-weight: var(--fw-600);
    line-height: 0.8;
    text-transform: uppercase;

    > svg {
      block-size: var(--_size);
      inline-size: var(--_size);
      aspect-ratio: 1;
    }
  }
  > .hamburger {
    display: none;
  }
}

.page-header > .nav-main {
  grid-column: 3/5;
  grid-row: 1/1;

  > .list {
    align-items: center;
    justify-content: flex-end;
    gap: var(--flow-space);

    > .item > .link-nav {
      display: block;
      padding-inline-start: var(--spacing-base);

      &[data-state='current'] {
        color: var(--clr-neutral-100);
        &::after {
          transform: scaleX(1);
        }
      }
    }
  }
}

/* main */
.hero {
  .grid-gallery {
    grid-template-areas:
      'one two'
      'three four'
      'five six';

    border: 0.88rem solid var(--clr-primary-light-1);
    box-shadow: var(--border-shadow);
    grid-template-rows: repeat(2, minmax(15rem, 1fr));

    @media (width > 600px) {
      grid-template-areas:
        'one two three'
        'four five six';
    }

    @media (width > 850px) {
      block-size: 550px;
      grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
      grid-template-areas:
        'one one two three four four'
        'one one five five six six';
    }

    > .item {
      --_size: 100%;
      inline-size: var(--_size);
      block-size: var(--_size);
      grid-area: var(--_pos);

      img {
        inline-size: var(--_size);
        block-size: var(--_size);
        object-fit: cover;
      }
    }
  }
}

.subscribe,
.history {
  > .container {
    flex-direction: column;
    gap: clamp(var(--flow-space-lg), 2.5vw + 0.5rem, var(--flow-space-xl));

    .section-img {
      inline-size: min(100%, 30rem);
      aspect-ratio: 1;
      background-image: url(./assets/images/icon-planting.svg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 50%;
    }

    > .content {
      inline-size: 100%;
      text-align: center;

      > .link {
        justify-self: center;
      }
    }

    @media (width > 600px) {
      flex-direction: row;

      &[data-flow='reversed'] {
        flex-direction: row-reverse;
      }

      > .content {
        text-align: initial;

        > .link {
          justify-self: end;
        }
      }
    }
  }
}

.subscribe .content > .sub-form {
  --_pad: 0.18rem;
  --_pad-i: calc(var(--spacing-base) - var(--_pad));
  display: flex;
  border-radius: var(--radius-900);
  border: 1px solid var(--clr-neutral-800);
  padding: var(--_pad);

  > [type='email'] {
    flex-grow: 2;
    padding-inline: var(--_pad-i);
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--clr-neutral-800);
  }

  &:has([type='email']:focus-visible) {
    outline: var(--outline-accent-100);
    outline-offset: var(--outline-offset-100);
  }
}

/* cards */
/* learn subgrid in 14 minuts https://www.youtube.com/watch?v=Yl8hg2FG20Q */
.cards > .cards-grid {
  --_gap: var(--spacing-base);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--_content-width) / 4 - var(--_gap) * 3), 1fr)
  );
  gap: var(--_gap);

  > .item {
    --_row-span: span 3;
    --_temp-col: subgrid;
    grid-template-rows: var(--_temp-col);
    grid-row: var(--_row-span);

    > .card {
      --_link-index: 4;
      display: grid;
      grid-template-rows: var(--_temp-col);
      grid-row: var(--_row-span);
      border-radius: var(--radius-100);
      overflow: hidden;
      position: relative;
      transition: transform 150ms ease-out;
      box-shadow: var(--border-shadow);

      &:is(:hover, :focus-within) {
        box-shadow: 0 0 10px 1px hsl(0 0% 0% / 0.25);
        transform: translateY(-0.5rem);
      }

      &:has(> .read-more:focus-visible) {
        outline: var(--outline-neutral-100);
        outline-color: var(--clr-primary-light-3);
        outline-offset: var(--outline-offset-100);
      }

      a {
        position: relative;
        z-index: var(--_link-index);
      }

      > .read-more {
        display: block;
        position: absolute;
        inset: 0;
        z-index: calc(var(--_link-index) - 1);
      }

      > header {
        position: relative;
        block-size: 300px;
        overflow: hidden;
        inline-size: 100%;

        > img {
          block-size: 100%;
          inline-size: 100%;
          object-fit: cover;
        }

        &::before {
          content: '';
          inset: 0;
          position: absolute;
          background: url(./assets/images/icon-watermark.svg) no-repeat center;
          background-size: 35%;
          background-color: hsl(from var(--clr-accent) h s l / 0.7);
          opacity: 0.4;
        }
      }

      > .card-content {
        padding-inline: var(--_gap);

        > .tags {
          padding-block-start: var(--spacing-base);
          block-size: 3.8rem;
        }
      }

      > footer {
        align-self: end;
        display: flex;
        gap: var(--spacing-base);
        align-items: center;
        padding: var(--_gap) var(--spacing-base);

        > img {
          block-size: 2rem;
          background-color: var(--clr-neutral-300);
          border-radius: var(--radius-900);
          aspect-ratio: 1;
        }
      }
    }
  }
}

/* .page-footer */
.page-footer {
  a {
    color: var(--clr-primary-light-1);
  }

  > .content {
    > address {
      font-weight: var(--fw-700);

      > .link-contact {
        display: flex;
        align-items: center;
        gap: var(--spacing-base-sm);
        margin-block: var(--spacing-base-sm);

        &:is([href^='mail'])::before {
          content: url(./assets/images/icon-email.svg);
        }

        &:is([href^='tel'])::before {
          content: url(./assets/images/icon-phone.svg);
        }

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  [role='list'] > .item > .link-nav {
    display: block;
    padding-block: var(--spacing-base-sm);
    padding-inline: initial;
    border-radius: initial;
    border-block-end: 0.12rem solid transparent;
    text-transform: initial;

    &:is(:hover, :focus-visible) {
      text-decoration: underline;
    }
  }

  @media (width > 800px) {
    > .content {
      inline-size: clamp(30ch, 60vw + 0.1rem, 80ch);
      grid-row: 1 / 1;
    }

    > .nav-footer {
      grid-row: 1 / span 3;
      grid-column: 4/5;
      margin-block-start: 0;

      > [role='list'] {
        &.flow > * + * {
          margin-block-start: 0.75rem;
        }
      }
    }
  }

  @media (width > 1024px) {
    > .nav-footer {
      justify-self: end;
    }
  }
}

/*** exceptions ***/
/* mobile navigation */
@media (width <= 1024px) {
  .page-header > .hamburger {
    display: block;

    grid-row: 1/1;
    justify-self: end;
    align-self: center;

    block-size: 3rem;
    aspect-ratio: 1;
    overflow-x: hidden;
    cursor: pointer;
    color: var(--clr-neutral-400);

    > .icon-menu {
      margin-inline: auto;
      > line {
        transition: transform 250ms ease-in-out;
      }
    }
  }

  .page-header > .nav-main {
    --_top-offset: 3.6rem; /*58px*/
    --_pos: 0.6rem; /*10px*/

    grid-column: auto;
    grid-row: auto;
    block-size: calc(100vh - var(--_top-offset));
    inline-size: 100vw;
    padding-block-start: var(--flow-space);

    position: absolute;
    inset-block-start: var(--_top-offset);
    inset-inline-start: var(--_pos);

    transform: rotateX(-90deg) translateX(calc(var(--_pos) * -1)); /* rotateX to collapse */
    transform-origin: top center;
    transition: 300ms all ease-out;

    background-color: var(--clr-primary-light-1);
    opacity: 0;

    > .list {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;

      > .item {
        inline-size: 100%;
      }
    }
  }

  .page-header > .hamburger {
    &:is(:focus-within) {
      outline: 0.12rem dashed var(--clr-accent);
      outline-offset: 0.18rem;
    }

    &:has(.nav-box:checked) {
      > .icon-menu > line {
        &:nth-of-type(1) {
          transform: rotate(45deg) translate(0.3rem, -0.35rem);
        }

        &:nth-of-type(2) {
          transform: translateX(2rem);
        }

        &:nth-of-type(3) {
          border: 1px solid sandybrown;
          transform: rotate(-45deg) translate(-0.8rem, -0.1rem);
        }
      }

      + .nav-main {
        opacity: 1;
        transform: rotateX(0) translateX(-0.63rem);
        visibility: visible;
      }
    }
  }
}

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