* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Alan Sans";
  src: url("./public/fonts/AlanSans.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

:root {
  --color-primary-rgb: 0 167 157; /* #00a79d */
  --color-primary-dark-rgb: 0 140 130;
  --color-call-rgb: 0 76 129;
  --color-call-dark-rgb: 0 57 97;
  --color-ocker-rgb: 223 230 221;
  font-size: 14pt;
}

body {
  font-family: "Alan Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background-color: white;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-weight: 600;
}

.hero {
  height: 400px;
  background-image: url("public/images/owner.avif");
  background-size: cover;
  background-position: left;

  @media (min-width: 640px) {
    height: 450px;
    padding: 2rem;
  }
}

.text-container {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;

  @media (min-width: 640px) {
    padding: 3rem 2rem;
  }

  @media (min-width: 1024px) {
    padding: 4rem 2rem;
  }
}

.welcome-highlight-color {
  color: #1675bf;
}

.font-bold {
  font-weight: 600;
}

.welcome-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.3;

  @media (min-width: 640px) {
    font-size: 1.75rem;
  }

  @media (min-width: 1024px) {
    font-size: 2rem;
  }
}

.welcome-text {
  color: #555;
  line-height: 1.7;

  p {
    margin-bottom: 1rem;
  }

  details {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 4px 7px rgba(0, 0, 0, 0.032);
    margin: 12px 0;
    transition: background 0.12s ease, border-color 0.12s ease,
      box-shadow 0.12s ease, border-width 0.3s ease;
    interpolate-size: allow-keywords;

    &[open] {
      border-color: rgb(var(--color-primary-dark-rgb) / 0.2);
      background: rgb(var(--color-primary-dark-rgb) / 0.02);

      summary::before {
        transform: rotate(90deg);
      }

      &::details-content {
        block-size: auto;
      }
    }

    /* how to animate details: blog.logrocket.com/styling-html-modern-css */
    &::details-content {
      block-size: 0;
      overflow: hidden;
      transition: content-visibility 0.3s ease, block-size 0.3s ease;
      transition-behavior: allow-discrete;
    }

    @media (prefers-reduced-motion) {
      &::details-content {
        transition-duration: 0.6s;
      }
    }
  }

  summary {
    width: 100%;
    list-style: none;
    cursor: pointer;
    user-select: none;
    outline: none;
    display: inline-block;
    padding: 0.15rem 0;
    color: rgb(var(--color-primary-dark-rgb));
    font-weight: 600;
    letter-spacing: 0.3px;

    &::-webkit-details-marker {
      display: none;
    }

    &::before {
      content: "▸";
      display: inline-block;
      margin-right: 8px;
      transition: transform 0.14s ease;
      color: currentColor;
      font-size: 0.75rem;
      vertical-align: middle;
    }
  }
}