/*
 * Membership pages (membership landing, Associate/Magician, Junior Society).
 *
 * Ported from the magic_castle theme's assets/css/membership.css (v1.0.5)
 * so the recreated pages render with the source layout: right-hand values
 * rail, contact-block photo, parchment rules, display typography.
 *
 * Accessibility overrides (WCAG 2.1 §1.4.3 Contrast, minimum) are appended
 * at the bottom, replacing the source's teal text colors (#0dab8d/#2a9382),
 * which measure 1.7:1–2.2:1 on the parchment and fail for normal text.
 */

.parchment {
  font-size: 20px;
  font-size: 1.25rem; }
  .parchment * {
    box-sizing: border-box; }
  .parchment hr {
    display: block;
    border: 0;
    background: url("../images/backgrounds/bg_parchment-hr.png") top center no-repeat;
    height: 7px;
    width: 100%;
    margin: 25px auto; }
  .parchment hgroup p {
    margin: 0 auto;
    width: 60%; }
  .parchment h2 {
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase; }
  .parchment p {
    line-height: 150%; }

.membership .parchment h1 {
  /* the heading graphic carries the visible "Membership" title (source
     behavior); keep the h1 for assistive tech but remove its line box so it
     doesn't leave a dead band between the graphic and the content */
  margin: 0;
  height: 0;
  overflow: hidden; }

/* Tighten the run-in above the heading graphic. The main offender is
   so-live-tweaks.css `.content hgroup { padding: 120px 0 10px }` (a
   homepage tweak that leaks site-wide, incl. 100px/80px responsive
   variants) — override it for the membership wrapper only (higher
   specificity wins regardless of load order); homepage is untouched. */
.content.membership hgroup {
  padding: 20px 0 10px; }

.membership .parchment .section-pad-top {
  padding-top: 0.75rem; }

/* Soften the deep top inset shadow on the parchment (.content carries
   `inset 0 37px 91px` from the source port, which reads as a large empty
   band above the heading graphic). Applies to membership pages and the
   charity page (same .content.membership wrapper). */
.content.membership {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8), inset 0 14px 40px 0px rgba(0, 0, 0, 0.6), inset 0 -37px 91px 0px rgba(0, 0, 0, 0.75); }

.membership .member_services {
  background: url("../images/backgrounds/bg_membership-junior-members.png") 20px bottom no-repeat;
  padding-left: 180px; }

.membership hr {
  background-image: url("../images/backgrounds/bg_membership-hr.png");
  background-size: 100% auto; }
  .membership hr.double {
    background-image: url("../images/backgrounds/bg_membership-double-hr.png");
    height: 15px; }

.membership p {
  margin: 20px 0 0;
  padding: 0 0 25px;
  font-size: 17px;
  font-size: 1.0625rem;
  line-height: 147%; }
  .membership p i {
    font-style: italic; }

.membership ul > p {
  margin: 0;
  padding: 0; }

.membership .container .right_column {
  padding-right: 316px;
  background: url("../images/backgrounds/bg_membership-parchment.png") 105% 0% no-repeat;
  font-size: 17px;
  font-size: 1.0625rem; }
  @media only screen and (max-width: 1100px) {
    .membership .container .right_column {
      padding: 0;
      background: transparent; } }

.membership .container img {
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
  display: block; }

.membership .container h4 {
  /* script face for "This is the perfect time to join!" — Allura is
     OFL-licensed and self-hosted (see fonts.css); IM Fell italic fallback */
  font-family: 'Allura', 'IM Fell English', cursive;
  font-size: 2rem; }

.membership .container .display + h4 {
  text-align: center; }

.membership .container ul {
  font-size: 17px;
  font-size: 1.0625rem;
  list-style-type: disc;
  margin: 0 0 15px; }
  .membership .container ul li {
    padding: 13px 0 0px 13px;
    margin: 0 0 0 32px; }

/* ------------------------------------------------------------------
 * Accessibility overrides — WCAG 2.1 §1.4.3 (contrast minimum).
 * Source colors measured against the parchment (#E2C38D worst case):
 *   #0dab8d → 1.72:1 FAIL   #2a9382 → 2.22:1 FAIL
 * Replacement teal #0c5346 → 5.31:1 on #E2C38D, 6.26:1 on #EDD5A5.
 * CTA buttons use the theme display red #9D1721 with parchment text
 * #F2E3C4 → 6.42:1 (matches the source page's red buttons).
 * Junior photo captions are Tally-form gold #d9c98c chips with ink
 * #42382c text → 6.92:1 (harmonizes with the embedded Tally forms).
 * ------------------------------------------------------------------ */
.membership .parchment p a,
.membership .parchment li a {
  color: #0c5346; }

.membership .member_services a,
.membership .member_services h3.blue.brothers {
  color: #0c5346; }

.membership .parchment .ama-btn {
  display: inline-block;
  padding: 10px 26px;
  background: #9D1721;
  color: #F2E3C4;
  border-radius: 3px;
  font-family: 'brothers-ot-regular', serif;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none; }
  .membership .parchment .ama-btn:hover,
  .membership .parchment .ama-btn:focus {
    background: #7e1219; }

.membership .parchment .ama-caption {
  margin: 0 auto 25px;
  padding: 6px 14px;
  display: table; /* shrink-wrap the gold chip around the text */
  background: #d9c98c;
  color: #42382c;
  font-size: 15px;
  font-style: italic;
  text-align: center; }

/* Membership application form pages: back link + Tally iframe over the
 * parchment (transparentBackground=1). min-height keeps the page stable
 * until the widget reports the form's real height (dynamicHeight=1). */
.membership .parchment .ama-back {
  color: #0c5346;
  font-family: 'brothers-ot-regular', serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none; }
  .membership .parchment .ama-back:hover,
  .membership .parchment .ama-back:focus {
    text-decoration: underline; }

.membership .parchment .ama-back-wrap {
  margin: 0;
  padding: 0 0 15px; }

.membership .parchment iframe[data-tally-src],
.membership .parchment iframe[src*="tally.so"] {
  min-height: 70vh; }

/* Display-header entrance: fade in while sliding from the left to its
 * centered position (source-page behavior), ease-out. Scroll-triggered via
 * assets/js/membership.js: .ama-anim-init hides the header until it enters
 * the viewport, then .ama-anim-play plays the keyframes once. Without JS
 * (or with prefers-reduced-motion) headers are plain and always visible. */
@keyframes ama-display-in {
  from {
    opacity: 0;
    transform: translateX(-48px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

.membership .container .display.ama-anim-init {
  opacity: 0; }

.membership .container .display.ama-anim-play {
  animation: ama-display-in 1.1s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .membership .container .display.ama-anim-init,
  .membership .container .display.ama-anim-play {
    opacity: 1;
    animation: none; } }