/* ============================================================
   CREW NASHVILLE — SITE STYLESHEET
   ------------------------------------------------------------
   TO CHANGE PAGE WIDTH: edit --crew-max in section 1.
   That's the only number you need to touch.
   ============================================================ */


/* ---- 1. SETTINGS ---------------------------------------- */

:root {
  --crew-max:    1280px;   /* PAGE WIDTH — try 1400 / 1280 / 1200 / 1140 */
  --crew-gutter: 60px;     /* minimum side space on smaller screens */
}
@media (max-width: 768px) {
  :root { --crew-gutter: 24px; }
}


/* ---- 2. FULL-BLEED CONTAINERS ---------------------------- */
/* Wild Apricot wraps pages in fixed-width tables. These let
   backgrounds run edge to edge. Content width is section 3. */

.contentAreaCell,
.contentAreaCell > table,
.contentAreaCell > table > tbody,
.contentAreaCell > table > tbody > tr,
.contentAreaCell > table > tbody > tr > td,
#ctl00_ContentAreaCell,
.pageContentContainer,
.WaContainer,
.gadgetLayout,
.gadgetLayoutCell,
.zoneContent,
body > table,
body > table > tbody,
body > table > tbody > tr,
body > table > tbody > tr > td,
div.container_12,
div.zoneContent div.container_12,
.mLayout div.container_12,
div.s1_grid_12 {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ---- 3. CONTENT WIDTH ------------------------------------ */
/* Backgrounds stay full width; the content inside pulls in. */

/* interior pages */
.crew-nav,
.page-hero,
.events-tabs,
.cal-section,
.network-callout,
.bn-callout,
.WaGadgetEvents,
/* home page */
.hero,
.stats-bar,
.intro,
.events-section,
.join-section,
.news-band {
  padding-left:  max(var(--crew-gutter), calc((100% - var(--crew-max)) / 2)) !important;
  padding-right: max(var(--crew-gutter), calc((100% - var(--crew-max)) / 2)) !important;
  box-sizing: border-box !important;
}

.WaGadgetEvents { margin: 40px 0 20px !important; }


/* ---- 4. FIXED NAVIGATION --------------------------------- */

.crew-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 72px !important;
  z-index: 1000 !important;
}

.crew-mobile-menu {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
}

@media (min-width: 769px) {
  .crew-nav-links {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .crew-mobile-menu { display: none !important; }
}


/* ---- 5. LOGIN / ACCOUNT BAR ------------------------------ */

#id_fylOOTM {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  margin: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left:  max(var(--crew-gutter), calc((100% - var(--crew-max)) / 2)) !important;
  padding-right: max(var(--crew-gutter), calc((100% - var(--crew-max)) / 2)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  clip: auto !important;
  background-color: #eef6fc !important;
  border-bottom: 1px solid rgba(58,111,181,0.2) !important;
  text-align: right !important;
  z-index: 999 !important;
}

#id_fylOOTM .gadgetStyleBody,
#id_fylOOTM .gadgetContentEditableArea,
#id_fylOOTM .loginContainer,
#id_fylOOTM .WaGadgetLoginButton {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  text-align: right !important;
}

#id_fylOOTM a {
  display: inline-block !important;
  margin: 0 0 0 16px !important;
  padding: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  color: #3a6fb5 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
#id_fylOOTM a:hover {
  color: #1a2b4a !important;
  text-decoration: underline !important;
}

#id_fylOOTM a.loginLink {
  margin-left: 0 !important;
  padding: 4px 14px !important;
  border: 1px solid #3a6fb5 !important;
  border-radius: 3px !important;
  background-color: transparent !important;
  color: #3a6fb5 !important;
}
#id_fylOOTM a.loginLink:hover {
  background-color: #3a6fb5 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}


/* ---- 6. PAGE OFFSET -------------------------------------- */
/* Clears the 72px nav + 44px login bar. */

body { padding-top: 116px !important; }

.page-hero,
.hero { margin-top: 0 !important; }


/* ---- 7. MOBILE ------------------------------------------- */

@media (max-width: 768px) {
  .crew-nav { height: 60px !important; }

  #id_fylOOTM {
    top: 60px !important;
    min-height: 44px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
  }
  #id_fylOOTM .gadgetStyleBody,
  #id_fylOOTM .gadgetContentEditableArea,
  #id_fylOOTM .loginContainer,
  #id_fylOOTM .WaGadgetLoginButton {
    text-align: center !important;
  }
  #id_fylOOTM a {
    margin: 2px 7px !important;
    font-size: 10px !important;
  }

  body { padding-top: 104px !important; }
}


/* ---- 8. FULL-WIDTH VIDEO HERO ---------------------------- */

.full-width-hero {
  position: relative;
  width: 100vw;
  height: 70vh;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}
.full-width-hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}


/* ---- 9. EVENT CALENDAR GADGET ---------------------------- */

h3.sectionTitle {
  font-family: 'Josefin Sans', sans-serif !important;
  color: #0a0a0a !important;
  font-size: 22px !important;
}

/* Day-of-week header row only */
.WaGadgetEventsStateCalendar .EventListCalendar
  tr:first-child td:not([class*="EventListCalendarItem"]) {
  background-color: #1a2b4a !important;
  color: #ffffff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Date numbers */
.WaGadgetEventsStateCalendar .calendarDate,
.WaGadgetEventsStateCalendar .calendarDate a,
.WaGadgetEventsStateCalendar .calendarDate nobr {
  color: #3a3a3a !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
}

/* Event titles inside the grid */
.WaGadgetEventsStateCalendar .EventListCalendar a {
  color: #f0f0f0 !important;
  font-weight: 400 !important;
  font-family: 'DM Sans', sans-serif !important;
}

.viewSwitchersTable a { color: #3a6fb5 !important; }


/* ---- 10. EVENT REGISTRATION PAGES ------------------------ */

.eventRegistration h1,
.eventRegistration h2,
.eventRegistration h3 {
  font-family: 'Josefin Sans', sans-serif !important;
  color: #1a2b4a !important;
}
.eventRegistration .button,
.eventRegistration input[type="submit"],
.eventRegistration button[type="submit"] {
  background: #3a6fb5 !important;
  border-color: #3a6fb5 !important;
  font-family: 'DM Sans', sans-serif !important;
  border-radius: 4px !important;
}
.eventRegistration label,
.eventRegistration p,
.eventRegistration td {
  font-family: 'DM Sans', sans-serif !important;
  color: #5A5A5A !important;
}
.eventRegistration input[type="text"],
.eventRegistration input[type="email"],
.eventRegistration select {
  border: 1px solid rgba(58,111,181,0.3) !important;
  border-radius: 4px !important;
  font-family: 'DM Sans', sans-serif !important;
}


/* ---- 11. HIDE WILD APRICOT CHROME ------------------------ */

.WABranding { display: none !important; }
#idFooterPoweredByContainer { display: none !important; }
img[src*="rss"] { display: none !important; }
.contentAreaCell img[src*="calendar"] { display: none !important; }