/* SPDX-License-Identifier: Apache-2.0 */
@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/_app-ui/fonts/material-symbols-outlined.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
}

.material-symbol {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 500;
  font-feature-settings: "liga";
  font-variant-ligatures: normal;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

article[aria-labelledby="aphrody-home-title"] {
  color-scheme: light;
  background: Canvas;
  color: CanvasText;
  font-family: var(--aphrody-font-plain);
}

article[aria-labelledby="aphrody-home-title"] > section:first-of-type {
  max-width: 48rem;
  padding-block: clamp(3rem, 9vh, 7rem);
}

#aphrody-home-title {
  color: CanvasText;
  font-family: var(--aphrody-font-brand);
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1.15;
}

article[aria-labelledby="aphrody-home-title"] :is(p, .material-symbol) {
  color: inherit;
}

article[aria-labelledby="aphrody-home-title"] form > div:first-of-type {
  min-height: 3.5rem;
  border: 1px solid color-mix(in srgb, CanvasText 22%, Canvas);
  border-radius: var(--md-sys-shape-corner-full);
  background: Canvas;
  box-shadow: none;
}

article[aria-labelledby="aphrody-home-title"] form > div:first-of-type:focus-within {
  border-color: LinkText;
  box-shadow: 0 1px 6px color-mix(in srgb, CanvasText 20%, transparent);
}

#aphrody-home-search {
  color: CanvasText;
  font-family: var(--aphrody-font-plain);
  min-width: 0;
}

#aphrody-home-search::placeholder {
  color: color-mix(in srgb, CanvasText 65%, Canvas);
}

article[aria-labelledby="aphrody-home-title"] form :is(button, a) {
  min-height: 3rem;
  border-radius: var(--md-sys-shape-corner-small);
  background: color-mix(in srgb, CanvasText 4%, Canvas);
  color: CanvasText;
  box-shadow: none;
}

article[aria-labelledby="aphrody-home-title"] form > div:first-of-type > button {
  border-radius: var(--md-sys-shape-corner-full);
  background: Canvas;
}

#root article[aria-labelledby="aphrody-home-title"] :is(a, button, input, summary):focus-visible {
  outline: 3px solid LinkText;
  outline-offset: 3px;
}

article[aria-labelledby="aphrody-home-title"] a {
  color: LinkText;
  text-underline-offset: 0.15em;
}

article[aria-labelledby="aphrody-home-title"] [aria-live] {
  overflow-wrap: anywhere;
}

article[aria-labelledby="aphrody-home-title"] [role="alert"] {
  border: 1px solid var(--md-sys-color-error);
  background: Canvas;
  color: CanvasText;
}

article[aria-labelledby="aphrody-home-title"] footer {
  background: color-mix(in srgb, CanvasText 4%, Canvas);
  color: CanvasText;
}

@media (forced-colors: active) {
  article[aria-labelledby="aphrody-home-title"] form > div:first-of-type {
    border-color: CanvasText;
  }
  #root article[aria-labelledby="aphrody-home-title"] :is(a, button, input, summary):focus-visible {
    outline-color: Highlight;
  }
}