/* ==========================================================================
   WILD APRICOT GLOBAL TYPOGRAPHY ENHANCEMENTS
   ========================================================================== */

a.buttonStyle003{
  background: #2f65aa;
}

a.buttonStyle003:hover{
  background: #3776c6;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul ul li>.item>a>span {
  font-weight: bold;
  margin-top: 10px;
}

.WaPlaceHolderContent>div, .WaPlaceHolderContent1>div, .WaPlaceHolderContent2>div, .WaPlaceHolderContent3>div, .WaPlaceHolderContent4>div {
  padding: 40px 10px;
}

/* 1. Prevent Awkward Line Breaks (Orphans) on Headings */
h1, h2, h3, h4, h5, h6,
.title, .heading, .wa-page-title {
  text-wrap: balance !important; /* Forces lines to split evenly across rows */
  max-width: 45ch !important;    /* Keeps headings at a highly readable width */
  margin-bottom: 0.5em !important;
  line-height: 1.25 !important;  /* Tighter line spacing for large text */
}

/* 2. Optimize Long Paragraph Readability */
p, .wa-paragraph, li {
  text-wrap: pretty !important;  /* Prevents single trailing words on the last line */
  max-width: 65ch !important;    /* Ideal characters per line length for the human eye */
  line-height: 1.6 !important;   /* Comfortable breathing room between rows */
  margin-bottom: 1.25em !important;
}

/* 3. Global Text Smoothing & Rendering Boost */
body, html, .wa-theme, main, #content {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* 4. Ensure Custom Code Blocks Stay Crisp */
/* pre, code, kbd {
  text-wrap: nowrap !important; 
} */

img.artText {
    background-color: rgba(255, 255, 255, 0.75) !important; /* White with 75% opacity */
    display: inline-block; /* Shrinks the background box to fit only the text */
    padding: 10px 20px; /* Adds space inside the box */
    border-radius: 8px; /* Softens the corners */
    margin: 0 auto; /* Centers the block */
}

.WaGadgetAccountLogo img {

  width: 200px; 
  
  max-width: 100%; 
  
  height: auto; 
}

/* Prepare the outer footer container for the layer stack */
#id_Footer2 {
  position: relative !important;
  z-index: 1 !important;
}

/* Create the semi-transparent glass overlay over Wild Apricot's native background */
#id_Footer2::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(255, 255, 255, 0.80) !important; /* 80% white tint */
  z-index: -1 !important; /* Pushes the tint panel safely behind the text */
}

/* Force all inner elements to float neatly above the overlay layer */
#id_Footer2 > div,
#id_Footer2 #id_hqJ2NUL,
#id_Footer2 .WaLayoutTable {
  position: relative !important;
  z-index: 2 !important;
}


/* Event Ticket START */
#idEventsTitleMainContainer {
  padding: 0 10px;
}
/* 1. Kill old floats completely */
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer,
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyContentOuterContainer {
    float: none !important;
    width: auto !important;
    max-width: 600px;
}

/* 2. Create a clean side-by-side split for the main layout */
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyContainer > .inner {
    display: flex !important;
    flex-direction: row-reverse !important; /* Forces the image block to the left, and text block to the right */
    gap: 40px !important; /* Space between the left panel assets and right panel text */
    align-items: flex-start !important;
    justify-content: center; /* Horizontally centers child */
}

/* 3. Style the Left Panel (Image & Register Button) */
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer {
    flex: 0 0 350px !important; /* Keeps the left column limited to a clean 350px width */
    display: flex !important;
    flex-direction: column !important; /* Stacks the register button and image vertically */
    gap: 15px !important;
}

/* 4. Style the Right Panel (The long blue text module) */
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyContentOuterContainer {
    flex: 1 !important; /* Lets the main block fill out all remaining horizontal desktop screen space */
}

/* 5. Fix asset constraints inside the left panel */
.WaGadgetEventsStateDetails .boxOuterContainer .boxBodyInfoOuterContainer img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* event style END */

#id_VBXo1pm {
  /* Set a solid black color behind the image blend */
  background-color: rgba(0, 0, 0, 0.25) !important;
  
  /* Tell the browser to multiply the black color over the image */
  background-blend-mode: multiply !important;
}

.WaGadgetMenuHorizontal.HorizontalMenuStyle002 .stickyMenu,
.WaGadgetMobilePanel .mobilePanel { 
  background-color: #9BC7FF !important; 
}

/* Remove bullets and default indents on the public menu */
#id_BhJ1wAz ul.orientationVertical {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure individual list items don't show markers */
#id_BhJ1wAz ul.orientationVertical li {
  list-style: none !important;
  list-style-type: none !important;
  margin-bottom: 10px; /* Generous vertical spacing between links */
}

@import url('https://googleapis.com');

#id_BhJ1wAz ul.orientationVertical li,
#id_BhJ1wAz ul.orientationVertical a,
#id_bUNq8AJ p a,
#id_lHIR9Sk p a{
  font-family: 'Playfair Display', serif !important;
  font-size: 17px !important;
  text-decoration: none !important;
  color: #2c3e50 !important;
}


@media (max-width: 767px) {
    .headerLogo .WaLayoutTable .WaLayoutRow  { 
  display: flex;
}

@media (max-width: 767px){
  .hideMobile, .loginContainer, #id_3wkCegC {
    display: none;
    width: 0% !important;
  }
}

@media (max-width: 767px){
  #id_I2BxVmr{
    max-width: 45%
  }
}

@media (max-width: 768px) {
  .WaGadgetAccountLogo img {

    width: 130px; 
  }
}

@media screen and (max-width: 479px) {
  html:not([class*="WaPlaceHolder"]) .gadgetStyle002 h1.header font { 
    font-size: 24px !important; 
    line-height: 1.2 !important;
  }
}

/* ==========================================================================
   WILD APRICOT PARAGRAPH BUTTON CONTAINER FIX
   ========================================================================== */

/* 1. Target the paragraph tag inside this specific gadget container */
.WaGadgetLast.WaGadgetContent.gadgetStyleNone .gadgetContentEditableArea > p {
  display: flex !important;
  flex-wrap: wrap !important;        /* Breaks lines cleanly on mobile viewports */
  /* gap: 8px !important;  */
  justify-content: flex-start !important; /* Aligns buttons left on desktop */
  align-items: center !important;
  margin-bottom: 0 !important;
}

/* 2. Strip out Wild Apricot's native float properties on the buttons */
.WaGadgetLast.WaGadgetContent.gadgetStyleNone .stylizedButton {
  margin: 0 !important;              /* Erases conflicting desktop layout margins */
  display: inline-block !important;
  box-sizing: border-box !important;
}

/* 3. Mobile View Optimization (Under 580px screen width) */
@media screen and (max-width: 580px) {
  /* Center the wrapped layout on narrow smartphone displays */
  
  /* Make the buttons expand fully for prominent, tap-friendly targets */
  .WaGadgetLast.WaGadgetContent.gadgetStyleNone .stylizedButton {
    flex: 1 1 100% !important;       /* Stretches buttons full-width when stacked */
    text-align: center !important;   /* Centers label text inside the shape */
  }
}