/*
  Function-guide card restoration, October 2026.
  Keep these selectors INSIDE .function-page to avoid changing homepage and
  software-directory cards. Loaded after site-overrides.css by head.html.
*/
.function-page .function-introduction {
  margin: 0 0 1.5rem;
}
.function-page .function-introduction > .intro,
.function-page .function-introduction > :first-child:not(.intro) {
  margin-top: 0;
}
.function-page .function-introduction > .intro {
  padding: 1.15rem 1.45rem;
  background: var(--card-bg, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 4px solid #087981;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .045);
}

/* The original template wrapped each H2 section in a light/dark card. */
.function-page .function-content > .function-section.card {
  display: block;
  margin: 0 0 1.5rem;
  padding: clamp(1.15rem, 2.5vw, 1.85rem);
  background: var(--card-bg, #ffffff) !important;
  border: 1px solid var(--border, #dbe2e8);
  border-radius: 14px;
  box-shadow: 0 5px 20px rgba(15, 23, 42, .06);
  color: var(--text, #111827);
  transform: none;
}
.function-page .function-content > .function-section.card:hover {
  transform: none;
  box-shadow: 0 5px 20px rgba(15, 23, 42, .06);
}

/* Override a late site-wide rule that made H2s look like page separators. */
.function-page .function-content > .function-section > h2 {
  display: flex !important;
  align-items: center;
  gap: .65rem;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: clamp(1.25rem, 2vw, 1.48rem);
  line-height: 1.35;
  font-weight: 750;
  color: var(--text, #111827);
}
.function-page .function-content > .function-section > h2::before {
  content: "●";
  flex: 0 0 1.6rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent-soft, #e8faf8);
  color: #087981;
  font-size: .8rem;
  line-height: 1;
}
.function-page .function-section-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  background: var(--accent-soft, #e8faf8);
  color: #087981;
  font-size: 1rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.function-page .function-section-toggle:hover {
  border-color: #087981;
}
.function-page .function-section-toggle:focus-visible {
  outline: 3px solid #087981;
  outline-offset: 2px;
}
.function-page .function-section > .section-body {
  display: flow-root;
  margin-top: 1.1rem;
  max-height: none;
  opacity: 1;
  overflow: visible;
  color: var(--text, #111827);
}
.function-page .function-section > .section-body[hidden] {
  display: none !important;
}
.function-page .function-section > .section-body > :first-child {
  margin-top: 0;
}
.function-page .function-section > .section-body > :last-child {
  margin-bottom: 0;
}
.function-page .function-section h3 {
  font-size: 1.12rem;
}
.function-page .function-section pre {
  background: var(--code-bg, #111827);
  color: var(--code-text, #f9fafb);
}
.function-page .function-section table {
  max-width: 100%;
}

/* Respect dark mode while keeping sections distinct from the page background. */
.dark .function-page .function-content > .function-section.card,
.dark .function-page .function-introduction > .intro {
  background: #0f172a !important;
  border-color: #334155;
  color: #e5e7eb;
  box-shadow: 0 5px 22px rgba(0, 0, 0, .2);
}
.dark .function-page .function-section-toggle,
.dark .function-page .function-content > .function-section > h2::before {
  background: #134e4a;
  border-color: #2f766e;
  color: #a7f3d0;
}
@media (max-width: 650px) {
  .function-page .function-content > .function-section.card {
    padding: 1rem 1.05rem;
  }
  .function-page .function-content > .function-section > h2 {
    font-size: 1.2rem;
    align-items: flex-start;
  }
  .function-page .function-content > .function-section > h2::before { margin-top: .06rem; }
}