@import url("./ui.search.css");

/* Announcement Bar */
[layout="announcement-bar"] {
  display: flex;
  justify-content: center;
  padding-block: var(--spacing-10);
  border-radius: var(--radius-md);
  width: calc(100vw - var(--spacing-24));
  color: var(--color-on-theme);
  background-color: var(--color-theme);
}
[layout="announcement-bar"] .marquee-container {
    width: 50%;
    overflow: hidden;
    position: relative;
  }
:is([layout="announcement-bar"] .marquee-container)::before,:is([layout="announcement-bar"] .marquee-container)::after {
      content: "";
      z-index: 2;
      width: 10%;
      height: 100%;
      position: absolute;
      background: linear-gradient(to right, var(--color-theme), transparent);
    }
:is([layout="announcement-bar"] .marquee-container)::after {
      inset-block-end: 0;
      inset-inline-end: 0;
      background: linear-gradient(to left, var(--color-theme), transparent);
    }
:is([layout="announcement-bar"] .marquee-container):dir(rtl)::before,:is([layout="announcement-bar"] .marquee-container):dir(rtl)::after {
        rotate: 180deg;
      }
:is([layout="announcement-bar"] .marquee-container) .marquee {
      --scroll-direction: -50%;

      display: flex;
      width: fit-content;
      animation: scroll-start linear infinite;
    }
[data-speed="normal"]:is(:is([layout="announcement-bar"] .marquee-container) .marquee) {
        animation-duration: 15s;
      }
[data-speed="slow"]:is(:is([layout="announcement-bar"] .marquee-container) .marquee) {
        animation-duration: 30s;
      }
:is(:is([layout="announcement-bar"] .marquee-container) .marquee):dir(rtl) {
        --scroll-direction: 50%;
      }
:is([layout="announcement-bar"] .marquee-container) .bar-wrapper {
      display: flex;
    }
:is(:is([layout="announcement-bar"] .marquee-container) .bar-wrapper) li {
        white-space: nowrap;
        padding-inline: var(--spacing-16);
      }

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

/* Header */
[layout="header"] {
  min-height: 56px;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
}
[layout="header"][data-logo-position="left"] {
    display: flex;
    align-items: center;
  }
[layout="header"][data-logo-position="left"] .logo {
      order: -1;
    }
[layout="header"][data-logo-position="left"] .actions {
      flex: 2;
    }
[layout="header"][data-logo-position="center"] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
[layout="header"][data-logo-position="center"] .logo {
      display: flex;
      align-items: center;
      justify-content: center;
    }
:is([layout="header"] .logo) img {
      object-fit: cover;
    }
:is([layout="header"] .logo) a {
      font: var(--font-body-md);
      text-transform: uppercase;
      font-weight: bold;
      color: var(--color-on-background);
    }
[layout="header"] .links {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
  }
:is(:is([layout="header"] .links) .link) a {
        color: var(--color-on-background);
      }
[layout="header"] .actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    justify-content: flex-end;
  }
:is([layout="header"] .actions) .action {
      border: none;
      cursor: pointer;
      background-color: transparent;
      color: var(--color-on-background);
      display: flex;
      align-items: center;
      outline-offset: 1px;
      outline: 2px solid transparent;
    }
:is(:is([layout="header"] .actions) .action):focus-visible {
        outline-color: var(--color-on-background);
      }
:is([layout="header"] .actions) > li:last-child {
      display: none;
    }
[layout="header"][data-sticky] {
    border-end-end-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
    background-color: var(--color-background);
  }

#youcan-section--header:has([layout="header"][data-sticky]) {
  z-index: 50;
  position: sticky;
  inset-block-start: var(--spacing-0);
}

/* Footer */
[layout="footer"] {
  margin-block-start: var(--spacing-12);

  display: flex;
  gap: var(--spacing-24);
  justify-content: space-between;
  padding: var(--spacing-64);
  border-radius: var(--radius-md);
  color: var(--color-on-theme);
  background-color: var(--color-theme);
}
[layout="footer"] .general {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
:is([layout="footer"] .general) .store {
      display: grid;
      gap: var(--spacing-16);
    }
:is(:is([layout="footer"] .general) .store) .logo {
        color: inherit;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: var(--spacing-6);
        font-weight: bold;
        text-transform: uppercase;
      }
:is(:is(:is([layout="footer"] .general) .store) .logo) img {
          object-fit: cover;
        }
:is(:is([layout="footer"] .general) .store) .bio {
        opacity: 0.8;
        text-wrap: balance;
      }
:is(:is([layout="footer"] .general) .copyright) a {
        color: inherit;
      }
[layout="footer"] .links {
    display: flex;
    gap: var(--spacing-48);
    margin-block-end: var(--spacing-24);
  }
:is([layout="footer"] .links) .links-box {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-24);
    }
:is(:is([layout="footer"] .links) .links-box) span {
        font: var(--font-body-lg);
      }
:is(:is([layout="footer"] .links) .links-box) ul {
        display: grid;
        gap: var(--spacing-16);
      }
:is(:is(:is([layout="footer"] .links) .links-box) ul) li {
          text-transform: capitalize;
        }
:is(:is(:is(:is([layout="footer"] .links) .links-box) ul) li) a {
            opacity: 0.8;
            color: inherit;
          }
:is(:is(:is(:is(:is([layout="footer"] .links) .links-box) ul) li) a)::before {
              background-color: var(--color-on-theme);
            }

/* Responsive */
@media (max-width: 1280px) {
  [layout="footer"] {
    flex-direction: column-reverse;
  }

    [layout="footer"] .general {
      gap: var(--spacing-24);
    }

    [layout="footer"] .links {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 769px) {
    [layout="announcement-bar"] .marquee-container {
      width: 100%;
    }

  [layout="header"] {
    display: flex !important;
  }

    [layout="header"] .logo {
      order: -1;
    }
      :is([layout="header"] .links) li {
        display: none;
      }

    [layout="header"] .actions {
      flex: 2;
    }

      :is([layout="header"] .actions) > li:last-child {
        display: flex;
      }

  [layout="footer"] {
    gap: var(--spacing-48);
    padding: var(--spacing-48);
  }

    [layout="footer"] .general {
      gap: var(--spacing-48);
    }

    [layout="footer"] .links {
      margin: 0;
      grid-template-columns: 1fr;
    }
}