/* ===========================================================
   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;
}

/* ---------- Responsive adjustments ---------- */

@media (max-width: 900px) {
  .qfs-utility-tabs {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  #id_Br8mDIe img {
    max-height: 70px;
    margin: 4px auto;
  }

  #id_C8YeKBE p {
    text-align: center;
    font-size: 16px;
    padding: 6px 8px;
  }

  #id_yOhi7Wr .firstLevel > li .item > a {
    padding: 11px 12px;
    font-size: 15px;
  }
}

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

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

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