/* Buy-TLD pages (UI 14, task 157): the search box and the price at the top of the page, a drawn tag with the
   extension instead of the photo, and one box with price and search next to the text. Every text is 14px or bigger.
   The extension label in the search boxes stays in the field while the placeholder fits next to it; then the
   placeholder gets a little smaller; then the label moves under the field, next to the button (data-ext-fit, set by
   buy-tld-search-fit.js). It never hides. */

.tld-hero {
  overflow: clip;
  background: var(--foreground);
  color: #fff;
}

.tld-hero-inner {
  width: 100%;
  max-width: 1152px;
  margin: 0 auto;
  padding: 30px 20px 44px;
}

.tld-hero-eyebrow {
  margin: 0 0 12px;
  color: var(--yellow-light);
  font: 700 16px/1.5 var(--font-overpass);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tld-hero-title {
  margin: 0 0 22px;
  font: 800 34px/1.1 var(--font-uni-neue);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.tld-hero-ext {
  color: rgb(var(--yellow));
}

/* search box */
.tld-search {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 660px;
  margin: 0;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 0 rgb(0 0 0 / 35%);
  color: var(--foreground);
  container: tld-search / inline-size;
}

.tld-search:focus-within {
  outline: 3px solid rgb(var(--yellow));
  outline-offset: 4px;
}

.tld-search-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 52px;
  padding: 0 4px 0 12px;
  cursor: text;
}

.tld-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--foreground);
  font: 700 17px/1.3 var(--font-uni-neue);
  text-overflow: ellipsis;
}

.tld-search input::placeholder {
  color: #69647c;
  opacity: 1;
}

.tld-search-ext {
  flex: none;
  padding: 9px 11px 8px;
  border-radius: 8px;
  background: #efedf7;
  color: var(--foreground);
  font: 800 18px/1 var(--font-uni-neue);
  white-space: nowrap;
  transition: opacity 0.2s;
}

/* A name with a dot is searched as typed: the label fades. */
.tld-search[data-ext-off] .tld-search-ext {
  opacity: 0.25;
  text-decoration: line-through;
}

.tld-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tld-search-row .tld-search-ext {
  display: none;
  margin-left: 4px;
}

.tld-search[data-ext-fit^='below'] {
  flex-direction: column;
}

.tld-search[data-ext-fit^='below'] .tld-search-field .tld-search-ext {
  display: none;
}

.tld-search[data-ext-fit^='below'] .tld-search-row .tld-search-ext {
  display: inline-block;
}

.tld-search[data-ext-fit$='tight'] input::placeholder {
  font-size: 15px;
}

.tld-search button[type='submit'] {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background: rgb(var(--yellow));
  box-shadow: 0 4px 0 #d9aa3c;
  color: var(--foreground);
  font: 800 18px/1 var(--font-uni-neue);
  white-space: nowrap;
  cursor: pointer;
}

.tld-search button[type='submit']:hover {
  background: #ffde8a;
}

.tld-search button[type='submit']:focus-visible {
  outline: 3px solid var(--foreground);
  outline-offset: 2px;
}

.tld-search [data-icon] {
  font-size: 17px;
}

/* Narrow boxes: the placeholder keeps its letters, then goes to 15px and 14px. */
@container tld-search (max-width: 320px) {
  .tld-search input::placeholder {
    font-size: 15px;
  }
  .tld-search-field {
    padding-left: 10px;
  }
  .tld-search-ext {
    padding: 8px 8px 7px;
  }
}

@container tld-search (max-width: 272px) {
  .tld-search input::placeholder,
  .tld-search[data-ext-fit$='tight'] input::placeholder {
    font-size: 14px;
  }
  .tld-search-field {
    padding-left: 8px;
  }
}

/* price line: the first year on a tag, then the yearly price and the transfer price */
.tld-hero-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 26px 0 0;
}

.tld-hero-tag {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 9px 18px 9px 46px;
  color: var(--foreground);
  font: 800 17px/1.25 var(--font-nunito);
}

.tld-hero-tag-shape {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(4px 5px 0 var(--pink));
}

.tld-hero-tag-shape path {
  fill: #fff;
  stroke: #fff;
  stroke-width: 2px;
  stroke-linejoin: round;
}

.tld-hero-tag-hole {
  position: absolute;
  top: 50%;
  left: 21px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--foreground);
}

/* "Then €14.29 per year · Transfer €9.49". Each part has its "·" in front of it, in the 22px the list is moved to the
   left; this box cuts off what is left of its edge, so a part that starts a line shows no "·". */
.tld-hero-more {
  min-width: 0;
  overflow: hidden;
  color: rgb(255 255 255 / 88%);
  font: 400 16px/1.4 var(--font-nunito);
}

.tld-hero-more-list {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  margin-left: -22px;
}

.tld-hero-more-item {
  position: relative;
  padding-left: 22px;
}

.tld-hero-more-item::before {
  position: absolute;
  left: 0;
  width: 22px;
  opacity: 0.6;
  text-align: center;
  content: '·' / '';
}

.tld-hero-more strong {
  color: #fff;
  font-weight: 800;
}

.tld-hero-prices .price-vat-note {
  flex-basis: 100%;
  margin-top: -6px;
}

.tld-hero-multi,
.tld-box-multi {
  margin: 18px 0 0;
  color: rgb(255 255 255 / 82%);
  font: 400 15px/1.5 var(--font-nunito);
}

.tld-hero-multi button,
.tld-box-multi button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tld-hero-multi button:focus-visible,
.tld-box-multi button:focus-visible {
  outline: 2px solid rgb(var(--yellow));
  outline-offset: 3px;
}

.tld-hero-intro {
  max-width: 660px;
  margin: 20px 0 0;
  color: rgb(255 255 255 / 84%);
  font: 400 17px/1.6 var(--font-nunito);
}

.tld-hero-intro p {
  margin: 0;
}

.tld-hero-intro p + p {
  margin-top: 12px;
}

/* drawn tag with the extension (wide screens only); its text size comes from --tld-em (the text's width in em,
   set by the server), so it fits the tag */
.tld-hero-art {
  display: none;
}

.tld-hero-bigtag {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 250px;
  height: 282px;
  margin: -120px 0 0 -125px;
  padding-top: 62px;
  rotate: -7deg;
  animation: tld-hero-bob 6s ease-in-out infinite;
}

.tld-hero-bigtag svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(12px 14px 0 var(--pink));
}

.tld-hero-bigtag path {
  fill: rgb(var(--yellow));
  stroke: var(--foreground);
  stroke-width: 3;
  stroke-linejoin: round;
}

.tld-hero-bigtag-hole {
  position: absolute;
  top: 40px;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: var(--foreground);
  box-shadow: inset 0 0 0 4px #e3b54a;
}

.tld-hero-bigtag::before {
  position: absolute;
  bottom: calc(100% - 50px);
  left: 50%;
  width: 3px;
  height: 150px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(rgb(255 255 255 / 0%), rgb(255 255 255 / 55%));
  content: '';
}

.tld-hero-bigtag b {
  position: relative;
  z-index: 1;
  color: var(--foreground);
  font: 800 92px/1 var(--font-uni-neue);
  font-size: min(92px, calc(208px / var(--tld-em, 2)));
  letter-spacing: -0.035em;
  text-align: center;
  white-space: nowrap;
}

.tld-hero-shape {
  position: absolute;
  animation: tld-hero-float 7s ease-in-out infinite;
}

.tld-hero-shape-a {
  top: 2px;
  right: -4px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--pink);
}

.tld-hero-shape-b {
  bottom: 4px;
  left: -34px;
  width: 58px;
  height: 58px;
  border-radius: 15px;
  background: var(--blue);
  rotate: -12deg;
  animation-delay: -2.2s;
}

.tld-hero-shape-c {
  right: -26px;
  bottom: -14px;
  width: 50px;
  height: 50px;
  border: 7px solid var(--purple-200);
  border-radius: 50%;
  animation-delay: -4.1s;
}

.tld-hero-shape-d {
  top: 40px;
  left: 30px;
  width: 24px;
  height: 24px;
  background: rgb(var(--yellow));
  rotate: 16deg;
  animation-delay: -1.3s;
}

@keyframes tld-hero-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 6px -12px;
  }
}

@keyframes tld-hero-bob {
  0%,
  100% {
    translate: 0 0;
    rotate: -7deg;
  }
  50% {
    translate: 0 -10px;
    rotate: -4deg;
  }
}

/* one box next to the text: price and search */
.tld-box {
  padding: 24px;
  border-radius: 8px 24px;
  background: var(--foreground);
  color: #fff;
  container-type: inline-size;
}

.tld-box-ext {
  margin: 0;
  font: 800 30px/1.2 var(--font-uni-neue);
  font-size: min(30px, calc(100cqi / var(--tld-em, 4)));
  white-space: nowrap;
}

.tld-box-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 10px 0 18px;
  color: rgb(255 255 255 / 88%);
  font: 400 16px/1.4 var(--font-nunito);
}

.tld-box-prices p {
  margin: 0;
}

.tld-box-prices strong,
.tld-box-first {
  color: #fff;
  font-weight: 800;
}

.tld-box .tld-search {
  max-width: none;
  box-shadow: none;
}

.tld-box-multi {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .tld-hero-title {
    font-size: 48px;
  }
  .tld-hero .tld-search {
    flex-direction: row;
    padding: 7px;
  }
  .tld-hero .tld-search[data-ext-fit^='below'] {
    flex-direction: column;
  }
  .tld-hero .tld-search-field {
    height: 58px;
    padding-left: 16px;
  }
  .tld-hero .tld-search input,
  .tld-hero .tld-search-ext {
    font-size: 20px;
  }
  .tld-hero .tld-search[data-ext-fit$='tight'] input::placeholder {
    font-size: 18px;
  }
  .tld-hero .tld-search button[type='submit'] {
    height: 58px;
    padding: 0 26px;
    font-size: 20px;
  }
  .tld-hero-tag {
    font-size: 18px;
  }
  .tld-box {
    position: sticky;
    top: 22vh;
  }
  .tld-box .tld-search input,
  .tld-box .tld-search-ext,
  .tld-box .tld-search button[type='submit'] {
    font-size: 18px;
  }
}

/* tablets: the box column is narrow */
@media (min-width: 768px) and (max-width: 1023px) {
  .tld-box {
    padding: 20px 16px;
  }
}

@media (min-width: 1024px) {
  .tld-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: center;
    gap: 60px;
    padding: 52px 36px 60px;
  }
  .tld-hero-title {
    margin-bottom: 26px;
    font-size: 54px;
  }
  .tld-hero-art {
    position: relative;
    display: block;
    height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tld-hero-shape,
  .tld-hero-bigtag {
    animation: none;
  }
  .tld-search-ext {
    transition: none;
  }
}