/* ==========================================================================
   MSA 2026 Child: brand-signatures.css
   Signature components and site-wide brand rules (DESIGN.md sections 5 to 7).
   Depends on tokens.css (--color-*, --space-*, --type-*, --transition).
   Mobile-first; responsive at the DESIGN.md section 4 breakpoints.

   Kadence loads its own CSS AFTER this file, and its .single-content rules
   reach (0,2,1), so rules that must win use doubled classes or ids.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyboard focus, everywhere: a black ring on light backgrounds, a gold ring
   on black. Kadence hides outlines with `.hide-focus-outline *:focus` (0,2,0)
   until a key is pressed, so this rule is raised to (0,2,2).
   -------------------------------------------------------------------------- */
html:root body :focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
html:root body .msa-panel-dark :focus-visible,
html:root body .msa-footer :focus-visible,
html:root body #mobile-drawer :focus-visible {
  outline-color: var(--color-focus-on-dark);
}
/* The "Back to top" target is an empty marker; Kadence focuses it after the
   jump, and a ring on it would only draw a stray line. */
html:root body #top:focus {
  outline: none;
}
/* Anchor targets ("On this page" links) stop a little below the top edge. */
:where([id]) {
  scroll-margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Links: black and underlined in content (Kadence "link-style-standard");
   hover thickens the underline. On dark panels they turn white, gold on hover.
   -------------------------------------------------------------------------- */
.single-content a:where(:not(.wp-block-button__link):not(.wp-element-button)) {
  text-underline-offset: 0.18em;
}
.single-content a:where(:not(.wp-block-button__link):not(.wp-element-button)):hover {
  color: var(--color-primary-hover);
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   Buttons (DESIGN.md section 5): 4px radius, no pills.
   Gold (.msa-btn--accent) = the ONE main action in a section, black text.
   Black (.msa-btn--primary, and any plain button) = everything else.
   -------------------------------------------------------------------------- */
.msa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-body);
  line-height: 1.2;
  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-on-dark);
}
.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-on-accent);
}
.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: 2px solid var(--color-primary);
}
.msa-btn--ghost:hover,
.msa-btn--ghost:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}

.msa-btn--link {
  display: inline;
  min-height: 0;
  padding: 0;
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.msa-btn--link:hover,
.msa-btn--link:focus-visible {
  text-decoration-thickness: 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 {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}
.wp-block-buttons > .wp-block-button.msa-btn > .wp-block-button__link.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.wp-block-buttons > .wp-block-button.msa-btn > .wp-block-button__link.wp-element-button:focus-visible {
  outline: 2px solid var(--color-focus);
  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-on-dark);
}
.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);
  color: var(--color-on-dark);
}
.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-on-accent);
}
.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);
  color: var(--color-on-accent);
}
.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: 2px 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-on-dark);
}

/* --------------------------------------------------------------------------
   Dark panel (.msa-panel-dark): black background, white text, gold accents.
   For the home hero, the footer, event title bands and number bands only;
   reading pages stay white. Text colour presets flip so nothing turns black
   on black. Don't nest light cards inside; if one is needed, .msa-card
   restores dark text inside it.
   -------------------------------------------------------------------------- */
.msa-panel-dark {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}
.msa-panel-dark.msa-panel-dark :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, caption, th, td, blockquote, cite, label, legend) {
  color: inherit;
}
.msa-panel-dark .has-primary-color,
.msa-panel-dark .has-ink-color {
  color: var(--color-on-dark) !important;
}
.msa-panel-dark .has-ink-muted-color,
.msa-panel-dark .has-on-dark-muted-color {
  color: var(--color-on-dark-muted) !important;
}
.msa-panel-dark .has-accent-text-color,
.msa-panel-dark .has-accent-hover-color,
.msa-panel-dark .has-accent-color {
  color: var(--color-accent) !important;
}
/* Doubled class: beats Kadence's `.widget-area a` (0,1,1) in the footer. */
.msa-panel-dark.msa-panel-dark a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-social-link-anchor):not(.ff-btn)) {
  color: var(--color-on-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.msa-panel-dark.msa-panel-dark a:where(:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-social-link-anchor):not(.ff-btn)):hover {
  color: var(--color-accent);
  text-decoration-thickness: 2px;
}
/* A light card inside a dark panel keeps dark text and links. */
.msa-panel-dark .msa-card {
  color: var(--color-ink);
}
.msa-panel-dark.msa-panel-dark .msa-card a:where(:not(.wp-block-button__link):not(.wp-element-button)) {
  color: var(--color-primary);
}
html:root body .msa-panel-dark .msa-card :focus-visible {
  outline-color: var(--color-focus);
}
/* Buttons on black: gold stays gold; black and outline buttons become white
   outlines (white on black 21:1), filled white on hover. */
.msa-panel-dark .wp-block-buttons > .wp-block-button.msa-btn.msa-btn--primary > .wp-block-button__link.wp-element-button,
.msa-panel-dark .wp-block-buttons > .wp-block-button.msa-btn.msa-btn--ghost > .wp-block-button__link.wp-element-button {
  background-color: transparent;
  color: var(--color-on-dark);
  border: 2px solid var(--color-on-dark);
}
.msa-panel-dark .wp-block-buttons > .wp-block-button.msa-btn.msa-btn--primary > .wp-block-button__link.wp-element-button:hover,
.msa-panel-dark .wp-block-buttons > .wp-block-button.msa-btn.msa-btn--ghost > .wp-block-button__link.wp-element-button:hover {
  background-color: var(--color-on-dark);
  color: var(--color-on-accent);
}
.msa-panel-dark .wp-block-buttons > .wp-block-button.msa-btn > .wp-block-button__link.wp-element-button:focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* --------------------------------------------------------------------------
   Star strip (.msa-star-strip): the gold band of outlined eight-point stars
   from the K-Day thumbnail, the Join MSA sign and the Video Kit. Decorative:
   <div class="msa-star-strip" aria-hidden="true"></div>. At most two per
   screen. The tile is black-outline only, so the gold comes from the token.
   -------------------------------------------------------------------------- */
.msa-star-strip {
  display: block;
  height: var(--star-strip-height);
  margin: 0;
  background-color: var(--color-accent);
  background-image: url("../decorative/star-strip.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
}

/* --------------------------------------------------------------------------
   Labels and big numbers (echo the small gold labels and the Montserrat 800
   capitals of the fall kit).
   .msa-label: small letter-spaced capitals ("JOIN US"); black on light
   backgrounds, gold on dark panels.
   .msa-big-number: Montserrat 800 capitals for years and counts.
   -------------------------------------------------------------------------- */
.msa-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-caption);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}
.msa-big-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-display-2);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-primary);
}
.msa-panel-dark.msa-panel-dark .msa-label,
.msa-panel-dark.msa-panel-dark .msa-big-number {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   "On this page" jump links (.msa-onthispage) and "Back to top"
   (.msa-backtotop). The #top target is printed at the start of <body> by
   inc/kadence-settings.php. Selectors are doubled to beat Kadence's
   .single-content p/ul margins (0,1,1) and (0,2,1).
   -------------------------------------------------------------------------- */
.msa-onthispage.msa-onthispage {
  box-sizing: border-box;
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-surface-alt);
}
.msa-onthispage.msa-onthispage .msa-onthispage__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-ink);
}
.msa-onthispage.msa-onthispage ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.msa-onthispage.msa-onthispage li {
  margin: 0;
}
.msa-onthispage.msa-onthispage a {
  display: inline-block;
  padding: var(--space-2) 0; /* ~40px tall tap rows on phones */
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.msa-onthispage.msa-onthispage a:hover {
  text-decoration-thickness: 2px;
}

.msa-backtotop.msa-backtotop {
  margin: var(--space-5) 0 0;
  text-align: right;
  font-size: var(--type-small);
}
.msa-backtotop.msa-backtotop a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  font-weight: 600;
  color: var(--color-primary);
}
.msa-backtotop.msa-backtotop a::before {
  content: "\2191";
  content: "\2191" / ""; /* decorative arrow, not read aloud where supported */
}
.msa-panel-dark.msa-panel-dark .msa-backtotop a {
  color: var(--color-on-dark);
}
.msa-top-anchor {
  display: block;
  height: 0;
}

/* --------------------------------------------------------------------------
   Site header (Kadence). inc/kadence-settings.php puts the name next to the
   logo as real text. Ids are used because Kadence prints its header CSS
   inline, after this file, at up to (0,4,3).
   -------------------------------------------------------------------------- */
#masthead .site-branding a.brand {
  gap: var(--space-3);
  color: var(--color-primary);
  text-decoration: none;
}
.msa-brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  line-height: 1.15;
  text-align: left;
  color: var(--color-primary);
}
.msa-brand-name__main {
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
}
.msa-brand-name__sub {
  margin-top: 0.125rem;
  font-weight: 600;
  font-size: 0.8125rem;
}
#masthead .site-branding a.brand:hover .msa-brand-name__main {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
@media (min-width: 80rem) {
  .msa-brand-name__main {
    font-size: 1.0625rem;
  }
  .msa-brand-name__sub {
    font-size: 0.875rem;
  }
}

/* Desktop menu: black semibold; the current page bold with a black bar. */
#site-navigation .primary-menu-container > ul > li.menu-item > a {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  padding-left: 0.4em;
  padding-right: 0.4em;
}
/* With the name beside the logo, 8 items still fit on one line from
   1025px (Kadence's desktop header) up. */
@media (min-width: 80rem) {
  #site-navigation .primary-menu-container > ul > li.menu-item > a {
    font-size: 0.9375rem;
    padding-left: 0.6em;
    padding-right: 0.6em;
  }
}
#site-navigation .primary-menu-container > ul > li.menu-item > a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}
#site-navigation .primary-menu-container > ul > li.current-menu-item > a,
#site-navigation .primary-menu-container > ul > li.current-menu-ancestor > a,
#site-navigation .primary-menu-container > ul > li.current-menu-parent > a {
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--color-primary);
}
/* Dropdown (About > About Islam): black panel, current item marked in gold. */
#site-navigation .primary-menu-container ul ul li.menu-item > a {
  font-size: 0.875rem;
}
#site-navigation .primary-menu-container ul ul li.menu-item > a:hover {
  text-decoration: underline;
}
#site-navigation .primary-menu-container ul ul li.current-menu-item > a {
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--color-accent);
}
html:root body #site-navigation ul ul :focus-visible {
  outline-color: var(--color-focus-on-dark);
  outline-offset: -3px;
}
/* The one gold button in the menu: add the CSS class msa-menu-cta to a menu
   item (Appearance > Menus > CSS Classes). */
#site-navigation .primary-menu-container > ul > li.menu-item.msa-menu-cta {
  margin-left: var(--space-1);
}
#site-navigation .primary-menu-container > ul > li.menu-item.msa-menu-cta > a {
  padding: 0.5em 0.9em;
  border-radius: 4px;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
}
#site-navigation .primary-menu-container > ul > li.menu-item.msa-menu-cta > a:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-on-accent);
  text-decoration: none;
}

/* Phone menu toggle: black icon, 44px tap target. */
#mobile-toggle.menu-toggle-open {
  min-width: 2.75rem;
  min-height: 2.75rem;
  justify-content: center;
  color: var(--color-primary);
}

/* Phone menu drawer: black, white links, current page gold with a gold bar,
   bigger tap targets (about 52px rows). */
#mobile-drawer .drawer-inner {
  background: var(--color-primary);
  color: var(--color-on-dark);
}
#mobile-drawer .mobile-navigation ul li {
  font-size: 1.125rem;
}
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
}
#mobile-drawer .mobile-navigation ul li a {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  padding-left: var(--space-4);
}
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
  color: var(--color-accent);
  font-weight: 800;
  box-shadow: inset 4px 0 0 var(--color-accent);
}
#mobile-drawer .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap > a {
  color: inherit;
}
#mobile-drawer .mobile-navigation ul li.msa-menu-cta > a {
  margin: var(--space-4) 0 var(--space-3);
  border-bottom: 0;
  border-radius: 4px;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  text-align: center;
}
#mobile-drawer .mobile-navigation ul li.msa-menu-cta.current-menu-item > a {
  color: var(--color-on-accent);
  box-shadow: inset 0 -4px 0 var(--color-on-accent);
}

/* --------------------------------------------------------------------------
   Card base (DESIGN.md section 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 section 5). */
.msa-card .msa-card {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* --------------------------------------------------------------------------
   Form inputs (DESIGN.md section 5): dark borders (WCAG 1.4.11 needs 3:1;
   ours are 5.33:1), a 2px focus ring, labels above, error colour.
   -------------------------------------------------------------------------- */
.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-field-border);
  border-radius: 4px;
  transition: border-color var(--transition);
}
.msa-field__textarea {
  min-height: 8rem;
  resize: vertical;
}

.msa-field__input:focus,
.msa-field__select:focus,
.msa-field__textarea:focus {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

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

/* 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);
}

/* All text fields on the site (Kadence gives them a 1.5:1 grey border and
   removes the outline on focus). `.site` is Kadence's #wrapper. */
.site :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], select, textarea) {
  border-color: var(--color-field-border);
}
.site :is(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], select, textarea):focus {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Fluent Forms (contact form 1 and the footer signup form 2). Its own CSS sets
   outline:none at (0,3,0) and prints the button colours inline at (0,4,1),
   so these reach (0,5,0) and up. The variables recolour its borders. */
.fluentform {
  --fluentform-primary: var(--color-primary);
  --fluentform-border-color: var(--color-field-border);
}
.site .fluentform .ff-el-form-control.ff-el-form-control {
  border-color: var(--color-field-border);
}
.site .fluentform .ff-el-form-control.ff-el-form-control:focus {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.site .fluentform .ff-el-form-control.ff-el-form-control::placeholder {
  color: var(--color-ink-muted);
  opacity: 1;
}
.site .fluentform .ff-btn-submit.ff-btn-submit:not(.ff_btn_no_style) {
  min-height: 2.75rem;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
}
.site .fluentform .ff-btn-submit.ff-btn-submit:not(.ff_btn_no_style):hover {
  border-color: var(--color-primary-hover);
  background-color: var(--color-primary-hover);
  color: var(--color-on-dark);
}
.site .fluentform .ff-btn-submit.ff-btn-submit:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
/* On black (the footer): fields keep their white fill with a gold ring, and
   the button is white with black text, so the gold "Join MSA" stays the one
   main action. */
.site .msa-panel-dark .fluentform .ff-el-form-control.ff-el-form-control:focus {
  border-color: var(--color-focus-on-dark);
  outline-color: var(--color-focus-on-dark);
}
.site .msa-panel-dark .fluentform .ff-btn-submit.ff-btn-submit:not(.ff_btn_no_style) {
  border-color: var(--color-on-dark);
  background-color: var(--color-on-dark);
  color: var(--color-on-accent);
}
.site .msa-panel-dark .fluentform .ff-btn-submit.ff-btn-submit:not(.ff_btn_no_style):hover {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}
.site .msa-panel-dark .fluentform .ff-btn-submit.ff-btn-submit:focus-visible {
  outline-color: var(--color-focus-on-dark);
}

/* --------------------------------------------------------------------------
   Divider (DESIGN.md sections 5 and 6): thin line + gold 8-point star.
   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 the 16 to 24px range */
  height: 1.25rem;
}
/* CSS-only terminal mark using the source SVG as a mask so it always takes
   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;
}

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

/* --------------------------------------------------------------------------
   Page header (DESIGN.md section 4): title, one Caveat line, star strip, on
   one left edge. The logo lives in the header, never repeated here.
   Pages built from the old pattern have the line-and-star divider between
   the title and the subtitle; it is hidden and the star strip is drawn after
   the subtitle instead. Event pages (.msa-event-page__header) are styled by
   their own CSS, so the new layout skips them.
   -------------------------------------------------------------------------- */
.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;
}
/* Corner ornaments are for the Home hero only. */
.msa-page-header__ornament {
  display: none;
}
.msa-page-header:not(.msa-event-page__header) {
  padding: var(--space-7) var(--space-5) var(--space-5);
  text-align: left;
}
/* Kadence sets the default content size to ~1242px, so without this the
   title sat at the far left while the text below starts in a 38rem column.
   38rem puts the title on the same left edge as the reading column (About,
   Resources, Activities, Documents, Announcements). */
.msa-page-header:not(.msa-event-page__header) > * {
  max-width: var(--width-text);
}
.msa-page-header:not(.msa-event-page__header) > .msa-divider {
  display: none;
}
.msa-page-header:not(.msa-event-page__header) .msa-page-header__title {
  margin: 0;
}
.msa-page-header:not(.msa-event-page__header) .msa-page-header__subtitle {
  margin: var(--space-2) 0 0;
}
.msa-page-header:not(.msa-event-page__header) > .msa-star-strip {
  height: 1rem;
  margin-top: var(--space-4);
}
.msa-page-header:not(.msa-event-page__header):has(> .msa-divider)::after {
  content: "";
  display: block;
  box-sizing: border-box;
  max-width: var(--width-text);
  height: 1rem;
  margin: var(--space-4) auto 0;
  background-color: var(--color-accent);
  background-image: url("../decorative/star-strip.svg");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
}
/* Cut the old 190 to 230px gap: the first section after a page header drops
   its 96px top padding (set inline by the block, hence !important). */
.single-content > .msa-page-header + .wp-block-group.alignfull[style*="padding-top"] {
  padding-top: var(--space-6) !important;
}
@media (min-width: 48rem) {
  .msa-page-header:not(.msa-event-page__header) {
    padding-top: var(--space-8);
  }
  .single-content > .msa-page-header + .wp-block-group.alignfull[style*="padding-top"] {
    padding-top: var(--space-7) !important;
  }
}

/* --------------------------------------------------------------------------
   Prayer times (DESIGN.md section 5): tabular; current-prayer row gets a
   gold left border.
   -------------------------------------------------------------------------- */
.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 section 5): left date callout (large numeral + dark
   gold month), right meta, footer strip (dark gold icon + date/time/place).
   Icons use --color-accent-text, never a light gold on white.
   -------------------------------------------------------------------------- */
.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-text); /* dark gold #7A5C00, 6.25:1 on white */
}

/* --------------------------------------------------------------------------
   Activity card (DESIGN.md section 5): illustration + small dark-gold
   capital eyebrow + bold name + description.
   -------------------------------------------------------------------------- */
.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 section 5): 3 methods side by side, stacked on
   phones.
   -------------------------------------------------------------------------- */
.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 section 2): Amiri, extra leading, never italic.
   -------------------------------------------------------------------------- */
[lang="ar"] {
  font-family: 'Amiri', serif;
  line-height: 1.8;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Motion (DESIGN.md section 7): honour prefers-reduced-motion.
   No parallax, carousels or scroll animation 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;
  }
}