/* ---------- COAAA mobile navigation - added 18 Sep 2026 ---------- */
/* Fallback (no JavaScript): wrapped two-row menu */
@media (max-width: 1030px) {
  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: 1030px) {
  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 */
/* ==========================================================
   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:1030px) {
  .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 */
 /* ==========================================================
   Link colour corrections to the theme fix above.
   Everything here is !important on purpose. The rules it is
   correcting are mine, they are blunt, and I would rather
   not depend on specificity arithmetic twice in one file.
   ========================================================== */
 
/* 1. Links inside the dark bands take light text.
      .mem-teaser is on Home, .mem-close on Membership,
      .ct-close on Contact Us, .hp-cta on Hire a CAA. */
.LayoutPlain .mem-teaser a:not(.stylizedButton),
.LayoutPlain .mem-close  a:not(.stylizedButton),
.LayoutPlain .ct-close   a:not(.stylizedButton),
.LayoutPlain .hp-cta     a:not(.stylizedButton) { color: rgba(255,255,255,0.8) !important; }
 
.LayoutPlain .mem-teaser a:hover:not(.stylizedButton),
.LayoutPlain .mem-close  a:hover:not(.stylizedButton),
.LayoutPlain .ct-close   a:hover:not(.stylizedButton),
.LayoutPlain .hp-cta     a:hover:not(.stylizedButton) { color: #fff !important; }
 
/* 2. Ghost buttons are navy on a light background, which is
      what their steel border was always drawn for, and white
      only inside the dark bands. */
.LayoutPlain a.btn-ghost:not(.stylizedButton) { color: var(--navy) !important; }
.LayoutPlain a.btn-ghost:hover:not(.stylizedButton) { color: #fff !important; }
 
.LayoutPlain .mem-teaser a.btn-ghost:not(.stylizedButton),
.LayoutPlain .mem-close  a.btn-ghost:not(.stylizedButton),
.LayoutPlain .ct-close   a.btn-ghost:not(.stylizedButton),
.LayoutPlain .hp-cta     a.btn-ghost:not(.stylizedButton) { color: #fff !important; }
 
/* 3. Solid buttons keep their own text colour. These come
      last deliberately: they tie with rule 1 on specificity,
      so being later is what makes them win, which stops a
      gold button inside a dark band turning white on gold. */
.LayoutPlain a.btn-gold:not(.stylizedButton) { color: var(--charcoal) !important; }
.LayoutPlain a.btn-navy:not(.stylizedButton) { color: #fff !important; }
 
/* end of link colour corrections */
/* footer email: readable without making the copyright line loud */
.LayoutPlain .footer-copy a:not(.stylizedButton),
.coaaa-sys   .footer-copy a:not(.stylizedButton) { color: rgba(255,255,255,0.55) !important; }