/* Casa Colombia — catering page.
 *
 * Deliberately a separate stylesheet rather than an addition to main.css: this
 * is the only page with form controls, and keeping it apart means the catering
 * work and any concurrent edits to the shared sheet cannot collide. It uses
 * only the custom properties already defined in main.css — no new colours.
 */

/* The site is light-only. Without this, a visitor whose OS is in dark mode gets
   dark UA form controls sitting on a cream page, and the placeholder text goes
   nearly invisible. */
.cat-form { color-scheme: light; }

.cat-quick { margin-top: 1.5rem; font-size: 0.95rem; color: var(--muted); }
.cat-quick a { font-weight: 600; }

/* ── noscript ─────────────────────────────────────────────────────────── */

.cat-noscript {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--saffron);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}
.cat-noscript h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.cat-noscript ul { margin: 0 0 1.1em; padding-left: 1.2rem; }
.cat-noscript li { margin: .3rem 0; }

/* ── groups ───────────────────────────────────────────────────────────── */

.cat-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 1.5rem clamp(1.1rem, 3vw, 2rem) 1.75rem;
  margin: 0 0 1.25rem;
  box-shadow: var(--shadow-sm);
}
.cat-group legend {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  color: var(--coffee);
  padding: 0 .6rem;
  margin-left: -.6rem;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
}
.cat-field { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.cat-field--wide { grid-column: 1 / -1; }
.cat-field[hidden] { display: none; }

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

/* ── labels and controls ──────────────────────────────────────────────── */

.cat-field label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--coffee);
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Spelled out rather than an asterisk: an asterisk means nothing on its own to
   a screen reader, and colour alone is not a signal. */
.cat-req {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(168, 32, 26, 0.07);
  border: 1px solid rgba(168, 32, 26, 0.22);
  border-radius: 100px;
  padding: .1rem .45rem;
  line-height: 1.5;
}

.cat-field input,
.cat-field select,
.cat-field textarea {
  font-family: var(--sans);
  /* 17px. Anything under 16px makes iOS Safari zoom the viewport on focus and
     the visitor has to pinch back out after every field. */
  font-size: 1rem;
  line-height: 1.45;
  color: var(--coffee);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cat-field textarea { resize: vertical; min-height: 6rem; }

.cat-field input::placeholder,
.cat-field textarea::placeholder { color: var(--muted); opacity: 1; }

.cat-field input:hover,
.cat-field select:hover,
.cat-field textarea:hover { border-color: var(--muted); }

/* The border tint and ring are decoration. The outline is the actual focus
   indicator and is deliberately NOT removed: styles/main.css defines no focus
   style except on .skip, so the UA outline is the whole site's indicator, and
   under forced-colors (Windows High Contrast) a box-shadow is not painted and
   border-color is overridden by the forced palette — so a substitute made of
   those two alone disappears completely for the users who need it most.
   Outlines survive forced-colors; the UA recolours them instead. */
.cat-field input:focus,
.cat-field select:focus,
.cat-field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(168, 32, 26, 0.14);
}
.cat-field input:focus-visible,
.cat-field select:focus-visible,
.cat-field textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* appearance:none strips the native arrow, so draw one back. */
.cat-field select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A6B5E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px 8px;
}

/* Safari on iOS renders date inputs at their own intrinsic width and leaves
   them vertically squashed inside a flex column. */
.cat-field input[type="date"] { min-height: 2.9rem; }

.cat-help { font-size: 0.84rem; color: var(--muted); line-height: 1.45; }
.cat-help[hidden] { display: none; }

/* ── checkbox pills ───────────────────────────────────────────────────── */

.cat-checks {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.cat-checks-label {
  flex-basis: 100%;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--coffee);
  margin-bottom: .2rem;
}
.cat-check {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 0.93rem;
  color: var(--coffee);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .55rem 1rem .55rem .8rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cat-check:hover { border-color: var(--coffee); }
.cat-check input { accent-color: var(--red); width: 1.05rem; height: 1.05rem; margin: 0; flex: none; }
.cat-check:has(input:checked) { border-color: var(--red); background: rgba(168, 32, 26, 0.05); }
/* :has() is widely supported now but not universally; the checkbox itself is
   always visible, so a browser without it loses only the tint. */
.cat-check:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(168, 32, 26, 0.14); }

/* ── send block ───────────────────────────────────────────────────────── */

.cat-send {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 1.75rem clamp(1.1rem, 3vw, 2rem) 2rem;
  box-shadow: var(--shadow-sm);
}
.cat-send h3 { margin-bottom: .4rem; }
.cat-send-lede { color: var(--body); max-width: 60ch; }

.cat-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.4rem 0 0; }

/* Over the length ceiling the link loses its href, so it is no longer
   focusable or clickable; this makes that visible rather than mysterious. */
#cat-send-link.is-disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.cat-status {
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  color: var(--coffee);
  background: rgba(232, 163, 61, 0.12);
  border-left: 3px solid var(--saffron);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .8rem 1rem;
}
/* Collapsed to nothing while empty, but NOT display:none — that would take the
   element out of the accessibility tree, and NVDA and JAWS register a live
   region when it enters the tree. A region that arrives already populated
   reads as new content rather than as a change, and commonly is not spoken at
   all. Stripping the box instead leaves the region registered from page load
   while occupying zero space. */
.cat-status:empty {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.cat-toolong {
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  color: var(--coffee);
  background: rgba(168, 32, 26, 0.07);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .8rem 1rem;
}
.cat-toolong[hidden] { display: none; }

/* ── transcript ───────────────────────────────────────────────────────── */

/* Always rendered, on every path, before and after the send. The page can
   never learn that the email app opened, so it can never decide this is no
   longer needed. */
.cat-transcript { margin-top: 1.6rem; }
.cat-transcript label {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--coffee);
  margin-bottom: .45rem;
}
#cat-preview {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--coffee);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  resize: vertical;
}
#cat-preview:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(168, 32, 26, 0.14); }
#cat-preview:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.cat-meter { margin: .5rem 0 0; font-size: 0.84rem; color: var(--muted); }
/* Not --saffron-dk (#C4861E): at 13.4px/600 on the white .cat-send panel that
   is 3.10:1, under the 4.5:1 AA floor for text this size. #8A5A00 is the same
   amber a few steps darker and computes to 5.93:1. */
.cat-meter .is-warn { color: #8A5A00; font-weight: 600; }
.cat-meter .is-over { color: var(--red); font-weight: 600; }

/* Renamed from .cat-fallback when the mailto path moved behind a disclosure:
   #cat-fallback is now the <details> itself, and a class and an id that read
   the same but style different elements is how someone later deletes the wrong
   rule. */
.cat-fallback-note {
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 66ch;
}
.cat-fallback-note a { font-weight: 600; }

/* ── honeypot ─────────────────────────────────────────────────────────── */

/* Clipped to a 1px box rather than display:none, visibility:hidden or
   type="hidden". All three of those are trivially detectable — a bot that
   reads computed style skips what a human cannot see, and then the trap catches
   nothing. This recipe leaves the input rendered, focusable in principle and
   filled by every naive form-filler, while occupying no space and painting no
   pixels. position:absolute with the clip is what keeps it from ever adding a
   scrollbar; a plain off-screen left:-9999px would widen the page in RTL. */
.cat-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── the mailto path, behind a disclosure ─────────────────────────────── */

.cat-details {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
}

.cat-details > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--coffee);
  padding: .5rem .3rem;
  margin: -.5rem -.3rem;
  border-radius: var(--radius);
  cursor: pointer;
  /* Both lines are needed to retire the native triangle: list-style covers
     Chrome and Firefox, the ::-webkit- pseudo-element covers Safari, which
     ignores list-style on a summary. Miss either one and the browser paints
     its marker next to ours. */
  list-style: none;
}
.cat-details > summary::-webkit-details-marker { display: none; }

/* Our own chevron, drawn from two borders so it inherits the brand red and
   costs no image request. Points right when closed, down when open. */
.cat-details > summary::before {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.cat-details[open] > summary::before { transform: rotate(45deg); }

.cat-details > summary:hover { color: var(--red); }
/* The disclosure is a real focus stop, and main.css defines no focus style
   outside .skip — so say it here or a keyboard user tabs into an unmarked
   control. Outline, not box-shadow: box-shadow is not painted under
   forced-colors. */
.cat-details > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.cat-details-body { padding-top: .6rem; }
.cat-details-body > p:first-child {
  font-size: 0.92rem;
  color: var(--muted);
  max-width: 66ch;
  margin-bottom: 0;
}
.cat-details .cat-actions { margin-top: 1.1rem; }

/* ── result panel ─────────────────────────────────────────────────────── */

/* Written only after /api/catering has answered — success on a real ok:true,
   failure on everything else. The wording carries the meaning; the colour only
   agrees with it, because a border tint is invisible to a screen reader and to
   anyone who cannot separate red from amber. */
.cat-result {
  margin-top: 1.6rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 1.6rem clamp(1.1rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 6rem;   /* the header is sticky; without this the script's
                                focus jump parks the title behind it */
}
.cat-result[hidden] { display: none; }
/* It receives focus programmatically, which in Chrome and Safari does not
   match :focus-visible, so no ring is painted there and none is wanted — the
   panel is a metre of coloured box and impossible to miss. Firefox does match
   it on some paths, so give that case a deliberate ring rather than the UA's. */
.cat-result:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.cat-result-title { margin-bottom: .5rem; }
.cat-result-body { color: var(--body); }
.cat-result-body > :last-child { margin-bottom: 0; }
.cat-result-body a { font-weight: 600; }

/* Saffron is this page's "notice" accent (see .cat-status) and red is its
   "something is wrong" accent (see .cat-toolong). Reusing them rather than
   inventing a green and a crimson keeps the page inside the site's palette. */
.cat-result--ok {
  border-left-color: var(--saffron);
  background: rgba(232, 163, 61, 0.09);
}
.cat-result--ok .cat-result-title { color: var(--coffee); }

.cat-result--error {
  border-left-color: var(--red);
  background: rgba(168, 32, 26, 0.05);
}
.cat-result--error .cat-result-title { color: var(--red-dark); }

/* The reference number is the one string in the panel a visitor may need to
   read back to us over the phone, so set it apart and in a face where 0 and O
   cannot be confused. */
.cat-result-ref {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--coffee);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .15rem .5rem;
  user-select: all;   /* one click selects the whole reference */
}

/* ── submit button ────────────────────────────────────────────────────── */

/* Disabled for exactly as long as a request is in flight. Deliberately not
   opacity-based: fading red-on-white takes the label under the 4.5:1 contrast
   floor at the very moment the visitor is watching it. --muted on white is
   5.1:1 and still plainly reads as "not right now". */
#cat-submit:disabled,
#cat-submit:disabled:hover {
  background: var(--muted);
  border-color: var(--muted);
  color: var(--white);
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* .btn is already inline-flex with a gap, so this pseudo-element lands beside
   the label with the right spacing and no extra markup. */
#cat-submit.is-sending::after {
  content: "";
  flex: none;
  width: .85em;
  height: .85em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cat-spin .7s linear infinite;
}
@keyframes cat-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  /* Drop the spinner entirely rather than freezing it — a motionless
     three-quarter ring reads as a broken glyph. The label already says
     "Sending…", which is the actual message. */
  #cat-submit.is-sending::after { display: none; }
  .cat-details > summary::before { transition: none; }
}