/* =========================================================
   PEPPYS — CONTACT
   ---------------------------------------------------------
   Loaded ONLY on the contact page. Every selector is scoped under
   body.peppys-contact-page, so nothing here can reach the shop, a product,
   the cart, checkout or My Account.

   Self-contained tokens: this runs alongside Divi, which does not define the
   PEPPYS theme's CSS variables. Values match peppys-account,
   peppys-cart-style and peppys-checkout-terms so the pages read as one system.
   ========================================================= */

body.peppys-contact-page {
  --pc-bg: #070D24;
  --pc-card: #101A3A;
  --pc-card-hi: #14204a;
  --pc-sunk: rgba(6, 11, 31, .55);
  --pc-line: rgba(255, 255, 255, .10);
  --pc-line-soft: rgba(255, 255, 255, .06);

  --pc-text: #F4F7FF;
  --pc-dim: #AEB8D6;
  --pc-mut: #7C88AC;          /* 4.5:1+ on --pc-card */

  --pc-gold: #F6C915;
  --pc-gold-600: #E0B200;
  --pc-ink: #0A0F22;
  --pc-green: #35D585;
  --pc-red: #FF6B63;

  --pc-radius: 16px;
  --pc-radius-sm: 11px;
  --pc-ease: cubic-bezier(.16, 1, .3, 1);

  /* Divi renders a FIXED header whose centred logo hangs below the header bar.
     Same clearance the cart and account pages need, for the same reason. */
  --pc-top: clamp(40px, 5vw, 64px);
}

/* Divi's page layout reserves ~21% of the row for a sidebar that this page
   does not have, so the content column silently shrinks. Reclaim it here
   ONLY — never widen .container, which also sizes the header and footer and
   would make them jump on this page alone. */
body.peppys-contact-page #left-area {
  width: 100%;
  padding-right: 0;
  padding-bottom: 0;
}

body.peppys-contact-page #sidebar {
  display: none;
}

/* Controls in Divi compute as content-box, so a width:100% input resolves to
   100% PLUS its padding and overflows its card. */
body.peppys-contact-page input,
body.peppys-contact-page textarea,
body.peppys-contact-page button {
  box-sizing: border-box;
}

/* ---------- Page canvas ---------- */

body.peppys-contact-page,
body.peppys-contact-page #page-container,
body.peppys-contact-page #et-main-area,
body.peppys-contact-page #content-area,
body.peppys-contact-page .entry-content {
  background: var(--pc-bg);
  color: var(--pc-text);
}

/* =========================================================
   LAYOUT
   ========================================================= */

body.peppys-contact-page .peppys-contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
  padding-top: var(--pc-top);
  padding-bottom: clamp(40px, 6vw, 72px);
  align-items: start;
}

@media (min-width: 980px) {
  body.peppys-contact-page .peppys-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

/* No auto inline margins on grid children anywhere in here: an auto margin
   suppresses stretching, and the column then sizes to its content instead of
   its track. That is exactly how the account login column collapsed. */

/* =========================================================
   INTRO
   ========================================================= */

body.peppys-contact-page .peppys-contact__title {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--pc-text);
}

body.peppys-contact-page .peppys-contact__lede {
  margin: 0 0 28px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--pc-dim);
}

body.peppys-contact-page .peppys-contact__promise {
  padding: 18px 20px;
  border: 1px solid var(--pc-line);
  border-left: 3px solid var(--pc-gold);
  border-radius: var(--pc-radius-sm);
  background: var(--pc-sunk);
}

body.peppys-contact-page .peppys-contact__promise-head {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--pc-text);
}

body.peppys-contact-page .peppys-contact__promise-hours {
  margin: 0;
  font-size: 14px;
  color: var(--pc-mut);
}

/* =========================================================
   FORM PANEL
   ========================================================= */

body.peppys-contact-page .peppys-contact__panel {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius);
  background: var(--pc-card);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

/* ---------- Feedback ---------- */

body.peppys-contact-page .peppys-contact__sent {
  margin-bottom: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(53, 213, 133, .35);
  border-radius: var(--pc-radius-sm);
  background: rgba(53, 213, 133, .08);
}

body.peppys-contact-page .peppys-contact__sent-head {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--pc-green);
}

body.peppys-contact-page .peppys-contact__sent p:last-child {
  margin: 0;
  font-size: 15px;
  color: var(--pc-dim);
}

body.peppys-contact-page .peppys-contact__errors {
  margin-bottom: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 107, 99, .35);
  border-radius: var(--pc-radius-sm);
  background: rgba(255, 107, 99, .08);
}

body.peppys-contact-page .peppys-contact__errors ul {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}

body.peppys-contact-page .peppys-contact__errors li {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--pc-text);
}

body.peppys-contact-page .peppys-contact__errors li:last-child {
  margin-bottom: 0;
}

/* ---------- Fields ---------- */

body.peppys-contact-page .peppys-contact__field {
  margin: 0 0 18px;
}

body.peppys-contact-page .peppys-contact__field label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pc-mut);
}

body.peppys-contact-page .peppys-contact__field input,
body.peppys-contact-page .peppys-contact__field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--pc-line);
  border-radius: var(--pc-radius-sm);
  background: var(--pc-sunk);
  color: var(--pc-text);
  font-size: 15px;
  font-family: inherit;
  line-height: 1.6;
  transition: border-color .18s var(--pc-ease), background .18s var(--pc-ease);
}

body.peppys-contact-page .peppys-contact__field textarea {
  resize: vertical;
  min-height: 150px;
}

body.peppys-contact-page .peppys-contact__field input::placeholder,
body.peppys-contact-page .peppys-contact__field textarea::placeholder {
  color: var(--pc-mut);
}

body.peppys-contact-page .peppys-contact__field input:focus,
body.peppys-contact-page .peppys-contact__field textarea:focus {
  outline: none;
  border-color: var(--pc-gold);
  background: var(--pc-card-hi);
}

/* The honeypot. Moved off-screen rather than display:none — a bot that skips
   hidden fields would sail straight past a display:none trap. */
body.peppys-contact-page .peppys-contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Submit ---------- */

/* Matched to the specificity WooCommerce and Divi reach buttons with
   (.woocommerce button.button / .et_pb_button) — a plainer selector loses and
   the button silently renders in the theme's default grey. */
body.peppys-contact-page .peppys-contact__form button.peppys-contact__submit {
  display: inline-block;
  width: 100%;
  margin-top: 4px;
  padding: 15px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--pc-gold);
  color: var(--pc-ink);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s var(--pc-ease), transform .18s var(--pc-ease);
}

body.peppys-contact-page .peppys-contact__form button.peppys-contact__submit:hover,
body.peppys-contact-page .peppys-contact__form button.peppys-contact__submit:focus-visible {
  background: var(--pc-gold-600);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  body.peppys-contact-page .peppys-contact__form button.peppys-contact__submit {
    transition: none;
  }
  body.peppys-contact-page .peppys-contact__form button.peppys-contact__submit:hover {
    transform: none;
  }
}

@media (min-width: 560px) {
  body.peppys-contact-page .peppys-contact__form button.peppys-contact__submit {
    width: auto;
    min-width: 220px;
  }
}