/* ==========================================================================
   Menjo Land Agency Ltd — FAQ & Contact
   Phase 5.
   ========================================================================== */

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--s8); align-items: start; }
@media (max-width: 991.98px) { .faq-grid { grid-template-columns: 1fr; gap: var(--s6); } }

.faq-aside p { color: var(--ink-soft); }
.faq-aside .btn-menjo { margin-top: var(--s4); }

.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }

.acc-btn {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: var(--s5) var(--s6) var(--s5) 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  line-height: 1.35;
}
.acc-btn::after {
  content: '\F4FE';                       /* bi-plus-lg */
  font-family: 'bootstrap-icons';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1rem;
  font-weight: 400;
  transition: transform var(--dur) var(--ease);
}
.acc-btn[aria-expanded="true"]::after {
  content: '\F2EA';                       /* bi-dash-lg */
}
.acc-btn:hover { color: var(--green); }

.acc-panel { display: none; padding: 0 var(--s6) var(--s5) 0; }
.acc-panel.is-open { display: block; }
.acc-panel p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.acc-panel p + p { margin-top: var(--s3); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact { background: var(--night); color: var(--on-dark); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s8); align-items: start; }
@media (max-width: 991.98px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s7); } }

/* --- Contact methods ----------------------------------------------------- */

.methods { display: grid; gap: var(--s3); margin-bottom: var(--s6); }

.method {
  display: flex; align-items: center; gap: var(--s4);
  background: var(--on-dark-fill);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.method:hover { background: rgba(255,255,255,0.16); border-color: var(--gold-light); color: var(--on-dark); }

.method-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--green); color: var(--on-dark);
  display: grid; place-items: center; font-size: 1.15rem;
}
.method--wa .method-icon { background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--ink); }

.method .k {
  display: block;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 2px;
}
.method .v { font-size: 1rem; font-weight: 600; }
.method .v small { display: block; font-weight: 400; font-size: var(--t-small); color: var(--on-dark-soft); }

/* --- Map ----------------------------------------------------------------- */

.map-frame {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.2);
}
.map-frame iframe { width: 100%; height: 280px; border: 0; display: block; filter: saturate(0.9); }

.map-note { font-size: var(--t-micro); color: var(--on-dark-soft); margin: var(--s3) 0 0; line-height: 1.6; }
.map-note a { color: var(--gold-light); }

/* --- Enquiry form -------------------------------------------------------- */

.enquiry {
  background: var(--on-dark-fill);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-card);
  padding: var(--s6);
}
.enquiry h3 { color: var(--on-dark); margin: 0 0 var(--s2); }
.enquiry .lede { color: var(--on-dark-soft); font-size: var(--t-small); margin: 0 0 var(--s5); }

.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 575.98px) { .field-pair { grid-template-columns: 1fr; } }

.enquiry textarea {
  width: 100%;
  background: rgba(0, 0, 0,0.55);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--on-dark);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-size: var(--t-body);
  font-family: var(--font-body);
  resize: vertical;
  min-height: 96px;
}
.enquiry textarea::placeholder { color: rgba(255,255,255,0.42); }
.enquiry textarea:focus { border-color: var(--gold-light); }

/* Honeypot — hidden from people, visible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.send-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s3); margin-top: var(--s5); }
@media (max-width: 575.98px) { .send-row { grid-template-columns: 1fr; } }
.send-row .btn-menjo,
.send-row .btn-menjo-ghost { padding: var(--s4); font-size: 1rem; }
.btn-menjo-ghost[disabled] { opacity: .5; cursor: not-allowed; }

.send-note { color: var(--on-dark-soft); font-size: var(--t-micro); margin: var(--s4) 0 0; line-height: 1.6; }

/* ==========================================================================
   Toast
   ========================================================================== */

.toast-menjo {
  position: fixed;
  left: 50%;
  bottom: var(--s6);
  transform: translate(-50%, 140%);
  z-index: 1080;
  background: var(--green);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  padding: var(--s4) var(--s6);
  box-shadow: var(--shadow-lift);
  font-size: var(--t-small);
  font-weight: 600;
  display: flex; align-items: center; gap: var(--s3);
  max-width: calc(100% - var(--s6));
  transition: transform 320ms var(--ease);
}
.toast-menjo.is-shown { transform: translate(-50%, 0); }
.toast-menjo.is-error { background: var(--clay); }
.toast-menjo i { font-size: 1.15rem; }

@media (max-width: 767.98px) { .toast-menjo { bottom: 88px; } }

@media (prefers-reduced-motion: reduce) {
  .toast-menjo { transition: none; }
  .acc-btn::after { transition: none; }
}