fix(typography): improve global link colour and hover state

Changes the base link rule from a plain blue primary colour to the
site's accent orange (--color-accent-strong) with no underline, matching
the live site's link treatment. Adds a :hover/:active state that shifts
to the lighter accent, and carves out a.button so CTA buttons keep their
primary-colour label text.

www/src/components/FaqPage.astro

@@ -0,0 +1,608 @@
+---
+---
+<article class="faq-page">
+  <div class="faq-source container source-page">
+    <slot />
+  </div>
+
+  <section class="faq-search container-narrow">
+    <div class="hs-search-field hs-search-field--initialized">
+      <div class="hs-search-field__bar hs-search-field__bar--button-inline">
+        <form class="hs-search-field__form" action="/search">
+          <label class="sr-only" for="faq-search-input">Search FAQs</label>
+          <input
+            id="faq-search-input"
+            type="search"
+            class="hs-search-field__input"
+            name="q"
+            autocomplete="off"
+            placeholder="Search"
+            data-faq-search
+          />
+          <button class="hs-search-field__button" type="button" aria-label="Search">
+            <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true" width="18" height="18">
+              <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" fill="#254080"/>
+            </svg>
+          </button>
+        </form>
+      </div>
+    </div>
+  </section>
+
+  <section class="faq-accordion" aria-labelledby="faq-questions-heading">
+    <div class="container-narrow faq-accordion__inner">
+      <h2 id="faq-questions-heading">Questions &amp; Answers</h2>
+      <div class="faq-list" data-faq-list></div>
+    </div>
+  </section>
+
+  <section class="faq-cta faq-cta-primary">
+    <div class="container-narrow">
+      <p class="script-label">Still have questions?</p>
+      <h2>Reach Out to Learn More</h2>
+      <p>We hope this FAQ gives you a clear picture of how Applied Behavior Analysis (ABA) therapy at the Arizona Institute for Autism can support your child’s growth. If you have more questions or would like to <a href="/client-consultation">schedule an assessment</a>, please reach out. Our team is here to guide you and your learner every step of the way!</p>
+    </div>
+  </section>
+
+  <section class="faq-cta faq-cta-secondary">
+    <div class="container-narrow">
+      <h2>Need Support in Getting an Autism Diagnosis?</h2>
+      <p>To meet diagnostic criteria for ASD, a child must have persistent deficits in each of three areas of social communication and interaction plus at least two of four types of restricted repetitive behaviors. Consult with a Client Advocate today to receive individual and family support!</p>
+      <a class="button button-center" href="/client-consultation">Request an Appointment</a>
+    </div>
+  </section>
+</article>
+
+<script>
+  const initFaqPage = () => {
+    const root = document.querySelector('.faq-page');
+    const source = root?.querySelector('.faq-source.source-page');
+    const list = root?.querySelector('[data-faq-list]');
+    const search = root?.querySelector('[data-faq-search]');
+
+    if (!(root instanceof HTMLElement) || !(source instanceof HTMLElement) || !(list instanceof HTMLElement) || !(search instanceof HTMLInputElement)) {
+      return;
+    }
+
+    const nodes = [...source.childNodes];
+    const firstQuestionIndex = nodes.findIndex((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'H3');
+
+    if (firstQuestionIndex === -1) {
+      return;
+    }
+
+    let index = firstQuestionIndex;
+    let openedFirst = false;
+
+    while (index < nodes.length) {
+      const node = nodes[index];
+
+      if (!(node instanceof HTMLElement) || node.tagName !== 'H3') {
+        index += 1;
+        continue;
+      }
+
+      const details = document.createElement('details');
+      details.className = 'faq';
+      details.open = !openedFirst;
+
+      const summary = document.createElement('summary');
+      const title = document.createElement('h3');
+      title.textContent = node.textContent?.trim() || '';
+      const icon = document.createElement('span');
+      icon.className = 'faq-icon';
+      icon.setAttribute('aria-hidden', 'true');
+      summary.append(title, icon);
+      details.appendChild(summary);
+
+      const answer = document.createElement('div');
+      answer.className = 'faq-answer interactive-faq-with-seo-schema-integration__list__answer';
+      const answerInner = document.createElement('div');
+      answerInner.className = 'faq-answer__inner';
+
+      index += 1;
+      while (index < nodes.length && !(nodes[index] instanceof HTMLElement && nodes[index].tagName === 'H3')) {
+        const answerNode = nodes[index];
+        if (answerNode.nodeType === Node.TEXT_NODE) {
+          const text = answerNode.textContent?.trim();
+          if (text) {
+            const paragraph = document.createElement('p');
+            paragraph.textContent = text;
+            answerInner.appendChild(paragraph);
+          }
+        } else {
+          answerInner.appendChild(answerNode.cloneNode(true));
+        }
+        answerNode.remove();
+        index += 1;
+      }
+
+      answer.appendChild(answerInner);
+      details.appendChild(answer);
+      list.appendChild(details);
+      openedFirst = true;
+    }
+
+    for (let i = firstQuestionIndex; i < nodes.length; i += 1) {
+      nodes[i].remove();
+    }
+
+    const faqItems = [...list.querySelectorAll('details.faq')];
+
+    const closeTimers = new WeakMap();
+    const closeHandlers = new WeakMap();
+
+    const getAnswer = (item) => item.querySelector('.interactive-faq-with-seo-schema-integration__list__answer');
+    const getAnswerInner = (item) => item.querySelector('.faq-answer__inner');
+
+    const setClosedStyles = (answer) => {
+      answer.style.height = '0px';
+      answer.style.opacity = '0';
+      answer.style.transform = 'translateY(-.35rem)';
+    };
+
+    const setOpenStyles = (answer) => {
+      answer.style.opacity = '1';
+      answer.style.transform = 'translateY(0)';
+    };
+
+    faqItems.forEach((item, index) => {
+      const answer = getAnswer(item);
+
+      if (!answer) {
+        return;
+      }
+
+      if (index === 0 && item.open) {
+        answer.style.height = 'auto';
+        setOpenStyles(answer);
+        delete item.dataset.state;
+      } else if (!item.open) {
+        answer.style.height = '0px';
+        setClosedStyles(answer);
+      }
+    });
+
+    const closeItem = (item) => {
+      if (!item.open || item.dataset.state === 'closing') {
+        return;
+      }
+
+      item.dataset.state = 'closing';
+      const answer = getAnswer(item);
+      const answerInner = getAnswerInner(item);
+
+      if (answer && answerInner) {
+        const priorHandler = closeHandlers.get(item);
+        if (priorHandler) {
+          answer.removeEventListener('transitionend', priorHandler);
+        }
+
+        answer.style.height = `${answerInner.scrollHeight}px`;
+        answer.offsetHeight; // force reflow
+        setClosedStyles(answer);
+
+        const onTransitionEnd = (event) => {
+          if (event.target !== answer || event.propertyName !== 'height') {
+            return;
+          }
+
+          item.removeAttribute('open');
+          delete item.dataset.state;
+          answer.style.height = '0px';
+          answer.removeEventListener('transitionend', onTransitionEnd);
+          closeHandlers.delete(item);
+          closeTimers.delete(item);
+        };
+
+        closeHandlers.set(item, onTransitionEnd);
+        answer.addEventListener('transitionend', onTransitionEnd);
+      }
+
+      const timer = window.setTimeout(() => {
+        const answerStillOpen = answer && answer.offsetHeight > 0;
+        if (!answerStillOpen) {
+          return;
+        }
+
+        item.removeAttribute('open');
+        delete item.dataset.state;
+        if (answer) {
+          answer.style.height = '0px';
+        }
+        closeHandlers.delete(item);
+        closeTimers.delete(item);
+      }, 360);
+      closeTimers.set(item, timer);
+    };
+
+    const openItem = (item) => {
+      if (item.open && item.dataset.state !== 'closing') {
+        return;
+      }
+
+      const timer = closeTimers.get(item);
+      if (timer) {
+        window.clearTimeout(timer);
+        closeTimers.delete(item);
+      }
+
+      const priorHandler = closeHandlers.get(item);
+      const answer = getAnswer(item);
+      if (priorHandler && answer) {
+        answer.removeEventListener('transitionend', priorHandler);
+        closeHandlers.delete(item);
+      }
+
+      item.setAttribute('open', '');
+      item.dataset.state = 'opening';
+
+      const answerInner = getAnswerInner(item);
+      if (answer && answerInner) {
+        answer.style.height = '0px';
+        setClosedStyles(answer);
+        answer.offsetHeight; // force reflow
+        window.requestAnimationFrame(() => {
+          answer.style.height = `${answerInner.scrollHeight}px`;
+          setOpenStyles(answer);
+        });
+
+        const onTransitionEnd = (event) => {
+          if (event.target !== answer || event.propertyName !== 'height') {
+            return;
+          }
+
+          if (item.dataset.state === 'opening') {
+            answer.style.height = 'auto';
+            delete item.dataset.state;
+          }
+
+          answer.removeEventListener('transitionend', onTransitionEnd);
+        };
+
+        answer.addEventListener('transitionend', onTransitionEnd);
+      }
+    };
+
+    faqItems.forEach((item) => {
+      const summary = item.querySelector('summary');
+      summary?.addEventListener('click', (event) => {
+        event.preventDefault();
+        const willOpen = !item.open;
+
+        faqItems.forEach((other) => {
+          if (other !== item) {
+            closeItem(other);
+          }
+        });
+
+        if (willOpen) {
+          openItem(item);
+        } else {
+          closeItem(item);
+        }
+      });
+    });
+
+    const applyFilter = () => {
+      const query = search.value.trim().toLowerCase();
+      faqItems.forEach((item) => {
+        const text = item.textContent?.toLowerCase() || '';
+        item.hidden = Boolean(query) && !text.includes(query);
+      });
+    };
+
+    search.addEventListener('input', applyFilter);
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFaqPage, { once: true });
+  } else {
+    initFaqPage();
+  }
+</script>
+
+<style>
+  .faq-page {
+    padding-bottom: 0;
+  }
+
+  .faq-source {
+    padding-block: 4rem 1rem;
+  }
+
+  .faq-search {
+    margin-bottom: 1.5rem;
+    padding-block: 1rem 0.75rem;
+  }
+
+  .sr-only {
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .hs-search-field {
+    margin-inline: auto;
+    width: min(780px, 100%);
+  }
+
+  .hs-search-field--initialized {
+    display: block;
+  }
+
+  .hs-search-field__bar {
+    display: block;
+    width: 100%;
+  }
+
+  .hs-search-field__form {
+    display: flex;
+    margin: 0;
+    width: 100%;
+  }
+
+  .hs-search-field__input {
+    appearance: none;
+    background: #fff;
+    border: 2px solid rgba(37, 64, 128, .2);
+    border-radius: 4px;
+    color: var(--color-primary);
+    flex: 1;
+    font: inherit;
+    line-height: 1.5;
+    min-height: 3.125rem;
+    min-width: 0;
+    padding: .9rem 1.25rem;
+    box-shadow: 0 1px 2px rgba(37, 64, 128, .06);
+  }
+
+  .hs-search-field__input::placeholder {
+    color: var(--color-muted);
+    opacity: 1;
+  }
+
+  .hs-search-field__input:focus {
+    border-color: var(--color-accent);
+    outline: none;
+  }
+
+  .hs-search-field__button {
+    align-items: center;
+    background: #fff;
+    border: 2px solid rgba(37, 64, 128, .2);
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(37, 64, 128, .06);
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    margin-left: 2px;
+    min-height: 3.125rem;
+    opacity: .85;
+    padding-inline: 1rem;
+  }
+
+  .hs-search-field__button:hover {
+    opacity: 1;
+  }
+
+  .faq-accordion {
+    background: var(--color-tint);
+    padding-block: 2rem 4rem;
+  }
+
+  .faq-accordion__inner {
+    margin-inline: auto;
+  }
+
+  .faq-accordion h2 {
+    color: var(--color-primary);
+    font-family: var(--font-heading);
+    font-size: clamp(2rem, 4vw, 3rem);
+    margin: 0 0 1.75rem;
+    text-align: center;
+  }
+
+  :global(.faq-list) {
+    padding: 1.5rem 1.25rem 1rem;
+  }
+
+  :global(.faq-list .faq) {
+    background: transparent;
+    border-bottom: 1px solid var(--color-accent-strong);
+    padding: 0;
+  }
+
+  :global(.faq-list .faq:last-child) {
+    border-bottom: 0;
+  }
+
+  :global(.faq-list .faq[hidden]) {
+    display: none;
+  }
+
+  :global(.faq-list summary) {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: 1.5rem;
+    justify-content: space-between;
+    list-style: none;
+    padding: .875rem 0;
+  }
+
+  :global(.faq-list summary::-webkit-details-marker) {
+    display: none;
+  }
+
+  :global(.faq-list summary h3) {
+    color: var(--color-primary);
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.625;
+    margin: 0;
+  }
+
+  :global(.faq-list .faq-icon) {
+    flex: 0 0 auto;
+    display: block;
+    height: 12px;
+    margin-inline-start: auto;
+    position: relative;
+    width: 12px;
+  }
+
+  :global(.faq-list .faq-icon::after) {
+    border-bottom: 1px solid var(--color-accent-strong);
+    border-right: 1px solid var(--color-accent-strong);
+    content: "";
+    display: block;
+    height: 12px;
+    transform: translateY(-50%) rotate(45deg);
+    transform-origin: center;
+    transition: transform 300ms ease;
+    width: 12px;
+  }
+
+  :global(.faq-list details[open] .faq-icon::after) {
+    transform: rotate(-135deg);
+  }
+
+  :global(.faq-list .interactive-faq-with-seo-schema-integration__list__answer) {
+    height: 0;
+    margin-bottom: 0;
+    opacity: 0;
+    transform: translateY(-.35rem);
+    overflow: hidden;
+    transition: height .3s ease, margin-bottom .3s ease, opacity .3s ease, transform .3s ease;
+  }
+
+  :global(.faq-list .faq[open] .interactive-faq-with-seo-schema-integration__list__answer) {
+    margin-bottom: .85rem;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  :global(.faq-list .faq-answer__inner) {
+    padding-bottom: .25rem;
+  }
+
+  :global(.faq-list .faq-answer p) {
+    margin: 0 0 1rem;
+    line-height: 1.7;
+  }
+
+  :global(.faq-list .faq-answer p:last-child) {
+    margin-bottom: 0;
+  }
+
+  :global(.faq-list .faq-answer__inner h4),
+  :global(.faq-list .faq-answer__inner h5) {
+    color: var(--color-primary);
+    font-family: var(--font-heading);
+    font-weight: 700;
+    margin-top: 0;
+    text-wrap: balance;
+  }
+
+  :global(.faq-list .faq-answer__inner h4) {
+    font-size: 2rem;
+    line-height: 2.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  :global(.faq-list .faq-answer__inner h5) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    margin-bottom: 1.25rem;
+  }
+
+  :global(.faq-list .faq-answer__inner :where(ul, ol)) {
+    margin-block: 0 1.5rem;
+    padding-inline-start: 2.5rem;
+  }
+
+  :global(.faq-list .faq-answer__inner :where(ul, ol) :where(ul, ol)) {
+    margin-block: .25rem 0;
+  }
+
+  :global(.faq-list .faq-answer__inner li) {
+    line-height: 1.625;
+    margin-block: 0;
+    padding-inline-start: .15rem;
+  }
+
+  :global(.faq-list .faq-answer__inner li > p) {
+    margin-block: 0;
+  }
+
+  :global(.faq-list .faq-answer__inner ul > li::marker) {
+    color: var(--color-accent-strong);
+  }
+
+  :global(.faq-list .faq-answer__inner ol > li::marker) {
+    color: var(--color-primary);
+  }
+
+  .faq-cta-primary {
+    background: var(--color-primary);
+    color: #fff;
+    padding-block: 3.5rem;
+  }
+
+  .faq-cta-primary .script-label {
+    color: #f9b34d;
+  }
+
+  .faq-cta-primary h2,
+  .faq-cta-primary p {
+    color: #fff;
+  }
+
+  .faq-cta-primary h2 {
+    font-size: clamp(1.8rem, 4vw, 2.8rem);
+    margin-bottom: .75rem;
+  }
+
+  .faq-cta-secondary {
+    background: #fff;
+    padding-block: 3.5rem 4rem;
+  }
+
+  .faq-cta-secondary h2 {
+    color: var(--color-primary);
+    font-size: clamp(1.8rem, 4vw, 2.8rem);
+    margin-bottom: .75rem;
+  }
+
+  .faq-cta-secondary .button {
+    margin-top: 1.5rem;
+  }
+
+  @media (min-width: 768px) {
+    .faq-source {
+      padding-top: 4.5rem;
+    }
+
+    .faq-search {
+      margin-bottom: 2rem;
+      padding-block-end: 1rem;
+    }
+
+    .faq-list {
+      padding: 2.5rem 2rem 1.5rem;
+    }
+
+    .faq-accordion h2 {
+      margin-bottom: 2rem;
+    }
+  }
+</style>

www/src/components/PageHero.astro

@@ -1,33 +1,40 @@
 ---
 interface Props {
   title: string;
+  subtitle?: string;
   image?: string;
   eyebrow?: string;
   constrain?: boolean;
 }
-const { title, image, eyebrow, constrain = false } = Astro.props;
+const { title, subtitle, image, eyebrow, constrain = false } = Astro.props;
 ---
 
 <header class:list={['page-hero', { 'page-hero--image': image, 'page-hero--constrained': image && constrain }]} style={image ? `--hero-image: url("${image}")` : undefined}>
   <div class="container">
+    <div class="page-hero__heading">
     {eyebrow
-      ? <div class="page-hero__copy"><p class="script-label">{eyebrow}</p><h1>{title}</h1></div>
+      ? <div class="page-hero__copy"><p class="script-label">{eyebrow}</p><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</div>
-      : <h1>{title}</h1>
+      : <><h1>{title}</h1>{subtitle && <h2>{subtitle}</h2>}</>
     }
     </div>
+  </div>
 </header>
 
 <style>
   .page-hero { background: var(--color-tint); padding-block: 4rem; text-align: center; }
+  .page-hero__heading { display: inline-block; }
   .page-hero h1 { margin: 0; }
+  .page-hero h2 { color: var(--color-primary); font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.15; margin: .5rem 0 0; }
   .page-hero--image { background-image: var(--hero-image); background-position: center; background-repeat: no-repeat; background-size: cover; max-height: 420px; padding-block: 0; text-align: left; }
   .page-hero--image > .container { padding-block: 10rem; }
   .page-hero--image h1 { max-width: 600px; }
+  .page-hero--image h2 { max-width: 600px; }
   .page-hero__copy { max-width: 600px; }
   .page-hero--constrained { background-image: var(--hero-image), linear-gradient(var(--color-tint), var(--color-tint)); background-clip: content-box, border-box; background-origin: content-box, border-box; background-position: center, center; background-repeat: no-repeat, repeat; background-size: cover, auto; padding-inline: max(0px, calc((100% - var(--container-w)) / 2)); }
   @media (max-width: 760px) {
+    .page-hero__heading { background: #fffb; padding: 2rem; }
     .page-hero--image > .container { padding-block: 6.25rem; }
     .page-hero--image { text-align: center; }
-    .page-hero--image h1, .page-hero__copy { margin-inline: auto; }
+    .page-hero--image h1, .page-hero--image h2, .page-hero__copy { margin-inline: auto; }
   }
 </style>

www/src/layouts/PageLayout.astro

@@ -5,6 +5,7 @@ import TeamPage from '../components/TeamPage.astro';
 import AboutPage from '../components/AboutPage.astro';
 import ServicesPage from '../components/ServicesPage.astro';
 import CareersPage from '../components/CareersPage.astro';
+import FaqPage from '../components/FaqPage.astro';
 import PageHero from '../components/PageHero.astro';
 import { pageHeroImages } from '../data/page-visuals';
 const { entry } = Astro.props;
@@ -52,7 +53,7 @@ const isService = Boolean(serviceTitles[entry.data.lang]?.[entry.data.slug]);
 const heroImage = pageHeroImages[entry.data.slug];
 ---
 <BaseLayout title={entry.data.title} description={entry.data.description} canonical={entry.data.canonical} image={entry.data.featuredImage || heroImage} lang={entry.data.lang}>
-  <PageHero title={bannerTitle} image={heroImage} constrain />
+  <PageHero title={bannerTitle} subtitle={entry.data.slug === 'faqs' ? 'FAQs' : undefined} image={heroImage} constrain />
   {entry.data.slug === 'team' && entry.data.lang === 'en'
     ? <TeamPage />
     : entry.data.slug === 'about' && entry.data.lang === 'en'
@@ -61,6 +62,8 @@ const heroImage = pageHeroImages[entry.data.slug];
     ? <ServicesPage />
     : entry.data.slug === 'careers' && entry.data.lang === 'en'
     ? <CareersPage />
+    : entry.data.slug === 'faqs' && entry.data.lang === 'en'
+    ? <FaqPage><slot /></FaqPage>
     : <article class:list={['prose', 'source-page', 'container', { 'service-page': isService }]}><slot /></article>}
   {showForm && <FormShell title={bannerTitle} showBackground={entry.data.slug === 'client-consultation'} />}
 </BaseLayout>

www/src/styles/typography.css

@@ -8,7 +8,9 @@ h1, h2, h3 { color: var(--color-primary); font-family: var(--font-heading); line
 h1 { font-size: clamp(2.5rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 var(--space-md); }
 h2 { font-size: clamp(2rem, 4vw, 2.4rem); line-height: 1.25; }
 h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
-a { color: var(--color-primary); }
+a, a:visited { color: var(--color-accent-strong); text-decoration: none; }
+a:hover, a:active { color: var(--color-accent); }
+a.button { color: var(--color-primary) }
 .eyebrow { color: var(--color-secondary); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
 .lede, .hero-copy { color: var(--color-muted); font-size: 1.25rem; }
 .script-label { color: var(--color-accent-strong); font-family: var(--font-accent); font-size: 2rem; margin: 0; }