/**
 * Merrick global presentation
 *
 * Site-wide child-theme overrides that are not tied to a page or component.
 */

:root {
  --merrick-color-purple: #5c4b9e;
  --merrick-color-purple-form: #5d4aa2;
  --merrick-color-charcoal: #35352d;
  --merrick-color-lavender: #f3f1fa;
  --merrick-color-white: #fff;
  --merrick-color-text-muted: #555551;
  --merrick-border-purple-subtle: rgba(92, 75, 158, 0.18);
  --merrick-shadow-card: rgba(53, 53, 45, 0.07) 0 5px 18px;
  --merrick-feature-media-height: 360px;
  --merrick-feature-copy-padding: 34px 38px;
}

/* Exponent back-to-top control. Recheck after parent-theme icon changes. */
#be-themes-back-to-top { color: var(--merrick-color-white) !important; }

/* Keep the sitewide skip link out of view until a keyboard user focuses it. */
.merrick-skip-link {
  position: fixed;
  z-index: 100000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 4px;
  background: var(--merrick-color-white);
  color: var(--merrick-color-charcoal);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}

.merrick-skip-link:focus {
  transform: translateY(0);
}

/**
 * Keyboard focus
 *
 * The paired white/purple ring remains visible on both the site's white and
 * dark-purple surfaces without relying on color alone.
 */
:where(
  a[href],
  button,
  input:not([type="hidden"]),
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--merrick-color-white) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px var(--merrick-color-purple) !important;
}

/**
 * Dark footer contrast
 *
 * Tatsu's global body color can otherwise win over the footer's dark color
 * scheme on generated menu and copyright elements.
 */
.tatsu-section[data-headerscheme="background--dark"] .tatsu-menu-widget a,
.tatsu-section[data-headerscheme="background--dark"] .tatsu-menu-widget li,
.tatsu-section[data-headerscheme="background--dark"] .tatsu-inline-text-inner,
.tatsu-section[data-headerscheme="background--dark"] .tatsu-inline-text-inner p,
.tatsu-section[data-headerscheme="background--dark"] .tatsu-inline-text-inner span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Animated-number captions are informational text, not muted decoration. */
.tatsu-section[data-headerscheme="background--dark"] .tatsu-an-caption {
  color: var(--merrick-color-white) !important;
}

/* Featured About cards use the brand purple and require a light heading. */
.merrick-about-value-featured .merrick-about-card-copy h3 {
  color: var(--merrick-color-white) !important;
}

/* Small instructional labels remain comfortably above AA contrast on purple. */
.merrick-event-giving__instructions div > span {
  color: rgba(255, 255, 255, 0.82) !important;
}

/**
 * Accordion closing state
 *
 * jQuery UI animates the answer panel's height. Hiding its bottom border as
 * soon as the panel becomes aria-hidden prevents that border from sweeping
 * upward through the answer copy during the closing animation.
 */
.merrick-page-volunteer .accordion-content[aria-hidden="true"],
.merrick-page-donate .accordion-content[aria-hidden="true"] {
  border-bottom-color: transparent !important;
}

/* Keep the question/answer seam hidden until the close animation finishes.
 * jQuery UI removes ui-state-active before the answer reaches zero height,
 * but adds ui-accordion-header-collapsed only after the animation completes. */
.merrick-page-food-shelf .merrick-fs-faqs .accordion-head:not(.ui-accordion-header-collapsed),
.merrick-page-volunteer .accordion-head:not(.ui-accordion-header-collapsed),
.merrick-page-donate .accordion-head:not(.ui-accordion-header-collapsed) {
  border-bottom-color: transparent !important;
}

/* Preserve the visual size of event dates after removing heading semantics. */
.merrick-event-date-number {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: var(--h3-font-size, 32px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* Small legal pages still need a clear, consistent top-level heading. */
.merrick-legal-page-heading {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 24px;
}

@media (max-width: 767px) {
  .merrick-legal-page-heading {
    width: min(100% - 32px, 1180px);
    padding-top: 40px;
  }
}

/* Consistent navigation-style chevrons for expandable content. */
:root {
  --merrick-disclosure-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpolyline fill='none' stroke='black' stroke-linecap='round' stroke-width='2' points='0 .649 3.613 4.127 0 7.604' transform='rotate(90 4 5)'/%3E%3C/svg%3E");
}
.merrick-contact-staff-toggle span[aria-hidden="true"],
.tatsu-accordion .accordion-head .tatsu-accordion-expand::after,
.merrick-event-faqs details summary::after {
  content: "" !important;
  display: inline-block;
  width: 10px !important;
  height: 6px !important;
  font-size: 0 !important;
  background: currentColor !important;
  -webkit-mask: var(--merrick-disclosure-chevron) center / contain no-repeat;
  mask: var(--merrick-disclosure-chevron) center / contain no-repeat;
}
.merrick-contact-staff-toggle span[aria-hidden="true"] {
  margin-left: 8px;
  vertical-align: middle;
}
.merrick-contact-staff-toggle[aria-expanded="true"] span[aria-hidden="true"] {
  transform: rotate(180deg);
}
.tatsu-accordion .accordion-head .tatsu-accordion-expand::before { display: none !important; }
.tatsu-accordion .accordion-head .tatsu-accordion-expand::after {
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%) !important;
}
.tatsu-accordion .accordion-head[aria-expanded="true"] .tatsu-accordion-expand::after {
  transform: translate(-50%, -50%) rotate(180deg) !important;
}
.merrick-event-faqs details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}