/* parch-buttons.css - ArcoMage parchment/wood icon-button kit.
   Reusable: a square button whose base is button_blank.png and whose hover/focus/
   active state swaps to the brighter button_blank_roll.png. Drop an <img> or
   inline <svg> icon inside and it sits centered on the parchment. ASCII only. */

.pbtn{
  --pbtn-size:64px;
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--pbtn-size);height:var(--pbtn-size);
  padding:0;border:0;cursor:pointer;line-height:0;
  background:transparent url("/static/img/ui/button_blank.png") center/100% 100% no-repeat;
  transition:transform .12s ease, filter .12s ease;
}
.pbtn:hover,
.pbtn:focus-visible,
.pbtn.is-active{
  background-image:url("/static/img/ui/button_blank_roll.png");
  transform:translateY(-1px);
  outline:none;
}
.pbtn:active{transform:translateY(0);filter:brightness(.94);}

/* the icon that sits on the parchment */
.pbtn img,
.pbtn svg{
  width:54%;height:54%;display:block;pointer-events:none;
}
.pbtn svg{fill:#3a2410;stroke:#3a2410;}
.pbtn:hover svg,
.pbtn:focus-visible svg,
.pbtn.is-active svg{fill:#27160a;stroke:#27160a;}

/* sizes */
.pbtn.sm{--pbtn-size:48px;}
.pbtn.lg{--pbtn-size:84px;}

/* parchment text input: base = ui_input.png, focus/hover swaps to ui_input_roll.png */
.pinput{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  display:inline-block;width:320px;height:54px;
  padding:0 18px;border:0;outline:none;
  background:url("/static/img/ui/ui_input.png") center/100% 100% no-repeat;
  color:#3a2410;font-family:'Cinzel',Georgia,serif;font-size:15px;letter-spacing:.02em;
  transition:filter .12s ease;
}
.pinput::placeholder{color:#8a6a3a;opacity:.9;}
.pinput:hover,.pinput:focus,.pinput.is-active{background-image:url("/static/img/ui/ui_input_roll.png");}
.pinput:focus{filter:brightness(1.02);}

/* ===== site-wide parchment text inputs (arcomage.org) =======================
   Every single-line content input becomes a parchment field. The wood-header
   search + mailing-list inputs sit OUTSIDE <main> so they are untouched; type=
   search is excluded by type; honeypots by tabindex=-1; the page subscribe/
   signup widgets (contact #sub_email, footer #foot-sub-email, mobile #mn-email/
   #mn-phone, kickstarter .no-parch) keep their own custom backgrounds. */
main.content input:not([type]):not([tabindex="-1"]):not(.no-parch),
main.content input[type="text"]:not([tabindex="-1"]):not(.no-parch),
main.content input[type="email"]:not([tabindex="-1"]):not(.no-parch):not(#sub_email):not(#foot-sub-email):not(#mn-email),
main.content input[type="password"]:not(.no-parch),
main.content input[type="tel"]:not(.no-parch):not(#mn-phone),
main.content input[type="number"]:not(.no-parch){
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  height:52px;padding:0 18px;border:0;outline:none;border-radius:0;
  background:url("/static/img/ui/ui_input.png") center/100% 100% no-repeat;
  color:#3a2410;font-family:'Cinzel',Georgia,serif;font-size:15px;letter-spacing:.02em;
  box-shadow:none;transition:filter .12s ease;
}
main.content input:not([type]):not([tabindex="-1"]):not(.no-parch)::placeholder,
main.content input[type="text"]:not([tabindex="-1"]):not(.no-parch)::placeholder,
main.content input[type="email"]:not([tabindex="-1"]):not(.no-parch)::placeholder,
main.content input[type="password"]:not(.no-parch)::placeholder{color:#8a6a3a;opacity:.9;}
main.content input:not([type]):not([tabindex="-1"]):not(.no-parch):hover,
main.content input:not([type]):not([tabindex="-1"]):not(.no-parch):focus,
main.content input[type="text"]:not([tabindex="-1"]):not(.no-parch):hover,
main.content input[type="text"]:not([tabindex="-1"]):not(.no-parch):focus,
main.content input[type="email"]:not([tabindex="-1"]):not(.no-parch):hover,
main.content input[type="email"]:not([tabindex="-1"]):not(.no-parch):focus,
main.content input[type="password"]:not(.no-parch):hover,
main.content input[type="password"]:not(.no-parch):focus,
main.content input[type="tel"]:not(.no-parch):hover,
main.content input[type="tel"]:not(.no-parch):focus,
main.content input[type="number"]:not(.no-parch):hover,
main.content input[type="number"]:not(.no-parch):focus{background-image:url("/static/img/ui/ui_input_roll.png");filter:brightness(1.02);}

/* icon + caption underneath */
.pbtn-stack{display:inline-flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;}
.pbtn-stack .lbl{
  font-family:'Cinzel','Cinzel Decorative',Georgia,serif;
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#f3e6c4;text-shadow:0 2px 4px rgba(0,0,0,.7);
}