@font-face {
  font-family: "Crimson Pro";
  font-weight: 400;
  font-style: normal;
  src: url("/fonts/Crimson-Pro/CrimsonPro-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  src: url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  src: url("/fonts/Inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: italic;
  src: url("/fonts/Inter/Inter-Italic.woff2") format("woff2");
}

:root {
  --text-color: #3b4048;
  --text-color-light: #4d5159;
  --text-color-very-light: #5a5a5a;
  --text-color-darker: #2b3038;

  --input-text-color: #222222;

  --body-background-color: #f7f7f7;
  --background-color: #ffffff;
  --background-color-2: #ede6d8;
  --background-color-3: #f0efec;

  --border-color: #c2baaa;
  --border-color-hover: #9e907f;
  --border-color-focus: #534e47;

  --logo-color: #b5a77f;

  --action-color: #e55400;
  --action-color-hover: #dd5100;
  --action-color-active: #d84f00;
  --action-color-disabled: #f0a078;
  --action-color-text: #ffffff;

  --page-max-width: 1200px;
  --page-max-width-with-margin: min(
    calc(100% - 2 * var(--page-margin)),
    var(--page-max-width)
  );

  --content-max-width: 800px;
  --content-max-width-with-margin: min(
    calc(100% - 2 * var(--page-margin)),
    var(--content-max-width)
  );

  --text-max-width: 580px;
  --text-max-width-with-margin: min(
    calc(100% - 2 * var(--page-margin)),
    var(--text-max-width)
  );

  --final-max-width: 1600px;

  --text-font-size-smallest: 0.875rem; /* 14px */
  --text-font-size-small: 0.9375rem; /* 15px */
  --text-font-size-bigger: 1.0625rem; /* 17px */

  --title-font-size-large: 1.5rem; /* 24px */
  --title-line-height-large: 1.3;

  --page-margin: 22px;

  --spacing-04: 4px;
  --spacing-08: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-64: 64px;

  @media (width >= 600px) {
    --page-margin: 24px;

    --spacing-04: 8px;
    --spacing-08: 12px;
    --spacing-12: 16px;
    --spacing-16: 20px;
    --spacing-20: 24px;
    --spacing-24: 28px;
    --spacing-28: 32px;
    --spacing-32: 36px;
    --spacing-36: 40px;
    --spacing-40: 44px;
    --spacing-44: 48px;
    --spacing-48: 52px;
    --spacing-52: 56px;
    --spacing-56: 60px;
    --spacing-60: 64px;
    --spacing-64: 68px;
  }

  @media (width >= 900px) {
    --page-margin: 32px;

    --spacing-04: 12px;
    --spacing-08: 16px;
    --spacing-12: 20px;
    --spacing-16: 24px;
    --spacing-20: 28px;
    --spacing-24: 32px;
    --spacing-28: 36px;
    --spacing-32: 40px;
    --spacing-36: 44px;
    --spacing-40: 48px;
    --spacing-44: 52px;
    --spacing-48: 56px;
    --spacing-52: 60px;
    --spacing-56: 64px;
    --spacing-60: 68px;
    --spacing-64: 72px;
  }
}

:focus-visible {
  outline: 2px solid #008eff;
  outline-offset: 4px;
}

body {
  line-height: 1.4;
  font-family: "Inter", Arial, sans-serif;
  text-rendering: optimizelegibility;
  color: var(--text-color);

  margin: 0;
  background-color: var(--body-background-color);
}

/* inspired by https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss */
.visually-hidden {
  user-select: none;
  position: absolute;

  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;

  overflow: hidden;
  clip-path: inset(50%);

  border: 0;
  white-space: nowrap;
}

.kme-logo-text-style {
  font-family: "Crimson Pro", serif;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.kme-header {
  background-color: var(--background-color);

  .wrapper {
    display: flex;
    align-items: center;

    padding-block-start: var(--spacing-16);

    max-width: var(--page-max-width-with-margin);
    margin-inline: auto;
  }

  .logo {
    height: auto;
    width: 56px;
    margin-inline-start: -4px;
  }

  .title {
    margin-block: 0;
    margin-inline-start: var(--spacing-12);

    font-size: 1.5625rem; /* 25px */
  }

  .home-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;

    &:focus-visible {
      outline-offset: 0;
    }

    margin-inline-end: var(--spacing-08);
  }

  .booking-link {
    text-decoration: none;
    background-color: var(--action-color);
    color: var(--action-color-text);

    padding: 12px 18px;

    margin-inline-start: auto;

    @media not (prefers-reduced-motion) {
      transition: background-color 0.2s;
    }

    &:focus-visible {
      outline-offset: 0;
    }

    &:hover,
    &:focus {
      background-color: var(--action-color-hover);
    }

    &:active {
      background-color: var(--action-color-active);
    }
  }

  .navigation {
    display: flex;
    justify-content: space-between;

    padding-block-start: var(--spacing-16);
    padding-block-end: calc(var(--spacing-16) - 2px);

    overflow-y: auto;

    --hit-area-padding: 6px;

    margin-inline: auto;
    max-width: calc(var(--content-max-width) + 2 * var(--page-margin));

    .link {
      color: var(--text-color-darker);
      text-decoration-color: transparent;

      padding: var(--hit-area-padding);

      &:focus-visible {
        outline-offset: 0;
      }

      @media not (prefers-reduced-motion) {
        transition: text-decoration-color 0.2s;
      }

      &:hover,
      &.active {
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: 2px;
        text-decoration-color: currentColor;
      }

      &:first-of-type {
        margin-inline-start: calc(var(--page-margin) - var(--hit-area-padding));
      }

      & + .link {
        margin-inline-start: var(--spacing-16);

        @media (width >= 600px) {
          margin-inline-start: var(--spacing-32);
        }
      }

      &:last-of-type {
        margin-inline-end: calc(var(--page-margin) - var(--hit-area-padding));
      }
    }
  }
}

.kme-title {
  font-family: "Crimson Pro", serif;
  font-weight: 400;
  font-size: var(--title-font-size-large);
  line-height: var(--title-line-height-large);

  margin-block-start: var(--spacing-16);
  margin-block-end: 0;

  margin-inline: auto;
  max-width: var(--text-max-width-with-margin);

  &.long {
    letter-spacing: -0.5px;
  }
}

.kme-image + .kme-title {
  margin-block-start: var(--spacing-24);
}

.kme-text {
  margin-block-start: var(--spacing-16);
  margin-block-end: 0;

  margin-inline: auto;
  max-width: var(--text-max-width-with-margin);

  b {
    font-weight: 600;
  }
}

.kme-image + .kme-text,
.kme-service-price-list + .kme-text {
  margin-block-start: var(--spacing-20);
}

.kme-image + .kme-text {
  margin-block-start: var(--spacing-24);
}

.kme-image {
  display: block;
  width: 100%;

  margin-block-start: var(--spacing-24);

  max-width: 800px;
  margin-inline: auto;
}

.kme-booking-link + .kme-image {
  margin-block-start: var(--spacing-36);
}

.kme-booking-link {
  display: block;
  max-width: max-content;

  text-decoration: none;
  background-color: var(--action-color);
  color: var(--action-color-text);
  padding: 12px 18px;

  margin-inline: auto;
  margin-block-start: var(--spacing-32);

  @media not (prefers-reduced-motion) {
    transition: background-color 0.2s;
  }

  &:focus-visible {
    outline-offset: 0;
  }

  &:hover,
  &:focus {
    background-color: var(--action-color-hover);
  }

  &:active {
    background-color: var(--action-color-active);
  }
}

.kme-services {
  display: flex;
  justify-content: space-between;

  list-style: none;

  padding: 0;
  margin-block-start: var(--spacing-24);
  margin-block-end: 0;

  margin-inline: auto;
  max-width: var(--text-max-width-with-margin);

  --hit-area-padding: 6px;

  a {
    color: inherit;
    text-decoration-color: transparent;

    padding: var(--hit-area-padding);

    &:focus-visible {
      outline-offset: 0;
    }

    @media not (prefers-reduced-motion) {
      transition: text-decoration-color 0.2s;
    }

    &:hover,
    &.active {
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 2px;
      text-decoration-color: currentColor;
    }

    &:first-of-type {
      margin-inline-start: calc(var(--hit-area-padding) * -1);
    }

    & + .link {
      margin-inline-start: var(--spacing-16);

      @media (width >= 600px) {
        margin-inline-start: var(--spacing-32);
      }
    }

    &:last-of-type {
      margin-inline-end: calc(var(--hit-area-padding) * -1);
    }
  }
}

.kme-service-price-list {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: var(--spacing-32);

  margin-inline: auto;
  max-width: var(--text-max-width);

  td {
    text-align: left;

    border-block: 1px solid var(--border-color);

    padding-block: var(--spacing-12);

    &:first-of-type {
      padding-inline-start: var(--page-margin);
      padding-inline-end: var(--spacing-12);
    }

    &:last-of-type {
      padding-inline-end: var(--page-margin);
    }
  }

  .description {
    margin-block: var(--spacing-04) 0;

    font-size: var(--text-font-size-small);
    color: var(--text-color-light);
  }

  td:last-child {
    min-width: 5rem; /* 80px */
    max-width: 8rem; /* 128px */
    white-space: nowrap;
  }

  tbody tr:nth-child(odd) {
    background-color: var(--background-color-3);
  }
}

.kme-title + .kme-service-price-list {
  margin-block-start: var(--spacing-16);
}

.kme-booking-form {
  padding-block: var(--spacing-16) var(--spacing-48);
  padding-inline: var(--page-margin);
  background-color: var(--background-color-2);

  margin-inline: auto;
  max-width: var(--content-max-width-with-margin);

  .error-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);

    padding: var(--spacing-12) var(--spacing-16);
    background-color: #ffdddd;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    margin-block-start: var(--spacing-08);
    margin-block-end: var(--spacing-28);

    &::before {
      content: "";
      background-image: url("/icons/Lucide/circle-alert.svg");
      background-size: contain;
      background-repeat: no-repeat;
      width: 1.25rem; /* 20px */
      height: 1.25rem; /* 20px */
    }
  }

  .title {
    margin-block: 0;

    font-family: "Crimson Pro", serif;
    font-weight: 400;
    font-size: var(--title-font-size-large);
    line-height: var(--title-line-height-large);
  }

  .label {
    display: block;
    width: max-content;

    > small {
      font-size: var(--text-font-size-smallest);
      color: var(--text-color-very-light);
    }
  }

  .title + .label,
  .title + .input + .label {
    margin-block-start: var(--spacing-20);
  }

  .input + .label,
  .select + .label,
  .calendar-date-picker + .label {
    margin-block-start: var(--spacing-24);
  }

  .select {
    appearance: none;
    border-radius: 0;
    width: 100%;
    box-shadow: none;

    padding-inline: 12px 28px;
    padding-block: 13px;
    box-sizing: border-box;

    margin-inline: 0;
    margin-block-end: 0;

    border-inline: none;
    border-block-start: none;
    border-color: transparent;
    border-block-end: 1px solid var(--border-color);

    font-family: inherit;
    font-size: inherit;
    color: var(--input-text-color);
    background-color: var(--background-color);

    background-image: url("/icons/Lucide/chevron-down.svg");
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position: right 10px center;

    @media (prefers-reduced-motion: no-preference) {
      &:not(:focus-visible) {
        transition: border 0.15s;
      }
    }

    &:hover {
      border-color: var(--border-color-hover);
    }

    &:focus {
      border-color: var(--border-color-hover);
    }

    &:focus-visible {
      outline-offset: 0;
      border-color: transparent;
    }
  }

  .input {
    appearance: none;
    border-radius: 0;
    width: 100%;
    box-shadow: none;

    padding-inline: 12px;
    padding-block: 13px;
    box-sizing: border-box;

    margin-inline: 0;
    margin-block-end: 0;

    border-inline: none;
    border-block-start: none;
    border-color: transparent;
    border-block-end: 1px solid var(--border-color);

    font-family: inherit;
    font-size: inherit;
    color: var(--input-text-color);
    background-color: var(--background-color);

    &#location-input {
      display: none;
    }

    &.textarea {
      resize: vertical;
      min-height: 3.5rem;
    }

    &:not(.js-focus-visible) {
      outline: none;

      @media (prefers-reduced-motion: no-preference) {
        transition: border 0.15s;
      }

      &:hover {
        border-color: var(--border-color-hover);
      }

      &:focus {
        border-color: var(--border-color-focus);
      }
    }

    &.js-focus-visible:focus {
      border-color: transparent;
    }

    &:focus-visible {
      outline-offset: 0;
    }
  }

  .input,
  .select,
  .visually-hidden,
  .visually-hidden + .calendar-date-picker {
    /* margin-block-start: var(--spacing-08); */
    margin-block-start: 8px;
  }

  .calendar-date-picker {
    background-color: var(--background-color);
    width: 100%;

    &:not(.active) {
      display: none;
    }

    .button-slot-content {
      display: block;
    }

    &::part(container) {
      gap: 0;
    }

    &::part(heading) {
      font-size: 1rem;
      font-weight: 400;
    }

    &::part(button) {
      border: none;
      background: var(--background-color);

      width: 42px;
      height: 42px;

      @media not (prefers-reduced-motion) {
        transition: background-color 0.15s;
      }
    }

    &::part(button):hover {
      background: var(--background-color-3);
    }

    &::part(button):focus-visible {
      outline: 2px solid #008eff;
    }

    calendar-month {
      --color-accent: var(--action-color);
      --color-text-on-accent: var(--action-color-text);

      width: auto;
      margin-block-end: var(--spacing-08);

      &::part(button):is([aria-pressed="false"]):hover {
        background: var(--background-color-3);
      }

      &::part(heading) {
        text-transform: capitalize;
        font-family: "Crimson Pro", serif;
        font-size: 1.375rem; /* 22px */
      }
    }
  }

  .booking-note {
    display: block;
    margin-block-start: var(--spacing-28);

    font-size: var(--text-font-size-smallest);
  }

  .privacy-note {
    display: block;
    margin-block-start: var(--spacing-16);

    font-style: italic;
    font-size: var(--text-font-size-smallest);
    color: var(--text-color-light);
  }

  .submit-button {
    display: block;
    width: max-content;
    border: none;

    font-size: inherit;
    color: var(--action-color-text);

    padding: 12px 18px;
    margin-block-start: var(--spacing-28);
    margin-inline: auto;

    background-color: var(--action-color);

    @media not (prefers-reduced-motion) {
      transition: background-color 0.2s;
    }

    &:not(:disabled) {
      cursor: pointer;
    }

    &:focus-visible {
      outline-offset: 0;
    }

    &:hover,
    &:focus {
      background-color: var(--action-color-hover);
    }

    &:active {
      background-color: var(--action-color-active);
    }

    &:disabled {
      background-color: var(--action-color-disabled);
    }
  }
}

.kme-footer {
  margin-block-start: var(--spacing-48);
  padding-block-end: var(--spacing-48);

  &::before {
    content: "";
    display: block;

    height: 2px;
    width: calc(100% - 2 * var(--page-margin));
    background-color: var(--border-color);

    opacity: 0.8;

    margin-inline: auto;
    max-width: 440px;
  }

  .logo {
    display: block;
    width: 64px;
    height: auto;

    margin-block-start: var(--spacing-32);
    margin-inline: auto;
  }

  .company-name {
    display: block;

    font-size: 1.375rem; /* 22px */
    text-align: center;

    margin-block-start: var(--spacing-12);
    margin-inline: auto;
  }

  .opening-hours {
    display: block;

    text-align: center;

    margin-block-start: var(--spacing-36);
    margin-block-end: 0;
  }

  .phone-number,
  .email-address {
    display: block;
    width: max-content;
    margin-inline: auto;
    margin-block-start: var(--spacing-24);

    color: inherit;
    text-align: center;
    text-decoration-color: transparent;

    @media not (prefers-reduced-motion) {
      transition: text-decoration-color 0.2s;
    }

    &:hover,
    &.active {
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-thickness: 2px;
      text-decoration-color: currentColor;
    }
  }

  .phone-number + .email-address {
    margin-block-start: var(--spacing-04);
  }

  .address {
    font-style: normal;
    text-align: center;

    margin-block-start: var(--spacing-32);
  }

  .google-maps-link {
    display: flex;
    width: max-content;
    margin-inline: auto;

    color: inherit;

    margin-block-start: var(--spacing-08);

    &::after {
      content: "";
      background-image: url("/graphics/google-maps-logo.png");
      background-size: contain;
      background-repeat: no-repeat;

      width: 1.25rem; /* 20px */
      height: 1.5rem; /* 24px */

      margin-inline-start: 0.5rem; /* 8px */
    }
  }

  .map img {
    display: block;
    width: 100%;
    height: auto;

    border-block: 1px solid var(--border-color);

    margin-block-start: var(--spacing-24);

    margin-inline: auto;
    max-width: var(--page-max-width);

    @media (width >= 1200px) {
      border-inline: 1px solid var(--border-color);
    }
  }

  .copyright {
    display: block;

    color: var(--text-color-very-light);
    font-size: var(--text-font-size-smallest);
    text-align: center;

    margin-block-start: var(--spacing-24);
  }

  .organization-number {
    display: block;

    color: var(--text-color-very-light);
    font-size: var(--text-font-size-smallest);
    text-align: center;

    margin-block-start: var(--spacing-04);
  }
}