@charset "UTF-8";
/* WPK Notary — คำถามที่พบบ่อย, v3. Loaded after assets/css/v2/styles.css and
   assets/css/v3/app.css. See pages/v3-faq.php for why this page is lighter than the
   other two.

   The rail, the density roles, the text link and the reading role all come from
   app.css. This file holds the hero search field, the category rail, the accordion and
   the empty state.

   No colour, no radius, no shadow and no type size of its own. Two thresholds. */

/* The rail carries category buttons with counts here, not a two-word eyebrow, so it
   needs the width the v2 page gave it. Overridden for this page only - the token still
   means the same thing everywhere else. */
.v3-faqlayout {
  --v3-rail-col: 236px;
}

/* ------------------------------------------------------------------- hero */

.v3-faqhero {
  background-image: url("../../v2/photos/bg-cta.jpg");
  background-position: left center;
  padding: clamp(40px, 5.5vw, 68px) clamp(18px, 4vw, 48px) clamp(44px, 5.5vw, 72px);
}

.v3-faqhero__inner {
  max-width: var(--container-narrow);
}

/* --type-display-page, the declared role for a short page title, and since
   --v3-type-hero was retired on 2 September 2026 it is the size all six v3 pages
   share - including the home page, which used to run 84px. */
.v3-faqhero__title {
  margin: 0;
  font-size: var(--type-display-page);
  line-height: var(--lh-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark);
}

.v3-faqhero__lead {
  margin: 16px 0 0;
  max-width: var(--measure-read);
  color: var(--text-on-dark-soft);
}

/* --------------------------------------------------------- the reading band */

.v3-faqband {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: var(--v3-pad-airy);
}

/* --------------------------------------------------------------- the list */

.v3-faqbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
}

.v3-faqbar__count {
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

.v3-faqlist {
  border-top: var(--border-hairline);
}

.v3-faqitem {
  border-bottom: var(--border-hairline);
}

/* The row. Mono number, then the question, then the marker - the same three-column
   grammar as the services schedule, because it is the same kind of object: one item in
   a numbered list of many. */
.v3-faqitem__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 22px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 20px) 2px;
  cursor: pointer;
  list-style: none;
  transition: background var(--motion-base) var(--motion-ease);
}

/* Safari draws its own triangle and ignores list-style on the summary itself. */
.v3-faqitem__q::-webkit-details-marker {
  display: none;
}

.v3-faqitem__q:hover {
  background: var(--surface-soft);
}

/* STABLE, from the full list - see the page header. Latin digits, so mono is legal
   here; the Mono-Is-Digits rule bans Thai in this face, not numerals. */
.v3-faqitem__num {
  font-family: var(--font-mono);
  font-size: var(--type-base);
  line-height: var(--lh-label);
  font-variant-numeric: tabular-nums;
  color: var(--accent-gold);
}

.v3-faqitem__main {
  display: block;
}

.v3-faqitem__cat {
  display: block;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

.v3-faqitem__text {
  display: block;
  margin-top: 2px;
  font-size: var(--type-title);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
  text-wrap: pretty;
}

.v3-faqitem__marker {
  display: flex;
  align-self: center;
  flex: none;
  color: var(--color-primary);
  /* The only motion on the page, and it is the system's one transition: 180ms. A
     rotation is not an entrance animation - nothing appears, a mark turns. */
  transition: transform var(--motion-base) var(--motion-ease);
}

.v3-faqitem[open] .v3-faqitem__marker {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .v3-faqitem__marker {
    transition: none;
  }
}

/* --- the answer ---

   The reading role from app.css: Sarabun at 17px, 1.75, capped at --measure-read. This
   is the page the measure layer was built for - seventeen answers at container width is
   exactly the defect it exists to prevent. NOT justified: the v2 article page justifies
   its body, but a four-line answer justified against a 720px measure opens rivers. */
.v3-faqitem__a {
  padding: 0 2px clamp(20px, 2.5vw, 26px);
  /* Aligned with the question text, past the mono number, so the answer reads as
     belonging to the row rather than restarting at the margin. */
  padding-left: calc(2px + 2.4em + clamp(14px, 2vw, 22px));
  max-width: var(--measure-read);
}

.v3-faqitem__a p {
  margin: 0;
  font-family: var(--font-reading);
  font-size: var(--type-reading);
  line-height: var(--lh-read);
  letter-spacing: var(--thai-tracking);
  color: var(--text-body);
  text-wrap: pretty;
}

.v3-faqitem__a .v3-textlink {
  margin-top: 12px;
}

/* ------------------------------------------------------------ the empty state

   The gold wash, and the only place on this page that gets it. This is the moment the
   answer is not here and the reader is handed to LINE, which is the same role the plate
   plays on the other two pages. Navy ink on pale gold - gold carries navy or nothing. */

/* ---------------------------------------------------------------- closing CTA */

.v3-faqcta {
  background-image: url("../../v2/photos/bg-hero.jpg");
  padding: clamp(48px, 7vw, 88px) clamp(18px, 4vw, 48px);
}

.v3-faqcta__inner {
  max-width: var(--container-narrow);
}

.v3-faqcta__title {
  margin: 12px 0 0;
  color: var(--text-on-dark);
  max-width: var(--measure-read);
}

.v3-faqcta__lead {
  margin: 14px 0 0;
  max-width: var(--measure-read);
}

.v3-faqcta__actions {
  margin-top: clamp(24px, 3vw, 32px);
}

/* ================================================================ 1024px */

@media (max-width: 1023px) {
}

/* ================================================================= 768px */

@media (max-width: 767px) {
  /* THE NUMBER STAYS. An earlier pass hid it here to buy the question ~50px, which
     contradicted the reason it exists: a stable number is citable, and it is no use if
     it disappears at the width most of this audience reads on. Measured at 390px it
     costs 38px plus the gap and leaves the question about 284px - a long Thai question
     wraps to three lines instead of two, which is a fair price for keeping "ข้อ 12"
     meaningful on a phone. Only the gap tightens. */
  .v3-faqitem__q {
    gap: 10px;
  }

  .v3-faqitem__a {
    padding-left: calc(2px + 2.4em + 10px);
  }
}