/**
 * =============================================================================
 *
 * Base styles
 *
 * =============================================================================
 */
body {
  background: #f7f2f2;
}

/**
 * =============================================================================
 *
 * FAQ section
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.faq) to (.scope) {
    :scope {
      display: grid;
      justify-items: center;
      padding-bottom: calc(120 * var(--px-to-rem));
    }

    ._inner {
      display: grid;
      gap: calc(40 * var(--px-to-rem));
      inline-size: var(--content-width);
    }

    ._block {
      padding: calc(24 * var(--px-to-rem)) calc(80 * var(--px-to-rem)) calc(40 * var(--px-to-rem));
    }

    ._block-heading {
      color: var(--color-accent);
      font-size: var(--font-size-300);
      font-weight: var(--font-weight-medium);
      letter-spacing: 0;
      line-height: 1;
    }

    ._block-main {
      display: grid;
      gap: calc(14 * var(--px-to-rem));
      padding-top: calc(40 * var(--px-to-rem));
    }

    ._item {
      background: var(--color-white);
      pointer-events: none;
      transition: scale var(--duration-default) var(--ease-custom);
    }

    ._item:active {
      scale: 0.98;
    }

    ._question {
      --_icon-size: calc(20 * var(--px-to-rem));
      align-items: center;
      display: grid;
      font-size: var(--font-size-400);
      font-weight: var(--font-weight-medium);
      gap: calc(16 * var(--px-to-rem));
      grid-template-columns: auto 1fr var(--_icon-size);
      letter-spacing: 0;
      line-height: 1;
      padding: calc(20 * var(--px-to-rem)) calc(30 * var(--px-to-rem));
      pointer-events: auto;
      transition-duration: var(--duration-default);
      transition-property: color, padding;
      transition-timing-function: var(--ease-custom);
    }

    ._question::before {
      color: var(--color-accent);
      content: 'Q.';
      font-family: var(--font-futura);
      font-weight: var(--font-weight-regular);
      letter-spacing: 0.1em;
      line-height: 1;
    }

    ._question::after {
      aspect-ratio: 1 / 1;
      background: var(--color-accent);
      content: '';
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C10.5523 2.41411e-08 11 0.447715 11 1V9H19C19.5523 9 20 9.44772 20 10C20 10.5523 19.5523 11 19 11H11V19C11 19.5523 10.5523 20 10 20C9.44771 20 9 19.5523 9 19V11H1C0.447716 11 -4.82823e-08 10.5523 0 10C4.82822e-08 9.44771 0.447716 9 1 9H9V1C9 0.447715 9.44772 -2.41411e-08 10 0Z" /></svg>');
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
    }

    ._item[open] ._question {
      padding-top: calc(30 * var(--px-to-rem));
    }

    ._item[open] ._question::after {
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M1 11C0.447716 11 3.91405e-08 10.5523 8.74228e-08 10C1.35705e-07 9.44771 0.447716 9 1 9L19 9C19.5523 9 20 9.44772 20 10C20 10.5523 19.5523 11 19 11L1 11Z" /></svg>');
    }

    @media (hover: hover) and (pointer: fine) {
      ._question:hover {
        color: var(--color-accent);
      }
    }

    ._answer {
      padding-inline: calc(20 * var(--px-to-rem));
      padding-top: calc(12 * var(--px-to-rem));
    }

    ._answer p {
      align-items: baseline;
      border-top: 0.5px solid var(--color-accent);
      display: grid;
      font-size: var(--font-size-300);
      font-weight: var(--font-weight-medium);
      gap: calc(16 * var(--px-to-rem));
      grid-template-columns: auto 1fr;
      letter-spacing: 0;
      line-height: 1.6;
      padding: calc(12 * var(--px-to-rem)) calc(10 * var(--px-to-rem)) calc(30 * var(--px-to-rem));
    }

    ._answer p::before {
      color: var(--color-accent);
      content: 'A.';
      font-family: var(--font-futura);
      font-size: var(--font-size-400);
      font-weight: var(--font-weight-regular);
      letter-spacing: 0.1em;
      line-height: 1;
    }

    @media (width <= 767px) {
      :scope {
        padding-block: calc(40 * var(--px-to-rem));
      }

      ._inner {
        gap: calc(24 * var(--px-to-rem));
      }

      ._block {
        padding: calc(24 * var(--px-to-rem)) 0;
      }

      ._block-heading {
        font-size: var(--font-size-100);
        font-weight: var(--font-weight-regular);
        line-height: 1.6;
      }

      ._block-main {
        gap: calc(16 * var(--px-to-rem));
        padding-top: calc(16 * var(--px-to-rem));
      }

      ._question {
        --_icon-size: calc(13 * var(--px-to-rem));
        align-items: baseline;
        font-size: var(--font-size-100);
        gap: calc(11 * var(--px-to-rem));
        line-height: 1.6;
        padding: calc(14 * var(--px-to-rem)) calc(20 * var(--px-to-rem));
      }

      ._question::before {
        font-size: var(--font-size-200);
      }

      ._item[open] ._question {
        padding-top: calc(14 * var(--px-to-rem));
      }

      ._answer {
        padding-top: 0;
      }

      ._answer p {
        font-size: var(--font-size-100);
        gap: calc(12 * var(--px-to-rem));
        line-height: 2;
        padding: calc(14 * var(--px-to-rem)) 0;
      }

      ._answer p::before {
        font-size: var(--font-size-200);
      }
    }
  }
}

/**
 * =============================================================================
 *
 * Contact section
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.contact) to (.scope) {
    :scope {
      background: var(--color-white);
      display: grid;
      justify-items: center;
      padding-block: calc(80 * var(--px-to-rem));
    }

    ._inner {
      inline-size: var(--content-width);
    }

    ._heading {
      color: var(--color-accent);
      display: grid;
      font-size: var(--font-size-500);
      font-weight: var(--font-weight-medium);
      gap: calc(24 * var(--px-to-rem));
      line-height: 1.6;
      text-align: center;
      word-break: keep-all;
    }

    ._heading::after {
      background: currentColor;
      content: '';
      height: 1px;
      margin-inline: auto;
      width: calc(120 * var(--px-to-rem));
    }

    ._description {
      font-size: var(--font-size-50);
      line-height: 3;
      padding-top: calc(32 * var(--px-to-rem));
      text-align: center;
    }

    ._locations {
      display: grid;
      gap: calc(16 * var(--px-to-rem));
      justify-content: center;
      padding-top: calc(32 * var(--px-to-rem));
      text-align: center;
    }

    ._salon {
      font-size: var(--font-size-200);
      line-height: 1;
    }

    ._opening-hour {
      font-size: var(--font-size-50);
      line-height: 1;
      padding-top: calc(16 * var(--px-to-rem));
      text-align: center;
    }

    @media (width <= 767px) {
      ._heading {
        font-size: calc(22 * var(--px-to-rem));
      }

      ._description {
        line-height: 2;
      }
    }
  }
}