/**
 * Styles for the jixaw donation / giving Gutenberg blocks.
 *
 * Self-contained (no build step). Restyled to inherit the Signature Theatre
 * v2.0.2 brand: flat, square, shadowless. Most controls (buttons, inputs,
 * selects) are left BARE so the theme's global element selectors style them
 * (2px primary border, hover fills primary, Space Grotesk uppercase, square).
 * This file is layout-only glue plus a couple of theme-matched primitives.
 *
 * Tokens: primary #1B1612, cream #FFFEF4, alabaster #F7F5EA, muted #8D8A83.
 * Breakpoints: sm 644px / lg 1170px.
 */

/* ---------- shared ---------- */
.donation-form .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- donation-form ---------- */
.donation-form {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.donation-form__intro {
  margin-bottom: 2rem;
}
.donation-form__title {
  margin: 0 0 0.75rem;
}
.donation-form__lede {
  line-height: 1.5;
}
.donation-form__lede p {
  margin: 0 0 0.75rem;
}
.donation-form__lede p:last-child {
  margin-bottom: 0;
}

/* Frequency tabs — bare-button look from the theme; we only handle layout and
   the JS-toggled `.is-active` filled state (mirrors a button active state). */
.donation-form__frequency {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.donation-form__frequency button {
  flex: 1 1 0%;
}
.donation-form__frequency button.is-active {
  background-color: #1b1612;
  color: #fffef4;
  border-color: #1b1612;
}

/* Amount picker. Buttons are bare (theme-styled); we set the grid + the
   JS-toggled `.is-selected` filled state. */
.donation-form__amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  border: 0;
  padding: 0;
}
.donation-form__amount {
  text-align: center;
}
.donation-form__amount.is-selected {
  background-color: #1b1612;
  color: #fffef4;
  border-color: #1b1612;
}
.donation-form__other {
  grid-column: 1 / -1;
}
.donation-form__money {
  display: flex;
  align-items: center;
  border: 1px solid #1b1612;
  background: #fffef4;
}
.donation-form__money-prefix {
  padding: 0 0.25rem 0 0.75rem;
  color: #1b1612;
}
.donation-form__money-input {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 0.75rem 0.75rem 0.75rem 0;
}

/* Recognition + tribute groups. Inputs/selects are bare (theme-styled). */
.donation-form__recognition,
.donation-form__tribute {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.donation-form__recognition input[type="text"],
.donation-form__tribute input[type="text"],
.donation-form__tribute select {
  width: 100%;
}
.donation-form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Only lay out when visible — `:not([hidden])` lets the HTML `hidden` attribute
   (toggled by donation-form.js) actually hide the fields; a bare `display:flex`
   would override `[hidden]` and leave them always showing. */
.donation-form__tribute-fields:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Primary submit — full-width; the bare-button theme look applies. */
.donation-form__submit {
  width: 100%;
  margin-top: 1rem;
}
.donation-form__back {
  width: 100%;
  margin-top: 0.25rem;
}
.donation-form__success,
.donation-form__notice {
  margin-top: 1rem;
}
.donation-form__fail {
  margin-top: 1rem;
  color: #b91c1c;
}
@media (min-width: 644px) {
  .donation-form__amounts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- inline Payments API checkout (flag-on path) ---------- */
.donation-form__billing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.donation-form__billing-lede {
  margin: 0;
}
.donation-form__field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* Bare <input>s inside .donation-form__field inherit the theme element styles;
   we only stack the label + control. The .label span carries the theme's
   uppercase field-label look. */
.donation-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.donation-form__field input {
  width: 100%;
}
.donation-form__field--zip {
  max-width: 14rem;
}
.donation-form__payments {
  margin-top: 0.5rem;
}
.donation-form__paying-amount {
  margin: 0 0 1rem;
}
@media (min-width: 644px) {
  .donation-form__field-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- giving-menu ---------- */
.giving-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* The theme globally caps ANY [class*='wp-block'] element at 644px on desktop
   (@media min-width:1170px in theme.css), which crammed this grid into a narrow
   center column — cards stacked 2x2 with acres of side space and "GROUNDBREAKERS"
   hyphen-breaking mid-word (client flagged both). Same cure as the membership-tiers
   breakout: escape the cap with negative viewport margins, then re-center the grid
   content with viewport-aware padding. !important beats the theme cap and WP's
   `.is-layout-constrained > :where(...) { margin-inline: auto !important }`.
   (The theme's .site-content has overflow-x:hidden, so no horizontal scrollbar.) */
.is-layout-constrained > .wp-block-giving-menu,
.jixaw-flow > .wp-block-giving-menu {
  max-width: none !important;
  width: auto !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(1rem, calc((100vw - 1240px) / 2)) !important;
  padding-right: max(1rem, calc((100vw - 1240px) / 2)) !important;
  box-sizing: border-box;
}
/* Square hairline card — flat, no shadow, no radius. */
.giving-menu__card {
  display: flex;
  flex-direction: column;
  border: 1px solid #1b1612;
  background: #f7f5ea;
}
.giving-menu__media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
.giving-menu__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(20px, 3vw, 32px);
  /* Fill the (grid-stretched, equal-height) card so the CTA's margin-top:auto
     has slack to push against — otherwise buttons align to each card's text
     length, not the card bottom. */
  flex: 1;
}
/* Program names are long ("Artistic Director's Circle", "Groundbreakers"); wrap on
   spaces, and only break within a word as a last-resort overflow guard. The old
   word-break/hyphens rules split "GROUNDBREAKERS" mid-word in the cramped 644px
   layout (client complaint); with the breakout width above they're unnecessary. */
.giving-menu__heading {
  margin: 0;
  overflow-wrap: anywhere;
}
.giving-menu__desc {
  margin: 0;
}
/* The page's .jixaw-flow flow layout resets .wp-block-button margins to 0 at
   (0,2,0) specificity, which clobbers a bare .giving-menu__cta { margin-top:auto }.
   Scope ours to (0,3,0) so the CTA wins and bottom-aligns across the
   equal-height cards (paired with flex:1 on __body, which supplies the slack). */
.giving-menu .giving-menu__card .giving-menu__cta {
  margin-top: auto;
  padding-top: 0.5rem;
}
/* 2-up on tablets, all 4 programs across on desktop now that the breakout gives
   the grid the real page width (client asked for the boxes to fill the page). */
@media (min-width: 700px) {
  .giving-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1170px) {
  .giving-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- other-ways-to-give ---------- */
.other-ways {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.other-ways__heading {
  margin-bottom: 1.5rem;
}
/* Flat hairline accordion rows — square, no shadow. */
.other-ways__item {
  border-bottom: 1px solid #1b1612;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.other-ways__summary {
  cursor: pointer;
}
.other-ways__body {
  margin-top: 0.75rem;
}