@layer variables, reset, styles;

@layer variables {
  :root {
    --color-pink: oklch(0.6685 0.1657 2.93);
    --color-blue: oklch(0.5894 0.104362 215.456);
    --color-green: oklch(0.7126 0.1898 151.44);
    --color-yellow: oklch(0.7929 0.162 88.43);
    --color-orange: oklch(0.6732 0.1449 46.18);
    --color-white: oklch(0.9343 0.0171 76.11);
    --color-whitest: oklch(0.98 0.0171 76.11);
    --color-disabled: oklch(0.7658 0.0156 129.13);
    --color-gray: oklch(0.4658 0.0156 129.13);
    --color-black: oklch(0.2658 0.0156 129.13);

    --color-pink-dark: oklch(from var(--color-pink) calc(l - 0.1) c h);
    --color-blue-dark: oklch(from var(--color-blue) calc(l - 0.1) c h);
    --color-green-dark: oklch(from var(--color-green) calc(l - 0.1) c h);
    --color-yellow-dark: oklch(from var(--color-yellow) calc(l - 0.1) c h);
    --color-orange-dark: oklch(from var(--color-orange) calc(l - 0.1) c h);
    --color-white-dark: oklch(from var(--color-white) calc(l - 0.1) c h);
    --color-black-dark: oklch(from var(--color-black) calc(l - 0.1) c h);

    --color-pink-darkest: oklch(from var(--color-pink) calc(l - 0.3) c h);
    --color-blue-darkest: oklch(from var(--color-blue) calc(l - 0.3) c h);
    --color-green-darkest: oklch(from var(--color-green) calc(l - 0.3) c h);
    --color-yellow-darkest: oklch(from var(--color-yellow) calc(l - 0.3) c h);
    --color-orange-darkest: oklch(from var(--color-orange) calc(l - 0.3) c h);
    --color-white-darkest: oklch(from var(--color-white) calc(l - 0.3) c h);
    --color-black-darkest: oklch(from var(--color-black) calc(l - 0.25) c h);

    --font-header: SlowDownGirls, Jost;
    --font-body: Jost;

    --size-2xl: clamp(2.3328rem, 1.6726rem + 2.9343vw, 3.9467rem);
    --size-xl: clamp(1.944rem, 1.5281rem + 1.8486vw, 2.9607rem);
    --size-lg: clamp(1.62rem, 1.3741rem + 1.0929vw, 2.2211rem);
    --size-md: clamp(1.35rem, 1.2206rem + 0.575vw, 1.6663rem);
    --size-sm: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --size-xs: clamp(0.9375rem, 0.9374rem + 0.0004vw, 0.9377rem);
    --size-2xs: clamp(0.7035rem, 0.8131rem + -0.1414vw, 0.7813rem);


    --shadow-color: 85deg 3% 28%;
    --shadow:
      0px 1px 1px hsl(var(--shadow-color) / 0.4),
      0px 3.7px 3.6px -1.7px hsl(var(--shadow-color) / 0.32),
      0px 16px 15.6px -3.5px hsl(var(--shadow-color) / 0.25);
  }
}

@layer styles {
  body {
    background-color: var(--color-white);
    background-image: url("/assets/img/fabric.webp");
    container-type: inline-size;
    container-name: body;
    margin: 0;
    min-block-size: 100%;
  }

  select {
    appearance: none;
    outline: none;
    color: inherit;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0;
    padding-inline-end: 1rem;
    inline-size: 100%;
    z-index: 1;
    cursor: pointer;
    grid-area: select;
  }

  input[type="checkbox"] {
    margin: 0;
    background-color: #fff;
    border-radius: 0.25rem;
    color: var(--color-black);
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 2px solid var(--color-black);
    border-radius: 0.25rem;
    display: grid;
    place-content: center;

    &::before {
      content: "";
      inline-size: 0.95rem;
      block-size: 0.95rem;
      transform: scale(0);
      transition: transform .05s cubic-bezier(.2, 0, .6, 1);
      box-shadow: inset 1rem 1rem var(--color-pink);
      border-radius: 0.15rem;
    }

    &:checked::before {
      transform: scale(1);
    }
  }

  dl {
    font-size: var(--size-sm);
    display: grid;
    grid-template-columns: min-content max-content;
    column-gap: 1rem;
  }

  dt {
    font-weight: 600;
    grid-column: 1;
    justify-self: end;
  }

  dd {
    grid-column: 2;
    margin: 0;
  }

  .btn-dbl {
    gap: 1.5rem !important;

    & a.btn {
      flex-grow: 1;
    }
  }

  .btn {
    --btn-color: var(--color-green);
    --btn-hover-color: var(--color-green-dark);
    --btn-text-color: var(--color-black);
    --override-space: 0;
    display: inline-flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    padding-block: 0.6rem;
    padding-inline: 1.2rem;
    border-radius: 1rem;
    border: none;
    background: var(--btn-color);
    color: var(--btn-text-color);
    font-size: var(--size-md);
    font-family: Hula;
    outline-offset: .1em;
    outline: solid 2px var(--color-black);
    transition:
      background-color .25s cubic-bezier(.2, 0, .6, 1),
      outline-offset .2s cubic-bezier(.2, -1, .6, 2),
      scale .2s cubic-bezier(.2, -1, .6, 2),
      rotate .2s cubic-bezier(.2, -1, .6, 2);
  }

  .btn:is(.btn-disabled, :disabled) {
    --btn-color: var(--color-disabled);
    outline-color: var(--color-gray);
    pointer-events: none;
    opacity: 0.7;
  }

  .btn>span {
    display: block;
    text-box: trim-both cap alphabetic;
    padding-block-end: 3px;
  }

  .btn:is(:hover, :focus-visible) {
    background: var(--btn-hover-color);
    outline-offset: .12em;
    rotate: 0.5deg;
    scale: 104%;
  }

  .btn-venmo {
    --btn-color: var(--color-blue);
    --btn-hover-color: var(--color-blue-dark);
    --btn-text-color: #fff;
  }

  .btn-cashapp {
    --btn-color: var(--color-black);
    --btn-hover-color: var(--color-black-darkest);
    --btn-text-color: #fff;
  }


  :is(.notes, .options, #shipping, #continue) {
    padding-block-start: 1rem;
    padding-block-end: 1rem;
    padding-inline: 1.5rem;
    border-radius: 0.75rem;
    --override-space: 0.5rem;

    & dl * {
      --override-space: 0;
    }

    & h3 {
      padding-block-end: 0.5rem;
      border-block-end: solid 2px;
    }
  }

  .notes {
    background-color: oklch(from var(--color-blue) l c h / 0.3);
    color: var(--color-blue-darkest);
  }

  .options {
    background-color: oklch(from var(--color-orange) l c h / 0.3);
    color: var(--color-orange-darkest);
  }

  div:is(#shipping, #continue) {
    margin-block-start: auto !important;
    background-color: var(--color-whitest);
    border: none;
    box-shadow: var(--shadow);
    inline-size: min(25rem, 100dvi - 3rem);

    & header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: start;
      padding: 0;
      padding-block-end: 0.5rem;
      border-block-end: solid 2px;
      --override-space: 0;

      h3 {
        border: none;
        padding: 0;
      }

      button {
        border: none;
        background-color: transparent;
        cursor: pointer;
        border-radius: 9999px;
        text-box: trim-both cap alphabetic;
        padding: 0.5rem;
        outline: none;
        color: var(--color-black);

        &:is(:hover, :focus-visible) {
          background: var(--color-white-dark);
        }
      }
    }

    &::backdrop {
      background-color: oklch(from var(--color-black) l c h / 0.7);
    }

    & a.btn {
      font-size: var(--size-md) !important;
      padding-block: 0.75rem !important;
      margin-block-start: 1rem !important;
      margin-block-end: 0.5rem !important;
    }
  }

  svg#gift {
    max-inline-size: 10rem;
  }

  path#gift-box {
    fill: var(--color-pink);
  }

  path#gift-bow {
    fill: var(--color-blue);
  }

  #registry {
    display: flex;
    flex-direction: column;
    max-inline-size: 87.5rem;
    margin-inline: auto;

    & h1 {
      font-size: var(--size-2xl);
      font-family: Hula;
      margin-block-start: 0;
    }

    & h2 {
      font-size: var(--size-sm);
    }

    & p {
      font-size: var(--size-sm);
    }

    & header {
      text-align: center;
      padding: 2rem;
      --override-space: 0;

      &>a {
        display: inline-flex;
        align-items: baseline;
        justify-content: center;
        outline: none;
        gap: var(--size-xs);
        transition:
          text-decoration-color .25s cubic-bezier(.2, 0, .6, 1),
          scale .2s cubic-bezier(.2, -1, .6, 2),
          rotate .2s cubic-bezier(.2, -1, .6, 2);

        &>svg {
          transform: scaleX(-1);
          inline-size: auto;
          block-size: var(--size-lg);
        }

        &:is(:hover, :focus-visible) {
          text-decoration-color: var(--color-pink);
          rotate: 0.2deg;
          scale: 104%;
        }
      }
    }

    & footer p {
      text-align: center;
      text-wrap: balance;
      margin-block: 2rem;
      margin-inline: 1rem;
      font-family: Hula;
      font-size: var(--size-md);
      color: var(--color-black);
    }

    & footer svg {
      color: var(--color-pink);
    }

    & main {
      background-color: var(--color-whitest);
      border: solid 1px var(--color-yellow);
      border-radius: 1rem;
      padding: 1rem;

      & #filters {
        font-size: var(--size-sm);
        display: flex;
        align-items: center;
        margin: 0;
        padding-inline: 1rem;
        padding-block: 0.5rem;
        gap: 1rem;
        --override-space: 0;

        & div:has(input[type="checkbox"]) {
          display: grid;
          align-items: center;
          gap: 0.5rem;
        }

        & div:has(select) {
          display: grid;
          grid-template-areas: "select";
          align-items: center;
          cursor: pointer;

          color: var(--color-black);
          background-color: #fff;
          background-image: linear-gradient(to top, var(--color-whitest), #fff 20%);
          border: solid 1px var(--color-white-darkest);
          border-radius: 0.5rem;
          margin: 0;
          padding-block: 0.25rem;
          padding-inline: 0.75rem;
          font-size: var(--size-sm);
          min-inline-size: 18ch;
          max-inline-size: 30ch;

          &:focus-within {
            outline: solid 2px var(--color-blue);
          }

          &::after {
            grid-area: select;
            justify-self: end;
            content: "";
            inline-size: 1rem;
            block-size: 0.6rem;
            background-color: var(--color-black);
            clip-path: polygon(100% 0%, 0 0%, 50% 100%);
          }
        }
      }

      & *+* {
        margin-block-start: var(--override-space, 1rem);
      }
    }

    & #items {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
      gap: 1rem;
      padding: 1rem;
      --override-space: 0;

      & article {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem;
        border-radius: 1rem;
        background-color: #fff;
        border: solid 1px var(--color-yellow);
        block-size: 100%;

        & img {
          border-radius: 0.6rem;
          aspect-ratio: 1;
          inline-size: 100%;
          block-size: auto;
          border: solid 1px var(--color-white);
        }

        & h2 {
          text-wrap: pretty;
          font-family: Jost;
          font-size: calc(var(--size-sm) * 1.1);
          white-space: nowrap;
          overflow-block: visible;
          overflow-inline: clip;
          text-overflow: ellipsis;
        }

        & p {
          flex-grow: 1;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          line-height: 1.4;
        }

        & div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-inline-start: 0.5rem;
          padding-inline-end: 1rem;
          padding-block-end: 0.5rem;
          gap: 1rem;
        }
      }
    }

    & .price {
      font-family: Hula;
      font-size: var(--size-lg);
    }
  }

  #registry:has(#registry-item) {
    max-inline-size: 60rem;
  }

  main#registry-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    padding: 2rem;
    column-gap: 2rem;
    row-gap: 1rem;
    background-color: #fff;
    --override-space: 0;

    & h2 {
      text-wrap: balance;
      font-family: Jost;
      font-size: var(--size-lg);
      grid-row: 1;
      grid-column: 2;
    }

    & h3 {
      font-family: Jost;
      font-size: var(--size-md);
      font-weight: 500;
    }

    & img {
      grid-row: 1 / -1;
      grid-column: 1;
      border-radius: 0.6rem;
      aspect-ratio: 1;
      inline-size: 100%;
      block-size: auto;
      border: solid 1px var(--color-white);
    }

    >div {
      grid-row: 2;
      grid-column: 2;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    & .price-and-shipping {
      display: flex;
      align-items: center;
      justify-content: space-between;

      & button {
        border-radius: 9999px;
        font-size: var(--size-sm);
        font-weight: 450;
        border: none;
        outline: solid 2px var(--color-white-darkest);
        outline-offset: 0.1em;
        background: var(--color-white);
        cursor: pointer;
        color: var(--color-black);
        padding: 0.5rem 1rem;
        transition:
          background-color .25s cubic-bezier(.2, 0, .6, 1),
          outline-offset .2s cubic-bezier(.2, -1, .6, 2),
          scale .2s cubic-bezier(.2, -1, .6, 2),
          rotate .2s cubic-bezier(.2, -1, .6, 2);

        &:is(:hover, :focus-visible) {
          background-color: var(--color-white-dark);
          outline-offset: 0.12em;
          rotate: 0.2deg;
          scale: 104%;
        }
      }
    }

    #registry-item-thanks {
      grid-row: 1 / -1;
      text-align: center;
      align-items: center;
      justify-content: center;
      gap: 2rem;
    }

    #registry-item-content>form {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      & div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      & input {
        padding-inline: 0.75rem;
        padding-block: 0.5rem;
        line-height: 1.2;
        border-radius: 0.5rem;
        border: solid 2px var(--border-color, var(--color-black));

        &:focus {
          --border-color: var(--color-blue);
          border: solid 2px var(--border-color);
          outline: none;
          box-shadow: 0 0 0 3px oklch(from var(--border-color) l c h / 0.25);
        }

        &:user-valid {
          --border-color: var(--color-green);
        }

        &:user-invalid {
          --border-color: var(--color-pink);
        }
      }

      &.validated {
        & input:valid {
          --border-color: var(--color-green);
          border: solid 2px var(--border-color);
        }

        & input:invalid {
          --border-color: var(--color-pink);
          border: solid 2px var(--border-color);
        }
      }

      & label>span {
        color: var(--color-pink);
      }

      & .btn {
        margin-block-start: 1.25rem;
      }
    }

    & a {
      text-align: center;
      margin-block-start: 1rem;
      text-decoration: underline;
      cursor: pointer;
    }

    & .btn {
      display: flex;
      font-size: var(--size-lg);
      padding-block: 1rem;
      margin-block-start: 0.25rem;
    }
  }

  @container body (inline-size < 87.5rem) {
    #registry main:not(#registry-item) {
      border-radius: 0;
      padding: 0;

      & #filters {
        padding-inline: 1rem;
        padding-block-start: 1.5rem;
      }
    }
  }

  @container body (inline-size < 60rem) {
    #registry main {
      border-radius: 0;
    }
  }

  @container body (inline-size < 50rem) {
    #registry main#registry-item {
      grid-template-columns: 1fr;
      grid-template-rows: min-content min-content 1fr;
    }

    #registry main#registry-item img {
      grid-column: 1;
      grid-row: 1;
    }

    #registry main#registry-item h2 {
      grid-column: 1;
      grid-row: 2;
    }

    #registry main#registry-item>div {
      grid-column: 1;
      grid-row: 3 !important;
    }
  }

  @container body (inline-size < 32rem) {
    #filters {
      flex-direction: column;
    }

    #registry main #filters :is(div:has(select), select) {
      inline-size: 100%;
      max-inline-size: 100%;
    }
  }

  @container body (inline-size < 22.5rem) {
    #registry main:not(#registry-item) {
      border: none;
      background-color: transparent;
    }

    #registry #items {
      padding: 0;
    }

    #registry #items article {
      border-radius: 0;
    }
  }
}

@layer reset {

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

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    min-block-size: 100%;
    display: flex;
    flex-direction: column;
  }

  body {
    flex-grow: 1;
  }

  html,
  body {
    font-family: var(--font-body);
    color: var(--color-black);
  }

  /* Don't change the size of my rem */
  header,
  main,
  footer {
    font-size: var(--size-md);
    font-weight: 350;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0;

    &:first-child {
      margin-block-start: 0;
    }
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  body {
    line-height: 1.5;
  }

  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

  input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    font-family: var(--font-header);
    font-weight: 400;
  }

  h1 {
    font-size: var(--size-2xl);
  }

  h2 {
    font-size: var(--size-xl);
  }

  h3 {
    font-size: var(--size-lg);
  }

  h4 {
    font-size: var(--size-md);
  }

  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  textarea:not([rows]) {
    min-block-size: 10em;
  }

  :target {
    scroll-margin-block: 5ex;
  }
}