/* ==========================================================================
   AMPI member portal (members.ampi.org.au): match ampi.org.au
   Wild Apricot theme: Tinted Tiles (Azure) v3.0

  
   Sections
     1  Fonts and brand colours
     2  Page, text, headings, links
     3  Header, menu, footer
     4  Buttons
     5  Forms and messages
     6  Log-in page, header log-in box, mobile panel
     7  Membership application (also shown inside ampi.org.au)
     8  Kept from the previous CSS
     9  System pages: one set of fonts everywhere, title bands, panels
   ========================================================================== */

/* 1  Fonts and brand colours ---------------------------------------------- */

/* Same fonts as ampi.org.au: Montserrat (headings, buttons, menu) and Cambay (text).
   @import must stay at the very top of this CSS. */
@import url('https://fonts.googleapis.com/css2?family=Cambay:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@500;600;700&display=swap');

:root {
	--ampi-white:  #ffffff;
	--ampi-ink:    #152a45; /* text, footer, button hover */
	--ampi-navy:   #254a79; /* headings, links, menu */
	--ampi-red:    #d0341f; /* buttons (passes WCAG AA with white text) */
	--ampi-sky:    #599fd2;
	--ampi-blue:   #296cc4;
	--ampi-mist:   #f3f6fa; /* panels */
	--ampi-line:   #d5dee8; /* borders */
	--ampi-muted:  #4a5d75;
	--ampi-head:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--ampi-body:   'Cambay', 'Helvetica Neue', Arial, sans-serif;
	--ampi-radius: 4px;
}

/* 2  Page, text, headings, links ------------------------------------------ */

html body,
body.publicContentView,
.gadgetStyleNone,
.gadgetStyle001 {
	font-family: var(--ampi-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ampi-ink);
}
/* The page behind the zones is the footer colour, so Wild Apricot's 10px gaps between
   the footer zones (and the space below a short page) blend into the footer.
   Header and content zones are white. */
body:not(.widgetMode) { background: var(--ampi-ink); }

.zonePlace.zoneContent,
.mobilePanelContainer { background: var(--ampi-white); }
.zonePlace.zoneContent > div { padding-top: 24px; padding-bottom: 40px; }

h1, h2, h3, h4, h5, h6,
.gadgetStyleNone h1, .gadgetStyleNone h2, .gadgetStyleNone h3,
.gadgetStyleNone h4, .gadgetStyleNone h5, .gadgetStyleNone h6,
.gadgetStyle001 h1, .gadgetStyle001 h2, .gadgetStyle001 h3, .gadgetStyle001 h4 {
	font-family: var(--ampi-head);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ampi-navy);
	text-transform: none;
}
h1.promo,
.gadgetStyleNone h1.promo,
.gadgetStyle001 h1.promo {
	margin: 0.3em 0 0.6em;
	font: 700 clamp(1.9rem, 1.2rem + 2.6vw, 2.75rem)/1.15 var(--ampi-head);
	letter-spacing: -0.01em;
	color: var(--ampi-navy);
	border: 0;
	text-transform: none;
}
h2, .gadgetStyleNone h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem); }
h3, .gadgetStyleNone h3 { font-size: 1.25rem; }
h4:not(.gadgetTitleH4), .gadgetStyleNone h4:not(.gadgetTitleH4) { font-size: 1.0625rem; }
.gadgetStyleNone .gadgetStyleTitle h4.gadgetTitleH4 {
	font: 700 1.0625rem/1.3 var(--ampi-head);
	color: var(--ampi-navy);
	text-transform: none;
}

a, a:link, a:visited,
.gadgetStyleNone a:not(.stylizedButton),
.gadgetStyleNone a:link:not(.stylizedButton),
.gadgetStyle001 a:not(.stylizedButton),
.gadgetStyle001 a:link:not(.stylizedButton) {
	color: var(--ampi-navy);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
a:hover,
.gadgetStyleNone a:hover:not(.stylizedButton),
.gadgetStyle001 a:hover:not(.stylizedButton) { color: var(--ampi-red); }
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
	outline: 3px solid var(--ampi-navy);
	outline-offset: 2px;
}

.contStyleSmaller, .contStyleCaption, .contStyleCaptionAlt { color: var(--ampi-muted); }

/* 3  Header, menu, footer --------------------------------------------------- */

.zonePlace.zoneHeader1,
.zonePlace.zoneHeader1 > div { background: var(--ampi-white); }
.zonePlace.zoneHeader1 { border-bottom: 1px solid var(--ampi-line); }
.zonePlace.zoneHeader1 img { max-width: 100%; height: auto; }

/* Main menu: white bar, navy Montserrat links, red for the current page (as ampi.org.au). */
.zonePlace.zoneHeader2,
.zonePlace.zoneHeader2 > div,
.WaGadgetMenuHorizontal .menuBackground,
.WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel {
	background: var(--ampi-white) !important;
}
.zonePlace.zoneHeader2 { border-bottom: 1px solid var(--ampi-line); }
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
	height: auto;
	padding: 14px 16px;
	background: transparent;
	color: var(--ampi-ink);
	font: 600 15px/24px var(--ampi-head);
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a > span { height: auto; }
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item:hover > a,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:focus-visible {
	background: transparent;
	color: var(--ampi-red);
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a { color: var(--ampi-red); }
/* Drop-downs */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel ul {
	background: var(--ampi-white) !important;
	border: 1px solid var(--ampi-line);
	border-radius: 6px;
	box-shadow: 0 10px 24px rgba(21, 42, 69, 0.12);
	padding: 6px 0;
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel ul li .item a {
	background: transparent !important;
	color: var(--ampi-ink) !important;
	font: 500 14px/1.4 var(--ampi-head) !important;
	text-transform: none;
	text-decoration: none;
	padding: 8px 16px !important;
}
.WaGadgetMenuHorizontal .menuInner ul.firstLevel ul li .item:hover a { color: var(--ampi-red) !important; }

/* Footer: dark ink band with white text, as ampi.org.au */
.zonePlace.zoneFooter1,
.zonePlace.zoneFooter1 > div,
.zonePlace.zoneFooter2,
.zonePlace.zoneFooter2 > div,
.zonePlace.zoneWAbranding,
.zonePlace.zoneWAbranding > div {
	background: var(--ampi-ink) !important;
	color: rgba(255, 255, 255, 0.92);
}
.zonePlace.zoneFooter1 a, .zonePlace.zoneFooter2 a,
.zonePlace.zoneFooter1 .gadgetStyleNone a:not(.stylizedButton),
.zonePlace.zoneFooter2 .gadgetStyleNone a:not(.stylizedButton),
.zonePlace.zoneFooter2 .gadgetStyle002 a:not(.stylizedButton) { color: var(--ampi-white) !important; }
.zonePlace.zoneFooter1 a:hover, .zonePlace.zoneFooter2 a:hover { color: var(--ampi-sky) !important; }
.zonePlace.zoneFooter1 h1, .zonePlace.zoneFooter1 h2, .zonePlace.zoneFooter1 h3, .zonePlace.zoneFooter1 h4,
.zonePlace.zoneFooter2 h1, .zonePlace.zoneFooter2 h2, .zonePlace.zoneFooter2 h3, .zonePlace.zoneFooter2 h4 { color: var(--ampi-white) !important; }
.zonePlace.zoneWAbranding, .zonePlace.zoneWAbranding a { color: rgba(255, 255, 255, 0.6) !important; font-size: 13px; }
.zonePlace.zoneFooter2 .WaGadgetSiteSearch .searchBoxField {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--ampi-white);
	padding: 8px 12px;
}

/* Optional link back to ampi.org.au (HTML snippet in the setup guide). */
.ampi-wa-backlink { font: 600 14px/1.4 var(--ampi-head); }
.ampi-wa-backlink a { text-decoration: none !important; }
.ampi-wa-backlink a:hover { text-decoration: underline !important; }

/* 4  Buttons ---------------------------------------------------------------- */

/* Primary: AMPI red, white Montserrat, 4px corners; ink on hover (as ampi.org.au). */
input[type=submit],
input[type=button],
input.typeButton,
input.nextButton,
input.loginButton,
button.typeButton,
.navigationOuterContainer input.nextButton,
.navigationOuterContainer input.typeButton,
.navigationOuterContainer input[type=submit],
.actionButtonContainer input[type=submit],
.WaGadgetAuthorizationRequired .loginPageTable input.loginButton,
.WaGadgetContactProfile .topButtonsOuterContainer input.typeButton,
.WaGadgetEventsStateList .boxActionContainer input.typeButton,
.WaGadgetEventsStateDetails .boxActionContainer input.typeButton,
a.stylizedButton,
a.buttonStyle001, a:link.buttonStyle001,
a.buttonStyle002, a:link.buttonStyle002,
a.buttonStyle003, a:link.buttonStyle003 {
	display: inline-block;
	min-width: 0;
	margin: 4px 6px 4px 0;
	padding: 11px 22px;
	border: 0;
	border-radius: var(--ampi-radius);
	background: var(--ampi-red);
	color: var(--ampi-white) !important;
	font: 600 14px/1.3 var(--ampi-head);
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: none !important;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s;
}
input[type=submit]:hover,
input[type=button]:hover,
input.typeButton:hover,
input.nextButton:hover,
input.loginButton:hover,
button.typeButton:hover,
.WaGadgetAuthorizationRequired .loginPageTable input.loginButton:hover,
.WaGadgetAuthorizationRequired:hover .loginPageTable:hover input.loginButton:hover,
a.stylizedButton:hover,
a.buttonStyle001:hover, a:link.buttonStyle001:hover,
a.buttonStyle002:hover, a:link.buttonStyle002:hover,
a.buttonStyle003:hover, a:link.buttonStyle003:hover {
	background: var(--ampi-ink);
	color: var(--ampi-white) !important;
}
input[type=submit]:disabled,
input[type=button]:disabled,
input.typeButton:disabled { background: #b9c3cf; cursor: not-allowed; }

/* Secondary: Back / Cancel / Previous, and the theme's outline styles. */
input.cancelButton, input.backButton, input.previousButton,
input[value="Cancel"], input[value="Back"], input[value="< Back"],
a.buttonStyle004, a:link.buttonStyle004 {
	background: var(--ampi-white) !important;
	border: 1.5px solid var(--ampi-navy) !important;
	color: var(--ampi-navy) !important;
	padding: 10px 20px;
	font: 600 14px/1.3 var(--ampi-head);
	border-radius: var(--ampi-radius);
	text-transform: none;
}
input.cancelButton:hover, input.backButton:hover, input.previousButton:hover,
input[value="Cancel"]:hover, input[value="Back"]:hover, input[value="< Back"]:hover,
a.buttonStyle004:hover {
	background: var(--ampi-mist) !important;
	color: var(--ampi-ink) !important;
	border-color: var(--ampi-ink) !important;
}
/* Light outline button for dark backgrounds */
a.buttonStyle005, a:link.buttonStyle005 {
	background: transparent;
	border: 1.5px solid var(--ampi-white);
	color: var(--ampi-white) !important;
	padding: 10px 20px;
	font: 600 14px/1.3 var(--ampi-head);
	border-radius: var(--ampi-radius);
	text-decoration: none !important;
}
a.buttonStyle005:hover { background: rgba(255, 255, 255, 0.12); }

/* 5  Forms and messages ---------------------------------------------------- */

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=url], input[type=search], input[type=date],
input.typeText, input.emailTextBoxControl, input.passwordTextBoxControl,
select, textarea {
	box-sizing: border-box;
	max-width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--ampi-line);
	border-radius: 8px;
	background: var(--ampi-white);
	color: var(--ampi-ink);
	font: 400 16px/1.4 var(--ampi-body); /* 16px stops phones zooming in */
	box-shadow: none;
	transition: border-color 0.14s, box-shadow 0.14s;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus,
input[type=number]:focus, input[type=url]:focus, input[type=search]:focus, input[type=date]:focus,
input.typeText:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--ampi-navy);
	box-shadow: 0 0 0 3px rgba(37, 74, 121, 0.18);
}
input[type=checkbox], input[type=radio] { accent-color: var(--ampi-navy); width: 18px; height: 18px; vertical-align: -3px; }

.generalFieldsContainer .fieldSubContainer .fieldLabel,
.generalFieldsContainer .fieldSubContainer .fieldLabel span:not(.mandatorySymbol),
.generalFieldsContainer .fieldSubContainer .fieldLabel .mandatoryLabel,
.loginPageTable label, .loginContainerForm label {
	font-family: var(--ampi-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--ampi-ink);
}
.mandatorySymbol { color: var(--ampi-red) !important; }

.generalFormContainer .formTitle,
.formTitleOuterContainer .formTitleContainer h3.formTitle {
	font: 700 1.25rem/1.3 var(--ampi-head) !important;
	color: var(--ampi-navy) !important;
	text-transform: none;
}
.formTitleOuterContainer .mandatoryFieldsTitle,
.formTitleOuterContainer .mandatoryFieldsTitle strong {
	font: 400 14px/1.4 var(--ampi-body) !important;
	color: var(--ampi-muted);
}
.sectionOuterContainer .sectionTitle,
.generalFormContainer .sectionTitle,
.captionOuterContainer .captionContainer {
	font-family: var(--ampi-head);
	color: var(--ampi-navy);
}
.generalFormOuterContainer,
.formOuterContainer { max-width: 760px; }
.fieldContainer select { width: 100%; max-width: 620px; }

/* Messages */
.commonMessageBox, .infoMessage, .confirmWindowInfo {
	border-radius: 8px;
	border: 1px solid var(--ampi-line);
	border-left: 4px solid var(--ampi-navy);
	background: var(--ampi-mist);
	color: var(--ampi-ink);
}
.commonMessageBox.confirmWindowWarning,
.validationSummary, .validationError, .errorMessage, span[id$=Validator] {
	color: #9e2616;
}
.validationSummary:not(:empty) {
	padding: 10px 14px;
	border: 1px solid #f3c4c0;
	border-radius: 8px;
	background: #fff0f1;
}

/* Tables (events, invoices, member directory) */
.WaGadgetContent table, .gadgetStyleBody table { border-collapse: collapse; }
.gadgetStyleBody table th { font-family: var(--ampi-head); color: var(--ampi-navy); }

/* 6  Log-in page, header log-in box, mobile panel ---------------------------- */

/* The /Sys/Login page as an AMPI card, like ampi.org.au/member-login/. */
.WaGadgetAuthorizationRequired .authFormContainer {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	margin: 8px auto 32px;
	padding: 0;
	border: 0 !important;
}
.WaGadgetAuthorizationRequired .authFormContainer > form { width: 100%; }
.WaGadgetAuthorizationRequired .loginPageTable {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 28px 32px 30px;
	background: var(--ampi-white);
	border: 1px solid var(--ampi-line);
	border-radius: 16px;
	box-shadow: 0 4px 32px rgba(12, 30, 53, 0.08);
}
.WaGadgetAuthorizationRequired .loginPageTable tbody,
.WaGadgetAuthorizationRequired .loginPageTable tr,
.WaGadgetAuthorizationRequired .loginPageTable td { display: block; width: auto; padding: 0; border: 0; }
.WaGadgetAuthorizationRequired .loginPageTable input[type=text],
.WaGadgetAuthorizationRequired .loginPageTable input[type=email],
.WaGadgetAuthorizationRequired .loginPageTable input[type=password] {
	width: 100% !important;
	margin: 4px 0 14px;
}
.WaGadgetAuthorizationRequired .loginPageTable input.loginButton {
	width: 100%;
	margin: 10px 0 6px;
	padding: 13px 20px;
	border-radius: 10px;
	font-size: 15px;
}
.WaGadgetAuthorizationRequired .loginPageTable a { font-size: 14px; }
.WaGadgetAuthorizationRequired .password-wrapper { position: relative; display: block; }
.WaGadgetAuthorizationRequired .password-wrapper .toggle-password { color: var(--ampi-muted); }

/* Header log-in button (person icon) and its drop-down form */
.WaGadgetLoginButton .loginLink,
.WaGadgetLoginForm .loginLink {
	background: var(--ampi-red) !important;
	color: var(--ampi-white) !important;
	border-radius: var(--ampi-radius);
}
.WaGadgetLoginButton .loginLink:hover,
.WaGadgetLoginForm .loginLink:hover { background: var(--ampi-ink) !important; }
.WaGadgetLoginButton .authenticated .loginLink,
.WaGadgetLoginForm .authenticated .loginLink {
	background: var(--ampi-white) !important;
	color: var(--ampi-navy) !important;
	border: 1.5px solid var(--ampi-navy);
}
.WaGadgetLoginButton .authenticated .loginLink:hover,
.WaGadgetLoginForm .authenticated .loginLink:hover {
	background: var(--ampi-navy) !important;
	color: var(--ampi-white) !important;
}
.loginContainerForm, .loginInner {
	font-family: var(--ampi-body);
	border-radius: 12px;
}
.loginContainerForm input.loginButton,
.loginInner input.loginButton { width: 100%; }

/* Mobile panel (menu and log-in buttons on phones) */
.WaGadgetMobilePanel .mobilePanel { background: var(--ampi-white); border-bottom: 1px solid var(--ampi-line); }
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton,
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton::before { color: var(--ampi-navy) !important; }
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton.buttonLogin,
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton.buttonLogin::before { color: var(--ampi-red) !important; }
.WaGadgetMobilePanel .menuInner a {
	font: 600 15px/1.4 var(--ampi-head);
	color: var(--ampi-ink);
	text-transform: none;
	text-decoration: none;
}

/* Social log-in buttons stay hidden (members use email and password, as before). */
.WaGadgetAuthorizationRequired .openAuthFormContainer,
.loginContainerForm .openAuthFormContainer,
.oAuthButtonsContainer,
#socialLoginContainer, #idSocialLoginContainer { display: none !important; }

/* 7  Membership application (also embedded on ampi.org.au/membership/membership-application/) */

.WaGadgetMembershipApplication .groupBodyVertical .fieldItem,
.WaGadgetPublicWizard .groupBodyVertical .fieldItem {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 10px;
	padding: 12px 14px;
	border: 1.5px solid var(--ampi-line);
	border-radius: 10px;
	background: var(--ampi-white);
	cursor: pointer;
}
.WaGadgetMembershipApplication .groupBodyVertical .fieldItem:hover { border-color: var(--ampi-navy); }
.WaGadgetMembershipApplication .groupBodyVertical .fieldItem:has(input:checked) {
	border-color: var(--ampi-navy);
	background: var(--ampi-mist);
	box-shadow: 0 0 0 1px var(--ampi-navy);
}
.WaGadgetMembershipApplication .groupBodyVertical .fieldItem .typeRadioContainer {
	display: block;
	float: none !important;
	width: auto !important;
	margin: 0 !important; /* the theme pulls the radio 18px left */
	padding-top: 3px;
}
.WaGadgetMembershipApplication .groupBodyVertical .fieldItem .label { flex: 1; }
.WaGadgetMembershipApplication .groupBodyVertical .fieldItem label { cursor: pointer; }
.WaGadgetMembershipApplication .levelProperties .labelTitle {
	font: 600 15px/1.35 var(--ampi-head);
	color: var(--ampi-ink);
}
.WaGadgetMembershipApplication .levelProperties .levelPrice { font-weight: 700; color: var(--ampi-navy); }
.WaGadgetMembershipApplication .levelProperties .labelSubTitle,
.WaGadgetMembershipApplication .levelProperties .levelRenewal,
.WaGadgetMembershipApplication .levelProperties .levelRecurring { color: var(--ampi-muted); font-size: 14px; }

/* Inside ampi.org.au (widget mode): no page chrome, full width of the frame. */
body.widgetMode { background: transparent; }
.widgetMode .zonePlace.zoneContent,
.widgetMode .zonePlace.zoneContent > div { background: transparent; padding: 0; }
.widgetMode .cnPrimaryContentContainer,
.widgetMode .cnPrimaryContentBlock1ContentHolder,
.widgetMode .cnPrimaryContentBlock1Content,
.widgetMode .cnContentContainer,
.widgetMode .cnClipMainContainer,
.widgetMode .cnMainContainer,
.widgetMode .cnMainContainer .d9MainContainer,
.widgetMode .cnMainContainer .cnContentContainer .cnPrimaryContentContainer {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}
.widgetMode .generalFormOuterContainer { max-width: none; }

/* 8  Kept from the previous CSS ---------------------------------------------- */

.boxInfoContainer h5 { display: none; }
.WaGadgetRecentBlogPosts .itemAuthor { display: none; }
.WaGadgetContent { padding-left: 10px; padding-right: 10px; }
#id_y6tmFBq { border: none; }
.Page-Crumb { font-size: 12px; }
#id_II2G4qK_Event { font-size: 18px; font-weight: bold; }
#PAGEID_18208 a, #id_yLBkmaZ a, #id_6uGk29D a, #id_VsfH9Cp a { text-decoration: none; }
#id_6uGk29D { text-align: center; }

/* Responsive video embeds: <div class="video-container"><iframe class="responsive-video" …> */
.video-container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; }
.responsive-video { position: absolute; inset: 0; width: 100%; height: 100%; }

@media screen and (max-width: 767px) {
	h1.promo { text-align: center; }
	#PAGEID_18208 a { font-size: inherit; }
	.WaGadgetAuthorizationRequired .loginPageTable { padding: 22px 18px; border-radius: 12px; }
	.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a { padding: 12px 10px; font-size: 14px; }
}

/* 9  System pages: one set of fonts everywhere, title bands, panels ------------
   Applies to every Wild Apricot page: public pages (body.publicContentView), member
   pages such as My profile (body.memberContentView) and embedded widgets (widgetMode).
   Wild Apricot system pages (log-in, password reset, profile, invoices, events,
   renewal) set fonts in many places: theme gadget styles, the dark "gadgetStyle002"
   style, and fonts typed into content (<font face="Ubuntu">, inline font-family).
   Rule 9a gives every element Cambay with !important but zero specificity, so it beats
   all of those. Rule 9b then gives the Montserrat elements their font, and wins over 9a
   because it is more specific. Icon fonts (Font Awesome, theme icons) are left alone. */

/* 9a  Everything: Cambay */
:where(body) :where(*:not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class*="icon"]):not([class*="Icon"]):not([class^="lb-"]):not(code):not(pre)) {
	font-family: var(--ampi-body) !important;
}

/* 9b  Headings, menus, buttons, labels: Montserrat */
:where(body) :is(
	h1, h2, h3, h4, h5, h6, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
	.WaGadgetMenuHorizontal a, .WaGadgetMenuHorizontal a *,
	.WaGadgetMobilePanel .menuInner a, .WaGadgetMobilePanel .menuInner a *,
	input[type=submit], input[type=button], input[type=reset], button,
	a.stylizedButton, a[class*="buttonStyle"], a.stylizedButton *, a[class*="buttonStyle"] *,
	.fieldLabel, .fieldLabel *, .loginPageTable label, .loginContainerForm label,
	.formTitle, .formTitle *, .sectionTitle, .sectionTitle *, .captionContainer,
	.levelProperties .labelTitle, .levelProperties .labelTitle *,
	.levelProperties .labelSubTitle, .levelProperties .labelSubTitle *,
	.gadgetTitleH4, th, .ampi-wa-backlink, .ampi-wa-backlink *
):not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]) {
	font-family: var(--ampi-head) !important;
}
/* Form "mandatory fields" note and level details stay in the text font */
:where(body) .formTitleOuterContainer .mandatoryFieldsTitle,
:where(body) .formTitleOuterContainer .mandatoryFieldsTitle * {
	font-family: var(--ampi-body) !important;
}

/* 9c  Dark title band on system pages ("Reset password", "My profile" …) in AMPI navy,
   like the page-title banner on ampi.org.au. Gadgets given their own background in
   Wild Apricot keep it. */
.zonePlace.zoneContent .gadgetStyle002:not([style*="background"]) {
	background: var(--ampi-navy);
	color: var(--ampi-white);
	padding: 22px 28px;
	margin-bottom: 0 !important;
}
.zonePlace.zoneContent .gadgetStyle002 h1,
.zonePlace.zoneContent .gadgetStyle002 h1 *,
.zonePlace.zoneContent .gadgetStyle002 h2,
.zonePlace.zoneContent .gadgetStyle002 h2 *,
.zonePlace.zoneContent .gadgetStyle002 h3,
.zonePlace.zoneContent .gadgetStyle002 p,
.zonePlace.zoneContent .gadgetStyle002 a:not(.stylizedButton) {
	color: var(--ampi-white) !important;
	text-transform: none !important;
}
.zonePlace.zoneContent .gadgetStyle002 h1 {
	margin: 0;
	font-weight: 700;
	font-size: clamp(1.6rem, 1.1rem + 2vw, 2.25rem);
	letter-spacing: -0.01em;
}
.zonePlace.zoneContent .gadgetStyle002 h1 font[style*="font-size"] { font-size: inherit !important; }

/* 9d  The theme's pale-blue form panels (#CEE3F2, set on layout boxes in each page's
   design) become the light panel used on ampi.org.au. */
.zonePlace.zoneContent [style*="CEE3F2" i] {
	background-color: var(--ampi-mist) !important;
	border: 1px solid var(--ampi-line);
	border-top: 0;
	padding: 24px 28px !important;
}

/* 9e  Footer link lists (Custom menu gadget) */
.zonePlace.zoneFooter1 ul.orientationVertical,
.zonePlace.zoneFooter2 ul.orientationVertical { margin: 0; padding: 0; list-style: none; }
.zonePlace.zoneFooter1 ul.orientationVertical a,
.zonePlace.zoneFooter2 ul.orientationVertical a {
	display: inline-block;
	padding: 3px 0;
	font-size: 15px;
	line-height: 1.5;
	text-transform: none;
	text-decoration: none !important;
}
.zonePlace.zoneFooter1 ul.orientationVertical a:hover,
.zonePlace.zoneFooter2 ul.orientationVertical a:hover { text-decoration: underline !important; }
.zonePlace.zoneFooter1 p, .zonePlace.zoneFooter2 p { font-size: 15px; line-height: 1.6 !important; }

/* 9f  Colours the theme sets with more specific selectors (e.g. ".gadgetStyle001
   h1:not(.promo)" slate blue in capitals, ".captionContainer .fieldBody h4" grey #333).
   Zero-specificity !important rules win over the theme, while the white text in
   title bands and the footer (9c, section 3) still wins over these. */
:where(body) :where(h1, h2, h3, h4, h5, h6) {
	color: var(--ampi-navy) !important;
	text-transform: none !important;
}
:where(body) :where(.zoneContent) :where(p, li, td, dd, dt, label, .fieldBody, .fieldBody span, .fieldLabel, .fieldLabel span:not(.mandatorySymbol), .textLine):not(a *) {
	color: var(--ampi-ink) !important;
}
:where(body) :where(.levelRenewal, .levelRecurring, .typeInstruction, .typeInstruction *, .contStyleSmaller, .contStyleCaption, .fieldDescription) {
	color: var(--ampi-muted) !important;
}

/* 9g  Buttons the theme styles inside forms and profile pages
   (".generalFieldsContainer input.typeButton" and similar). Zero specificity +
   !important: every primary button is AMPI red; Back/Cancel (more specific) stay outlined. */
:where(body) :where(input[type=submit], input[type=button], input.typeButton, input.nextButton, input.loginButton, button.typeButton, a.stylizedButton, a.buttonStyle001, a.buttonStyle002, a.buttonStyle003) {
	background-color: var(--ampi-red) !important;
	background-image: none !important;
	color: var(--ampi-white) !important;
	border: 0 !important;
	border-radius: var(--ampi-radius) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
:where(body) :where(input[type=submit], input[type=button], input.typeButton, input.nextButton, input.loginButton, button.typeButton, a.stylizedButton, a.buttonStyle001, a.buttonStyle002, a.buttonStyle003):hover {
	background-color: var(--ampi-ink) !important;
}
:where(body) :where(input[type=submit], input[type=button], input.typeButton):disabled {
	background-color: #b9c3cf !important;
}
.generalFieldsContainer input.typeButton,
.generalFieldsContainer input[type=submit],
.generalFieldsContainer input[type=button] {
	min-width: 0;
	padding: 11px 22px;
	font-size: 14px;
	line-height: 1.3;
}
/* :not(#ampi-x) adds ID-level specificity so the outline style beats the theme's
   container rules (e.g. Edit profile's Cancel inside .topButtonsOuterContainer). */
:is(input.cancelButton, input.backButton, input.previousButton, input[value="Cancel"], input[value="Back"], input[value="< Back"], input[id$="cancelButton"], input[id$="cancelButtonTop"], input[id$="CancelBtn"], input[id$="backButton"], a.buttonStyle004):not(#ampi-x) {
	background-color: var(--ampi-white) !important;
	color: var(--ampi-navy) !important;
	border: 1.5px solid var(--ampi-navy) !important;
}
:is(input.cancelButton, input.backButton, input.previousButton, input[value="Cancel"], input[value="Back"], input[value="< Back"], input[id$="cancelButton"], input[id$="cancelButtonTop"], input[id$="CancelBtn"], input[id$="backButton"], a.buttonStyle004):not(#ampi-x):hover {
	background-color: var(--ampi-mist) !important;
	color: var(--ampi-ink) !important;
	border-color: var(--ampi-ink) !important;
}

/* 9h  Intro headings on system pages ("Change password for …", email subscriptions …).
   Wild Apricot puts the text straight into .introContainer .inner (no heading tag);
   the theme makes it thin 22px capitals. Styled as an AMPI section heading. */
:where(body) .introContainer,
:where(body) .introContainer .inner {
	font-family: var(--ampi-head) !important;
	font-weight: 700 !important;
	font-size: 1.25rem !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: var(--ampi-navy) !important;
}
:where(body) .introContainer { margin: 0 0 1rem; }