/* ==========================================================================
   HearMeWA — Global Custom Styles
   No build step. Edit this file directly, save, refresh.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Custom Properties
   ------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --hmw-dark-green: #106836;
  --hmw-dark-green-hover: #0b4524;
  --hmw-light-green: #1ddf79;
  --hmw-light-green-hover: #3cfb97;
  --hmw-danger: #dc3545;
  --hmw-danger-hover: #bd2130;
  --hmw-violet: #de1b80;
  --hmw-violet-hover: #be176e;
  --bs-primary: #106836;
  --bs-secondary: #56bc70;

  /* Typography scale */
  --hmw-font-hero:     4.5rem;
  --hmw-font-h1:       3rem;
  --hmw-font-h2:       1.8rem;
  --hmw-font-body-lg:  1.75rem;
  --hmw-font-body:     1.5rem;
  --hmw-font-body-sm:  1.25rem;
  --hmw-font-ui:       1rem;
  --hmw-font-label:    0.85rem;

  /* Text colors */
  --hmw-text-dark:   #222;
  --hmw-text-body:   #333;
  --hmw-text-muted:  #555;
  --hmw-text-light:  #777;
  --hmw-text-black:  #000;
  --hmw-text-white:  #fff;

  /* Section spacing */
  --hmw-section-pad-y:    4.5rem;
  --hmw-section-pad-y-sm: 2.5rem;
  --hmw-content-gap:      3rem;
  --hmw-card-pad:         1.5rem;

  /* Container widths */
  --hmw-container-wide:    1320px;
  --hmw-container-content: 900px;
  --hmw-container-narrow:  600px;
}

/* -------------------------------------------------------------------------
   Mobile Responsive Overrides
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --hmw-font-hero:     2.5rem;
    --hmw-font-h1:       2rem;
    --hmw-font-h2:       1.5rem;
    --hmw-font-body-lg:  1.35rem;
    --hmw-font-body:     1.25rem;
    --hmw-font-body-sm:  1.1rem;
    --hmw-font-ui:       1rem;
    --hmw-font-label:    0.8rem;

    --hmw-section-pad-y:    2.5rem;
    --hmw-section-pad-y-sm: 1.5rem;
    --hmw-content-gap:      1.5rem;
    --hmw-card-pad:         1.25rem;
  }

}

/* -------------------------------------------------------------------------
   @font-face — Afacad (self-hosted)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Afacad";
  src:
    url("../fonts/Afacad-Regular.woff2") format("woff2"),
    url("../fonts/Afacad-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Afacad";
  src:
    url("../fonts/Afacad-Italic.woff2") format("woff2"),
    url("../fonts/Afacad-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Afacad";
  src:
    url("../fonts/Afacad-Medium.woff2") format("woff2"),
    url("../fonts/Afacad-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Afacad";
  src:
    url("../fonts/Afacad-MediumItalic.woff2") format("woff2"),
    url("../fonts/Afacad-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Afacad";
  src:
    url("../fonts/Afacad-SemiBold.woff2") format("woff2"),
    url("../fonts/Afacad-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Afacad";
  src:
    url("../fonts/Afacad-SemiBoldItalic.woff2") format("woff2"),
    url("../fonts/Afacad-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Afacad";
  src:
    url("../fonts/Afacad-Bold.woff2") format("woff2"),
    url("../fonts/Afacad-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Afacad";
  src:
    url("../fonts/Afacad-BoldItalic.woff2") format("woff2"),
    url("../fonts/Afacad-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/* -------------------------------------------------------------------------
   Base Typography
   ------------------------------------------------------------------------- */
body {
  font-family: "Afacad", sans-serif;
  font-size: 16px;
  color: var(--hmw-text-dark);
}

/* -------------------------------------------------------------------------
   Material Symbols
   ------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 24 !important;
}

/* Trust badge icons — the "Whatever you're dealing with" section */
.hmw-trust-icon .material-symbols-outlined {
  font-size: 2.5rem;
  color: var(--hmw-dark-green);
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 48;
}

/* Hero badge icons */
.hmw-badge .material-symbols-outlined {
  font-size: 1em;
  vertical-align: middle;
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 20;
}

/* Step section icons */
.hmw-step-icon .material-symbols-outlined {
  font-size: 2rem;
  color: white;
  font-variation-settings:
    "FILL" 0,
    "wght" 300,
    "GRAD" 0,
    "opsz" 40;
}

/* Generic icon helper — small inline */
.hmw-icon {
  vertical-align: middle;
  margin-right: 0.15em;
}

/* -------------------------------------------------------------------------
   Colored Banner Sections (shared pattern — green + blue variants)
   ------------------------------------------------------------------------- */
.hmw-green-banner,
.hmw-blue-banner {
  position: relative;
  margin-bottom: 1rem;
}

.hmw-green-banner { background-color: #1ddf79; }
.hmw-blue-banner  { background-color: #C0E6EF; }

.hmw-green-banner-inner,
.hmw-blue-banner-inner {
  max-width: var(--hmw-container-wide);
  margin: 0 auto;
  padding: 1.5rem 12px 2.5rem;
  position: relative;
}

.hmw-green-banner .hmw-section-label,
.hmw-blue-banner .hmw-section-label {
  font-size: var(--hmw-font-body);
  line-height: 1.4;
  min-height: 2.1rem; /* 1.5rem × 1.4 — holds space even when empty */
  font-weight: 400;
  color: var(--hmw-text-black);
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}

.hmw-green-banner h2,
.hmw-green-banner h3,
.hmw-blue-banner h2,
.hmw-blue-banner h3 {
  font-size: var(--hmw-font-h1);
  font-weight: 700;
  color: var(--hmw-text-black);
  margin: 0;
  position: absolute;
  bottom: -0.75rem;
}

.hmw-green-banner p,
.hmw-blue-banner p {
  color: #000;
}

.hmw-green-banner a,
.hmw-blue-banner a {
  color: #000;
  text-decoration: underline;
}

/* Banners — mobile/tablet: flow naturally instead of absolute heading */
@media (max-width: 767px) {
  .hmw-green-banner,
  .hmw-blue-banner {
    margin-bottom: 0;
  }

  .hmw-green-banner-inner,
  .hmw-blue-banner-inner {
    padding-bottom: 1.5rem;
  }

  .hmw-green-banner h2,
  .hmw-green-banner h3,
  .hmw-blue-banner h2,
  .hmw-blue-banner h3 {
    position: static;
    line-height: 100%;
    padding-bottom: 0.5rem;
  }
}

/* -------------------------------------------------------------------------
   Section Label (shared pattern — small uppercase label)
   ------------------------------------------------------------------------- */
.hmw-section-label {
  font-size: var(--hmw-font-label);
  font-weight: 400;
  color: var(--hmw-dark-green);
  margin-bottom: 0.25rem;
}

.hmw-section-description {
  font-size: var(--hmw-font-body-lg);
  color: var(--hmw-text-body);
  line-height: 130%;
  max-width: 800px;
  margin-bottom: 1.5rem;
}

/* ── Inline content links ─────────────────────────────────────────────────
   Targets <a> tags embedded in body copy across all blocks.
   Inherits the surrounding text color at 80% opacity, underlined.
   Hover restores full opacity. Does NOT apply to .hmw-text-links (CTAs).
   ------------------------------------------------------------------------- */
.hmw-section-description a,
.hmw-step-card p a,
.hmw-steps-description a,
.hmw-timeline-description a,
.hmw-timeline-text a,
.hmw-cta-description a,
.hmw-cs-description a,
.hmw-text-body a,
.hmw-info-body a,
.hmw-resource-desc a,
.hmw-partner-desc p a,
.hmw-checklist-description a,
.hmw-contact-intro a,
.hmw-resources-section-description a,
.hmw-concerns-footer a {
  color: inherit;
  opacity: 0.8;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.hmw-section-description a:hover,
.hmw-step-card p a:hover,
.hmw-steps-description a:hover,
.hmw-timeline-description a:hover,
.hmw-timeline-text a:hover,
.hmw-cta-description a:hover,
.hmw-cs-description a:hover,
.hmw-text-body a:hover,
.hmw-info-body a:hover,
.hmw-resource-desc a:hover,
.hmw-partner-desc p a:hover,
.hmw-checklist-description a:hover,
.hmw-contact-intro a:hover,
.hmw-resources-section-description a:hover,
.hmw-concerns-footer a:hover {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   WordPress Block Overrides
   ------------------------------------------------------------------------- */
.wp-block-buttons .wp-block-button__link {
  font-family: "Afacad", sans-serif;
}

/* -------------------------------------------------------------------------
   Newsletter page — styles the Mailchimp embed to match site forms
   ------------------------------------------------------------------------- */
.hmw-newsletter-form-wrap {
  max-width: var(--hmw-container-narrow);
}

/* Reset Mailchimp container defaults so it picks up theme typography */
.hmw-newsletter-form-wrap #mc_embed_signup,
.hmw-newsletter-form-wrap #mc_embed_signup_scroll {
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: var(--hmw-text-body);
  width: 100%;
  clear: both;
}

/* Banner already renders the page heading — hide the inline "Subscribe" */
.hmw-newsletter-form-wrap #mc_embed_signup h2 {
  display: none;
}

.hmw-newsletter-form-wrap .indicates-required {
  font-size: var(--hmw-font-body-sm);
  color: var(--hmw-text-muted);
  margin-bottom: 1rem;
  text-align: left;
}

.hmw-newsletter-form-wrap .asterisk {
  color: var(--hmw-danger);
  font-style: normal;
  margin-left: 0.15em;
}

/* ── Field rows ── */
.hmw-newsletter-form-wrap .mc-field-group {
  margin-bottom: 1.5rem;
  padding: 0;
  width: 100%;
}

/* ── Labels ── */
.hmw-newsletter-form-wrap .mc-field-group label {
  font-size: var(--hmw-font-body);
  font-weight: 600;
  color: var(--hmw-text-dark);
  display: block;
  margin-bottom: 0.4rem;
}

/* ── Inputs ── */
.hmw-newsletter-form-wrap #mc_embed_signup input[type="email"],
.hmw-newsletter-form-wrap #mc_embed_signup input[type="text"] {
  font-size: var(--hmw-font-body);
  font-family: inherit;
  width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid #ccc;
  border-radius: 0;
  color: var(--hmw-text-dark);
  background: #fff;
  box-sizing: border-box;
  line-height: 1.4;
  display: block;
}

.hmw-newsletter-form-wrap #mc_embed_signup input[type="email"]:focus,
.hmw-newsletter-form-wrap #mc_embed_signup input[type="text"]:focus {
  outline: 2px solid var(--hmw-dark-green);
  outline-offset: 0;
  border-color: var(--hmw-dark-green);
}

/* ── Submit button ── */
.hmw-newsletter-form-wrap #mc_embed_signup input[type="submit"].button {
  font-family: inherit;
  font-size: var(--hmw-font-body);
  font-weight: 600;
  background: var(--hmw-dark-green);
  color: #fff;
  border: none;
  padding: 0.75rem 2rem;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 6px;
  margin-top: 0.5rem;
  width: auto;
  height: auto;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}

.hmw-newsletter-form-wrap #mc_embed_signup input[type="submit"].button:hover,
.hmw-newsletter-form-wrap #mc_embed_signup input[type="submit"].button:focus {
  background: var(--hmw-dark-green-hover);
  color: #fff;
}

/* ── Response / error messages ── */
.hmw-newsletter-form-wrap #mc-error-response,
.hmw-newsletter-form-wrap #mc-success-response {
  font-size: var(--hmw-font-body);
  margin-bottom: 1rem;
}

.hmw-newsletter-form-wrap #mc-error-response   { color: var(--hmw-danger); }
.hmw-newsletter-form-wrap #mc-success-response { color: var(--hmw-dark-green); }

/* -------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------- */
.scroll-to-top {
  cursor: pointer;
}