/* ==========================================================================
   MSA 2026 Child: content.css
   Styles for the content patterns: Resources (resources.php,
   resources-support.php), About Islam (about-islam.php) and the new
   "Privacy" and "Islamic dates for your syllabus" pages.
   Loaded after patterns.css. Uses only the tokens from tokens.css.

   Kadence's .single-content rules (p, ul, li, h2, h3 ... up to 0,2,1) load
   after this file, so every rule here uses a doubled class or a parent
   class to reach at least (0,2,0), and (0,3,1) where Kadence has (0,2,1).

   Contrast checked (WCAG 2.1):
   - black #000000 (--color-on-accent) on MTU gold #FFCD00: 13.98:1
   - MTU gold on black (pillar numbers): 13.98:1
   - ink on the pale gold answer panel (gold 18% on white, #FFF6D1): 19.4:1
   - ink on surface-alt (#F5F5F5): 19.26:1
   Gold is used only as a fill or a rule here, never as text on white.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Jump links on Resources: the "On this page" and "Back to top" links carry
   .scroll-ignore, so Kadence's script (which always scrolls smoothly) leaves
   them alone and the browser jumps natively. Smooth only when the visitor
   allows motion. (scroll-margin-top for every [id] is in brand-signatures.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html:has(.msa-onthispage) {
    scroll-behavior: smooth;
  }
}

/* --------------------------------------------------------------------------
   Resources: "Thinking of Michigan Tech?" box (future students, parents).
   A light panel with a gold rule on the left, as wide as the text column.
   -------------------------------------------------------------------------- */
.msa-resources .msa-future.msa-future {
  box-sizing: border-box;
  max-width: var(--width-text);
  padding: var(--space-5);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-accent);
  border-radius: 8px;
}
@media (min-width: 48rem) {
  .msa-resources .msa-future.msa-future {
    padding: var(--space-6);
  }
}
.msa-resources .msa-future.msa-future > * {
  margin-top: 0;
  margin-bottom: 0;
}
.msa-resources .msa-future.msa-future > * + * {
  margin-top: var(--space-4);
}
.msa-resources .msa-future .msa-future__title.msa-future__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h3);
  line-height: var(--leading-heading);
  color: var(--color-primary);
}
.msa-resources .msa-future .msa-future__lead.msa-future__lead {
  color: var(--color-ink-muted);
}
.msa-resources .msa-future ul.msa-future__list.msa-future__list {
  margin-left: 0;
  padding-left: 1.25rem;
}
.msa-resources .msa-future ul.msa-future__list.msa-future__list > li {
  margin-bottom: var(--space-2);
}
.msa-resources .msa-future .wp-block-buttons.wp-block-buttons {
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Resources: "Praying in winter between classes" (four short lines).
   -------------------------------------------------------------------------- */
.msa-winter-prayer ul.msa-winter-prayer__list.msa-winter-prayer__list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-5);
  list-style: none;
  background-color: var(--color-surface-alt);
  border-radius: 8px;
}
.msa-winter-prayer ul.msa-winter-prayer__list.msa-winter-prayer__list > li {
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
}

/* Back to top inside the Resources sections sits a little below the content.
   (The link style itself lives with .msa-backtotop in brand-signatures.css.) */
.msa-resources .msa-backtotop.msa-backtotop,
.msa-support .msa-backtotop.msa-backtotop {
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   About Islam: the Five Pillars as tiles (a list, so it reads as one).
   -------------------------------------------------------------------------- */
.msa-about-islam ul.msa-pillars.msa-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: msa-pillar;
}
.msa-about-islam ul.msa-pillars.msa-pillars > li {
  counter-increment: msa-pillar;
  margin: 0;
  padding: var(--space-5);
  background-color: var(--color-surface-alt);
  border-top: 4px solid var(--color-accent);
  border-radius: 8px;
  line-height: var(--leading-body);
}
.msa-about-islam ul.msa-pillars.msa-pillars > li::before {
  content: counter(msa-pillar);
  content: counter(msa-pillar) / "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 800;
}
.msa-about-islam ul.msa-pillars.msa-pillars > li > strong:first-child {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h4);
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   About Islam: "Did you know?" tap-to-reveal fact cards.
   Core Details blocks: work without JavaScript, open with Enter or Space.
   Echoes the Faith Fair "Guess the fact" cards: black band on top, a gold
   round button, the answer on a pale gold panel.
   -------------------------------------------------------------------------- */
.msa-about-islam .msa-factcards.msa-factcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 40rem) {
  .msa-about-islam .msa-factcards.msa-factcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.msa-about-islam .msa-factcards.msa-factcards > * {
  margin: 0;
}
.msa-factcards .msa-factcard.msa-factcard {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 6px solid var(--color-primary);
  border-radius: 8px;
}
.msa-factcards .msa-factcard.msa-factcard > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h4);
  line-height: var(--leading-heading);
  color: var(--color-primary);
  list-style: none;
  cursor: pointer;
}
.msa-factcards .msa-factcard.msa-factcard > summary::-webkit-details-marker {
  display: none;
}
/* Gold round "+" button; turns into "x" when open. Decorative only: the
   summary itself is the control and its text is the question. */
.msa-factcards .msa-factcard.msa-factcard > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background:
    linear-gradient(var(--color-on-accent), var(--color-on-accent)) center / 0.875rem 2px no-repeat,
    linear-gradient(var(--color-on-accent), var(--color-on-accent)) center / 2px 0.875rem no-repeat,
    var(--color-accent);
  transition: transform var(--transition);
}
.msa-factcards .msa-factcard.msa-factcard[open] > summary::after {
  transform: rotate(45deg);
}
.msa-factcards .msa-factcard.msa-factcard > summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -4px;
  border-radius: 4px;
}
.msa-factcards .msa-factcard.msa-factcard > p {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  color: var(--color-ink);
  background-color: var(--color-surface-alt);
  background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  border-top: 2px solid var(--color-accent);
  border-radius: 0 0 7px 7px;
}

/* --------------------------------------------------------------------------
   About Islam: Ask a Muslim box, like the Faith Fair tent card:
   big black title, "anything." on a gold block, a star strip on top.
   -------------------------------------------------------------------------- */
.msa-about-islam .msa-askbox.msa-askbox {
  box-sizing: border-box;
  padding: var(--space-6) var(--space-5);
  background-color: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: 8px;
}
@media (min-width: 48rem) {
  .msa-about-islam .msa-askbox.msa-askbox {
    padding-inline: var(--space-6);
  }
}
.msa-about-islam .msa-askbox.msa-askbox > * {
  margin-top: 0;
  margin-bottom: 0;
}
.msa-about-islam .msa-askbox.msa-askbox > * + * {
  margin-top: var(--space-4);
}
/* The star strip runs edge to edge across the top of the box. */
.msa-about-islam .msa-askbox.msa-askbox > .msa-star-strip {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) var(--space-5);
  border-radius: 6px 6px 0 0;
}
@media (min-width: 48rem) {
  .msa-about-islam .msa-askbox.msa-askbox > .msa-star-strip {
    margin-inline: calc(-1 * var(--space-6));
  }
}
.msa-about-islam .msa-askbox .msa-askbox__title.msa-askbox__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-display-2);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
}
.msa-askbox__title .msa-askbox__anything.msa-askbox__anything {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 0 0.2em 0.05em;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* --------------------------------------------------------------------------
   About Islam: Invite MSA (four offers, then one gold button).
   -------------------------------------------------------------------------- */
.msa-about-islam .msa-invite.msa-invite {
  margin-top: var(--space-7);
}
.msa-about-islam .msa-invite.msa-invite > * + * {
  margin-top: var(--space-4);
}
.msa-invite .msa-invite__grid.msa-invite__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 40rem) {
  .msa-invite .msa-invite__grid.msa-invite__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.msa-invite .msa-invite__grid.msa-invite__grid > .msa-invite__offer {
  margin: 0;
  padding: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
}
.msa-invite .msa-invite__offer.msa-invite__offer > h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h4);
  line-height: var(--leading-heading);
  color: var(--color-primary);
}
.msa-invite .msa-invite__offer.msa-invite__offer > p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   New pages: "Privacy" (/privacy/) and "Islamic dates for your syllabus"
   (/islamic-dates/). Plain reading pages with one table.
   -------------------------------------------------------------------------- */
.msa-privacy.msa-privacy h2,
.msa-dates.msa-dates h2 {
  margin-top: var(--space-7);
}
.msa-privacy.msa-privacy h2:first-child,
.msa-dates.msa-dates h2:first-child {
  margin-top: 0;
}
.msa-dates .msa-dates__table.msa-dates__table {
  max-width: none;
}
.msa-dates .msa-dates__table.msa-dates__table td {
  color: var(--color-ink);
}
/* Phones: three text columns were wider than the screen (the last column
   ran to the edge), so fix the column widths and let long words wrap. */
@media (max-width: 40rem) {
  .msa-dates .msa-dates__table.msa-dates__table {
    table-layout: fixed;
    width: 100%;
    font-size: var(--type-small);
  }
  .msa-dates .msa-dates__table.msa-dates__table th,
  .msa-dates .msa-dates__table.msa-dates__table td {
    padding: var(--space-2);
    overflow-wrap: anywhere;
  }
}
.msa-dates .msa-dates__note.msa-dates__note {
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface-alt);
  border-left: 4px solid var(--color-accent);
  border-radius: 4px;
}
.msa-dates ol.msa-dates__tips.msa-dates__tips > li {
  margin-bottom: var(--space-3);
}
.msa-dates .msa-dates__signoff.msa-dates__signoff {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-weight: 600;
}

/* Print: the dates page is meant to be printed for a syllabus or a door.
   Hide the site header, footer and buttons; keep the tables whole. */
@media print {
  body:has(.msa-printable) #masthead,
  body:has(.msa-printable) #colophon,
  body:has(.msa-printable) .msa-page-header__ornament,
  .msa-printable .wp-block-buttons,
  .msa-printable .msa-backtotop {
    display: none !important;
  }
  .msa-printable.msa-printable {
    padding: 0 !important;
  }
  .msa-printable table,
  .msa-printable tr {
    break-inside: avoid;
  }
  .msa-printable a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}