/* -----------------------------------------------------
   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 (as you specified) */
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: #676767 !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: #999999 !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 — safe version */
body blockquote:not(:has(li)) {
    font-style: italic;
    border-left: 4px solid #cc0000;
    padding-left: 1em;
    margin: 1.5em 0;
    color: #555555;
}


/* 7. Buttons (generic WA + HTML buttons)
   Adjust if you already have a very specific button style.
*/

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;
}
/* Fix: Remove red border but keep the indent */
blockquote {
    border-left: none !important;
    padding-left: 1em !important; /* restores indent */
    margin-left: 0 !important;
}


/* -----------------------------------------------------
   MOBILE TYPOGRAPHY TUNING (max-width: 768px)
   Add this BELOW your main typography system
----------------------------------------------------- */

@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 32px on mobile */
  h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5em !important;
  }

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

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

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

  /* H5/H6 can stay mostly the same, just tighten a bit */
  h5 {
    font-size: 13px !important;
    letter-spacing: 0.07em;
  }

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

  /* Paragraph spacing a bit tighter so long text blocks feel better */
  p {
    margin-bottom: 0.8em;
  }

  /* Lists: reduce left indent a bit for small screens */
  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;
  }
}



#id_bvJqnrL {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
#id_M6pAnUB {
  display: flex;
  justify-content: flex-end;  /* pushes all child items to the right */
  align-items: center;        /* keeps them vertically aligned */
  gap: 20px;                  /* optional: adds space between items */
}

/* Utility: force this block and everything inside it to be white */
.footer-white-all,
.footer-white-all * {
    color: #ffffff !important;
    fill: #ffffff !important;  /* for icons/SVGs */
}
/* 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 = 10px + white */
#id_EKL5tjn,
#id_EKL5tjn * {
    font-size: 12px !important;
    color: #ffffff !important;
}
/* Blog list gadget – post titles */
.WaGadgetBlog h4 a {
  font-family: "Lato", sans-serif;
  font-size: 28px;      /* adjust as needed */
  font-weight: 700;
  color: #333333;       /* Heroic black */
  text-decoration: none;
}

/* Optional: hover state */
.WaGadgetBlog h4 a:hover {
  text-decoration: underline;
}