/* ==========================================================================
   charitable-shukr.css — Courtyard skin for the Charitable donation form
   --------------------------------------------------------------------------
   Requires: css/tokens.css
   Enqueue AFTER the plugin's own charitable.css, e.g.

     add_action( 'wp_enqueue_scripts', function () {
         wp_enqueue_style(
             'charitable-shukr',
             get_stylesheet_directory_uri() . '/css/charitable-shukr.css',
             array( 'charitable-styles' ),   // plugin handle
             '1.0.0'
         );
     }, 20 );

   Wrap the form in <div class="shukr-give"> … </div>. That wrapper exists
   purely for specificity: the plugin's rules are 2–3 selectors deep, so an
   extra ancestor class beats them without a single !important.

   EVERY selector below is taken from the plugin source, not invented:
     templates/donation-form/form-donation.php
     templates/donation-form/donation-amount.php
     templates/donation-form/donation-amount-list.php
     templates/form-fields/default.php | select.php | checkbox.php | fieldset.php
     includes/public/charitable-template-helpers.php  (button classes)
     assets/css/charitable.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The card the form sits in
   -------------------------------------------------------------------------- */
.shukr-give {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-2xl);
  color: var(--color-limestone-900);
  font-family: var(--font-body);
}
.shukr-give * { box-sizing: border-box; }

/* Kill the plugin's default form chrome */
.shukr-give .charitable-form,
.shukr-give .charitable-donation-form { margin: 0; padding: 0; border: 0; background: none; }
.shukr-give .charitable-form-fields { margin: 0; padding: 0; border: 0; }
.shukr-give .charitable-fieldset { margin: 0 0 var(--space-6); padding: 0; border: 0; }
.shukr-give .charitable-fieldset:last-of-type { margin-bottom: 0; }

/* Fieldset legend -> eyebrow */
.shukr-give .charitable-form-header {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-clay-600);
  margin: 0 0 var(--space-4); padding: 0; border: 0; background: none;
}

/* --------------------------------------------------------------------------
   2. Suggested amounts
   <ul class="donation-amounts has-suggested-amounts donation-amounts-count-N">
     <li class="donation-amount suggested-donation-amount [selected]">
       <label><input type="radio" name="donation_amount">
              <span class="amount">$50</span> <span class="description">…</span></label>
   -------------------------------------------------------------------------- */
.shukr-give .charitable-donation-options { margin: 0 0 var(--space-5); }

.shukr-give .donation-amounts {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
}
.shukr-give .donation-amounts-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shukr-give .donation-amounts-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) {
  .shukr-give .donation-amounts-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.shukr-give .donation-amount { margin: 0; padding: 0; border: 0; background: none; float: none; width: auto; }

.shukr-give .donation-amount > label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; padding: 11px 12px; margin: 0; cursor: pointer; text-align: center;
  background: #fff;
  border: 1.5px solid var(--color-limestone-300);
  border-radius: var(--radius-md);
  transition: background-color .18s var(--ease-out),
              border-color .18s var(--ease-out),
              color .18s var(--ease-out);
}
.shukr-give .donation-amount > label:hover { border-color: var(--color-clay-500); }

/* Hide the native radio but keep it focusable and in the a11y tree */
.shukr-give .donation-amount input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.shukr-give .donation-amount .amount {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40, "SOFT" 24, "WONK" 0;
  font-weight: 600; font-size: 21px; line-height: 1.1; letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
  color: var(--color-limestone-900);
}
.shukr-give .donation-amount .description {
  font-size: 12px; line-height: 1.35; color: var(--color-limestone-600);
}

/* Selected. `.selected` is the plugin's own class (set server-side for the
   default and toggled by its JS); :has() is progressive enhancement. */
.shukr-give .donation-amount.selected > label,
.shukr-give .donation-amount:has(input[type="radio"]:checked) > label {
  background: var(--color-clay-50);
  border-color: var(--color-clay-600);
}
.shukr-give .donation-amount.selected .amount,
.shukr-give .donation-amount:has(input[type="radio"]:checked) .amount { color: var(--color-clay-800); }
.shukr-give .donation-amount.selected .description,
.shukr-give .donation-amount:has(input[type="radio"]:checked) .description { color: var(--color-clay-700); }

/* Keyboard focus — :focus-within, not :has, so it works everywhere */
.shukr-give .donation-amount:focus-within > label {
  outline: 2px solid var(--color-harbor-600); outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Custom amount
   <li class="donation-amount custom-donation-amount">
     <span class="custom-donation-amount-wrapper">
       <label><input type="radio" value="custom"><span class="description">Custom amount</span></label>
       <input type="text" class="custom-donation-input" name="custom_donation_amount">
   -------------------------------------------------------------------------- */
.shukr-give .donation-amounts.donation-suggested-amount {
  grid-template-columns: 1fr; margin-bottom: var(--space-5);
}
.shukr-give .custom-donation-amount-wrapper { display: block; }
.shukr-give .custom-donation-amount > .custom-donation-amount-wrapper > label {
  display: inline-flex; min-height: 0; padding: 0; border: 0; background: none;
  margin-bottom: var(--space-2); text-align: left;
}
.shukr-give .custom-donation-amount .description {
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--color-limestone-700);
}
.shukr-give .custom-donation-amount:focus-within > .custom-donation-amount-wrapper > label { outline: none; }
.shukr-give .custom-donation-amount:focus-within .description {
  color: var(--color-clay-700); text-decoration: underline; text-underline-offset: 3px;
}

.shukr-give .custom-donation-input,
.shukr-give .charitable-custom-donation-field-alone input[type="text"] {
  width: 100%; min-height: 56px; padding: 15px 17px;
  font-family: var(--font-body); font-size: 17px; line-height: 1.4;
  color: var(--color-limestone-900); background: #fff;
  border: 1px solid var(--color-limestone-300); border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.shukr-give .custom-donation-input::placeholder { color: var(--color-limestone-600); }
.shukr-give .custom-donation-input:hover { border-color: var(--color-limestone-400); }
.shukr-give .custom-donation-input:focus {
  outline: none; border-color: var(--color-harbor-600);
  box-shadow: 0 0 0 3px rgba(45, 90, 152, .22);
}

/* --------------------------------------------------------------------------
   4. Standard fields — templates/form-fields/default.php, select.php, checkbox.php
   <div class="charitable-form-field charitable-form-field-text">
     <label>Label <abbr class="required">*</abbr></label>
     <p class="charitable-field-help">…</p>
     <input …>
   -------------------------------------------------------------------------- */
.shukr-give .charitable-form-field {
  margin: 0 0 var(--space-5); padding: 0; border: 0; background: none; float: none; width: auto;
}
.shukr-give .charitable-form-field:last-child { margin-bottom: 0; }

.shukr-give .charitable-form-field > label {
  display: block; margin: 0 0 9px;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: var(--color-limestone-700);
}
.shukr-give .charitable-form-field abbr.required {
  color: var(--color-clay-600); text-decoration: none; border: 0; margin-left: 2px;
}
.shukr-give .charitable-field-help,
.shukr-give .charitable-field-description {
  margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-limestone-600);
}
.shukr-give .charitable-field-help { margin: 0 0 9px; }

.shukr-give .charitable-form-field input[type="text"],
.shukr-give .charitable-form-field input[type="email"],
.shukr-give .charitable-form-field input[type="tel"],
.shukr-give .charitable-form-field input[type="number"],
.shukr-give .charitable-form-field input[type="password"],
.shukr-give .charitable-form-field select,
.shukr-give .charitable-form-field textarea {
  width: 100%; min-height: 56px; padding: 15px 17px;
  font-family: var(--font-body); font-size: 17px; line-height: 1.4;
  color: var(--color-limestone-900); background: #fff;
  border: 1px solid var(--color-limestone-300); border-radius: var(--radius-md);
  transition: border-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.shukr-give .charitable-form-field textarea { min-height: 130px; resize: vertical; padding-top: 14px; }
.shukr-give .charitable-form-field input::placeholder,
.shukr-give .charitable-form-field textarea::placeholder { color: var(--color-limestone-600); }
.shukr-give .charitable-form-field input:hover,
.shukr-give .charitable-form-field select:hover,
.shukr-give .charitable-form-field textarea:hover { border-color: var(--color-limestone-400); }
.shukr-give .charitable-form-field input:focus,
.shukr-give .charitable-form-field select:focus,
.shukr-give .charitable-form-field textarea:focus {
  outline: none; border-color: var(--color-harbor-600);
  box-shadow: 0 0 0 3px rgba(45, 90, 152, .22);
}
.shukr-give .charitable-form-field select {
  appearance: none; padding-right: 48px; background-repeat: no-repeat; background-position: right 16px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236E665A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Checkbox / radio lists */
.shukr-give .charitable-form-field input[type="checkbox"],
.shukr-give .charitable-form-field input[type="radio"] {
  width: 22px; height: 22px; min-height: 0; margin: 0 10px 0 0; padding: 0;
  accent-color: var(--color-clay-600); vertical-align: -4px;
}
.shukr-give .charitable-form-field-checkbox > label,
.shukr-give .charitable-radio-list label {
  display: inline; font-weight: 400; font-size: 15.5px; color: var(--color-limestone-700);
}
.shukr-give .charitable-radio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* Two-column groups.
   ⚠ `.charitable-form-group` and `.charitable-form-group-number-1` are confirmed in
   charitable.css. `-number-2` is EXTRAPOLATED from that naming pattern — confirm the
   real suffix on a live install before relying on the two-column layout. */
.shukr-give .charitable-form-group { display: grid; gap: var(--space-4); }
@media (min-width: 560px) {
  .shukr-give .charitable-form-group-number-2 { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   5. Gateways
   -------------------------------------------------------------------------- */
.shukr-give .charitable-gateway-fields {
  margin: 0 0 var(--space-5); padding: var(--space-5);
  background: var(--color-limestone-50);
  border: 1px solid var(--color-limestone-200); border-radius: var(--radius-lg);
}
.shukr-give .charitable-gateway-fields .charitable-form-field:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Submit — button.button.charitable-button.donate-button.button-primary
      Matches the site CTA: filled, then a 2px outline on hover. The border is
      always 2px (transparent when filled) so nothing reflows.
   -------------------------------------------------------------------------- */
.shukr-give .charitable-submit-field { margin: var(--space-6) 0 0; }

.shukr-give .donate-button,
.shukr-give button.charitable-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font-family: var(--font-body); font-weight: 600; font-size: 16.5px; line-height: 1; letter-spacing: .005em;
  min-height: 58px; padding: 18px 33px;
  color: #fff; background: var(--color-clay-500);
  border: 2px solid var(--color-clay-500); border-radius: var(--radius-full);
  cursor: pointer; text-transform: none; text-shadow: none; box-shadow: none;
  transition: background-color .24s var(--ease-out), border-color .24s var(--ease-out),
              color .24s var(--ease-out), transform .18s var(--ease-out);
}
.shukr-give .donate-button:hover,
.shukr-give button.charitable-button:hover {
  background: transparent; border-color: var(--color-clay-600); color: var(--color-clay-700);
}
.shukr-give .donate-button:active { transform: translateY(1px); }
.shukr-give .donate-button:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(45, 90, 152, .32);
}
.shukr-give .donate-button[disabled] {
  background: var(--color-limestone-100); border-color: var(--color-limestone-200);
  color: var(--color-limestone-400); cursor: not-allowed;
}

.shukr-give .charitable-form-processing {
  margin-top: var(--space-3); font-size: 14px; color: var(--color-limestone-600); text-align: center;
}

/* --------------------------------------------------------------------------
   7. Notices
   -------------------------------------------------------------------------- */
.shukr-give .charitable-notice {
  margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md); border: 1px solid; border-left-width: 4px;
  font-size: 15px; line-height: 1.55; list-style: none;
}
.shukr-give .charitable-notice ul { margin: 0; padding-left: 18px; }
/* .charitable-notice-errors is confirmed; .charitable-form-errors is a guess kept as a
   harmless belt-and-braces selector. */
.shukr-give .charitable-notice-errors,
.shukr-give .charitable-form-errors {
  background: var(--color-error-50); border-color: var(--color-error-600); color: var(--color-error-700);
}

/* --------------------------------------------------------------------------
   8. Placed on the Clay panel — the card stays white, so only the surrounding
      copy needs inverting. Included for the inline layout used on the homepage.
   -------------------------------------------------------------------------- */
.give .shukr-give { box-shadow: var(--shadow-2xl); }

/* --------------------------------------------------------------------------
   9. Mini Donation Widget
      ⚠ UNVERIFIED. These class names come from assets/css/charitable-mini-widget.css;
      the free plugin ships no template for it, so the DOM nesting below is
      inferred. Check against a live install before relying on this block.
   -------------------------------------------------------------------------- */
.shukr-give .charitable-mini-widget__title {
  font-family: var(--font-display); font-variation-settings: "opsz" 40, "SOFT" 26, "WONK" 0;
  font-weight: 600; font-size: 22px; letter-spacing: -.015em; margin: 0 0 var(--space-4);
  color: var(--color-limestone-900);
}
.shukr-give .charitable-mini-widget__tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 var(--space-5);
  background: var(--color-limestone-100); border-radius: var(--radius-full);
}
.shukr-give .charitable-mini-widget__tab {
  font: inherit; font-size: 14px; font-weight: 600; min-height: 40px; padding: 8px 18px;
  border: 0; border-radius: var(--radius-full); background: none;
  color: var(--color-limestone-600); cursor: pointer;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.shukr-give .charitable-mini-widget__tab--active {
  background: #fff; color: var(--color-clay-700); box-shadow: var(--shadow-xs);
}
.shukr-give .charitable-mini-widget__amounts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.shukr-give .charitable-mini-widget__amount {
  min-height: 58px; padding: 11px 12px; cursor: pointer;
  font-family: var(--font-display); font-variation-settings: "opsz" 40, "SOFT" 24, "WONK" 0;
  font-weight: 600; font-size: 21px; letter-spacing: -.012em; font-variant-numeric: tabular-nums;
  color: var(--color-limestone-900); background: #fff;
  border: 1.5px solid var(--color-limestone-300); border-radius: var(--radius-md);
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.shukr-give .charitable-mini-widget__amount:hover { border-color: var(--color-clay-500); }
.shukr-give .charitable-mini-widget__amount--selected {
  background: var(--color-clay-50); border-color: var(--color-clay-600); color: var(--color-clay-800);
}
.shukr-give .charitable-mini-widget__other-input {
  width: 100%; min-height: 56px; padding: 15px 17px; font-size: 17px;
  border: 1px solid var(--color-limestone-300); border-radius: var(--radius-md);
}
.shukr-give .charitable-mini-widget__impact {
  margin: var(--space-4) 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-limestone-600);
}
.shukr-give .charitable-mini-widget__error {
  margin: var(--space-3) 0 0; font-size: 13.5px; color: var(--color-error-700);
}
.shukr-give .charitable-mini-widget__cta { /* inherits the .donate-button rules above */ }