@import './modern-normalize.css';

@font-face {
    font-family: 'Asap';
    src: url('fonts/Asap-Medium.woff2') format('woff2'),
        url('fonts/Asap-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Asap Symbol';
    src: url('fonts/Asap-Symbol.woff2') format('woff2'),
        url('fonts/Asap-Symbol.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Asap';
    src: url('fonts/Asap-Regular.woff2') format('woff2'),
        url('fonts/Asap-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
  /* COLOR VARIABLES */

  --color-hsl-main-color: hsl(0, 0%, 98%);
  --color-hsl-main-color-h: 0;
  --color-hsl-main-color-s: 0%;
  --color-hsl-main-color-l: 98%;

  --color-hsl-secondary-color: hsl(223, 60%, 42%);
  
  --color-hsl-accent-color: hsl(321, 92%, 57%);
  --color-hsl-accent-color-h: 321;
  --color-hsl-accent-color-s: 92%;
  --color-hsl-accent-color-l: 57%;
  
  --color-hsl-background-color: hsl(223, 20%, 90%);
  --color-hsl-background-color-h: 324;
  --color-hsl-background-color-s: 100%;
  --color-hsl-background-color-l: 98%;

  --color-hsl-text-color: hsl(0, 0%, 10%);
  --color-hsl-text-color-h: 0;
  --color-hsl-text-color-s: 0%;
  --color-hsl-text-color-l: 10%;
  
  --font-heading: "Asap";
  --font-paragraph: "Asap";
}

.body-wrapper {
  display: grid;
  grid-template: 15ch 1fr / clamp(20ch, 20vw, 300px) 1fr;
  grid-template-areas:
    "side header"
    "side main";

  position: relative;
  z-index: 0;
}

/* SIDE */

.side {
  padding-left: 5%;

  grid-area: side;

  --nav-link-height: 2rem;

  display: grid;
  grid-auto-rows: var(--nav-link-height);

  background-color: var(--color-hsl-secondary-color);
}

.side__title-wrapper,
.side__nav-link-wrapper {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
  gap: 0.3rem;
}

.side__title-wrapper {
  align-self: center;

  grid-row: 1 / 3;
}

.side__home-icon,
.side__profile-icon,
.side__messages-icon,
.side__history-icon,
.side__tasks-icon,
.side__communities-icon,
.side__settings-icon,
.side__support-icon,
.side__privacity-icon,
.side__dashboard-icon {
  aspect-ratio: 1 / 1;

  justify-self: center;
}

.side__home-icon,
.side__profile-icon,
.side__messages-icon,
.side__history-icon,
.side__tasks-icon,
.side__communities-icon,
.side__settings-icon,
.side__support-icon,
.side__privacity-icon {
  width: 1.3rem;
}

.side__dashboard-icon {
  width: 2.2rem;
}

.side__home-icon {background-image: url(icons/home.svg)}
.side__profile-icon {background-image: url(icons/profile.svg)}
.side__messages-icon {background-image: url(icons/messages.svg)}
.side__history-icon {background-image: url(icons/history.svg)}
.side__tasks-icon {background-image: url(icons/tasks.svg)}
.side__communities-icon {background-image: url(icons/communities.svg)}
.side__settings-icon {background-image: url(icons/settings.svg)}
.side__support-icon {background-image: url(icons/support.svg)}
.side__privacity-icon {background-image: url(icons/privacity.svg)}
.side__dashboard-icon {background-image: url(icons/dashboard.svg)}

.side__title {
  margin: 0;

  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-hsl-main-color);
}

.side__main-nav-links,
.side__secondary-nav-links {
  display: grid;
  grid-template-rows: subgrid;

  font-size: 1.1rem;
}

.side__main-nav-links {
  grid-row: 4 / span 6;
}

.side__secondary-nav-links {
  grid-row: 11 / span 3;
}

.side__nav-link {
  font-family: var(--font-paragraph);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-hsl-main-color);
}

/* HEADER */

.header {
  display: grid;
  grid-template: 45% 55% / 1fr repeat(3, 12ch);
  grid-template-areas:
    "search-block   notifications-button profile-block profile-block"
    "profile-banner actions-block        actions-block actions-block";
  align-items: center;

  grid-area: header;

  background-color: var(--color-hsl-main-color);
}

.header__shadow {
  height: 1px;
  width: 100%;

  position: relative;
  top: -1px;

  z-index: -1;

  grid-row: 3 / span 1;
  grid-column: 1 / span 4;

  box-shadow: hsla(0 0% 0%) 0 0 0.5rem;
}

.search-block {
  grid-area: search-block;
  width: 90%;

  justify-self: center;

  display: grid;
  grid-template: 1.5rem / 1.5rem 1fr;
  gap: 0.4rem;
}

.search-block__search-button {
  height: 100%;
  aspect-ratio: 1 / 1;

  border: none;

  background: none;
  background-image: url(icons/search.svg);
  
  cursor: pointer;
}

.search-block__search-input {
  padding-left: 1rem;
  height: 100%;
  width: 100%;
  
  appearance: none;

  border: none;
  border-radius: 1rem;

  --bg-color-h: var(--color-hsl-main-color-h);
  --bg-color-s: var(--color-hsl-main-color-s);
  --bg-color-l: calc(var(--color-hsl-main-color-l) - 10%);
  --bg-hsl-color: var(--bg-color-h) var(--bg-color-s) var(--bg-color-l);

  background-color: hsl(var(--bg-hsl-color));
}

.header__notifications-button {
  margin-right: 1.4rem;

  height: 1.5rem;
  aspect-ratio: 1 / 1;
  
  grid-area: notifications-button;
  justify-self: end;

  border: none;

  background: none;
  background-image: url(icons/notifications.svg);
  
  cursor: pointer;
}

.profile-block {
  margin-left: 1rem;

  grid-area: profile-block;

  display: grid;
  grid-template: 2.2rem / 3rem 1fr;
  gap: 0.4rem;
}

.profile-block__profile-photo {
  box-shadow: hsla(0 0% 0% / 10%) 0.1rem 0.1rem 0.3rem;

  border-radius: 1.5rem;

  height: 2.2rem;
  aspect-ratio: 1 / 1;

  background-color: white;
  background-image: url(images/morgan-oakley-user-photo.svg);
}

.profile-block__profile-username {
  align-self: center;
}

.profile-banner {
  width: 90%;

  grid-area: profile-banner;
  justify-self: center;

  display: grid;
  grid-template: 3.5rem / 4rem 1fr;
}

.profile-banner__profile-photo {
  box-shadow: hsla(0 0% 0% / 10%) 0.1rem 0.1rem 0.3rem;
  border-radius: 2rem;

  height: 3.5rem;
  aspect-ratio: 1 / 1;

  background-color: white;
  background-image: url(images/morgan-oakley-user-photo.svg);
}

.profile-banner__welcome,
.profile-banner__profile-name {
  margin: 0;
  font-family: var(--font-paragraph);
  line-height: 1.5;
}

.profile-banner__welcome {
  font-size: 0.7rem;
  font-weight: 500;
}

.profile-banner__profile-name {
  font-size: 1.2rem;
  font-weight: 500;
}

.actions-block {
  grid-area: actions-block;

  display: grid;
  grid-template: subgrid / subgrid;
  justify-items: start;
  align-items: center;
}

.actions-block__button {
  width: 10ch;
  height: 2.2rem;

  border: none;
  border-radius: 1.1rem;

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

  font-family: var(--font-paragraph);
  font-weight: 500;
  color: var(--color-hsl-main-color);
  
  cursor: pointer;
}

/* MAIN */

.main {
  z-index: -2;

  padding: 1.5rem;

  grid-area: main;

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

  display: grid;
  grid-template: 1fr 1fr / 3fr 1fr;
  grid-template-areas:
    "projects-section announcements-section"
    "projects-section trending-section";
  gap: 1.5rem;
}

.projects-section {
  grid-area: projects-section;

  display: grid;
  grid-template: 2rem 1fr / 1fr;
}

.projects-section__header {
  margin: 0;

  grid-row: 1 / span 1;
  grid-column: 1 / span 2;

  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.2rem;
}

.projects-container {
  display: grid;
  grid-template: repeat(3, 15rem) / 1fr 1fr;
  gap: 1.5rem;
}

.project {
  padding: 2rem 1rem;

  border-left: solid 0.5rem var(--color-hsl-accent-color);
  border-radius: 0.5rem;

  background-color: var(--color-hsl-main-color);
  box-shadow: hsla(0 0% 0% / 10%) 0.2rem 0.2rem 0.3rem;

  display: grid;
  grid-template: 1fr 1.5rem / 1fr;
  gap: 1rem;
}

.project__content-wrapper {
  overflow: hidden;
}

.project__header {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.5;
}

.project__description {
  margin: 0;

  font-family: var(--font-paragraph);

  --font-color: var(--color-hsl-text-color-h), var(--color-hsl-text-color-s), calc(var(--color-hsl-text-color-l) + 15%);

  color: hsl(var(--font-color));
}

.project__buttons-container {
  height: 1.5rem;

  display: flex;
  justify-content: end;
  gap: 1rem;
}

.project__rate-button,
.project__follow-button,
.project__share-button {
  width: 1.5rem;
  aspect-ratio: 1 / 1;
  background: none;
  border: none;
  
  cursor: pointer;
}

.project__rate-button {background-image: url(icons/rate.svg)}
.project__follow-button {background-image: url(icons/follow.svg)}
.project__share-button {background-image: url(icons/share.svg)}

.announcements-section {
  grid-area: announcements-section;

  display: grid;
  grid-template-rows: 2rem 1fr;
}

.announcements-section__header {
  margin: 0;

  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
}

.announcements-wrapper {
  height: 100%;
  padding: 1.5rem;

  border: none;
  border-radius: 1rem;
  background-color: var(--color-hsl-main-color);

  box-shadow: hsla(0 0% 0% / 10%) 0.2rem 0.2rem 0.3rem;

  display: grid;
  grid-template-rows: 1fr 1px 1fr 1px 1fr;
  gap: 1rem;
}

.announcements-wrapper__rule {
  background-color: rgb(200, 200, 200);
}

.announcement {
  align-self: center;
  overflow: hidden;
}

.announcement__header {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 500;
}

.announcement__body {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.8rem;

  --font-color: var(--color-hsl-text-color-h), var(--color-hsl-text-color-s), calc(var(--color-hsl-text-color-l) + 15%);
  color: hsl(var(--font-color));
}

.trending-section {
  grid-area: trending-section;

  display: grid;
  grid-template-rows: 2rem 1fr;
}

.trending-section__header {
  margin: 0;

  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
}

.trending-section__wrapper {
  height: 100%;
  padding: 1.5rem;

  border: none;
  border-radius: 1rem;
  background-color: var(--color-hsl-main-color);

  box-shadow: hsla(0 0% 0% / 10%) 0.2rem 0.2rem 0.3rem;

  display: grid;
  grid-template-rows: repeat(4, 1fr);
}

.trending-profile {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-areas:
    "photo user-info";
    gap: 0.5rem;
  align-items: center;
}

.trending-profile__username::before {
  content: "@";
}

.trending-profile__profile-photo {
  height: clamp(0px, 100%, 3rem);
  aspect-ratio: 1 / 1;

  box-shadow: hsla(0 0% 0% / 10%) 0.1rem 0.1rem 0.3rem;

  border-radius: 50%;

  background-color: white;

  grid-area: photo;
}

#tegan-photo {
  background-image: url(images/tegan-photo.webp);
  background-size: cover;
  background-repeat: none;
}

#morgan-photo {background-image: url(images/morgan-oakley-user-photo.svg)}

#kendal-photo {
  background-image: url(images/kendal-photo.webp);
  background-size: cover;
  background-repeat: none;
}

#alex-photo {
  background-image: url(images/alex-photo.webp);
  background-size: cover;
  background-repeat: none;
}

.trending-profile__username {
  margin: 0;

  font-family: var(--font-heading);
  font-size: 0.9rem;
  line-height: 1.5;

  grid-area: user-info;
}

.trending-profile__trending-project {
  margin: 0;

  font-family: var(--font-paragraph);
  font-size: 0.8rem;
  --font-color: var(--color-hsl-text-color-h), var(--color-hsl-text-color-s), calc(var(--color-hsl-text-color-l) + 15%);
  color: hsl(var(--font-color));

  grid-area: user-info;
}