/* Mobile-first navigation */
header nav {
  background: var(--main-gradient);
  padding: 16px 24px;
  border-radius: 0 0 15px 15px;
}

.header-highlight {
  display: none;
}

.nav-menu {
  display: none;
}

.mobile-nav-menu {
  display: block;
}

.mobile-navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--main-gradient);
  z-index: 10;
  gap: 80px;
}

.mobile-navigation-items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mobile-navigation-items > li {
  list-style: none;
  text-align: center;
}

.mobile-navigation-items > li > a {
  color: #fff;
  text-decoration: none;
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 700;
}

#close-menu-hamburguer {
  position: absolute;
  top: 25px;
  right: 25px;
  cursor: pointer;
  z-index: 20;
}

/* Mobile-first layout primitives */
.banner,
.posts,
.posts-grid,
.all-posts,
.categories_filter,
.call,
.contact-form,
.mission,
.partners,
.safety,
.investment,
.entry-content,
.related-posts,
.fraud-protection,
.free-tools,
.clients,
.clients-we-work,
.our-platform,
.our-resources__customization,
.our-resources__onboarding,
.sdk-multiplatform,
.auto-reading,
.life-proof,
.cybersecurity,
footer {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

.banner-grid,
.carousel-grid,
.solutions__grid,
.our-resources__header-grid,
.our-resources__customization-grid,
.our-resources__onboarding-grid,
.sdk-multiplatform__grid,
.auto-reading__grid,
.life-proof__grid,
.cybersecurity__grid,
.clients__grid,
.clients-we-work__grid,
.clients-we-work__list,
.fraud-protection__grid,
.free-tools__grid,
.free-tools__cta-panel,
.mission__grid,
.partners__grid,
.safety__grid,
.investment-grid,
.contact-form__grid,
.contact__form-grid,
.posts-grid,
.all-posts,
.post_category,
.footer-grid {
  grid-template-columns: 1fr;
}

.contact__form-grid {
  grid-template-areas:
    "name"
    "company"
    "email"
    "whatsapp"
    "resources";
}

.categories_filter > .categories > ul {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 32px;
  padding: 32px 0;
  text-align: center;
}

.post__content,
.post-informations {
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 520px);
  max-width: 92%;
}

.footer-grid {
  justify-items: center;
  text-align: center;
  gap: 30px;
}

.cerberus-id,
.cerberus-contact {
  width: 100%;
}

#horizontal-row-footer-logo {
  display: block;
  margin-top: 10px;
}

#horizontal-row-copyright {
  display: none;
}

/* Desktop enhancements */
@media (min-width: 769px) {
  header nav {
    background: transparent;
    padding: 41px 92px;
    border-radius: 0;
  }

  .header-highlight {
    display: block;
  }

  .nav-menu {
    display: block;
  }

  .mobile-nav-menu {
    display: none;
  }

  .banner-grid {
    grid-template-columns: 1fr 1fr;
    padding-left: 92px;
    padding-right: 92px;
  }

  .carousel-grid,
  .solutions__grid,
  .our-resources__header-grid,
  .our-resources__customization-grid,
  .our-resources__onboarding-grid,
  .sdk-multiplatform__grid,
  .auto-reading__grid,
  .cybersecurity__grid,
  .fraud-protection__grid,
  .free-tools__grid,
  .clients-we-work__grid,
  .partners__grid {
    grid-template-columns: 1fr 1fr;
  }

  .free-tools__cta-panel {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .life-proof__grid {
    grid-template-columns: 1fr 1.25fr;
  }

  .clients__grid {
    grid-template-columns: 1.25fr 2fr;
  }

  .clients-we-work__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .mission__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .safety__grid {
    grid-template-columns: 1fr 2fr;
  }

  .investment-grid {
    grid-template-columns: 1.5fr 1fr;
  }

  .contact-form__grid {
    grid-template-columns: 1.35fr 2fr;
  }

  .contact__form-grid {
    grid-template-areas:
      "name company"
      "email whatsapp"
      "resources resources";
  }

  .posts-grid,
  .all-posts,
  .post_category {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    justify-items: stretch;
    gap: 100px;
  }

  .categories_filter > .categories > ul {
    display: flex;
    padding: 25px 0;
    text-align: left;
  }

  .post__content,
  .post-informations {
    left: 5%;
    transform: translateY(-50%);
    width: auto;
    max-width: 40%;
  }

  #horizontal-row-footer-logo {
    display: none;
  }

  #horizontal-row-copyright {
    display: block;
  }
}