/* ============================================================
   BurialSearch — minimalist UI (site global palette)
   Roles: charcoal = primary action, taupe = interactive accent
   (focus / hover / selected), greys = surfaces. Font inherits
   from the theme. All rules scoped under #burial-search-app.
   ============================================================ */

#burial-search-app {
  --ink:       #020404;   /* primary text, headings   */
  --ink-soft:  #5c544d;   /* secondary text, meta      */
  --charcoal:  #3f4245;   /* primary action            */
  --accent:    #a0876e;   /* focus / hover / selected  */
  --surface:   #f4f4f5;   /* form fill                 */
  --surface-2: #eaeaec;   /* header rows, hairlines     */
  --line:      #eaeaec;   /* borders                   */
  --bg:        #ffffff;

  /* Warm accent washes derived from --accent */
  --wash-hover: rgba(160, 135, 110, 0.07);
  --wash-sel:   rgba(160, 135, 110, 0.14);
  --ring:       rgba(160, 135, 110, 0.32);

  --radius: 8px;
  --space: 24px;          /* single spacing unit for even rhythm */

  max-width: 640px;
  margin: 0 auto;
  padding-bottom: var(--space);   /* keep results/details clear of the footer */
  color: var(--ink);
  font-family: inherit;   /* use the site's default font */
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* -------------------- Headings (inherit theme font) -------------------- */
#burial-search-app h2,
#burial-search-app h3,
#burial-search-app h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.5em;
}
#burial-search-app h3 { font-size: 1.2rem; }
#burial-search-app h4 {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 1.6em;
}

/* -------------------- Form -------------------- */
#burial-search-app form {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#burial-search-app label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

#burial-search-app input[type="text"],
#burial-search-app input[type="date"] {
  padding: 11px 12px;
  border-radius: 6px;
  border: 1px solid #dcdce0;
  background: var(--bg);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#burial-search-app input::placeholder { color: #9a968f; }

#burial-search-app input[type="text"]:focus,
#burial-search-app input[type="date"]:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

/* -------------------- Buttons -------------------- */
/* Primary action (Szukaj) — filled charcoal, full width. */
#burial-search-app form button[type="submit"] {
  margin-top: 4px;
  width: 100%;
  background: var(--accent);
  color: #fff;
  padding: 13px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.15s ease;
}
#burial-search-app form button[type="submit"]:hover { background: var(--ink-soft); }

/* Secondary action (Powrót) — quiet outline. */
#burial-search-app #back-to-results {
  background: transparent;
  color: var(--charcoal);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#burial-search-app #back-to-results:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: var(--wash-hover);
}

#burial-search-app button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -------------------- Results containers -------------------- */
/* Equal breathing room above the results, matching the form padding. */
.results-container { margin-top: var(--space); }

.results-container > p {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.results-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* -------------------- Result item + states -------------------- */
.result-item {
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.result-item:last-child { margin-bottom: 0; }

/* Hover / keyboard focus — faint wash + accent marker slides in. */
.result-item:hover {
  background: var(--wash-hover);
  border-left-color: var(--accent);
}
.result-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Selected — the record the user opened. Stronger, and it persists. */
.result-item.is-selected {
  background: var(--wash-sel);
  border-color: var(--accent);
  border-left-width: 3px;
}
.result-item.is-selected strong { color: var(--ink); }

.result-item strong {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}
.result-item small {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* -------------------- Burial detail card -------------------- */
.burial-card,
.error-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space);
  background: var(--bg);
}

.burial-card p { margin: 0 0 8px; }
/* Trailing paragraph holds the action buttons — give it room above the table. */
.burial-card > p:last-child { margin: 20px 0 0; }

/* Action row: Powrót (secondary) + memorial link (primary). */
.burial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Memorial link, styled as the primary action on this card. */
#burial-search-app .memorial-button {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#burial-search-app .memorial-button:hover {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: #fff;
}
#burial-search-app .memorial-button:focus-visible {
  outline: 2px solid var(--ink-soft);
  outline-offset: 2px;
}
.burial-card p strong {
  color: var(--ink-soft);
  font-weight: 600;
  margin-right: 4px;
}

.burial-card a {
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.burial-card a:hover { color: var(--accent); }

.burial-card iframe {
  border-radius: 6px;
  border: 1px solid var(--line);
  margin-top: 6px;
}

/* -------------------- Grave table -------------------- */
#burial-search-app .grave-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.9rem;
}
#burial-search-app .grave-table th {
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
#burial-search-app .grave-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
#burial-search-app .grave-table tr:last-child td { border-bottom: none; }

/* -------------------- Error card -------------------- */
.error-card p { margin: 0 0 16px; color: var(--ink); }

/* -------------------- Responsive -------------------- */
@media (max-width: 520px) {
  #burial-search-app { --space: 18px; font-size: 15px; }
}

/* -------------------- Motion preference -------------------- */
@media (prefers-reduced-motion: reduce) {
  #burial-search-app * { transition: none !important; }
}