/* CLIXHOUSE website: style/walink.css
   The WhatsApp link + QR tool (pages/walink.html), and nothing else loads it.
   Phone first: the form is the first thing under the title, so a visitor on a
   390 px phone starts typing without a scroll. The form is a black block with
   cream fields (16 px and up, so no phone zooms in); the answer is two cream
   cards; yellow only on what you press (Crear link, Copiar link). No borders,
   no shadows: blocks and the yellow ground do the separating.
   State lives in three attributes the server (clients/clixhouse/watool.asm)
   and story/walink.js both write: the form's data-err, the answer's
   data-has, the QR box's data-state. */

/* ------------------------------------------------------------------ top */

.walink-top { padding-top: clamp(0.75rem, 0.4rem + 2vw, 2.75rem); }
.walink-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-size: var(--fs-small);
  font-weight: 650;
}
.walink-crumbs a { text-decoration: none; }
.walink-crumbs a:hover { text-decoration: underline; }
h1.walink-h1 {
  margin-top: 0.6rem;
  padding: 0.32em 0.5em 0.24em;
  font-size: clamp(1.875rem, 1.2rem + 3.2vw, 4.25rem);
}
.walink-lead {
  max-width: 34em;
  margin-top: 0.8rem;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
}

/* ------------------------------------------------------------------ the tool */

.walink-tool { padding-top: clamp(1rem, 0.7rem + 1.5vw, 2.25rem); }
.walink-grid { display: grid; gap: var(--gap); align-items: start; }

.walink-form,
.walink-card {
  border-radius: var(--r-card);
  padding: clamp(1.125rem, 0.8rem + 1.4vw, 2.25rem);
}
.walink-form {
  display: grid;
  gap: 0.4rem;
  background: var(--noche);
  color: var(--papel);
}
/* on a phone the country and the number stack: side by side, the select cut
   "+52 México" to "+52 M..." and the two labels wrapped to different heights */
.walink-row { display: grid; gap: 0.75rem; margin-bottom: 0.15rem; }
@media (min-width: 560px) {
  .walink-row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.625rem; }
}
.walink-field label {
  display: block;
  margin-bottom: 0.4rem;
  font: 700 var(--fs-small)/1.3 var(--font-text);
}
.walink-form :is(input, select, textarea) {
  display: block;
  width: 100%;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 1rem;
  background: var(--papel);
  color: var(--noche);
  font: 650 1.1875rem/1.3 var(--font-text);
  appearance: none;
}
.walink-form select {
  padding-right: 2.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1.1rem;
  cursor: pointer;
}
.walink-form textarea { min-height: 4.75rem; line-height: 1.4; resize: vertical; }
.walink-form ::placeholder { color: var(--noche); opacity: 0.42; }
.walink-help {
  margin-bottom: 0.45rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  opacity: 0.8;
}
.walink-card .walink-help { margin: 0.75rem 0 0; opacity: 0.72; }

/* one cream note under the number, only when there is something to fix */
.walink-err {
  display: none;
  margin: -0.15rem 0 0.7rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.9rem;
  background: var(--papel);
  color: var(--noche);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.35;
}
.walink-err span { display: none; }
.walink-form:is([data-err="empty"], [data-err="short"], [data-err="long"], [data-err="letters"]) .walink-err { display: block; }
.walink-form[data-err="empty"] [data-err-for="empty"],
.walink-form[data-err="short"] [data-err-for="short"],
.walink-form[data-err="long"] [data-err-for="long"],
.walink-form[data-err="letters"] [data-err-for="letters"] { display: inline; }

.walink-go {
  width: 100%;
  min-height: 3.5rem;
  margin-top: 0.35rem;
  background: var(--luz);
  color: var(--noche);
  font-size: 1.1875rem;
  font-weight: 750;
}
.walink-fine {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  opacity: 0.8;
}

/* ------------------------------------------------------------------ the answer */

.walink-out { display: grid; gap: var(--gap); scroll-margin-top: calc(var(--head-h) + 0.75rem); }
.walink-out:focus { outline: none; }
.walink-card { background: var(--papel); color: var(--noche); }
.walink-label {
  margin: 0 0 0.5rem;
  font: 800 var(--fs-small)/1.3 var(--font-text);
  letter-spacing: 0.01em;
  text-transform: none;
}
.walink-url {
  min-height: 1.35em;
  font: 700 clamp(1.125rem, 1rem + 0.5vw, 1.375rem)/1.35 var(--font-text);
  overflow-wrap: anywhere;
  user-select: all;
}
.walink-out[data-has=""] .walink-url::before { content: "https://wa.me/"; opacity: 0.3; }

.walink-acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.walink-acts .pill { flex: 1 1 auto; min-height: 3.25rem; font-size: 1.0625rem; font-weight: 700; }
.walink-copy { background: var(--luz); color: var(--noche); }
.walink-copy.is-done { background: var(--noche); color: var(--papel); }
.walink-out[data-has=""] .walink-acts .pill { opacity: 0.3; pointer-events: none; }

.walink-qr-box {
  display: grid;
  place-items: center;
  width: min(100%, 16rem);
  aspect-ratio: 1;
  margin: 0.25rem auto 0;
  border-radius: 1rem;
}
.walink-qr-box svg { display: block; width: 100%; height: auto; }
.walink-qr-box p {
  display: none;
  max-width: 13rem;
  font-size: var(--fs-small);
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}
.walink-qr-box:not([data-state="ok"]) { background: color-mix(in srgb, var(--noche) 7%, var(--papel)); }
.walink-qr-box:not([data-state="ok"]) svg { display: none; }
.walink-qr-box:not([data-state="ok"], [data-state="long"]) .walink-qr-empty,
.walink-qr-box[data-state="long"] .walink-qr-long { display: block; }
.walink-out .walink-qr-box:not([data-state="ok"]) ~ .walink-dl .pill { opacity: 0.3; pointer-events: none; }

/* ------------------------------------------------------------------ below the tool */

.walink-how, .walink-where, .walink-faq { padding-top: clamp(3rem, 2rem + 4vw, 6.5rem); }
h2.walink-h2 {
  margin-bottom: var(--stack);
  padding: 0.36em 0.56em 0.28em;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
}

.walink-steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.walink-steps li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem 1rem 1rem;
  border-radius: var(--r-card);
  background: var(--papel);
}
.walink-step-n {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--noche);
  color: var(--papel);
  font: 900 1.6rem/1 var(--font-display);
}
.walink-steps p { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }

.walink-where-grid { display: grid; gap: 0.75rem; }
.walink-where-grid h3 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  letter-spacing: var(--ls-display-small);
}
.walink-where-grid p { font-size: var(--fs-small); line-height: 1.5; }

.walink-faq-list { display: grid; gap: 0.6rem; max-width: 52rem; }
.walink-faq-list details { border-radius: var(--r-card); background: var(--papel); }
.walink-faq-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
  padding: 1rem 1.25rem;
  font-size: var(--fs-body);
  font-weight: 750;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.walink-faq-list summary::-webkit-details-marker { display: none; }
.walink-faq-list summary::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: rotate 0.2s ease;
}
.walink-faq-list details[open] summary::after { rotate: 45deg; }
.walink-faq-list .faq-answer { padding: 0 1.25rem 1.25rem; }
.walink-faq-list .faq-answer p { max-width: 40em; font-size: 1.125rem; line-height: 1.55; }

.walink-bridge-card {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  max-width: 44rem;
  padding: clamp(1.375rem, 1rem + 1.6vw, 2.5rem);
  border-radius: var(--r-card);
  background: var(--noche);
  color: var(--papel);
}
.walink-bridge-card h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.walink-bridge-card p { font-size: var(--fs-body); font-weight: 600; line-height: 1.45; }
.walink-bridge-go { min-height: 3.25rem; font-size: 1.0625rem; font-weight: 700; }
.walink-bridge .wa { margin-top: var(--gap); }

@media (min-width: 700px) {
  .walink-where-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .walink-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .walink-steps li { grid-template-columns: 1fr; align-items: start; align-content: start; padding: 1.25rem 1.4rem 1.5rem; }
}

@media (min-width: 1000px) {
  .walink-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .walink-where-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .walink-qr-box { width: min(100%, 17rem); }
}

@media (prefers-reduced-motion: reduce) {
  .walink-faq-list summary::after { transition: none; }
}