/*
 * /konsultasi/ - the consultation brief page.
 *
 * Loaded via the `pageCss` front-matter hook in _includes/main.njk so no other
 * page pays for these rules. Follows DESIGN.md: flat 2px borders, sharp corners,
 * no shadows or gradients, colour reserved for hover and structure. The section
 * rule matches kerjasama.css so the two commercial pages read as siblings.
 */

.konsultasi-page h2 {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--border-color);
}

.konsultasi-lede {
  max-width: 65ch;
  font-size: 1.125rem;
}

/* Three-up on desktop, one column on narrow screens. min-width:0 on the item
   keeps long unbroken words from forcing the grid wider than the viewport. */
.konsultasi-sesi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.konsultasi-sesi-item {
  min-width: 0;
  padding: 1.5rem;
  border: 2px solid var(--border-color);
}

.konsultasi-sesi-item h3 {
  margin-top: 0;
}

.konsultasi-sesi-q {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--meta-color);
}

.konsultasi-fakta {
  max-width: 65ch;
}

.konsultasi-fakta li {
  margin-bottom: 0.75rem;
}

/* Form fields get real rules here rather than inline style attributes.
   Square corners and 2px borders per DESIGN.md; the focus outline is thick
   and high-visibility per the accessibility rules in PRODUCT.md. */
.konsultasi-form {
  max-width: 34rem;
}

.konsultasi-form label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 700;
}

.konsultasi-form input,
.konsultasi-form select,
.konsultasi-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border-color);
  border-radius: 0;
  background: var(--bg-color);
  color: inherit;
  color-scheme: light dark;
  font-family: inherit;
  font-size: 1rem;
}

.konsultasi-form textarea {
  resize: vertical;
}

.konsultasi-form input:focus-visible,
.konsultasi-form select:focus-visible,
.konsultasi-form textarea:focus-visible {
  outline: 3px solid var(--accent-cobalt);
  outline-offset: 2px;
}

.konsultasi-wajib {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--meta-color);
}

.konsultasi-bantuan {
  display: block;
  margin-top: 0.375rem;
  max-width: 65ch;
  font-size: 0.875rem;
  color: var(--meta-color);
}