/* AUTO-GENERERET af build-css.js — ret IKKE denne fil direkte.
   Ret kilderne i css/components/ og kør `node build-css.js` igen. */

/* ── navbar.css ── */
/* ── Navbar styles ── */

#header {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 0.3s ease;
  visibility: hidden;

  &.header-ready {
    visibility: visible;
  }

  &.hidden {
    transform: translateY(-100%);
  }

  .nav {
    display: flex;
    justify-content: space-between;
    height: 50px;
    padding: 1rem;
    box-sizing: content-box;


    .site-logo {
      display: flex;
      font-family: "Open Sans", sans-serif;
      font-weight: 700;
      font-size: 22px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      align-items: center;
      Text-decoration: none;

      .logo {
        padding: 0.5rem;
        background-color: var(--accent);
        clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
        color: white;
      }

      .subtitle {
        padding: 0.5rem;
        color: var(--muted);
      }
    }

    .navigation {
      display: flex;
      align-items: center;

      #nav-menu-checkbox {
        display: none;
      }

      .nav-links-wrapper {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        list-style-type: none;

        .nav-item {

          a {
            display: flex;
            align-items: center;
            gap: .2rem;
          }

          a::before {
            content: "";
            mask-repeat: no-repeat;
            mask-size: contain;
            background-color: var(--muted);
            display: block;
            width: 20px;
            height: 20px;
          }

          a:hover {
            color: var(--accent);

            &::before {

              background-color: var(--accent);

            }
          }


        }


        .nav-item-home a::before {
          mask-image: url(/assets/images/home.svg);
        }

        .nav-item-cars a::before {
          mask-image: url(/assets/images/directions_car.svg);
        }

        .nav-item-saved a::before {
          mask-image: url(/assets/images/favorite.svg);
        }

        .nav-item-search a::before {
          mask-image: url(/assets/images/magnifying-glass.svg);
        }

        .nav-item-brands a::before {
          mask-image: url(/assets/images/shield_with_house.svg);
        }

        .nav-item-about a::before {
          mask-image: url(/assets/images/info.svg);
        }

        .nav-item-contact a::before {
          mask-image: url(/assets/images/forward_to_inbox.svg);
        }

        a {
          font-family: "Open Sans", sans-serif;
          font-size: 15px;
          font-weight: 600;
          letter-spacing: 0.08em;
          color: var(--muted);
          text-decoration: none;
          padding: 8px;
          border-radius: 8px;

          &:hover {
            background-color: hsl(0deg 0% 90%);
          }



        }
      }
    }
  }

  .nav-filter {
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
    font-size: 16px;
    background-color: var(--bg);
    border-top: 1px solid var(--border);
    padding: 0.2rem 0;

    &::after {
      content: "";
      background: linear-gradient(to left, var(--bg), transparent 100%);
      width: 50px;
      height: 25px;
      position: absolute;
      right: 0;
      text-align: right;
    }

    .filter-tag {
      display: grid;
      place-content: center;
      padding: 0 1rem;
      margin-right: 1rem;
      border-right: 1px black solid;

      font-family: "Open Sans", sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--muted);

    }

    .filter-list {
      margin: 0;
      padding: 0;
      display: flex;

      list-style: none;

      .filter-item {
        display: flex;
        align-items: center;
        width: max-content;
        text-transform: capitalize;
        padding: 4px 12px;
        cursor: pointer;
        font-family: "Open Sans", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);



        .filter-name {
          text-decoration: none;
        }

        .filter-count {
          display: flex;
          flex-wrap: wrap;
          background-color: var(--border);
          color: var(--muted);
          font-family: "Open Sans", sans-serif;
          font-size: 9px;
          padding: 1px 5px;
          place-content: center;
          border-radius: 3px;
          letter-spacing: 0.04em;
          margin-left: 4px;
        }
      }
    }
  }
}

@media (max-width: 835px) {
  #header {
    .nav {
      position: relative;

      .navigation {
        box-sizing: border-box;

        width: 100%;
        display: flex;
        justify-content: right;

        #nav-menu-checkbox:checked~.nav-links-wrapper {
          display: grid;
        }

        #nav-menu-checkbox:checked~.label-nav-menu-checkbox span:nth-child(1) {
          opacity: 0;
        }

        #nav-menu-checkbox:checked~.label-nav-menu-checkbox span:nth-child(2) {
          transform-origin: center left;
          transform: translate(15%, -238%) rotate(45deg);
        }

        #nav-menu-checkbox:checked~.label-nav-menu-checkbox span:nth-child(3) {
          transform-origin: center right;
          transform: translate(-15%, -460%) rotate(-45deg);
        }

        .nav-links-wrapper {
          position: absolute;
          background-color: var(--bg);
          display: none;
          top: 100%;
          right: 0;
          width: 100%;
          box-sizing: border-box;

          &:after {
            content: "";
            width: 100%;
            background-color: inherit;
            height: 100dvh;
          }

          li {
            border-top: 1px solid var(--border);
            padding: 0.5rem 1rem;

            a {
              display: block;
              width: 100%;
              font-size: 20px;

              box-sizing: border-box;
            }
          }
        }

        .label-nav-menu-checkbox {
          display: flex;
          flex-direction: column;
          height: 100%;
          aspect-ratio: 1;
          justify-content: space-around;


          padding: 0.5rem;
          box-sizing: border-box;

          span {
            background-color: var(--muted);
            width: 100%;
            height: 15%;
            border-radius: 100vw;
            transition-duration: 0.5s;
          }
        }
      }
    }
  }
}


.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  .user-icon {
    width: 22px;
    height: 22px;
    display: block;



  }

}

/* ── footer.css ── */
/* footer styles */

#footer {
  display: flex;
  gap: 1rem;
  padding: .5rem;
  visibility: hidden;
}

/* Vises først når indhold er loadet (undgår layout shift) */
#footer.footer-ready {
  visibility: visible;
}

/* ── searchBar.css ── */
/* Add your search CSS here */


.search-wrapper {
  display: flex;
  border: 1px solid var(--accent);
  padding: 1rem 1.5rem;
  border-radius: 16px;
  position: relative;
  background-color: var(--header-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.07);

  .search-input {
    width: 100%;
    border: none;
    padding-left: 0.5rem;
    font-size: 1rem;
    background: transparent;

    &:focus {
      outline: none;
    }
  }

  #search-button {
    -webkit-mask-image: url(/assets/images/magnifying-glass.svg);
    mask-image: url(/assets/images/magnifying-glass.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: var(--accent);
    width: 20px;
    height: 20px;
  }

  .search-dropdown.active {
    display: grid;
    z-index: 100;
  }

  .search-dropdown {
    position: absolute;
    top: 75px;
    left: 0;
    background-color: var(--header-bg);
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.07);
    border-radius: 1rem;
    display: none;
    border: 1px solid var(--border);
    overflow: hidden;

    .section-head {
      background-color: var(--bg);
      padding: 0.5rem 2rem;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .search-no-results {
      padding: 1rem;
      display: flex;

      .error-icon {
        mask-image: url(/assets/images/error-icon.svg);
      }
    }

    .search-result-item {
      border-bottom: 1px solid var(--border);

      &:hover {
        border-bottom: 1px solid var(--accent);
        background-color: var(--accent-hover);
      }

      .search-result-link {
        display: grid;
        grid-template-columns: 40px 1fr auto;
        align-items: center;
        gap: 0 12px;
        padding: 9px 14px;
        text-decoration: none;
        color: var(--text);

        .image-container {
          margin: 0;
          width: 40px;
          height: 40px;
          display: block;
          background-color: red;
          mask-repeat: no-repeat;
          mask-size: 80%;
          mask-position: center;
        }

        .image-car {
          mask-image: url(/assets/images/directions_car.svg);
        }

        .image-brand {
          mask-image: url(/assets/images/shield_with_house.svg);
        }

        .search-item-content {
          display: grid;

          .search-item-title {
            text-transform: capitalize;
            color: var(--text);
            font-size: 1rem;
          }

          .search-item-subtitle {
            font-size: 12px;
            text-transform: capitalize;
            color: var(--muted);
          }
        }
      }
    }
  }
}

/* ── carFilters.css ── */
/* filter styles */

/* ── carCard.css ── */
/* Add your carCard CSS here */

.car-card {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  overflow: hidden;
  font-family: var(--font-sans);
  position: relative;
  max-width: 400px;
  min-width: 295px;
  height: min-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.07);

  container-type: inline-size;
  container-name: card;

  transition-duration: .3s;
  transition-property: border;

  a {
    text-decoration: none;
  }

  .card-header {
    position: relative;

    .card-image::before {
      content: "";
      position: absolute;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
      bottom: 0;
      left: 0;
      right: 0;
    }

    .car-image::before {
      padding: 2rem;
    }

    .brand-image::before {
      padding: 3rem;
    }

    .car-image img {
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 16/9;
      display: block;
    }

    .brand-image img {
      width: 100%;
      height: auto;
      object-fit: cover;
      aspect-ratio: 1;
      display: block;
    }
  }

  .card-img-overlay {

    &:has(.card-info-icon:hover) .card-description,
    &:has(.card-info-icon:focus) .card-description {
      opacity: 1;
      pointer-events: auto;
      z-index: 9;
    }
  }

  .card-info-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    background: rgb(0 0 0 / 35%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    font-family: var(--mono);
    font-weight: 700;
    position: absolute;
    right: 0;
    bottom: 0px;
    margin: 0.5rem;
    z-index: 10;
    transition: scale .3s ease;







    .save-icon {
      width: 20px;
      height: 20px;
      display: block;
      background-color: var(--car-color);
      -webkit-mask: url(/assets/images/heart_plus.svg) center / contain no-repeat;
      mask: url(/assets/images/heart_plus.svg) center / contain no-repeat;



    }

    &.saved .save-icon {
      -webkit-mask-image: url(/assets/images/heart_minus.svg);
      mask-image: url(/assets/images/heart_minus.svg);
    }
  }

  .card-brand-logo {
    width: 3rem;
    height: 3rem;
    overflow: hidden;

    img {
      width: 100%;
      aspect-ratio: 1;
    }
  }

  .card-info {
    position: absolute;
    z-index: 10;
    bottom: 0px;
    left: 0;
    padding: 0.5rem;
    pointer-events: none;
  }

  .card-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    pointer-events: auto;
  }

  .card-subtitle {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--mono);
    pointer-events: auto;

    a {
      color: var(--car-color);
    }

    width:max-content;

    a:hover {
      text-decoration: underline;
    }
  }



  .brand-description {
    aspect-ratio: 1;
  }

  @container card (max-width: 325px) {
    .card-description {
      font-size: 12px;
    }
  }

  .core-specs {
    display: flex;
    border-bottom: 1px solid var(--border);

    span {
      font-size: 15px;
      font-family: var(--mono);
      font-weight: 700;
      color: var(--text);
      display: block;
    }

    div {
      font-size: 9px;
      font-family: var(--mono);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      display: block;
      margin-top: 1px;
    }

    .core-spec {
      flex: 1;
      text-align: center;
      padding: 10px 4px;
      border-right: 1px solid var(--border);

      &:last-child {
        border-right: none;
      }
    }
  }

  .general-specs {
    display: grid;
    grid-template-columns: max-content auto;

    * {
      padding: 8px 18px;
      border-bottom: 1px solid var(--card-specs-border);
      text-transform: capitalize;
    }

    strong {
      color: var(--card-specs-text-muted);
      font-family: "Open Sans", sans-serif;
      font-size: 0.7rem;
      border-right: 1px solid var(--card-specs-border);
    }

    p {
      margin: 0;
      font-family: "Open Sans", sans-serif;
      font-size: 0.9rem;
    }
  }

  .card-footer {
    display: flex;
    padding: 8px 18px;
    gap: 0.5rem;
    background-color: var(--card-specs-header-background-color);

    * {
      padding: 3px 8px;
      border: 1px solid var(--card-specs-border);
      border-radius: 4px;
      font-size: 0.8rem;
      text-transform: capitalize;
      color: var(--card-specs-text-muted);
      font-weight: bold;
    }
  }
}

/* ── brandCard.css ── */
/* brand card styles */
.brand-card {
  position: relative;
  display: grid;
  grid-template:
    "brand-logo brand-logo"
    "brand-title card-info-icon"
    "brand-subtitle card-info-icon"
    "brand-car-count brand-car-count";
  gap: 0.5rem;
  width: 100%;
  max-width: 400px;
  min-width: 295px;
  justify-content: space-between;
  border: 1px solid var(--border);
  padding: 2rem;
  padding-bottom: 1.5rem;
  box-sizing: border-box;
  text-transform: capitalize;
  box-shadow: var(--shadow);
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--header-bg);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;

  .brand-logo-wrapper {
    grid-area: brand-logo;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: transform 0.25s ease;

    .brand-logo {
      border: 2px solid var(--accent);
      border-radius: 100vw;
      display: grid;
      place-content: center;
      width: min-content;
      height: min-content;
      overflow: hidden;
      transition: right 0.5s ease;

      img {
        width: 50px;
        display: block;
        padding: 0.5rem;
        aspect-ratio: 1;
        object-fit: cover;
      }
    }
  }

  .brand-title {
    grid-area: brand-title;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    text-decoration: none;
  }

  .brand-subtitle {
    grid-area: brand-subtitle;
    display: flex;
    gap: 0.4rem;

    a {
      text-decoration: none;
      color: var(--muted);

      &:hover {
        text-decoration: underline;
        color: var(--accent);
      }
    }
  }

  .card-info-icon {
    grid-area: card-info-icon;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    background: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    font-family: var(--mono);
    font-weight: 700;
    z-index: 10;
    text-transform: lowercase;
    margin-top: auto;
  }

  .card-description {
    position: absolute;
    top: 0;
    bottom: 70px;
    left: 0;
    right: 75px;
    background-color: var(--header-bg);

    /*background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      hsl(0deg 0% 0% / 85%) 20%
    );*/
    color: var(--text);
    padding: 12px 12px 0px;
    box-sizing: border-box;
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.25s ease;
    font-size: 16px;
    line-height: 1.3;
  }

  &:has(.card-info-icon:hover),
  &:has(.card-info-icon:focus) {
    .brand-logo-wrapper {
      transform: translateX(calc(50% - 1rem));
    }

    .card-description {
      opacity: 1;
      pointer-events: auto;
      z-index: 9;
    }
  }

  .brand-car-count {
    grid-area: brand-car-count;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border);

    span {
      color: var(--muted);


    }

    .number {
      text-align: center;
      width: max-content;
      height: max-content;
      border-radius: 14px;
      color: var(--text);
      font-weight: 700;
      aspect-ratio: 1;
      display: grid;
      align-items: center;

    }
  }
}

/* ── gridLayouts.css ── */
/* Add your grid layout CSS here */
.grid-wrapper {
  container-type: inline-size;
}

.grid-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 2rem;
  height: min-content;
  justify-items: center;

}

@container (min-width: 700px) {
  .grid-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 1030px) {
  .grid-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container (min-width: 1350px) {
  .grid-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── bounce-animation.css ── */
.bounce-animation {
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(0.9);
  }

  /* anticipation squash */
  45% {
    transform: scale(1.5);
  }

  /* full pop */
  62% {
    transform: scale(1.1);
  }

  /* rebound under the peak */
  78% {
    transform: scale(1.18);
  }

  /* small secondary bounce */
  90% {
    transform: scale(0.98);
  }

  /* settle slightly under 1 */
  100% {
    transform: scale(1);
  }

}