/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — page-specific styles only.
   Header, footer, buttons (.btn-primary/.view-all), colors, .eyebrow,
   .section-title, .sns-section/.sns-card and .reveal all come from the
   shared ../css/styles.css (same file the homepage uses), so header,
   footer, margins, button design and the Social Media cards stay
   identical to the homepage without duplicating them here.
   ═══════════════════════════════════════════════════════════ */

/* Keep the "ติดต่อเรา" nav-right button visually active while on this page */
.btn-contact.current { background: var(--navy); border-color: var(--navy); }

/* ── CONTACT HERO — soft gradient + brand hexagon graphic, title +
   framed info/form panel ── */
.contact-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 96px 64px 88px;
  background:
    radial-gradient(ellipse 55% 60% at 14% 18%, rgba(45, 133, 194, .14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 92% 82%, rgba(35, 57, 105, .10) 0%, transparent 65%),
    var(--paper);
}
/* Brand hexagon graphic (assets/images/Jmac Element.png) — large, bled off
   the right edge, vertically centered behind the hero title. */
.contact-hero-graphic {
  /* NOTE: positioned relative to .contact-hero, which wraps the whole
     section (title AND the tall frame below it) — so this is anchored
     with a fixed `top` near the title, not `top:50%` (that would center
     it against the full section height and land deep behind the form). */
  position: absolute;
  pointer-events: none;
  z-index: 0;
  right: -250px;
  top: -30px;
  width: 1200px;
  aspect-ratio: 3782 / 2250;
  background: url('../images/Jmac Element.png') center / contain no-repeat;
}

.contact-hero-top {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-bottom: 48px;
}

.contact-hero-title {
  font-family: var(--display);
  font-size: clamp(32px, 4vw,50px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.18;
  color: var(--navy);
  margin: 16px 0 0;
}

/* ── The framed panel — "ข้อมูลจะมีกรอบ" ── */
.contact-frame {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(15, 20, 25, .07);
  padding: 56px;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: stretch;
}
/* Grid items default to `min-width: auto`, which refuses to shrink below
   the intrinsic content width (the map iframe, address text, etc.) — that
   silently overflowed the frame on narrow screens even though the grid
   track itself was sized correctly. min-width: 0 lets both columns actually
   shrink to the track's width. */
.contact-info,
.contact-form-col { min-width: 0; }

/* NOTE: scoped as `.contact-info .contact-info-title` / `.contact-info
   .contact-info-lede` (not just the bare class) on purpose — the shared
   ../css/styles.css still carries a dead `.contact-info h2` / `.contact-info
   > p` rule-set from an old dark-theme contact section design. Those
   selectors are MORE specific than a single class (0,1,1 vs 0,1,0), so they
   were silently winning: forcing this h2 to 46px/weight 400 and this p to
   white-on-white (rgba(255,255,255,.85), invisible on our light card) with
   a 48px margin no matter what was set here. Nesting under `.contact-info`
   brings this to (0,2,0)/(0,2,1), which reliably beats it. */
.contact-info .contact-info-title {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw,40px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 16px;
}
.contact-info .contact-info-title span { color: var(--cyan); font-weight: 400; }
.contact-info .contact-info-lede {
  color: #555;
  font-size: 18px;
  line-height: 1.8;
  margin: 0;
  max-width: 440px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.c-detail {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
/* Same min-width: auto shrink issue as the grid columns, one level down —
   this flex child (label/sub/map) must be allowed to shrink narrower than
   its content (the map especially) to respect the row's available width. */
.c-detail > div { min-width: 0; flex: 1; }
.c-detail i {
  color: var(--cyan);
  font-size: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.c-detail-label {
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.c-detail-label a { color: inherit; text-decoration: none; }
.c-detail-label a:hover { color: var(--cyan-deep); }
.c-detail-sub {
  color: #6b7280;
  font-size: 18px;
  line-height: 1.6;
}

/* ── Mini Google Map, embedded under the company address ── */
.c-detail-map { margin-top: 14px; }
.c-detail-map-frame {
  border: 1px solid var(--border);
  line-height: 0;
}
.c-detail-map-frame iframe {
  width: 100%;
  height: 190px;
  display: block;
  border: 0;
}

/* ── Form column ── */
.contact-form-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-grid.full { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--navy);
}
.req-mark { color: #E5484D; font-weight: 700; }
.form-field input,
.form-field textarea {
  background: var(--navy-soft);
  border: 1px solid var(--border-2);
  border-radius: 0;
  padding: 12px 14px;
  color: var(--ink);
  font-size: 18px;
  font-family: var(--sans-th);
  outline: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--cyan); background: #fff; }
.form-field textarea { resize: vertical; min-height: 120px; padding-top: 12px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: #9aa1ac; }

/* ── Custom dropdown — mirrors .nav-dropdown (white panel, 1px border +
   2px cyan top accent, drop shadow) since a native <select>'s open list
   can't be restyled consistently across browsers/OSes. ── */
.custom-select { position: relative; }
.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--navy-soft);
  border: 1px solid var(--border-2);
  padding: 12px 44px 12px 14px;
  font-size: 18px;
  font-family: var(--sans-th);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.custom-select-trigger:focus,
.custom-select.open .custom-select-trigger {
  border-color: var(--cyan);
  background: #fff;
  outline: none;
}
.custom-select-value { color: inherit; }
.custom-select-caret {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--cyan);
  font-size: 20px;
  pointer-events: none;
  transition: transform .2s var(--ease);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.custom-select.open .custom-select-caret { transform: translateY(-50%) rotate(180deg); }

.custom-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--cyan);
  box-shadow: 0 24px 60px rgba(15, 20, 25, .12);
  max-height: 280px;
  overflow-y: auto;
}
.custom-select-panel[hidden] { display: none; }
.custom-select-panel li {
  padding: 11px 14px;
  font-size: 18px;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.custom-select-panel li:hover { background: var(--paper); color: var(--navy); }
.custom-select-panel li[aria-selected="true"] { color: var(--cyan-deep); font-weight: 600; }

/* Hug the button to its text ("ส่งข้อความ") instead of the shared
   .btn-primary's 240px min-width + wide arrow gap, which read as
   stretched here. Hover swaps to a thin cyan outline sized to the
   button itself. A plain CSS `border` gets clipped away along the
   shared .btn-primary group's diagonal notch (clip-path) instead of
   following it, so the outline is built from two stacked solid clip-path
   shapes instead: the button's own fill stays cyan (the "ring" color)
   and a ::before inset 1px inward turns white on hover, leaving a crisp
   1px cyan margin all the way around — including the notch corner.
   (An earlier attempt offset the ::before outward instead of inward;
   CSS paint order always draws a positioned descendant above its own
   element's background regardless of z-index sign, so that version
   fully covered the button instead of peeking out from behind it.) */
.contact-form-fields .btn-primary {
  position: relative;
  z-index: 0;
  margin-top: 8px;
  min-width: 0;
  width: fit-content;
  gap: 18px;
  justify-content: flex-start;
  border: 0;
}
.contact-form-fields .btn-primary::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: transparent;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
  transition: background .25s var(--ease);
}
.contact-form-fields .btn-primary:hover {
  background-color: var(--cyan);
  background-image: none;
  color: var(--cyan);
}
.contact-form-fields .btn-primary:hover::before {
  background: #fff;
}

/* ── Thank-you state (shown by JS after submit, form hidden) ──
   Ready-made brand hexagon graphic (assets/images/Jmac Element-05.png,
   navy → cyan gradient) as the background, white text/icon on top. */
.contact-form-thanks {
  background: url('../images/Jmac Element-05.png') center / contain no-repeat;
  width: 560px;
  aspect-ratio: 2114 / 2250;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-form-thanks[hidden] { display: none; }
.contact-form-thanks-body {
  max-width: 380px;
  padding: 24px;
  text-align: center;
}
.contact-form-thanks i {
  font-size: 44px;
  color: #fff;
  margin-bottom: 18px;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.contact-form-thanks h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.contact-form-thanks p {
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 700px) {
  .contact-form-thanks { width: 100%; }
  /* The hexagon shrinks to the column width on mobile, so scale the text
     and tighten the body to keep everything inside the readable centre. */
  .contact-form-thanks-body { max-width: 300px; padding: 10px 12px; }
  .contact-form-thanks i { font-size: 34px; margin-bottom: 10px; }
  .contact-form-thanks h3 { font-size: 20px; margin-bottom: 8px; }
  .contact-form-thanks p { font-size: 15px; line-height: 1.55; }
}
@media (max-width: 380px) {
  .contact-form-thanks-body { max-width: 240px; padding: 8px; }
  .contact-form-thanks i { font-size: 30px; margin-bottom: 8px; }
  .contact-form-thanks h3 { font-size: 18px; margin-bottom: 6px; }
  .contact-form-thanks p { font-size: 13px; line-height: 1.5; }
}

@media (max-width: 1100px) {
  .contact-hero { padding: 72px 32px; }
  .contact-frame { padding: 40px 28px; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  .contact-hero-top { max-width: 100%; }
  .contact-hero-graphic { width: 520px; right: -140px; }
}
@media (max-width: 700px) {
  .contact-hero { padding: 56px 20px 48px; }
  .contact-frame { padding: 28px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-hero-graphic { width: 340px; right: -100px; }
}

@media (max-width: 600px) {
  .c-detail-map-frame iframe { height: 220px; }
}

/* ═══════════════════════════════════════════════════════════
   20260717 client feedback (sheet):
   เพิ่มขนาดฟอนต์พื้นฐานทั้งหน้าให้ใหญ่ขึ้น (16px → 18px)
   ═══════════════════════════════════════════════════════════ */
body { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════
   20260717 client feedback: "เรื่อง / หัวข้อที่ต้องการสอบถาม" —
   กลุ่ม radio 7 หัวข้อ พร้อม dropdown ย่อยของ "การให้คำปรึกษา"
   และ "เกี่ยวกับการวินิจฉัย" ตามรูปแนบในชีต
   ═══════════════════════════════════════════════════════════ */
.cf-subject {
  border: 1px solid var(--border-2);
  background: var(--bone);
  padding: 18px 20px 20px;
  margin: 0 0 20px;
}
.cf-subject legend {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--navy);
  padding: 0 8px;
}
.cf-subject-options { display: flex; flex-direction: column; gap: 12px; }
.cf-radio {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 17px;
  color: var(--ink-2);
  cursor: pointer;
  width: fit-content;
}
.cf-radio input[type="radio"] { accent-color: var(--cyan); transform: translateY(2px); cursor: pointer; }
.cf-subject-row { display: flex; flex-direction: column; gap: 10px; }
.cf-subselect { max-width: 420px; padding-left: 26px; }
@media (max-width: 600px) {
  .cf-subselect { max-width: none; padding-left: 0; }
}