/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THE CONTACT PAGE (0169)

   Measured off vapeandgo.co.uk at 1440px: a wrap of 980px, an 8/4 split (653px / 327px), and an
   FAQ accordion whose buttons are 16px/400 on #f2f7ff with 16px 20px padding.

   ⚠️ LOADED ONLY BY `pages/contact-us.html.twig`. Uses the shop's own Inclusive Sans, so it ships
   no typeface.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.vg-ct {
  --ct-brand: #035c56;
  --ct-ink: #181c32;
  --ct-body: #3a4a43;
  --ct-tint: #f2f7ff;
  --ct-line: #e4ebe8;
  --ct-card: #fff;
  color: var(--ct-body);
}
.vg-ct .ct-wrap { width: min(980px, 100%); margin-inline: auto; }

.vg-ct h1 { font-size: 36px; line-height: 1.2; font-weight: 600; color: var(--ct-brand);
  margin: 0 0 6px; }
.vg-ct .ct-lede { font-size: 16px; line-height: 1.7; margin: 0 0 22px; }
.vg-ct h2 { font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--ct-brand);
  margin: 0 0 14px; }
.vg-ct h3 { font-size: 17px; font-weight: 700; color: var(--ct-ink); margin: 22px 0 10px; }
.vg-ct p { font-size: 16px; line-height: 1.7; margin: 0 0 12px; }

/* The map. A STATIC card that opens Google Maps in a new tab, deliberately not an <iframe> —
   see the template's header note: an embed would set third-party cookies and this shop's own
   cookie notice says it sets none beyond the essential. */
.vg-ct .ct-map { display: block; margin: 0 0 26px; padding: 26px 24px; border-radius: 16px;
  background: var(--ct-tint); border: 1px solid var(--ct-line); text-decoration: none;
  color: var(--ct-body); }
.vg-ct .ct-map:hover { border-color: var(--ct-brand); }
.vg-ct .ct-map strong { display: block; font-size: 17px; color: var(--ct-ink); margin-bottom: 6px; }
.vg-ct .ct-map .ct-map-go { display: inline-block; margin-top: 10px; font-size: 14px;
  font-weight: 600; color: var(--ct-brand); }

/* 653 / 327 at a 980 wrap — the live shop's own 8/4 split, with its 24px gutter. */
.vg-ct .ct-split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.vg-ct .ct-panel { background: var(--ct-card); border: 1px solid var(--ct-line);
  border-radius: 16px; padding: 26px 24px; }
.vg-ct .ct-panel h2 { margin-top: 0; }

/* ── The message form (0171) ─────────────────────────────────────────────────────────────────
   The wide column stacks the form above the FAQ; the grid places children in source order, so
   without `.ct-col` a third child would land in the narrow aside column. */
.vg-ct .ct-col { display: grid; gap: 24px; align-content: start; min-width: 0; }

.vg-ct .ct-note { margin: -4px 0 18px; font-size: 14px; color: #6a7b73; }
.vg-ct .ct-form { display: grid; gap: 6px; }
.vg-ct .ct-l { font-size: 14px; font-weight: 600; color: var(--ct-ink); margin-top: 12px; }
.vg-ct .ct-l:first-of-type { margin-top: 0; }
.vg-ct .ct-opt { font-weight: 400; color: #6a7b73; }
.vg-ct .ct-i { width: 100%; box-sizing: border-box; font: inherit; color: var(--ct-ink);
  background: var(--ct-card); border: 1px solid var(--ct-line); border-radius: 10px;
  padding: 11px 13px; }
.vg-ct .ct-i:focus-visible { outline: 2px solid var(--ct-brand); outline-offset: 1px;
  border-color: var(--ct-brand); }
/* Resizable vertically only: a horizontal drag inside a grid column overflows the page. */
.vg-ct .ct-ta { resize: vertical; min-height: 150px; line-height: 1.6; }
.vg-ct .ct-send { justify-self: start; margin-top: 18px; font: inherit; font-weight: 600;
  color: #fff; background: var(--ct-brand); border: 1px solid var(--ct-brand);
  border-radius: 10px; padding: 12px 26px; cursor: pointer; }
.vg-ct .ct-send:hover { background: #024a45; border-color: #024a45; }
.vg-ct .ct-send:focus-visible { outline: 2px solid var(--ct-ink); outline-offset: 2px; }
.vg-ct .ct-privacy { margin: 14px 0 0; font-size: 13px; color: #6a7b73; }
.vg-ct .ct-privacy a { color: var(--ct-brand); }

/* ⚠️ THE HONEYPOT, AND WHY IT IS NOT `display: none`.
   A field hidden the obvious way is the field a form-filling bot has learned to skip — which makes
   the trap useless. This moves it out of view instead, so it is still a rendered, focusable,
   fillable input as far as an automated filler can tell. `aria-hidden` on the wrapper plus
   `tabindex="-1"` on the input keep it away from screen readers and keyboard tabbing, which is the
   part that matters for people. It cannot be an inline style: this storefront's CSP blocks a
   `style` attribute outright, and it would fail silently — see NoStyleAttributeSurvivesTheCspTest. */
.vg-ct .ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── The outcome ─────────────────────────────────────────────────────────────────────────────
   Colour is not the only signal: the border weight and the role (status / alert) both carry it,
   so the difference survives a colour-blind reader and a monochrome print. */
.vg-ct .ct-flash { margin: 0 0 22px; padding: 14px 18px; border-radius: 12px; font-size: 15px;
  border: 1px solid var(--ct-line); background: var(--ct-tint); }
.vg-ct .ct-flash--ok { border-left: 4px solid var(--ct-brand); color: var(--ct-ink); }
.vg-ct .ct-flash--bad { border-left: 4px solid #a4262c; color: #7d1d22; background: #fdf3f3;
  border-color: #f3d6d7; }

.vg-ct .ct-details p { margin: 0 0 8px; }
.vg-ct .ct-details a { color: var(--ct-brand); }
.vg-ct .ct-reg { margin-top: 14px; font-size: 14px; color: #6a7b73; }

/* ── The FAQ ─────────────────────────────────────────────────────────────────────────────────
   ⚠️ <details>/<summary>, NOT a button + script. The live shop uses JS to open its accordion; this
   storefront's CSP is `default-src 'self'` with no `unsafe-inline`, so the vendor's inline handler
   could not run here anyway — and the native element needs no script at all, is keyboard operable
   and is announced correctly without a single ARIA attribute. Same behaviour, less to go wrong. */
.vg-ct .ct-faq { margin-top: 6px; }
.vg-ct .ct-faq-group { margin: 0 0 18px; }
.vg-ct .ct-faq-group > h3 { margin: 0 0 8px; }
.vg-ct details.ct-q { border: 1px solid var(--ct-line); border-radius: 10px; margin: 0 0 8px;
  background: var(--ct-card); overflow: hidden; }
.vg-ct details.ct-q > summary { cursor: pointer; list-style: none; padding: 16px 20px;
  background: var(--ct-tint); font-size: 16px; font-weight: 400; color: var(--ct-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vg-ct details.ct-q > summary::-webkit-details-marker { display: none; }
/* The marker is drawn rather than relying on the UA triangle, which differs per browser and
   cannot be positioned. `aria-hidden` is unnecessary: generated content is not announced. */
.vg-ct details.ct-q > summary::after { content: '+'; font-size: 20px; line-height: 1;
  color: var(--ct-brand); flex: 0 0 auto; }
.vg-ct details.ct-q[open] > summary::after { content: '−'; }
.vg-ct details.ct-q > summary:hover { color: var(--ct-brand); }
.vg-ct details.ct-q > summary:focus-visible { outline: 2px solid var(--ct-brand);
  outline-offset: -2px; }
.vg-ct .ct-a { padding: 16px 20px; }
.vg-ct .ct-a p:last-child, .vg-ct .ct-a ul:last-child { margin-bottom: 0; }
.vg-ct .ct-a ul { margin: 0 0 12px; padding-left: 22px; }
.vg-ct .ct-a li { margin-bottom: 6px; }

@media (max-width: 860px) {
  .vg-ct .ct-split { grid-template-columns: minmax(0, 1fr); }
  .vg-ct h1 { font-size: 30px; }
}