/* ==========================================================================
   PlugStack — contact page
   Loaded only on the contact page. Tokens come from plugstack.css.

   Same rules as the rest of the theme: no !important, overrides match or beat
   Astra's specificity, fluid clamp() sizing and an auto-fit grid before any
   breakpoint, min-width: 0 on every grid child.
   ========================================================================== */

/* --------------------------------------------------------------- layout */

/* Escape Astra's 1240px container, as the catalogue templates do. */
.plugstack-contact-page .site-content > .ast-container {
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

body.plugstack-contact-page {
  background: var(--ps-white);
}

.plugstack-contact-page .site-content {
  margin-top: 0;
  padding-top: 0;
}

.plugstack-contact-page #primary.site-main {
  margin-top: 0;
  margin-bottom: 0;
}

.plugstack-contact {
  padding: clamp(32px, 4vw, 48px) 0 clamp(56px, 7vw, 88px);
}

.plugstack-contact__inner {
  max-width: 860px;
  margin-left: auto;               /* centred in the wrap; tabs and cards share this column */
  margin-right: auto;
}

/* ----------------------------------------------------------------- tabs */

/* display here would beat the hidden attribute, so restate it. */
.plugstack-contact__tabs {
  display: flex;
  flex-wrap: wrap;                 /* three long labels: wrap, never overflow */
  gap: 10px;
  margin: 0 0 24px;
}

.plugstack-contact__tabs[hidden] {
  display: none;
}

/* Tabs reuse the catalogue pill. As <button>s they also have to shake off
   Astra's button skin, so these match its specificity and load later. */
.plugstack-contact .plugstack-contact__tabs .plugstack-pill {
  background: var(--ps-white);
  font-family: var(--ps-font-body);
  cursor: pointer;
  white-space: normal;             /* the pill's nowrap would set an unshrinkable floor */
  text-align: left;
}

.plugstack-contact .plugstack-contact__tabs .plugstack-pill:hover,
.plugstack-contact .plugstack-contact__tabs .plugstack-pill:focus-visible {
  background: var(--ps-white);
  border-color: var(--ps-red);
  color: var(--ps-red);
}

.plugstack-contact .plugstack-contact__tabs .plugstack-pill.is-active,
.plugstack-contact .plugstack-contact__tabs .plugstack-pill.is-active:hover,
.plugstack-contact .plugstack-contact__tabs .plugstack-pill.is-active:focus-visible {
  background: var(--ps-red);
  border-color: var(--ps-red);
  color: #fff;
}

.plugstack-contact .plugstack-contact__tabs .plugstack-pill:focus-visible {
  outline: 2px solid var(--ps-red);
  outline-offset: 2px;
}

/* With tabs running, the tab is the label; the heading stays for screen
   readers. Without JS the headings are the only way to tell forms apart. */
.plugstack-contact.is-enhanced .plugstack-contact__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.plugstack-contact.is-enhanced .plugstack-contact__panel[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- panel */

.plugstack-contact__panel {
  border: 1px solid var(--ps-slate);
  border-radius: var(--ps-radius-lg);
  background: var(--ps-white);
  padding: clamp(20px, 3vw, 36px);
  min-width: 0;
}

.plugstack-contact__panel + .plugstack-contact__panel {
  margin-top: 24px;                /* only visible in the no-JS stack */
}

.plugstack-contact__title {
  font-family: var(--ps-font-display);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--ps-ink);
}

.plugstack-contact__intro {
  margin: 0 0 24px;
  color: #333;
  font-size: 16px;
  line-height: 1.7;
}

.plugstack-contact__intro h3 {
  font-family: var(--ps-font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}

.plugstack-contact__intro ol {
  margin: 0 0 12px 1.25em;
  padding: 0;
}

.plugstack-contact__intro p {
  margin: 0;
  font-style: italic;
  color: var(--ps-muted);
}

.plugstack-contact__alt {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ps-slate);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ps-muted);
}

.plugstack-contact__alt a {
  color: var(--ps-red);
  text-decoration: underline;
}

.plugstack-contact__alt a:hover,
.plugstack-contact__alt a:focus-visible {
  color: var(--ps-red-dark);
}

/* ---------------------------------------------------------------- form */

.plugstack-form * {
  box-sizing: border-box;
}

/* auto-fit lets two short fields share a row when there is room and stack
   when there is not, with no per-breakpoint column rules. min(100%, 260px)
   stops a 320px phone from being forced wider than itself. */
.plugstack-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

.plugstack-field {
  min-width: 0;
}

.plugstack-field--full {
  grid-column: 1 / -1;
}

.plugstack-field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ps-ink);
  margin: 0 0 7px;
}

.plugstack-field__req {
  color: var(--ps-red);
}

.plugstack-field__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ps-light);
}

/* Astra skins every input and textarea; three classes of specificity beat
   its focus variants as well. Values mirror the account-area fields. */
.plugstack-contact .plugstack-field .plugstack-input {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font-family: var(--ps-font-body);
  /* 16px keeps iOS from zooming the viewport on focus. */
  font-size: 16px;
  line-height: 1.4;
  color: var(--ps-ink);
  background: var(--ps-white);
  border: 1px solid var(--ps-slate);
  border-radius: var(--ps-radius-sm);
  box-shadow: none;
  transition: border-color 0.18s ease;
}

.plugstack-contact .plugstack-field textarea.plugstack-input {
  min-height: 140px;
  resize: vertical;
}

.plugstack-contact .plugstack-field .plugstack-input::placeholder {
  color: var(--ps-muted);
  opacity: 1;
}

.plugstack-contact .plugstack-field .plugstack-input:focus {
  background: var(--ps-white);
  border-color: var(--ps-red);
  outline: 2px solid var(--ps-red);
  outline-offset: 1px;
  box-shadow: none;
}

.plugstack-contact .plugstack-field .plugstack-input--file {
  padding: 9px 14px;
  background: var(--ps-soft);
}

/* Errors never rely on colour alone: border, icon-free text with a hidden
   "Error:" prefix for screen readers, and the summary at the top. */
.plugstack-field.has-error .plugstack-input {
  border-color: var(--ps-red);
}

.plugstack-field__error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-red);
}

.plugstack-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #333;
  cursor: pointer;
}

.plugstack-check input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ps-red);
}

.plugstack-check a {
  color: var(--ps-red);
  text-decoration: underline;
}

.plugstack-form__actions {
  margin-top: 24px;
}

/* Honeypot: off-screen rather than display:none, which bots skip. */
.plugstack-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------- notices */

.plugstack-notice {
  margin: 0 0 24px;
  padding: 16px 20px;
  border-radius: var(--ps-radius-md);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ps-ink);
}

.plugstack-notice strong {
  display: block;
  font-family: var(--ps-font-display);
  font-size: 16px;
  margin-bottom: 2px;
}

.plugstack-notice ul {
  margin: 8px 0 0 1.25em;
  padding: 0;
}

.plugstack-notice a {
  color: inherit;
  text-decoration: underline;
}

.plugstack-notice--success {
  background: var(--ps-free-bg);
  border: 1px solid var(--ps-free-ink);
}

.plugstack-notice--error {
  background: var(--ps-red-tint);
  border: 1px solid var(--ps-red-line);
}

.plugstack-notice:focus-visible {
  outline: 2px solid var(--ps-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .plugstack-contact .plugstack-field .plugstack-input {
    transition: none;
  }
}