/* -----------------------------------------------------
   HEROIC AZ TYPOGRAPHY SYSTEM
   Font: Lato
   H1: #cc0000, H2: #333333
----------------------------------------------------- */

/* 1. Import Lato (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* 2. Global base font + body text */
html, body {
    font-family: 'Lato', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
}

p, li, td, th, span, div {
    font-family: 'Lato', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
}

/* 3. Headings hierarchy
   H1: 48px, semi-bold, red (#cc0000)
   H2: 24px, italic, dark grey (#333333)
   H3: 22px, bold, dark gray
   H4: 18px, semi-bold
   H5: 14px, uppercase label
   H6: 13px, small uppercase helper
*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif !important;
    margin-top: 0;
    margin-bottom: 0.6em;
}

/* H1 — primary hero headings */
h1 {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #cc0000 !important;
    line-height: 1.2 !important;
}

/* H2 — subheadings */
h2 {
    font-size: 24px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #333333 !important;
    line-height: 1.4 !important;
}

/* H3 — section headings */
h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    line-height: 1.3 !important;
}

/* H4 — smaller section / card titles */
h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    line-height: 1.4 !important;
}

/* H5 — labels, mini section headers */
h5 {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff !important;
    margin-bottom: 0.4em !important;
}

/* H6 — subtle helper labels */
h6 {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff !important;
    margin-bottom: 0.3em !important;
}

/* 4. Links */
a {
    color: #cc0000;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #990000;
    text-decoration: underline;
}

/* 5. Lists */
ul, ol {
    margin-left: 1.4em;
    margin-bottom: 1em;
}

ul li, ol li {
    margin-bottom: 0.3em;
}

/* 6. Blockquote style (single, clean version) */
blockquote {
    font-style: italic;
    border-left: 4px solid #cc0000;
    padding-left: 1em;
    margin: 1.5em 0;
    color: #555555;
}

/* 7. Buttons (generic WA + HTML buttons) */

button,
.button,
.WaGadgetButton,
input[type="submit"],
input[type="button"] {
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.7em 1.6em;
    border-radius: 4px;
    border: none;
    background-color: #cc0000;
    color: #ffffff !important;
    cursor: pointer;
}

button:hover,
.button:hover,
.WaGadgetButton:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #990000;
}

/* 8. Forms (contact, subscription, login, etc.) */

form input,
form textarea,
form select,
label,
.WaGadgetContactForm,
.WaGadgetSubscriptionForm,
.WaGadgetLoginForm,
.WaGadgetMemberProfile {
    font-family: 'Lato', sans-serif !important;
}

/* 9. Navigation menu typography */

.WaGadgetMenuHorizontal ul.wamenu > li > a,
.WaGadgetMenuVertical ul.wamenu li a {
    font-family: 'Lato', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 10. Footer */

#id_footer,
.footer,
.site-footer,
div[role="contentinfo"] {
    font-family: 'Lato', sans-serif !important;
    font-size: 14px;
    color: #ffffff;
}

/* 11. Footer-specific utilities */

#id_bvJqnrL {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

#id_M6pAnUB {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

/* Utility: force this block and everything inside it to be white */
.footer-white-all,
.footer-white-all * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Force all text inside #id_z5eGBBj to be white */
#id_z5eGBBj,
#id_z5eGBBj * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Nuclear option: everything inside this footer nav block = 12px + white */
#id_EKL5tjn,
#id_EKL5tjn * {
    font-size: 12px !important;
    color: #ffffff !important;
}

/* 12. Blog list gadget – post titles (excerpt gadget) */

.WaGadgetBlog h4 a {
  font-family: "Lato", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #333333;
  text-decoration: none;
}

.WaGadgetBlog h4 a:hover {
  text-decoration: underline;
}

/* -----------------------------------------------------
   LAYOUT: DESKTOP & MOBILE CONTENT WIDTH
----------------------------------------------------- */

/* DESKTOP & TABLET: center content and control width */
@media (min-width: 769px) {
  .zoneContent,
  .regionMain {
      max-width: 1100px !important;   /* adjust 960–1200px to taste */
      margin-left: auto !important;   /* centers the content */
      margin-right: auto !important;
      padding-left: 24px !important;  /* small inner breathing room */
      padding-right: 24px !important;
  }
}

/* -----------------------------------------------------
   MOBILE: TYPOGRAPHY + LAYOUT + MENU FIXES
----------------------------------------------------- */

@media screen and (max-width: 768px) {

  /* Base body text slightly smaller, more compact */
  html, body {
    font-size: 15px;
    line-height: 1.6;
  }

  /* H1: was 48px → now 28px on mobile */
  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5em !important;
  }

  /* H2: 24px → 20px on mobile */
  h2 {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5em !important;
  }

  /* H3: 22px → 18px */
  h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  /* H4: 18px → 16px */
  h4 {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  /* H5/H6: slightly smaller + tighten tracking */
  h5 {
    font-size: 13px !important;
    letter-spacing: 0.07em;
  }

  h6 {
    font-size: 12px !important;
    letter-spacing: 0.09em;
  }

  /* Paragraph spacing a bit tighter */
  p {
    margin-bottom: 0.8em;
  }

  /* Lists: reduce left indent a bit */
  ul, ol {
    margin-left: 1.1em;
  }

  /* Navigation: slightly smaller and less tracking on mobile */
  .WaGadgetMenuHorizontal ul.wamenu > li > a,
  .WaGadgetMenuVertical ul.wamenu li a {
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  /* Buttons: keep readable but not huge */
  button,
  .button,
  .WaGadgetButton,
  input[type="submit"],
  input[type="button"] {
    font-size: 13px;
    padding: 0.6em 1.3em;
  }

  /* MOBILE: no extra margins, small side padding for content */
  .zoneContent,
  .regionMain {
      margin-left: 0 !important;
      margin-right: 0 !important;
      max-width: 100% !important;
      padding-left: 12px !important;   /* tweak 12–16px if needed */
      padding-right: 12px !important;
  }

  /* MOBILE MENU TEXT COLOR (try to catch both desktop & mobile collapse) */
  .WaGadgetMenuHorizontal a,
  .WaGadgetMenuHorizontal span,
  .WaGadgetMenuHorizontal li {
      color: #ffffff !important;
  }

  .WaGadgetMenuHorizontal .menuInner,
  .WaGadgetMenuHorizontal .menuInner ul li a {
      color: #ffffff !important;
  }

 @media (max-width: 768px) {

  /* MOBILE HAMBURGER PANEL – background + text color */
  .WaGadgetMobilePanel,
  .WaGadgetMobilePanel *,
  .WaGadgetMobilePanel a,
  .WaGadgetMobilePanel li,
  .WaGadgetMobilePanel span,
  .WaGadgetMobilePanel .menuText {
      background-color: #222222 !important;  /* panel background */
      color: #ffffff !important;             /* text color */
  }

  /* Menu links specifically */
  .WaGadgetMobilePanel a {
      color: #ffffff !important;
  }

  .WaGadgetMobilePanel a:hover,
  .WaGadgetMobilePanel .selected > a {
      background-color: #990000 !important;
      color: #ffffff !important;
  }
}


  /* Shrink the logo on mobile (Wild Apricot logo path pattern) */
  img[src*="Sys/Branding/Logo"] {
      max-width: 180px !important;   /* tweak to taste */
      height: auto !important;
  }
}
/* 6. Blockquote style — completely neutralize it */
blockquote {
    border-left: none !important;
    padding-left: 0 !important;
    margin: 0 0 1em 0 !important;
    font-style: normal !important;
    color: inherit !important;
}
/* --------------------------
   HEROIC AZ – Responsive Background Section
   Applies to id_FmZXIPF
--------------------------- */

/* Desktop + Tablet */
#id_FmZXIPF {
    background-image: url("https://heroicaz.us/resources/pictures/Arizona/getty-images-x1LysbPRYNU-unsplash-2.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    min-height: 350px;    /* adjust as desired */
    padding: 40px 20px;   /* ensures visible space over image */
}


/* Mobile override */
@media (max-width: 767px) {
    #id_FmZXIPF {
        background-image: url("https://heroicaz.us/resources/pictures/Arizona/getty-images-x1LysbPRYNU-unsplash-2.jpg") !important;
        background-size: cover !important;
        background-position: center center !important;

        min-height: 250px;   /* mobile-friendly height */
        padding: 30px 15px;
    }
}