/* ==========================================================================
   /contact — support & enquiries page
   Reads the shared ui-chrome tokens (and the storefront ground from
   theme.css); fallbacks keep it legible if either sheet fails to load.
   ========================================================================== */

.pn-contact {
  background: var(--pn-ground, #F5F2EC);
  font-family: var(--pn-font, Inter, sans-serif);
  color: var(--pn-text, #111);
}

.pn-contact__wrap {
  max-width: var(--pn-container, 1200px);
  margin: 0 auto;
  padding: 0 var(--pn-gutter, 16px);
}

/* ---- Hero ---------------------------------------------------------------- */
.pn-contact__hero {
  padding: clamp(48px, 5vw + 16px, 88px) 0 clamp(96px, 8vw + 40px, 140px);
  background:
    radial-gradient(900px 320px at 85% -10%, rgba(22, 163, 74, .10), transparent 70%),
    var(--pn-ground-soft, #FAF8F4);
  border-bottom: 1px solid var(--pn-border, #E4DED2);
  text-align: center;
}

.pn-contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--pn-r-pill, 999px);
  background: var(--pn-green-soft, #F0FDF4);
  border: 1px solid var(--pn-green-border, #BBF7D0);
  color: var(--pn-green-deep, #15803D);
  font: var(--pn-eyebrow, 600 .75rem/1.2 Inter, sans-serif);
  letter-spacing: var(--pn-tracking-eyebrow, .08em);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.pn-contact__hero h1 {
  font: var(--pn-h1, 800 2.5rem/1.12 "Plus Jakarta Sans", sans-serif);
  letter-spacing: var(--pn-tracking-tight, -.02em);
  color: var(--pn-text-strong, #0A0A0A);
  margin: 0 auto 14px;
  max-width: 720px;
}

.pn-contact__lead {
  font: var(--pn-body-lg, 400 1.0625rem/1.7 Inter, sans-serif);
  color: var(--pn-text-muted, #525252);
  max-width: 600px;
  margin: 0 auto;
}

/* ---- Main grid (pulled up over the hero edge) ----------------------------- */
.pn-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  margin-top: clamp(-96px, -6vw - 24px, -64px);
  padding-bottom: clamp(48px, 4vw + 24px, 80px);
  align-items: start;
}

.pn-contact__panel {
  background: var(--pn-surface, #fff);
  border: 1px solid var(--pn-border, #E4DED2);
  border-radius: var(--pn-r-xl, 24px);
  box-shadow: var(--pn-shadow-card, 0 2px 8px rgba(76, 62, 40, .07));
  padding: clamp(24px, 2vw + 12px, 36px);
}

.pn-contact__panel h2 {
  font: var(--pn-h3, 700 1.375rem/1.32 "Plus Jakarta Sans", sans-serif);
  color: var(--pn-text-strong, #0A0A0A);
  margin: 0 0 6px;
}

.pn-contact__panel-sub {
  font: var(--pn-body-sm, 400 .875rem/1.6 Inter, sans-serif);
  color: var(--pn-text-muted, #525252);
  margin: 0 0 24px;
}

/* ---- Channel list ---------------------------------------------------------- */
.pn-contact__channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.pn-contact__channel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--pn-border, #E4DED2);
  border-radius: var(--pn-r-lg, 16px);
  background: var(--pn-surface-sunken, #FAF8F4);
  color: inherit !important;
  text-decoration: none !important;
  transition: border-color var(--pn-fast, 140ms), box-shadow var(--pn-fast, 140ms), transform var(--pn-fast, 140ms);
}

a.pn-contact__channel:hover,
a.pn-contact__channel:focus-visible {
  border-color: var(--pn-green-border, #BBF7D0);
  box-shadow: var(--pn-shadow-hover, 0 14px 30px rgba(76, 62, 40, .13));
  transform: translateY(-1px);
  outline: none;
}

.pn-contact__channel .pn-icon-tile { flex: 0 0 auto; font-size: 20px; }

.pn-contact__channel-body { min-width: 0; }

.pn-contact__channel-label {
  display: block;
  font: var(--pn-label, 600 .8125rem/1.3 Inter, sans-serif);
  color: var(--pn-text-subtle, #737373);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

.pn-contact__channel-value {
  display: block;
  font: var(--pn-h4, 600 1.0625rem/1.4 "Plus Jakarta Sans", sans-serif);
  color: var(--pn-text-strong, #0A0A0A);
  overflow-wrap: anywhere;
}

.pn-contact__channel-arrow { margin-left: auto; color: var(--pn-gray-400, #A3A3A3); }

.pn-contact__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--pn-r-md, 12px);
  background: var(--pn-green-soft, #F0FDF4);
  color: var(--pn-green-darker, #126D34);
  font: var(--pn-body-sm, 400 .875rem/1.6 Inter, sans-serif);
}

.pn-contact__note .fa { margin-top: 3px; }

/* ---- Form ---------------------------------------------------------------- */
.pn-contact__form { display: grid; gap: 18px; }

.pn-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.pn-contact__form .pn-field__label .pn-contact__req { color: var(--pn-danger, #DC2626); }

.pn-contact__form textarea.pn-control {
  min-height: 140px;
  padding: 12px var(--pn-s4, 16px);
  resize: vertical;
  line-height: 1.6;
}

.pn-contact__hint {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: var(--pn-caption, 400 .8125rem/1.5 Inter, sans-serif);
  color: var(--pn-text-subtle, #737373);
}

.pn-contact__captcha { min-height: 78px; max-width: 100%; overflow: hidden; }

.pn-contact__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.pn-contact__actions .pn-btn[disabled] { opacity: .65; cursor: progress; }

.pn-contact__privacy {
  font: var(--pn-caption, 400 .8125rem/1.5 Inter, sans-serif);
  color: var(--pn-text-subtle, #737373);
  margin: 0;
}

.pn-contact__privacy a { color: var(--pn-green-deep, #15803D) !important; font-weight: 600; }

.pn-contact__status {
  display: none;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--pn-r-md, 12px);
  font: var(--pn-body-sm, 400 .875rem/1.6 Inter, sans-serif);
}

.pn-contact__status.is-visible { display: flex; }
.pn-contact__status .fa { margin-top: 3px; }

.pn-contact__status--success {
  background: var(--pn-success-soft, #F0FDF4);
  border: 1px solid var(--pn-green-border, #BBF7D0);
  color: var(--pn-green-darker, #126D34);
}

.pn-contact__status--error {
  background: var(--pn-danger-soft, #FEF2F2);
  border: 1px solid #FECACA;
  color: #991B1B;
}

/* ---- Help strip ------------------------------------------------------------ */
.pn-contact__help {
  padding: 0 0 clamp(56px, 4vw + 32px, 96px);
}

.pn-contact__help h2 {
  font: var(--pn-h3, 700 1.375rem/1.32 "Plus Jakarta Sans", sans-serif);
  color: var(--pn-text-strong, #0A0A0A);
  margin: 0 0 16px;
}

.pn-contact__help-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pn-contact__help-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--pn-surface, #fff);
  border: 1px solid var(--pn-border, #E4DED2);
  border-radius: var(--pn-r-card, 18px);
  box-shadow: var(--pn-shadow-card, 0 2px 8px rgba(76, 62, 40, .07));
  color: inherit !important;
  text-decoration: none !important;
  transition: box-shadow var(--pn-normal, 240ms), transform var(--pn-normal, 240ms);
}

.pn-contact__help-card:hover,
.pn-contact__help-card:focus-visible {
  box-shadow: var(--pn-shadow-hover, 0 14px 30px rgba(76, 62, 40, .13));
  transform: translateY(-2px);
  outline: none;
}

.pn-contact__help-card:hover .pn-icon-tile,
.pn-contact__help-card:focus-visible .pn-icon-tile {
  background: var(--pn-green, #16A34A);
  color: var(--pn-white, #fff);
}

.pn-contact__help-card strong {
  font: var(--pn-h4, 600 1.0625rem/1.4 "Plus Jakarta Sans", sans-serif);
  color: var(--pn-text-strong, #0A0A0A);
}

.pn-contact__help-card span {
  font: var(--pn-body-sm, 400 .875rem/1.6 Inter, sans-serif);
  color: var(--pn-text-muted, #525252);
}

/* ---- Responsive -------------------------------------------------------------- */
@media (max-width: 991px) {
  .pn-contact__grid { grid-template-columns: 1fr; }
  .pn-contact__grid > .pn-contact__panel--form { order: -1; }
}

@media (max-width: 767px) {
  .pn-contact__row { grid-template-columns: 1fr; }
  .pn-contact__help-grid { grid-template-columns: 1fr; }
  .pn-contact__actions .pn-btn { width: 100%; }
}

@media (max-width: 360px) {
  .pn-contact__captcha { transform: scale(.88); transform-origin: 0 0; }
}