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

@font-face {
  font-family: "Lato";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/Lato/Lato-Medium.woff2") format("woff2");
}

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

:root {
  --text-color: #2c3139;
  --text-color-light: #4d5159;

  --background-color: #ffffff;

  --border-color: #aaaaaa;

  --contrast-color: #0e84a1;

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

  --content-max-width: 748px;
  --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)
  );

  --text-font-size-small: 0.9375rem; /* 15px */
  --text-font-size-large: 1.0625rem; /* 17px */
  --text-font-size-largest: 1.125rem; /* 18px */

  --title-font-size-smallest: 1.125rem; /* 18px */
  --title-font-size-small: 1.25rem; /* 20px */
  --title-font-size-large: 1.375rem; /* 22px */

  --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 {
  margin: 0;
  min-height: 100vh;
  padding-block-end: var(--spacing-48);

  line-height: 1.4;
  font-family: "Lato", sans-serif;
  text-rendering: optimizelegibility;
  color: var(--text-color);

  background-image: url("background.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: #393939;

  @media (width >= 900px) {
    padding-block-end: var(--spacing-64);
  }
}

.ep-header {
  background-color: var(--background-color);
  border-block-end: 6px solid var(--contrast-color);

  @media (width >= 900px) {
    border-block-width: 10px;
  }

  .wrapper {
    padding-block-start: var(--spacing-16);
    padding-block-end: var(--spacing-16);

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

  .logo-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .logo {
    grid-column: 1 / 2;
    grid-row: 1 / 3;

    height: 72px;
    width: auto;

    image-rendering: crisp-edges;

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

  .title {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: end;

    margin-block: 0;

    font-size: var(--title-font-size-large);
    font-weight: 600;
    line-height: 1.2;
  }

  .tagline {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    align-self: start;

    margin-top: 1px;

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

.ep-main {
  margin-block-start: var(--spacing-24);

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

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

  @media (width >= 900px) {
    max-width: var(--content-max-width);
    margin-inline: auto;

    margin-block-start: var(--spacing-56);
    padding-block: var(--spacing-52);
  }

  :is(.main-title, .title, .text) {
    max-width: var(--text-max-width-with-margin);
    margin-inline: auto;
  }

  .main-title {
    margin-block: 0;

    font-size: var(--title-font-size-small);
    font-weight: 500;
  }

  .title {
    margin-block-start: var(--spacing-24);
    margin-block-end: 0;

    font-size: var(--title-font-size-smallest);
    font-weight: 500;
  }

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

    a {
      color: inherit;
    }
  }
}

.ep-footer {
  margin-block-start: var(--spacing-24);

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

  background-color: var(--background-color);
  border-block: 6px solid var(--contrast-color);

  @media (width >= 900px) {
    margin-block-start: var(--spacing-56);
    padding-block: var(--spacing-28);

    border-block-width: 10px;
  }

  .title-wrapper {
    text-align: center;
  }

  .title {
    margin-block: 0;

    font-size: var(--title-font-size-small);
    font-weight: 600;
    line-height: 1.2;
  }

  .tagline {
    margin-top: 1px;

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

  .opening-hours {
    display: block;
    margin-block-start: var(--spacing-16);
    margin-block-end: 0;

    text-align: center;
  }

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

    color: inherit;

    text-underline-offset: 3px;
  }

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

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

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

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

    color: inherit;

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

    &::after {
      content: "";
      background-image: url("map/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 >= 1120px) {
      border-inline: 1px solid var(--border-color);
    }
  }

  .copyright {
    display: block;

    font-size: var(--text-font-size-small);
    text-align: center;

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

  .organization-number {
    display: block;

    font-size: var(--text-font-size-small);
    text-align: center;

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