/* ==========================================
   FPA SOUTH CAROLINA
   WEBSITE REFRESH
   Whiteboard / Maya Blue Theme
   ========================================== */

/* BRAND COLORS */

:root {
  --fpa-navy: #151945;
  --fpa-blue: #397B96;
  --fpa-soft-blue: #E8F1F5;
  --fpa-gold: #F8B01C;
  --fpa-magenta: #E62051;
  --fpa-white: #FAFAF8;
}

/* GENERAL TYPOGRAPHY */

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #30364B;
  line-height: 1.6;
}

/* HEADINGS */

h1, h2, h3, h4 {
  color: #151945;
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: 34px; }
h2 { font-size: 27px; }
h3 { font-size: 21px; }

/* STANDARD CONTENT LINKS */

.WaGadgetContent a {
  color: #397B96;
}

.WaGadgetContent a:hover {
  color: #151945;
}

/* IMAGES */

.WaGadgetContent img {
  max-width: 100%;
  height: auto;
}

/* MOBILE TYPOGRAPHY */

@media (max-width: 767px) {
  h1 { font-size: 28px; }
  h2 { font-size: 23px; }
  h3 { font-size: 19px; }
}

/* ==========================================
   NEW HOME PAGE DESIGN
   Page ID: 18056
   ========================================== */

@media (min-width: 1000px) {

  body#PAGEID_18056 .zoneHeader1 .container_12,
  body#PAGEID_18056 .zoneHeader2 .container_12,
  body#PAGEID_18056 .zoneContent .container_12,
  body#PAGEID_18056 .zoneFooter1 .container_12 {
    width: 92% !important;
    max-width: 1150px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  body#PAGEID_18056 .container_12 > .s1_grid_12 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
  }

}

/* ==========================================
   HOMEPAGE FOOTER STYLING
   Page ID: 18056
   ========================================== */

body#PAGEID_18056 .zoneFooter1 .WaGadgetSocialProfile {
  background-color: #151945 !important;
  padding: 12px 35px 20px !important;
  margin-top: -12px !important;
  border-radius: 0 0 8px 8px;
}

body#PAGEID_18056 .zoneFooter1 .WaGadgetSocialProfile ul {
  margin: 0 !important;
  padding: 0 !important;
}

body#PAGEID_18056 .zoneFooter1 .WaGadgetContent {
  margin-bottom: 0 !important;
}

/* ==========================================
   NEW EVENTS DESIGN
   Private Page ID: 18062
   ========================================== */

/* EVENT TITLES */

body#PAGEID_18062 a.eventDetailsLink,
body:has(#id_18062) a.eventDetailsLink,
body:has([data-page-id="18062"]) a.eventDetailsLink {
  color: #151945 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

body#PAGEID_18062 a.eventDetailsLink:hover,
body:has(#id_18062) a.eventDetailsLink:hover,
body:has([data-page-id="18062"]) a.eventDetailsLink:hover {
  color: #397B96 !important;
  text-decoration: underline !important;
}

/* REMOVE TURQUOISE EVENT TITLE ARROWS */

body#PAGEID_18062 li.boxesListItem .boxHeaderTitle a.eventDetailsLink::before,
body#PAGEID_18062 li.boxesListItem .boxHeaderTitle a.eventDetailsLink::after,
body:has(#id_18062) li.boxesListItem .boxHeaderTitle a.eventDetailsLink::before,
body:has(#id_18062) li.boxesListItem .boxHeaderTitle a.eventDetailsLink::after,
body:has([data-page-id="18062"]) li.boxesListItem .boxHeaderTitle a.eventDetailsLink::before,
body:has([data-page-id="18062"]) li.boxesListItem .boxHeaderTitle a.eventDetailsLink::after {
  content: none !important;
  display: none !important;
}

/* Also hide decorative arrow elements
   added by some Wild Apricot themes */

body#PAGEID_18062 li.boxesListItem .boxHeaderTitle .arrow,
body:has(#id_18062) li.boxesListItem .boxHeaderTitle .arrow,
body:has([data-page-id="18062"]) li.boxesListItem .boxHeaderTitle .arrow {
  display: none !important;
}

/* ==========================================
   REGISTER BUTTONS
   ========================================== */

body#PAGEID_18062 input.typeButton.registerButton,
body:has(#id_18062) input.typeButton.registerButton,
body:has([data-page-id="18062"]) input.typeButton.registerButton {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: #151945 !important;
  background-color: #151945 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 2px solid #151945 !important;
  border-radius: 6px !important;
  padding: 12px 24px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  height: auto !important;
  min-height: 42px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: background-color .2s ease,
              color .2s ease;
}

/* GOLD BUTTON HOVER */

body#PAGEID_18062 input.typeButton.registerButton:hover,
body:has(#id_18062) input.typeButton.registerButton:hover,
body:has([data-page-id="18062"]) input.typeButton.registerButton:hover {
  background: #F8B01C !important;
  background-color: #F8B01C !important;
  background-image: none !important;
  color: #151945 !important;
  border-color: #F8B01C !important;
}

/* KEYBOARD ACCESSIBILITY */

body#PAGEID_18062 input.typeButton.registerButton:focus-visible,
body:has(#id_18062) input.typeButton.registerButton:focus-visible,
body:has([data-page-id="18062"]) input.typeButton.registerButton:focus-visible {
  outline: 3px solid #F8B01C !important;
  outline-offset: 3px !important;
}

/* ==========================================
   EVENTS - MODERN CARD DESIGN
   ========================================== */

/* INDIVIDUAL EVENT CARDS */

body#PAGEID_18062 li.boxesListItem,
body:has(#id_18062) li.boxesListItem,
body:has([data-page-id="18062"]) li.boxesListItem {
  background: #FFFFFF !important;
  border: 1px solid #DCE6EC !important;
  border-radius: 12px !important;
  padding: 26px !important;
  margin-bottom: 26px !important;
  box-shadow: 0 5px 18px rgba(21,25,69,0.08) !important;
  overflow: hidden;
}

/* REMOVE OLD THEME OUTLINES */

body#PAGEID_18062 li.boxesListItem > .boxOuterContainer,
body:has(#id_18062) li.boxesListItem > .boxOuterContainer,
body:has([data-page-id="18062"]) li.boxesListItem > .boxOuterContainer {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* EVENT HEADER SPACING */

body#PAGEID_18062 li.boxesListItem .boxHeaderContainer,
body:has(#id_18062) li.boxesListItem .boxHeaderContainer,
body:has([data-page-id="18062"]) li.boxesListItem .boxHeaderContainer {
  margin-bottom: 14px !important;
}

/* ==========================================
   EVENT DESCRIPTION PREVIEWS
   ========================================== */

body#PAGEID_18062 li.boxesListItem .boxBodyContentContainer.fixedHeight,
body:has(#id_18062) li.boxesListItem .boxBodyContentContainer.fixedHeight,
body:has([data-page-id="18062"]) li.boxesListItem .boxBodyContentContainer.fixedHeight {
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 78%,
    transparent 100%
  );
}

/* EVENT DESCRIPTION TYPOGRAPHY */

body#PAGEID_18062 li.boxesListItem .gadgetEventEditableArea,
body:has(#id_18062) li.boxesListItem .gadgetEventEditableArea,
body:has([data-page-id="18062"]) li.boxesListItem .gadgetEventEditableArea {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #30364B !important;
}

/* SHOW DETAILS LINKS */

body#PAGEID_18062 li.boxesListItem a.footerEventDetailsLink,
body:has(#id_18062) li.boxesListItem a.footerEventDetailsLink,
body:has([data-page-id="18062"]) li.boxesListItem a.footerEventDetailsLink {
  color: #397B96 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* ==========================================
   MOBILE EVENT STYLING
   ========================================== */

@media (max-width: 767px) {

  body#PAGEID_18062 a.eventDetailsLink,
  body:has(#id_18062) a.eventDetailsLink,
  body:has([data-page-id="18062"]) a.eventDetailsLink {
    font-size: 19px !important;
  }

  body#PAGEID_18062 li.boxesListItem,
  body:has(#id_18062) li.boxesListItem,
  body:has([data-page-id="18062"]) li.boxesListItem {
    padding: 18px !important;
    margin-bottom: 18px !important;
  }

}
