/* WILD APRICOT — Light grey, slightly transparent background for ONE Content gadget.
   Add "LightBackground" (without the dot) in the gadget's Custom CSS class field. */

/* Put the background on the gadget wrapper and make sure it wins */
.LightBackground {
  background-color: rgba(255, 255, 255, 0.8) !important; /* 50% transparent light grey */
  padding: 16px !important;
  border-radius: 0 !important;
  width: 100% !important;          /* make responsive */
  max-width: 100% !important;
  box-sizing: border-box !important; /* include padding in width */
  overflow-wrap: break-word !important; /* prevent cut-off text */
  word-break: break-word !important;
}

/* Many WA themes paint inner boxes white — make them transparent so your bg shows */
.LightBackground .WaGadget,
.LightBackground .WaGadgetContent,
.LightBackground .gadget,
.LightBackground .gadgetContent,
.LightBackground .gadgetBody,
.LightBackground .boxOuter,
.LightBackground .boxBody,
.LightBackground .boxContent,
.LightBackground .inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* If your theme puts the visible panel on a direct child, paint that too */
.LightBackground > .WaGadget,
.LightBackground > .gadget,
.LightBackground > .WaGadgetContent,
.LightBackground > .gadgetContent {
  background-color: rgba(158, 57, 64, 0.6) !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}



/* Optional: trim extra theme padding so the grey box hugs your content */
.LightBackground .gadgetMargin,
.LightBackground .boxPadding {
  padding: 0 !important;
}

/* Mobile resizing */
@media screen and (max-width: 768px) {
  .LightBackground {
    padding: 12px !important; /* smaller padding for tablets */
    font-size: 0.95em !important;
  }

  .LightBackground > .WaGadget,
  .LightBackground > .gadget,
  .LightBackground > .WaGadgetContent,
  .LightBackground > .gadgetContent {
    background: transparent !important; /* keep transparency */
    padding: 8px !important;
  }
}

@media screen and (max-width: 480px) {
  .LightBackground {
    padding: 8px !important; /* tighter padding for phones */
    font-size: 0.9em !important;
  }
}









/* ===== Secondary Menu (tight bar with even gaps) ===== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

.sec-menu--pills {
  --bar-bg: #322845;
  --bar-radius: 12px;
  --item-gap: 32px;   /* fixed gap between items */
  --pad-y: 6px;
  --pad-x: 16px;    /* side padding inside the grey bar */
  --text-color: #ffffff;
  --text-size: 14px;
}

/* Font override */
.sec-menu--pills,
.sec-menu--pills * {
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif !important;
}

/* Grey bar wraps tightly around items */
.sec-menu--pills ul {
  list-style: none;
  margin: 0 auto !important;         /* centers the whole bar */
  padding: var(--pad-y) var(--pad-x) !important;
  display: inline-flex !important;   /* shrink-wrap around items */
  align-items: center !important;
  gap: var(--item-gap) !important;   /* fixed spacing between items */
  background: var(--bar-bg);
  border-radius: var(--bar-radius);
}

/* Each menu item */
.sec-menu--pills li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Links and current page spans */
.sec-menu--pills a,
.sec-menu--pills span {
  display: block;
  text-decoration: none !important;
  color: var(--text-color) !important;
  font-weight: 400 !important;
  font-size: var(--text-size) !important;
  line-height: 1.2;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.18s ease, opacity 0.18s ease;
}

/* Hover/focus state */
.sec-menu--pills a:hover,
.sec-menu--pills a:focus {
  background: rgba(255,255,255,0.15);
  outline: none;
}

/* Active item */
.sec-menu--pills li.selected > a,
.sec-menu--pills li.selected > span {
  background: rgba(0,0,0,0.15);
}







/* ===== Center Logo on Mobile ===== */
.logo-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  max-width: 100%;   /* make sure it scales on smaller screens */
  height: auto;      /* keep proportions */
}

/* Extra guarantee on small screens */
@media (max-width: 768px) {
  .logo-center {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}