/* American Camino Outfitters - newsletter sign-up: pinned airmail postcard.
   (C) 2026 interGen. GPL v2 or later.
   Loaded by the mod_custom layout aco-signup on any page (moved out of home.css so the module is reusable). */

/* Full-bleed: bottom-a is a centre grid-child like top-b (bottom-b is full width for every module, see collage.css) */
.site-grid > .container-bottom-a:has(.d-signup) { display: block; grid-column: full-start / full-end; max-width: none; }
:is(.container-bottom-a, .container-bottom-b) > .d-signup, :is(.container-bottom-a, .container-bottom-b) > :has(> .d-signup) { margin: 0; }
:is(.container-bottom-a, .container-bottom-b) > :has(> .d-signup) > :is(h1, h2, h3, h4, h5, h6) { display: none; } /* the postcard prints its own heading */
.d-signup { position: relative; overflow: hidden; padding: 130px 0 150px; }
.d-signup .container { position: relative; z-index: 2; --gutter-x: 1.5rem; }
.signup-arc { position: absolute; border-radius: 50%; z-index: 0; width: 560px; height: 560px; right: -220px; bottom: -260px; }
.signup-dots { left: 6%; top: 90px; width: 132px; height: 110px; transform: rotate(-8deg); }
.signup-trail { left: 0; top: 40px; width: 340px; height: auto; }
.postcard { position: relative; z-index: 2; max-width: 1060px; margin: 0 auto; padding: 60px 56px 48px; background: #fffdf8; box-shadow: 0 14px 34px rgba(20, 37, 66, .2); transform: rotate(-1deg); }
.postcard::before { content: ""; position: absolute; inset: 0; border: 10px solid transparent; border-image: repeating-linear-gradient(-45deg, #b2292e 0 14px, #fffdf8 14px 22px, #1e355d 22px 36px, #fffdf8 36px 44px) 10; pointer-events: none; }
.postcard .tack { top: -6px; left: 80px; }
.postcard .tack.navy { left: auto; right: 80px; }
.postcard-msg { border-right: 2px solid #d9cdb4; padding-right: 40px; }
.postcard-msg h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
/* Plain paragraphs on the message side are handwritten; the last one is the red sign-off */
.postcard-msg > p:not(.aco-eyebrow):not(:has(.btn)) { font-family: "Kalam", "Comic Neue", cursive; font-size: 1.3rem; line-height: 1.5; color: #1e355d; margin-bottom: .5rem; }
.postcard-msg > p:not(.aco-eyebrow):last-child { color: #b2292e; margin-bottom: 0; }
.post-stamp { position: absolute; right: 44px; top: 40px; width: 112px; height: 134px; padding: 8px; background: radial-gradient(circle, transparent 4.5px, #fffdf8 5px) -6px -6px / 12px 12px; filter: drop-shadow(0 2px 3px rgba(20, 37, 66, .25)); transform: rotate(4deg); }
.post-stamp-in { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .12em; }
.post-stamp-in img { width: 58px; height: auto; filter: brightness(0) invert(1); }
.postmark { position: absolute; right: 120px; top: 70px; width: 170px; pointer-events: none; }

/* RSForm Pro (Bootstrap 5 horizontal layout) reshaped into underlined "address lines":
   first + last name side by side, email full width, submit with the fine print. */
.postcard .address { padding-top: 120px; }
.postcard .address form > h2:first-child, .postcard .rsform-reset-button, .postcard .rsform-block-submit > .formControlLabel { display: none; }
.postcard .formContainer > .row { margin: 0; }
.postcard .formContainer > .row > [class*="col-"] { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0; width: 100%; }
.postcard .rsform-block { display: block; flex: 1 1 100%; margin: 0 !important; }
.postcard .rsform-block-first-name, .postcard .rsform-block-last-name { flex-basis: calc(50% - .75rem); min-width: 12rem; }
.postcard .rsform-block > * { width: 100%; max-width: none; padding: 0; margin: 0; }
.postcard .formControlLabel { font-family: "Barlow Condensed", sans-serif; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: #4a5872; margin-bottom: 0; padding: 0; }
.postcard .formRequired { margin-left: .2em; font-weight: 700; color: #b2292e; font-size: 0; }
.postcard .formRequired::after { content: "*"; font-size: 13px; }
.postcard .form-control { background: transparent; border: 0; border-bottom: 2px solid #1e355d; border-radius: 0; padding: 4px 0; font-family: "Kalam", cursive; font-size: 1.3rem; color: #1e355d; box-shadow: none; }
.postcard .form-control:focus { background: transparent; border-bottom-color: #b2292e; box-shadow: 0 2px 0 0 #b2292e; }
.postcard .formError { display: block; margin-top: 4px; font-size: .875rem; color: #b2292e; }
.postcard .rsform-error .form-control { border-bottom-color: #b2292e; }
.postcard .rsform-block-submit .formControls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding-top: .5rem; }
.postcard .rsform-block-submit .formControls > div:empty, .postcard .rsform-block-submit .formControls > div:has(> .formValidation:empty) { display: none; }
.postcard .signup-fine { color: #4a5872; }

@media (max-width: 991.98px) {
  .d-signup { padding: 80px 0 100px; }
  .signup-trail { display: none; }
  .signup-arc { width: 360px; height: 360px; right: -180px; bottom: -180px; }
  .postcard { padding: 44px 24px 32px; transform: none; }
  .postcard-msg { border-right: 0; border-bottom: 2px solid #d9cdb4; padding-right: 96px; padding-bottom: 24px; }
  .post-stamp { width: 84px; height: 100px; right: 20px; top: 24px; }
  .post-stamp-in { font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
  .post-stamp-in img { width: 44px; }
  .postmark { display: none; }
  .postcard .address { padding-top: 8px; }
}