/* ==========================================================================
   MSA 2026 Child — brand-signatures.css
   Signature components from DESIGN.md §5–§7.
   Depends on tokens.css (--color-*, --space-*, --type-*, --transition).
   Mobile-first; responsive at DESIGN.md §4 breakpoints.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons (DESIGN.md §5) — 4px radius, NO pills.
   -------------------------------------------------------------------------- */
.msa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-body);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}

.msa-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
}
.msa-btn--primary:hover,
.msa-btn--primary:focus-visible {
  background-color: var(--color-primary-hover);
}

.msa-btn--accent {
  background-color: var(--color-accent);
  color: var(--color-primary);
}
.msa-btn--accent:hover,
.msa-btn--accent:focus-visible {
  background-color: var(--color-accent-hover);
}

.msa-btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.msa-btn--ghost:hover,
.msa-btn--ghost:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.msa-btn--link {
  display: inline;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  border-radius: 0;
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.msa-btn--link:hover,
.msa-btn--link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

/* Shared keyboard focus ring */
.msa-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Core Button blocks carry the .msa-btn classes on the .wp-block-button
   wrapper, while theme.json and Kadence style the inner link. Neutralise the
   wrapper and put the brand styles on the link, so each button is one box.
   Kadence's CSS loads after this file and its outline-button rules reach
   (0,5,0), so the link selectors repeat .msa-btn and add .wp-element-button
   to stay above them regardless of load order. */
.wp-block-buttons > .wp-block-button.msa-btn {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}
.wp-block-buttons > .wp-block-button.msa-btn > .wp-block-button__link.wp-element-button {
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
/* Navy ring: gold on white is too faint (1.6:1). The footer switches it to gold. */
.wp-block-buttons > .wp-block-button.msa-btn > .wp-block-button__link.wp-element-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--primary > .wp-block-button__link.wp-element-button {
  background-color: var(--color-primary);
  color: var(--color-surface);
}
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--primary > .wp-block-button__link.wp-element-button:hover,
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--primary > .wp-block-button__link.wp-element-button:focus-visible {
  background-color: var(--color-primary-hover);
}
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--accent > .wp-block-button__link.wp-element-button {
  background-color: var(--color-accent);
  color: var(--color-primary);
}
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--accent > .wp-block-button__link.wp-element-button:hover,
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--accent > .wp-block-button__link.wp-element-button:focus-visible {
  background-color: var(--color-accent-hover);
}
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--ghost > .wp-block-button__link.wp-element-button {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--ghost > .wp-block-button__link.wp-element-button:hover,
.wp-block-buttons > .wp-block-button.msa-btn.msa-btn--ghost > .wp-block-button__link.wp-element-button:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Card base (DESIGN.md §5) — 8px radius, 1px border OR bottom divider.
   NO nested cards.
   -------------------------------------------------------------------------- */
.msa-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-5);
}
@media (min-width: 48rem) {
  .msa-card {
    padding: var(--space-6);
  }
}

.msa-card--alt {
  background-color: var(--color-surface-alt);
}

/* Divider-only variant: bottom rule instead of full border. */
.msa-card--divider {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding-inline: 0;
}

/* Guard against accidental nested cards (DESIGN.md §5). */
.msa-card .msa-card {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* --------------------------------------------------------------------------
   Form inputs (DESIGN.md §5) — 1px border, 2px accent focus ring,
   labels above, error color.
   -------------------------------------------------------------------------- */
.msa-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.msa-field__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-small);
  color: var(--color-ink);
}

.msa-field__input,
.msa-field__select,
.msa-field__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--color-ink);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.msa-field__textarea {
  min-height: 8rem;
  resize: vertical;
}

.msa-field__input:focus,
.msa-field__select:focus,
.msa-field__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.msa-field__input::placeholder,
.msa-field__textarea::placeholder {
  color: var(--color-ink-muted);
}

/* Error state */
.msa-field--error .msa-field__input,
.msa-field--error .msa-field__select,
.msa-field--error .msa-field__textarea {
  border-color: var(--color-error);
}
.msa-field__error {
  font-size: var(--type-small);
  color: var(--color-error);
}
.msa-field__success {
  font-size: var(--type-small);
  color: var(--color-success);
}

/* --------------------------------------------------------------------------
   Divider (DESIGN.md §5/§6) — thin line + gold 8-point star terminal.
   Markup: <div class="msa-divider" aria-hidden="true">…</div>
   -------------------------------------------------------------------------- */
.msa-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.msa-divider__line {
  flex: 1 1 auto;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-primary);
}
.msa-divider__ornament {
  flex: 0 0 auto;
  width: 1.25rem;   /* ~20px, within DESIGN.md §6 16–24px range */
  height: 1.25rem;
}
/* Fallback / CSS-only terminal mark using the source SVG as a mask so it
   always inherits the gold accent. */
.msa-divider__ornament--star {
  background-color: var(--color-accent);
  -webkit-mask: url("../decorative/divider-star.svg") center / contain no-repeat;
          mask: url("../decorative/divider-star.svg") center / contain no-repeat;
}
/* Centered variant — line on both sides of the star (under page titles). */
.msa-divider--centered .msa-divider__line:last-child {
  /* allows a second <hr> after the ornament for symmetric dividers */
}

/* --------------------------------------------------------------------------
   Highlighter underline (DESIGN.md §5) — exact gradient.
   Use sparingly: 1–2 words per heading/tagline.
   -------------------------------------------------------------------------- */
.msa-highlight {
  background: linear-gradient(
    180deg,
    transparent 60%,
    var(--color-accent-light) 60%
  );
  padding: 0 0.1em;
}

/* --------------------------------------------------------------------------
   Page header (DESIGN.md §4) — title + divider + Caveat script subtitle.
   Logo lives in nav (DESIGN.md §6 rule 5), never repeated here.
   -------------------------------------------------------------------------- */
.msa-page-header {
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
}
.msa-page-header__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-display-2);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
}
.msa-page-header__subtitle {
  margin: var(--space-3) 0 0;
  font-family: var(--font-script);
  font-weight: 500;
  font-size: var(--type-script-display);
  line-height: var(--leading-script);
  color: var(--color-ink-muted);
}
.msa-page-header .msa-divider {
  max-width: 22rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Prayer times (DESIGN.md §5) — tabular; current-prayer row gets
   gold left border --color-accent.
   -------------------------------------------------------------------------- */
.msa-prayer-times {
  width: 100%;
  max-width: var(--width-text);
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--type-body);
}
.msa-prayer-times caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h3);
  color: var(--color-primary);
  padding-bottom: var(--space-3);
}
.msa-prayer-times th,
.msa-prayer-times td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.msa-prayer-times th {
  font-weight: 600;
  color: var(--color-ink);
}
.msa-prayer-times td {
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}
/* Current prayer — gold left border + emphasis. */
.msa-prayer-times__row--current {
  background-color: var(--color-surface-alt);
}
.msa-prayer-times__row--current th,
.msa-prayer-times__row--current td {
  color: var(--color-ink);
  font-weight: 600;
}
.msa-prayer-times__row--current th:first-child {
  border-left: 3px solid var(--color-accent);
}
/* Jumu'ah row separator */
.msa-prayer-times__row--jumuah th {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Event card (DESIGN.md §5) — left date callout (large numeral + gold
   abbreviated month), right meta, footer strip (cal icon + date/time/loc).
   -------------------------------------------------------------------------- */
.msa-event-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-5);
}
@media (min-width: 48rem) {
  .msa-event-card {
    padding: var(--space-6);
  }
}

.msa-event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: var(--space-3);
  background-color: var(--color-surface-alt);
  border-radius: 8px;
}
.msa-event-card__month {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  color: var(--color-accent-text); /* dark gold, AA on light bg */
}
.msa-event-card__day {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h2);
  line-height: 1;
  color: var(--color-primary);
}

.msa-event-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.msa-event-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h3);
  line-height: var(--leading-heading);
  color: var(--color-primary);
}
.msa-event-card__meta {
  margin: 0;
  font-size: var(--type-small);
  color: var(--color-ink-muted);
}

/* Footer strip spans both columns. */
.msa-event-card__footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--type-small);
  color: var(--color-ink-muted);
}
.msa-event-card__footer-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.msa-event-card__footer-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   Activity card (DESIGN.md §5) — illustration + small gold uppercase
   domain eyebrow + bold name + desc.
   -------------------------------------------------------------------------- */
.msa-activity-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-5);
}
.msa-activity-card__illustration {
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}
.msa-activity-card__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  color: var(--color-accent-text); /* dark gold eyebrow, AA on white */
}
/* The home hero eyebrow also carries the accent-hover preset class (!important). */
.msa-activity-card__eyebrow.has-accent-hover-color {
  color: var(--color-accent-text) !important;
}
.msa-activity-card__name {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h3);
  line-height: var(--leading-heading);
  color: var(--color-primary);
}
.msa-activity-card__desc {
  margin: var(--space-2) 0 0;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   Donate grid (DESIGN.md §5) — 3 methods side-by-side, stacked on mobile.
   -------------------------------------------------------------------------- */
.msa-donate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 48rem) {
  .msa-donate-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.msa-donate-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-6) var(--space-5);
}
.msa-donate-method__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h4);
  color: var(--color-primary);
}
.msa-donate-method__id {
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--color-ink);
}
.msa-donate-method__qr {
  width: 9rem;
  height: 9rem;
}

/* --------------------------------------------------------------------------
   Inline Arabic (DESIGN.md §2) — Amiri, extra leading, never italic.
   -------------------------------------------------------------------------- */
[lang="ar"] {
  font-family: 'Amiri', serif;
  line-height: 1.8;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Motion (DESIGN.md §7) — honor prefers-reduced-motion: disable transitions.
   No parallax / carousels / scroll animation defined anywhere.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}