/* 1. Import the National Park font (Must be at the very top!) */
@import url('https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&display=swap');

/* 2. Apply it to all standard text elements */
body, p, li, a, span, div, td, th {
    font-family: 'National Park', sans-serif !important;
}

/* 3. Apply it to all headings */
h1, h2, h3, h4, h5, h6, 
.WaHeading1, .WaHeading2, .WaHeading3, .WaHeading4, .WaHeading5, .WaHeading6 {
    font-family: 'National Park', sans-serif !important;
    font-weight: 600; /* Pushes the headings to be slightly bolder */
}

/* 4. Apply it to all navigation menus */
.cn-menu-item a, 
.WaMenuHorizontal a, 
.WaMenuVertical a, 
.menuItem a {
    font-family: 'National Park', sans-serif !important;
}

/* 5. Apply it to buttons, forms, and input fields */
input, select, textarea, button, 
.wa-button, .WaButton, 
label, .fieldLabel, .fieldName {
    font-family: 'National Park', sans-serif !important;
}

.levelRecurring {
    display: none;
}

.levelRenewal {
    display: none;
}levelRecurring {
    display: none;
}
/* 1. Target the sticky/fixed menu containers directly */
.stickyMenu, 
.sticky, 
.fixed, 
[class*="sticky"], 
[class*="fixed"] {
    background-color: #003663 !important;
    background: #003663 !important;
}

/* 2. Target the actual inner menu block */
.WaGadgetMenuHorizontal .menuInner,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel {
    background-color: #003663 !important;
    background: #003663 !important;
}


/* --- DESKTOP ONLY: FORCE LOGO SHIFT TO THE RIGHT --- */
@media (min-width: 769px) {
  
  /* Target any content gadget inside any variation of a header */
  .id_header .WaGadgetHtml,
  .header .WaGadgetHtml,
  .WaHeader .WaGadgetHtml,
  .wa-header .WaGadgetHtml,
  [class*="header"] .WaGadgetHtml,
  [class*="Header"] .WaGadgetHtml {
      padding-left: 80px !important; /* High value to make the shift obvious */
      box-sizing: border-box !important;
  }


}/* Only shift and realign the logo on desktop and tablet screens */
@media (min-width: 769px) {
  
  /* 1. Force the image to float left and clear its own margins */
  .custom-logo-shift {
    display: block !important;
    float: left !important;
    margin-left: 0 !important; 
    margin-right: auto !important;
    max-width: 500px !important; /* Adjust your logo sizing here */
    width: 100% !important;
    height: auto !important;
  }

  /* 2. Strip the margins/padding from every container holding the logo */
  .custom-logo-shift,
  .custom-logo-shift [class*="inner"],
  .custom-logo-shift [class*="container"],
  [class*="layoutColumn"] .WaGadgetContent {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* 3. Force WildApricot's master grid areas in the header to align left */
  .zoneInner, 
  .zoneWrap, 
  .pageHeaderInner,
  .headerInner {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }
}

/* Lower the Log In button on desktop screens */
@media (min-width: 769px) {
  .id_login_button,
  .wa-login,
  .loginBox,
  [class*="login"] {
    margin-top: 18px !important; /* Increase this number to push it lower, decrease to pull it up */
    display: inline-block !important; 
  }
}
/* Force a single image to span 100% of the screen viewport width */
@media (min-width: 769px) {
  .full-screen-banner {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    height: auto !important;
    display: block !important;
  }
}

/* Force transparent backgrounds on all Wild Apricot Blog elements */
.WaGadgetBlog,
.WaGadgetBlog *,
.typeBlogGadget,
.typeBlogGadget *,
.gadgetStyleBlog,
.gadgetStyleBlog .gadgetStyleBody,
.blogPostList,
.blogPostContainer,
.blogPostContent,
.blogStyleWrapper {
    background-color: transparent !important;
    background: none !important;
}

/* Remove top spacing/padding from Wild Apricot blog gadget */
.WaGadgetBlog,
.typeBlogGadget,
.gadgetStyleBlog {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove default top margin on internal blog headers and containers */
.WaGadgetBlog .gadgetStyleBody,
.WaGadgetBlog .blogPostList,
.WaGadgetBlog h1,
.WaGadgetBlog h2,
.WaGadgetBlog .pageTitle {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove dark blue background from field instructions */
div.typeInstruction.fixedInstruction {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Applies ONLY to screens 768px wide or smaller (Mobile/Tablet) */
@media screen and (max-width: 768px) {

  /* Force tables to scroll cleanly instead of overflowing */
  .WaLayoutContent table {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
  }

  /* Ensure all images scale down without affecting desktop sizes */
  .WaLayoutContent img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Prevent long headers/text from stretching the page width */
  .WaLayoutContent h1, 
  .WaLayoutContent h2, 
  .WaLayoutContent h3, 
  .WaLayoutContent p {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }