/* Peptide Works -- site footer (redesign).
 *
 * Ported from html1/index.html + html1/style.css, with three changes forced by
 * the live site rather than by taste:
 *
 *   1. The prototype's link columns and payment badges were EMPTY in the markup
 *      and injected by home.js at runtime. Server-rendered here -- a footer that
 *      needs JavaScript to show its own navigation is a footer that is missing
 *      from every crawler and from any page where that script does not run.
 *   2. Every prototype link was href="#". Real URLs, resolved against the live
 *      site; see build-footer-template.php for what could not be resolved.
 *   3. The newsletter is an Elementor form widget, not this markup, so it keeps
 *      its submit actions and stays editable. Only its wrapper is styled here.
 *
 * Loaded site-wide but scoped entirely to .pw-footer, which does not exist until
 * the new template is the active one -- so it is inert until then.
 */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');}

.pw-footer{--pw-footer-bg:#1A1D1B;--pw-lime:#7BC142;--pw-green-dark:#123D1D;--pw-white:#FFFFFF;
  background:var(--pw-footer-bg);color:#D9DEDA;font-family:'IBM Plex Sans',system-ui,sans-serif;}
.pw-footer .pw-wrap{max-width:1320px;margin:0 auto;padding-left:clamp(14px,3vw,32px);padding-right:clamp(14px,3vw,32px);}
.pw-footer a{text-decoration:none;}

/* top: brand + legal, and the newsletter beside it */
.pw-footer .pw-hfoot-top{display:grid;grid-template-columns:1.15fr 0.85fr;gap:clamp(22px,3.4vw,48px);align-items:start;padding-top:clamp(34px,4.4vw,58px);padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,0.12);}
.pw-footer .pw-hfoot-top img{height:38px;width:auto;filter:brightness(0) invert(1);}
.pw-footer .pw-hfoot-legal{max-width:58ch;margin:16px 0 0;font-size:13.5px;line-height:1.6;color:rgba(217,222,218,0.72);}
.pw-footer .pw-hfoot-legal strong{color:#9FD07E;font-weight:600;}
.pw-footer .pw-hfoot-news>strong{display:block;font-size:14px;font-weight:600;color:var(--pw-white);}
.pw-footer .pw-hfoot-news-note{display:block;font-size:12px;color:rgba(217,222,218,0.55);margin-top:10px;}

/* the Elementor form widget, dressed to match the approved design */
.pw-footer .pw-hfoot-news .elementor-form-fields-wrapper{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap;align-items:center;}
/* width:auto is the load-bearing part. Elementor puts `elementor-col-100` on
   every field group, and its own CSS resolves that to `width:100%` -- so the
   email field AND the submit button each claim a full row and the button wraps
   underneath. flex:1 does not override an explicit width.
   This was invisible in an isolated preview of the footer markup, because that
   page loaded pw-footer.css WITHOUT Elementor's form stylesheet. Verify form
   layout on the real page, never on a stripped-down copy of it. */
.pw-footer .pw-hfoot-news .elementor-field-group{width:auto !important;flex:1 1 auto;min-width:180px;margin:0;padding:0;}
.pw-footer .pw-hfoot-news .elementor-field-type-submit{width:auto !important;flex:0 0 auto;min-width:0;}
.pw-footer .pw-hfoot-news input[type=email]{width:100%;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.18);border-radius:999px;height:46px;padding:0 18px;color:#fff;font-family:inherit;font-size:14.5px;}
.pw-footer .pw-hfoot-news input[type=email]::placeholder{color:rgba(217,222,218,0.45);}
.pw-footer .pw-hfoot-news input[type=email]:focus{outline:2px solid var(--pw-lime);outline-offset:2px;}
.pw-footer .pw-hfoot-news button[type=submit]{flex:none;background:var(--pw-lime) !important;color:var(--pw-green-dark) !important;border:none !important;border-radius:999px !important;height:46px;padding:0 22px !important;font-family:inherit !important;font-size:14.5px !important;font-weight:600 !important;cursor:pointer;}
.pw-footer .pw-hfoot-news button[type=submit]:hover{background:#8FD253 !important;}

/* Elementor renders the field label whether or not it is set to show; hide it
   visually rather than deleting it, so the email input keeps an accessible name
   and the design still matches (the approved footer has placeholder only). */
.pw-footer .pw-hfoot-news .elementor-field-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* link columns */
.pw-footer .pw-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px);padding:28px 0;}
.pw-footer .pw-foot-col strong{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#9FD07E;}
.pw-footer .pw-foot-links{display:flex;flex-direction:column;gap:9px;margin-top:13px;}
.pw-footer .pw-foot-links a{font-size:14px;color:rgba(217,222,218,0.78);}
.pw-footer .pw-foot-links a:hover{color:var(--pw-white);}

/* bottom bar */
.pw-footer .pw-hfoot-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 0 26px;border-top:1px solid rgba(255,255,255,0.12);}
.pw-footer .pw-copyright{font-size:12.5px;color:rgba(217,222,218,0.55);}
.pw-footer .pw-pay{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.pw-footer .pw-pay-label{font-size:12px;color:rgba(217,222,218,0.55);}
.pw-footer .pw-pay-badge{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.06em;color:rgba(217,222,218,0.8);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:6px;padding:5px 9px;}

@media (max-width:900px){
  .pw-footer .pw-hfoot-top{grid-template-columns:1fr;}
  .pw-footer .pw-foot{grid-template-columns:repeat(2,1fr);}
  .pw-footer .pw-pay{justify-content:flex-start;}
}
@media (max-width:560px){
  .pw-footer .pw-foot{grid-template-columns:1fr;}
}
