/* ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰
   COMPONENTS: Main UI Elements
   ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰ */
@layer components {

  /* 
     Main Container (The Orange Box)
  */
  main {
    width: clamp(0px, 100%, 1000px);
    background-color: var(--color-farm-orange);
    border-radius: 5px;
    margin: 20% auto 0 auto;
    border: solid 2px var(--color-farm-orange-border);
    filter: drop-shadow(0px 0px 20px oklch(0% 0 0 / 0.25));

    /* Legacy image handling within main */
    >a {
      all: unset !important;

      img {
        all: unset;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        width: min(72%, 520px);
        height: auto;
        margin-top: -16%;
        margin-bottom: 3%;
        border: none;
        filter: drop-shadow(0px 0px 20px oklch(0% 0 0 / 0.25));
      }
    }
  }

  .imageWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 
     Shared Section Styles (The Cards)
  */
  [aria-label="The Farm"],
  [aria-label="Shipping"],
  [aria-label="Introduction"],
  [aria-label="About the Fruit"],
  [aria-label="Where we're at"],
  [aria-label="Nutrition Information"],
  [aria-label="Our Retailers"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin: 0.5rem;
    border-radius: 4px;

    /* Specific overrides from legacy */
    &[aria-label="Our Retailers"],
    &[aria-label="Nutrition Information"] {
      border: 1px solid var(--color-farm-brown);
      padding: 20px;
      margin: 1rem;
    }

    /* Images inside sections */
    img {
      border-radius: 8px;
      border: solid 2px var(--color-farm-brown);
      margin-top: 2%;
      margin: 2% auto;
    }

    /* Specific Image Sizes */
    &[aria-label="Introduction"] img,
    &[aria-label="The Farm"] img {
      width: 80%;
    }

    &[aria-label="Shipping"] img {
      width: 50%;
    }
  }

  /* 
     Section Typography Overrides 
  */
  section h2 a {
    font-size: clamp(2rem, 16vw - 8vh, 2.5rem);
  }

  [aria-label="About the Fruit"]>h3,
  [aria-label="Where we're at"]>h3,
  [aria-label="About the Fruit"]>h3 {
    font-family: var(--font-heading);
    text-align: center;
    margin: 0.3rem 0;
    font-size: 1.4rem;
  }

  [aria-label="Nutrition Information"]>h3 {
    font-size: calc(1.5rem + 1vw);
    font-family: var(--font-heading);
    text-align: center;
    margin: 0.3rem 0;
  }

  [aria-label="Our Retailers"] h2 {
    font-family: var(--font-heading);
    font-size: var(--step-3);
    text-align: center;
    margin: 1rem 0;
  }

  figure {
    width: max(50%, 218px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* 
     Links & Buttons
  */
  .linkWrapper {
    width: 60%;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 0.8rem;
  }

  /* Custom Link Style */
  :not(li)>a {
    text-align: center;
    display: block;
    background-color: oklch(from var(--color-farm-bg) l c h / 0.8);
    /* 157, 149, 82 converted approx */
    background-color: oklch(60% 0.1 100 / 0.8);

    padding: 0.25rem 1rem;
    font-size: clamp(1.4rem, 16vw - 8vh, 2rem);
    border-radius: 10px;
    border: solid 0.2rem oklch(50% 0.1 100);
    color: var(--color-farm-beige);
    font-family: var(--font-mono);

    /* Arrow Icon */
    &>span::after {
      position: absolute;
      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up-right" width="33" height="33" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 7l-10 10" /><path d="M8 7l9 0l0 9" /></svg>');
    }

    span {
      padding-right: 20px;
    }
  }

  /* Store List Links */
  .store-list {
    width: 100%;
    max-width: 600px;
    padding: 0;

    li {
      list-style: none;
      margin: 1.5rem 0;
      padding: 1rem;
      background-color: oklch(from var(--color-farm-beige) l c h / 0.3);
      border-radius: 4px;
    }

    a {
      font-family: var(--font-mono);
      color: var(--color-farm-text);
      text-decoration: none;
      font-size: var(--step-1);
      display: block;
      background-color: transparent;
      border: none;
      padding: 0;

      &:hover {
        text-decoration: underline;
      }

      &::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%234f5c2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
        margin-left: 0.5rem;
        vertical-align: middle;
      }
    }

    small {
      width: 100%;
      text-align: center;
      background-color: oklch(60% 0.1 100 / 0.8);
      border-radius: 10px;
      border: solid 0.2rem oklch(50% 0.1 100);
      color: var(--color-farm-beige);
      font-family: var(--font-mono);
      font-size: var(--step-0);
      display: block;
    }
  }

  /* 
     Email Form
  */
  #emailSubmit {
    display: flex;
    flex-direction: column;
    padding-bottom: 10%;
    margin: 0.5em 1em;
    position: relative;

    &>* {
      padding: 0.25em 1em;
      font-size: clamp(1.4rem, 16vw - 8vh, 2rem);
      border-radius: 10px;
      border: solid 2px var(--color-farm-brown-deep);
      font-family: var(--font-mono);
    }
  }

  #submit {
    position: absolute;
    margin: 0;
    right: 1%;
    top: 0.25em;
    color: var(--color-farm-brown-deep);
    background-color: var(--color-farm-beige);
    border: none;
    font-size: clamp(1rem, 16vw - 10.5vh, 1.6rem);
    border: solid 2px var(--color-farm-brown-deep);
    filter: drop-shadow(0 0 0.5rem var(--color-farm-brown-deep));
  }

  /* 
     Slider Component
  */
  .slider-container {
    border: solid 2px var(--color-farm-brown);
    border-radius: 4px;
    width: max(50%, calc(140% - 45vw));
    height: 35vh;
    margin: 0 auto;
    overflow: hidden;
  }

  .slider {
    display: flex;
    width: 300%;
    height: 100%;
    animation: slide 12s infinite;

    img {
      margin: 0;
      width: 33.333%;
      height: 100%;
      object-fit: cover;
      display: block;
      border: none;
      /* override default section img border */
    }
  }

  @keyframes slide {
    0% {
      transform: translateX(0);
    }

    30% {
      transform: translateX(0);
    }

    35% {
      transform: translateX(-33.33%);
    }

    65% {
      transform: translateX(-33.33%);
    }

    70% {
      transform: translateX(-66.66%);
    }

    100% {
      transform: translateX(-66.66%);
    }
  }

  /* 
     Navigation Wheel (Complex)
  */
  nav button {
    border: none;
    background: radial-gradient(circle, var(--color-farm-grad-1), var(--color-farm-grad-2));
    z-index: 170;
    margin: 0 auto;
    width: calc(32vmin - 7vw);
    height: calc(32vmin - 7vw);
    position: fixed;
    border-radius: 50%;
    bottom: 5vmin;
    left: 0;
    right: 0;
    text-align: center;
    display: grid;
    place-items: center;
    box-shadow: 0 0 19px 1px #aeabab;

    &>strong {
      filter: drop-shadow(0 0 0.5rem #fff);
      position: absolute;
      font-size: 5vmin;
      font-family: var(--font-heading);
      font-weight: 900;
      color: var(--color-farm-text);
      bottom: -1.1em;
    }
  }

  .navCircle {
    height: 2.5vmin;
    width: 2.5vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
  }

  .seeds {
    width: fit-content;
    position: relative;
    top: -68%;
    transform: translate(0, -65%);
  }

  .seed {
    transition: transform 1s ease-in-out;
  }

  /* Generated Seeds */
  .seed1 {
    height: 0.85vmin;
    width: 7vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    position: absolute;
    transform: translate(30%) rotate(calc(90deg + 45deg * 0));
    transform-origin: -30%;
  }

  .seed2 {
    height: 0.85vmin;
    width: 7vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    position: absolute;
    transform: translate(30%) rotate(calc(90deg + 45deg * 1));
    transform-origin: -30%;
  }

  .seed3 {
    height: 0.85vmin;
    width: 7vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    position: absolute;
    transform: translate(30%) rotate(calc(90deg + 45deg * 2));
    transform-origin: -30%;
  }

  .seed4 {
    height: 0.85vmin;
    width: 7vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    position: absolute;
    transform: translate(30%) rotate(calc(90deg + 45deg * 3));
    transform-origin: -30%;
  }

  .seed5 {
    height: 0.85vmin;
    width: 7vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    position: absolute;
    transform: translate(30%) rotate(calc(90deg + 45deg * 4));
    transform-origin: -30%;
  }

  .seed6 {
    height: 0.85vmin;
    width: 7vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    position: absolute;
    transform: translate(30%) rotate(calc(90deg + 45deg * 5));
    transform-origin: -30%;
  }

  .seed7 {
    height: 0.85vmin;
    width: 7vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    position: absolute;
    transform: translate(30%) rotate(calc(90deg + 45deg * 6));
    transform-origin: -30%;
  }

  .seed8 {
    height: 0.85vmin;
    width: 7vmin;
    background-color: var(--color-farm-beige);
    border-radius: 50%;
    position: absolute;
    transform: translate(30%) rotate(calc(90deg + 45deg * 7));
    transform-origin: -30%;
  }

  /* Quarter Circles (Nav/Shopping) */
  .quarter-circle-container {
    position: relative;
    width: 50vw;
    height: 50vw;
  }

  .quarter-circle {
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
    background-color: var(--color-farm-blue);
  }

  .circle-text {
    font-size: 1.5vw;
    padding: 10%;
    line-height: 1.4;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    shape-outside: polygon(0% 100%, 100% 100%, 100% 0%);
    shape-margin: 5%;
    float: left;
    color: white;
  }

  .navigation {
    box-shadow: 0 0 19px 1px #aeabab;
    background: radial-gradient(circle, var(--color-farm-grad-1), var(--color-farm-grad-2));
    position: absolute;
    top: 0;
    right: 0;
    width: 15vw;
    height: 15vw;
    border-bottom-left-radius: 15vw;
    background-color: var(--color-farm-blue);

    img {
      border: none;
      position: relative;
      width: 80%;
      top: 0;
      right: 0;
    }
  }

  .shopping {
    display: block;
    box-shadow: 0 0 130px 1px #fff;
    background: radial-gradient(circle, var(--color-farm-grad-1), var(--color-farm-grad-2));
    position: absolute;
    top: 0;
    left: 0;
    width: 15vw;
    height: 15vw;
    border-bottom-right-radius: 15vw;
    background-color: var(--color-farm-blue);

    img {
      border: none;
      position: relative;
      width: 80%;
      top: 0;
      left: 0;
    }
  }

  /* Nav Menu Transitions */
  nav>ul {
    z-index: 1000;
    display: none;
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  nav>ul>li {
    transition: transform 1s ease-in-out;
    opacity: 0;
    margin: 0 1vmin;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: var(--step-4);
    color: var(--color-farm-text);
    text-align: center;
    margin-bottom: 2%;
  }

  nav>ul .visible {
    display: inherit;
  }

  .visible {
    transition: transform 1s ease-in-out;
    display: inherit;
    opacity: 1;
  }

  /* 
     Footer
  */
  footer {
    box-sizing: border-box;
    background-color: var(--color-farm-beige);
    margin: 5% auto 10% auto;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    border: solid 2px var(--color-farm-brown-deep);
    justify-content: space-between;
    filter: drop-shadow(0px 0px 20px oklch(0% 0 0 / 0.25));

    .messenger,
    .email {
      color: var(--color-farm-text) !important;
    }


    &:first-child {
      margin-bottom: 10px;
      border-radius: 10px;
      border: solid 1px #b8a99f;
    }

    /* Links in footer need reset from the main specific styled links */
    :not(li)>a {
      all: unset;
    }

    &>a {
      all: unset !important;
      width: max(80vmin, 50%) !important;
    }

    img {
      width: 100%;
      border-radius: 4px;
      display: block;
      margin: auto 0;
    }

    strong {
      font-size: 0.9rem;
      font-family: var(--font-heading);
      text-align: center;
      margin: 0.5rem auto;
    }

    &>div {
      margin: 0 1% 1% 0;
    }


    li {
      list-style: none;
      margin: 0.55rem 1.6rem;
      color: var(--color-farm-text);
      font-size: calc(1rem + 1vw);
    }
  }

  iframe {
    border-radius: 10px;
  }

  /* Footer Icons */
  footer .facebook::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%237f5345" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>');
    position: absolute;
    transform: translate(-100%);
  }

  footer .instagram::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%237f5345" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" /><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M16.5 7.5l0 .01" /></svg>');
    position: absolute;
    transform: translate(-100%);
  }

  footer .email::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%237f5345" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>');
    position: absolute;
    transform: translate(-100%);
  }

  footer .call::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-phone-call" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%237f5345" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /><path d="M15 7a2 2 0 0 1 2 2" /><path d="M15 3a6 6 0 0 1 6 6" /></svg>');
    position: absolute;
    transform: translate(-100%);
  }

  footer .text::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-mobile-message" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%237f5345" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 3h10v8h-3l-4 2v-2h-3z" /><path d="M15 16v4a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1h2" /><path d="M10 18v.01" /></svg>');
    position: absolute;
    transform: translate(-100%);
  }

  footer .messenger::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-meta" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="%237f5345" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 10.174c1.766 -2.784 3.315 -4.174 4.648 -4.174c2 0 3.263 2.213 4 5.217c.704 2.869 .5 6.783 -2 6.783c-1.114 0 -2.648 -1.565 -4.148 -3.652a27.627 27.627 0 0 1 -2.5 -4.174z" /><path d="M12 10.174c-1.766 -2.784 -3.315 -4.174 -4.648 -4.174c-2 0 -3.263 2.213 -4 5.217c-.704 2.869 -.5 6.783 2 6.783c1.114 0 2.648 -1.565 4.148 -3.652c1 -1.391 1.833 -2.783 2.5 -4.174z" /></svg>');
    position: absolute;
    transform: translate(-100%);
  }
}