/* ==========================================================================
   Suriyavaan — international.css
   ADDITIVE ONLY. Loaded after styles.css on the international pages.

   This file introduces no new colours, fonts or radii. Every value below
   resolves through the existing brand tokens declared in styles.css
   (--bg, --panel, --panel-2, --accent, --accent-fill, --steel, --line,
   --line-2, --text, --muted, --head), so the dark/light theme toggle keeps
   working on the new pages with no extra work.

   It exists because the current stylesheet has no rules for three things the
   international pages need: data tables, textareas, and form error states.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Answer-engine summary block
   A 40–60 word extractable paragraph at the top of every page. Deliberately
   plain markup so an LLM or an AI Overview can lift it whole.
   -------------------------------------------------------------------------- */

.asum {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 26px 28px;
  margin-bottom: 28px;
}
.asum .k {
  display: block;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing:0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.asum p { color: var(--text); font-size: 17px; }
.asum p + p { margin-top: 12px; color: var(--muted); font-size: 17px; }

/* --------------------------------------------------------------------------
   1b. Eyebrow wrapping fix

   .eyebrow in styles.css is display:flex, so its text becomes a single
   anonymous flex item that cannot break across lines. Short eyebrows are fine;
   the longer regional ones ("AS9110C · AS9120B · AS9100D · Thailand &
   Southeast Asia") overflow a phone viewport and drag the whole hero column
   wider than the screen. Switching to block below 620px lets the text wrap
   normally while keeping the cyan registration rule inline.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .eyebrow { display: block; }
  .eyebrow::before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    margin-bottom: 2px;
  }
  .eyebrow.plain::before { display: none; }
}

/* --------------------------------------------------------------------------
   1c. Long CTA labels on narrow screens

   .btn in styles.css sets white-space:nowrap, which is correct for the short
   existing CTAs ("Book Free 15-Min Diagnostic"). The international CTAs are
   longer by necessity — "Book Southeast Asia MRO Readiness Diagnostic" — and
   an unbreakable 398px button sets the min-content width of its grid column,
   dragging the whole hero wider than a phone screen. Below 620px the buttons
   are allowed to wrap and go full-width; min-width:0 stops any remaining
   long child from forcing the track open.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .hero-grid > * { min-width: 0; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn,
  .diag .btn,
  .fsubmit .btn,
  .fres .btn {
    white-space: normal;
    text-align: center;
    width: 100%;
    line-height: 1.35;
  }
  .fsubmit { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   2. Tables — region/service/standard mapping, engagement model, at-a-glance
   No table styling exists in styles.css. These rules match the existing
   panel + hairline treatment used elsewhere on the site.
   -------------------------------------------------------------------------- */

.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
.tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tw table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--panel);
  font-size: 15px;
}
.tw caption {
  text-align: left;
  padding: 18px 22px 0;
  font-size: 15px;
  color: var(--steel);
  background: var(--panel);
}
.tw th, .tw td {
  text-align: left;
  vertical-align: top;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
}
.tw thead th {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing:0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--panel-2);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
}
.tw tbody th {
  font-family: var(--head);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  width: 30%;
}
.tw tbody td { color: var(--muted); }
.tw tbody tr:last-child th,
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:hover td,
.tw tbody tr:hover th { background: var(--panel-2); }

@media (max-width: 640px) {
  .tw th, .tw td { padding: 13px 16px; font-size: 15px; }
}

/* --------------------------------------------------------------------------
   3. Standards / scope chips (region cards, service headers)
   -------------------------------------------------------------------------- */

.stds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.stds span {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing:0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line-2);
  padding: 5px 10px;
}
.stds span.plain { color: var(--steel); }

/* --------------------------------------------------------------------------
   4. Region grid — 5 regions, so .related's fixed 4-column grid doesn't fit
   -------------------------------------------------------------------------- */

.regions { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.regions > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.regions > *:nth-child(3n) { border-right: 0; }
.regions > *:nth-last-child(-n+3) { border-bottom: 0; }

@media (max-width: 900px) {
  .regions { grid-template-columns: repeat(2, 1fr); }
  .regions > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .regions > *:nth-child(3n) { border-right: 1px solid var(--line); }
  .regions > *:nth-child(2n) { border-right: 0; }
  .regions > *:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .regions > *:last-child { border-bottom: 0; }
}
@media (max-width: 620px) {
  .regions { grid-template-columns: 1fr; }
  .regions > * { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .regions > *:last-child { border-bottom: 0 !important; }
}

/* --------------------------------------------------------------------------
   5. Lead form — extends the existing .xform component
   .xform already styles input and select. Added here: textarea, required
   markers, inline error state, and the local-review result panel.
   -------------------------------------------------------------------------- */

.xform textarea {
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: 12px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  width: 100%;
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}
.xform textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.xform .req { color: var(--accent); }
.xform .opt { color: var(--steel); font-weight: 400; letter-spacing: 0; text-transform: none; }

.xform .err {
  display: none;
  font-size: 13px;
  font-weight: 600;
  color: #FF8A8A;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
  font-family: 'Inter', sans-serif;
}
:root[data-theme="light"] .xform .err { color: #B3261E; }

.xform .fld.bad input,
.xform .fld.bad select,
.xform .fld.bad textarea { border-color: #FF8A8A; }
:root[data-theme="light"] .xform .fld.bad input,
:root[data-theme="light"] .xform .fld.bad select,
:root[data-theme="light"] .xform .fld.bad textarea { border-color: #B3261E; }
.xform .fld.bad .err { display: block; }

.xform .fsubmit { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.fres {
  margin-top: 26px;
  border: 1px solid var(--accent);
  background: var(--panel-2);
  padding: 26px 28px;
}
.fres[hidden] { display: none; }
.fres h4 { font-family: var(--head); font-size: 17px; margin-bottom: 12px; color: var(--text); }
.fres p { font-size: 15px; }
.fres .fsum {
  margin: 16px 0;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   6. Breadcrumb
   -------------------------------------------------------------------------- */

.crumb { font-size: 15px; color: var(--steel); margin-bottom: 22px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.crumb span { padding: 0 8px; opacity: .5; }

/* --------------------------------------------------------------------------
   7. Compact fact list — "at a glance" style key/value rows
   -------------------------------------------------------------------------- */

.facts { border-top: 1px solid var(--line); }
.facts .f {
  display: grid;
  grid-template-columns: .32fr .68fr;
  gap: 28px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.facts .fk {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}
.facts .fv { font-size: 17px; color: var(--text); line-height: 1.65; }
@media (max-width: 620px) {
  .facts .f { grid-template-columns: 1fr; gap: 6px; }
}

/* --------------------------------------------------------------------------
   8. Print
   -------------------------------------------------------------------------- */

@media print {
  .xform, .mcta, .hdr-cta { display: none !important; }
  .tw { overflow: visible; }
  .tw table { min-width: 0; }
}