/* === FONTS === */

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-v20-latin-regular.woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-v20-latin-600.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap; 
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-v20-latin-700.woff2') format('woff2'); 
  font-style: normal;
  font-weight: 700;
  font-display: swap; 
}

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-v20-latin-800.woff2') format('woff2'); 
  font-weight: 800;
  font-style: normal;
  font-display: swap; 
}


/* === CSS RESET === */

/* Box sizing rules */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block-start: 5rem;
}

:root {
  /* == COLOR PALLETTE == */

  /* Primary Color */
  --clr-soft-orange: hsl(35, 77%, 62%);
  --clr-soft-red: hsl(5, 85%, 63%);
  
  /* Neutral Colors */
  --clr-off-white: hsl(36, 100%, 99%);
  --clr-grayish-blue: hsl(233, 8%, 79%);
  --clr-dark-grayish-blue: hsl(236, 13%, 42%);
  --clr-very-dark-blue: hsl(240, 100%, 5%);
  
  /* == TYPOGRAPHY == */

  /* font family */
  --ff-body: 'Inter', sans-serif;

  /* font size */
  --fs-paragraph: 0.9375rem;

  /* font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-bolder: 800;

  /* Spacing */
  --space-sr:  0.0625rem;
  --space-xxs: 0.15rem;
  --space-vs: 1.625rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xlg: 2.5rem;
  --space-xxlg: 3rem;
}


/* === Accessibility Checks  === */

@media (prefers-reduced-motion: reduce) {
  .nav__links a, .side__bar--link, .trending__link {
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* === Base styles === */

body {
  min-height: 100svh;
  line-height: 1.5;
  background: var(--clr-off-white);
  font-family: var(--ff-body);
  padding: 0 1rem 4rem;
}

header {
  position: sticky;
  top: 0;
  height: 4rem;
  width: 100%;
  background: var(--clr-off-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}

.header__logo--image {
  display: block;
  width: clamp(2rem, 4vw, 4rem);
  height: clamp(1.5rem, 3vw, 4rem);
}

.nav__links {
  position: fixed;
  top: 0;
  right: 0;
  width: 70%;
  height: 100svh;
  background: var(--clr-off-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  translate: 100% 0;
  transition: translate 0.3s ease;
  padding: 6rem 1.5rem;
  z-index: 300;
}

.nav__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.nav__links a {
  text-decoration: none;
  font-size: clamp(1rem, 1.5vw, 2rem);
  font-weight: var(--fw-medium);
  color: var(--clr-very-dark-blue);
  display: flex;
  flex-direction: column;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.nav__links a:hover {
  color: var(--clr-soft-red);
}

.nav__links.is-open {
  translate: 0 0;
}

.nav__toggle {
  position: absolute;
  top: 1.4rem;
  right: -0.1rem;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem;
  -webkit-tap-highlight-color: transparent;
  z-index: 400;
}

.nav__toggle--bar {
  display: block;
  width: var(--space-vs);
  height: 3px;
  background: var(--clr-very-dark-blue);
  border-radius: var(--space-xxs);
  transition: transform 0.3s ease;
  transform-origin: center;
}

.nav__toggle.is-open .nav__toggle--bar:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}

.nav__toggle.is-open .nav__toggle--bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__toggle.is-open .nav__toggle--bar:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 200;
}

.backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

.main__content {
  width: 100%;
}

.hero__visual {
  width: 100%;
}

.hero__visual picture img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 40vh;
  object-fit: cover;
}

.hero__content {
  margin-block-start: 1rem;
  text-align: left;
}

.hero__title {
  color: var(--clr-very-dark-blue);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: var(--fw-bolder);
  line-height: 1.1;
  margin-block-end: 0.5rem;
  text-wrap: wrap;
  word-spacing: 3px;
}

.hero__body--text {
  color: var(--clr-dark-grayish-blue);
  font-size: clamp(var(--fs-paragraph), 1.3vw, 2rem);
  margin-block-end: clamp(1rem, 1.6vw, 2rem);
}

.hero__btn {
  all: unset;
  background: var(--clr-soft-red);
  color: var(--clr-very-dark-blue);
  font-size: 1em;
  font-weight: var(--fw-bold);
  padding: 0.5em 1.5em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-block-end: 2rem;
}

.side__bar {
  background: var(--clr-very-dark-blue);
  padding: 2rem 1rem 1rem;
  margin-block-end: 3rem;
}

.side__bar--heading {
  color: var(--clr-soft-orange);
}

.side__bar--item {
  padding-block: 1.5rem;
}

.side__bar--item:not(:last-child) {
  border-bottom: 0.5px solid var(--clr-grayish-blue);
}

.side__bar--item:last-child {
  padding-block-end: 0;
}

.side__bar--title {
  font-size: clamp(1rem, 1.6vw, 3rem);
  margin-block-end: 0.5rem;
}

.side__bar--link {
  color: var(--clr-off-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.side__bar--link:hover {
  color: var(--clr-soft-orange);
}

.side__bar--text {
  color: var(--clr-grayish-blue);
  font-size: clamp(var(--fs-paragraph), 1.2vw, 2rem);
}

.trending {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.trending__item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

.trending__image--container {
  width: auto;
  height: clamp(8rem, 10vw, 15rem);
}

.trending__image--container img {
  display: block;
  max-width: 100%;
  height: 100%;
}

.trending__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trending__number {
  color: var(--clr-soft-red);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
}

.trending__link {
  color: var(--clr-very-dark-blue);
  font-size: 1rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.trending__link:hover {
  color: var(--clr-soft-red);
}

.trending__text {
  color: var(--clr-dark-grayish-blue);
  font-size: clamp(var(--fs-paragraph), 1.1vw, 2rem);
}

@media screen and (min-width:26.25rem) {
  body {
    padding: 1.5rem 3rem;
  }
}

@media screen and (min-width:48rem) {

  body {
    padding: 3rem 6rem;
  }

  .header {
    padding-block: 0 3rem;
  }

  .nav__links {
    position: static;
    width: auto;
    height: auto;
    background: none;
    translate: 0 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .nav__links ul {
    flex-direction: row;
    gap: 2rem;
  }

  .nav__links a {
    font-size: 1.2rem;
    flex-direction: row;
  }

  .nav__toggle, .backdrop {
    display: none;
  }

  .hero__title {
    margin-block: 1.5rem 1rem;
  }

  .hero__visual picture img {
    max-height: 50vh;
  }

}


@media screen and (min-width:64rem) {

  body {
    display: grid;
    place-items: center;
    padding: 4rem 8rem;
  }

  .main__content {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 1.5rem;

    grid-template-areas:
    "hero  hero aside"
    "hero hero aside"
    "trending trending trending";
  }

  .hero__visual picture img {
    max-height: 40vh;
  }

  .hero { grid-area: hero;}
  .side__bar {
    grid-area: aside;
    align-self: stretch;
  }
  .trending {
    grid-template-columns: subgrid;
    grid-area: trending;
  }

  .hero__content {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr;
    padding-block: 0.5rem;
  }

  .hero__title {
    margin-block: 0;
  }

  .hero__body--text {
    padding-block: 0.5rem;
  }

}