/* ==========================================================================
   Sigma Nu — Digital Experience (LWR) theme
   v4

   THE RULE
   --------
   Never set width, height, padding, margin, float, or display on an SLDS
   GRID class — .slds-col, .slds-size_*, .slds-medium-size_*, .slds-grid.
   Those carry Linvio's responsive layout. v2 overrode them and collapsed the
   two-column form.

   Linvio's OWN classes (.pc-donation-button, .pc-btn-donation, .pc-donation-
   input) are leaf elements, not layout containers. Sizing those is safe and
   is how the amount buttons get equal heights below.

   INSTALL
     Static Resource: sigmanu_dxp_theme    Cache Control: PUBLIC
     Head Markup:
       <link rel="stylesheet" href="https://use.typekit.net/ixi7hub.css">
       <link rel="stylesheet" href="/sfsites/c/resource/sigmanu_dxp_theme?v=4">
     Bump ?v= on every change, then republish the site.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --sn-black:     #000000;
  --sn-gold:      #aa9b70;
  --sn-dkgrey:    #4c4c4c;
  --sn-lt-gold:   #d4cdb7;
  --sn-beige:     #f1efea;
  --sn-rule-grey: #979797;
  --sn-white:     #ffffff;
  --sn-error:     #ba0517;

  --sn-font-heading: "Honor-Display", Georgia, serif;
  --sn-font-body:    acumin-pro, "Helvetica Neue", Arial, sans-serif;
  --sn-font-eyebrow: industry, "Helvetica Neue", Arial, sans-serif;

  /* Single source for amount-button height. Change here, both components
     follow, and the custom-amount field stays aligned with them. */
  --sn-amount-height: 56px;
}


/* ==========================================================================
   2. FONTS
   ========================================================================== */
@font-face {
  font-family: "Honor-Display";
  src: url('/sfsites/c/resource/sigmanu_honor_display') format('woff2');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   3. SLDS STYLING HOOKS — colour and shape only
   ========================================================================== */
:root {
  --sds-c-button-radius-border:   0;
  --sds-c-input-radius-border:    0;
  --sds-c-textarea-radius-border: 0;
  --sds-c-combobox-radius-border: 0;
  --sds-c-checkbox-radius-border: 0;
  --sds-c-card-radius-border:     0;

  --sds-c-input-color-border:    var(--sn-rule-grey);
  --sds-c-textarea-color-border: var(--sn-rule-grey);
  --sds-c-combobox-color-border: var(--sn-rule-grey);
  --sds-c-checkbox-color-border: var(--sn-rule-grey);
  --sds-c-radio-color-border:    var(--sn-rule-grey);

  --sds-c-input-color-border-focus:    var(--sn-gold);
  --sds-c-combobox-color-border-focus: var(--sn-gold);
  --sds-c-input-shadow-focus:          0 0 0 2px var(--sn-lt-gold);

  --sds-c-checkbox-color-background-checked: var(--sn-gold);
  --sds-c-checkbox-color-border-checked:     var(--sn-gold);
  --sds-c-radio-mark-color-foreground:       var(--sn-gold);
  --sds-c-radio-color-border-checked:        var(--sn-gold);

  --sds-c-card-shadow: none;
  --sds-c-input-font-family: var(--sn-font-body);
}


/* ==========================================================================
   4. PAGE SHELL TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sn-font-heading);
  font-weight: 700;
  color: var(--sn-black);
}
h4 { color: var(--sn-gold); }

.sn-eyebrow {
  font-family: var(--sn-font-eyebrow);
  text-transform: uppercase;
  color: var(--sn-gold);
  letter-spacing: 4px;
}


/* ==========================================================================
   5. FORM LABELS AND VALIDATION
   Colour and typeface only — no width, float, or padding.
   ========================================================================== */
.slds-form-element__label {
  font-family: var(--sn-font-body);
  font-weight: 500;
  color: var(--sn-black);
}

.slds-required { color: var(--sn-gold); }

/* Validation messages. Colour only — .slds-form-element__help is present in
   the DOM even when empty, so giving it a background or padding paints a grey
   band down the whole form. That was the v2 bug. */
.slds-form-element__help { color: var(--sn-error); }

.slds-select,
.slds-input {
  font-family: var(--sn-font-body);
  border-radius: 0;
}


/* ==========================================================================
   6. DONATION AMOUNT BUTTONS
   Two components with different markup, same visual treatment.

     Component A (Pledge):    .pc-donationbuttons > .pc-btn-donation
                              .pc-input-donation-other > input
     Component B (One-time):  .slds-col > .pc-donation-button
                              .pc-donation-input

   Explicit height + matching line-height is what makes them uniform. These
   are Linvio leaf elements, so sizing them does not disturb the SLDS grid
   wrappers around them.
   ========================================================================== */
/* SPECIFICITY NOTE
   Linvio scopes its own rules as `.pc-cmp-donationamount .pc-donation-button`
   — (0,2,0) — and Aura injects component styles at runtime, after Head
   Markup. A single .pc-donation-button selector loses on both specificity and
   order, which is why v4's colours and border-radius never applied.

   The doubled class raises specificity to (0,2,0) without needing to know
   Linvio's ancestor chain, and !important settles the source-order tie. Ugly,
   but the alternative is guessing at wrapper classes that may change on the
   next managed-package upgrade. */
.pc-btn-donation.pc-btn-donation,
.pc-donation-button.pc-donation-button {
  /* Flex centring rather than line-height. line-height only centres text when
     the element is a plain block whose line box fills the full height — if
     Linvio sets its own display or padding, or the label ever wraps to two
     lines, the text drifts off centre. align-items handles both cases. */
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--sn-amount-height) !important;
  min-height: var(--sn-amount-height);
  line-height: 1.2 !important;
  padding: 0 12px;
  text-align: center;
  font-family: var(--sn-font-body);
  font-size: 22px;
  font-weight: 400;
  color: var(--sn-white) !important;
  background-color: var(--sn-gold) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease;
}

.pc-btn-donation.pc-btn-donation:hover,
.pc-donation-button.pc-donation-button:hover {
  background-color: var(--sn-dkgrey) !important;
  color: var(--sn-white) !important;
}

/* Keyboard focus. These are <div> elements, not <button>, so they get no
   focus ring for free. */
.pc-btn-donation:focus-visible,
.pc-donation-button:focus-visible {
  outline: 2px solid var(--sn-black);
  outline-offset: 2px;
}

/* --- SELECTED STATE ---
   Linvio adds a plain .selected class on click.

     resting            = gold      #aa9b70
     hover and selected = dark grey #4c4c4c
     selected           = + black underline

   The underline replaces the earlier 3px gold ring, which read as a heavy
   frame. It reuses the site's own selection vocabulary — the same 6px black
   underline the submit button carries — and being on one edge rather than
   four, it stays legible at small sizes.

   inset box-shadow, not border-bottom: it paints without occupying space, so
   a selected button stays exactly the same height as its neighbours and the
   row does not shift when a donor changes their mind.

   The underline is also the only thing distinguishing selected from hovered,
   since both are dark grey. That matters beyond aesthetics: these are <div>
   elements with no role="radio" and no aria-checked, so a screen reader
   announces "$500" identically either way. */
.pc-btn-donation.pc-btn-donation.selected,
.pc-donation-button.pc-donation-button.selected,
.pc-btn-donation.pc-btn-donation.selected:hover,
.pc-donation-button.pc-donation-button.selected:hover {
  background-color: var(--sn-dkgrey) !important;
  color: var(--sn-white) !important;
  box-shadow: inset 0 -6px 0 0 var(--sn-black);
}

/* --- Custom amount field, Component A --- */
/* --- Custom amount field, Component A ---
   The input is type="number", so a literal "$" can't live in its value.

   FLEX ROW, not absolute positioning. The first attempt placed the "$"
   absolutely and pushed the text clear with padding-left on the input —
   Linvio sets that padding more specifically, so the padding lost and the
   glyph landed on top of the "0". Here the "$" is a flex ITEM sibling of the
   input, so the input is displaced by layout rather than by padding and
   cannot be overlapped whatever padding wins.

   This also mirrors Component B, which builds its custom-amount field as a
   flex row containing a real "$" div.

   The border moves to the wrapper so the "$" sits inside the box; the input
   itself goes borderless and transparent.

   The field ships pre-filled with a 0.00 VALUE, so placeholder="$0.00" never
   renders — no doubled dollar sign. */
.pc-input-donation-other {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: var(--sn-amount-height);
  padding: 0 12px;
  background-color: var(--sn-white);
  border: 1px solid var(--sn-gold);
  border-radius: 0;
}

.pc-input-donation-other::before {
  content: "$";
  flex: 0 0 auto;
  font-family: var(--sn-font-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--sn-black);
  pointer-events: none;
}

.pc-input-donation-other input {
  flex: 1 1 auto;
  /* min-width:0 stops the number input from refusing to shrink below its
     default intrinsic width and overflowing the wrapper */
  min-width: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  font-family: var(--sn-font-body);
  font-size: 22px;
  color: var(--sn-black);
  /* !important on these three: Linvio scopes its own rule against this input
     and already beat the padding once. Without it the input keeps its own
     border and you get a second box drawn inside the wrapper's. */
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pc-input-donation-other input:focus {
  outline: none;
  box-shadow: none !important;
}

/* Focus treatment lives on the wrapper, since the input no longer draws a
   border. A soft halo rather than an outline — outline-offset was painting a
   discrete third rectangle around the field. */
.pc-input-donation-other:focus-within {
  border-color: var(--sn-gold);
  box-shadow: 0 0 0 2px var(--sn-lt-gold);
}

/* --- Custom amount field, Component B ---
   This one is a composite: a flex row holding a "$" and a placeholder div.
   align-items centres them against the taller box. */
.pc-donation-input {
  box-sizing: border-box;
  min-height: var(--sn-amount-height);
  align-items: center;
  padding: 0 12px;
  font-family: var(--sn-font-body);
  font-size: 22px;
  background-color: var(--sn-white);
  border: 1px solid var(--sn-gold);
  border-radius: 0;
}

.pc-donation-input-placeholder { color: #6b6b6b; }

.pc-donation-input input {
  font-family: var(--sn-font-body);
  font-size: 22px;
  border: none;
  background: transparent;
}


/* --- GIVING LEVEL PAGES -------------------------------------------------
   On pages where amount buttons carry tier names ("$1,000 Member Level"),
   four-across is far too cramped and the labels wrap mid-phrase. Stack them
   full width instead, one per row.

   The .sn-has-levels class is added by snDonationResize.js on exactly the
   pages listed in its LEVEL_LABELS map — it is NOT set in Experience Builder.
   That keeps this scoped automatically: pages with bare numeric amounts never
   match, and keep their four-across grid.

   This is the one place the stylesheet overrides an SLDS sizing class. It is
   safe only because of that scoping. Widening .slds-medium-size_1-of-4
   unscoped would collapse the amount row on every donation page.
------------------------------------------------------------------------- */
.sn-has-levels > .slds-col.slds-medium-size_1-of-4 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Long labels wrap on narrow viewports, so the fixed height would clip them.
   min-height keeps short labels aligned with the rest of the form. */
.sn-has-levels .pc-donation-button,
.sn-has-levels .pc-btn-donation {
  height: auto !important;
  min-height: var(--sn-amount-height);
  padding: 12px !important;
  text-align: center;
}


/* ==========================================================================
   6b. HIDE THE "MAKE THIS RECURRING" TOGGLE
   All recurring gifts route to their own form, so this control never applies.

   *** THE TOGGLE DEFAULTS TO CHECKED. ***
   CSS hides it; it does not uncheck it. If the component submits the checked
   value, one-time donors get enrolled in recurring billing without seeing it.
   Hide this in Linvio's component config if that option exists, and either
   way place a test donation and confirm the resulting record is one-time.

   TARGETING: both columns carry identical class strings
   (.slds-size_12-of-12.slds-medium-size_6-of-12), so there is no direct
   handle. The only distinguishing marker is `.initial-aligned` on the
   toggle's own .slds-form-element, so :has() reaches up from that to the
   column. This is more durable than :first-child, which would hide the wrong
   control if Linvio ever swaps the column order.
   ========================================================================== */
.slds-grid_align-spread > *:has(> .slds-form-element.initial-aligned) {
  display: none !important;
}

/* With one of the two columns gone, slds-grid_align-spread leaves the
   frequency select stranded on the left. Centre it. Scoped by :has() so this
   only affects grids that actually contained the hidden toggle — every other
   spread grid on the site is untouched. */
.slds-grid_align-spread:has(> * > .slds-form-element.initial-aligned) {
  justify-content: center;
}

/* Pledge component: same markup, and the wrapper here does have its own
   class, so it can be scoped directly rather than by :has(). */
.pc-donationamount-recurringoptions
  > .slds-grid
  > *:has(> .slds-form-element.initial-aligned) {
  display: none !important;
}
.pc-donationamount-recurringoptions > .slds-grid {
  justify-content: center;
}


/* ==========================================================================
   7. SUBMIT BUTTONS
   Gold block, white 6px underline, dark grey on hover — the .black .button
   treatment from the WordPress theme.

   The underline uses inset box-shadow rather than border-bottom so it paints
   without occupying space and cannot change the button's height.

   SELECTOR NOTE: the submit button renders as .slds-button_neutral, which is
   also what Flow "Previous" buttons use — styling all neutral buttons gold
   would turn every back-button into a call to action. So it is scoped by
   aria-label instead.

   ^= is a prefix match, so it covers "Donate", "Donate!", "Donate Now" and
   anything else starting with that word — the relabel script can change the
   trailing punctuation without breaking the styling. A label that does NOT
   start with "Donate" will silently revert the button to plain SLDS grey, so
   if the wording is ever changed to something else entirely, update this
   selector to match.
   ========================================================================== */
/* The resting underline was losing a specificity contest. The markup is
   class="slds-button slds-button_brand", and SLDS/Kinetics scopes its own
   rule as `.slds-button.slds-button_brand` — (0,2,0) — against my (0,1,0).
   Hover worked only because :hover added a point. Matching both classes plus
   !important settles it, and also overrides the kx-type="ripple" treatment,
   which paints its own box-shadow. */
.slds-button.slds-button_brand,
.slds-button.slds-button--brand,
.slds-button_neutral[aria-label^="Donate"] {
  background-color: var(--sn-gold);
  border: none;
  border-radius: 0;
  box-shadow: inset 0 -6px 0 0 var(--sn-black) !important;
  /* White on #aa9b70 is 2.75:1. Below the 4.5:1 AA threshold, kept to match
     the main site's button treatment — a deliberate call, not an oversight. */
  color: var(--sn-white);
  font-family: var(--sn-font-body);
  font-weight: 400;
  font-size: 20px;
  text-transform: capitalize;
  /* Matches the site's .button: 20px padding against a 20px line-height, for
     a 60px content box. Extra inline padding because SLDS buttons carry far
     less side padding than the WordPress ones. height:auto is required — SLDS
     sets a fixed button height that would otherwise clip this. !important
     because Aura injects component CSS after Head Markup. */
  padding: 20px 30px !important;
  line-height: 20px !important;
  height: auto !important;
  min-height: 0;
}

.slds-button.slds-button_brand:hover,
.slds-button.slds-button_brand:focus,
.slds-button.slds-button--brand:hover,
.slds-button_neutral[aria-label^="Donate"]:hover,
.slds-button_neutral[aria-label^="Donate"]:focus {
  background-color: var(--sn-dkgrey);
  color: var(--sn-white);
  box-shadow: inset 0 -6px 0 0 var(--sn-black) !important;
}

/* Everything else neutral stays quiet — Previous, Cancel, and similar */
.slds-button_neutral {
  border-radius: 0;
  font-family: var(--sn-font-body);
}

/* Hand-built buttons in Rich Text components */
.sn-button,
.sn-button:link,
.sn-button:visited {
  display: inline-block;
  padding: 20px;
  font-family: var(--sn-font-body);
  font-size: 20px;
  line-height: 20px;
  color: var(--sn-white) !important;
  background-color: var(--sn-gold);
  border: none;
  border-bottom: 6px solid var(--sn-black);
  border-radius: 0;
  text-transform: capitalize;
  text-decoration: none !important;
  cursor: pointer;
}
.sn-button:hover { background-color: var(--sn-dkgrey); }


/* ==========================================================================
   8. FOCUS VISIBILITY
   The WordPress theme's `:focus { outline: 0 }` is deliberately not carried
   over — removing focus indicators on a form collecting donor and payment
   details is a real accessibility failure.
   ========================================================================== */
.slds-button:focus-visible,
.sn-button:focus-visible,
.slds-input:focus,
.slds-select:focus,
.slds-textarea:focus {
  outline: 2px solid var(--sn-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   9. EMBED CONTEXT
   Renders inside an iframe on sigmanu.org, which supplies the outer chrome.
   No margin or padding changes — the resize observer measures child bounding
   boxes and any box-model shift here changes what it reads.
   ========================================================================== */
body { background-color: transparent; }