/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

/* InfoHandler brand fonts, carried over from the WP site */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --pico-font-family-sans-serif:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-display: "Cambon", "Manrope", sans-serif;
}

/* Team photo grid (modular/team.html.twig) — round avatars in the
   features-grid layout */
.modular-features.team .feature-icon img {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Branded feature illustrations (Home "Smart Tools" cards) — full-width
   art at the top of each card */
.modular-features.illustrated .feature-icon {
  gap: 0;
}
.modular-features.illustrated .feature-icon img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

/* SOC 2 badge (About "Awards & Certificates"). The source is 1113px wide.
   On a phone the two cards stack so the badge stays readable. */
.modular-features.certificates .column,
.modular-features.certificates .feature-icon {
  min-width: 0;
}
.modular-features.certificates .feature-icon img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  border: 1px solid var(--q2-divider);
  border-radius: var(--q2-radius);
}
@media (max-width: 640px) {
  .modular-features.certificates .columns {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 100vw is a definite size, so the 1113px artwork cannot widen the page. */
  .modular-features.certificates .feature-icon img {
    width: 100%;
    max-width: calc(100vw - 5.5rem);
    height: auto;
  }
}

/* Branded impact icons (Home "Our Impact" cards) — small SVG glyphs */
.modular-features.iconed .feature-icon img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Hero — larger headline + intro, and drop the scroll-down chevron */
.modular-hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.28;
}
.modular-hero p {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  max-width: 46ch;
  color: var(--q2-text);
  hyphens: none;
  text-wrap: balance;
}
#to-start {
  display: none;
}

/* Hero banner image (modular/banner) — the three-photo classroom strip
   sitting full-width directly under the hero headline */
.modular-banner {
  padding-top: 0.5rem;
  padding-bottom: 0;
}
.modular-banner .container {
  max-width: 1360px;
}
.modular-banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Stats band — a white card floating up to overlap the banner bottom
   (echoing the WP hero stat card), big brand-green numbers inside */
.modular-features.stats {
  margin-top: -7rem;
  padding-top: 0;
  position: relative;
  z-index: 2;
  /* transparent so the banner photos show through behind the card;
     the base .modular-features rule fills an opaque page background */
  background: transparent;
}
.modular-features.stats .frame-box {
  max-width: 900px;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--q2-radius-lg);
  box-shadow: var(--q2-shadow-raised);
}
.modular-features.stats .columns {
  margin-top: 0;
}
.modular-features.stats .column {
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.modular-features.stats .column:hover {
  transform: none;
  box-shadow: none;
}
.modular-features.stats .feature-icon {
  align-items: center;
  margin-bottom: 0.25rem;
}
.modular-features.stats .feature-icon h6 {
  font-family: var(--pico-font-family-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: #0f203a;
}
.modular-features.stats .feature-content p {
  text-align: center;
}

/* CEO intro — keep Steve's headshot modest, not full-column */
.modular-text.ceo img {
  max-width: 420px;
  margin: 0 auto;
  border-radius: var(--q2-radius-lg);
}

/* FAQ accordion — native <details>/<summary> as clean cards with a
   green +/- affordance */
.modular-text .faq {
  max-width: 760px;
  margin: 0 auto 0.6rem;
  padding: 0 1.25rem;
  background: var(--q2-bg-elev);
  border-radius: var(--q2-radius-md);
  box-shadow: var(--q2-shadow-card);
}
.modular-text .faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
  color: var(--q2-text-strong);
}
.modular-text .faq summary::-webkit-details-marker { display: none; }
.modular-text .faq summary::after {
  content: "+";
  color: var(--q2-accent);
  font-size: 1.5rem;
  line-height: 1;
  flex: none;
}
.modular-text .faq[open] summary::after { content: "\2212"; }
.modular-text .faq > :not(summary) {
  margin: 0;
  padding-bottom: 1.1rem;
  color: var(--q2-text-muted);
}
.modular-text.faq-section h2 { text-align: center; }
.modular-text.faq-section > .container > .columns > .column { grid-column: 1 / -1; }
.modular-text.faq-section h3 {
  max-width: 760px;
  margin: 2.25rem auto 0.75rem;
  padding: 0 1.25rem;
  font-family: var(--pico-font-family-sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--q2-accent);
}
.modular-text.faq-section h3:first-of-type { margin-top: 0.5rem; }

/* Review cards — 2-up on desktop/tablet, 1-up on mobile (scoped to
   .reviews so the shared auto-fit grid and other feature blocks keep
   their column counts). Card reads: quote mark, quote, then an
   attribution row of initials-avatar + name. */
.modular-features.reviews .columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .modular-features.reviews .columns {
    grid-template-columns: minmax(0, 1fr);
  }
}
.modular-features.reviews .column {
  display: flex;
  flex-direction: column;
}
.modular-features.reviews .column::before {
  content: "\201C";
  order: 0;
  display: block;
  font-family: var(--pico-font-family-display);
  font-size: 2.5rem;
  line-height: 0.6;
  color: var(--q2-accent);
  margin-bottom: 0.5rem;
}
.modular-features.reviews .feature-content {
  order: 1;
}
.modular-features.reviews .feature-content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--q2-text);
}
.modular-features.reviews .feature-icon {
  order: 2;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 0;
}
.modular-features.reviews .feature-icon h6 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--q2-accent);
}
.review-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--q2-accent);
  color: var(--q2-accent-contrast, #fff);
  font-family: var(--pico-font-family-sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}