/*.WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*="Button"] a, .WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*="Button"] span {
    position: relative;
    box-sizing: border-box;
    color: white;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    display: block;
    min-width: 0px;
    margin: 0px;
    padding: 14px 0px 15px;
    background: #00205B;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    outline: 0px;
    font: 14px / 1.5 "Ubuntu Condensed", Arial, sans-serif;
    text-decoration: none;
}*/


#idComponentFrame{
    text-align: center;
}

#navbarButtons {
    text-align: center;
    vertical-align: middle;
    justify-content: center;

}


.WaGadgetLoginButton .loginLink {
    background-color: transparent !important;
    color: #bf995b !important;

}

.loginLink:hover, .WaGadgetLoginButton:hover {
    color: #ebab1c !important;
    background-color: transparent;
} 


#logo { 
    height: 150px;
    width: 100px; 
    padding-right: 50px;
}

#contactDetails {
    text-decoration: none;
    color: white;
}

a.stylizedButton.buttonStyle003{
    background-color: #ebab1c;
    color:white;
    font-size: 50px;
    border-radius: 25px;
}
a.stylizedButton.buttonStyle003:hover {
    background-color: #ebaa1c7e;
    font-size: 52px;
}
 #joinUsContent {
     margin: 0px;
 }

.levelTitle {
  font-size: 30px;
  border: 2px;
  border-style: solid;
  border-color: #ebab1c;
  padding: 10px;
  color: #00205b;
}

.details-example{
  padding-bottom: 20px;
}

.list{
  list-style: circle;
  font-size: 20px;
}

.italicizedListPoint{
  font-style: italic;
  font-size: 18px;
  padding: 5px;
  list-style-type: none;
}



/* ===== BQC fixes Nov 12 2026: mobile, contrast, contact form ===== */
/* =====================================================================
   BQC mobile fixes — append to site-wide custom CSS (user.css)
   Wild Apricot: Website / Settings → Colors and Styles → Custom CSS
   (this is the file already served as /resources/theme/user.css)

   Scoped to the header logo, gold stylized buttons, and the homepage
   video gadget. Does not restyle the whole theme.

   Existing unused rule in user.css:
     #logo { height: 150px; width: 100px; padding-right: 50px; }
   That rule does not apply today (the logo <img> has no id="logo"),
   and the 100×150 size is the wrong aspect ratio anyway. Leave it
   alone; these selectors target the actual logo image instead.
   ===================================================================== */

/* Logo: constrain in the header at all sizes; tighten on phones.
   The SVG has a viewBox but no width/height, so on a stacked mobile
   header column it expands to the full phone width. */
#idHeaderContentHolder img[src*="msu-quarterback-club-logo"],
#id_f53D1SE img {
  display: block;
  width: auto !important;
  max-width: 220px;
  max-height: 100px;
  height: auto !important;
  margin: 0;
  padding: 0;
}

/* Buttons: keep the desktop look, but stop inner <font> tags and the
   existing user.css 50px / hover 52px rules from blowing out the width. */
a.stylizedButton.buttonStyle003,
a.stylizedButton.buttonStyle003:hover {
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}
a.stylizedButton.buttonStyle003 font,
a.stylizedButton.buttonStyle003:hover font {
  font-size: inherit !important;
}

/* Homepage video: drop the desktop-only 175px left indent. */
#id_fHHtroX {
  margin-left: 0 !important;
}
#id_fHHtroX video {
  display: block;
  width: 100% !important;
  max-width: 960px;
  height: auto !important;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  #idHeaderContentHolder img[src*="msu-quarterback-club-logo"],
  #id_f53D1SE img {
    max-width: 180px;
    max-height: 88px;
    margin: 0 auto;
  }

  /* Existing user.css sets font-size: 50px (52px on hover) on these
     buttons. The homepage also wraps the label in
     <font style="font-size: 40px;">. Both overflow a ~390px screen. */
  a.stylizedButton.buttonStyle003,
  a.stylizedButton.buttonStyle003:hover {
    font-size: 22px !important;
    padding: 12px 20px;
    border-radius: 16px;
    display: inline-block;
  }

  /* Header padding is tight on small screens once the logo shrinks. */
  #idHeaderContentHolder > div {
    padding-top: 8px !important;
  }

  /* Homepage / contact use 60px <h1> (inline or gadget CSS), which
     is oversized on a phone. Bring it down without touching desktop. */
  h1,
  h1 font {
    font-size: 36px !important;
    line-height: 1.15;
  }
}

/* =====================================================================
   BQC contrast fixes — append to site-wide custom CSS (user.css)
   Wild Apricot: Website / Settings → Colors and Styles → Custom CSS

   Recommended pairing, closest to the current MSU navy + gold look:
     • Buttons: keep gold #EBAB1C, change label from white to navy #00205B
       Contrast 7.64:1  (WCAG AA normal and large: pass)
     • Headings / quotes: change #BF995B → #81683D (same hue, darkened)
       Contrast 4.55:1 on #EEEEEE, 5.28:1 on #FFFFFF
       (WCAG AA normal 4.5:1 and large 3:1: pass)

   Current (for reference, do not keep):
     • White #FFFFFF on button gold #EBAB1C = 2.02:1  FAIL AA large and normal
     • Heading gold #BF995B on page gray #EEEEEE = 2.28:1  FAIL AA large and normal
   ===================================================================== */

/* Gold buttons: navy text on the existing gold. Also covers hover,
   which currently uses a semi-transparent gold (#ebaa1c7e) and a
   52px font-size bump in user.css. */
a.stylizedButton.buttonStyle003 {
  background-color: #EBAB1C;
  color: #00205B;
}
a.stylizedButton.buttonStyle003:hover {
  background-color: #D49B19;
  color: #00205B;
}
a.stylizedButton.buttonStyle003 font,
a.stylizedButton.buttonStyle003:hover font {
  color: inherit !important;
}

/* Headings and quote-style headings used across the site.
   Theme rules in customStyles.css set these to #BF995B. Several
   homepage / contact headings also use an inline color="#bf995b"
   or <font color="#bf995b">, so those are overridden too. */
H1:not(.promo),
H2,
H3,
H4:not(.gadgetTitleH4),
H5,
.gadgetStyleNone H1:not(.promo),
.gadgetStyleNone H2,
.gadgetStyleNone H3,
.gadgetStyleNone H4:not(.gadgetTitleH4),
.gadgetStyleNone H5,
.WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer h4.boxHeaderTitle,
.WaGadgetBlogStateList ul.boxesList li.boxesListItem .boxHeaderOuterContainer h4.boxHeaderTitle a,
H1 font[color="#bf995b" i],
H2 font[color="#bf995b" i],
H3 font[color="#bf995b" i],
H4 font[color="#bf995b" i],
H5 font[color="#bf995b" i],
font[color="#bf995b" i],
[color="#bf995b" i] {
  color: #81683D !important;
}

/* Contact page: make the Jotform embed use the full content width
   and center the card. Append to site-wide custom CSS (user.css). */
#contactForm,
#contactForm .gadgetStyleBody {
  width: 100% !important;
  max-width: 100%;
  text-align: center;
}
#contactForm iframe {
  width: 100% !important;
  max-width: 100%;
  border: 0;
}
/* ===== end BQC fixes Nov 12 2026 ===== */