@layer base, components, utilities;

@layer base {
  @layer fonts {
    /* source-sans-3-regular - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Source Sans 3';
      font-style: normal;
      font-weight: 400;
      src: url('../assets/fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }

    /* source-sans-3-700 - latin */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Source Sans 3';
      font-style: normal;
      font-weight: 700;
      src: url('../assets/fonts/source-sans-3-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    }
  }

  :root {
    /* Colors */

    --c-blue-200: hsl(233, 59%, 89%);
    --c-blue-300: hsl(225, 35%, 93%);
    --c-blue-400: hsl(234, 72%, 94%);
    --c-blue-500: hsl(227, 58%, 65%);
    /* Neutral Colors */
    --c-neutral-100: hsl(0, 0%, 100%);
    --c-neutral-400: hsl(261, 81%, 6%);

    --color-text-base: var(--c-neutral-400);

    --color-blue-accent: var(--c-blue-500);
    --color-blue-accent-hover: var(--c-blue-200);
    --color-body-bg: var(--c-blue-300);
    --color-menu-bg: var(--c-neutral-100);
    --color-icon-background: var(--c-blue-400);

    /* Font Sizes */
    --fs-14: calc(14 / 16 * 1rem);
    --fs-16: calc(16 / 16 * 1rem);
    --fs-18: calc(18 / 16 * 1rem);
    --fs-20: calc(20 / 16 * 1rem);
    --fs-24: calc(24 / 16 * 1rem);
    --fs-28: calc(28 / 16 * 1rem);
    --fs-32: calc(32 / 16 * 1rem);
    --fs-48: calc(48 / 16 * 1rem);

    --font-size-base: var(--fs-18);
    --font-size-logo: var(--fs-20);
    --font-size-h1: var(--fs-32);
    --font-size-h2: var(--fs-18);
    --font-size-h3: var(--fs-24);
    --font-size-author: var(--fs-20);
    --font-size-quote: var(--fs-16);
    --font-size-link: var(--fs-16);
    --font-size-copyright: var(--fs-14);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    font-family: 'Source Sans 3', Arial, Helvetica, sans-serif;
    font-size: var(--font-size-base);
    line-height: 1.5;
    background-color: var(--color-body-bg);
    color: var(--color-text-base);
  }

  h1,
  h2,
  h3 {
    font-weight: 700;
    line-height: 1.1;
  }

  ul {
    list-style: none;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: calc(20 / 16 * 1rem);
  }

  img,
  picture,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    border: none;
  }

  .btn {
    display: inline-block;
    text-decoration: none;
    color: var(--color-text-base);
    background-color: var(--color-blue-accent);
    padding: 12px 16px;
    border-radius: 4px;
    font-size: var(--font-size-link);
  }

  .wrapper {
    width: min(calc(100% - 48px), calc(1200 / 16 * 1rem));
    margin-inline: auto;
  }
}

@layer components {
  .mobile-menu {
    max-width: calc(400 / 16 * 1rem);
    margin-inline: auto;
    margin-block: calc(85 / 16 * 1rem);
    border-radius: 40px;
    box-shadow: 0 4px 32px hsl(245, 84%, 15%, 0.25);
    background-color: var(--color-menu-bg);
    padding: calc(40 / 16 * 1rem) calc(20 / 16 * 1rem) calc(48 / 16 * 1rem);
  }

  .profile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'avatar name'
      'avatar title';
    align-items: center;
    column-gap: calc(20 / 16 * 1rem);
    padding-block-end: calc(32 / 16 * 1rem);
    border-block-end: 1px solid hsl(0, 0%, 00%, 0.16);
  }

  .profile__avatar {
    grid-area: avatar;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 4px 26px hsl(259, 70%, 22%, 0.25);
  }

  .profile__name {
    grid-area: name;
    font-size: var(--font-size-h2);
  }

  .profile__title {
    grid-area: title;
  }

  .mobile-menu__nav {
    border-block-end: 1px solid hsl(0, 0%, 0%, 0.16);
    padding-block: calc(32 / 16 * 1rem);
  }

  .mobile-menu__list {
  }

  .mobile-menu__item {
  }

  .mobile-nav__link {
    background: none;
    display: flex;
    align-items: center;
    gap: calc(16 / 16 * 1rem);
    width: 100%;
    cursor: pointer;

    &:focus-visible {
      outline: 2px solid var(--color-blue-accent);
      outline-offset: 2px;
    }
  }

  .mobile-nav__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background-color: var(--color-icon-background);
  }

  .mobile-nav__label {
    font-size: var(--font-size-base);
    font-weight: 700;
  }

  .mobile-nav__arrow {
    margin-inline-start: auto;
    width: 16px;
    height: 16px;
  }

  .mobile-menu__settings {
    padding-block-start: calc(32 / 16 * 1rem);
    margin-block-end: calc(140 / 16 * 1rem);
  }

  .action-bar {
  }

  .action-bar__list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .action-bar__item {
  }

  .action-bar__accent {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    background-color: var(--color-icon-background);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;

    &.skip:focus {
      left: 0;
      width: auto;
      height: auto;
      background-color: #fff;
      padding: 10px;
      border: 1px solid;
    }
  }
}