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

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  /* Landscape orientation adjustments */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* Setting the smooth scrolling only for people that does not have exluded them */
  /* If a person suffers for this type of movements, it's highly likely to have "prefers-reduced-motion: reduced" set on their systems */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  * {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  /* Making Safari read your lists as lists on accessibility modes and resetting its elements */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
    font-size: var(--font-size-regular);
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* p,
  li {
    text-wrap: pretty;
  } */

  img,
  picture {
    max-inline-size: 100%;
    /* max-width: 100% would be the same */
    /* Logical Properties */
    /* inline: left - right */
    /* block: top - bottom */
    display: block;
  }

  /* These elements don't inherit the font by default */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  a {
    text-decoration: none;
  }
}

@layer base {
  :root {
    /* PRIMITIVE COLORS */
    --clr-white: #fafaf9;
    --clr-black: #1c1917;
    --clr-light-grey: #a8a29e;
    --clr-grey: #57534e;
    --clr-dark-grey: #44403c;
    --clr-thin-yellow: #d1c5b4;
    --clr-light-yellow: #f5f5f0;
    --clr-light-orange: #f6f3f2;
    --clr-gold: #775a19;

    /* SEMANTIC COLORS */
    --background-extra-light: var(--clr-white);
    --background-light: var(--clr-light-orange);
    --background-elements-light: var(--clr-light-yellow);

    --background-brand-accent: var(--clr-gold);

    --text-brand-titles: var(--clr-black);
    --text-secondary-subtitles: var(--clr-grey);
    --text-main: var(--clr-dark-grey);
    --text-tags: var(--clr-light-grey);
    --text-placeholders: var(--clr-thin-yellow);

    /* PRIMITIVE FONTS */
    --font-title: "Noto Serif", Georgia, "Times New Roman", Times, serif;
    --font-body:
      "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Helvetica, Arial, sans-serif;

    --fs-200: 0.75rem;
    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.25rem;
    --fs-700: 1.5rem;
    --fs-800: 2.5rem;
    --fs-900: 3.75rem;
    --fs-1000: 5rem;

    /* Before you'd use min-width: 760 for the media query */
    @media (width > 760px) {
      --fs-500: 1.25rem;
      --fs-600: 1.5rem;
      --fs-700: 2rem;
      --fs-800: 3.5rem;
      --fs-900: 5rem;
      --fs-1000: 6.5rem;
    }

    /* SEMANTIC FONTS */
    --font-size-xsm: var(--fs-200);
    --font-size-sm: var(--fs-300);
    --font-size-regular: var(--fs-400);
    --font-size-md: var(--fs-500);
    --font-size-lg: var(--fs-600);

    --font-size-heading-sm: var(--fs-700);
    --font-size-heading-regular: var(--fs-800);
    --font-size-heading-lg: var(--fs-900);
    --font-size-heading-xl: var(--fs-1000);

    /* BORDER RADIUS */
    --border-radius-1: 6px;
    --border-radius-2: 8px;
    --border-radius-3: 10px;
    --border-radius-4: 12px;
    --border-radius-5: 14px;
  }

  html {
    font-family: var(--font-body);
  }

  /* font-size is set in the body so the base rem stays consistent,
    since it may change depending on what 1rem is from your primitives */
  body {
    font-size: var(--font-size-regular);
    font-weight: 200;
    color: var(--text-main);
    background-color: var(--clr-light-orange);
  }

  a {
    color: var(--text-main);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-title);
    color: var(--text-brand-titles);
    text-wrap-style: balance;
  }

  a:hover,
  a:focus-visible {
    color: black;
  }
}

@layer layout {
  /* Adds margin to the top of the child elements, depending on their font-size. It skips the first children. Also: .flow > :where(:not(:first-child)) 
  */
  .text-flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  .wrapper {
    /* +2rem is added to account for padding while setting the max width. This way ensures a content area of the size + padding */
    max-width: var(--wrapper-max-width, calc(1400px + 2rem));
    margin-inline: auto;
    padding-inline: 1rem;

    @media (width > 760px) {
      padding-inline: 2rem;
    }
  }

  .wrapper--narrow {
    --wrapper-max-width: calc(1100px + 2rem);
  }

  .wrapper--extra-narrow {
    --wrapper-max-width: calc(720px + 2rem);
  }

  .section {
    padding-block: var(--section-vertical-padding, 2rem);

    @media (width > 760px) {
      --section-vertical-padding: 4rem;
    }
  }

  .section--short {
    @media (width > 760px) {
      --section-vertical-padding: 2rem;
    }
  }

  .section--tall {
    @media (width > 760px) {
      --section-vertical-padding: 8rem;
    }
  }

  .nav-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-block: 2rem;
  }

  .auto-equal-columns {
    display: grid;
    gap: var(--auto-equal-cols-gap, 1.5rem);
    align-items: center;

    @media (width > 760px) {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
  }

  .auto-equal-columns--large-gaps {
    @media (width > 1280px) {
      --auto-equal-cols-gap: 3rem;
    }
  }

  .auto-equal-columns--indented {
    :first-child {
      margin-inline-start: auto;
    }
  }

  .auto-fill-grid {
    display: grid;
    row-gap: var(--auto-fill-row-gap, 2rem);
    column-gap: var(--auto-fill-col-gap, 1.5rem);
    /* The auto-fit will create columns automatically with the minimum width of 300px -and no less that that, due to the min(300px, 100%)-. On mobile, it will use the 1fr default given the reduced viewport */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }

  .auto-fill-grid--large-gaps {
    --auto-fill-row-gap: 4rem;
    --auto-fill-col-gap: 2rem;
  }

  .vertical-layout {
    display: grid;
    gap: 2rem;

    img {
      margin-inline: auto;
    }
  }

  .footer-layout {
    display: grid;
    gap: 2rem;
    justify-items: center;

    div {
      display: grid;
      gap: 0.75rem;
      justify-items: center;
    }
  }
}

@layer components {
  header {
    background-color: var(--background-elements-light);

    button img {
      width: 36px;
    }
  }

  #nav-toggle {
    display: none;
    z-index: 100;
    cursor: pointer;
    background-color: transparent;
    border: 0;
  }

  .nav-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    align-items: center;
  }

  .nav-bar {
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 3rem;
    }
  }

  .nav-style {
    text-transform: uppercase;
    font-size: var(--font-size-xsm);
    color: var(--text-main);
    letter-spacing: 1px;
    list-style: none;
    padding: 0;
  }

  /* Nav bar changes for mobile feature */
  @media (width < 760px) {
    #nav-toggle {
      display: block;
    }

    .nav-wrapper {
      display: none;
      background-color: var(--background-extra-light);
      flex-direction: column;
      position: absolute;
      top: 0;
      right: 0;

      padding-top: 7rem;
      padding-bottom: 2rem;
      padding-inline: 1rem;
      box-shadow: var(--text-brand-titles);
      opacity: 99%;
    }

    .nav-bar {
      ul {
        flex-direction: column;
      }
    }

    [aria-expanded="true"] ~ .nav-wrapper {
      display: flex;
    }
  }

  .hero-main {
    background-image:
      linear-gradient(hsla(60, 20%, 95%, 65%) 0%, hsla(60, 20%, 85%, 90%) 90%),
      url(/assets/images/hero-background.webp);
    background-size: cover;
    background-position: center;
    /* min-height: calc(100vh - 110px); */
    text-align: center;
  }

  .hero-blog {
    svg {
      fill-rule: evenodd;
      clip-rule: evenodd;
      stroke-linejoin: round;
      stroke-miterlimit: 2;
      fill-opacity: 1;

      width: 25px;
      color: var(--background-brand-accent);
    }

    .blog-illustration {
      display: flex;
      justify-content: space-between;
      align-items: baseline;

      border-bottom: 1px dotted var(--background-brand-accent);
      padding-bottom: 1rem;

      p {
        font-family: var(--font-title);
        font-style: italic;
        font-weight: 300;
        font-size: var(--font-size-lg);
        color: var(--background-brand-accent);
      }
    }
  }

  .hero-cta {
    padding-block-start: 5%;

    @media (width < 760px) {
      display: flex;
      gap: 1rem;
    }
  }

  .title-style {
    font-size: var(--font-size-heading-xl);
    font-style: italic;
    font-weight: 300;
    letter-spacing: -2px;
    margin-block: 1rem;

    @media (width < 760px) {
      font-size: var(--font-size-heading-lg);
    }
  }

  .title-style--accent {
    color: var(--background-brand-accent);
    display: block;
  }

  .hero-subtitle {
    font-size: var(--font-size-lg);
    font-weight: 100;
    text-wrap: balance;
    padding-top: 1rem;
  }

  .section-title {
    font-size: var(--font-size-heading-regular);
    font-weight: 300;

    line-height: 1.2;
    letter-spacing: -2px;

    padding-bottom: 1rem;

    @media (width > 760px) {
      text-align: left;
    }
  }

  .section-title--small {
    font-style: italic;
    font-size: var(--font-size-heading-sm);
    font-weight: 300;
  }

  .section-subtitle {
    font-size: var(--font-size-lg);
    font-style: italic;
    font-weight: 100;
  }

  .profile {
    h2 span {
      font-style: italic;
      color: var(--background-brand-accent);
      display: block;
    }

    p {
      max-width: 38em;
    }
  }

  .section-image {
    border-radius: var(--border-radius-1);
    margin-block: auto;

    @media (width > 760px) {
      max-height: 80vh;
    }
  }

  .brands {
    overflow: hidden;
  }

  .logos-banner {
    display: flex;
    gap: 7.5rem;
    margin-top: 2rem;
    margin-inline: 7.5rem;

    opacity: 80%;

    img {
      width: var(--logos-width, 200px);

      @media (width > 1280px) {
        --logos-width: 300px;
      }
    }

    animation: scroll 5s linear infinite;

    @media (width > 760px) {
      animation: scroll 30s linear infinite;
    }
  }

  .logos-banner:hover {
    animation-play-state: paused;
  }

  @keyframes scroll {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0%);
    }
  }

  .cta {
    padding: 0.75rem 2.25rem;
    border-radius: var(--border-radius-1);
    text-transform: uppercase;
    font-size: var(--font-size-xsm);
    letter-spacing: 1px;

    background-color: var(--button-background, var(--background-brand-accent));
    color: var(--button-text-color, white);
  }

  .cta--secondary {
    --button-background: none;
    --button-text-color: var(--text-main);
    border: 1px solid var(--clr-light-grey);
  }

  .cta-banner {
    text-align: center;

    p {
      font-size: var(--font-size-md);
      font-weight: 100;
      text-wrap: balance;
    }
  }

  .top-tag {
    text-transform: uppercase;
    font-size: var(--font-size-xsm);
    color: var(--background-brand-accent);
    letter-spacing: 4px;
  }

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

    gap: 0.75rem;
    padding: 1.5rem 2rem;

    background-color: white;
    border-radius: var(--border-radius-1);

    & > * {
      color: var(--background-brand-accent);
    }

    h3 {
      font-style: normal;
      text-wrap: pretty;
      line-height: 1.4;
    }

    h3::before {
      content: "";
      display: block;
      position: relative;
      width: 50px;
      height: 1px;
      background-color: var(--background-brand-accent);
      margin-bottom: 15px;
    }

    p {
      font-size: var(--font-size-xsm);
    }

    li {
      opacity: 70%;
    }
  }

  .reference-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;

    .reference-info {
      border-top: 1px solid hsl(24, 5%, 64%, 30%);
      padding-top: 1rem;
      p {
        text-transform: uppercase;
        font-size: var(--font-size-xsm);
        color: var(--text-tags);
      }
    }
  }

  .reference-extra {
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
  }

  .bento-gallery {
    display: grid;
    gap: 1rem;
    grid-template-areas:
      "one"
      "two"
      "three"
      "four";

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--border-radius-1);
    }

    img:nth-child(1) {
      grid-area: one;
    }

    img:nth-child(2) {
      grid-area: two;
    }

    img:nth-child(3) {
      grid-area: three;
    }

    img:nth-child(4) {
      grid-area: four;
    }

    @media (width > 600px) {
      grid-template-areas:
        "one  two   two"
        "one  three four";
    }
  }

  .article-card {
    &,
    div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1rem;
    }

    background-color: var(--background-extra-light);
    padding: 0.5rem;
    border-radius: var(--border-radius-5);

    .article-image {
      border-radius: var(--border-radius-1);
      height: 325px;
      object-fit: cover;
      object-position: top;
    }

    .card-body {
      display: grid;
      gap: 0.5rem;
    }

    .card-tag {
      font-size: var(--font-size-xsm);
      text-transform: uppercase;
      color: var(--background-brand-accent);
    }

    h3 {
      font-size: var(--font-size-heading-sm);
      text-wrap: pretty;
      text-transform: capitalize;
    }

    .article-more {
      display: flex;
      gap: 0.5rem;

      text-transform: uppercase;
      font-size: var(--font-size-sm);
      font-weight: normal;
      color: var(--background-brand-accent);
    }
  }

  .cv {
    .jobs-list {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }
  }

  .job-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .job-date {
      font-size: var(--font-size-lg);
      font-style: italic;
      color: var(--background-brand-accent);
      font-weight: normal;
    }

    .job-description {
      margin-left: 1rem;
    }

    .job-place {
      font-size: var(--font-size-heading-sm);
      font-weight: 100;
    }

    .job-title {
      margin-top: 0.25rem;
      text-transform: uppercase;
      font-size: var(--font-size-sm);
      color: var(--text-secondary-subtitles);
    }
  }

  .article-text {
    p {
      max-width: 58em;
    }
  }

  .article-title {
    font-size: var(--font-size-lg);
    font-weight: 500;
  }

  .article-subtitle {
    font-size: var(--font-size-md);
    font-weight: 400;
  }

  .article-highlight {
    font-style: italic;
    font-weight: 400;
  }

  #contact-form {
    display: grid;
    gap: 2rem;

    @media (width > 1280px) {
      padding-inline: 20rem;
    }

    .form-group {
      display: grid;
      gap: 1rem;

      label:last-child {
        display: none;
        color: red;
      }
    }

    label {
      text-transform: uppercase;
      font-size: var(--font-size-xsm);
      color: var(--text-secondary-subtitles);
      letter-spacing: 4px;
      font-weight: 300;
    }

    input,
    textarea {
      background-color: transparent;
      border: none;
      border-bottom: 1px solid var(--background-brand-accent);

      font-size: var(--font-size-sm);

      /* Inputs have a min-width set by default */
      /* Inputs inside a grid, with this property, asigns 100% to self and takes the whole space of the container  */
      width: 100%;
    }

    input:focus-visible,
    textarea:focus-visible {
      border-bottom: none;
      outline: 2px solid var(--background-brand-accent);
      border-radius: var(--border-radius-1);
    }

    button:disabled {
      background-color: var(--clr-grey);
    }

    #form-result {
      margin-top: 0.5rem;

      p.sucess {
        color: green;
      }

      p.error {
        color: red;
      }
    }
  }

  #contact-form.was-validated input:invalid ~ .empty-input {
    display: block;
  }

  #contact-form.was-validated textarea:invalid ~ .empty-input {
    display: block;
  }

  footer {
    background-color: var(--background-elements-light);

    h2 {
      font-style: italic;
      font-weight: 300;
    }

    p {
      font-size: var(--font-size-xsm);
      text-transform: uppercase;
      color: var(--text-tags);
    }
  }
}

@layer utilities {
  [hidden] {
    display: none;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .title-highlight {
    color: var(--text-brand);
  }

  .emphasize-text {
    font-weight: 400;
  }

  .skip-to-main:not(:focus) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .white-background {
    background-color: var(--background-extra-light);
  }
}