/* ========================================================================== 
   DARQA x CiviCRM — Design tokens
   --------------------------------------------------------------------------
   Purpose:
   - Provide a stable set of CSS variables for styling CiviCRM public pages
   - Map DARQA/WordPress theme tokens to CiviCRM-specific aliases

   Scope:
   - Front-end only (guarded by body:not(.wp-admin))
   - Only affects content inside #crm-container/.crm-container
   ========================================================================== */

body:not(.wp-admin) #crm-container,
body:not(.wp-admin) .crm-container {
  /* --- Color tokens --- */
  --crm-surface: var(--darqa-surface, var(--wp--preset--color--darqa-surface, #ffffff));
  --crm-surface-muted: var(--darqa-surface-muted, var(--wp--preset--color--darqa-surface-muted, #f8f9fa));
  /* Optional “subtle” surface (falls back to a light gray) */
  --crm-surface-subtle: var(--darqa-surface-subtle, var(--wp--preset--color--darqa-gray-200, #e9ecef));

  --crm-border: var(--darqa-border, var(--wp--preset--color--darqa-border, #dee2e6));
  --crm-border-soft: var(--darqa-border-soft, var(--wp--preset--color--darqa-border-soft, #ced4da));

  --crm-text: var(--darqa-text, var(--wp--preset--color--darqa-text, #212529));
  --crm-text-strong: var(--darqa-text-strong, var(--wp--preset--color--darqa-text-strong, #343a40));
  --crm-text-muted: var(--darqa-text-muted, var(--wp--preset--color--darqa-text-muted, #6c757d));

  --crm-link: var(--darqa-link, var(--wp--preset--color--darqa-link, #007bff));
  --crm-link-hover: var(--darqa-link-hover, var(--wp--preset--color--darqa-link-hover, #0056b3));

  --crm-brand-blue: var(--darqa-brand-blue, var(--wp--preset--color--darqa-brand-blue, #1a61ab));
  --crm-brand-deep-blue: var(--darqa-brand-deep-blue, var(--wp--preset--color--darqa-brand-deep-blue, #114e7e));
  --crm-brand-teal: var(--darqa-brand-teal, var(--wp--preset--color--darqa-brand-teal, #00626e));

  --crm-success: var(--darqa-success, var(--wp--preset--color--darqa-success, #28a745));
  --crm-danger: var(--darqa-danger, var(--wp--preset--color--darqa-danger, #dc3545));
  --crm-warning: var(--darqa-warning, var(--wp--preset--color--darqa-warning, #ffc107));
  --crm-info: var(--darqa-info, var(--wp--preset--color--darqa-info, #17a2b8));

  /* --- Typography tokens --- */
  --crm-font-body: var(
    --darqa-font-sans,
    var(
      --darqa-font-body,
      var(
        --wp--preset--font-family--darqa-sans,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif
      )
    )
  );
  --crm-font-heading: var(--crm-font-body);
  --crm-font-mono: var(
    --darqa-font-mono,
    var(
      --wp--preset--font-family--darqa-mono,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    )
  );

  --crm-font-size-xs: var(--darqa-font-size-xs, var(--wp--preset--font-size--xs, 12px));
  --crm-font-size-sm: var(--darqa-font-size-sm, var(--wp--preset--font-size--sm, 13px));
  --crm-font-size-md: var(--darqa-font-size-md, var(--wp--preset--font-size--md, 14px));
  --crm-font-size-base: var(--darqa-font-size-base, var(--wp--preset--font-size--base, 16px));
  --crm-font-size-lg: var(--darqa-font-size-lg, var(--wp--preset--font-size--lg, 20px));

  --crm-line-height: 1.55;

  /* --- Spacing tokens --- */
  --crm-space-1: var(--space-1, var(--wp--preset--spacing--1, 4px));
  --crm-space-2: var(--space-2, var(--wp--preset--spacing--2, 8px));
  --crm-space-3: var(--space-3, var(--wp--preset--spacing--3, 12px));
  --crm-space-4: var(--space-4, var(--wp--preset--spacing--4, 16px));
  --crm-space-5: var(--space-5, var(--wp--preset--spacing--5, 24px));
  --crm-space-6: var(--space-6, var(--wp--preset--spacing--6, 32px));
  --crm-space-7: var(--space-7, var(--wp--preset--spacing--7, 48px));

  /* --- Component metrics --- */
  --crm-radius: var(--darqa-radius, 0px);
  --crm-border-width: var(--darqa-border-width, 1px);
  --crm-focus-ring: var(--darqa-focus-ring, 0 0 0 3px rgba(0, 123, 255, 0.25));

  /* Inputs */
  --crm-input-bg: var(--crm-surface-muted);
  --crm-input-padding-y: 6px;
  --crm-input-padding-x: 8px;

  /* Buttons */
  --crm-button-padding-y: 6px;
  --crm-button-padding-x: 12px;
  --crm-button-font-weight: 600;

  /* Tables */
  --crm-table-cell-padding-y: 8px;
  --crm-table-cell-padding-x: 10px;

  /* Cards / panels */
  --crm-card-padding: 16px;
  --crm-card-bg: var(--crm-surface);
  --crm-card-bg-muted: var(--crm-surface-muted);

  /* Primary CTA (events/membership) */
  --crm-cta-bg: var(--crm-brand-blue);
  --crm-cta-bg-hover: var(--crm-link-hover);
}
/* ========================================================================== 
   DARQA x CiviCRM — Base layer
   --------------------------------------------------------------------------
   - Typography + element defaults inside CiviCRM public output
   - Safe, low-risk overrides (no structural layout changes)
   ========================================================================== */

body:not(.wp-admin) #crm-container,
body:not(.wp-admin) .crm-container {
  font-family: var(--crm-font-body);
  font-size: var(--crm-font-size-base);
  line-height: var(--crm-line-height);
  color: var(--crm-text);
}

body:not(.wp-admin) #crm-container *,
body:not(.wp-admin) .crm-container * {
  box-sizing: border-box;
}

/* Links */
body:not(.wp-admin) .crm-container a,
body:not(.wp-admin) #crm-container a {
  color: var(--crm-link);
  text-decoration: none;
}

body:not(.wp-admin) .crm-container a:hover,
body:not(.wp-admin) .crm-container a:focus,
body:not(.wp-admin) #crm-container a:hover,
body:not(.wp-admin) #crm-container a:focus {
  color: var(--crm-link-hover);
  text-decoration: underline;
}

body:not(.wp-admin) .crm-container a:focus-visible,
body:not(.wp-admin) #crm-container a:focus-visible {
  outline: none;
  box-shadow: var(--crm-focus-ring);
}

/* Headings */
body:not(.wp-admin) .crm-container h1,
body:not(.wp-admin) .crm-container h2,
body:not(.wp-admin) .crm-container h3,
body:not(.wp-admin) .crm-container h4,
body:not(.wp-admin) .crm-container h5,
body:not(.wp-admin) .crm-container h6,
body:not(.wp-admin) #crm-container h1,
body:not(.wp-admin) #crm-container h2,
body:not(.wp-admin) #crm-container h3,
body:not(.wp-admin) #crm-container h4,
body:not(.wp-admin) #crm-container h5,
body:not(.wp-admin) #crm-container h6 {
  color: var(--crm-brand-deep-blue);
  line-height: 1.25;
}

body:not(.wp-admin) .crm-container h1,
body:not(.wp-admin) #crm-container h1 {
  margin-top: 0;
  margin-bottom: var(--crm-space-4);
  font-size: clamp(24px, 3vw, 32px);
}

body:not(.wp-admin) .crm-container h2,
body:not(.wp-admin) #crm-container h2 {
  margin-top: var(--crm-space-6);
  margin-bottom: var(--crm-space-3);
  font-size: clamp(20px, 2.4vw, 26px);
}

body:not(.wp-admin) .crm-container h3,
body:not(.wp-admin) #crm-container h3 {
  margin-top: var(--crm-space-5);
  margin-bottom: var(--crm-space-2);
  font-size: 20px;
}

/* Paragraph rhythm */
body:not(.wp-admin) .crm-container p,
body:not(.wp-admin) #crm-container p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* Code */
body:not(.wp-admin) .crm-container code,
body:not(.wp-admin) #crm-container code {
  font-family: var(--crm-font-mono);
  font-size: 0.95em;
}

/* Images: avoid overflow */
body:not(.wp-admin) .crm-container img,
body:not(.wp-admin) #crm-container img {
  max-width: 100%;
  height: auto;
}

/* Thin institutional separators */
body:not(.wp-admin) .crm-container hr,
body:not(.wp-admin) #crm-container hr {
  border: 0;
  border-top: var(--crm-border-width) solid var(--crm-border);
}

/* Generic block spacing */
body:not(.wp-admin) .crm-container .crm-block,
body:not(.wp-admin) #crm-container .crm-block {
  margin-bottom: var(--crm-space-4);
}

/* Light “card” treatment for public blocks (doesn’t fight Civi core layout) */
body:not(.wp-admin) .crm-container .crm-public .crm-block,
body:not(.wp-admin) #crm-container.crm-public .crm-block {
  background: var(--crm-card-bg);
}
/* ========================================================================== 
   DARQA x CiviCRM — Messages / validation / help
   ========================================================================== */

/* Core message blocks */
body:not(.wp-admin) .crm-container .messages,
body:not(.wp-admin) #crm-container .messages,
body:not(.wp-admin) .crm-container .crm-error,
body:not(.wp-admin) #crm-container .crm-error {
  border: var(--crm-border-width) solid var(--crm-border);
  padding: var(--crm-space-3);
  margin: var(--crm-space-4) 0;
  background: var(--crm-surface-muted);
}

/* Variants (Civi commonly adds status/error/warning/help classes) */
body:not(.wp-admin) .crm-container .messages.status,
body:not(.wp-admin) #crm-container .messages.status {
  border-left: 4px solid var(--crm-success);
  background: var(--crm-surface-muted);
  /* Progressive enhancement */
  background: color-mix(in srgb, var(--crm-success) 10%, var(--crm-surface));
}

body:not(.wp-admin) .crm-container .messages.error,
body:not(.wp-admin) #crm-container .messages.error,
body:not(.wp-admin) .crm-container .crm-error,
body:not(.wp-admin) #crm-container .crm-error {
  border-left: 4px solid var(--crm-danger);
  background: var(--crm-surface-muted);
  background: color-mix(in srgb, var(--crm-danger) 8%, var(--crm-surface));
}

body:not(.wp-admin) .crm-container .messages.warning,
body:not(.wp-admin) #crm-container .messages.warning {
  border-left: 4px solid var(--crm-warning);
  background: var(--crm-surface-muted);
  background: color-mix(in srgb, var(--crm-warning) 14%, var(--crm-surface));
}

body:not(.wp-admin) .crm-container .messages.help,
body:not(.wp-admin) #crm-container .messages.help {
  border-left: 4px solid var(--crm-info);
  background: var(--crm-surface-muted);
  background: color-mix(in srgb, var(--crm-info) 10%, var(--crm-surface));
}

/* Inline help/description */
body:not(.wp-admin) .crm-container .description,
body:not(.wp-admin) #crm-container .description,
body:not(.wp-admin) .crm-container .help,
body:not(.wp-admin) #crm-container .help,
body:not(.wp-admin) .crm-container .crm-help,
body:not(.wp-admin) #crm-container .crm-help {
  color: var(--crm-text-muted);
  font-size: var(--crm-font-size-sm);
}

/* Required marker */
body:not(.wp-admin) .crm-container .crm-marker,
body:not(.wp-admin) #crm-container .crm-marker,
body:not(.wp-admin) .crm-container .required,
body:not(.wp-admin) #crm-container .required {
  color: var(--crm-danger);
}

/* Field-level errors */
body:not(.wp-admin) .crm-container .error,
body:not(.wp-admin) #crm-container .error,
body:not(.wp-admin) .crm-container .crm-error-message,
body:not(.wp-admin) #crm-container .crm-error-message {
  color: var(--crm-danger);
}
/* ========================================================================== 
   DARQA x CiviCRM — Forms
   --------------------------------------------------------------------------
   Targets common CiviCRM public forms:
   - event registration
   - membership / contribution checkout
   - newsletter subscribe/unsubscribe
   - profile create/edit
   ========================================================================== */

/* Text inputs */
body:not(.wp-admin) .crm-container input[type="text"],
body:not(.wp-admin) .crm-container input[type="email"],
body:not(.wp-admin) .crm-container input[type="password"],
body:not(.wp-admin) .crm-container input[type="search"],
body:not(.wp-admin) .crm-container input[type="tel"],
body:not(.wp-admin) .crm-container input[type="url"],
body:not(.wp-admin) .crm-container input[type="number"],
body:not(.wp-admin) #crm-container input[type="text"],
body:not(.wp-admin) #crm-container input[type="email"],
body:not(.wp-admin) #crm-container input[type="password"],
body:not(.wp-admin) #crm-container input[type="search"],
body:not(.wp-admin) #crm-container input[type="tel"],
body:not(.wp-admin) #crm-container input[type="url"],
body:not(.wp-admin) #crm-container input[type="number"],
body:not(.wp-admin) .crm-container select,
body:not(.wp-admin) #crm-container select,
body:not(.wp-admin) .crm-container textarea,
body:not(.wp-admin) #crm-container textarea {
  background: var(--crm-input-bg);
  border: var(--crm-border-width) solid var(--crm-border);
  color: var(--crm-text);
  padding: var(--crm-input-padding-y) var(--crm-input-padding-x);
  border-radius: var(--crm-radius);
  max-width: 100%;
}

body:not(.wp-admin) .crm-container textarea,
body:not(.wp-admin) #crm-container textarea {
  min-height: 120px;
}

/* Placeholder */
body:not(.wp-admin) .crm-container ::placeholder,
body:not(.wp-admin) #crm-container ::placeholder {
  color: var(--crm-text-muted);
  color: color-mix(in srgb, var(--crm-text-muted) 75%, transparent);
}

/* Focus ring */
body:not(.wp-admin) .crm-container input:focus,
body:not(.wp-admin) #crm-container input:focus,
body:not(.wp-admin) .crm-container select:focus,
body:not(.wp-admin) #crm-container select:focus,
body:not(.wp-admin) .crm-container textarea:focus,
body:not(.wp-admin) #crm-container textarea:focus {
  outline: none;
  box-shadow: var(--crm-focus-ring);
}

/* Labels inside CiviCRM sections */
body:not(.wp-admin) .crm-container .crm-section .label,
body:not(.wp-admin) #crm-container .crm-section .label,
body:not(.wp-admin) .crm-container .crm-section label,
body:not(.wp-admin) #crm-container .crm-section label {
  color: var(--crm-text-strong);
  font-weight: 600;
}

/* Keep sections readable */
body:not(.wp-admin) .crm-container .crm-section,
body:not(.wp-admin) #crm-container .crm-section {
  margin-bottom: var(--crm-space-3);
}

/* Better mobile stacking (does not change desktop layout rules) */
@media (max-width: 720px) {
  body:not(.wp-admin) .crm-container .crm-section .label,
  body:not(.wp-admin) #crm-container .crm-section .label,
  body:not(.wp-admin) .crm-container .crm-section .content,
  body:not(.wp-admin) #crm-container .crm-section .content {
    float: none !important;
    width: 100% !important;
    display: block;
  }

  body:not(.wp-admin) .crm-container .crm-section .label,
  body:not(.wp-admin) #crm-container .crm-section .label {
    margin-bottom: var(--crm-space-1);
  }
}

/* Checkboxes + radios */
body:not(.wp-admin) .crm-container input[type="checkbox"],
body:not(.wp-admin) #crm-container input[type="checkbox"],
body:not(.wp-admin) .crm-container input[type="radio"],
body:not(.wp-admin) #crm-container input[type="radio"] {
  accent-color: var(--crm-brand-blue);
}

/* Fieldsets */
body:not(.wp-admin) .crm-container fieldset,
body:not(.wp-admin) #crm-container fieldset {
  border: var(--crm-border-width) solid var(--crm-border);
  padding: var(--crm-space-4);
  margin: var(--crm-space-4) 0;
}

body:not(.wp-admin) .crm-container legend,
body:not(.wp-admin) #crm-container legend {
  font-weight: 700;
  color: var(--crm-text-strong);
  padding: 0 var(--crm-space-2);
}

/* “Clear date” helper */
body:not(.wp-admin) .crm-container .crm-clear-link,
body:not(.wp-admin) #crm-container .crm-clear-link {
  font-size: var(--crm-font-size-sm);
}

/* Select2 (commonly used by CiviCRM) */
body:not(.wp-admin) .crm-container .select2-container .select2-selection,
body:not(.wp-admin) #crm-container .select2-container .select2-selection {
  background: var(--crm-input-bg);
  border: var(--crm-border-width) solid var(--crm-border);
  border-radius: var(--crm-radius);
  min-height: 34px;
}

body:not(.wp-admin) .crm-container .select2-container--default .select2-selection--single .select2-selection__rendered,
body:not(.wp-admin) #crm-container .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--crm-text);
  line-height: 32px;
}

body:not(.wp-admin) .crm-container .select2-container--default.select2-container--focus .select2-selection,
body:not(.wp-admin) #crm-container .select2-container--default.select2-container--focus .select2-selection {
  box-shadow: var(--crm-focus-ring);
  border-color: var(--crm-link);
}

/* jQuery UI Datepicker (CiviCRM uses jQuery UI widgets in several places) */
body:not(.wp-admin) .crm-container .ui-datepicker,
body:not(.wp-admin) #crm-container .ui-datepicker {
  border: var(--crm-border-width) solid var(--crm-border);
  background: var(--crm-surface);
  color: var(--crm-text);
  padding: var(--crm-space-2);
  border-radius: var(--crm-radius);
}

body:not(.wp-admin) .crm-container .ui-datepicker .ui-datepicker-header,
body:not(.wp-admin) #crm-container .ui-datepicker .ui-datepicker-header {
  background: var(--crm-surface-muted);
  border: var(--crm-border-width) solid var(--crm-border);
  border-radius: var(--crm-radius);
}

body:not(.wp-admin) .crm-container .ui-datepicker th,
body:not(.wp-admin) #crm-container .ui-datepicker th {
  color: var(--crm-text-strong);
  font-weight: 700;
}

body:not(.wp-admin) .crm-container .ui-state-default,
body:not(.wp-admin) #crm-container .ui-state-default {
  background: var(--crm-surface);
  border: var(--crm-border-width) solid var(--crm-border);
  color: var(--crm-text);
}

body:not(.wp-admin) .crm-container .ui-state-hover,
body:not(.wp-admin) #crm-container .ui-state-hover {
  border-color: var(--crm-link-hover);
  color: var(--crm-link-hover);
}

body:not(.wp-admin) .crm-container .ui-state-active,
body:not(.wp-admin) #crm-container .ui-state-active {
  background: var(--crm-link);
  border-color: var(--crm-link);
  color: var(--crm-surface);
}
/* ========================================================================== 
   DARQA x CiviCRM — Buttons / actions
   ========================================================================== */

/* Default button look (mirrors DARQA WP button styling) */
body:not(.wp-admin) .crm-container .crm-button a,
body:not(.wp-admin) #crm-container .crm-button a,
body:not(.wp-admin) .crm-container .crm-button button,
body:not(.wp-admin) #crm-container .crm-button button,
body:not(.wp-admin) .crm-container .crm-button input,
body:not(.wp-admin) #crm-container .crm-button input,
body:not(.wp-admin) .crm-container button,
body:not(.wp-admin) #crm-container button,
body:not(.wp-admin) .crm-container input[type="submit"],
body:not(.wp-admin) #crm-container input[type="submit"],
body:not(.wp-admin) .crm-container input[type="button"],
body:not(.wp-admin) #crm-container input[type="button"] {
  background: var(--crm-link);
  border: var(--crm-border-width) solid var(--crm-link);
  color: var(--crm-surface);
  padding: var(--crm-button-padding-y) var(--crm-button-padding-x);
  border-radius: var(--crm-radius);
  font-weight: var(--crm-button-font-weight);
  text-decoration: none;
  cursor: pointer;
}

body:not(.wp-admin) .crm-container .crm-button a:hover,
body:not(.wp-admin) #crm-container .crm-button a:hover,
body:not(.wp-admin) .crm-container button:hover,
body:not(.wp-admin) #crm-container button:hover,
body:not(.wp-admin) .crm-container input[type="submit"]:hover,
body:not(.wp-admin) #crm-container input[type="submit"]:hover,
body:not(.wp-admin) .crm-container input[type="button"]:hover,
body:not(.wp-admin) #crm-container input[type="button"]:hover {
  background: var(--crm-link-hover);
  border-color: var(--crm-link-hover);
}

/* Focus ring */
body:not(.wp-admin) .crm-container .crm-button a:focus-visible,
body:not(.wp-admin) #crm-container .crm-button a:focus-visible,
body:not(.wp-admin) .crm-container button:focus-visible,
body:not(.wp-admin) #crm-container button:focus-visible,
body:not(.wp-admin) .crm-container input[type="submit"]:focus-visible,
body:not(.wp-admin) #crm-container input[type="submit"]:focus-visible,
body:not(.wp-admin) .crm-container input[type="button"]:focus-visible,
body:not(.wp-admin) #crm-container input[type="button"]:focus-visible {
  outline: none;
  box-shadow: var(--crm-focus-ring);
}

/* Secondary / neutral actions */
body:not(.wp-admin) .crm-container .crm-button-type-cancel a,
body:not(.wp-admin) #crm-container .crm-button-type-cancel a,
body:not(.wp-admin) .crm-container .crm-button-type-back a,
body:not(.wp-admin) #crm-container .crm-button-type-back a,
body:not(.wp-admin) .crm-container .crm-button-type-cancel input,
body:not(.wp-admin) #crm-container .crm-button-type-cancel input,
body:not(.wp-admin) .crm-container .crm-button-type-back input,
body:not(.wp-admin) #crm-container .crm-button-type-back input {
  background: transparent;
  border-color: var(--crm-border);
  color: var(--crm-text);
}

body:not(.wp-admin) .crm-container .crm-button-type-cancel a:hover,
body:not(.wp-admin) #crm-container .crm-button-type-cancel a:hover,
body:not(.wp-admin) .crm-container .crm-button-type-back a:hover,
body:not(.wp-admin) #crm-container .crm-button-type-back a:hover {
  background: var(--crm-surface-muted);
  border-color: var(--crm-link-hover);
  color: var(--crm-link-hover);
}

/* Primary CTA: “Next / Continue / Register / Pay” buttons */
body:not(.wp-admin) .crm-container .crm-button-type-next a,
body:not(.wp-admin) #crm-container .crm-button-type-next a,
body:not(.wp-admin) .crm-container .crm-button-type-submit a,
body:not(.wp-admin) #crm-container .crm-button-type-submit a,
body:not(.wp-admin) .crm-container .crm-button-type-next input,
body:not(.wp-admin) #crm-container .crm-button-type-next input,
body:not(.wp-admin) .crm-container .crm-button-type-submit input,
body:not(.wp-admin) #crm-container .crm-button-type-submit input {
  background: var(--crm-cta-bg);
  border-color: var(--crm-cta-bg);
}

body:not(.wp-admin) .crm-container .crm-button-type-next a:hover,
body:not(.wp-admin) #crm-container .crm-button-type-next a:hover,
body:not(.wp-admin) .crm-container .crm-button-type-submit a:hover,
body:not(.wp-admin) #crm-container .crm-button-type-submit a:hover {
  background: var(--crm-cta-bg-hover);
  border-color: var(--crm-cta-bg-hover);
}

/* Submit area spacing */
body:not(.wp-admin) .crm-container .crm-submit-buttons,
body:not(.wp-admin) #crm-container .crm-submit-buttons,
body:not(.wp-admin) .crm-container #crm-submit-buttons,
body:not(.wp-admin) #crm-container #crm-submit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--crm-space-2);
  align-items: center;
  margin-top: var(--crm-space-4);
  padding-top: var(--crm-space-3);
  border-top: var(--crm-border-width) solid var(--crm-border);
}

/* Disabled */
body:not(.wp-admin) .crm-container button:disabled,
body:not(.wp-admin) #crm-container button:disabled,
body:not(.wp-admin) .crm-container input:disabled,
body:not(.wp-admin) #crm-container input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* ========================================================================== 
   DARQA x CiviCRM — Tables / lists / pagination
   ========================================================================== */

/* Selector tables (search results, mailing browse, participant lists, etc.) */
body:not(.wp-admin) .crm-container table.selector,
body:not(.wp-admin) #crm-container table.selector,
body:not(.wp-admin) .crm-container table.report,
body:not(.wp-admin) #crm-container table.report,
body:not(.wp-admin) .crm-container table.crm-price-set,
body:not(.wp-admin) #crm-container table.crm-price-set {
  width: 100%;
  border-collapse: collapse;
}

body:not(.wp-admin) .crm-container table.selector th,
body:not(.wp-admin) #crm-container table.selector th,
body:not(.wp-admin) .crm-container table.report th,
body:not(.wp-admin) #crm-container table.report th,
body:not(.wp-admin) .crm-container table.crm-price-set th,
body:not(.wp-admin) #crm-container table.crm-price-set th,
body:not(.wp-admin) .crm-container table.selector td,
body:not(.wp-admin) #crm-container table.selector td,
body:not(.wp-admin) .crm-container table.report td,
body:not(.wp-admin) #crm-container table.report td,
body:not(.wp-admin) .crm-container table.crm-price-set td,
body:not(.wp-admin) #crm-container table.crm-price-set td {
  border: var(--crm-border-width) solid var(--crm-border);
  padding: var(--crm-table-cell-padding-y) var(--crm-table-cell-padding-x);
  vertical-align: top;
}

body:not(.wp-admin) .crm-container table.selector th,
body:not(.wp-admin) #crm-container table.selector th,
body:not(.wp-admin) .crm-container table.report th,
body:not(.wp-admin) #crm-container table.report th,
body:not(.wp-admin) .crm-container table.crm-price-set th,
body:not(.wp-admin) #crm-container table.crm-price-set th {
  background: var(--crm-surface-muted);
  color: var(--crm-text-strong);
  text-align: left;
  font-weight: 700;
}

/* Zebra + hover for selector tables (not for price sets) */
body:not(.wp-admin) .crm-container table.selector tbody tr:nth-child(even),
body:not(.wp-admin) #crm-container table.selector tbody tr:nth-child(even),
body:not(.wp-admin) .crm-container table.report tbody tr:nth-child(even),
body:not(.wp-admin) #crm-container table.report tbody tr:nth-child(even) {
  background: var(--crm-surface-muted);
  background: color-mix(in srgb, var(--crm-surface-muted) 60%, var(--crm-surface));
}

body:not(.wp-admin) .crm-container table.selector tbody tr:hover,
body:not(.wp-admin) #crm-container table.selector tbody tr:hover,
body:not(.wp-admin) .crm-container table.report tbody tr:hover,
body:not(.wp-admin) #crm-container table.report tbody tr:hover {
  background: var(--crm-surface-muted);
  background: color-mix(in srgb, var(--crm-link) 6%, var(--crm-surface));
}

/* Form-layout tables (CiviCRM often uses these for public forms) */
body:not(.wp-admin) .crm-container table.form-layout,
body:not(.wp-admin) #crm-container table.form-layout {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

body:not(.wp-admin) .crm-container table.form-layout td,
body:not(.wp-admin) #crm-container table.form-layout td {
  padding: 6px 8px;
  vertical-align: top;
}

body:not(.wp-admin) .crm-container table.form-layout td.label,
body:not(.wp-admin) #crm-container table.form-layout td.label {
  font-weight: 600;
  color: var(--crm-text-strong);
  white-space: nowrap;
}

@media (max-width: 720px) {
  body:not(.wp-admin) .crm-container table.form-layout td.label,
  body:not(.wp-admin) #crm-container table.form-layout td.label {
    white-space: normal;
  }
}

/* Pagination (Civi pager) */
body:not(.wp-admin) .crm-container .crm-pager,
body:not(.wp-admin) #crm-container .crm-pager,
body:not(.wp-admin) .crm-container .pager,
body:not(.wp-admin) #crm-container .pager {
  margin-top: var(--crm-space-4);
}

body:not(.wp-admin) .crm-container .crm-pager a,
body:not(.wp-admin) #crm-container .crm-pager a,
body:not(.wp-admin) .crm-container .pager a,
body:not(.wp-admin) #crm-container .pager a,
body:not(.wp-admin) .crm-container .crm-pager span,
body:not(.wp-admin) #crm-container .crm-pager span,
body:not(.wp-admin) .crm-container .pager span,
body:not(.wp-admin) #crm-container .pager span {
  display: inline-block;
  padding: 6px 10px;
  border: var(--crm-border-width) solid var(--crm-border);
  color: var(--crm-text);
  text-decoration: none;
  margin-right: 6px;
}

body:not(.wp-admin) .crm-container .crm-pager a:hover,
body:not(.wp-admin) #crm-container .crm-pager a:hover,
body:not(.wp-admin) .crm-container .pager a:hover,
body:not(.wp-admin) #crm-container .pager a:hover {
  border-color: var(--crm-link-hover);
  color: var(--crm-link-hover);
}

/* Current page indicator (best-effort, varies by version) */
body:not(.wp-admin) .crm-container .crm-pager .current,
body:not(.wp-admin) #crm-container .crm-pager .current,
body:not(.wp-admin) .crm-container .pager .current,
body:not(.wp-admin) #crm-container .pager .current {
  background: var(--crm-surface-muted);
  font-weight: 700;
}

/* Mobile: allow horizontal scroll for wide selector tables */
@media (max-width: 720px) {
  body:not(.wp-admin) .crm-container table.selector,
  body:not(.wp-admin) #crm-container table.selector,
  body:not(.wp-admin) .crm-container table.report,
  body:not(.wp-admin) #crm-container table.report {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ========================================================================== 
   DARQA x CiviCRM — Contributions / Membership signup
   --------------------------------------------------------------------------
   Focus:
   - Contribution pages (donations, membership checkout)
   - Price sets and totals
   - Billing / payment blocks
   ========================================================================== */

/* Price set section alignment: prevents odd overlap/wrapping in some setups */
body:not(.wp-admin) .crm-container #priceset.crm-section div.content,
body:not(.wp-admin) #crm-container #priceset.crm-section div.content {
  padding-top: 0;
}

/* Price set tables already get borders from civicrm-darqa-tables.css.
   This adds a “row-card” feel on hover/focus. */
body:not(.wp-admin) .crm-container table.crm-price-set tbody tr:hover,
body:not(.wp-admin) #crm-container table.crm-price-set tbody tr:hover {
  background: var(--crm-surface-muted);
  background: color-mix(in srgb, var(--crm-link) 6%, var(--crm-surface));
}

/* Total row emphasis (Calculate.tpl uses #pricevalue / #pricelabel in many versions) */
body:not(.wp-admin) .crm-container #pricevalue,
body:not(.wp-admin) #crm-container #pricevalue {
  font-weight: 800;
  color: var(--crm-text-strong);
}

/* Payment / billing blocks: readable grouping */
body:not(.wp-admin) .crm-container #billing-payment-block,
body:not(.wp-admin) #crm-container #billing-payment-block,
body:not(.wp-admin) .crm-container .billing_name_address-section,
body:not(.wp-admin) #crm-container .billing_name_address-section {
  background: var(--crm-card-bg-muted);
  border: var(--crm-border-width) solid var(--crm-border);
  padding: var(--crm-card-padding);
}

/* “Amount” / “Other amount” inputs: keep them consistent */
body:not(.wp-admin) .crm-container .amount-section input,
body:not(.wp-admin) #crm-container .amount-section input,
body:not(.wp-admin) .crm-container .other_amount-section input,
body:not(.wp-admin) #crm-container .other_amount-section input {
  max-width: 260px;
}

/* Membership blocks (if used) */
body:not(.wp-admin) .crm-container .crm-membership-block,
body:not(.wp-admin) #crm-container .crm-membership-block {
  border: var(--crm-border-width) solid var(--crm-border);
  padding: var(--crm-card-padding);
  background: var(--crm-surface);
}
/* ========================================================================== 
   DARQA x CiviCRM — Events
   --------------------------------------------------------------------------
   Covers common public event pages:
   - event listing/search
   - event info page
   - online event registration (multi-step)
   ========================================================================== */

/* Event metadata sections (date/time, location, fees) */
body:not(.wp-admin) .crm-container .event_date_time-section,
body:not(.wp-admin) #crm-container .event_date_time-section,
body:not(.wp-admin) .crm-container .event_location-section,
body:not(.wp-admin) #crm-container .event_location-section,
body:not(.wp-admin) .crm-container .event_fees-section,
body:not(.wp-admin) #crm-container .event_fees-section {
  color: var(--crm-text-muted);
  font-size: var(--crm-font-size-sm);
}

body:not(.wp-admin) .crm-container .event_date_time-section strong,
body:not(.wp-admin) #crm-container .event_date_time-section strong {
  color: var(--crm-text-strong);
}

/* Event summary: treat as a muted callout */
body:not(.wp-admin) .crm-container .crm-section.event_summary-section,
body:not(.wp-admin) #crm-container .crm-section.event_summary-section {
  border: var(--crm-border-width) solid var(--crm-border);
  background: var(--crm-surface-muted);
  padding: var(--crm-card-padding);
  margin: var(--crm-space-4) 0;
}

body:not(.wp-admin) .crm-container .crm-section.event_summary-section .label,
body:not(.wp-admin) #crm-container .crm-section.event_summary-section .label {
  display: none; /* summary is usually self-explanatory */
}

/* Event action links (Register / iCal / feed) spacing */
body:not(.wp-admin) .crm-container .action-link,
body:not(.wp-admin) #crm-container .action-link {
  margin-top: var(--crm-space-4);
}

body:not(.wp-admin) .crm-container .action-link a,
body:not(.wp-admin) #crm-container .action-link a {
  margin-right: var(--crm-space-2);
  display: inline-block;
}

/* If the event info page shows a list of actions/buttons in a UL */
body:not(.wp-admin) .crm-container ul.crm-event-links,
body:not(.wp-admin) #crm-container ul.crm-event-links {
  list-style: none;
  padding-left: 0;
  margin: var(--crm-space-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--crm-space-2);
}

body:not(.wp-admin) .crm-container ul.crm-event-links li,
body:not(.wp-admin) #crm-container ul.crm-event-links li {
  margin: 0;
}

/* Registration screen headings */
body:not(.wp-admin) .crm-container .crm-event-registration,
body:not(.wp-admin) #crm-container .crm-event-registration {
  margin-top: var(--crm-space-3);
}

/* Participant count / availability notices */
body:not(.wp-admin) .crm-container .event_capacity-section,
body:not(.wp-admin) #crm-container .event_capacity-section {
  font-size: var(--crm-font-size-sm);
  color: var(--crm-text-muted);
}
/* ========================================================================== 
   DARQA x CiviCRM — Event listing ("pure" CiviEvent list)
   --------------------------------------------------------------------------
   Targets (typical routes):
   - /civicrm/event/list?reset=1
   - /civicrm/event/ical?reset=1&list=1&html=1   (aka "HTML Listing")

   Notes:
   - For best targeting in WordPress, add a body class like `.civi-event-list`.
     (See README for a small `body_class` filter snippet.)
   - This stylesheet is written to be low-risk: it only applies when the
     body has an event-list marker class.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Event list table
   -------------------------------------------------------------------------- */

body:not(.wp-admin).civi-event-list #crm-container table,
body:not(.wp-admin).civi-event-list .crm-container table,
body:not(.wp-admin).civicrm-event-list #crm-container table,
body:not(.wp-admin).civicrm-event-list .crm-container table {
  width: 100%;
  border-collapse: collapse;
  border: var(--crm-border-width) solid var(--crm-border);
  background: var(--crm-surface);
  margin-top: var(--crm-space-4);
}

body:not(.wp-admin).civi-event-list #crm-container table th,
body:not(.wp-admin).civi-event-list .crm-container table th,
body:not(.wp-admin).civicrm-event-list #crm-container table th,
body:not(.wp-admin).civicrm-event-list .crm-container table th {
  background: var(--crm-surface-muted);
  color: var(--crm-text-strong);
  font-weight: 700;
  text-align: left;
  padding: var(--crm-table-cell-padding-y) var(--crm-table-cell-padding-x);
  border-bottom: var(--crm-border-width) solid var(--crm-border);
}

body:not(.wp-admin).civi-event-list #crm-container table td,
body:not(.wp-admin).civi-event-list .crm-container table td,
body:not(.wp-admin).civicrm-event-list #crm-container table td,
body:not(.wp-admin).civicrm-event-list .crm-container table td {
  padding: var(--crm-table-cell-padding-y) var(--crm-table-cell-padding-x);
  border-bottom: var(--crm-border-width) solid var(--crm-border);
  vertical-align: top;
}

/* Zebra + hover */
body:not(.wp-admin).civi-event-list #crm-container table tbody tr:nth-child(even),
body:not(.wp-admin).civi-event-list .crm-container table tbody tr:nth-child(even),
body:not(.wp-admin).civicrm-event-list #crm-container table tbody tr:nth-child(even),
body:not(.wp-admin).civicrm-event-list .crm-container table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--crm-surface-muted) 55%, var(--crm-surface));
}

body:not(.wp-admin).civi-event-list #crm-container table tbody tr:hover,
body:not(.wp-admin).civi-event-list .crm-container table tbody tr:hover,
body:not(.wp-admin).civicrm-event-list #crm-container table tbody tr:hover,
body:not(.wp-admin).civicrm-event-list .crm-container table tbody tr:hover {
  background: color-mix(in srgb, var(--crm-link) 6%, var(--crm-surface));
}

/* Make the Event title feel like the primary item */
body:not(.wp-admin).civi-event-list #crm-container table td:first-child a,
body:not(.wp-admin).civi-event-list .crm-container table td:first-child a,
body:not(.wp-admin).civicrm-event-list #crm-container table td:first-child a,
body:not(.wp-admin).civicrm-event-list .crm-container table td:first-child a {
  font-weight: 700;
  color: var(--crm-brand-deep-blue);
}

body:not(.wp-admin).civi-event-list #crm-container table td:first-child a:hover,
body:not(.wp-admin).civi-event-list .crm-container table td:first-child a:hover,
body:not(.wp-admin).civicrm-event-list #crm-container table td:first-child a:hover,
body:not(.wp-admin).civicrm-event-list .crm-container table td:first-child a:hover {
  color: var(--crm-link-hover);
}

/* Columns (best-effort: Event | When | Location | Category | Email) */
body:not(.wp-admin).civi-event-list #crm-container table td:nth-child(2),
body:not(.wp-admin).civi-event-list .crm-container table td:nth-child(2),
body:not(.wp-admin).civicrm-event-list #crm-container table td:nth-child(2),
body:not(.wp-admin).civicrm-event-list .crm-container table td:nth-child(2) {
  font-variant-numeric: tabular-nums;
}

body:not(.wp-admin).civi-event-list #crm-container table td:last-child,
body:not(.wp-admin).civi-event-list .crm-container table td:last-child,
body:not(.wp-admin).civicrm-event-list #crm-container table td:last-child,
body:not(.wp-admin).civicrm-event-list .crm-container table td:last-child {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2) Event cart links (optional)
   -------------------------------------------------------------------------- */

body:not(.wp-admin).civi-event-list #crm-container a[href*="civicrm/event/view_cart"],
body:not(.wp-admin).civi-event-list .crm-container a[href*="civicrm/event/view_cart"],
body:not(.wp-admin).civi-event-list #crm-container a[href*="civicrm/event/cart_checkout"],
body:not(.wp-admin).civi-event-list .crm-container a[href*="civicrm/event/cart_checkout"],
body:not(.wp-admin).civicrm-event-list #crm-container a[href*="civicrm/event/view_cart"],
body:not(.wp-admin).civicrm-event-list .crm-container a[href*="civicrm/event/view_cart"],
body:not(.wp-admin).civicrm-event-list #crm-container a[href*="civicrm/event/cart_checkout"],
body:not(.wp-admin).civicrm-event-list .crm-container a[href*="civicrm/event/cart_checkout"] {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
  background: var(--crm-link);
  border: var(--crm-border-width) solid var(--crm-link);
  color: var(--crm-surface);
  padding: 6px 12px;
  border-radius: var(--crm-radius);
  font-weight: 700;
  text-decoration: none;
}

body:not(.wp-admin).civi-event-list #crm-container a[href*="civicrm/event/view_cart"]:hover,
body:not(.wp-admin).civi-event-list .crm-container a[href*="civicrm/event/view_cart"]:hover,
body:not(.wp-admin).civi-event-list #crm-container a[href*="civicrm/event/cart_checkout"]:hover,
body:not(.wp-admin).civi-event-list .crm-container a[href*="civicrm/event/cart_checkout"]:hover,
body:not(.wp-admin).civicrm-event-list #crm-container a[href*="civicrm/event/view_cart"]:hover,
body:not(.wp-admin).civicrm-event-list .crm-container a[href*="civicrm/event/view_cart"]:hover,
body:not(.wp-admin).civicrm-event-list #crm-container a[href*="civicrm/event/cart_checkout"]:hover,
body:not(.wp-admin).civicrm-event-list .crm-container a[href*="civicrm/event/cart_checkout"]:hover {
  background: var(--crm-link-hover);
  border-color: var(--crm-link-hover);
}

/* --------------------------------------------------------------------------
   3) Mobile: allow horizontal scrolling if the table is wide
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  body:not(.wp-admin).civi-event-list #crm-container table,
  body:not(.wp-admin).civi-event-list .crm-container table,
  body:not(.wp-admin).civicrm-event-list #crm-container table,
  body:not(.wp-admin).civicrm-event-list .crm-container table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ========================================================================== 
   DARQA x CiviCRM — Newsletters (CiviMail)
   --------------------------------------------------------------------------
   Covers public-facing mailing pages:
   - subscribe
   - unsubscribe
   - manage preferences
   - mailing archive/browse (table styling handled in tables.css)
   ========================================================================== */

/* Mailing forms often list groups as checkboxes. Give them breathing room. */
body:not(.wp-admin) .crm-container .crm-mailing-subscribe-form-block fieldset,
body:not(.wp-admin) #crm-container .crm-mailing-subscribe-form-block fieldset,
body:not(.wp-admin) .crm-container .crm-mailing-unsubscribe-form-block fieldset,
body:not(.wp-admin) #crm-container .crm-mailing-unsubscribe-form-block fieldset,
body:not(.wp-admin) .crm-container .crm-mailing-manage-form-block fieldset,
body:not(.wp-admin) #crm-container .crm-mailing-manage-form-block fieldset {
  background: var(--crm-surface);
}

/* Group list rows (best-effort) */
body:not(.wp-admin) .crm-container .mailing-group,
body:not(.wp-admin) #crm-container .mailing-group,
body:not(.wp-admin) .crm-container .crm-group-row,
body:not(.wp-admin) #crm-container .crm-group-row {
  padding: var(--crm-space-2) 0;
  border-bottom: var(--crm-border-width) solid var(--crm-border);
}

body:not(.wp-admin) .crm-container .mailing-group:last-child,
body:not(.wp-admin) #crm-container .mailing-group:last-child,
body:not(.wp-admin) .crm-container .crm-group-row:last-child,
body:not(.wp-admin) #crm-container .crm-group-row:last-child {
  border-bottom: 0;
}

/* Archive list items (if rendered as list rather than a selector table) */
body:not(.wp-admin) .crm-container .crm-mailing-archive,
body:not(.wp-admin) #crm-container .crm-mailing-archive {
  margin-top: var(--crm-space-4);
}
/* ========================================================================== 
   DARQA x CiviCRM — Profiles
   --------------------------------------------------------------------------
   Covers public profile pages:
   - create / edit contact via profile
   - view profile
   ========================================================================== */

/* Profile view often uses crm-section blocks; make them readable */
body:not(.wp-admin) .crm-container .crm-profile,
body:not(.wp-admin) #crm-container .crm-profile {
  margin-top: var(--crm-space-3);
}

/* Group headings inside profiles */
body:not(.wp-admin) .crm-container .crm-profile h3,
body:not(.wp-admin) #crm-container .crm-profile h3 {
  border-bottom: var(--crm-border-width) solid var(--crm-border);
  padding-bottom: var(--crm-space-2);
}

/* “View” rows sometimes use .crm-profile-name / .crm-profile-value */
body:not(.wp-admin) .crm-container .crm-profile-name,
body:not(.wp-admin) #crm-container .crm-profile-name {
  font-weight: 700;
  color: var(--crm-text-strong);
}

body:not(.wp-admin) .crm-container .crm-profile-value,
body:not(.wp-admin) #crm-container .crm-profile-value {
  color: var(--crm-text);
}

/* Public “edit your info” blocks */
body:not(.wp-admin) .crm-container .crm-profile-block,
body:not(.wp-admin) #crm-container .crm-profile-block {
  border: var(--crm-border-width) solid var(--crm-border);
  padding: var(--crm-card-padding);
  background: var(--crm-surface);
}