/* ==========================================================================
   jajanyuk - warm, friendly UI with a retro accent

   The target is UMKM: warung owners often read this on a phone. So the base
   is deliberately calm - warm paper surfaces, a sans-serif face, soft corners
   and thin lines - while the retro look borrowed from the "sundul" bubble
   (2px ink borders, hard offset shadows, monospace) is reserved as an accent
   for the logo, the primary button and the bump message itself.
   ========================================================================== */

:root {
  /* Warm ink + paper base */
  --ink: #2b2420;
  --ink-soft: #6f6257;
  --muted: #8a7d70;
  --bg: #faf6ec;
  --surface: #ffffff;
  --surface-2: #fdfaf2;
  --line: #ece3d1;
  --line-strong: #d9ccb4;

  /* Accents */
  --accent: #f97316;
  --accent-dark: #c2410c;
  --accent-soft: #fff0e0;
  --green: #237a58;
  --green-dark: #1a5f44;
  --green-soft: #e2f3ec;
  --amber: #c98a00;
  --amber-soft: #fdf0d0;
  --red: #b53225;
  --red-dark: #8f251b;
  --red-soft: #fbe4e4;
  --blue-dark: #1f4e80;
  --blue-soft: #e4eefb;

  /* Flat by design: no rounded corners, no shadows. Separation comes from
     borders alone. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --border-retro: 2px solid var(--ink);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

@media (min-width: 48rem) {
  body {
    font-size: 1.0625rem;
  }
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* Headings read as normal text again - no all-caps wall. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

a, *[role="link"] {
  color: var(--accent-dark);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  min-height: 0;
}

a:hover, *[role="link"]:hover {
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  box-shadow: none;
  transform: none;
}

/* ---- Form controls ------------------------------------------------------ */

input, textarea, select {
  width: 100%;
  max-width: 360px;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}

/* Comfortable 44px targets for thumbs. */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  transition: border-color 0.12s ease;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  max-width: none;
  padding: 0;
  background: none;
  border: none;
  accent-color: var(--accent);
}

/* Phones get a smaller base size, but form controls stay at 16px so iOS
   Safari does not zoom in when a field is focused. */
@media (max-width: 47.9375rem) {
  input,
  textarea,
  select {
    font-size: 1rem;
  }
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  cursor: pointer;
}

fieldset {
  min-width: 50%;
  margin-top: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

legend {
  padding: 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--surface);
}

/* ---- Buttons ------------------------------------------------------------ */

button,
input[type="submit"],
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 2px 2px 0 rgba(43, 36, 32, 0.18);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease,
    box-shadow 0.12s ease, transform 0.06s ease;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
  background: var(--surface-2);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
}

button:active,
input[type="submit"]:active,
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Plain form submits are the page's main CTA, so they carry the retro accent.
   :where() keeps specificity at class level so .btn--* variants still win. */
:where(button[type="submit"]):not(.btn):not([role="link"]) {
  color: #ffffff;
  background: var(--accent);
  border: var(--border-retro);
  box-shadow: 2px 2px 0 var(--ink);
  font-weight: 700;
}

:where(button[type="submit"]):not(.btn):not([role="link"]):hover {
  color: #ffffff;
  background: var(--accent-dark);
  box-shadow: 2px 2px 0 var(--ink);
}

:where(button[type="submit"]):not(.btn):not([role="link"]):active {
  color: #ffffff;
  background: var(--accent-dark);
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ---- Layouts ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Let the main area grow so the footer stays pinned to the bottom. */
main {
  flex: 1 0 auto;
}

/* Two-column form on wider screens; single column on small ones. */
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem 1rem;
}

@media (min-width: 48rem) {
  .form__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Two forms side by side on wider screens; stacked on small ones. */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Action row at the end of a form: keep the primary button and the secondary
   link comfortably apart. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.site-footer {
  margin-top: 2rem;
  padding: 1rem 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---- Utilities ---------------------------------------------------------- */

/* Alpine: hide elements until the component initialises, so collapsed
   sections do not flash open on first paint. */
[x-cloak] { display: none !important; }

.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.p-4 { padding: 1rem; }

/* Section titles keep a modest size while the plain h1 can be a hero. */
.text-right { text-align: right; }

/* Project additions (kept minimal on top of the shared styles) */
.inline { display: inline; }