/*
Theme Name: Pawfessor
Author: Webits
Description: Custom theme for Pawessor
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pawfessor
*/

@import url("/app/themes/pawfessor/assets/css/reset.css");

/* ANCHOR THEME */
@layer theme {
  /* ANCHOR Colors */
  :root {
    --color-orange-10: hsla(43, 74%, 89%, 1);
    --color-orange-20: hsla(43, 74%, 83%, 1);
    --color-orange-30: hsla(43, 74%, 77%, 1);
    --color-orange-40: hsla(43, 74%, 70%, 1);
    --color-orange-50: hsla(43, 74%, 61%, 1);
    --color-orange-60: hsla(43, 74%, 50%, 1);
    --color-orange-70: hsla(43, 74%, 43%, 1);
    --color-orange-80: hsla(43, 74%, 34%, 1);
    --color-orange-90: hsla(43, 74%, 17%, 1);
    --color-green-10: hsla(63, 75%, 84%, 1);
    --color-green-20: hsla(63, 75%, 77%, 1);
    --color-green-30: hsla(63, 75%, 66%, 1);
    --color-green-40: hsla(63, 75%, 51%, 1);
    --color-green-50: hsla(63, 75%, 41%, 1);
    --color-green-60: hsla(63, 75%, 34%, 1);
    --color-green-70: hsla(63, 75%, 21%, 1);
    --color-green-80: hsla(63, 75%, 12%, 1);
    --color-green-90: hsla(63, 75%, 3%, 1);
    -color-fuchsia-10: hsla(321, 74%, 78%, 1);
    --color-fuchsia-20: hsla(321, 74%, 72%, 1);
    --color-fuchsia-30: hsla(321, 74%, 67%, 1);
    --color-fuchsia-40: hsla(321, 74%, 62%, 1);
    --color-fuchsia-50: hsla(321, 74%, 55%, 1);
    --color-fuchsia-60: hsla(321, 74%, 48%, 1);
    --color-fuchsia-70: hsla(321, 74%, 41%, 1);
    --color-fuchsia-80: hsla(321, 74%, 30%, 1);
    --color-fuchsia-90: hsla(321, 74%, 18%, 1);
    --color-purple-10: hsla(264, 76%, 79%, 1);
    --color-purple-20: hsla(264, 76%, 71%, 1);
    --color-purple-30: hsla(264, 76%, 68%, 1);
    --color-purple-40: hsla(264, 76%, 63%, 1);
    --color-purple-50: hsla(264, 76%, 59%, 1);
    --color-purple-60: hsla(264, 76%, 54%, 1);
    --color-purple-70: hsla(264, 76%, 48%, 1);
    --color-purple-80: hsla(264, 76%, 36%, 1);
    --color-purple-90: hsla(264, 76%, 19%, 1);
    --color-brown-10: hsla(52, 29%, 86%, 1);
    --color-brown-20: hsla(52, 29%, 78%, 1);
    --color-brown-30: hsla(52, 29%, 73%, 1);
    --color-brown-40: hsla(52, 29%, 65%, 1);
    --color-brown-50: hsla(52, 29%, 55%, 1);
    --color-brown-60: hsla(52, 29%, 45%, 1);
    --color-brown-70: hsla(52, 29%, 37%, 1);
    --color-brown-80: hsla(52, 29%, 23%, 1);
    --color-brown-90: hsla(52, 29%, 15%, 1);
    --color-gray-10: hsla(270, 2%, 83%, 1);
    --color-gray-20: hsla(270, 2%, 75%, 1);
    --color-gray-30: hsla(270, 2%, 67%, 1);
    --color-gray-40: hsla(270, 2%, 60%, 1);
    --color-gray-50: hsla(270, 2%, 52%, 1);
    --color-gray-60: hsla(270, 2%, 44%, 1);
    --color-gray-70: hsla(270, 2%, 36%, 1);
    --color-gray-80: hsla(270, 2%, 25%, 1);
    --color-gray-90: hsla(270, 2%, 12%, 1);

    --color-white: hsla(0, 0%, 100%, 1);
    --color-black: hsla(0, 0%, 0%, 1);
  }

  :root {
    --theme-color-backdrop: var(--color-brown-10);
    --theme-color-primary: var(--color-green-40);
    --theme-color-accent: var(--color-fuchsia-40);
    --theme-color-text-dark: var(--color-brown-90);

    --theme-global-nav-text: var(--theme-color-text-dark);
    --theme-global-nav-deco: var(--color-white);
    --theme-header-logo-text: hsl(340, 5%, 13%);
    --theme-header-bg: var(--theme-color-primary);

    --theme-menu-open-global-nav-text: var(--theme-color-text-dark);
    --theme-menu-open-global-nav-deco: var(--color-white);
    --theme-menu-open-header-logo-text: hsl(340, 5%, 13%);
    --theme-menu-open-header-bg: var(--theme-color-primary);
  }

  /* ANCHOR Font sizes */

  /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  :root {
    --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
    --step-6: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem);
    --step-7: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem);
  }

  /* ANCHOR Font families */

  :root {
    --font-body: "Manrope", sans-serif;
    --font-heading: "Dela Gothic One", sans-serif;
    --font-hand: "Mynerve", sans-serif;
  }

  /* ANCHOR Spacing scale */

  /* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  :root {
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
  }

  /* ANCHOR Layout grid */

  :root {
    --global-minimum-content-padding: 2rem;
    --section-padding: var(--space-3xl);
  }

  /* https://layout-breakouts-builder.vercel.app/ */

  .page-layout > *,
  .full-width > * {
    grid-column: content;
  }
  .page-layout,
  .full-width {
    --minimum-content-padding: var(--global-minimum-content-padding);

    /** TRACK WIDTHS **/
    --full-max-width: 1fr;
    --popout-max-width: 1600px;
    --content-max-width: 1240px;
    --inset-content-max-width: 930px;

    /** TRACK SIZES **/
    --full: minmax(var(--minimum-content-padding), 1fr);
    --popout: minmax(
      0,
      calc((var(--popout-max-width) - var(--content-max-width)) * 0.5)
    );
    --content: minmax(
      0,
      calc((var(--content-max-width) - var(--inset-content-max-width)) * 0.5)
    );
    --inset-content: min(
      var(--inset-content-max-width),
      100% - var(--minimum-content-padding) * 2
    );

    display: grid;
    grid-template-columns:
      [full-start]
      var(--full)
      [popout-start]
      var(--popout)
      [content-start]
      var(--content)
      [inset-content-start]
      var(--inset-content)
      [inset-content-end]
      var(--content)
      [content-end]
      var(--popout)
      [popout-end]
      var(--full)
      [full-end];
  }

  /** CLASSES **/
  .full {
    grid-column: full;
  }
  .full-start {
    grid-column-start: full-start;
  }
  .full-end {
    grid-column-end: full-end;
  }

  .popout {
    grid-column: popout;
  }
  .popout-start {
    grid-column-start: popout-start;
  }
  .popout-end {
    grid-column-end: popout-end;
  }

  .content {
    grid-column: content;
  }
  .content-start {
    grid-column-start: content-start;
  }
  .content-end {
    grid-column-end: content-end;
  }

  .inset-content {
    grid-column: inset-content;
  }
  .inset-content-start {
    grid-column-start: inset-content-start;
  }
  .inset-content-end {
    grid-column-end: inset-content-end;
  }

  .full-width {
    grid-column: full;
  }
  .full-content,
  .full-content-nopad {
    grid-column: full;
  }
  .full-content {
    padding-inline: var(--minimum-content-padding);
  }

  /* ANCHOR Html tags */

  body {
    font-family: var(--font-body);
    background-color: var(--theme-color-backdrop);
    color: var(--theme-color-text-dark);
    font-size: var(--step-0);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    font-weight: 400;
  }

  h1 {
    font-size: var(--step-5);
    letter-spacing: -0.04em;
    line-height: 0.95;
  }

  h2 {
    font-size: var(--step-4);
    letter-spacing: -0.04em;
    line-height: 1.1;
  }
}

/* ANCHOR COMPONENTS */

@layer components {
  @property --fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
  }

  :root {
    interpolate-size: allow-keywords;
  }

  .js-expandable {
    --fade: 25rem;
    mask-image: linear-gradient(
      to top,
      transparent 0,
      black min(20%, var(--fade))
    );
    overflow-y: clip;
    overflow-x: visible;
    max-block-size: var(--height, 25rem);
    transition: --fade 0.3s ease-in-out, max-block-size 0.3s ease-in-out;

    &.expanded {
      --fade: 0rem;
      max-block-size: fit-content;

      &+.js-expand-toggle {
        display: none;
      }
    }

    &.no-expand-needed {
      block-size: auto;
      mask-image: none;
      & + .js-expand-toggle {
        display: none;
      }
    }
  }

  .custom-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-2xs);

      label {
        font-weight: 600;
        font-size: var(--step-1);
        color: var(--theme-color-text-dark);
      }

      input,
      textarea,
      select {
        inline-size: 100%;
        border: 0.15rem solid var(--color-gray-80);
        border-radius: 0.25rem;
        padding: 0.5em;
        font-size: var(--step-1);
        color: var(--theme-color-text-dark);
        background-color: var(--color-white);
        transition: all 0.2s ease-out;
        filter: drop-shadow(-0.1em 0.2em 0 hsla(0, 0%, 0%, 0.05));

        &:focus {
          border-color: var(--color-gray-80);
          filter: drop-shadow(-0.1em 0.15em 0 hsla(0, 0%, 0%, 0.17))
            drop-shadow(0em 0em 0.02rem hsla(0, 0%, 0%, 1));
          outline: none;
        }
      }

      textarea {
        resize: vertical;
      }
    }

    button[type="submit"] {
      margin-block-start: var(--space-s);
    }
  }

  button,
  .btn {
    cursor: pointer;
    appearance: none;
    border-style: solid;
    border-width: 0.1rem;
    background-color: var(--theme-color-primary);
    border-color: var(--color-black);
    color: var(--theme-color-text-dark);
    font-weight: 600;
    font-size: var(--step--1);
    letter-spacing: -0.02em;
    filter: drop-shadow(-0.2em 0.2em 0 var(--color-black));
    padding: 1em 1em;
    transition: all 0.2s ease-out;
    text-decoration: none;
    display: inline-block;
    will-change: filter;

    &:active {
      translate: -0.1em 0.1em;
      filter: drop-shadow(-0.1em 0.1em 0 var(--color-black));
    }
  }

  #global-header {
    background-color: var(--theme-header-bg);
    padding-inline: var(--global-minimum-content-padding);
    padding-block: var(--space-xs);
    display: grid;
    grid-template-areas:
      "logo toggle"
      "nav nav";
    column-gap: var(--space-m);
    row-gap: var(--space-l);
    align-content: start;

    @media (width > 47.8125rem) {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  #header-logo-link {
    grid-area: logo;
    transition: all 0.2s ease-out;
    .letter {
      fill: var(--theme-header-logo-text);
    }
  }

  #mobile-menu-toggle {
    grid-area: toggle;
    align-self: center;
    width: fit-content;
    font-size: var(--step-1);
    padding-inline: 0.5em;
    padding-block: 0.4em;
    margin-inline-start: auto;
    rotate: 4deg;

    .icon {
      display: grid;

      & > * {
        grid-area: 1 / 1;
        transition: all 0.2s ease-out;
        width: 1em;
      }
    }

    @media (width > 47.8125rem) {
      display: none;
    }
  }

  #menu-close {
    rotate: 180deg;
    scale: 0;
  }

  #global-nav {
    display: none;
    text-align: center;
    text-transform: lowercase;
    font-family: var(--font-hand);
    font-size: var(--step-2);
    transition: opacity 0.1s ease-out, translate 0.25s ease-out;

    grid-area: nav;

    ul {
      font-size: var(--step-0);
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-l);

      @media (width > 47.8125rem) {
        flex-direction: row;
      }
    }

    a {
      color: var(--theme-global-nav-text);
      text-decoration: none;
      text-underline-offset: 0.6em;

      .current-menu-item & {
        text-decoration: underline;
        text-decoration-style: wavy;
        text-decoration-color: var(--theme-global-nav-deco);
      }
    }

    @media (width > 47.8125rem) {
      display: block;
      font-size: var(--step--1);
    }
  }

  @media (width <= 47.8125rem) {
    :is(body.menu-open) {
      #global-header {
        background-color: var(--theme-menu-open-header-bg);
        padding-block-end: var(--space-xl);
        min-height: 100vh;
      }

      #header-logo-link {
        .letter {
          fill: var(--theme-menu-open-header-logo-text);
        }
      }

      #global-nav {
        display: block;
        padding-block-start: 2rem;
        a {
          font-size: var(--step-2);
          color: var(--theme-menu-open-global-nav-text);
          text-decoration-color: var(--theme-menu-open-global-nav-deco);
        }

        @starting-style {
          opacity: 0;
          translate: 0 -3rem;
        }
      }

      #menu-open {
        rotate: 180deg;
        scale: 0;
      }

      #menu-close {
        scale: 1;
      }
    }
  }

  #hero {
    --shape-y: 50%;
    --figure-offset: var(--space-3xl);

    position: relative;
    margin-block-end: var(--figure-offset);

    & > * {
      grid-row: 1 / -1;
    }

    &::before {
      position: absolute;
      block-size: var(--shape-y);
      inset-inline: 0;
      z-index: -1;
      content: "";
      display: block;
      background-color: var(--theme-header-bg);
    }

    #shape-top {
      position: absolute;
      inset-inline: 0;
      inset-block-start: var(--shape-y);
      inline-size: 100%;
      block-size: calc(100% - var(--shape-y));
      z-index: -1;
      grid-column: full;

      path {
        fill: var(--theme-header-bg);
      }
    }

    #hero__content {
      container-type: inline-size;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--space-l);
      margin-block-end: calc(-1 * var(--space-2xl));

      @media (min-width: 53.75rem) {
        padding-block-end: var(--space-l);
        margin-block-end: 0;
      }
    }

    h1 {
      rotate: -3deg;
      text-shadow: -0.1em 0.1em 0px rgba(0, 0, 0, 0.1);

      @container (min-width: 26.25rem) {
        font-size: var(--step-7);
      }

      @container (min-width: 50rem) {
        width: 7ch;
      }
    }

    figure {
      pointer-events: none;
      flex: 1;
      text-align: center;
      img {
        height: auto;
      }
      svg {
        margin-inline: auto;
        max-width: min(30rem, 100%);
      }
      @container (min-width: 50rem) {
        svg {
          max-width: min(40cqi, 30rem);
          translate: -10% var(--figure-offset);
          scale: 1.3;
        }
      }
    }
  }

  .funky-text {
    font-size: var(--step-1);
    font-family: var(--font-hand);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--theme-color-primary);
    text-decoration-style: wavy;
    text-decoration-skip-ink: none;
  }

  .branded-image {
    border-image: url("/app/themes/pawfessor/assets/img/svgs/paws_frame.svg")
      20% / 20% / 1rem stretch;
    border-width: 2rem;
    border-style: solid;
  }

  #location {
    text-align: center;
    overflow-x: clip;
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 50%,
      var(--theme-color-primary) 50%,
      var(--theme-color-primary) 100%
    );

    h2 {
      grid-row: 1;
      margin-block-end: var(--space-l);
    }

    figure {
      grid-row: 2;
      display: grid;
      place-items: center;
      margin-block: var(--space-l);
      container-type: inline-size;

      img {
        aspect-ratio: 1;
        block-size: 100%;
        object-fit: cover;
        border-radius: 5cqi;
        border: 0.2rem solid var(--color-black);
        filter: drop-shadow(-0.4rem 0.4rem 0 hsla(0, 0%, 0%, 0.2));
        will-change: filter;
        inline-size: 100%;

        @media (width > 53.75rem) {
          aspect-ratio: 2.5;
        }
      }

      .arrow {
        --aspect-ratio: 139/237;
        --height: 18rem;
        height: min(60%, var(--height));
        width: calc(var(--height) * var(--aspect-ratio));
        z-index: 1;
        translate: 0 -50%;
      }

      .btn {
        translate: 0 50%;
        margin-block-start: 5%;
      }

      & > * {
        grid-area: 1 / 1;
      }
    }

    .grass-top {
      grid-row: 1 / span 2;
      grid-column: full;
      align-self: center;
      translate: 0 -25%;
      inline-size: max(60rem, 100%);
      max-width: none;
      z-index: -1;
    }
  }

  #global-footer {
    background-color: var(--theme-color-primary);
    overflow-x: clip;
    overflow-y: clip;
    font-family: var(--font-hand);

    a {
      color: var(--theme-color-text-dark);
      text-decoration: none;
      transition: all 0.2s ease-out;

      &:hover {
        text-decoration: underline;
        text-decoration-style: wavy;
        text-decoration-color: currentColor;
        text-decoration-thickness: 0.05em;
        text-underline-offset: 0.25em;
      }
    }

    address {
      font-style: normal;
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
    }

    #footer-logo {
      svg {
        margin-inline: auto;
      }
    }

    --bottom-height: 30rem;

    & > * {
      grid-row: 1;
    }

    .footer-content {
      font-size: var(--step-1);
      z-index: 2;
      padding-bottom: calc(var(--bottom-height) / 6);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: var(--space-l);
    }

    &::before,
    &::after {
      grid-row: 1;
      grid-column: full;
      content: "";
      display: block;
      height: var(--bottom-height);
      background-color: var(--color-gray-80);
      z-index: 1;
      align-self: end;
    }

    &::after {
      border-radius: 0 0 50% 50%;
      scale: 1.1;
      margin-inline: -10%;
      background-color: var(--theme-color-primary);
    }

    .footer-navigation {
      ul {
        list-style-type: none;
        justify-content: center;
        padding-inline: 0;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-s);

        a {
          display: block;
          background-color: var(--color-white);
          padding-inline: 1em;
          padding-block: 0.4em;
          border-radius: 1.5em;

          &:hover {
            text-decoration: none;
            filter: drop-shadow(-0.1em 0.1em 0 hsla(0, 0%, 0%, 0.25));
          }
        }
      }
    }

    .copyright {
      font-size: var(--step--1);
    }
  }
}

/* ANCHOR Utilities */
@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-s));
  }

  /* Pause animation when reduced-motion is set */
  @media (prefers-reduced-motion: reduce) {
    .animated {
      animation-play-state: paused !important;
    }
  }

  .round {
    border-radius: 50%;
    aspect-ratio: 1;

    img& {
      object-fit: cover;
    }
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}