@import url('fonts/icons.css');
@import url('fonts/quicksand.css');

@import url('fragments/cookie-notice.css');
@import url('fragments/designer.css');
@import url('fragments/contact.css');
@import url('fragments/woods.css');
@import url('fragments/gallery.css');
@import url('fragments/showroom.css');
@import url('fragments/country-select.css');
@import url('fragments/credits.css');
@import url('fragments/data.css');
@import url('fragments/expandable.css');
@import url('fragments/faq-category.css');
@import url('fragments/faq-question.css');
@import url('fragments/faq.css');
@import url('fragments/footer.css');
@import url('fragments/guitar-list-entry.css');
@import url('fragments/guitar-list.css');
@import url('fragments/guitar.css');
@import url('fragments/head-section.css');
@import url('fragments/header.css');

@import url('fragments/hero.css');
@import url('fragments/landing.css');
@import url('fragments/language-select.css');
@import url('fragments/legal.css');
@import url('fragments/list.css');
@import url('fragments/location.css');
@import url('fragments/map.css');
@import url('fragments/musicians.css');
@import url('fragments/nav.css');
@import url('fragments/privacy-policy.css');
@import url('fragments/retailer-list-entry.css');
@import url('fragments/retailers-list.css');
@import url('fragments/search-category.css');
@import url('fragments/search-filter.css');
@import url('fragments/search.css');
@import url('fragments/segmented-waves.css');
@import url('fragments/tooltip.css');
@import url('fragments/about.css');
@import url('fragments/news.css');
@import url('fragments/newsletter.css');
@import url('fragments/gallery-woods.css');
/* @import url('fragments/guitars/comparison.css'); */
@import url('fragments/guitars/specs.css');
@import url('fragments/guitars/preview.css');
@import url('fragments/guitars/reload.css');
@import url('fragments/guitars/registration.css');

@import url('fragments/newsletter/abo.css');
@import url('../fragments/downloads/downloads.css');

@import url('shared/fx.css');

@import url('../fragments/forms/events/register/index.css');
@import url('../fragments/forms/guitars/:id/buy/index.css');

@import url('../fragments/pages/tschabo/index.css');
@import url('../fragments/pages/blog/blog.css');

@import url('../fragments/guitarhelp.eu/pages/services/index.css');
@import url('../fragments/guitarhelp.eu/pages/services/repair/index.css');
@import url('../fragments/guitarhelp.eu/pages/forms/repair/index.css');
@import url('../fragments/guitarhelp.eu/pages/gallery/index.css');
@import url('../fragments/guitarhelp.eu/pages/home/index.css');
@import url('../fragments/guitarhelp.eu/pages/how-to/repairing.css');
@import url('../fragments/guitarhelp.eu/sections/how-to/repairing.css');

@import url('../fragments/warranty/index.css');
@import url('../fragments/url-hint/index.css');

/* themes */
/* @import url('fragments/light-mode.css');  */
@import url('fragments/high-contrast-mode.css');
@import url('fragments/reduced-transparency.css');

:where(:root) {
  scroll-behavior: smooth;

  --duration-animation: 1s;
  --duration-transition: .25s;
  --border-radius: 0.5rem;
  --gallery-gap: 2rem;
  --border-width: 0;
  --border-color: transparent;
  --page-background-light: rgb(255, 255, 255);
  --page-max-width: 2200px;
  --page-space: 6rem;
  --page-padding: max(var(--page-space), (100vw - 2200px) / 2);
  --p-line-height: 1.75;
  --p-margin: 1em;
  --font-family: Quicksand;
  --font-color-alternate: rgb(255, 255, 255);
  --c2: #5f9f59;

  --color-secondary: rgb(155, 157, 11);
  --color-error: rgb(255, 0, 0);
  --color-warning: rgb(255, 140, 0);
  --color-success: rgb(176, 225, 50);

  --gold: linear-gradient(90deg, #ffeb99, #d4af37);
}

@media (min-width: 2000px) {
  :root {
    font-size: 1.0625rem;
  }
}

@media (max-width: 1500px) {
  :root {
    font-size: 0.9375rem;
  }
}

@media (max-height: 600px) {
  :root {
    font-size: 0.875rem;
  }
}

img {
  transition: opacity 0.25s;
  opacity: 0;
}

img.--loaded {
  opacity: 1;
}

section video {
  position: absolute;
  object-fit: cover;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.iframes.youtube {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
  gap: 2rem;

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }

  iframe {
    border-radius: var(--border-radius);
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

.left-fade::after,
.right-fade::after {
  content: '';
  display: block;
  background: linear-gradient(90deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

.bottom-fade::after {
  content: '';
  display: block;
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
}

.top-fade::before {
  content: '';
  display: block;
  background: linear-gradient(180deg,rgb(0, 0, 0) 0%,rgba(0, 0, 0, 0) 50%,rgba(0, 0, 0, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
}


.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}

i.vat {
  font-size: 0.75rem;
  margin-left: 0.5rem;
  opacity: 0.75;
}

.side-scroll {
  overflow: auto clip;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  &>* {
    scroll-snap-align: start;
  }

  &::-webkit-scrollbar {
    display: none;
  }

  .icon.chevron-right-solid,
  .icon.chevron-left-solid {
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 1rem;
    font-size: 2.5rem;
    display: none;
    align-items: center;
    z-index: 10;

    &.icon.chevron-left-solid {
      right: unset;
      left: 0;
    }
  }

  &.--overflow .icon.chevron-right-solid,
  &.--overflow .icon.chevron-left-solid {
    display: flex;
  }
}

:where(html, body) {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100dvh;
  overscroll-behavior-x: none
}

:where(body) {
  color: var(--font-color);
  font-family: var(--font-family);
  color-scheme: light dark;
  animation-duration: var(--duration-animation);
  transition-duration: var(--duration-transition);
  transition-property: none;
  background-attachment: fixed, fixed;
  background: var(--page-background);
}

:where(body),
:where(body) :where(*) {
  box-sizing: border-box;
  touch-action: manipulation
}

:where(body).--loading :where(*) {
  transition: none
}

.loader {
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: solid 2px currentColor;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: rotate 3s linear infinite;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.5s;

  &.--shown {
    transition: visibility 0s 0s, opacity 0.5s;
    visibility: visible;
    opacity: 1;
  }
}

:where(:where(body)) :where(h1) {
  font-size: 1.5rem;
}

:where(:where(body)) :where(h2) {
  font-size: 1.5rem;
}

:where(:where(body)) :where(h3) {
  font-size: 1.25rem;
}

:where(:where(body)) :where(h4) {
  font-size: var(--font-size)
}

:where(:where(body)) :where(h5) {
  font-size: var(--font-size)
}

:where(:where(body)) :where(h6) {
  font-size: var(--font-size)
}

:where(:where(body)) :where(h1),
:where(:where(body)) :where(h2),
:where(:where(body)) :where(h3),
:where(:where(body)) :where(h4),
:where(:where(body)) :where(h5),
:where(:where(body)) :where(h6) {
  margin: 1.5em 0 0
}

a {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  color: currentColor;

  &.icon {}

  text-decoration: none;
}

:where(:where(body)) :where([disabled]) {
  pointer-events: none;
  opacity: .5;
  user-select: none;
  -webkit-user-select: none
}

:where(:where(body)) :where(input, select, textarea) {
  background: var(--a);
  white-space: nowrap;
  border: none;
  border-radius: var(--border-radius);
  padding: .5rem 1rem;
  font-size: 1rem;
  height: 3rem;
  outline: none;
  color: currentColor;
  font-family: inherit;
}

:where(:where(body)) :where(input, select, textarea):focus-visible {
  outline: none
}

:where(:where(body)) :where(textarea) {
  resize: none
}

:where(:where(body)) :where(button) {
  background: var(--a);
  white-space: nowrap;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  outline: none;
  cursor: pointer;
  transition: transform calc(var(--duration-transition) / 2);
  background: var(--color-primary);
  color: var(--font-color-alternate);
  padding: 1rem 1.5rem;
}

:where(:where(body)) :where(button):focus-visible {
  outline: 1px solid yellow;
}

:where(:where(body)) :where(button):active {
  transform: scale(.95)
}

:where(:where(body)) :where(button).--secondary {
  background: var(--a);
  color: unset
}

:where(:where(body)) :where(button).--danger {
  background: var(--color-error)
}

@media screen and (max-width: 1200px) {
  :where(:root) {
    --page-space: 3rem
  }
}

@media (max-width: 640px) {
  :where(:root) {
    --page-space: 1.5rem
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-animation: 1ms;
    --duration-transition: 1ms
  }

  * {
    animation: none !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important
  }
}

body {
  --header-size: 5rem;
  --footer-size: 20rem;
  --primary-gradient: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary), black 50%) 100%);
  --_max-width: 1000px
}

body button, body .button {
  border-radius: var(--border-radius);
  background: var(--block-background);
  color: var(--color-primary);
  border-color: var(--a);
  color: #fff;
  background: var(--a);
}

body .button {
  padding: 0.75rem 1.5rem;
  border: solid 1px var(--c1);
  white-space: normal;
  display: inline-block;
  text-align: center;
}

body .--alternate {
  background: rgba(255, 255, 255, .1);
  border: solid 1px white;
  color: #fff
}

body>main {
  min-height: calc(100dvh - var(--header-size) - var(--footer-size) - .1rem);
}

body input {
  border-radius: var(--border-radius);
  background: var(--a)
}

body main>section {
  padding: 6rem var(--page-padding);
  /* Good padding? */
  display: grid;
  gap: 1rem;
  position: relative;
  isolation: isolate;

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }

  h1 {
    font-weight: 500;
    text-transform: uppercase;
    margin: 0
  }

  h1,
  h2 {
    line-height: 1.25;
    text-transform: uppercase;
  }

  >img,
  >picture>img,
  .section-box>img,
  .section-box>picture>img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2
  }

  .section-box {
    position: relative;
    border-radius: var(--border-radius);
    padding: 4rem;
    margin: 4rem 0 2rem 0;
    isolation: isolate;
    overflow: clip;

    @media (max-width: 640px) {
      padding: 1rem;

      .link {
        justify-content: center;
      }
    }

    h2:first-child {
      margin-top: 0;
    }

    p {
      max-width: 80ch;
    }

    .link {
      margin-top: 6rem;
    }
  }
}

body section.head-section,
body[data-path="/"] section,
body[data-path="/about"] section,
body[data-path="/services"] section,
body[data-path*="/forms"] section,
body[data-path*="/events"] section,
body[data-path*="/buy"] section {

  h1,
  h2 {
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    position: relative;
    max-width: 42ch;

    &::after {
      content: '';
      height: 3px;
      border-radius: 1.5px;
      background: color-mix(in srgb, currentColor, transparent 50%);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 4rem;
    }
  }

}

body section p {
  max-width: var(--_max-width);
  white-space: pre-line;
  line-height: 1.75;
  margin: 0;
}

body section>strong {
  line-height: 1.75;
}

body section a {
  font-weight: 700
}

details>summary {
  list-style: none;
}

details>summary::marker,
details>summary::-webkit-details-marker {
  display: none;
}

details::details-content {
  display: block;
  block-size: 0;
  overflow: hidden;
  transition-property: block-size, content-visibility;
  transition-duration: 0.5s;
  transition-behavior: allow-discrete;
}

details[open]::details-content {
  block-size: auto;
  block-size: calc-size(auto, size);
}

span.explainer-text {

  span {
    display: block;
    opacity: .75;
    margin-bottom: .25rem;
    font-weight: normal;
    font-size: 0.75em;
  }

  strong {
    /* font-size: 1.25em; */
  }
}

@keyframes __top-in {
  0% {
    transform: translateY(-10vmin);
    opacity: 0
  }
}

@keyframes __bottom-in {
  0% {
    transform: translateY(10vmin);
    opacity: 0
  }
}

@keyframes __left-in {
  0% {
    transform: translate(-10vmin);
    opacity: 0
  }
}

@keyframes fade-in {

  from {
    opacity: 0;
    /* transform: translateY(2rem); */
  }

}

@keyframes move-in {

  from {
    opacity: 0;
    transform: translateY(2rem);
  }

}

select option {
  color: #000 !important;
}

select:focus-visible {
  outline: 1px solid yellow;
}

[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

/*
form:before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: solid currentColor 2px;
  border-color: currentColor transparent currentColor transparent;
  animation: rotate calc(var(--duration-animation) * 2) linear infinite;
  pointer-events: none;
  position: absolute;
  top: calc(1rem - 2px);
  left: calc(1rem - 2px);
  transition: opacity var(--duration-transition), visibility 0s var(--duration-transition);
  z-index: 1;
  visibility: hidden;
}

div.search>form.--loading:before {
  opacity: 1;
  transition: opacity var(--duration-transition), visibility 0s 0s;
  visibility: visible;
}

*/

fieldset:has([type="search"]) {
  all: unset;
  position: relative;

  .magnifying-glass-solid {
    position: absolute;
    left: 0;
    top: 0;
    padding: 1rem;
  }

  .magnifying-glass-solid+input[type="search"] {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  button[type="reset"] {
    all: unset;
    transition: opacity 0.5s;
    position: absolute;
    right: 0;
    top: 0;
    padding: 1rem;
    cursor: pointer;
  }

  input:placeholder-shown+button[type="reset"] {
    opacity: 0
  }

}

details.more {
  max-width: 100ch;
  border-left: solid 1px currentColor;

  summary {
    display: flex;
    gap: 1rem;
    padding: 1rem 2rem;
    align-items: center;
    cursor: pointer;
  }

  &>div {
    padding-top: 1rem;
    line-height: 1.75;
    white-space: pre-wrap;
    padding: 0 0 1rem 2rem;
  }
}

a.back-link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75em;
}

i.icon[class*="star-"] {
  flex: 1;
  font-size: 1.5em;
  cursor: pointer;
  filter: drop-shadow(0 0 1px grey);
  text-align: right;

  &.--selected {
    background: var(--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

dialog {
  inset: 0;
  padding: 2rem;
  border-radius: var(--border-radius);
  width: calc(100% - 8rem);
  max-width: 1200px;
  height: calc(100% - 8rem);
  max-height: 800px;
  padding: 0;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
  background: var(--block-background);
  border: none;
  outline: none;
  color: currentColor;

  &[open] {
    animation: fade-in 0.5s both;
  }

  &::backdrop {
    position: fixed;
    inset: 0px;
    background: rgba(0, 0, 0, 0.25);
  }
}

.nothing-found {
  padding: 2rem;
  height: max-content;
  grid-column: 1 / -1;
  animation: gallery-guitar-in 0.25s 0.25s ease both;
  margin-top: 4rem;

  a {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  strong {
    display: block;
    margin-bottom: 2rem;
  }
}

form.--json {
  max-width: 70ch;
  position: relative;
  isolation: isolate;

  .__price {
    padding: 1rem;
    border-radius: var(--border-radius);
    border: solid 1px var(--c1);
    margin-bottom: 1rem;

    label {
      padding: unset;
      transform: unset;
      margin: 0 0 0.5rem 0;
    }

    output {
      display: block;
      font-size: 1.5em;
    }
  }

  input, select, textarea {
    color: currentColor;
    padding-top: 2rem;
    max-height: unset;
    height: unset;
    padding-bottom: 0.75rem;  
    width: 100%;
    margin-bottom: 1rem;
    outline: 3px solid transparent;
    transition: outline 0.5s, color 0.5s;
  }

  textarea {
    height: 10rem;
  }

  :user-invalid, [data-invalid] {
    outline: 3px solid var(--color-error);
    color:  var(--color-error);
  }

  label {
    position: relative;
    display: block;
    font-size: 0.75rem;
    opacity: 0.75;
    padding-left: 1rem;
    margin-top: -0.75rem;
    transform: translateY(1.5rem);
    z-index: 1;
  }

  hr {
    margin: 0;
    height: 1px;
    background: currentColor;
    border: none;
    margin-bottom: 1rem;
  }

  .__input-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;

    >div {
      width: 100%;

      &:nth-child(1) {
        max-width: 16ch;
      }

      input {
        margin: 0;
      }
    }
  }

  > fieldset > header {
    padding: 2rem 1rem 1rem 1rem;
    border-bottom: solid 1px var(--a);
    margin-bottom: 1rem;
    font-weight: bold;
  }
  
  form > .__info, form > .error, form > .success {
    &:first-child {
      padding: 2rem;
      border: solid 1px currentColor;
    }
  }

  div.checkbox, div.radio {
    display: flex;
    align-items: center;
    margin: 1rem 0;
  
    input {
      min-height: 1.5rem;
      min-width: 1.5rem;
      margin: 0 1.5rem;
      width: unset;
      cursor: pointer;
      accent-color: var(--c1);
    }

    &:has(label *:nth-child(2)) {
      align-items: flex-start;

      input {
        margin-top: 0.6rem;
      }
    }
  
    label {
      cursor: pointer;
      max-width: 70ch;
      line-height: 1.75;
      opacity: 1;
      margin: 0;
      transform: unset;
      padding: 0;

      > i {
        display: block;
        margin-top: 0.5rem;
      }

      a {
        white-space: pre-line;
      }
    }
  }

  fieldset {
    border: none;
    padding: 0;
    width: 100%;
  }

  button {
    display: block;
    width: fit-content;
    margin-top: 2rem;
    padding-inline: 3rem;
  }

  &.--loading button {
    color: transparent;
    position: relative;
    
    &::after {
      content: '...';
      position: absolute;
      inset: 0;
      display: flex;
      place-content: center;
      place-items: center;
      color: white;
    }
  }
  
  .success, .error, .__info {
    margin: 1rem 0;
    line-height: 1.75;
    width: 100%;
    padding: 1rem;
    border-left: solid 2px currentColor;
    background: color-mix(in srgb, currentColor, transparent 95%);
    border-radius: var(--border-radius);
    border-top-left-radius: 0.125rem;
    border-bottom-left-radius: 0.125rem;
  
    &.error   { color: var(--color-error); }
    &.success { color: var(--color-success); }
    &.__info { 
      font-size: 0.75em;
      color: var(--color-info); 
    }
  }
}