/*
 * happydrewienko - the engraved-name field and the name preview (plugin).
 *
 * Shared by the product page (templates/product-fields.php, templates/gallery-overlay.php) and the
 * front page's "Zobacz imię na lampce" block (templates/home-name.php), and enqueued on both, ahead
 * of product.css / home.css. Moved here unchanged from product.css sections 4 and 7; only the
 * selectors changed: they no longer lean on the product page's body class, and reach the specificity
 * they need through the input's own .input-text class instead.
 *
 * The field is the checkout's floating-label field (checkout.css 4.1-4.4), metric for metric.
 * Everything works without JavaScript: the label floats through :placeholder-shown;
 * assets/js/personalization.js adds the ok / error colours and keeps the preview in step.
 */

/* ------------------------------------------------------------------ *
 * 1. Letterforms and the engraving colour
 * Two stacks, both local. Nunito ships with the theme when the owner drops the
 * .woff2 files in (see the theme's assets/fonts/README.md); until then the rounded
 * fallbacks render and the previews still show the difference between the two.
 * ------------------------------------------------------------------ */

:root {
  --hd-letter-rounded: var(--hd-font-head);
  --hd-letter-classic: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, serif;
  /* The preview is drawn in the colour a laser leaves in birch: a deep, warm brown. */
  --hd-engrave: #6B4A2B;
}

/* ------------------------------------------------------------------ *
 * 2. The name field
 * ------------------------------------------------------------------ */

.hd-name-field {
  overflow: hidden;
  background-color: var(--hd-field);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-radius-sm);
}

.hd-float {
  position: relative;
  min-width: 0;
  background-color: var(--hd-field);
  transition: background-color 0.16s ease;
}

.hd-float:hover {
  background-color: var(--hd-field-hover);
}

.hd-float .hd-float__input.input-text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 70px;
  margin: 0;
  padding: 1.95rem 4.25rem 0.75rem 1rem;
  background-color: transparent;
  color: var(--hd-text);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--hd-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  -webkit-appearance: none;
  appearance: none;
}

/* The row's own 2px ring is the focus indicator; an outline on the input would be clipped. */
.hd-float .hd-float__input.input-text:focus,
.hd-float .hd-float__input.input-text:focus-visible {
  outline: none;
  background-color: transparent;
}

.hd-float .hd-float__input.input-text::placeholder {
  color: transparent;
}

.hd-float .hd-float__label {
  position: absolute;
  top: 1.42rem;
  right: 4.25rem;
  left: 1.02rem;
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--hd-field-placeholder);
  font-family: var(--hd-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.16s ease, color 0.16s ease;
}

.hd-float.is-filled .hd-float__label,
.hd-float:focus-within .hd-float__label,
.hd-float:has(.hd-float__input:not(:placeholder-shown)) .hd-float__label {
  transform: translateY(-1rem) scale(0.72);
  color: var(--hd-field-label);
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* "5/12" on the typing line, clear of the raised label. */
.hd-float__count {
  position: absolute;
  top: 1.95rem;
  right: 1rem;
  color: var(--hd-text-muted);
  font-size: 0.75rem;
  line-height: 1.52rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.hd-float .hd-field__error {
  margin: 0;
  padding: 0 1.02rem 0.75rem;
  color: var(--hd-error);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* States, in the checkout's order: focus first, so a verdict keeps its colour while corrected. */
.hd-float:focus-within {
  z-index: 2;
  background-color: var(--hd-field-focus);
  box-shadow: inset 0 0 0 2px var(--hd-accent-dark);
}

.hd-float:focus-within .hd-float__label {
  color: var(--hd-accent-dark);
}

.hd-float.is-ok {
  background-color: var(--hd-ok-tint);
}

.hd-float.is-ok .hd-float__label {
  color: var(--hd-ok);
}

.hd-float.is-err {
  background-color: var(--hd-err-tint);
}

.hd-float.is-err .hd-float__label {
  color: var(--hd-error);
}

/* iOS zooms the page under 16px; the design's 0.95rem is kept where that cannot happen. */
@media (pointer: coarse) {
  .hd-float .hd-float__input.input-text,
  .hd-float .hd-float__label {
    font-size: 1rem;
  }

  .hd-float__count {
    line-height: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-float,
  .hd-float .hd-float__label {
    transition: none;
  }
}

/* ------------------------------------------------------------------ *
 * 3. Name preview on a lamp photo (templates/gallery-overlay.php)
 * The photo's own box is the positioning context (position: relative on it).
 * ------------------------------------------------------------------ */

.hd-name-overlay {
  position: absolute;
  top: var(--hd-ov-y, 47%);
  left: var(--hd-ov-x, 50%);
  z-index: 2;
  width: var(--hd-ov-w, 44%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.hd-name-overlay__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hd-name-overlay__text {
  fill: var(--hd-engrave);
  fill-opacity: 0.92;
  font-family: var(--hd-letter-rounded);
  font-size: 64px;
  font-weight: 700;
}

.hd-name-overlay__tag {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.2rem 0.65rem;
  background-color: var(--hd-surface);
  border: 1px solid var(--hd-border);
  border-radius: 999px;
  color: var(--hd-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.hd-name-overlay[data-hd-has-name="0"],
.hd-name-overlay__tag[data-hd-has-name="0"] {
  opacity: 0;
}

/* data-hd-font is written by the server and kept in sync by the script. */
.hd-name-overlay[data-hd-font="classic"] .hd-name-overlay__text {
  font-family: var(--hd-letter-classic);
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .hd-name-overlay,
  .hd-name-overlay__tag {
    transition: none;
  }
}