/* ===========================================================
   QFS — USER.CSS OVERRIDES
   Purpose: QFS global layout, header/nav, calendar, and carefully
            scoped Wild Apricot readability fixes.
   =========================================================== */

/* ---------- QFS design tokens ---------- */
:root {
  --qfs-dark: #1F272B;
  --qfs-gold: #E0C46F;
  --qfs-cream: #EFE2A1;
  --qfs-white: #FFFFFF;
  --qfs-gold-deep: #C4A54E;

  --qfs-text: #1A1A1A;
  --qfs-muted: #4B5560;
  --qfs-light: #E9EFF3;
  --qfs-light-muted: #C7D3DA;

  --qfs-transaction-text: #1F272B;
  --qfs-transaction-link: #4B3A00;
  --qfs-transaction-link-hover: #211A00;
  --qfs-disabled: #7A8790;

  --qfs-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  --qfs-radius: 999px;
  --qfs-gap: 12px;
  --qfs-menu-size: 17px;
}

/* ---------- Global base (public site only) ---------- */

/* Prevent accidental horizontal scrolling from the intentional
   full-viewport breakout below. */
html,
body {
  overflow-x: hidden !important;
}

body.publicContentView {
  background-color: #999999;
  color: #F3F3F3;
}

/* Ordinary page-content typography. Wild Apricot transactional
   gadgets that use light/medium surfaces are explicitly corrected
   later in this stylesheet. */
body.publicContentView .mLayout.layoutMain p,
body.publicContentView .mLayout.layoutMain li {
  color: #E5E5E5;
}

body.publicContentView .mLayout.layoutMain h1,
body.publicContentView .mLayout.layoutMain h2,
body.publicContentView .mLayout.layoutMain h3,
body.publicContentView .mLayout.layoutMain h4 {
  color: var(--qfs-white);
}

body.publicContentView .mLayout.layoutMain a {
  color: #F7D26A;
}

/* ---------- Full bleed (all widths) ---------- */

/* Wild Apricot centers everything inside an outer wrapper.
   Break #layout out to the viewport so header/content/footer
   can run full width. */
body.publicContentView #layout,
body.publicContentView #layout > div,
body.publicContentView #mtLayout,
body.publicContentView #mtLayout > div {
  max-width: none !important;
}

body.publicContentView #layout {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Prevent WA zone/placeholder wrappers from reintroducing gutters. */
body.publicContentView .zonePlace,
body.publicContentView .WaPlaceHolder,
body.publicContentView .WaPlaceHolderContent,
body.publicContentView .WaLayoutRow,
body.publicContentView .WaLayoutColumn,
body.publicContentView .waPageContainer,
body.publicContentView .sheet,
body.publicContentView #idBodyContainer,
body.publicContentView #idHeaderContainer,
body.publicContentView #idContentContainer,
body.publicContentView #idFooterContainer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ---------- Utility bar ---------- */

.qfs-utility-tabs {
  display: flex;
  justify-content: flex-end;
  gap: var(--qfs-gap);
  padding: 8px 16px;
  background: var(--qfs-gold);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  position: relative;
  z-index: 20;
}

.qfs-utility-tabs a {
  color: var(--qfs-dark);
  background: var(--qfs-white);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--qfs-radius);
  padding: 6px 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition:
    transform .12s ease,
    background-color .12s ease,
    border-color .12s ease;
}

.qfs-utility-tabs a:hover,
.qfs-utility-tabs a:focus {
  background: var(--qfs-cream);
  border-color: rgba(0, 0, 0, .2);
  transform: translateY(-1px);
  outline: none;
}

/* ---------- Header ---------- */

.zoneHeader2 > .WaPlaceHolder {
  background: rgba(31, 39, 43, .92) !important;
  backdrop-filter: saturate(130%) blur(6px);
  -webkit-backdrop-filter: saturate(130%) blur(6px);
  box-shadow: var(--qfs-shadow);
}

/* Logo area */
#id_Br8mDIe .gadgetStyleBody {
  padding: 14px 10px 8px !important;
}

#id_Br8mDIe img {
  max-height: 88px;
  width: auto;
  height: auto;
  display: block;
}

/* Tagline */
#id_C8YeKBE .gadgetStyleBody {
  padding-top: 14px !important;
}

#id_C8YeKBE p {
  margin: 0;
  font-size: 18px;
  letter-spacing: .3px;
  color: var(--qfs-cream);
}

/* Login/profile link.
   Both IDs are retained because they have appeared in QFS layouts. */
#id_SAIIAhF .loginContainer .loginLink,
#id_IOTD79t .loginLink,
#id_SAIIAhF .loginContainer .loginLink:visited,
#id_IOTD79t .loginLink:visited {
  color: var(--qfs-gold) !important;
  text-decoration: none;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  transition:
    background-color .12s ease,
    color .12s ease;
}

#id_SAIIAhF .loginContainer .loginLink:hover,
#id_SAIIAhF .loginContainer .loginLink:focus,
#id_IOTD79t .loginLink:hover,
#id_IOTD79t .loginLink:focus {
  background: rgba(255, 255, 255, .08);
  color: var(--qfs-white) !important;
  outline: none;
}

/* ---------- Horizontal menu ---------- */

#id_yOhi7Wr {
  position: relative;
  z-index: 1100;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

#id_yOhi7Wr .menuInner {
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}

#id_yOhi7Wr ul.firstLevel {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

#id_yOhi7Wr .firstLevel > li .item > a {
  display: inline-block;
  padding: 12px 14px;
  font-size: var(--qfs-menu-size);
  font-weight: 800;
  letter-spacing: .15px;
  text-transform: uppercase;
  color: var(--qfs-gold) !important;
  text-decoration: none;
  border-radius: 8px;
  line-height: 1;
  position: relative;
  transition:
    background-color .12s ease,
    color .12s ease;
}

#id_yOhi7Wr .firstLevel > li .item > a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--qfs-gold),
    var(--qfs-gold-deep)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .16s ease;
  border-radius: 2px;
}

#id_yOhi7Wr .firstLevel > li .item > a:hover,
#id_yOhi7Wr .firstLevel > li .item > a:focus {
  color: var(--qfs-white) !important;
  background: rgba(255, 255, 255, .06);
}

#id_yOhi7Wr .firstLevel > li .item > a:hover::after,
#id_yOhi7Wr .firstLevel > li .item > a:focus::after,
#id_yOhi7Wr .firstLevel > li.sel .item > a::after {
  transform: scaleX(1);
}

#id_yOhi7Wr .firstLevel > li.sel .item > a {
  color: var(--qfs-white) !important;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 -2px 0 var(--qfs-gold);
}

/* Dropdown / phantom menu */
#id_yOhi7Wr .firstLevel > li.phantom > .item > a {
  font-size: 22px;
  padding: 8px 12px;
  color: var(--qfs-gold) !important;
}

#id_yOhi7Wr .firstLevel > li.phantom .secondLevel {
  background: var(--qfs-dark);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
  padding: 6px 0;
  margin-top: 8px;
}

#id_yOhi7Wr .secondLevel li .item > a {
  display: block;
  padding: 10px 14px;
  color: var(--qfs-gold) !important;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color .12s ease,
    color .12s ease;
}

#id_yOhi7Wr .secondLevel li .item > a:hover,
#id_yOhi7Wr .secondLevel li .item > a:focus {
  background: rgba(255, 255, 255, .06);
  color: var(--qfs-white) !important;
}

/* ---------- Dark header/footer zones ---------- */

.zoneHeader1,
.zoneHeader2,
.zoneFooter1,
.zoneFooter2,
.zoneWAbranding {
  color: var(--qfs-white);
}

.zoneHeader1 a,
.zoneHeader2 a,
.zoneFooter1 a,
.zoneFooter2 a,
.zoneWAbranding a,
.zoneHeader1 a:visited,
.zoneHeader2 a:visited,
.zoneFooter1 a:visited,
.zoneFooter2 a:visited,
.zoneWAbranding a:visited {
  color: var(--qfs-gold) !important;
  text-decoration: none;
}

/* ---------- Event detail pages ---------- */

/* Event-detail content frequently sits on WA light surfaces.
   Keep this scoped to the event-details state rather than applying
   a blanket dark-text rule to all of .zoneContent. */
.WaGadgetEventsStateDetails .boxContainer,
.WaGadgetEventsStateDetails .boxContainer .gadgetContentEditableArea,
.WaGadgetEventsStateDetails .boxContainer .gadgetStyleBody,
.WaGadgetEventsStateDetails .boxContainer p,
.WaGadgetEventsStateDetails .boxContainer li,
.WaGadgetEventsStateDetails .boxContainer label,
.WaGadgetEventsStateDetails .boxContainer span {
  color: var(--qfs-dark) !important;
}

.WaGadgetEventsStateDetails .boxInfoContainer,
.WaGadgetEventsStateDetails .registrationInfoContainer,
.WaGadgetEventsStateDetails .paymentSystemsIconsBox,
.WaGadgetEventsStateDetails .boxActionContainer {
  color: var(--qfs-text) !important;
}

.WaGadgetEventsStateDetails .eventInfoBoxLabel {
  color: var(--qfs-muted) !important;
  font-weight: 600;
}

.WaGadgetEventsStateDetails .eventInfoBoxValue,
.WaGadgetEventsStateDetails .eventInfoBoxValue *,
.WaGadgetEventsStateDetails .registrationInfoContainer .infoTitle,
.WaGadgetEventsStateDetails .registrationInfoContainer .registrationInfo,
.WaGadgetEventsStateDetails .registrationInfoContainer .registrationInfo * {
  color: var(--qfs-text) !important;
}

.WaGadgetEventsStateDetails .registrationInfoContainer li.disabled,
.WaGadgetEventsStateDetails .registrationInfoContainer li.disabled * {
  color: var(--qfs-disabled) !important;
}

.WaGadgetEventsStateDetails .boxActionContainer a,
.WaGadgetEventsStateDetails .boxActionContainer a:visited {
  color: var(--qfs-white) !important;
}

/* ---------- Event registration / checkout ---------- */

/* Registration summary/details */
.WaGadgetEvents #idInfoContainer,
.WaGadgetEvents #idInfoContainer .infoContainer,
.WaGadgetEvents #idInfoContainer .infoSection,
.WaGadgetEvents #idInfoContainer .infoText,
.WaGadgetEvents #idInfoContainer .infoTitle,
.WaGadgetEvents #idInfoContainer .infoLabel,
.WaGadgetEvents #idInfoContainer .infoValue {
  color: var(--qfs-transaction-text);
}

/* Registration form */
.WaGadgetEvents #idGeneralFormContainer,
.WaGadgetEvents #idGeneralFormContainer .generalFormContainer,
.WaGadgetEvents #idGeneralFormContainer .generalFormOuterContainer,
.WaGadgetEvents #idGeneralFormContainer label,
.WaGadgetEvents #idGeneralFormContainer .fieldLabel,
.WaGadgetEvents #idGeneralFormContainer .fieldBody,
.WaGadgetEvents #idGeneralFormContainer .fieldSubContainer {
  color: var(--qfs-transaction-text);
}

.WaGadgetEvents #idGeneralFormContainer input[type="text"],
.WaGadgetEvents #idGeneralFormContainer input[type="email"],
.WaGadgetEvents #idGeneralFormContainer input[type="tel"],
.WaGadgetEvents #idGeneralFormContainer input[type="number"],
.WaGadgetEvents #idGeneralFormContainer input[type="password"],
.WaGadgetEvents #idGeneralFormContainer textarea,
.WaGadgetEvents #idGeneralFormContainer select {
  background-color: var(--qfs-white);
  color: var(--qfs-transaction-text);
}

.WaGadgetEvents #idInfoContainer a,
.WaGadgetEvents #idGeneralFormContainer a {
  color: #725B00;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.WaGadgetEvents #idInfoContainer a:hover,
.WaGadgetEvents #idInfoContainer a:focus,
.WaGadgetEvents #idGeneralFormContainer a:hover,
.WaGadgetEvents #idGeneralFormContainer a:focus {
  color: #493A00;
}

.WaGadgetEvents input[type="submit"],
.WaGadgetEvents input[type="button"],
.WaGadgetEvents button,
.WaGadgetEvents a.functionalButton {
  color: var(--qfs-white);
}

/* ---------- Financial documents / invoices ---------- */

/* Base financial gadget treatment. This intentionally overrides the
   site's light body text because WA mixes medium-gray and white
   transactional surfaces inside this gadget. */
body.publicContentView .WaGadgetFinDocument {
  color: var(--qfs-transaction-text);
}

/* The global QFS heading rule has high specificity, so match that
   context here instead of using !important. */
body.publicContentView .mLayout.layoutMain .WaGadgetFinDocument h1,
body.publicContentView .mLayout.layoutMain .WaGadgetFinDocument h2,
body.publicContentView .mLayout.layoutMain .WaGadgetFinDocument h3,
body.publicContentView .mLayout.layoutMain .WaGadgetFinDocument h4,
body.publicContentView .mLayout.layoutMain .WaGadgetFinDocument .pageTitle,
body.publicContentView .mLayout.layoutMain .WaGadgetFinDocument .formTitle {
  color: var(--qfs-transaction-text);
}

/* Labels and values sitting directly on the medium-gray page */
body.publicContentView .WaGadgetFinDocument .fieldContainer,
body.publicContentView .WaGadgetFinDocument .fieldSubContainer,
body.publicContentView .WaGadgetFinDocument .fieldLabel,
body.publicContentView .WaGadgetFinDocument .fieldBody,
body.publicContentView .WaGadgetFinDocument .fieldBody span,
body.publicContentView .WaGadgetFinDocument .simpleTextContainer,
body.publicContentView .WaGadgetFinDocument .sectionContainer,
body.publicContentView .WaGadgetFinDocument .sectionTitle,
body.publicContentView .WaGadgetFinDocument .formContainer,
body.publicContentView .WaGadgetFinDocument .generalFieldsContainer,
body.publicContentView .WaGadgetFinDocument .generalFormContainer {
  color: var(--qfs-transaction-text);
}

/* Financial-page links on medium/light surfaces */
body.publicContentView .WaGadgetFinDocument a:not(.functionalButton) {
  color: var(--qfs-transaction-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.publicContentView .WaGadgetFinDocument a:not(.functionalButton):hover,
body.publicContentView .WaGadgetFinDocument a:not(.functionalButton):focus {
  color: var(--qfs-transaction-link-hover);
}

/* WA invoice line-item tables use a white background. Scope this
   specifically to financial gadgets rather than all .membersTable. */
body.publicContentView .WaGadgetFinDocument .membersTable,
body.publicContentView .WaGadgetFinDocument .membersTable tbody,
body.publicContentView .WaGadgetFinDocument .membersTable tr,
body.publicContentView .WaGadgetFinDocument .membersTable th,
body.publicContentView .WaGadgetFinDocument .membersTable td,
body.publicContentView .WaGadgetFinDocument .membersTable .memberDirectoryColumn1,
body.publicContentView .WaGadgetFinDocument .membersTable .memberDirectoryColumn2,
body.publicContentView .WaGadgetFinDocument .membersTable .memberDirectoryColumn3,
body.publicContentView .WaGadgetFinDocument .membersTable .totalRow,
body.publicContentView .WaGadgetFinDocument .membersTable .totalRow td {
  color: var(--qfs-transaction-text);
}

body.publicContentView .WaGadgetFinDocument .membersTable a {
  color: #725B00;
}

body.publicContentView .WaGadgetFinDocument .membersTable a:hover,
body.publicContentView .WaGadgetFinDocument .membersTable a:focus {
  color: #493A00;
}

/* Financial/payment controls */
body.publicContentView .WaGadgetFinDocument input[type="text"],
body.publicContentView .WaGadgetFinDocument input[type="email"],
body.publicContentView .WaGadgetFinDocument input[type="tel"],
body.publicContentView .WaGadgetFinDocument input[type="number"],
body.publicContentView .WaGadgetFinDocument input[type="password"],
body.publicContentView .WaGadgetFinDocument textarea,
body.publicContentView .WaGadgetFinDocument select {
  background-color: var(--qfs-white);
  color: var(--qfs-transaction-text);
}

body.publicContentView .WaGadgetFinDocument a.functionalButton,
body.publicContentView .WaGadgetFinDocument .functionalButton,
body.publicContentView .WaGadgetFinDocument button,
body.publicContentView .WaGadgetFinDocument input[type="submit"],
body.publicContentView .WaGadgetFinDocument input[type="button"] {
  background-color: var(--qfs-dark);
  color: var(--qfs-white) !important;
}

/* ---------- Footer ---------- */

#id_Footer1,
#id_Footer1 .gadgetContentEditableArea,
#id_Footer1 .gadgetStyleBody {
  background-color: var(--qfs-dark) !important;
}

#id_Footer1,
#id_Footer1 p,
#id_Footer1 span,
#id_Footer1 div {
  color: var(--qfs-light) !important;
}

#id_Footer1 a,
#id_Footer1 a:visited {
  color: var(--qfs-light) !important;
  text-decoration: underline;
}

#id_Footer1 a:hover,
#id_Footer1 a:focus {
  color: var(--qfs-white) !important;
}

#id_Footer1 font[color="#E0C46F"],
#id_Footer1 .qfs-gold {
  color: var(--qfs-gold) !important;
}

#id_Footer1 font[color="#6D7E88"],
#id_Footer1 .qfs-footer-muted {
  color: var(--qfs-light-muted) !important;
}

#id_Footer1 [data-componentid="qbWRcr3"] p,
#id_Footer1 [data-componentid="qbWRcr3"] font {
  color: var(--qfs-light-muted) !important;
}

.zoneWAbranding,
.zoneWAbranding .WABranding,
#idFooterPoweredByContainer,
#idFooterPoweredByWA {
  background: var(--qfs-dark) !important;
  color: var(--qfs-light-muted) !important;
}

#idFooterPoweredByWA a,
#idFooterPoweredByWA a:visited {
  color: var(--qfs-gold) !important;
}

#idFooterPoweredByWA a:hover,
#idFooterPoweredByWA a:focus {
  color: var(--qfs-white) !important;
}

/* ---------- QFS screening calendar ---------- */

#qfs-calendar .qfs-program-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
}

#qfs-calendar .qfs-program-card__poster {
  width: 140px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

#qfs-calendar .qfs-program-card__poster img {
  width: 100% !important;
  height: 100% !important;
  max-width: 140px !important;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* ===========================================================
   #3 — RESPONSIVE HEADER
   Uses Wild Apricot's native mobilePanel/menu/login behavior.
   No custom navigation JavaScript is added here.
   =========================================================== */

/* ---------- Tablet / narrow desktop ---------- */

@media (max-width: 900px) {
  /* Keep the utility links useful without letting them dominate. */
  .qfs-utility-tabs {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
  }

  .qfs-utility-tabs a {
    padding: 5px 10px;
    font-size: 14px;
  }

  /* Compact the masthead, but keep the desktop/tablet structure. */
  #id_Br8mDIe .gadgetStyleBody {
    padding: 8px 10px 4px !important;
  }

  #id_Br8mDIe img {
    max-height: 58px;
    width: auto;
    height: auto;
    margin: 2px auto;
  }

  #id_C8YeKBE .gadgetStyleBody {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  #id_C8YeKBE p {
    text-align: center;
    font-size: 14px;
    line-height: 1.25;
    padding: 2px 8px;
  }

  #id_SAIIAhF .loginContainer .loginLink,
  #id_IOTD79t .loginLink {
    padding: 3px 6px;
    font-size: 14px;
  }

  /*
     WA keeps the desktop menu for part of the tablet range.
     Make that transitional state compact and touch-scrollable,
     but hide the ugly visible scrollbar.
  */
  #id_yOhi7Wr .menuInner {
    padding: 0 6px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #id_yOhi7Wr .menuInner::-webkit-scrollbar {
    display: none;
  }

  #id_yOhi7Wr ul.firstLevel {
    flex-wrap: nowrap;
  }

  #id_yOhi7Wr .firstLevel > li .item > a {
    padding: 9px 8px;
    font-size: 13px;
    letter-spacing: 0;
  }

  #id_yOhi7Wr .firstLevel > li .item > a::after {
    left: 7px;
    right: 7px;
    bottom: 4px;
  }

  #id_yOhi7Wr .firstLevel > li.phantom > .item > a {
    font-size: 18px;
    padding: 6px 8px;
  }
}

/* ---------- Wild Apricot native mobile header ---------- */

/*
   WA supplies this markup and the associated click behavior:

     .mobilePanel
       .mobilePanelButton.buttonMenu
       .mobilePanelButton.buttonLogin
       .menuInner
       .loginInner

   QFS only styles it. WA remains responsible for opening/closing
   the menu and login panels.
*/
#id_yOhi7Wr .mobilePanel {
  box-sizing: border-box;
  background: var(--qfs-dark) !important;
  color: var(--qfs-white);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
}

#id_yOhi7Wr .mobilePanelButton {
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

/* Do not touch display here; WA changes the inline display value. */
#id_yOhi7Wr .mobilePanel .menuInner,
#id_yOhi7Wr .mobilePanel .loginInner {
  box-sizing: border-box;
  background: var(--qfs-dark) !important;
  color: var(--qfs-white);
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
}

/* Undo the desktop flex menu rules inside WA's opened mobile menu. */
#id_yOhi7Wr .mobilePanel .menuInner {
  padding: 6px 0 8px;
  overflow: visible;
}

#id_yOhi7Wr .mobilePanel .menuInner ul.firstLevel {
  display: block;
  margin: 0;
  padding: 0;
  white-space: normal;
}

#id_yOhi7Wr .mobilePanel .menuInner .firstLevel > li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

#id_yOhi7Wr .mobilePanel .menuInner .firstLevel > li .item > a {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border-radius: 0;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: .1px;
  white-space: normal;
  color: var(--qfs-gold) !important;
  text-decoration: none;
}

#id_yOhi7Wr .mobilePanel .menuInner .firstLevel > li .item > a::after {
  display: none;
}

#id_yOhi7Wr .mobilePanel .menuInner .firstLevel > li .item > a:hover,
#id_yOhi7Wr .mobilePanel .menuInner .firstLevel > li .item > a:focus,
#id_yOhi7Wr .mobilePanel .menuInner .firstLevel > li.sel > .item > a {
  background: rgba(255, 255, 255, .08);
  color: var(--qfs-white) !important;
  box-shadow: none;
}

/* Nested Support Us / Membership links. */
#id_yOhi7Wr .mobilePanel .menuInner .secondLevel {
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 4px 14px;
  background: rgba(0, 0, 0, .16);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#id_yOhi7Wr .mobilePanel .menuInner .secondLevel li .item > a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.25;
  white-space: normal;
  color: var(--qfs-cream) !important;
}

#id_yOhi7Wr .mobilePanel .menuInner .secondLevel li .item > a:hover,
#id_yOhi7Wr .mobilePanel .menuInner .secondLevel li .item > a:focus {
  background: rgba(255, 255, 255, .06);
  color: var(--qfs-white) !important;
}

/* Keep the WA login panel usable on touch screens. */
#id_yOhi7Wr .mobilePanel .loginInner {
  padding: 16px;
}

#id_yOhi7Wr .mobilePanel .loginInner input[type="text"],
#id_yOhi7Wr .mobilePanel .loginInner input[type="email"],
#id_yOhi7Wr .mobilePanel .loginInner input[type="password"] {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  background: var(--qfs-white);
  color: var(--qfs-dark);
}

#id_yOhi7Wr .mobilePanel .loginInner .loginButton,
#id_yOhi7Wr .mobilePanel .loginInner input[type="submit"] {
  min-height: 44px;
}

/* ---------- Phones / WA mobile-navigation range ---------- */

@media (max-width: 700px) {
  /*
     The native mobile panel already provides menu + login controls,
     so the gray masthead only needs to carry the QFS identity.
  */
  #id_C8YeKBE,
  #id_SAIIAhF,
  #id_IOTD79t {
    display: none !important;
  }

  /*
     Remove residual WA row/column minimum heights that can leave a
     large gray band after the tagline/login gadgets disappear.
  */
  .zoneHeader2,
  .zoneHeader2 > .WaPlaceHolder,
  .zoneHeader2 .WaPlaceHolderContent,
  .zoneHeader2 .WaLayoutRow,
  .zoneHeader2 .WaLayoutColumn {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Break the logo gadget out of a narrow WA column and center it. */
  #id_Br8mDIe {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    min-height: 0 !important;
  }

  #id_Br8mDIe .gadgetStyleBody {
    box-sizing: border-box;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    text-align: center;
  }

  #id_Br8mDIe img {
    display: block;
    max-height: 52px;
    width: auto;
    height: auto;
    margin: 0 auto;
  }

  .qfs-utility-tabs {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 5px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .qfs-utility-tabs::-webkit-scrollbar {
    display: none;
  }

  .qfs-utility-tabs a {
    flex: 0 0 auto;
    padding: 5px 9px;
    font-size: 13px;
  }
}

/* ---------- Very narrow phones ---------- */

@media (max-width: 420px) {
  #id_Br8mDIe .gadgetStyleBody {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #id_Br8mDIe img {
    max-height: 46px;
  }

  .qfs-utility-tabs {
    gap: 4px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .qfs-utility-tabs a {
    padding: 5px 7px;
    font-size: 12px;
  }

  #id_yOhi7Wr .mobilePanel .menuInner .firstLevel > li .item > a {
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* ---------- Motion sensitivity ---------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  #id_yOhi7Wr .firstLevel > li .item > a::after {
    transition: none !important;
  }
}