/* ---------- COAAA mobile navigation - added 18 Sep 2026 ---------- */
/* Fallback (no JavaScript): wrapped two-row menu */
@media (max-width: 900px) {
  nav { padding: 0 0.9rem; }
  .nav-inner { flex-direction: column; height: auto; padding: 0.55rem 0 0.6rem; gap: 0.5rem; }
  .nav-logo img { height: 34px; }
  .nav-links { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.15rem 0.25rem; }
  .nav-links a { font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.3rem 0.45rem; }
  .nav-cta { padding: 0.3rem 0.7rem !important; }
  .page-top { padding-top: calc(104px + 2rem) !important; }
}
/* Enhanced (JavaScript available): hamburger menu */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px;
  flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--charcoal);
  border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  html.coaaa-js nav { padding: 0 0.6rem 0 0.9rem; }
  html.coaaa-js .nav-inner { flex-direction: row; height: 62px; padding: 0; gap: 0;
    justify-content: space-between; align-items: center; }
  html.coaaa-js .nav-toggle { display: flex; }
  html.coaaa-js .nav-links {
    display: none !important; position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    background: #fdfbf7; border-bottom: 1px solid var(--pale); z-index: 1000;
    padding: 0.5rem 0.9rem 1rem; gap: 0.1rem;
    box-shadow: 0 12px 28px var(--shadow);
    max-height: calc(100vh - 62px); overflow-y: auto; }
  html.coaaa-js nav.is-open .nav-links { display: flex !important; }
  html.coaaa-js .nav-links a { font-size: 0.86rem; letter-spacing: 0.06em;
    padding: 0.8rem 0.6rem; display: block; border-radius: 6px; }
  html.coaaa-js .nav-cta { text-align: center; margin-top: 0.45rem; padding: 0.8rem 0.6rem !important; }
  html.coaaa-js .page-top { padding-top: calc(62px + 2.5rem) !important; }
}/* ==========================================================
   New-design pages: hold the old theme off.
   Scoped to .LayoutPlain so old-theme pages are unaffected.
   ========================================================== */
 
/* 1. Let our own page background show through Wild Apricot's zones */
.LayoutPlain .zonePlace.zoneContent,
.LayoutPlain .zonePlace.zoneContent > div { background: transparent; }
 
/* 2. Headings keep the case we wrote them in */
.LayoutPlain h1,
.LayoutPlain h2,
.LayoutPlain h3,
.LayoutPlain h4 { text-transform: none !important; }
 
/* 3. Links. The theme colours every link teal at a higher specificity
      than our page styles. These hand control back. The :not() is not
      decoration, it is what out-ranks the theme's own selector. */
.LayoutPlain a:not(.stylizedButton),
.LayoutPlain a:link:not(.stylizedButton),
.LayoutPlain a:visited:not(.stylizedButton),
.LayoutPlain a:hover:not(.stylizedButton),
.LayoutPlain a:active:not(.stylizedButton) { color: inherit; }
 
.LayoutPlain .nav-links a:not(.stylizedButton) { color: var(--charcoal); }
.LayoutPlain .nav-links a:not(.stylizedButton):hover { color: var(--navy); }
.LayoutPlain .nav-links a.nav-cta:not(.stylizedButton) { color: #fff; }
.LayoutPlain .nav-links a.nav-login:not(.stylizedButton) { color: var(--navy); }
 
.LayoutPlain a.btn-gold:not(.stylizedButton) { color: var(--charcoal); }
.LayoutPlain a.btn-ghost:not(.stylizedButton) { color: #fff; }
.LayoutPlain a.btn-navy:not(.stylizedButton) { color: #fff; }
.LayoutPlain a.card-link:not(.stylizedButton) { color: var(--charcoal); }
.LayoutPlain a.prog-link:not(.stylizedButton) { color: var(--navy); }
.LayoutPlain .contact-item a:not(.stylizedButton) { color: var(--navy); }
.LayoutPlain .step a:not(.stylizedButton) { color: var(--navy); }
.LayoutPlain .officers-note a:not(.stylizedButton) { color: var(--navy); }
 
.LayoutPlain .footer-links a:not(.stylizedButton) { color: rgba(255,255,255,0.4); }
.LayoutPlain .footer-links a:not(.stylizedButton):hover { color: rgba(255,255,255,0.8); }
.LayoutPlain .footer-copy a:not(.stylizedButton) { color: rgba(255,255,255,0.3); }
 
/* end of theme fix */
<script type="text/javascript">
/* COAAA site scripts - v3, 19 Sep 2026                                */
/* 1. Mobile hamburger navigation      (unchanged from v2)             */
/* 2. Footer copyright year            (unchanged from v2)             */
/* 3. NEW: header and footer on Wild Apricot system pages.             */
/*                                                                     */
/* Section 3 only ever runs when the URL path starts with /sys/.       */
/* Content pages are never touched by it, new or old.                  */
(function () {

  /* Set the marker as early as possible, before the old header has a  */
  /* chance to paint. The CSS hides the old zones off this class.      */
  var IS_SYS = /^\/sys\//i.test(window.location.pathname);
  if (IS_SYS && document.documentElement) {
    document.documentElement.className += ' coaaa-sys';
  }

  /* ---------- 1. Mobile navigation ---------- */
  var navTries = 0;
  function buildNav(nav, inner, links) {
    if (nav.querySelector('.nav-toggle')) return;
    document.documentElement.classList.add('coaaa-js');
    if (!links.id) links.id = 'coaaa-nav-menu';
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'nav-toggle';
    btn.setAttribute('aria-label', 'Open menu');
    btn.setAttribute('aria-expanded', 'false');
    btn.setAttribute('aria-controls', links.id);
    btn.appendChild(document.createElement('span'));
    btn.appendChild(document.createElement('span'));
    btn.appendChild(document.createElement('span'));
    inner.appendChild(btn);
    function set(open) {
      nav.classList.toggle('is-open', open);
      btn.classList.toggle('is-open', open);
      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      btn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
    }
    btn.addEventListener('click', function (e) {
      e.stopPropagation();
      set(!nav.classList.contains('is-open'));
    });
    document.addEventListener('click', function (e) { if (!nav.contains(e.target)) set(false); });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') set(false); });
    links.addEventListener('click', function (e) { if (e.target.closest('a')) set(false); });
    window.addEventListener('resize', function () { if (window.innerWidth > 900) set(false); });
  }
  function initNav() {
    var nav = document.querySelector('nav');
    var inner = nav && nav.querySelector('.nav-inner');
    var links = nav && nav.querySelector('.nav-links');
    if (nav && inner && links) { buildNav(nav, inner, links); return; }
    if (++navTries < 120) setTimeout(initNav, 150);
  }

  /* ---------- 2. Footer copyright year ---------- */
  /* Rewrites only the year in the "(c) YYYY" text node.               */
  /* The address and the email link are left untouched.                */
  var yearTries = 0;
  function initYear() {
    var el = document.querySelector('.footer-copy');
    if (!el) { if (++yearTries < 120) setTimeout(initYear, 150); return; }
    var year = String(new Date().getFullYear());
    var nodes = el.childNodes;
    for (var i = 0; i < nodes.length; i++) {
      var n = nodes[i];
      if (n.nodeType === 3 && /©\s*20\d\d/.test(n.nodeValue)) {
        n.nodeValue = n.nodeValue.replace(/(©\s*)20\d\d/, '$1' + year);
      }
    }
  }

  /* ---------- 3. System page header and footer ---------- */
  /* Wild Apricot will not let a Custom layout be pasted into Login,   */
  /* View profile, password reset and the rest, so the markup is put   */
  /* in from here instead. Once it exists, section 1 finds it and the  */
  /* hamburger works on these pages exactly as it does elsewhere.      */

  /* The old header carries the member menu when someone is signed in,   */
  /* and that header is hidden here, so the links it held are rebuilt    */
  /* into the nav instead. Nothing a member could reach before is lost.  */
  function authItems() {
    var signOut = document.querySelector('a[href*="/Sys/Login/SignOut"]');
    if (signOut) {
      return '<li><a href="/Sys/Profile">My Profile</a></li>' +
             '<li><a href="' + signOut.getAttribute('href') + '">Log Out</a></li>';
    }
    return '<li><a href="/Sys/Login">Log In</a></li>';
  }

  function navHtml() {
    return '<div class="nav-inner">' +
      '<a href="/" class="nav-logo">' +
        '<img src="/resources/Pictures/coaaa-logo.png" alt="COAAA">' +
      '</a>' +
      '<ul class="nav-links" id="coaaa-nav-menu">' +
        '<li><a href="/About-Us">About</a></li>' +
        '<li><a href="/Programs">Programs</a></li>' +
        '<li><a href="/Officers">Officers</a></li>' +
        '<li><a href="/Hire-a-CAA">Hire a CAA</a></li>' +
        '<li><a href="/Membership">Membership</a></li>' +
        '<li><a href="/Contact-Us">Contact</a></li>' +
        '<li><a href="/page-1517904" class="nav-cta">Join Us</a></li>' +
        authItems() +
      '</ul>' +
    '</div>';
  }

  var FOOTER_HTML =
    '<div class="footer-inner">' +
      '<div class="footer-logo">' +
        '<img src="/resources/Pictures/coaaa-logo.png" alt="COAAA">' +
      '</div>' +
      '<div class="footer-links">' +
        '<a href="/bylaws">Bylaws</a>' +
        '<a href="/COAAA-Student-Scholarship">Student Scholarship</a>' +
        '<a href="https://www.anesthetist.org" target="_blank" rel="noopener">AAAA National</a>' +
        '<a href="/Donate">Donate</a>' +
      '</div>' +
      '<div class="footer-copy">' +
        '&copy; 2026 Colorado Academy of Anesthesiologist Assistants ' +
        '&nbsp;&middot;&nbsp; 1312 17th Street #1371, Denver, CO 80202 ' +
        '&nbsp;&middot;&nbsp; <a href="mailto:coloradoaaa@gmail.com">coloradoaaa@gmail.com</a>' +
      '</div>' +
    '</div>';

  function addFonts() {
    if (document.getElementById('coaaa-fonts')) return;
    var l = document.createElement('link');
    l.id = 'coaaa-fonts';
    l.rel = 'stylesheet';
    l.href = 'https://fonts.googleapis.com/css2' +
             '?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600' +
             '&family=Jost:wght@300;400;500;600&display=swap';
    (document.head || document.documentElement).appendChild(l);
  }

  function initSys() {
    if (!IS_SYS || !document.body) return;
    if (document.querySelector('nav .nav-inner')) return;  /* already done */

    addFonts();
    document.documentElement.classList.add('coaaa-sys');

    var nav = document.createElement('nav');
    nav.innerHTML = navHtml();
    document.body.insertBefore(nav, document.body.firstChild);

    var footer = document.createElement('footer');
    footer.innerHTML = FOOTER_HTML;
    /* Sit above Wild Apricot's own branding strip, which stays put so  */
    /* these pages match the rebuilt ones.                              */
    var branding = document.querySelector('.zoneWAbranding');
    if (branding && branding.parentNode) {
      branding.parentNode.insertBefore(footer, branding);
    } else {
      document.body.appendChild(footer);
    }
  }

  function init() { initSys(); initNav(); initYear(); }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
  window.addEventListener('load', init);
})();
</script>
/* ==========================================================
   Wild Apricot system pages: Login, View profile, password
   reset and the rest. These cannot take a Custom layout, so
   the header and footer are injected by the site script and
   dressed here. Scoped to .coaaa-sys, which only ever
   appears on /sys/ URLs.
   ========================================================== */
 
/* --- tokens, so the injected markup has the same palette --- */
html.coaaa-sys {
  --navy:#3a5478; --navy-deep:#27384f; --steel:#4a6a98; --sky:#6e9ec5;
  --pale:#c9dcea; --cream:#f5f2ec; --warm:#fdfbf7; --charcoal:#232b35;
  --gray:#596070; --gold:#c09a56; --gold-light:#e8d5a8;
  --shadow:rgba(58,84,120,0.10);
}
 
/* --- the old theme's header and footer zones step aside --- */
/* The member links they carried are rebuilt into the nav by  */
/* the script, so nothing becomes unreachable.                */
.coaaa-sys .zonePlace.zoneHeader1,
.coaaa-sys .zonePlace.zoneHeader2,
.coaaa-sys .zonePlace.zoneFooter1,
.coaaa-sys .zonePlace.zoneFooter2 { display:none !important; }
 
/* --- page canvas --- */
.coaaa-sys body {
  background:var(--warm) !important;
  color:var(--charcoal);
  font-family:'Jost',sans-serif;
  line-height:1.7;
  padding-top:76px;
}
.coaaa-sys .zonePlace.zoneContent,
.coaaa-sys .zonePlace.zoneContent > div { background:transparent !important; }
.coaaa-sys .zonePlace.zoneContent { padding:2.5rem 2rem 3.5rem; }
 
/* The old theme paints the login and profile panels navy, #415c81,   */
/* and sets their text white to suit. Both have to change together or */
/* you get white text on a cream page. I found these four by walking  */
/* the computed styles on the real logged out Login page.             */
.coaaa-sys .WaLayoutContainerOnly,
.coaaa-sys .mobilePanel,
.coaaa-sys .mobilePanelContainer,
.coaaa-sys .loginInner { background:transparent !important; }
 
.coaaa-sys .zoneContent label,
.coaaa-sys .zoneContent td,
.coaaa-sys .zoneContent th,
.coaaa-sys .zoneContent legend,
.coaaa-sys .zoneContent li { color:var(--charcoal) !important; }
 
.coaaa-sys h1,.coaaa-sys h2,.coaaa-sys h3,.coaaa-sys h4 {
  font-family:'Cormorant Garamond',serif;
  color:var(--navy-deep);
  text-transform:none !important;
}
 
/* --- the injected nav --- */
.coaaa-sys nav {
  position:fixed; top:0; width:100%; z-index:999;
  background:rgba(253,251,247,0.97);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--pale);
  padding:0 2.5rem; box-sizing:border-box;
}
.coaaa-sys .nav-inner {
  max-width:1180px; margin:0 auto; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between; height:76px;
}
.coaaa-sys .nav-logo img { height:46px; width:auto; display:block; }
.coaaa-sys .nav-links {
  display:flex; list-style:none; gap:0.25rem; align-items:center; margin:0; padding:0;
}
.coaaa-sys .nav-links li { list-style:none; margin:0; }
.coaaa-sys .nav-links a {
  font-family:'Jost',sans-serif; font-weight:500; font-size:0.82rem;
  letter-spacing:0.06em; text-transform:uppercase; text-decoration:none;
  padding:0.45rem 0.9rem; border-radius:5px; transition:all 0.2s;
}
.coaaa-sys .nav-cta {
  background:var(--navy) !important; padding:0.5rem 1.2rem !important; border-radius:5px;
}
.coaaa-sys .nav-cta:hover { background:var(--navy-deep) !important; }
 
/* --- the injected footer --- */
.coaaa-sys footer { background:var(--charcoal); padding:2.5rem 2rem; box-sizing:border-box; }
.coaaa-sys .footer-inner {
  max-width:1180px; margin:0 auto; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.25rem;
}
.coaaa-sys .footer-logo img { height:38px; opacity:.55; }
.coaaa-sys .footer-links { display:flex; gap:1.75rem; flex-wrap:wrap; }
.coaaa-sys .footer-links a { font-size:.8rem; font-weight:500; text-decoration:none; }
.coaaa-sys .footer-copy {
  width:100%; text-align:center; font-size:.77rem;
  border-top:1px solid rgba(255,255,255,.07); padding-top:1.25rem; margin-top:.5rem;
}
 
/* --- link colours. The :not() is what out-ranks the theme's  --- */
/* --- own teal rule, exactly as on the rebuilt pages.         --- */
.coaaa-sys a:not(.stylizedButton),
.coaaa-sys a:link:not(.stylizedButton),
.coaaa-sys a:visited:not(.stylizedButton),
.coaaa-sys a:hover:not(.stylizedButton),
.coaaa-sys a:active:not(.stylizedButton) { color:inherit; }
 
.coaaa-sys .nav-links a:not(.stylizedButton) { color:var(--charcoal); }
.coaaa-sys .nav-links a:not(.stylizedButton):hover { color:var(--navy); background:var(--pale); }
.coaaa-sys .nav-links a.nav-cta:not(.stylizedButton) { color:#fff; }
.coaaa-sys .nav-links a.nav-cta:not(.stylizedButton):hover { color:#fff; }
.coaaa-sys .footer-links a:not(.stylizedButton) { color:rgba(255,255,255,.4); }
.coaaa-sys .footer-links a:not(.stylizedButton):hover { color:rgba(255,255,255,.8); }
.coaaa-sys .footer-copy,
.coaaa-sys .footer-copy a:not(.stylizedButton) { color:rgba(255,255,255,.3); }
.coaaa-sys .zoneContent a:not(.stylizedButton) { color:var(--navy); }
 
/* --- Wild Apricot's own forms: type, colour and buttons only. --- */
/* --- Structure is left alone so nothing functional breaks.    --- */
.coaaa-sys .zoneContent,
.coaaa-sys .WaGadgetLoginForm,
.coaaa-sys .WaGadgetContent { font-family:'Jost',sans-serif; }
.coaaa-sys .formTitle,
.coaaa-sys .gadgetTitle,
.coaaa-sys .pageTitle {
  font-family:'Cormorant Garamond',serif !important;
  color:var(--navy-deep) !important;
  text-transform:none !important;
}
.coaaa-sys .fieldLabel,
.coaaa-sys .fieldLabel label,
.coaaa-sys .labelTitle { color:var(--navy) !important; font-weight:600 !important; }
.coaaa-sys .mandatorySymbol { color:var(--gold) !important; }
.coaaa-sys input[type=text],
.coaaa-sys input[type=email],
.coaaa-sys input[type=password],
.coaaa-sys select,
.coaaa-sys textarea {
  font-family:'Jost',sans-serif;
  border:1px solid var(--pale); border-radius:4px; padding:.5rem .65rem;
}
.coaaa-sys input[type=submit],
.coaaa-sys input[type=button],
.coaaa-sys button.stylizedButton,
.coaaa-sys a.stylizedButton {
  background:var(--gold) !important; color:var(--charcoal) !important;
  border:0 !important; border-radius:5px !important;
  font-family:'Jost',sans-serif !important; font-weight:600 !important;
  font-size:.85rem !important; letter-spacing:.08em !important;
  text-transform:uppercase !important; padding:.7rem 1.8rem !important;
  cursor:pointer; text-decoration:none !important;
}
.coaaa-sys input[type=submit]:hover,
.coaaa-sys input[type=button]:hover,
.coaaa-sys button.stylizedButton:hover,
.coaaa-sys a.stylizedButton:hover { background:var(--gold-light) !important; }
 
/* keep the button label dark after the blanket text rule above */
.coaaa-sys .zoneContent input[type=submit],
.coaaa-sys .zoneContent .loginButton { color:var(--charcoal) !important; }
 
/* --- phones. The mobile menu rules already in this panel are  --- */
/* --- unscoped, so they reach the injected nav too, but these   --- */
/* --- repeat the one my scoped rules above would outrank.       --- */
@media (max-width:900px) {
  .coaaa-sys nav { padding:0 1.25rem; }
  .coaaa-sys .nav-links { display:none; }
  .coaaa-sys .zonePlace.zoneContent { padding:2rem 1.25rem 3rem; }
}
 
/* end of system page styling */